Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Project 1: Creating your First Animation

For the projects in this book, you should import the images and other assets that you copy to your hard drive. Avoid importing files into Flash directly from the CD-ROM. Sometimes you will encounter unexpected results in Flash if you try to import files directly from a CD-ROM.

There are several kinds of documents you can build using Flash. In this project, you create a simple FLA file that animates an object on the Stage. You save and publish this document, and you can optionally try placing it on the Internet. You find out how to make some basic settings in a file, and create a SWF an101 file from it.

Before you get started, create a new folder on your hard drive and copy all the files from the CD-ROM into this folder. Create a second folder for all the files you create for this book. You might want to also create subdirectory folders for each project to help organize the content.

Exercise 1: Creating a file and symbol

In the first exercise, you create a brand new Flash document and add two symbols to the file. The first symbol is a movie clip that you create from an image that you import into the FLA. The second symbol is a button that you create from a vector graphic made in Flash. Open Flash, and let's get started.

1. Select File > New and select Flash Document to create a new FLA file, or click Flash Document from the Create New section on the Start Page. The Start page displays whenever you open Flash, although it can be disabled in the Preferences dialog box (Edit > Preferences[Windows] or Flash/Flash Professional > Preferences[Macintosh]).

You can create new files and open recent files from the Start page. You can also create a new file based on a template. The Start page also allows you to search keywords on [www.macromedia.com] and displays news about Flash.

You can open existing files from the Start page or by selecting File > Open. The Open dialog box with a standard file chooser opens, which lets you select an FLA document to open. If you want to open a recent file, select File > Open Recent from the main menu and select the name of a file from the submenu.

2. Select File > Save As from the main menu to open the Save As dialog box. Type first.fla into the File name or Save As text field. Choose a location on your hard drive for the new file, and click Save.

The Start Page and New Document dialog box look different in Flash MX 2004 and Flash MX Professional 2004. The Professional edition has several additional file formats you can open and create.

3. Select File > Import > Import to Stage, and navigate to 01/start/skeeter.png from the book directory on your hard drive. Click Open to import the file (a drawing of a mosquito), which is put directly on the Stage.

4. Select the PNG file on the Stage by using the Selection tool in the Tools panel. Click the arrow tool to select the tool.

You can also import directly into the Library if you do not want the imported item to be placed on the Stage. To do this, choose File > Import > Import to Library.

5. Select Modify > Convert to Symbol from the main menu to "convert" the graphic into a symbol (Figure 1.16). The Convert to Symbol dialog box opens, in which you can select a type of symbol to convert the image to. You can also name the symbol, which is the name it's given in the Library.

You can convert both drawings on the Stage or items that you import

You can also select an image and press F8 to open the Convert to Symbol dialog box and convert the selection into a symbol.

6. Type skeeter into the Name text field. This is the name the symbol displays in the Library. Select the Movie clip radio button as its Behavior. Then click OK to close the dialog box and convert the image into a movie clip.

The skeeter symbol is stored in the Library, and you now have an instance of the movie clip on the Stage. Select Window > Library to open the Library, and you see the symbol called skeeter stored in the panel. You will also see that the Library shows you a movie clip icon next to the symbol's name, and "Movie Clip" displayed in the Kind column. This reminds you what kind of symbol it is.

7. Double-click the skeeter instance to open the movie clip in symbol-editing mode. The PNG is placed inside a movie clip symbol. If you open the movie clip in Flash, you see the PNG placed on a new layer on the Timeline of the movie clip.

When you double-clicked the symbol, the movie clip opened in symbol-editing mode. So you can edit the symbol itself, add to the symbol, delete content from it, and so forth. You can even nest another symbol inside the symbol that's open in this mode. You can tell that you are in symbol-editing mode by looking at the Edit Bar, as discussed earlier in this chapter.

You can also enter symbol-editing mode by double-clicking the symbol in the Library, or right-clicking (Windows) or control-clicking (Macintosh) the instance on the Stage, and selecting Edit or Edit in Place from the contextual menu. If you select Edit, you do not see the Stage area surrounding the symbol. If you select Edit in Place, you continue to see other items and the Stage area (although they are not selectable), which is the same editing mode as double-clicking the instance. This is useful if you need to edit your symbol in relation to other elements on the Stage.

8. Click the Scene 1 button on the Edit Bar to return to the main Stage.

9. Click the Stroke and Fill color controls in the Color section of the Tools panel to select a fill and stroke color for a new shape that you create in the following step.

10. Select the Oval tool from the Tools panel, and click and drag horizontally on the Stage to create an oval shape. Release the mouse button to complete the shape, as shown in Figure 1.17.

If you press the Shift key while drawing the shape, you can draw a perfect circle.

11. Select the oval on the Stage using the Selection tool; click and drag around the shape to select it, after which you see a checkered pattern over the shape. You can use the Selection tool to move the shape around on the Stage when it's selected.

12. Select Modify > Convert to Symbol from the main menu to convert the vector graphic into a symbol. Type playbutton into the Name text field. This is the name the symbol displays in the Library. Select the Button radio button to convert the selection into a button symbol. Then click OK, and now you have two different kinds of symbols in the Library.

That was easy, and now you have created both a movie clip and button symbol. In the following exercises, you will animate the movie clip, and add some functionality to the button. Save the document (File > Save) before you move on.

Exercise 2: Animating and testing your work

In this exercise, you will animate the movie clip symbol, and add a simple script that stops the Timeline and plays the movie clip when you click the button instance. You will also test the file in the testing environment. You should still be working with the first.fla file from Exercise 1.

1. Create a new layer in the Timeline by clicking the Insert Layer button (a small button directly below the layer name Layer 1). Double-click Layer 2 in the Timeline and type in a new name for the layer: movie clip. Rename Layer 1 to play button.

2. Select the skeeter symbol on the Stage, and select Edit > Cut. Select frame 1 of the movie clip layer and select Edit > Paste in Center.

3. Select frame 15 of the movie clip layer; then select Insert > Timeline > Keyframe from the main menu. This adds a new keyframe at frame 15 and gray colored frames between frame 1 and 15.

The Coordinate System

Flash's coordinate system starts at the upper-left corner of the Stage, which is 0, 0. Meaning that both the X and Y coordinate are at 0, 0. For example, if you move 10 pixels to the right and 5 pixels down, your X, Y coordinates are 10, 5. You can set these coordinates for an instance in the Property inspector. If you want to move the mosquito instance to 10 pixels from the upper-left corner, you would set both the X and Y coordinates to 10 pixels in the X and Y text fields in the Property inspector.

4. Select frame 15, and use the Selection tool to move the skeeter movie clip to a new location on the Stage.

5. Select frame 1 of the movie clip layer, and select Insert > Timeline > Create Motion Tween. This is the command that adds the motion tween, which changes the background of the frames to a purple color with an arrow across the frames. The skeeter tweens between the position at frame 1 (the center of the Stage) to the location where you moved the clip in step 4.

You can "scrub" the Timeline to see how the movie clip moves. Click and drag the playhead between frames 1 and 15 to see the animation. Also, you can click the Onion Skin button in the Timeline to view multiple frames at once (Figure 1.18). Click and drag the handles that appear where the frames are numbered in the Timeline to toggle how many frames you view at once.

6. Test the SWF file by selecting Control > Test Movie, or by pressing Ctrl+Enter (Windows) or Command+Return (Macintosh). The test environment displays the document in Flash Player, which is how the animation would appear if you publish the FLA. The animation continuously loops, meaning that it plays from the beginning to the end of the animation and returns to the beginning to play again. The playbutton instance appears only on the first frame and then disappears when the playhead moves past frame 1.

Click the Close button to return to the authoring environment. In the following steps, you add a couple of actions to the FLA file that controls the animation using the button instance and ActionScript on the Timeline.

7. Select the button instance on frame 1 of the play button layer, and select the button instance. In the Property inspector, type play_btn into the <Instance Name> text field.

You add an instance name for the button so you can control it by using ActionScript. The code you add can target that particular button because you have given it a name the code can recognize. Now you can apply some script that makes the button control the SWF file.

8. Click the Insert Layer button in the Timeline to insert a new layer. Rename the layer by double-clicking the new layer's name, and type actions.

9. Select frame 1 of this layer, and open the Actions panel by choosing Window > Development Panels > Actions. Then type the following into the Script pane, as shown in the following figure:

This ActionScript is used to stop the Timeline. This means that instead of looping, the playhead stops on Frame 1. Because it is stopped automatically, you can play the animation using code that you apply to the button.

10. Following the stop(); action you added in step 9, add the following code:

1 play_btn.onRelease = function(){
2  play();
3 };

You use the code to play the main Timeline. It targets the play_btn instance, and tells the button (play_btn) to play the main Timeline (play();) when the button is clicked. The onRelease refers to the button being clicked and released by the user.

11. Test the animation again by selecting Control > Test Movie. Click the play_btn instance, which plays the main Timeline. The skeeter instance animates, and then returns to frame 1 and stops. It no longer loops because you added the stop(); action on frame 1. This means whenever the playhead reaches frame 1 in the SWF file, it stops. If you click the play_btn instance again, the animation plays again.

Not too bad for a first SWF file! Don't worry about the specifics of the code you just entered because you will learn more about ActionScript and how it works in later projects.

Exercise 3: Frame rate, publishing, and uploading

When working with animations, one of the most important steps is to make sure that you have an appropriate frame rate selected. This step isn't as important if you're building an application in Flash because typically an application has limited movement, and sometimes you work only with a single frame. However, if your SWF file has a lot of motion that needs to appear smooth, it might be necessary to increase your frame rate above the default value of 12 frames per second. You can test what different frame rates look like by checking the document again in the test environment. You can then publish and upload the project to your server, or look at it in a browser window on your hard drive.

1. Click anywhere outside the Stage using the Selection tool and open the Property inspector to change the frame rate of the document. Type 21 into the Frame rate text field to change the SWF file frame rate to 21 fps (frames per second).

Do not change your frame rate to a number that's too high. If your frame rate is very high, it might be difficult for processors to keep up with the animation. You shouldn't need to go beyond 31 frames per second for your animations.

Optionally, you can also modify the background color of the Stage in the Property inspector by clicking the color chip next to Background and selecting a new color swatch. Change the dimensions of the Stage by clicking the Size button and type new values into the width and height text fields in the Document Properties dialog box.

2. Select Control > Test Movie to test your file in Flash Player again. This time, the animation plays a lot faster, almost twice as fast, as it did in Exercise 2.

3. Select File > Save to save changes you have made to the document.

The Save versus Save and Compact

The Save and Compact option compresses the size of an FLA file by removing unnecessary information from the file that causes file bloat, such as the History (undo steps and so on). In this way it is similar to using File > Save As, which similarly removes this information (with the added capability of renaming your file). You should use Save and Compact as a final step when you're working on a project. As soon as you select File > Save again, your file returns to the large size it was before you chose Save and Compact. Remember that this command deletes all the history in your file, and you cannot access this information again. If you might need to undo steps in your process, do not select this option: select Save instead, which stores undo information in the FLA file. The issue with this option is that even if you delete assets from the Stage and Library, the FLA file saves these changes. Even if you delete items from the FLA file, they are still preserved within the FLA in case you choose to redo these steps. You can also select File > Revert to reload the current Flash document from the last saved version, which helps you avoid closing and reopening the document.

There are other options for saving the file. You could save a new version of the file by choosing File > Save As and typing a new name for the FLA file. This is a good way to save different version of a project, particularly if you might want to revert back to an earlier version. This is only necessary for larger projects.

4. Select File > Publish Settings to open the Publish Settings dialog box shown in Figure 1.21.

This dialog box lets you publish your FLA to various different formats, including a static image, video file, animated GIF, series of bitmap images, or even a "projector" filewhich is a Windows or Macintosh executable with Flash Player built in. This lets you distribute your Flash work, perhaps on CD-ROM, to users who might not have Flash Player.

To publish a file while skipping the Publish Settings dialog box, select File > Publish or press Shift+F12.

5. Make sure Flash an101 are both selected under the Formats tab, which is the default setting in Flash. This means that a SWF file an101 file generate in the directory in which you saved the FLA document. Most selections you make in the Formats tab has a corresponding tab that appears in the dialog box, so if you select GIF Image, an additional tab appears.

You will discover options for detecting whether your visitors have Flash Player installed in Chapter 15. You also explore the many options for embedding SWF files in a web page.

The settings for this project are not important because of its basic nature. At any rate, explore the options in the Flash an101 tabs to see which options are available when you publish a SWF file. These options will be covered in later tutorials when they are applicable. Click OK to close the dialog box.

6. Select File > Publish Preview > HTML to view the SWF file embedded in a browser window. The browser opens in your default web browser, and most closely shows you what your project will look like on the web.

If you do not have an FTP client, try downloading SmartFTP from [www.smartFTP.com]. The program is easy to use and is free for educational, personal, and nonprofit use. There are other options available for Windows and Mac at [www.download.com].

7. Try uploading the SWF an101 files to your web server using an FTP client or Dreamweaver. You can find these two files in the same directory in which you saved the FLA file in Exercise 1.