Today's Show: Babies Having Babies

Tomorrow: Movies within Movies

Download another Flash file, essential_accessories.fla.

I got to thinking that the penguin might be cold out there on the ice - especially with the wind and all - so I made him a hat, a scarf, and one mitten. We'll use these accessories to create a movie clip that will not only keep the little guy warm, but also illustrate motion even more convincingly (yes - it IS possible).

If you don't have our first Flash movie, "pengoo_in_01.fla" open already, open it now. The first thing we are going to do is turn the penguin symbol into a movie clip.

You may have noticed that the library window has a few buttons on the bottom. With the penguin symbol selected in the library, click on the little round "i" button, (symbol properties).

Change the behavior to movie clip and click OK. The three behaviors are the three different kinds of symbols you can create in Flash (you can import other types). Here is a summary of each:

Graphic - a static image, like the penguin was before. You can move a graphic symbol around, change its shape, and use it inside other symbols. That's about all a graphic symbol does.

Button - just like it sounds. It acts as a "hot" area in the movie by default.

Movie Clip - anything goes. A movie clip can have all the characteristics of a full Flash movie, including animation, actions, etc.

Now let's open up the penguin movie clip, (double click on the penguin icon in the Library list), and edit it. The first thing you'll notice is that the black background is no good for editing a black image. Change the background (in movie properties - CTRL - M, or Modify > Movie) to something you can work with, like grey.

Create a new layer in the penguin movie clip, just like we did earlier, in the main movie timeline. Name it "accessories".

Open essential_accessories.fla as a library, (CTRL - SHIFT - O or File > Open As Library). Drag the accessories onto our friend and place them as your eye guides.

Notice that scarf is itself a movie clip. Notice also that when you place the symbols from the foreign library into the movie, they automatically appear in the native library. Pretty slick, eh?

Very Important Step: double click on the scarf our friend is now wearing. This opens the box that you will spend the rest of your life staring at in wonder and frustration if you end up developing serious web applications in Flash, the Instance Properties dialogue.

Name the instance "scarf" and click OK.

Change your background color back and test your movie. The penguin is now fully clothed.

Let's make a couple of buttons - one to make the penguin stop skating, and one to make him start again.

In the library window, click the little plus sign for a new symbol. Name it stop, select the "button" behavior and click OK.

Now we have 4 frames. The first one, up, is what you see when the button is not doing anything. In this frame use your text tool to write the word "Stop" (14 would be a good font size).

Select the second frame, over, and insert a keyframe (F6) three times. You should now have identical contents in all four frames of your button.

We want the text to change color in the second frame. This is the frame that will show when the user moves the mouse over the button. Double-click the word "stop" in the second frame and select a different color for it.

The third frame, down, is fine the way it is - the only time anyone sees it is during the moment that the user clicks on the button.

Go to the last frame and delete the text. The last frame, hit, defines the area that activates the button, (i.e. the area over which the mouse must be to click on the button). For a text-only button you will use a plain rectangle with no border. Using the rectangle tool draw out a rectangle that approximates the area that you want to activate when you press the button. Make sure the rectangle approximates the area.

That's it - you have a button. Duplicate the button by right - clicking on it in the library window and selecting "duplicate". Name it "start". Just change the text in each of the first three frames and you have another button.

Place each of these buttons on the "pond" layer in the animation. When you place the button on the stage you are creating an INSTANCE of the symbol, (ding ding ding! Keyword)!

File Size and Drawings
0 to 60 in Flash
Let's Go! - Actions