Category Archives: Flex
Working with Animations and MotionsPath – Feed my Fish!
Here is an example how to use Animate and MotionPath. In this particular example I have some animations running at same time, so I will explain the fish movement.
My intention was to make it so realistic as possible, so I thought using some Math, so that while the fish is moving in the x axes it oscillates in y axes.
To use the Animate you have to create a MotionPath and give the property that you want to animate.
For example if you want to move a object from position 0 to 200 an than to come back to position 0 you can simple do:
<s:Animate id=”fishRotator” target=”{yourObject}”>
<s:MotionPath property=”x”>
<s:Keyframe time=”0″ value=”0″/>
<s:Keyframe time=”2000″ value=”200″/>
<s:Keyframe time=”4000″ value=”0″ /> </s:MotionPath>
</s:Animate>
Here is simple fish moving (Right click to view Source).
To improve the fish movement I split the fins and the tail from the body, and give it some rotations. I also put some random bubbles. You can also feed the Fish
(1 Comment)
TIP – Simulate trackhighlight in Spark Hslider
Has you may notice Spark sliders don’t have the “showtrackHighlight “ property, so i will show you a quick tip to simulate this.
1.First create a custom skin to your Slider.
2.Create a image or a graphic that will be your trackHighlight (on your track skin Class)
3.Create a mask to show the trackHighlight (on your track skin Class)
Than what we need to do is to change the mask size to show your skinning Spark Components.
Here is the example (Right click to see the code)
Understanding FXG files
Understanding FXG files
If you have a fxg file you can use it directly like I have explained in my last post, or you can open it with a text editor to see what code do you have inside it.Let’s take for example this simple fxg file.
If you open it, you will see something like:
<Group ai:objID="b883600" ai:seqID="2" d:id="2" d:type="layer" d:userLabel="Layer 1">
<Rect x="0.5" y="0.5" width="200" height="200" ai:objID="b8c5680" ai:seqID="3">
<fill>
<SolidColor color="#FF0000"/>
</fill>
<stroke>
<SolidColorStroke caps="none" joints="miter" miterLimit="10"/>
</stroke>
</Rect>
</Group>
</Group>
…and so one. This lines, is just what you need. Delete all the “ai” and “d” tags and add spark tag “:s” in every line, you will get something like this:
<s:Group >
<s:Rect x="0.5" y="0.5" width="200" height="200">
<s:fill>
<s:SolidColor color="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke caps="none" joints="miter" miterLimit="10"/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
In the end you have the same result. You can test it in a application and add the following code:
<assets:Square />
<s:Group >
<s:Group >
<s:Rect x="0.5" y="0.5" width="200" height="200">
<s:fill>
<s:SolidColor color="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke caps="none" joints="miter" miterLimit="10"/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
</s:VGroup>
That’s it
Using FXG inside Flex – Improving Image quality
A good way to save some space and improving your image quality inside a flex project is using *.*fxg files. So if you have an image and you can reproduce it to a fxg file (using Illustrator for example) you just have to add that file to your flex project and use it directly.
Example:
I have a bubble.fxg file in my /assets folder.
In your component/application you can use <assets:bubble /> to add that image to the stage, using it like another object, scaling it as you wish 
That’s it