Attaching Movie Clips using ActionScript

Did you know you’re able to tell Flash to play a Movie Clip without placing it on the Timeline? That’s right, and it only takes a few lines of ActionScript.

In this tutorial you’ll learn how to use a simple code to load Movie Clips from the Library. Prerequisite skills required for this tutorial include: Creating a button Symbol, setting the Stage’s dimensions, drawing shapes without strokes, and inserting and renaming layers.

STEP 1: Getting Started

Start by creating a new Flash document. Use the default Stage settings or enter a width and height of your choice. Next, double-click directly on Layer 1 in the Timeline and rename it “movie clips.” Click the Insert Layer icon to insert a new layer. Rename the layer “buttons.”

STEP 2: Creating a Movie Clip Holder

Select frame 1 of the “movie clip” layer. Select the Rectangle tool (R). Select a Fill color and no Stroke. Draw a rectangle in the upper left-hand area of the Stage. Control-click (PC: Right-click) on the rectangle. Choose Convert to Symbol from the menu. In the Convert to Symbol dialog window enter “holder” in the Name field. Choose Movie Clip for the behavior. Click the upper right-hand square next to Registration. This sets the registration point of the Symbol. Click OK.

STEP 3: Naming the Movie Clip Instance

Switch to the Selection tool (V). Click once on the rectangle on the Stage. This is an Instance of the Movie Clip “holder.” In the Properties panel, enter “holder” for the Instance name. Double-click the Instance of the Movie Clip to edit its Timeline. Select the fill and press the Delete key (PC: Backspace key). Click the Scene 1 button to return to the main Timeline.

STEP 4: Adding a Button

Select frame 1 of the buttons layer. Create a Button Symbol and place it on the Stage. Alternatively, use one of Flash’s pre-built buttons located in the Common Libraries. To open the library choose Window>Common Libraries>Buttons. Drag a button from the Buttons Library onto the Stage and then close the Buttons Library panel.

STEP 5: Giving a Movie Clip an ID

Either create a Movie Clip or import a Movie Clip from another Flash movie. To import a Movie Clip, choose File>Import>Open External Library. Navigate to a Flash file containing Movie Clips and select it. Click Open. The file’s Library will open. Drag the Movie Clip(s) you want to use to your current document’s Library. Control-click (PC: Right-click) on the Movie Clip in the Library you want to use. Select Linkage from the menu. Check the boxes for both Export for ActionScript and Export in First Frame. Enter a name in the Identifier field. I used “truck” since my Movie Clip contains a truck. Click OK.

STEP 6: Adding the Event Handler Script

Select the button on the Stage. Open the ActionScript Editor Option-F9 (PC: F9). Click the Script Assist button if the Editor doesn’t open in the Script Assist mode. Click the + button and choose Global Functions>Movie Clip Control>on. This adds the on event handler to the button. Check Release if it isn’t already selected.

STEP 7: Adding the attachMovie Script

Make sure the first line of the script is selected. Click the + button and choose ActionScript 2.0 Classes>Movie>MovieClip>Methods>attachMovie. Click in the Object field. Click the Target icon. The Insert Target Path dialog window will open showing a list of named Instances on the Stage. Click on the Movie Clip icon “holder.” Click OK.

STEP 8: Adding the attachMovie Script continued

Click in the Linkage Name field. Type the name of the Movie Clip ID you assigned in Step 5. Remember, in the example I used “truck” but you may have used a different name. Uncheck the Expression checkbox next to the Linkage Name field.

Click in the New Name field. Enter a new name. Uncheck the Expression checkbox next to the New Name field. Remember you aren’t placing an Instance of the Symbol on the Stage. Instead you’re using ActionScript to load it on to the Stage using the attachMovie method. Flash Player needs to know what the Instance’s name will be so that it can “talk” to it. The name you entered in the New Name field is the name you’re giving the Instance.

Enter 1 in the Depth field. The number 1 in the Depth field refers to the depth on the layer in which to play the Movie Clip. Every Movie Clip Instance has its own z axis (depth) that determines the stacking order of a Movie Clip within its parent SWF file or Movie Clip.

STEP 9: Make Adjustments

Choose Control>Test Movie. Click the button to see the Movie Clip load. The loaded Movie Clip and the “holder” Movie Clip’s registration points align when the Movie Clip is loaded. You may need to edit the loaded Movie Clip’s Timeline and adjust its registration point so that it’s placed correctly on the Stage when it loads.

Note: If you get an error, check to see if you placed the script on the button Instance, not the frame. If you still get an error, check to see that you entered the correct ID name in the script. The Output window appears when there is an error in your movie. Usually, you can identify the error from the displayed message.

createObject(‘swf’,'http://www.layersmagazine.com/images/tutorials/design/flash/9/load_movieclip.swf’,'width’,’500′,’height’,’250′,’scale’,'exactfit’,'quality’,'high’,'allowScriptAccess’,'sameDomain’,'bgcolor’,'#ffffff’);

Share & Enjoy


Similar Articles

 

Comments are closed.


Planet Photoshop Photoshop World Kelby Training Lightroom Killer Tips NAPP Scott Kelby