The Interface

The interface is simple, you can choose to include or exclude the components . Use Figure 17.3 as your guide for the interface.

Figure 17.3. The Timeline displaying Frame 1 with the "Preview in Context" Timeline option.

1. Create seven Layers in your Timeline as illustrated in Figure 17.3. Name the Layers as follows and in the same order:

   Actions Will contain all ActionScript for the entire movie.

   Cursor Will contain the Cursor UI component.

   FaceParts Will contain a series of MovieClips for each face element.

   FaceBGs Will contain the face backgrounds.

   UI Components Will contain the Communication UI components, AVPresence, Chat, and PeopleList.

   Login Will contain the login text box and the PushButton UI component.

   BGs Will contain any background artwork. In the example it will be the gray boxes below the UI components.

2. Click Frame 1 of the Login layer.

3. Add a Text input box to the top of the stage. Give it the instance name login_txt . This will be used for the user to enter his name.

4. Drag a PushButton UI component next to the text box. Give it the label login and the Click Handler appLogin in the Properties panel.

5. Click Frame 1 of the UI Components layer.

6. Drag the following Communication UI components to the Flash stage in a similar location to Figure 17.1. Set the properties of the components as follows:

   ConnectionLight name: connectionLight_mc

   AVPresence name: av_mc , presenter SharedObject: av1

   Chat name: chat_mc

   PeopleList name: peopleList_mc

7. Click Frame 1 of the Cursor layer.

8. Drag a Cursor component to the Flash stage next to the ConnectionLight. Remember, this component will be invisible, so don't forget where you put it. Give it the instance name cursor_mc .

9. Click Frame 1 of the FaceParts layer.

10. Add in two dynamic text boxes. These will be used to let your users change the text within them.

Now comes the fun part. You will need to collect some graphics, images, or shapes to make this work. Any Flash asset that can be made into a MovieClip will work. The more you have the more fun it will be. The face parts illustrated in Figure 17.1 are available for download as a PC ZIP or Mac HQX package from the book's web site (http://flashcom.PangaeaNewMedia.ca).

Importing Images to the Library

You can do a bulk import with Flash MX when you import directly to the library. To import images and convert them to MovieClips, follow these simple steps:

1. Click Frame 1 of the FaceParts layer.

2. Choose File, Import to Library from the Flash MX menu.

3. Browse your operating system or networked drives for images or artwork you want to use. Select as many as you want. Just remember, you will have to place them all on your Flash stage.

4. When you have the images in your library, you can now make them MovieClips. To control them with ActionScript, you must first place them on the main Flash stage with instance names .

Tip

If you are comfortable with the attachMovieClip function, you can dynamically use the library assets without going through the MovieClip process.

There are other import options available. Ensure your play head is on the correct frame before you choose any of these other options.

• Copy and paste. If you use Macromedia Freehand, Adobe Illustrator, or any other graphics program, you can copy and paste vector or raster graphics directly onto the Flash stage.

• Other Flash documents. You can copy and paste artwork and MovieClips directly from other Flash documents. Simply select the object or the frame, copy it, and then paste it within your document.

• Drawing tools. You can create objects using the Flash MX drawing tools. Make sure they are grouped together into their own MovieClips. They could even be animated MovieClips just to make it even more interesting.

With your assets now available you must now make them MovieClips. When an imported item becomes a MovieClip, it will inherit the properties and methods of the MovieClip object letting you control it with ActionScript.

1. Click Frame 1 of the FaceParts layer. (Yes, this keeps repeating itself, because it's important.)

2. From the library, drag each imported image or asset to the Flash stage.

3. Convert each asset to a symbol by selecting it and pressing F8 (or Insert, Convert to Symbol). This will invoke a dialog box as in Figure 17.4.

   Figure 17.4. The dialog box that will appear when converting an item to a MovieClip.

   

4. It doesn't matter what you name it at this point. It will be the instance name that you will use to control it. As a point of organization, name the clip the same as the instance name. Click OK

5. Assign the new MovieClip an instance name in the Properties panel. If you have a number of clips, you will need to remember what you called them all, so choose a logical naming convention. These names will be used in an array later, so use a sequential naming convention (mouth1, mouth2, mouth3, and so on).

6. Repeat Steps 1 through 5 for each asset in your library.

When all your assets have been made into MovieClips with unique instance names, you are then ready for coding.

The only thing you haven't done at this point is add background artwork to the FacesBG layer. Because the artwork is not critical for this tutorial, let's move on to the code layer instead.