Flash Reference Guide

Most components are comprised of two distinct elements: graphics and ActionScript (which are kept separate from each other). In this section, you create the graphics needed for the Preloader component.

1. Create a new movie. Size the movie to 400 pixels x 200 pixels. The size of the movie is not critical to the final component; it merely gives you extra room in which to develop.

2. On the Stage, draw a rectangle 240 pixels x 10 pixels.

3. Select the rectangle, press F8, and convert the shape into a Movie Clip; name it bar_graphic.

4. Create a new Movie Clip in the Library and name it color.

5. Edit the color Movie Clip. In the center of it, create a blue rectangle 240 pixels x 40 pixels. You need to use the content of the bar_graphic Movie Clip in a second movie. Drag a second instance of the bar_graphic from the Library; select the new instance. In the Property Inspector, name the instance bar_clip. The Clip maintains all the visual elements of the bar_graphic Clip. Edit the Clip and fill its center with the color #6600CC.

6. Combine the Movie Clips for the final movie. In the Library, create a new Movie Clip and name it bar_clip. Edit the Movie Clip and give it two layers, labeled Alpha and Color. Drag the Color layer beneath the Alpha layer. Select the Color layer. Drag the instance of the color Movie Clip into the center of the Stage. Select the Alpha layer and drag an instance of bar_graphic Movie Clip over the color Movie Clip. With the bar_graphic still selected, select Alpha from the color drop-down menu in the Property Inspector. Change the Alpha level to 70%. The color Movie Clip should now be visible through the bar_graphic Movie Clip.

7. From the Library, create another Movie Clip and name it preload_clip. Edit the preload_clip. Drag an instance of bar_graphic onto the center of the Stage within the preload_clip movie instance. Name the bar_graphic Movie Clip bar in the Property Inspector.

These few steps are all you need to build all the graphical elements for the component. It is good to get in to the habit of organizing your Library with folders for different parts of your component, which makes it easier to manage the different elements of the component.

Managing Your Library

The elements that allow you to define a component are all contained within the Library. Where you place the folders and how you name the specific movies control the way a component is constructed.

1. Begin by organizing your Library. Create a new folder and name it Preloader Assets. Drag all the movies that you have created so far into the Preloader Assets folder.

NOTE

An Assets folder is a standard used with many components. It is used for storing Movie Clips, buttons, and graphics.

2. Create a second folder and name it FCustomIcons. You will use this folder later in the section to create a custom icon for your component.

NOTE

The name FCustomIcons has a special meaning with Flash MX. A bitmap file added to this folder with the same name as the component will become the default icon for the component.

3. In the Library, create a new Movie Clip and name it Preloader. Do not place this Movie Clip in a folder; it becomes the component.

Creating the Component

As a designer, you want to control how the text appears in the Preloader.

1. From the Library, select the Preloader Movie Clip and open it in Edit mode. Select Frame 1 of the movie. Add the following ActionScript (notice that it is the same Preloader script created earlier in this section):

myformat = new textformat()
myformat.font = txtfont;
myformat.color = txtcolor;
myformat.bold = txtbold;
myformat.italic = txtitalic;
myformat.size = txtsize;
myformat.align = "center"
preloader._visible=false;
if (preloader.percentbytes >= 100){	
_root.play();
}
myColor = new Color(preloader.bar.barcolor);

myColor.setRGB(barcolor);

This code establishes variable names for a variable called myformat. Notice that myformat is the name of the text box programmatically created in your script. The value of creating a component is that you can manipulate parameters within the component; for example, font type, size, and color. Parameters can be set up in a component to allow you to have this level of control.

2. Right-click the Preloader Movie Clip in the Library. Select Component Definition, and the Component Definition window opens. In the Parameters section, select the + symbol and add a new parameter.

3. Name the variable Font Face. This name appears in the Parameter name for this component. Next, link this name to a variable you created in your earlier ActionScript; in this case, the variable is txtfont (for variable, type txtfont). From the drop-down menu in the type field, choose Font Name. This option defaults the Value field to list Fonts. Choose _sans.

4. Add a second parameter and name it Font Color. Choose the variable to be txtcolor and the type field to be color. The value should be #000000 (this is the hex number for black). You need to add variables that reference Txtbold, Txtitalic, Txtsize, barcolor, and txtstyle. Each of these variables controls visual elements you see on the Stage.

5. Enter Preloader for ToolTip text and click OK.

6. The icon for the movie has now changed to show that the Movie Clip is now a component.

At this point, the component is done. Drag an instance of it onto the Stage and observe the parameters you can change in the Property Inspector. You can leave the component as is, but the next section shows you how to take it a few steps further to make the component very useful.

Creating a Custom Icon

When you set up the Library for the component, you added a folder called FCustomIcons. This folder is special in that it tells Flash to look for a match between a graphic file and the component. If the graphic and the name match, the component adopts the graphic image as the default image for the component. Follow these steps to create a custom icon of your own:

1. Create an icon. You can create icons with the PNG, GIF, or JPEG image formats. The image should be 23 pixels x 20 pixels to fit on the Components panel.

2. Import an image that will be used as the icon directly into the Library.

3. Move the image into the FCustomIcons folder. Rename the image to the same name as the component—the names must be identical.

4. Close the Library.

5. Reopen the Library. The symbol for the component should now look like the graphic you imported.

The possibilities are limitless as to what you can use as the graphic for your component. Let your imagination go wild!

Placing the Component in the Components Panel

So now you have a component that works, and it has a cool icon. Now you need to be able to use the component each time you run Flash MX. To be able to do so, all you need to do is save the Preloader.fla file to a special place within the configuration folder for your computer.

Each computer's operating system keeps the components in a different place. Check Table 1 for your computer operating system type.

Table 2 Where to Save Components

After you place the file in the correct folder, close Flash MX. When you reopen Flash, go to the Component folder to find your new component. Whenever you open any new file, you have access to the component.

You now need to know how to package the component for distribution over the Internet. To package the component, you have to create a file that is controlled by the Macromedia Extension Manager, which is a cool tool that allows you to add any number of new extensions for any Macromedia product.

You can create the files needed to distribute the Preloader by first creating an MXI document called Preloader.mxi. This file contains the information that the Extension Manager needs to create a packaged file for distribution over the Internet. You can download this sample file from the web site.

The following tutorial explains how to package your components into a portable format using the Macromedia Extension Manager.

1. Copy the Preloader.fla file to a new folder.

2. Open Notepad or any text editor and create a file called Preloader.mxi. Save this file to the same folder that contains your component. This MXI file tells the Extension Manager where to place the Preloader.fla file.

3. Open the MXI folder and add the following XML script:

The following code allows you to give the component some properties. The first is ID—each component you create must have a unique ID. The Extension Manager does not load the movie if you do not provide a unique ID.

The second and third lines allow you to give your Preloader a name and a version. You can create a component and keep modifying it over a period of time. Each time you modify a component and package it with the Extension Manager, give the component a version number, which enables you to track which version of the component you are distributing.

The type definition identifies what kind of component you are creating. The standard is to label them Flash Component.

The product name identifies which Macromedia product your extension is being created for. The Extension Manager manages all extensions for Flash MX, Dreamweaver MX, Fireworks MX, and UltraDev. Type in Flash for the name and add 6 as the version number. (This refers to Flash MX, which is the sixth major release of Flash.)

You can also add your own name, which shows up in the Extension Manager.

TIP

I always add my Web site address for just a bit of free advertising.

<macromedia-extension id="md05072002" 
name="Preloading Component"
version="1.0"
type="Flash Component"
requires-restart = "false">
<!-- List the required/compatible products -->
<products>
<product name="Flash" version="6" primary="true" /> 
</products> 
<!-- Describe the author -->
<author name="Matthew David - http://www.matthewdavid.ws" />
<!-- Describe the extension -->
<description>

<![CDATA[

The following section of code from the MXI script describes where the Preloader component is installed. You want to install the component in the Components folder for Flash MX. You do not know which system Flash MX is installed or how a user has installed it. To solve this problem, the Extension Manager allows you to add a $ symbol before flash/Components.

NOTE

The dollar sign is a special character that tells the Extension Manager to look for the directory in which Flash is installed. This works for all computer systems supporting the Extension Manager.

]]>
</description>
<!-- Describe where the extension shows in the UI of the product -->
<ui-access>
<![CDATA[
]]>
</ui-access>
<!-- Describe the files that comprise the extension -->
<files>
<file source="preloader.fla" destination="$flash/Components" />
</files>

</macromedia-extension>

NOTE

For more information on how the MXI file format is broken down, visit this web site.

4. Save the file.

5. Open the Extension Manager.

6. Choose File, Package Extension. A window opens that allows you to select the MXI file you have created.

7. Navigate to the Preloader.mxi file. Click OK. You are asked where Preloader.mxp should be saved. Save it to your desktop.

You have now packaged your Preloader component in a file type that can be sent to any Macromedia Flash MX user. The final file can be sent to any person through e-mail, downloaded off a web site, or submitted to the Macromedia Exchange. Your component is now portable.

• flashcomponents.net

• Exchange

• Blog*Spot

You now have a fully functional Preloader. To see how easy it is to now use this component, reopen a movie. Drag and drop the Preloader component from the Components panel on the movie. Without having to write any ActionScript, you add a Preloader.