iCanCode/Tutorials/The Flash Timeline

This tutorial is for beginners in Flash 6 upwards. In it I will try to explain how the timeline in Flash works. Let's begin by bringing up a new document in Flash. Above the blank white space called the 'stage' there is the timeline and this is what makes all Flash movies work.

First you must understand the difference between frames and keyframes. When you right click a blank space on the timeline it comes up with a number of options such as 'insert frame' and 'convert to keyframe'. This is the easiest way to add a new frame onto the timeline. Now here's the diffrence between frames and keyframes: keyframes are just extended by frames, keyframes are the only frame which changes the image on display. So, for example, if you had a picture of a green apple and you wanted it to turn red on the 20th frame this is what the sequence would be: KEYFRAME - with a picture of a green apple, then 18 FRAMES - all showing the same image as on the keyframe, then a KEYFRAME - with a new drawing of a red apple. Try it out. But what about if you wanted the green apple to fade to red...

Now it is time to talk about the two different types of 'tweens' you can use to do just that. The first is a shape tween and the second is a motion tween. They both smooth things out without the need for excessive keyframes. To use tweens you must only have one main thing on each layer. To use shape tweens just a vector image made in Flash can be used, to use motion tweens you must either use a single text box, a single bitmap image or a Flash 'symbol'. Shape tweens are used to change the colour and overall shape of a picture, motion tweens are used to change the size and position of a picture. Now getting back to the apple. Select all of the 20 frames using shift-click then look at the properties section at the bottom of the page. There is an option called tween, select shape. Now when you play the movie you should see the green apple morph into a red apple.

But what if you wanted the apple to move or grow or even rotate instead of changing colour, well then you need a motion tween. By the way, are you keeping up with all of this? Oh well it's not too hard just try stuff out using the same methods that I have shown, you'll get it. Oh right, you are keeping up? Great! As the apple is an image made in Flash you will need to convert it to a symbol to make this work. First of all delete all of the frames (and keyframes, obviously) apart from the first one with your original apple on. Then select the whole of this apple, right-click it and select convert to symbol, select graphic as the type and you're ready. Right-click on the 20th frame and select 'insert keyframe'. Your symbol should still be there, move it, rotate it, enlarge it and so on. Then select all of the frames and as with the shape tween, in the properties select motion. When you play the movie it should be nice and smooth. Hurray!