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

Project 3: Creating an Animated Interface

Now that you have run through the various tools you can use to create and organize an interface, you are ready to create a simple Flash document that is based on animation. This project uses shape tweens and motion tweens to create a simple user interface.

Open the final SWF called interface.swf, or go to [www.FLAnimation.com/chapters/03] and take a look at the finished version of the animation you create in this chapter. Several parts of this file use animation: the title area that holds the name of each page, the border, and several buttons at the bottom of the interface.

Remember to save the files for this chapter on the CD-ROM to your hard drive before opening or importing the content into Flash.

Exercise 1: Creating the layout

The layout for this site is relatively simple, but it does take some work to set up. The layout consists of a gradient that you create in Flash and an Illustrator AI vector drawing that you import into the FLA file.

1. Create a new FLA document, and select File > Save As to name the file. Save the new file as interface.fla in a new directory on your hard drive. You will use the file that you create for this chapter in a project for another chapter.

Make sure that Snap to Objects and Snap Align are enabled (a check mark appears next to View > Snapping > Snap to Objects and Snap Align when you enable them).

2. Click the Stage, and select Modify > Document to open the Document Properties dialog box. Change your settings to the following values, and click OK when you finish.

Change the width to 300 px.

Change the height to 500 px.

Change the background color to black. (Click the color control and select a black swatch from the color pop-up.)

Change the frame rate to 15 fps.

3. Rename Layer 1 and create a new layer. Double-click Layer 1 and type background to rename the layer. Click the Insert Layer button on the Timeline, and rename the new layer that you create to star.

4. Select the Rectangle tool in the Tools panel, and then open the Color Mixer panel (Window > Design Panels > Color Mixer). Select Radial from the Fill Style pop-up menu, and you see a gradient definition bar appear with a default transition between black and white. Click the left pointer (directly below the gradient definition bar: it's black), and then click the color control in the upper-left corner of the panel.

5. Type #CEE4F4 into the color pop-up menu, and press Enter (Windows) or Return (Macintosh). Back in the Color Mixer panel, click the color pointer to the right (directly below the gradient bar; this one's white) and click the color control again. This time, type the hexadecimal #6BA8E2 into the color pop-up menu. Now the gradient transitions between darker and lighter shades of blue.

Click below the gradient definition bar to add additional colors to the gradient.

6. Create a rectangle without a stroke. Select frame 1 on the background layer. In the Tools panel, click the pencil icon next to the stroke color control, and then click the No Color button (the button beneath the two color controls that's a white square with a red line through it). Then click and drag the Rectangle tool on the Stage to create a rectangle that's approximately the same size as the Stage (similar to the large rectangle in Figure 3.1).

If you cannot replicate the gradient exactly as shown in Figure 3.10 when you click the Stage, then use the Fill Transform tool to modify the location of the gradient. Select the tool in the Tools panel, and then click the gradient on the Stage. Then, click and drag the handle (a square) to resize the gradient.

7. Modify the gradient graphic so the radial gradient appears at the top of the image. Click the Paint Bucket tool in the Tools panel. Then click near the top of the rectangle you just created, as shown in the following figure.

This moves the radial gradient so the center of the gradient appears near the top of the shape, instead of at the center (the default location).

8. Resize and position the rectangle on the Stage. Select the rectangle and change its width and height to 285 (width) by 485 (height) by using the Property inspector. With the rectangle still selected, press F8 to convert it into a symbol. Name the symbol bg, select Graphic as the symbol behavior, and click OK when you're done.

9. Open the Align panel (Window > Design Panels > Align), and select the To Stage button if it isn't already selected. Then click the Align Horizontal Center button and the Align Vertical Center button, as shown in the following figure.

Click these buttons in the Align panel to center the rectangle on the Stage.

10. Import the PNG file called star.ai from the chapter's start files on your hard drive. Select File > Import > Import to Library and choose 03/start/star.ai. This graphic was created by using Illustrator (which uses the extension AI for its native files), but you do not need Illustrator to import the file into Flash.

Some complex Illustrator drawings or filters might not import well (or at all) as vectors. If this occurs, try exporting the image as a PNG file from Illustrator and importing the raster image. You can also rasterize the image using Flash's import dialog box, but sometimes you don't maintain the quality doing this, and you see better results exporting a PNG from Illustrator. A PNG file has been provided on the CD-ROM if you prefer to use this format.

When you import the AI file, a dialog box appears where you can adjust the settings of how the file imports. Click OK to accept the default options, because the file you are importing does not have multiple frames, layers, or pages.

After you import the image, you see a graphic symbol called star.ai in the Library.

11. Select the star layer. Drag the star.ai symbol onto the Stage and position the image near the top of the interface. Select the Free Transform tool and click the graphic. Scale the graphic by using the handles that appear around the bounding box, so the graphic does not overlap the black borders of the interface. Feel free to make the image slightly narrower, as shown in the following graphic:

For a quick tutorial on how to create the star pattern that you import into the FLA, go to the book's website at: [www.FLAnimation.com/tutorials]. Even though it's in Illustrator, it's surprisingly easy to do.

12. Change the transparency of star.ai. Select the graphic instance on the Stage, and open the Property inspector (Window > Properties). Select Alpha from the Color pop-up menu, and then type 30% into the text field that appears. This means that the star graphic is mostly transparent and can blend in with the radial gradient you created earlier in this exercise.

Although it would be possible to animate this star graphic, it would be particularly processor-intensive. The SWF file needs to make many calculations to render out an animated transparent graphic that's placed over a gradient. Creating an effect like this is fine when they are limited in your SWF file, but there are several other animations you create in this particular interface. Therefore, the star graphic will remain stationary for now.

13. Lock the background and star layers when you are finished editing them. Click the Lock button on each layer, which is to the right of the layer's name on the Timeline.

14. Select the topmost layer (star), and create two new layers by clicking the Insert Layer button on the Timeline. Rename the top layer actions and the second layer labels. Lock both of these layers when you finish renaming them.

Now you have completed setting up the FLA document and have added a background for the interface. The next step is to create some animation that will be used for the menu system. Save your changes (File > Save) before moving on to the following exercise.

Using Graphic Symbols

When you use bitmap images in a FLA file, you can either drag the bitmap directly on the Stage, or convert it into a Graphic symbol. Remember, if you need to take advantage of the functionality of a symbol (such as changing properties in the Property inspector or swapping the bitmap at a later time). Because you are just using the bitmap once, you do not need to change it to a Graphic symbol because in this case it does not make a difference (although, you can if you choose to). If you plan to reuse the bitmaps in your FLA file or need to change their properties, you should make a habit of converting the bitmaps to a symbol. However, remember that you should never animate a Graphic symbol only animate Movie clip symbols which offer more flexibility and do not clog up your library with ugly "Tween" references.

Exercise 2: Animating lines

Some Flash installations might experience difficulties with the Property inspector changing context after you select a new tool. Therefore, after you select the Line tool, the Property inspector might not change its appearance so you can set the properties of the line before you create it. You might also experience this when you select the Text tool and Rectangle tool. If so, create the line first (step 3), and then select the line and change its properties. Or, click the Selection tool and then click the Line tool, or click the Stage. Often, the Property inspector will display the tool's properties at this time.

The menu system uses shape tweens to create movement of the lines and uses motion tweens to move and rotate the buttons that contain the text. The first shape tweens in this exercise essentially "grow" and "animate" a line inside a movie clip instance. In this exercise, you create the three movie clips that serve as a basis for the interface's menu.

1. In interface.fla, select the star layer and create a new layer above it. Click Insert Layer button on the Timeline. Rename the new layer menu.

2. Select the Line tool in the Tools panel. In the Property inspector (Window > Properties), change the stroke height value to 3. Make sure that you set stroke's color to black if it's currently another color.

3. Create a line and convert it into a movie clip symbol. Click and drag vertically to create a line near the bottom of the Stage. Make sure that it is quite short (only a few pixels in length), as shown in the following figure. When you finish, select the line you created and press F8 to convert it into a movie clip symbol. Name the symbol info clip and make sure that you select Movie Clip as the symbol behavior.

4. Double-click the info clip instance on the Stage using the Selection tool to enter symbol-editing mode. When you are in symbol-editing mode, double-click Layer 1 to rename it menu tween.

5. Select frame 6 on the menu tween layer and press F6 to insert a keyframe. Click outside the Stage to make sure that nothing is selected. Using the Selection tool, hover the mouse pointer over the top point of the line until you see the mouse pointer change so it has a backward L-shape next to the pointer. Drag the line vertically so it "grows" in length.

Again, make sure that the line is not selected. Then hover the mouse cursor over the middle of the line until you see the mouse pointer change so it has a curved line next to it. Drag the line horizontally toward the right so it curves. Your line should look similar to the following figure.

6. Add a shape tween and test the animation. Select any frame between 1 and 6, and open the Property inspector (Window > Properties). Select Shape from the Tween pop-up menu. Click and drag the playhead to test the shape tween: The line should grow from the bottom of the Stage upward and curve while doing so. The animation should match the one you saw in the final animation ([www.FLAnimation.com/chapters/03]).

Distributive and Angular

When you create a shape tween, there are two options for the "blend" between frames. The default option is Distributive, which is what you should use for this particular animation. Distributive creates shapes during the tween that are smooth and slightly irregular. If your shape does not have any corners or straight lines, Flash reverts to this option anyway. The Angular option creates a shape tween that attempts to maintain corners and straight lines during an animation, so you might select this option if your shape has these attributes. Otherwise, you should use Distributive.

7. Select frame 9 on the menu tween layer, and press F6 to insert another keyframe. Click outside the Stage area to make sure that nothing is selected. Hover the mouse pointer over the middle of the line until you see the pointer change so it has a curved line next to it. Drag the line horizontally to the left so it curves in the opposite direction. Your line should look similar to the following figure.

Click any frame between frame 6 and 9 on the menu tween layer and then select Shape from the Tween pop-up menu in the Property inspector. After you add the shape tween, click and drag the playhead to test the tween: the animation should bend the line between left and right.

8. Select frame 12 on the menu tween layer, and press F6 to insert a final keyframe. Click outside the Stage area to make sure that nothing is selected. Hover the mouse pointer over the middle of the line until you see the pointer change so it has a curved line next to it. Drag the line horizontally to the right so it curves similar to the line in step 5.

9. Click any frame between frame 9 and 12 on the menu tween layer and then select Shape from the Tween pop-up menu in the Property inspector. After you add the shape tween, click and drag the playhead to test the tween: the animation should bend the line between right and left.

10. Repeat steps 2 through 9 two more times, creating two new movie clips. Call the second movie clip portfolio clip and the third movie clip contact clip. Create slightly varying animations inside these two clips by changing the length of the line, the direction it bends in, and so forth. Use the finished version of the SWF file ([www.FLAnimation.com/chapters/03]) as a reference.

Problematic Shape Tweens

You need to be careful and specific when creating shape tweens. It's easy to end up with lines that "flip" or rotate instead of "grow," just by reversing steps you take to create the tween. If this occurs when you create the animation, remove all the frames after the first keyframe in the animation by selecting them, right-clicking (Windows) or Control-clicking (Macintosh) them, and selecting Remove Frames from the context menu. Then select the first keyframe and remove the tween by setting the Tween pop-up menu in the Property inspector to None. Create a new final keyframe for the end of the tween and modify the line again to create an animation.

11. When you finish tweening the three lines inside each movie clip, click Scene 1 in the Edit Bar to return to the main Stage. Line the three movie clips up to the lower edge of the background gradient, similar to the final version of the interface (refer to Figure 3.A).

Save your changes before moving on to Exercise 3.

Exercise 3: Animating shapes

You should now have three lines, contained in movie clips, forming the basis of the menu for the interface. There is another shape tween in the interface, used to animate the title area near the top of the Stage. This tween is a rectangle that animates both its size and shape, but many of the techniques you use will be familiar from earlier exercises. Closely follow the figures in the following example to modify the shape of the rectangle you create. Continue using interface.fla for this exercise.

1. Select the menu layer, and click Insert Layer button on the Timeline to create a new layer. Rename this new layer title.

2. Create a rectangle on the Stage. Select the Rectangle tool, and then click the fill color control in the Tools panel. Enter #CBE1F4 in the text field at the top of the color pop-up menu and press Enter (Windows) or Return (Macintosh). Then click the stroke color control, and choose a black swatch from the color pop-up menu. In the Property inspector, type 0.5 into the stroke height text field to create a thin stroke.

3. Create a rectangle and convert it into a movie clip symbol. With the Rectangle tool still selected, click and drag near the top of the Stage to create a rectangle that is approximately 245 px (width) by 50 px (height). After you finish, double-click within the blue fill area of the rectangle so you select both the fill and the stroke. Press F8 to convert the shape into a symbol, and select Movie Clip as the symbol's behavior. Type title into the Name text field.

4. Double-click the title symbol to enter symbol-editing mode, and rename Layer 1 to title tween.

5. You need to modify the shape on frame 1, which will be the beginning state of the title area and the animation. With the shape not selected, move the mouse cursor over the top stroke of the rectangle until you see the mouse pointer change (it will have a curve next to it). Then drag the stroke upward, so it is curved similar to the top stroke in Figure 3.18. Then hover the cursor so it is over the bottom stroke of the rectangle, and curve the stroke the same way. When you are finished, the rectangle should look similar to the following figure.

6. Now hover the mouse pointer over the upper-left corner of the rectangle until you see a backward L-shape next to the pointer. Click and drag the corner downward until the left side of the rectangle generally matches Figure 3.19 (approximately 15 pixels in heightselect the line and look in the Property inspector to check). Then click and drag the right corner of the rectangle so it is the same length as the left side of the shape. If you drag the line slowly, you will notice that the line "snaps" as soon as it's the same length. The shape should look similar to the following figure after you're finished.

7. Select frame 8 and press F6 to create a new keyframe. At frame 8, click outside the Stage area to ensure that nothing is selected. Hover the mouse pointer over the upper-left corner of the rectangle again, and when the mouse pointer changes, click and drag the corner upward so the side's length generally matches Figure 3.20 (approximately 50 pixels).

Make sure that the two sides of the rectangle remain vertical, as shown in Figure 3.19.

Move the cursor to the upper-right corner, and when the mouse pointer changes, click and drag the corner upward to match the right side. When you finish, the shape should look similar to the following figure.

8. Select frame 11 and press F6 to create a keyframe. Then select frame 14 and press F6 to create a keyframe. Copying frame 8 in both keyframes means that you can modify frame 11, and then have the animation ultimately animate back to the same shape it was on frame 8.

9. Before you move on, click any frame between frame 1 and 8, and select Shape from the Tween pop-up menu in the Property inspector. Click and drag the playhead between frames 1 and 8 to make sure that the tween resembles the title animation in the finished version of interface.fla.

10. At frame 11, deselect any graphics and move the mouse cursor over the left side of the rectangle until you see the mouse pointer change so it has a curve next to the pointer. Click and drag the side of the rectangle so the left side curves outward (similar to Figure 3.21). Repeat this step for the right side of the rectangle.

11. Make sure that the rectangle is deselected. Still at frame 11, move the mouse over the top stroke of the rectangle, so you see a curve icon next to the mouse pointer. Drag the top of the rectangle upward until the curve is slightly higher. Repeat this step for the bottom side of the rectangle, so the shape looks similar to the one in the following figure.

12. Click any frame between frame 8 and 11, and select Shape from the Tween pop-up menu in the Property inspector. Repeat this step for any frame between frames 11 and 14.

When you finish, drag the playhead across the Timeline to check out the animation you created. The shape should grow in size and change its shape over time. Save your changes before you move on to the next exercise.

Exercise 4: Copying and editing animations

You might notice that there is a "shadow" that animates behind the title animation in the finished version of interface.fla. This is an exact replica of the animation created in the previous exercise. However, you don't actually have to repeat all of the steps in that exercise, trying to match the modifications you made to the rectangle. That would be much too time-consuming, and the animation might not be exactly the same. In this exercise, you copy the tween you created in the previous exercise, and change the color of the shape. And we all know how useful copy and paste can be.

1. Make sure that you are still in symbol-editing mode for the title movie clip instance. If not, double-click the title instance on the Stage to re-enter symbol-editing mode.

2. Select the title tween layer, and click Insert Layer to create a new layer. Rename the new layer bg. Then, click and drag the bg layer beneath the title tween layer. You see a black (Windows) or grey (Macintosh) highlight bar when you drag a layer to change its ordering on the Timeline. When that highlight bar is beneath title tween, release the mouse button to move the layer, as shown in the following figure.

3. Copy the frames on the title tween layer. Using the Selection tool, click and without releasing the mouse button, drag across all the frames on the title tween layer, so they are selected.

When frames are selected, they're highlighted on the layer. Right-click (Windows) or Control-click (Macintosh) and select Copy Frames from the context menu.

4. Now you need to paste the frames that you copied. Select frame 1 of the bg layer. Right-click (Windows) or Control-click (Macintosh) and select Paste Frames from the context menu.

If you select a frame (click and release), and then drag the frame it moves the position of that frame on the Timeline. If you click and drag across the frames, then you can select frames on the Timeline.

5. You might notice extra frames at the end of the animation. If so, select the extra frames using the Selection tool. After they are highlighted, right-click (Windows) or Control-click (Macintosh) and select Remove Frames from the context menu.

6. Now you need to move the copied frames at each keyframe. First, click the dot under the lock icon in the title tween layer to lock the layer. Then, click the Selection tool in the Tools panel and select frame 1 of the bg layer so the entire contents of the layer are selected. Press the down-arrow key two times, and then press the right-arrow key two times.

Repeat this step for each keyframe, so each rectangle graphic is offset from the title tween layer's graphics (as seen in Figure 3.23).

7. The next step is to change the color of each graphic to solid black, which is done in almost the same way as the process in step 6. Click the Selection tool in the Tools panel and select frame 1 of the bg layer so the entire contents of the layer are selected. Click the fill color control in the Tools panel, and select a black color swatch from the color pop-up menu.

Repeat this step for each keyframe, so all the rectangle graphics are completely black. Click and drag the playhead across all the frames on the Timeline to view the animation.

8. If you were to play this animation, it would loop endlessly on the Stage. Select the topmost layer and click the Insert Layer button on the Timeline. Rename the new layer actions. Select frame 14 of this new layer, and press F6 to insert a keyframe. Open the Actions panel (Window > Development Panels > Actions) and type the following code into the Script pane:

stop();

Now the animation stops at the end of this Timeline, instead of looping endlessly.

9. Click Scene 1 on the Edit Bar to return to the main Stage. Select the title instance and position it near the center of the star graphic, similar to the way it's positioned in the following figure. Remember to save the changes you've made before moving on.