Bonus Tutorial 1: Animated Banner, by Japi Honoo

 < Day Day Up > 



In this tutorial, you make a frame–by–frame animation with a couple of animated symbols. This banner is for the Habitat Alert organization for promotional purposes.

  1. Choose File ® New and use a size 264 ´ 60 and a background color of #003366 and click OK.

  2. In the Layers panel, double–click the name, type heron, and check the Share Accross Layers option.

  3. Choose File ® Import and navigate to the chapter22_exercise folder and select  blueheron.png. Click the document to place it in the center.

  4. Choose File ® Import and select  goldheron.png from the chapter22_exercise folder and click in the document. Move the gold herons off the canvas and to the left of the document. You won't be able to see the images, but you'll see the colored squares of the group. Line up the colored squares that are on the right side of the goldherons selection box, just beyond the left side of the blue canvas.

  5. Select the blue herons and note the y coordinate. Click the gold herons and place them at the same y coordinate. While the gold herons are still selected, press F8 to convert them into a symbol. In the Symbol properties dialog box, choose a type of animation, name of gold, and click OK.

  6. In the Animate dialog box, change the frames to 10, the Move set- ting to 185, and click OK.

  7. From the Library panel, drag a copy of the gold symbol and place it to the right just off the edge of the document at the same y coordi- nate as the other herons. Choose Modify ® Animation Settings, and change the Direction setting to 180. Use the settings shown in step 6.

  8. Select Frame 10 to see how the herons line up. They should cover the blue, and the gold should be on top. If they aren't, make a slight adjustment by moving the end red circle of each of the symbols until they line up.

    I selected both animated symbols to demonstrate the location and how they should look in the following image.

    click to expand

  9. In the Optimize panel, change the File format to Animated GIF, and test your movie in a browser. Notice that it's moving much too quickly.

  10. In the Frames panel, Shift+select Frames 1-9 and double–click the number. Enter 25 and check Include when Exporting. Do the same for Frame 10, except change its delay to 50.

  11. Save your file.

Now add text to the banner.

  1. Add a new layer and name it text.

  2. From the Frames Options pop–up menu, choose Duplicate Frame and Select after Current Frame (the new frame is Frame 11). Click the Add a New Frame icon (plus sign on bottom). This is Frame 12. Change its delay to 50 as well.

  3. Select the Text tool and change the font to Arial Black with a size of 36, a color of #A8B6C2, a stroke color of #003366, and Smooth Anti–Alias. Type save it and change the Horizontal Scale setting to 127%.

  4. Click the Effects plus sign and choose Shadow and Glow ® Inner Shadow with the settings of Distance 1, Softness 4, Opacity 65%, and color of black. Center the text.

  5. Add three Duplicate frames after the current one, changing the delay for each to 20. Select Frame 13. and change the Opacity to 80%.

  6. Select Frame 14 and change the Opactiy to 40%.

  7. Select Frame 15 and change the Opacity to 20%. Also add the word or. Use the same font set- tings as you did for the save it text, except change the color to #B2B625. Don't forget to add the stroke and the inner shadow. Place it in the center over the save it text and change the Opacity to 40% (Frame 15).

  8. Add four duplicate frames.

    Select Frame 16, delete the save it text, and change the opacity to 80%.

    Select Frame 17, delete save it and change the opacity of or to 100%.

    Frame 18, delete save it, and change the opacity of or to 80%.

    Frame 19, delete all text.

  9. Add a new frame and type the words lose it with the same font settings as the word or. Change the opacity to 40%.

  10. Add five duplicate frames with these settings:

    • Frame 21: Opacity 80%

    • Frame 22: Opacity 100%

    • Frame 23: Opacity 80%

    • Frame 24: Opacity 40%

    • Frame 25: Opacity 20%; type the word forever in gold with the same font settings, and change its opacity to 40%.

  11. Add four duplicate frames and make these changes.

    • Frame 26: Opacity 80% and delete the text.

    • Frame 27: Opacity 100%; change the delay to 60 and delete the text.

    • Frame 28: Change the delay to 25 and delete the text.

    • Frame 29: Delete th text lose it . Copy and paste the text two times; then move one copy up about 13. pixels (press the arrow key 13. times and then down 13. for the sec- ond copy. Change the opacity of the copies to 40%. Refer to the following image for placement.

  12. Add a duplicate frame for Frame 30. Delete the center dark word forever, and move the other two copies almost to the edge, as shown here.

  13. Test your animation.

  14. To use as a banner that will connect to a Web site when clicked, add a hotspot over the banner; then add the URL in the Property inspector.

  15. Save the file and export as an Animated GIF.

On the CD-Rom 

A copy of the source file for this tutorial is in the chapter22_exercise folder and is named banner.pXng.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net