6.2. Controlling the Character with ActionScript As you saw previously, you need to add a stop() action to the main timeline to prevent an animation from looping automatically. In addition, you need to tell the legs to stop moving when the character is standing still. To do this: Close the Preview window and reopen the Actions panel. Go back to the script in frame 60 in the actions layer. Press Enter/ Return to add a blank line at the end of the script, and type box_guy_ mc.legs_mc.stop(); to make the legs stop moving in this frame as well. Save your work and test the movie.
This last line of code, added to the main timeline, is simply another stop() command, but it's targeted at the legs_mc instance located inside the box_ guy_mc instance. Remember that clips exist in a nested hierarchy, starting from the main timeline. The dot operator (a period) is used to build the path to the intended target clip, much like slashes are used to separate folders in a directory path. In this case, box_guy_mc.legs_mc.stop(); tells the Flash Player to look inside the box_guy_mc clip in the main timeline and tell the legs_mc clip to stop its playback. Now Box Guy walks across the Stage and stopsand his legs stop too. 6.2.1. Creating the Background Before publishing the movie, create a background graphic like the one in Figure 6-10, so the character appears to be walking down a street: Add a new layer, name it bg (short for background), and drag it beneath the other two layers. Drag the playhead to frame 1, so the character isn't in the way as you draw the street. On the Stage, draw a gray rectangle that occupies the bottom half of the Stage. Delete the right, left, and bottom lines of the stroke. You don't need them. Figure 6-10. The completed street background | Absolute and Relative Target Paths | The main timeline in a Flash movie is metaphorically referred to as the "root directory" of the file. This is based on familiar analogies, such as the way your computer's hard drive directories or an HTML web site's directories are organized. When navigating to a file on your computer or a web site, you often need to traverse directories. Using pathnames allows you to point to a file from another location. The equivalent of pathnames are also used in Flash to refer to other objects ActionScript can control. Unlike in a web site URL, however, you do not use slashes (/) to describe the structure of objects you are traversing. You still form a path referring to a nested structure by stringing together nested objects, but in ActionScript, you join these objects with periods (.). This is called "dot syntax." Just like when writing HTML, in ActionScript you can refer to an object you wish to target with an absolute path or a relative path. An absolute path points to a target starting from the root directory of the movie. In fact, the main timeline in a Flash movie is also referred to as _root in dot syntax. This would be similar to a file path on your computer that started with the name of your hard drive, or an HTML link that started with your domain name. Absolute paths are easy to use because they never change, but they are also quite rigid. If you moved the aforementioned computer file to another hard drive but didn't change the path you were using, the file wouldn't be found. Similarly, if you moved a web site to another domain but used absolute paths in all of your links, your site would cease to work. The same is true with absolute paths to ActionScript targets. Say you referred to the legs that are currently nested inside the movie clip that is your Box Guy using an absolute path. To do this, you would write _root.box_guy_mc.legs_mc. If you later put Box Guy inside another movie clip, or even loaded your main file into another Flash movie (such as a preloader), the path would no longer reach the desired target. An ActionScript relative path is more flexible. This type of path points to a target relative to the timeline in which the path is used. For example, your original path, box_guy_ mc.legs_mc, is relative to the main timeline. However, even if the main file is loaded into another Flash file preloader, the path will still work. The target clip will not have the same relationship to the _root any longer, because the new preloader is now the _root. However, the clip's relationship to the previous main timeline is the same. A couple of keywords are very useful when writing relative paths. The _parent keyword means the timeline in which the "current" timeline (the timeline from which the path is used) resides. In other words, the _parent is one level up. This is similar to writing ../ in an HTML link to go up one directory. The this keyword refers to the "current" timeline (the timeline from which the path is used). For example, if you wanted to refer to legs_mc from the main timeline, you could use this.box_guy_mc.legs_mc for the relative path. If you wanted to target legs_mc from box_guy_mc, you would use this.legs_mc for the relative path. You'll learn more about paths in the next chapter, when reading about scope. |
Select the remaining stroke, along the top edge of the rectangle, and change its stroke style to Ragged (the third choice in the Stroke Style drop-down list in the Properties panel). Set the stroke color to dark gray. Next, you need to add yellow lane-divider markings to make it look like a street. Activate the Line tool, set the stroke color to yellow, and set the stroke style to Dashed. Set the line thickness to 5. Click the Custom button in the Properties panel to open the Stroke Style dialog box. Beneath the Type drop-down list, enter 40 into the fields that set the length of each dashed line and the distance between the lines. Click OK to close the dialog box. Draw a line from one side of the Stage to the other, in the center of the rectangle. Now you have a lane divider such as you see on a typical street, as shown in Figure 6-10. Shift-select all the parts of the street graphic and convert them to a graphic symbol named street. Save your work.
Finally, you need a blue sky. In some cases, it's easiest just to change the color of the Stage. To do so, click once on the Stage and then click on the Background color swatch in the Properties panel. However, you will find that this approach can be problematic. For example, later in this book, you'll learn how to load one Flash movie into another. When you do this, the Stage of the loaded movie becomes invisible and your blue sky disappears. Also, when creating a self-running projector, you may want the rest of the monitor blocked off to focus on your content. The Flash Stage color is used for this purpose, so you might end up with a big blue background behind your fileincluding under the street. To get around these issues, it's a good practice to use a color shape in the lowest possible layer: Create a new layer and drag it beneath all the other layers. Name it sky. Use the Rectangle tool to fill the Stage with a sky-blue box. Delete the box's stroke if it has one. (If you need many colored backgrounds in a file, you can make this a graphic symbol and reuse it to keep the file size down. Change the color of each use in the Properties panel using the Color menu's Tint option.) Save your work. Choose File Publish to generate a completed SWF file. If you have been following along, box_guy.swf, located in the 06 folder, shows what your completed movie should look like.
Our movie is complete. The character walks from one side of the Stage to the other, blinking the whole time, and stops. When he stops walking, his legs stop moving but he continues blinking, giving the character a lifelike quality. Nesting movie clips within other clips is common in Flash development, as is using multiple clips within one project. Clips can be nested multiple levels deep (a clip within a clip within a clip), as we've done here. A movie clip can be used for an animated logo in a Flash web site, as a container for video in an interface (which you'll construct later), and even as a menu system, similar to those made with JavaScript in traditional HTML-based design. |