Beginners Flash Tutorial MovieClips

Using MovieClips in Flash

This Flash tutorial introduces the use of MovieClip symbols in Flash and how they function within the main Timeline.

The Timeline is key to understanding how Flash movies work. If you open Flash and create a new document you should see the Timeline running across the top of the screen (choose Window > Timeline from the menubar if it isn’t visible):

When you create a .fla document and export a .swf movie from it, the .swf when opened will start at Frame 1 on the main Timeline and present the viewer with each successive frame with content on it (unless ActionScript code instructs it to do otherwise), looping back to the start each time it reaches the last frame. The frames are numbered on the header above the Timeline as you can see and all frames with content will be coloured in some way.

MovieClip symbols additionally have their own Timeline. When placed on the main Timeline in a Flash movie, a MovieClip will similarly start at its first frame and run continuously presenting all content on its frames (unless instructed otherwise by code).

To demonstrate this, choose Insert > New Symbol from the menubar (or CTRL+F8); give the symbol a name and choose Movie clip as the type:

Flash has now taken you inside the new MovieClip symbol:

The area at the top of the Timeline indicates your current location within the Flash movie (where it reads Scene1 and myclip). The cross in the centre of the stage is the position 0, 0 (x, y) within the new MovieClip.

To add some content to the clip, draw a shape and postion it at 0, 0 (x, y) – with the shape selected enter 0 into the X and Y fields on the Properties panel (Window > Properties > Properties or CTRL+F3 if it isn’t visible):

Still with the shape selected, Press F8 (or choose Modify > Convert to Symbol); choose a name and Graphic as the type:

We will use this shape to create a simple animation inside the MovieClip; select frame 10 on the Timeline by clicking on it. Make this frame a keyframe by pressing F6 or choosing Insert > Timeline > Keyframe:

Now, on this frame, move the shape to another position on the stage. Select Frame 1 again and create a Motion Tween by choosing Motion from the Tween drop-down list on the Properties panel or by right-clicking (or CTRL+click) on the frame and choosing Create Motion Tween:

The timeline now indicates the tween on the frames:

If you’re unfamiliar with tweening, what we have done here is position the shape on the first and tenth frames, then instructed Flash to create a transition between the two; the Motion Tween moving the shape along the distance between the two points so that it progresses evenly along its course. To see the effect, place the playhead on the first frame by clicking on it and press Enter; you should see the animation on the stage as the playhead moves along the timeline.

Now go back to the main Timeline by pressing the backward arrow button on the Timeline header:

All that we’ve done so far is create a MovieClip in the Flash document’s library, meaning that we’ve defined exactly what should happen within the clip and prepared it for use in our movie, but we haven’t actually placed it in the movie yet. To do this, select the MovieClip symbol in the library (Window > Library if it isn’t visible) and drag it onto the stage:


Now test your movie (press CTRL+Enter or choose Control > Test Movie); you should see the animation in your clip looping continuously. To make the clip play only once, we need to edit the MovieClip; to do this right-click (or CTRL+click) it in the Library and select edit, or double-click on the instance of the clip on the stage. Select frame 10 and open the Actions Panel (F9, click on the Actions tab or choose Window > Actions), enter the following code:

 stop(); 

Now test your movie again, the clip should play only once. By placing the stop action here, you have instructed only that particular MovieClip to stop; any other activity on the main Timeline will continue, as the MovieClip operates according to its own Timeline.