Creating Custom Components in Flash

Remember smart clips in Flash 5? These were the small reusable movie clips that also contained customizable parameters for subsequent usage. Well, smart clips have come a long way since then and in Flash MX, an extension has been made to these, called components. For example, Flash MX 2004 Professional comes with a calendar component, which can straightaway be dragged out of the components panel and customized. In this article, we’ll explain the concept of custom components by making a simple button component. You would be able to change various attributes of the button, such as font, color and formatting after the component has been made. 

For this, you’ll first create the button, make a custom icon for it, and finally add plain text descriptions to it. We assume that you have basic knowledge of Flash and action scripts for this tutorial. Let’s get started then.

Create the movie clip for the component



Take a file called ‘f_comp_begin.fla’ from this month’s Extreme CD for the task. 

Open the f_comp_begin file and press F11 to open the Library. Here, you’ll see two objects, a button and a movie clip. We’ll use both objects to create the component. The movie clip is used in the button to make the color changing effect.

These are settings for the text on top of the button

Click on the empty layer, by the name of ‘text’, on the timeline and subsequently click on the text tool on the tool bar. Now, add the text ‘enter’ on top of the button in the text layer. Press Ctrl+K to open the align panel and center align the button and text to each other. 

You would now need to change the attributes of the text so that it can be used as a variable in the component. Click on the text. In the properties panel, change the variable name to txt, instance name to ‘btn_txt’, font to ‘Trebuchet MS’, font size to 16 and click on the ‘make editable’ button (second button from left in the bottom-right part of the properties panel). This will make the text non selectable.

The text is ready. You would now combine the text and the button to make the component. Click on the text and with the shift key pressed, click on the button instance on stage. Press F8 to open the ‘convert to’ symbol dialog. Type the symbol name as ‘component’ and make sure that the symbol type is movie clip.






With that, the graphics part of component building is completed. Next step is scripting

Adding the script



Open the library (F11) and double click on the component symbol to edit it. Once the timeline of the symbol is displayed, add a new layer to it and name it ‘action’.

This layer will be used to add actions to the movie clip. The following code is used to change the attributes of the text on the symbol using these variables, namely txt_color, txt_format and txt_font. While txt_color, txt_bold, txt_size and txt_font, control the color and font of the button text, txt_format is the instance of the function TextFormat, which is an in built function for formatting the text attributes.

Parameter definition for the component

Btn_text.textColor = txt_color;



Txt_format = new TextFormat();


Txt_fomrat.font = txt_font;


txt_format.bold = txt_bold;


txt_format.size = txt_size;


Btn_text.setTextFormat(txt_format);





Add this code to the first frame of the ‘action’ layer.

Adding corresponding parameters



Now, you need to make these variables accessible to the user. Open the library and select the component ‘movie clip’ from it. Then, open the library options by clicking on the options button on the right-top corner of the library panel. This will give a drop-down, from where you have to choose ‘component definition’. This would give a box similar to the one shown. 

Click on the + button on top of the dialog box to add parameters that can be set by the user when he uses the component. A new line will be added in the parameters list. Enter ‘Button Name’ for the name, which will be shown in the parameters panel to identify the property. Put ‘txt’ for the variable, ‘enter’ for the value and choose string from the type drop-down. 

Similarly add the following values in the parameters list as shown in box below.

In the tool tip text textbox, type the brief description that you want to appear when a user rolls over the component in the components panel. We typed ‘red-blue button’.

When you press OK, the icon of the movie clip will change to the icon of a component in the Library palette.

Adding description



You can add the description to the component in various ways, as plain text or as part of the reference panel item. We would just use plain text in this tutorial. 

Open the Component definition panel and click on the ‘set’ button. Then, click on ‘description’ in the plain text radio-button in the following dialog box and enter the description in the text box provided there. Press Ok and you’re done. You can also use XML to add descriptions and help to the button. 

Creating a custom icon



You can also add a custom icon to the component. Create a 20X20 bitmap image in your favorite image editor, or you can use the icon.png file given in the tutorial folder. 

Press File>Import to library to import the icon to the library. Create a new folder in the library and name it ‘FcustomIcons’. Drag and drop icon.png on the FCustomIcons folder to move the file to that folder. Open the FCustomIcons folder and rename the icon.png to component by double-clicking on its name. It is mandatory for the icon name to be same as the component name or you would not see the icon.Close the library and reopen it to see the component with the new icon. 

Using the custom components



You must add the components in the components folder of Flash to see them in the components panel in Macromedia Flash. Save the file and exit Flash.

Copy the .fla and all supporting component files in the following folder depending upon your operating system:

If you’re using Win 2K/ XP: 

C:\Documents and Settings\user\Application Data\Macromedia\Flash MX\Configuration\Components

If you’re using Win 98/Me:

C:\Windows\Application Data\Macromedia\Flash MX\Configuration\Components

Now reopen Flash and open the components panel (ctrl + F7). Click on the components drop-down and you would see your component there. There are many other things that you can do to create your own custom components, such as have a custom UI and live preview of the component. We’ll not get into those in this tutorial, and leave them as an exercise for you. Let us know how you fared in them. 

Geetaj Channana