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