This chapter is from the book
This chapter is from the book
This chapter is from the book
Fading
Now all that remains to be done is to apply some fading to the beginning keyframes of some of the images. This will help to clean up much of the clutter you see when you view the entire animation.
Fading in the White Background
The white background layer is nice for the final frame of the animation, but is a bit distracting while the animation is taking place. Let's make it fade in.
We made the white background a symbol in Chapter 1. This allows us to modify its Instance Properties. Select the Background 1 layer and hide all the rest.
Click on the first keyframe.
With the Arrow, select the white curve. Open the Effect panel.
-
Choose Alpha from the drop-down list and set the value to 0% by moving the slider down or typing in the text box. See Figure 2–27. Press Enter.
FIGURE 2–27 Effect panel.
Click on a frame between the two keyframes on the White Background layer. Open the Frame panel.
Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. Easing should be set to 0. Press Enter.
To see the results, press Enter.
){kind=link}
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-11.html.
Fading in the Office Photo
The office photo will also fade in. The procedure is basically the same as before, except that the fade-in will begin at the fifteenth frame.
Select the Office Photo layer and hide all the rest.
Click on the first keyframe.
With the Arrow, select the photo.
We need to make the photo a symbol so we can modify its transparency. Choose Insert → Convert to Symbol. Name it "Photo," set its behavior to Graphic, and click OK.
Click on the keyframe at 30 and choose Insert → Clear Keyframe. This will remove the keyframe at 30 that does not have the Photo symbol in it. The photo in this frame was not the photo symbol you created in step 4. To create the fade effect, it must be the same symbol.
Now add a keyframe to 30 again by choosing Insert → Keyframe. This time the photo image will be the Photo symbol you created.
Click on the first keyframe again. Select the photo.
Open the Effect panel.
Choose Alpha from the drop-down list and set the value to 0% by moving the slider down or typing in the text box. See Figure 2–27. Press Enter.
Click on the fifteenth frame and choose Insert → Keyframe.
Click on a frame between the second and third keyframes on the Office Photo layer. Open the Frame panel.
Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. Easing should be set to 0. Press Enter.
Press Enter to see the result. The fade-in begins at the fifteenth frame and finishes at the thirtieth.
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-12.html.
Fading in the Logo Lines
The lines connecting the link circles should also be faded in.
Select the Logo layer and hide all the rest.
Click on the first keyframe.
With the Arrow, select the lines. Open the Effect panel.
Choose Alpha from the drop-down list and set the value to 0% by moving the slider down or typing in the text box. See Figure 2–27. Press Enter.
Click on a frame between the two keyframes. Open the Frame panel.
Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. Easing should be set to 0. Press Enter.
Press Enter to see the result.
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-13.html.
Changing the Color of the Text Links
Instead of fading in the text links, we will make the color change. The color will start out the same as the background and then will change to black. This will make the links stand out a bit more than if they were faded in.
Select the Link Text layer and hide all the rest.
Click on the first keyframe.
With the Arrow, select the links. Open the Effect panel.
Choose Tint from the drop-down list.
Set the Tint Amount percentage to 100.
-
Change the color values on this panel to a red of 204, green of 204, and blue of 153, as shown in Figure 2–28. Press Enter.
FIGURE 2–28 The Effect panel with the RGB set appropriately.
We don't need to add motion tweening for this layer since we did that earlier when we made the Link Text start small and get larger. To see the results, press Enter.
){kind=link}
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-14.html.
Changing the Color of the Address Text
Right now, the Address Text symbol starts out very large and dominates the screen. If we change the color of it to the background of our movie, only the word "Shelley" that is over the brown background curve will be visible. We can then make its color change to black as it gets smaller.
Select the Address Text layer and hide the others.
Click on the first keyframe.
The Address Text symbol should now be selected. Open the Effect panel.
Choose Tint from the drop-down list and set the Tint Amount percentage to 100.
-
Change the color values to a red of 204, green of 204, and blue of 153, as shown in Figure 2–28. Click OK.
Again, we added the Motion tweening earlier, so we do not need to do that now. To see the results, press Enter.
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-15.html.
You have created the graphics for the homepage and animated them. In the next chapter, "Making the Page Interactive," you will add buttons and links to make the page interactive, and we will examine symbols and buttons in depth.