The Flash Connection Make mine Actionscript 3.0!

This time we'll start with the fla file first, and craft a suitable expanding help box MovieClip. Open a new Flash file (Actionscript 3.0). Then, go to the Insert menu, and choose "New Symbol." Name it "helpbox," choose MovieClip type, and click OK.

Now, you're in the edit mode of a new MovieClip symbol. In the clip's timeline, create two more layers. Now you should have three layers. Name them (from the top down), "actions," "text," and "bg." Next, click the second frame, top layer. Hold the mouse down and drag till you highlight the second frame on all three layers, then let go. With the second frame of all three layers selected, press F6 to add keyframes to all of them at once. Your timeline should now look like this:

Whenever I design a MovieClip, I usually start from the back and work my way to the front, locking the layers as I go. That way nothing gets placed where I don't want it. So starting with the bg (background) layer, click the first frame there. Choose the Rectangle tool, choose whatever colors you want for stroke and fill (the stroke is optional, but do choose a fill, as our mouse events are going to require it). Draw a small rectangle (bear in mind that this is the collapsed box we're drawing here). Select it all and align it to the upper left corner. I chose a black stroke with a thickness of 5, rounded corners set at 6, and a white fill, and drew this:

Click the second frame of the bg layer, and draw a larger rectangle. You can use whatever colors you want; I chose to keep the same look. This one is going to be the expanded box, of course. You should make it at least five times larger, although there's no exact size or proportions you need to use. Make it whatever size you think you'll need to accomodate a paragraph or two of text. Again, make sure it's aligned with the top left corner. Here's what I drew, using the same stroke and fill settings:

You should have both frames of the bg layer completed now, so go ahead and lock it. Click on the first frame of the text layer. Select the Text tool, and in the properties panel, choose static text. Click the stage to place a new static textbox. In the properties panel, choose a font face, size, color, and boldness. I chose the "Cooper Black" font, black color, with bold, and found that a size of 16 was about right. In the text box, I typed the word "Help," then chose the arrow (selection) tool to center it to my liking. This was the result:

Next, click on the second frame of the text layer. Click the Text tool again. Again, choose static text, and create a larger static text box with a couple of paragraphs of information, whatever you want. I chose to use a bit of "lorem ipsum" text as just kind of a placeholder. It'll do fine for the purposes of this tutorial, I think. I chose the same font face, color, size, etc. So my expanded box on the second frame now  looks like this:

And that's it for the text layer, so go ahead and lock it. Next, click the first frame of the actions layer. Press F9 to get the actions panel. Put a stop() command on line 1 of the actions panel for this frame. Click the second frame of the actions layer and do the same thing, so that there's a stop() command on each frame of the actions layer. Lock the actions layer. The MovieClip design is complete. Go ahead and click the Scene 1 button to return to the main timeline.

Drag an instance of the MovieClip you just created to the stage. With the instance selected, go to the properties panel and type "help" as its instance name. The instance is ready for the Expander class to control it.