Flash MX Basic Animation Tutorial

This tutorial will cover the basics of tweening and key frames in FlashMX animation.

1. Open Flash MX and draw a square. Select the square by double clicking on it or drag selecting around it.
   
2. Go to the main menubar and select "Insert" ->"Convert To Symbol", or hit key F8. Select "Movie Clip" behaviour and name it. Movie Clips usually have the prefix "mc_" before them. You may wonder why we didn't give the square the behaviour of a graphic. Well later when we are learning Actionscript to animate this square then it will all become as clear as mud. Hint - we can control the behaviour of a Movie Clip using Actionscript but we can't control a graphic. And also a movie clip can have added features such as transform it into a car or a space ship and have fire coming out of its end, have its wheels turning etc etc.
   
3. Double click on the layer name and call it "Square" (ahh , how creative). Click on frame 30 and select "Insert" -> "Key frame" , or better still just hit key F6. Your timeline should look like this.
   
4. Move the square to the right side of the frame. Frames 1 and 30 are called "Key Frames" . They are the extreme ends of any movement that we wish to make. We are now going to tween the frames between these keyframes. Tweening means to draw the frames or animate from one key frame to the other key frame. Move the play head through all the frames from 1 to 30. You will see the square jump from left to right. We need to move it gradually between these two key frames.

Flash Tutorials in Video Format - Watch them now at LearnFlash.com

5. Right click on the timeline in layer "square" about frame 20 and select "Create Motion Tween"
   
6. You should see an arrow in the timeline going from key frame 1 to key frame 30. Press enter. You should see the square move from the left to the right of the screen
   
7. Left click on frame 40 and to make a key frame, hit F6. Move the square to the bottom of the frame. Right click on the timeline between frame 30 and 40 and select "Create motion Tween".
   
8. Repeat the process above for frame 50 and place the square back at the beginning (or better still, just a little bit below it and to the right a fraction). The black dots on the timeline are the key frames.
   
9. click on frame 20 or nearabouts and open the properties window if not already open. Select CW (ClockWise) Rotation and make it rotate "5" times. The square will rotate 5 times between frame 1 and frame 30.
   

That's it for now. Try and practice with all sorts of shapes and with textin Flash MX . Try spinning in text and moving text in and out.