لطفا منتظر باشید ...
• Index• ExamplesAnimation and Effects with Macromedia® Flash™ MX 2004By
Jen deHaan Publisher: Peachpit PressPub Date: November 15, 2004ISBN: 0-321-30344-XPages: 472
Project 5: Making and Animating a Robot
You begin Appendix D.
Exercise 1: Creating the head and face
You need an engaging character to animate. This exercise and a couple of exercises that follow show you how to create a character using the Flash drawing tools. Simple shapes and lines are used in the process, and you can certainly elaborate or simplify the character as you wish. You will quickly discover how easy it is to draw and construct a character that you can animate easily.Most of the shapes include some form of "shadowing" to create the illusion of depth and dimension to the character. This largely includes selecting and changing the fill color of a shape, or copyingChapter 4).
1. Create a new FLA file, and select Save As. Name the file robot.fla, and click Save. Rename Layer 1 head. Open the Property inspector, and resize the Stage to 550 px by 700 px. You can leave the background color white.2. Select the Rectangle tool in the Tools panel and click the Round Rectangle Radius button. In the Rectangle Settings dialog box, enter 12 into the Corner radius text field and click OK. Then open the Property inspector (Window > Properties), and change the fill color of the rectangle to #666666 and the stroke color to No Color (click the pencil next to the stroke color control and then click the No Color button).3. Draw a rectangle on the Stage that's approximately 120 px by 120 px (the actual size you make each symbol at does not matter). When you finish, click within the rectangle to select it, and press F8. Convert the vector into a movie clip symbol, and name it head.4. Double-click the movie clip to enter symbol-editing mode (Figure 5.12). Click the Insert Layer button to create a new layer on the Timeline. Select the rectangle you drew and then press Ctrl+C (Windows) or Command+C (Macintosh) to copy the information to the clipboard. Then select frame 1 on the new layer, and select Edit > Paste in Place. This duplicates the same graphic directly on top of the existing one.
Figure 5.12. Create a movie clip from the vector graphic, and then enter symbol-editing mode.
Figure 5.13. Resize the light gray rec tangle so the dark gray one appears like a drop shadow. Make sure that a dark gray line shows all the way around the head symbol.
Figure 5.B.
Figure 5.14. Create a movie clip from the vector graphic, and then enter symbol-editing mode.
Figure 5.15. Create the robot's mouth.
Figure 5.16. Create the robot's teeth.
Figure 5.17. Finish the eye symbol.
Figure 5.18. Create a small white circle above the pupil.
Figure 5.19. Position the robot's right eye and right pupil in relation to the left eye and pupil. Save your changes before moving on to the next exercise.
Exercise 2: Creating the antenna and ears
Now the robot has its face, which is made up of separate instances and on separate layers so you can easily animate it. It just needs an antenna and ears to complete the rest of the robots most expressive asset.
1. Click Insert Layer to create a new layer on the Timeline and then rename it antenna. Make sure that the layer is at the top of the Timeline.2. Select the Oval tool and open the Property inspector (Window > Properties) and Color Mixer panel (Window > Design Panels > Color Mixer). Then select Radial from the Fill style pop-up in the Color Mixer panel (Figure 5.20).
Figure 5.20. Create a radial gradient that is bright red in the center, fading to fully transparent.
Figure 5.A.
Figure 5.21. Nest the antenna top and antenna line inside a single movie clip.
Figure 5.22. Draw the robot's ear hole.
Figure 5.23. Using a rectangle to create the ear.
Figure 5.24. Reshaping the ear.
Figure 5.25. Select half the ear. Hold the Shift key and click the strokes to deselect them. Then change the color of the selection to a darker gray, as shown here.
[View full size image]
You can resize the ear at this point by selecting all the vector lines and fills on the Stage using the Selection tool. Then select the Free Transform tool and press Shift while you drag a corner handle toward or away from the graphics to make them smaller or larger (respectively).Doing this selects both the fill and stroke of the rectangle, so you need to deselect the strokes now. Hold the Shift key and click each of the strokes until you have only the lower area of the fill selected. Now, select a darker gray (#666666) from the fill color control on the Tools panel.12. Click Scene 1 on the Edit Bar to return to the main Stage. Create a new layer and rename it ear - left. Drag the new layer to the bottom of the Timeline. The left ear needs to appear behind the head.You can use this technique for shading most of the character.Right-click or Control-click the ear symbol in the Library, and then select Duplicate from the context menu. Name the duplicated symbol ear - left and drag it to onto the ear - left layer.Double-click the ear - left instance to enter symbol-editing mode. Delete the oval graphic, select the remaining graphics, and select Modify > Transform > Flip Horizontal. Modify the ear so it resembles Figure 5.26 when you bend the strokes on the left side of the rectangle. Then position it in relation to the head (use Figure 5.B for reference).Figure 5.26. Modify the ear using the Selection tool to bend the line and fills accordingly. Delete the oval and bend the strokes and fills to replicate this look.
When you select all the layers and then drag them into the folder, it helps you maintain the same layer-stacking order, which is particularly important when you work with characters that depend on specific layer ordering.Figure 5.27. Create the head pieces layer folder, select all the layers, and drag them into the new layer folder. Remember to save the changes you have made to your FLA document.
Exercise 3: Creating the robot body
The robot's body is almost exactly the same as its head. Therefore, you can copy the graphics from the head to create the different parts of its body. You can reduce file size when you reuse graphics and instances, and also save some of the time it takes to create the character.It's possible to copy the head instance on the Stage, and paste it onto a new layer and resize the instance; however, in this exercise you add new assets to the head and modify it a bit. Therefore, the graphics are copied into a new body symbol.
1. Double-click the head instance on the Stage so it opens in symbol-editing mode. Press the Ctrl (Windows) or Command (Macintosh) key while you click each frame on the symbol's Timeline. Then right-click (Windows) or Control-click (Macintosh) and select Copy Frames from the context menu.2. Select Insert > New Symbol. Select the Movie Clip behavior and name the new symbol body. Click OK to enter symbol-editing mode.3. Select frame 1 of the symbol's Timeline, right-click (Windows) or Control-click (Macintosh), and select Paste Frames from the context menu.4. Now you need to resize the graphics in relation to the head. Click Scene 1 on the Edit Bar to return to the main Timeline. Open the Library (Window > Library) and drag an instance of the body symbol onto body layer. The body layer should be outside of and below the head pieces folder. Double-click the instance to edit the symbol in place.5. Inside the body symbol, use the Free Transform tool to select all the vector graphics. Then use the handles to resize the body in relation to the head. You can use Figure 5.A and 5.28 for reference, or you can create your own original graphics.
Figure 5.28. Resize the head graphics to create the body of the robot.
Creating the Robot's Button
In the finished file on the CD-ROM, robot.fla, you find that a button graphic symbol (see the following figure) was created. This uses the same techniques as the eye symbol, except it uses shades of gray instead. Then, a crescent "glint" was added using the Oval tool. A white circle (with no stroke) was drawn on the Stage. Then, a second circle (with no stroke) was drawn on the same layer, except a different fill color was chosen. This circle was moved to overlap the original white circle. Then, the circle was deleted from the Stage, which also removes the white circle underneath. A white crescent is left over, as shown in the figure that follows.Create two circles or ovals with different fill colors. Move one circle over the other, and any area that is not overlapped remains when you delete the circle on top.
Exercise 4: Creating the extremities
The rest of the robot should seem fairly straightforward, now that you're a pro at creating the head and body. You can create whatever pieces you want, but you need to make sure that you create each piece as its own instance, on its own layer, and intuitively organized on the Timeline. All this is so you can easily animate the character after you create it.
You can shade the arms (similar to the way you shaded the right ear). Select the entire region of the arm, and then press the Shift key and click strokes or fills to deselect the areas until you have only the region you want to shade selected. Then, change the fill color using the Tools panel.1. Insert a new layer on the Timeline beneath the head pieces folder, and rename it neck. On this layer, create a neck that attaches the robot's head to its body. Refer to Figure 5.B for guidance.2. Create an upper-left and upper-right arm (the area from the shoulder to the elbow) and create a lower-left and lower-right arm (from the elbow to the wrist). The left arm layers should be on layers below the body layer, and the right arm should be on layers that are above the body layer.You can recycle the same graphics or instances for the upper and the lower arms, but make sure that each one is on its own layer.3. Create an elbow that joins the upper-right arm and the lower-right arm. The elbow layer should be above the upper-arm layer, but below the lower-arm layer. Use the following figure for reference.
Figure 5.29. Create an elbow that is above the upper arm, and below the lower arm instance.
Figure 5.30. Create the knee above the upper and lower legs.
Figure 5.31. Use the Free Transform tool to reposition the snap ring for each instance.
If you adjust the snap ring when you initially create an instance, it retains that position if you duplicate the instance later on.8. Similar to the end of Exercise 2, you should organize your assets into folders. Organize the layers for the right arm and right hand into a folder called arm - right. Then organize the layers for the left arm and left hand into a folder called arm - left. Remember to press the Ctrl (Windows) or Command (Macintosh) key while you click each layer you want to move into a particular folder, and then drag the layers into the folder. This way, they remain in the same order when you drag them into the folder.Exercise 5: Animating the character
Now you have a complete character that's created for animation and ready to animate. Each of the instances that make up the robot resides on its own layer. This means you can properly animate the character because you cannot animate several instances on the same layer. You probably organized the related assets of the character into Layer folders, so the Timeline is easier to navigate and manage.
1. Select File > Save to save the changes you made to the file so far. Then select File > Save As to save a new copy of the file. Name the new FLA file robot_animation.fla, and save the file. Therefore, if you make any mistakes or want to start again, you have the robot.fla file to save a brand new document from.2. Select Modify > Document and set new dimensions for the Stage. Change the width to 550 px (width) and the height to 450 px (height) and click OK. The former dimensions were appropriate for building the robot character, but you might want to change the dimensions of the Stage for your actual website or cartoon.Before you start animating, choose a beginning pose for the character, which might resemble the sample FLA file so you can easily follow along with this exercise. You will animate the head and arms in this exercise, so the position those assets are particularly important. Refer to the FLA or Figure 5.A for guidance.3. Double-click the antenna instance to open the movie clip instance. Use the Selection tool to select both instances, and then select Modify > Timeline > Distribute to Layers. This puts each instance on its own layer, which is appropriate when you want to animate them. Drag the antenna line instance to the bottom layer if necessary, and delete the empty Layer 1.Select frame 10 of the new layer containing the antenna top instance and press F6 to insert a keyframe. Then select frame 20 of the same layer and press F6 again. Select frame 20 of the antenna line instance and press F5 to insert frames on the layer. Therefore, while the antenna top instance animates, you also see the line instance on all of those frames.Select the keyframe on frame 10 again, and select the Free Transform tool. Click the antenna top instance on this frame, and then use the handles to resize the instance slightly larger than its original size (Figure 5.32).
Figure 5.32. Resize the antenna top instance for a motion tween.
[View full size image]
Figure 5.33. Resize both eyes so they are larger.
Figure 5.34. Rotate the head to animate it.
While each frame is selected for the motion tween, you can apply easing in the Property inspector.Now everything is selected with the Free Transform tool. Press the Shift key while you drag the corner handle outward to resize the robot so it's larger. Resize the robot by dragging a bottom corner handle until it approximately matches the following figure.Select frame 19 on every layer, and then right-click (Windows) or Control-click (Macintosh) and select Create Motion Tween from the context menu.Scrub the Timeline, and now you will find that the robot "zooms in" towards the viewer.Figure 5.35. Resize the robot for his closeup.
[View full size image]
Figure 5.36. Rotate and move the upper right arm (left), and then the elbow and lower arm (right).
Figure 5.37. Rotate and move the hand and lower arm into the thumbs-up pose.
[View full size image]
Figure 5.C.
Now you're finished animating the character, and ready to use it as an intro animation. Optionally, you could select all the frames on the Timeline, copy them, and insert them into a movie clip. Then, you could animate the movie clip on its own Timeline and animate the movie clip instance on the main Timeline as well.
If you create a movie clip for the robot, you don't need all the layers on the main Timeline. You can make modifications and additions inside the movie clip symbol.To do this, select all the frames on the Timeline using the Selection tool (click and drag over the frames to select them). Right-click (Windows) or Control-click (Macintosh) the frames and select Copy Frames. Insert a new movie clip symbol, select frame 1 of Layer 1, and then right-click/Control-click and select Paste Frames from the context menu. This inserts the entire character with all its layers inside the movie clip. Now you can animate inside the movie clip or animate the movie clip itself.Exercise 6: Completing the SWF and loading the animation
The animation is almost complete. You just need to prepare the robot_animation.fla file for the web, and load it into another SWF file that contains a loading animation. In this exercise, you finish and publish robot_animation.fla and then prepare a new SWF file that loads the intro animation.
1. In robot_animation.fla (on the main Timeline or on the robot movie clip's Timeline, if you created one), select the top item in the Timeline (probably the head pieces layer folder), and click Insert Layer to create a new layer. Rename the layer actions.2. Select the last frame of the animation on the actions layer (frame 35) and press F6 to insert a keyframe. Then open the Actions panel (Window > Development Panels > Actions) and type the following ActionScript into the Script pane.
This ActionScript uses a relative URL to target a new web page at the end of the animation, which loads into the current page (which is "self"). Change the URL to target a different web page (you can also use an absolute URLan address that starts with "http://"if you need to target a different web domain).3. Press F12 to test the entire animation, and make sure that it stops at the end. Save the changes you made to robot_ animation.fla. Then Select File > Publish to export a SWF file with the animation.
stop();
getURL("hom102", "_self");
These dimensions (550 px by 450 px) match the robot_animation.swf. You load the SWF file into this rectangle.4. In Flash, select File > New to create a new document. Select File > Save As to name the file loader.fla. Save the FLA file in the same directory as robot_animation.fla.Select Modify > Document to change the document's properties. Change the dimensions to 580 px (width) by 480 px (height), and change the background color to black (#000000).5. Select the Rectangle tool, and in the Tools panel change the rectangle fill color to white and the stroke color to No Color. Draw a rectangle on the Stage. Then select the rectangle (using the Selection tool) and change its dimensions in the Property inspector. Change the width to 550 px and the height to 450 px.6. Select the rectangle again and press F8 to convert it into a symbol. Select the Movie Clip behavior and name the clip loaderClip. Make sure that the registration point is in the upper-left corner of the movie clip, which means the small black square of the registration grid is selected, as shown in Figure 5.38.Figure 5.38. Create a white strokeless rectangle and change its dimensions in the Property inspector; then convert the shape into a symbol.
[View full size image]
Figure 5.39. Create a mask on the Timeline. You mask the indented layer(s) (in this case, Layer 1). The "filled" areas of a mask layer (the part with the rectangle on it) are the areas that display the contents of the masked layer.
[View full size image]
Typically, you should add a progress bar/preloader to any sort of content that loads into a SWF from an external file. Because the content that loads into loader_mc is a very small and simple animation (only about 3 KB!) you don't need to add a progress bar. You will use progress bars throughout future examples.11. Click Insert Layer to create a new layer on the Timeline, and rename the new layer actions. Open the Actions panel and add the following ActionScript in the Script pane:Even though the SWF file loads into a movie clip, the getURL() action that you added earlier will still open the new web page at the end of the animation.This code loads the contents of the robot_animation.swf movie into the loader_mc movie clip on the Stage. After the content finishes loading, the contents automatically play back in the SWF file.
loader_mc.loadMovie("robot_animation.swf");
The History of Intros
Intro animations, an animation used to introduce a web site or introduce certain content, used to be much more common on the Internet. In fact, Flash introductions used to be the most recognizable use of Flash. However, anything this popular runs the risk of becoming a "trend," and then the next best thing comes along (or sometimes "overkill" is a risk if too many people use the style or feature). Flash intros are less common on the web these days; and, your clients might still request an intro. At any rate, it's a good idea to know how to create an intro and handle it well on a website.It's possible to have introductory animations that are positive and unique experiences for your users. There are other ways to add creative animations to your site in the "spirit" of an introduction. For example, you might have a menu bar at the top of your website, which includes a background with a series of buttons. Behind the button area, on the menu's background, you might have a subtle animation play when the user first sees the web page. Or, you might have a "skyscraper" (tall and wide) banner-style SWF file on your page somewhere that plays an animation when the page loads, and then stops to show some kind of advertisement. There are several ways to be creative with animation on your page, aside from cartoons and in addition to the usual effects you might see in menus or transitions.
Exercise 7: Skipping the animation
Because we made this animation into a site introduction, you need to give your visitors an option to skip the introduction (or "intro"). You are probably familiar with intro animations, which are the first thing that you see upon entering a website. See the preceding sidebar for a short history of intro animations.
1. Publish both of your Flash files, which include loader.fla and robot_animation.fla. You need the SWF files from both of these documents for your web page. Make sure that you also publish a111 page with loader.fla. HTML should publish by[View full width]<!DOCTYP102 PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
&l117 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type" content="tex117;
charset=iso-8859-1" />
<title>my robot</title>
</head>
<body bgcolor="#000000">
<!url's used in the movie>
<!text used in the movie>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-
444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave
/cabs/flash/swflash.cab#version=7,0,0,0" width="580"
height="480" id="loader" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="loader.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<embed src="loader.swf" quality="high" bgcolor="#000000"
width="580" height="480" name="loader" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer
" />
</object>
<p><a href="hom102">Skip intro</a></p>
</body>
</html>
The only new line of code that you need to add is the single line of code in boldface near the bottom of the code. This line of code creates a basic hyperlink that redirects the browser to the hom102 document (which doesn't yet exist). The only other change you make is to the title of the page, within the <title> tags.The preceding code displays th102 that automatically generates by Flash (in addition to that one additional line) and is all the code you need to embed a SWF movie within a111 page. In fact, the code that actually embeds SWF files is the <object> and <embed> tags. You might wonder why there are two tags that embed SWF files and why many of the values are repeated twice. Both sets of tags are needed due to cross-browser issues between Microsoft's Internet Explorer and Mozilla-based web browsers (such as Netscape Navigator or Mozilla Firebird). Therefore, it is very important to remember to change both sets of tags so that all browsers will display the same content properly.4. The only thing that remains before you test the final version in a browser is to construct the hom102 page. Create a ne120 document using your favorit102 editor. Type in code similar to the following:
Although you could use something a bit more formatted and functional before uploading files to your web server, the previous code is sufficient for testing and at least prevents any error messages when Flash tries to redirect your page to the hom102 document.Save th102 file and close you115 editor.5. Double-click 96 in the folder in which you saved all the files. This opens your default browser and displays the animation.
<!DOCTYP102 PUBLIC "-//W3C//DT101 4.01
Transitional//EN">
&l117>
<head>
<title>Home</title>
</head>
<body>
<h1>Welcome to the home page.</h1>
</body>
</html>
If you watch the three-second robot animation, you will notice that the SWF file redirects to the hom102 page when the robot finishes its thumbs-up motion. You can click the Back button in your browser and quickly press the "Skip intro" button below the Flash animation to skip the remainder of the animation and go directly to the home page if you choose and can click that quickly.
Beware of Pop-up Blockers
Be careful if you decide to use any pop-up windows in any of your websites. If you plan to use a pop-up for an intro or website, make sure that you let the user click a button to spawn the new browser window, or at least include a button they can use to do so. With so many pop-up blockers installed on computers (such as the Google toolbar and the Windows XP Service Pack 2 update), you cannot guarantee that the window will automatically open on all computers. It's difficult to predict how the browser and pop-up blockers are configured or which blockers are even installed for that matter. Even if you do include a button, make sure that you check it with pop-up blockers and Service Pack 2 installed (on Windows).
