go to previous step

Step 7: Packaging it up

First let's take an inventory of just what we need to package up in our installer. To start with, we have our component SWF. Then there are the Live Preview and Custom UI SWFs. And last, but definitely not least, we have our Reference Panel documentation, Code Hints and Syntax Highlighting all in one XML file. All right, so we have four files to package up. Now we know what we have to package together but what sort of beast exactly is this "package" that we want to create and how exactly do we go about creating it?

What we're going to create is called an MXP and we're going to start off my creating an MXI. (Scared yet?)

What is an MXP? Although it sounds cryptic, an MXP is nothing more than a Macromedia Extension Package, a compiled setup file for a Macromedia extension. Notice I didn't say for a "Flash extension" or "Flash Component" but a "Macromedia extension." This is because MXPs can be used for Dreamweaver and Fireworks as well (although, here, we will only be concentrating on how to create an MXP for a Flash Component.) Just like a SWF, the MXP is not the source but the binary file (you cannot edit it directly.) In the same way that you create SWFs from FLAs, you create an MXP from an MXI.

An MXI is a Macromedia Extension Installation file. It is an XML file (yes, another XML file!) that contains instructions on how to install your extension. You compile an MXI file into an MXP using the Macromedia Extension Manager. If you don't already have this piece of software, it is a good idea to download it now from Macromedia (it's free) since we're going to be using it in a few minutes.

Aside from allowing developers to create MXPs, the Macromedia Extension Manager is also responsible for installing MXPs. When you have the Macromedia Extension Manager installed, you can double-click on any MXP file to launch it and the extension will be installed automatically (if Flash is open, you'll have to restart it to see the latest changes.)

So let's get cracking and write up our MXI. If you'd rather not type it in, open up very_simple_button.mxi in your favorite text editor to follow along.

1. Open up your favorite text editor and type in the following XML (or follow along from the downloadable finished version)
   
   <macromedia-extension name = "Very Simple Button Component" version = "1.0.0" type = "flash component" requires-restart ="true" >
   <description>
   <![CDATA[A very simple button component with customizable label. Copyright © 2002, Aral Balkan. www.onRelease.org (Email: aral@onRelease.org)]]>
   </description>
   <ui-access>
   <![CDATA[The Very Simple Button Component will be added to your Components panel.]]>
   </ui-access>
   <author name = "Aral Balkan" />
   <products>
   <product name = "Flash" version = "6" primary ="true" />
   </products>
   <files>
   <file source = "Very Simple Button.fla" destination = "$flash/Components" />
   <file source = "very_simple_docs.xml" destination = "$flash/ActionsPanel/CustomActions" />
   </files>
   </macromedia-extension>
   
2. The contents of the <description> and <ui-access> tags get displayed within the Macromedia Extension Manager (after the component is installed, of course) and are there to inform users of the purpose of the component as well as to give them some idea of where to look for it.
   
   The <products> tag tells us that we're installing an extension for Flash and the <files> tag contains the two files that we'll be installing using the MXP: The component itself and our documentation XML file. Notice how I've strayed from my file naming convention for the name of the component file. This is because Flash displays the file name in the Components Panel and "very_simple_component" just doesn't look professional!
   
   Finally, the destination paths are the standard destination paths for these assets. But wait a minute!.. What about the Live Preview and Custom UI? Well we can't install those using the MXP, however, we can include them as part of the component's FLA. In fact, I've already done this in very_simple_button.fla. Open up that file and follow along.
   
3. In very_simple_button_component.fla, open up the Library (F11; Ctrl-L), Right-Click (Ctrl-Click) on the Very Simple Button component and select Component Definition from the context-sensitive menu. Notice how both the Live Preview and Custom UI have "(embedded)" next to them (you set this using the Set... button next to each.) By embedding the Custom UI and Live Preview in the component, we solve an otherwise nasty deployment problem! Also notice how the "Display in Components panel" option is selected and I've entered some text for the Tool Tip Text. If you don't check this option, your component will not appear in the Components panel so make sure you have it checked!
   
   
   
4. Before you exit out of the component's FLA, I want to draw your attention to some finishing touches I've added. Open up the Library (F11; Ctrl-L) and look at the structure of the folders. For one thing, our component has a folder of its own. If you are thinking of releasing more than one component, it's a good idea to have yet another folder above it (something like "Aral's Components") so that all of your components will end up in one place (I haven't done that here.) Also notice how I've hidden the movie clips that are part of the component in a folder labeled"Core Assets - Developer Only". This is so your casual user won't stumble upon them and get confused. Finally, you'll notice that our component now has its own icon. The method for adding this icon is really quite interesting: You create a special folder called FCustomIcons and then give the asset that you want to appear as the icon for your component the same name as your component. In this case, both my component and the icon bitmap (a PNG called very_simple_icon.png, which you'll find in the downloadable resource files) have the name " Very Simple Button". No, that's not a typo. The name of the component begins with a space. Why? Because that way it appears at the top of the folder where the user can easily grab it. It's all in the details!
   
   

1. Start up the Macromedia Extension Manager and select Package Extension from the File menu.
   
   
   
2. Browse to the directory where your MXI, FLA and the documentation XML are and select your MXI (very_simple_component.mxi) and hit OK.
   
   
   
3. The Extension Manager will prompt you to save the newly created MXP. The default name (very_simple_component.mxp) is too long, so let's call it very_simple.mxp. Press the Save button to write out the MXP.
   
   
   
4. If all goes well, you should see the message box below, telling you that our new MXP is ready!
   
   

Well, we've done it! It was quite a trip but now you know all the steps you need to follow to create a professional Flash Component. Now all that's left is to pour yourself a nice cold Piña Colada and try out our newly created MXP by double-clicking on it to install it. Once the setup is complete, you should see it appear in the list of components in the Extension Manager.

If Flash is open, shut it down and restart it. Now go to the Components Panel and you should be able to find Very Simple Button in there.

Next, let's take a look in the Reference Panel. Look! There's our documentation. Groovy!

What about Code Hints? Well, open up the Actions Panel and type in myButton_vsb. (that's a dot at the end) -- our two methods should pop right up.

And Syntax Highlighting? Well, select the getLabel method from the list and watch as it gets highlighted! Perfect!

Now it's your turn. You now know the process and have all the information you need to create professional Flash Components. Go forth and create! (Oh yes, and make sure you send me copies of your wonderful creations!)

go to previous step