Controlling Individual Items (Movieclips) in a Flash Movie

On a previous page, we saw how to add playhead control commands to the movie's main timeline and to add a button on that same timeline. This allows a person interacting with the movie to start and stop its playhead, or even to send the playhead to a particular frame in the movie. But it doesn't allow control of individual elements within a Flash movie, such as the flying airplane or bleating sheep. To control those items individually (independently of each other and independently of some fixed place along a timeline), we need to make them into movieclips.

Movieclips

A movieclip is like a Flash mini-movie -- it has its own timeline and so can be addressed and controlled independently of the main timeline and independently of other movieclips. It is a type of symbol, like the graphic symbol we used when making motion tweens.

A movieclip will begin to play as soon as the playhead encounters it, and will continue to loop, unless actionscript within the movieclip or elsewhere in the movie tells it to do otherwise, or unless the playhead goes to a frame where the movieclip no longer exists.

There are three ways to create a movieclip:

1. Create one from scratch
   Choose Insert, New Symbol. In the symbol dialog box, choose movieclip and give the movieclip a symbol name. Flash will then create a new movieclip symbol in the library and display the timeline of that new movieclip, which you can put content into just like you would put it into the timeline of the main movie -- putting content on stage, extending the timeline with frames, adding keyframes, tweens, etc. Click Scene1 at the upper left to return to the timeline of the main movie.
2. Make one from an existing object or objects on stage
   Select an object or objects on stage (including other movieclips if desired) in a single frame and choose Modify, Convert to symbol (and set the symbol type to movieclip). Then double-click the instance of the new movieclip on stage to build its timeline or otherwise edit it if desired. Make sure you always check the upper left corner of the stage to see what you are currently editing, and the properties panel to see what is currently selected.
3. Make one from an existing sequence of frames and keyframes
   Use this method if you've already created a sequence of keyframes and/or tweens in one or more layers that you'd like to convert to a movieclip: Select all the frames and all the layers that you want to convert by click-dragging over all of them. Right-click and choose Cut Frames (or Edit, Timeline, Cut frames). Now all your frames and their content will be on the clipboard. Do Insert, New Symbol and choose Movieclip and give it a symbol name. Right-click frame 1 of the newly created movieclip (which you should also see in the library), and choose Paste Frames. All your layers and content will be kept intact. If you had any masks or guided motion tween paths in the original sequence, you may have to redo those (drag any layers that need to be under mask layers back under, and recreate any motion tween guide layers from the content of the guide layers they got converted to in the movieclip).

Converting the flying airplane to a movieclip

Let's look at an example of the 3rd way of creating a movieclip -- from an existing sequence of frames, such as we already have in our sheep movie. Open sheepscene2.fla (link at right under Files) and let's look at changing the existing animations to movieclips:

• First, copy the frames that include the flying airplane tween onto the clipboard by selecting the whole tween, from start keyframe to end keyframe (click-drag to select the frames), right-click and choose Copy Frames (or, without right-clicking, choose Edit, Timeline, Copy Frames):
  
  
  
  
• Then create a new, blank movieclip by choosing Insert, New Symbol (or pressing mac:cmd-F8, pc:ctrl-F8). Name it flyingplane (this is the movieclip's symbol name) and choose Movieclip:
  
  I
  
  
• When you press Ok in the dialog box, you'll be taken into the timeline of the new movieclip so you can enter content there. We want our new movieclip to contain the tween frames from the original movie, so click in frame 1 of the movieclip (this step is sometimes forgotten and if you don't do it, you won't be able to paste anything), right-click and choose Paste Frames:
  
  
  
  
• There is one more thing we need to do to keep this movieclip from looping endlessly when the playhead encounters it: we need to tell it to stop (and wait for the user to click a button to start it). While still in the timeline of the flyingplane movieclip, add a new layer and call it actions. Click frame 1 of the actions layer and open the Actions panel (arrow in middle right side of Properties panel). Make sure the actions panel shows "Actions - frame" at the top and type stop(); into the panel:
  
  
  
  
• Finally, click Scene1 at the upper left above the timeline to return to the main timeline.

Converting the bleating sheep to a movieclip

The steps to create the bleating sheep are exactly the same as the airplane, except that all of the relevant frames in 4 different layers have to be copied and pasted. Make sure you include the frame before the bleating sequence begins in the sequence of copied frames.

Then proceed as above, creating a new movieclip (bleatingsheep), Pasting the Frames you copied into frame 1 of the new movieclip, and adding an actions layer with a stop() in frame 1.

Changing the timeline of the main movie

Now that we've made movieclips of all the animated parts of the timeline, the main timeline itself can be collapsed to just one frame, and the movieclips placed in that frame. They'll be stopped because of the stop actions we put into their first frames, but we'll add buttons in the next step to make them play.

First, select all the frames except frame 1, in all layers, and remove them (Edit, Timeline, Remove Frames or right-click and choose Remove Frames):

Then find the airplane layer, which now has an empty keyframe (because its content all started farther down the timeline). Open the library and drag a copy of the flyingplane movieclip onto the stage.

With the plane movieclip selected on stage, type this instance name into the box in the Properties panel which says <instance name>: plane_mc. A symbol in the library always has a symbol name associated with it (flyingplane, eg). When instances of the symbol are dragged onto the stage, each instance can have its own instance name, and in fact, must have an instance name if the instance is to be addressed with actionscript.

Delete all the sheep2 layers and the baa layer. Add a new sheep2 layer and drag an instance of bleatingsheep from the library into frame 1 of the new layer. Give it instance name sheep_mc.

Adding the Buttons

Make a new buttons layer somewhere above the foreground hill layer. Choose File, Import, Open External Library and find buttons_forscene.fla (as you did to get the Replay button on this page). Drag a copy of do_airplane and do_sheepbleat out of the library (of buttons_forscene.fla) and onto the stage (of sheepscene2.fla). Select do_airplane, open the Actions panel and type in

on (release) {
	plane_mc.gotoAndPlay(2);
}

Then select do_sheepbleat and type in

on (release) {
	sheep_mc.gotoAndPlay(2);
}

Save the new movie as sheepscene3.fla. Press cmd-Enter (pc:ctrl-Enter) to test the movie.

Home  :  Notes Index  :  Resources  :  About/Contact  :  Downloads