Tag 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
Flex/Air Accessing movieclip in loaded swf
In one of my latest’s works, I had to use two different swfs and Flex to interact between them. For example, I had some movie clips in one swf, and in other I had some visual text that I wanted to show on click in one of the movie clips. Cause the information that I found wasn’t so god, here is a example how can you do it.
What do you really have to do is initialize the movie clips and functions inside of each swf, and then you can use them as you which.
First:
Create 2 swf (I used Flash). In one we have a movie clip that I called BtnClick and in the second one I have a label with visibility set to false, and a function in that allow me to show the label.
{
if(TxtHello.visible)
{
TxtHello.visible = false;
}
else
TxtHello.visible = true;
}
Second: In Flex, use swfLoader to load your content and then initialize the movie clips and the functions that you made is Flash :
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="400" minHeight="100"
>
<fx:Script>
<![CDATA[
import mx.controls.Button;
private var loaderContent1:Object;
private var loaderContent2:Object;
protected function InitMovieClips(event:Event):void
{
var BtnClick:SimpleButton = SimpleButton(loader1.content["BtnClick"]);
BtnClick.addEventListener(MouseEvent.CLICK, ShowHelloWorldText);
loaderContent2 = loader2.content;
}
protected function ShowHelloWorldText(event:MouseEvent):void
{
loaderContent2.FunctionInsideSWF(event);
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<mx:HBox backgroundColor="#CCCCCC">
<mx:SWFLoader id="loader1" source="assets/Loader1.swf" complete="InitMovieClips(event)"/>
<mx:SWFLoader id="loader2" source="assets/Loader2.swf" complete="InitMovieClips(event)"/>
</mx:HBox>
</s:Application>
Link to the project
And that’s it…
Hope you enjoy