Course Web Site Development:
Additional Website Components:
Web Based Animation Tools:
Macromedia Flash:
Animated Welcome Message

In this exercise you will be creating an object that looks like this:

 

This is a typical "welcome" message that can easily be incorporated into your website.  It is very small - only around 25K.  If we were to do this kind of thing using, say, an animated GIF, it would be a lot larger (111K), and the quality wouldn't be as good.  Take a look - click here.

To start working on this project, just follow these steps:

  1. Open Flash.  Create a new movie (File->New).

  2. Change the background color of your movie to Black (Modify->Movie).

  3. Open the Library (Window->Library).

  4. The library is an area where you may develop and save bits and pieces of your movie for later use.  It's very useful, so we'll be employing it throughout this exercise.

  5. On the library window, there is a little pull down menu labeled "Options".  Click there and choose "New Symbol".

  6. Name this symbol with your first name.

  7. We're now in symbol editing mode.  Symbols have their own timeline - completely independent from the main timeline.  Thus, we could create a whole "sub movie" right here and have it play in tandem with our main movie!

  8. ... But not yet.  First we need to import the digital image that will be given to you on a floppy disk (File->Import).  Your picture will show up.

  9. Break your picture apart so that you can edit it (Modify->Break Apart).

  10. Use the lasso tool to cut out your head.  Click Edit->Cut to get you out of there.  Delete the remaining portion of the picture.  Click Edit->Paste to get you back in the scene.

  11. Click on the hyperlink at the top of the screen that says "scene 1".  This will get you back into the main timeline.

  12. If you wish to work on your picture again, all you need to do is to double click on it from the library menu.

  13. Create a new symbol called "Text".  Inside this symbol, use the text tool to write the text "Welcome to my web page".

  14. Click on they "scene 1" hyperlink to go back to the main timeline.

  15. Now we're ready to animate!  Double click on the label "Layer 1" and change it to "Text".

  16. Drag the object "Text" from the library into frame #1 on the Text layer.

  17. Insert a keyframe at frame #20 on the Text layer.

  18. Increase the size of the text at the keyframe in frame #20 so that it fills the screen.

  19. Right click on the text in the keyframe at frame #1.  Choose Panels->Effects.  The Effects panel will activate.  Choose Alpha from the list.  Set the value of the Alpha effect down to zero.

  20. Click anywhere in-between the two keyframes.  Click on Insert->Motion Tween.

  21. Now click Insert->Layer.  Name this new layer "Head".

  22. Click in frame #5 on this layer and click on Insert->Keyframe.

  23. Drag your head out onto the stage.

  24. Insert a keyframe at frame #20 on this layer.  Increase the size of your head.

  25. Right click on your head in frame #5 and choose Panels->Effects.  Change the alpha value to zero.

  26. Click in between these two keyframes and click on Insert->Motion Tween.

  27. Click in frame #50 on both layers (one at a time) and click on Insert->Frame.  This will extend your movie but will not cause any further animation.

  28. Click on Control->Test Movie.

Voila!  You've done it!

If you would like to put this greeting on your web page, follow these steps:

  1. Save your file (on the desktop if necessary).

  2. Publish the file (F12 or File->Publish).

  3. Open up FrontPage.

  4. Open up your website.

  5. Click on File->Import.  Flash creates two files when it publishes - a .swf and a .htm file.  Import both of these files into your website.

  6. Create a link to the .htm file.