Swami Charan's Blog My personal blog…

Using Motion Editor in Flash CS4

Motion Editor is one of the new Features of Adobe Flash CS4. This helps us in creating animations of nice quality, accuracy yet with a minimal of effort compared to the conventional way of animation we used to see until Flash Cs3.

Till now, if we had to create any animation, we have to create keyFrames, apply Tween, apply Ease if needed. If we had to remove the tween Undo Tween or Remove Tween. It was all a bit tedious one. But with new Motion Editor, all these tasks are made simple and quite fast with good accuracy.

Now we will start creating a simple motion tween using Motion Editor.

Create a new Flash AS3 Document. We have a car MovieClip located at outside of the stage to the right at First Frame.

 

 

 

 

 

 

 

 

 

 

 

We are going to create a simple motion Tween in which a car moves from right(out of the stage) to left(out of the stage). We dont have to creat any KeyFrames to indicate the end of the Frame animation. Just create some empty frames (say 60).

In order to create motion tween for this MovieClip using Motion Editor, Select car movieclip, goto Insert->Motion Tween or Right-click the car and select Create Motion Tween from the context menu.

Once this is done, you can see that Motion Editor Panel is displayed.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

As you can see in Motion Editor Panel shows all the properties which can be tweened like X, Y, Rotation, Skew and Scale etc. Once you are successful till here. Move to the 60th frame on Main Timeline. Drag the car movieclip to the left side of the stage, move it outside of the stage, to signify the end point of the motion tween.

Check  in the motion editor for the value of X to verify. As you can see thats all we need to do to create a simple motion tween.

Run the swf and check if the motion tween works.

Now we will look into Motion editor for a while. For each tweenable property, you can see that there will be two arrows, clicking on them will move the playhead to the appropriate keyframe to that side. Like clicking the Left arrow takes you to the keyframe present to the left. The diamond icon in between arrows is used to insert keyframes at the current location or can delete a keyframe if it already exists at that playhead location.

These options will make the user to know what exactly is happenig while editing keyframes of the animation, as in, which property is affected by inserting /removing keyframes.

Adding Easing:

Till now as you can see, its very simple creating a motion tween. Motion editor also gives up different easing motions by default. Click the combo box beside the arrows and check that 'Simple (Slow)' is one of the options there. If you apply it, you can see how smoothly the animation plays.

You can configure the type of easing as well.

If you can see 'Eases' option below different properties, you can give a value of -100 to 100 for that easing motion. Giving '-100' will make the animation to start slowly and becomes normal. Giving value '100' makes the animation to slowdown at the end. If we give value of '0', the motion speed will be same throughout.

Give these values to this easing motion and check.

You can add more kinds of eases to your animation. Click the '+' button on Eases panel and you can see all the available easing motions available.

 

 

 

 

 

 

 

 

 

Apply all these different easing motions and check how the animation looks.

Motion Tween to Children:

In the above animation, its just the car moves.  Its not that realistic. It would be more nicer if we could rotate the wheels while the car moves. This can be done very easily using motion editor.

In case of this car movieclip, go inside it, i have placed both the front and back wheels in differnet layers to make it easier for me to apply tween.

Follow the same procedure as above, click the front wheel, right-click->Create Motion Tween. Goto to the last frame of the time line of this layer. Here, to make the wheel rotate, we will use 'Rotation Z' property. Enter a value of '360', which signifies a complete rotation.

Similarly apply tween to the back wheel. Run the swf and check the animation.

This is just the basic animation you could create. You can apply different tweens/eases to different properties simultanesously in case of any complex animation.

As you saw, Motion Editor gives us a new way of handling Keyframes, adding different easing motins to differnet properties. Not only these, you can incorporate Color Tweens like Alpha, Brightness, Tint, Advanced Colot. You also add differnet Filters like drop Shadow, Bevel etc for animations.

As you can visualize now, with all these in hand, how nice an animation you can create by using motion editor efficiently.

Just try it out, you would love it....