Creating a Simple Flash 8 Animation - Page 4
       by kirupa  |  29 September 2005

If you recall, in the first page, I had you convert your text into a movie clip. It might have seemed like a redundant step, for we were still using the timeline and nothing much looked different.

What the difference is, though, is that all of our animation and frames are self-contained within this movie clip. If I wanted to shift all of our letters over a bit, it would be a painful process to change each letter at each keyframe to meet our new location. The same applies for special effects and filters. It would be time-consuming to add a filter to every letter in every keyframe.

That is where the movie clip comes into play. Above your timeline, click on the Scene 1 tab:

[ click on your Scene 1 tab ]

Notice that you are now back in your main timeline. Normally, the first frame of contents in any nested movie clip would be displayed. Since we set the alpha of all of our letters to 0 on the first frame of our movie clip, you don't see anything.

You can fix that by pressing Ctrl + A or by going to Edit | Select All. Your movie clip should now be selected. Use your arrow keys to move the movie clip to a new location, for example, bottom-right:

[ our movie clip moved to the bottom-right of our screen ]

If you preview your animation by pressing Ctrl + Enter, notice that all of our letters are now centralized to the bottom-left location. You did not have to go through and edit each letter individually. You simply shifted the container that held all of those letters to the new location instead.

Now, let us get back to adding the cool drop shadows to our animation!

  1. Make sure your movie clip is selected. Since it isn't visible, you may have to press Ctrl + A, go to Edit | Select All, or simply draw a large enough selection box on your stage with your mouse by clicking and dragging on an empty area in your stage.
  2. Once your movie clip is selected, press Ctrl + C or go to Edit | Copy. This copies your movie clip into memory.
  3. We want to paste this movie clip onto a different layer. Right click on the Layer 1 layer on your timeline and select "Insert Layer":

[ insert a new layer in your timeline ]

  1. The new layer would have been created above Layer 1. Click on your new Layer and drag it down so that it is positioned below Layer 1. With that done, click on the second circle indicating Lock Layer in Layer 1. Your timeline should look like the following image:

[ how your timeline should look after adding the new layer and locking Layer 1 ]

Locking Layers

When you lock a layer, you ensure that any objects on the stage in your layer can no longer be selected. That is useful when you are working with objects (movie clips in our case) that will be arranged behind another movie clip. Locking the movie clip on the top ensures that you don't accidentally select and modify the wrong movie clip.

  1. Select the empty keyframe in your newly created layer, and press Ctrl + Shift + V or go to Edit | Paste in Place. You will see that the movie clip you copied a few steps earlier is now pasted in the same location you originally copied from.
  2. Make sure the movie clip is selected, and in your Properties Panel, click on the Filters tab. You should see a small white text area with a blue plus graphic. Click on the plus graphic and select the option for Drop Shadow:

[ from your filters tab, click the plus graphic and select 'Drop Shadow' ]

  1. Your Properties Panel will now provide you with parameters of your drop shadow you can adjust. The default values are good, but the one modification I made was changing the color of the drop shadow from black to a medium gray.

    Also, this is really important, make sure the check the box for Hide Object

[ your Shadow properties panel ]

  1. Now, preview your animation. Notice that your text now has a drop shadow attached to it! Our drop shadow is not angled though, so let's implement that feature.
  2. Right click on your movie clip and select the menu item for Free Transform. Your movie clip should now have a series of boxes placed on its edges:

[ right click on your movie clip and select Free Transform ]

  1. With the Free Transform tool, you can both resize AND skew your movie clip. Skew your movie clip right by clicking in between the two-right and top-middle boxes and dragging to the right. Your will notice your movie clip has a slight right-leaning slant.
  2. Let's resize the movie clip now. Click on either of the top/bottom center square and drag towards the center of your movie clip. You will notice that your movie clip shrinks a bit.

    Your movie clip should be shaped similar to the following image:

[ how your movie clip should look after transforming ]

  1. If you preview your animation, you will see the drop shadow positioned at an angle to look as if the light is hitting your text from a more natural perspective. Of course, you may have to adjust the position and scale of your shadow, but those are just minor details that you can fix easily.

You are now done with creating a simple animation in Flash 8 that employed many interesting features from Flash 8! This tutorial is by no means comprehensive, and there are a lot of useful features that I hope to cover in future tutorials.

I have provided the source file for the file you have been working on as well as the source file for the example animation I created for the first page of the tutorial:

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.