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

Project 8: Creating a Site with Effects

This project's website is slightly ambitious for the number of techniques that are used, but they are not difficult. You also get a bit of a break on the ActionScript for this chapter: not much code is used, and what you do add is very simple. Regardless, you probably feel comfortable with the basics after the last couple of chapters!

You'll begin by setting up a website interface that includes animation when the SWF file first loads and when the navigation buttons first appear. You'll add several movie clip buttons that contain animation to the Stage. Then you'll add a transition that appears when your visitors navigate through the website, which includes an animated mask. Finally, you'll add scrollable text and videos as content for the site. You use ActionScript to control the buttons and transitions. You also use ActionScript to load FLV video and formatted text at runtime.

Exercise 1: Setting up the file

You first need to set up the website. This FLA file serves as a "container" file for the main content of the website. Despite this, it also contains the buttons, transitions, and other animations in the site.

1. Create a new Flash document and change the background color to #9CBC7C. Resize the Stage to 600 px wide by 300 px high and set the frame rate to 24 frames per second.

2. Save the new Flash document as site.fla.3. In the Timeline panel, rename Layer 1 to bg tween. You'll use this layer to animate a semitransparent background that appears behind the other assets on the Stage.

3. Create two new layers in the Timeline and name them actions and labels. Rearrange the layers so that the actions layer is the topmost layer, followed by the labels layer and finally the bg tween layer at the bottom of the layer stack (Figure 8.9).

4. Create two new layer folders named content and buttons (Figure 8.9) Drag both of these layers above the bg tween layer.

5. Create five new layers within the buttons folder, as shown in Figure 8.9. Name the new layers (from top to bottom): home,video 1,video 2,about, and button bg.

6. Create seven new layers within the content folder and name them (from top to bottom): content mask, home, video 1, video 2, about, page label, and content bg.

7. Save the Flash document before you continue. You have now created all the layers you need to be ready for adding some new content.

Exercise 2: Creating the background animation

There are several animations in this example that build the "interface." They are almost entirely decorative instead of functional, but they enhance the overall look and feel of this website. Follow these steps to create a couple of tweens that fill in the background area of the site.

1. Select the Rectangle tool and set the stroke color to No Color. Set the fill color to #B6DB91. Draw a rectangle on the first frame of the bg tween layer and use the Property inspector to resize the rectangle to 400 pixels wide by 250 pixels high.

2. Select the rectangle on the Stage and use the Align panel (Window > Align) to center the shape on the Stage. Make sure that the To Stage button is selected, and click the Align horizontal center button and the Align vertical center button to align the shape (Figure 8.10).

3. Select frame 10 on the bg tween layer and press F6 to insert a new keyframe. Select the rectangle on frame 10 and change the width to 586 pixels wide and center the shape on the Stage using the Align panel (Figure 8.11).

4. Select a frame on the bg tween layer between frames 1 and 9 and select Shape tween from the Tween pop-up menu in the Property inspector, as shown in the following figure.

5. Select frame 15 on the bg tween layer and press F6 to create a new keyframe.

6. Select frame 20 on the bg tween layer and press F6 to create a new keyframe. Select the shape on frame 20 and resize the shape to 590 pixels wide. Use the Align panel to recenter the shape horizontally on the Stage.

7. Select frame 13 on the bg tween layer and press F6. Resize the shape to 575 pixels wide and recenter the shape.

8. Deselect the rectangle on the Stage, and then move your cursor along the left edge of the shape until the cursor changes (a small curve appears beside it). Make sure that the cursor is near the vertical center of the shape, and click and drag your mouse toward the center of the shape by approximately 8 pixels as shown in Figure 8.12.

You might find that using the onion skin feature helps for this step and the following step.

Repeat this step on the right side of the rectangle and drag your cursor to the center of the shape by the same number of pixels.

You don't need to be too accurate during steps 8 and 9. You might want to make the bend toward the top or bottom of the rectangle's side instead of near the middle. The animation generally looks better if you make slight bends only on each end of the rectangle.

9. Select frame 17 of the bg tween layer and press F6 to create another keyframe. You don't need to resize or align the shape this time, but you will need to modify the shape similar to step 8. Move your cursor along the left edge of the rectangle and drag the left edge toward the center of the Stage by about 4 pixels. Repeat this step on the right side of the rectangle and drag your cursor toward the center of the shape by the same number of pixels. When you're finished, the rectangle might resemble Figure 8.13.

10. Select a frame between 10 and 13 and insert a shape tween using the Tween pop-up menu in the Property inspector. Likewise, create a shape tween between frames 13 and 15, 15 and 17, and 17 and 20.

See the finished effect on the website at [www.FLAnimation.com/chapters/08].

11. Select Control > Test Movie to test the background animation in the authoring environment. The rectangle should look like it is stretching and bouncing with a slight elastic effect.

Exercise 3: Creating a background animation for the buttons

When the SWF file first loads in this animation, a box grows from left to right, and then drops vertically behind where the buttons animate in the SWF. This animation provides a backdrop for the buttons, but it's purely decorative. Despite being a decoration, it's a commonly used effect, which you'll learn how to create in this exercise.

You can use the same principles to grow a stroke using shape tweens (such as when you see lines "grow" in Flash effects and animations).

1. Select the Rectangle tool, set the stroke color to No Color and set the fill color to a light green (#DDEDCB).

2. Draw a small rectangle on the Stage and resize it to 3 pixels wide by 3 pixels high.

3. With the shape selected on the Stage, press F8 to convert it to a symbol. Select the Movie clip behavior radio button and enter a symbol name of left_animation. Click OK.

4. Right-click (Windows) or Control-click (Macintosh) the left_animation movie clip in the Library, and then select Edit from the context menu.

5. In the Timeline, rename Layer 1 to animation, and create a new layer called actions. Drag the actions layer above the animation layer. Then, select frame 10 and press F6 to insert a keyframe.

6. Select frame 10 of the actions layer, and open the Actions panel. Type the following code into the Script pane.

stop();

7. Select frame 5 of the animation layer and press F6 to create a new keyframe. Select the shape on frame 5 and set its width to 94 pixels using the Property inspector. Now the small box changes into a long rectangle. When you apply a shape tween, the small box appears to grow towards the right.

8. Open the Property inspector. Select a frame between frames 1 and 4 of the animation layer and use the Tween pop-up menu in the Property inspector to insert a shape tween.

9. Select frame 10 of the animation layer and press F6. Resize the shape to approximately 196 pixels wide by 68 pixels high (see the finished SWF for guidance).

10. Use the Tween pop-up menu in the Property inspector to insert a shape tween between frames 5 and 10, and then scrub the Timeline to preview the animation. The box should appear to grow in size.

11. Insert a new keyframe at frame 7 of the animation layer and then resize the rectangle to 60 pixels high.

12. Make sure the rectangle is deselected. Move your mouse along the lower edge of the rectangle shape in frame 7 until your cursor changes to an arrow with a small curve beside it. Click the middle of the bottom edge of the shape, drag your cursor slightly upward, and release the mouse. This creates a slight random curve and sense of movement to the rectangle so that your animation doesn't look too "square" (Figure 8.14). If you want to make your shape a bit more irregular, you could even move the mouse cursor to the lower-left corner of the rectangle until your cursor changes again to an arrow with a corner angle icon beside it. Drag the left corner upward by a couple of pixels and then retest your animation.

13. After you're happy with the animation, click Scene 1 on the Edit Bar to return to the main Stage.

14. Select frame 20 on the button bg layer (it should be within the buttons layer folder) and press F6 to insert a new key frame. Drag a copy of the left animation movie clip symbol from the Library onto the Stage and position it in the upper-left corner of the light green rectangle on the Stage, as shown in Figure 8.15.

15. Lock the button bg layer and save your document before proceeding to the next exercise.