go to next step

Introduction:
What Makes a Professional Flash Component?

Making a professional Flash Component that you can sell or distribute as open-source requires quite a bit of work. For one thing, it is not merely enough to create a component that works and to release it. In this tutorial, we will be creating and packaging up a simple Flash Component along with its Custom UI and Live Preview SWFs, Reference Panel documentation, Syntax Highlighting and Code Hints into one easy-to-install setup file.

Before we begin, lets review the five important features that all professional components should have:

1. Documentation: Developers are (usually) not psychic and need guidance when first trying to learn to use your component as well as a reference to consult throughout the development process should they have questions or need to refer to less frequently utilized features. Flash MX comes to our aid by allowing us to install Reference Panel documentation from within an MXP so that users can access our component's documentation directly from within the Flash authoring environment.

2. Custom UI: All but the simplest components will utilize a custom user interface to group frequently used component features together and simply the customization of the component. Custom UIs of complex components can come to resemble the UIs of fully-blown applications. A Custom UI is created as a separate SWF and embedded into the component SWF before it is packaged together into the MXP.

3. Live Preview: Flash MX allows components to display a preview of how they will appear when the movie is run from within the authoring environment. For example, when you drag a push button component from the first Flash Component Set on to the stage and resize it, it doesn't just get stretched as would a regular movie clip. Instead it resizes itself and re-centers its label, in effect acting exactly as it would if the movie were run. This is live preview and it is a very powerful feature. Again, all but the simplest professional components will feature live preview. The Live Preview is also created as a separate SWF but embedded in the component SWF before being packaged into the MXP.

4. Syntax highlighting: Flash is great at knowing method names and reserved words and highlighting them as you type in the Actions Panel. With a little work, we can get it to recognize the methods and properties of our custom components too!

5. Code Hints: You know when you're typing along in the Actions panel and you enter the name of a movie clip or text field using the correct suffix (_mc and _txt, respectively) and suddenly this box pops up with all the methods for your object? Well that feature is called Code Hints and we're going to find out just how simple it is to make use of it in our components.

In this tutorial, we will create a very basic component that has a Custom UI, Live Preview and features Reference Panel documentation as well as Syntax Highlighting and Code Hints for its methods. The component itself will be very simple so that you can concentrate on the process of creating and packaging a professional component. Before you start, make sure you download the necessary source files so you can follow along (very_simple_button.zip).

All right, let's get cracking!

go to next step