How to create a simple motion animation in Flash CS3

This  Flash CS3 tutorial shows how to create a Flash animation using Adobe Flash CS3 (for Flash CS4 see the next post, because there are some differences on the application interface).
In this example we will create an animation based on Flash motion tweens that will move an object on the screen on a linear trajectory. Something like that:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.itcsolutions.eu/wp-content/uploads/2009/12/SquareAnimation.swf” width=”400″ height=”100″ targetclass=”flashmovie” play=”true” loop=”true” menu=”true”]Get Adobe Flash player

[/kml_flashembed]

Some basic concepts about Adobe Flash CS3 used in this tutorial are explained in this post Adobe Flash CS3 and CS4 interface, basic commands and concepts
1. Create a new Flash animation (Flash File ActionScript 2.0 or 3.0)

2. Rename the implicit layer (double Mouse-click on its implicit name – Layer 1) to become Background

3. Create a new layer (from the application menu Insert ->Timeline -> Layer) for the object that is going to move on the stage and name it Logo

4. On the new layer (Logo) draw a round corner rectangle using Rectangle Tool from the Toolbar; before drawing the object,  select the Rectangle Tool and set its fil color and corners angle from the Property Inspector

Rectangle Tool Property Inspector
Rectangle Tool Property Inspector

5. Create a keyframe at the 30 frame on the Logo layer (select the 30th frame and press F6); this will duplicate the first keyframe over the next 30 frames and will create a new keyframe at the end

6. Create a motion tween on the Logo layer between the keyframes at frame 1 and 30 (if you forget how to create a motion tween see the post Adobe Flash CS3 and CS4 interface, basic commands and concepts)

Flash Motion Tween
Flash Motion Tween

7. Select the first keyframe on the Logo layer and using the Selection Tool set the starting position of the object
8. Select the second keyframe (at frame 30) on the Logo layer and using the Selection Tool set the ending position of the object
9. Test the animation using Ctrl+ Enter (on Windows)

Here is the video tutorial for this example:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.acs.ase.ro/multimedia/SuportFlash/AnimationFlashMovie.swf” width=”550″ height=”400″ targetclass=”flashmovie” play=”true” loop=”true”]Get Adobe Flash player

[/kml_flashembed]