FXG is great for making icons in your UI. Of course you can just use bitmaps exported from Illustrator/Photoshop but if you do then your limited with the transitions that you can apply to them. Mouse over any of the shapes below and you’ll see what I mean – you may have to click on the explorer to give it focus so that MouseOver is registered. You can’t do that – easily – with a bitmap. And with FXG you could also animate a change in the stroke-weight if you wanted which can’t be done with bitmaps.

This is the beginning of a library of shapes that I would like to expand upon over time. This approach makes it simple for anyone to adjust the parameters of the shape they want and then just copy the path data into their app.

Arrow

view source

Another thing you can do with shapes made from path data is morph between shapes. Take the one above and set

  • length -> max/right
  • arrow head start -> min/left
  • arrow tips start -> min/left
  • shaft width -> min/left.

Now slide the arrow tips start back and forth between min/max. It doesn't quite go all the way on maximum but you get the idea that you could create one shape that morphed from pointing left to pointing right.

Forward Arrow

view source

Play Button

view source

I'd like to add some shapes with rounded corners but that is kicking my ass so far. :) It would be great if someone made an app that would convert vector shapes to path data. Anyone know if any of the CS5 apps do that?

State Transitions

The state transitions are pretty simple. You can view the source for all the details or take a look at this below for the gist of the transition.

<s:states>
    <s:State name="up" />
    <s:State name="over" />
</s:states>

<s:transitions>
    <s:Transition toState="over" autoReverse="true">
        <s:Sequence targets="{ [ pathFill, pathStroke ] }">
            <s:AnimateColor />
        </s:Sequence>
    </s:Transition>
    
    <s:Transition toState="up" autoReverse="true">
        <s:Sequence targets="{ [ pathFill, pathStroke ] }">
            <s:AnimateColor />
        </s:Sequence>
    </s:Transition>
</s:transitions>
.
.
.
<s:fill>
	<s:SolidColor id="pathFill" color.up="#000099" color.over="#FF00FF" />
</s:fill>
<s:stroke>
	<s:SolidColorStroke id="pathStroke" 
	color.up="#00FF00" color.over="#000099" weight="1" />
</s:stroke>

What do you think?