Using components in Flash

Posted: Wed Aug 30, 2006 8:55 AM

Building complex flash applications with ActionScript 2 and Flash 8 can be a daunting task. However, it can be very beneficial for developers who wish to have easy to maintain code and a simple test environment. Following is a very brief and simplified version of the process. I am assuming that you already have some experience in building Flash apps and using ActionScript.

If you are not familiar with components in Flash, here is a brief explanation. A component is basically an independent SWF file that runs inside of another SWF. Since it is self-contained, you can create multiple instances of the same component in your main file. This can be helpful if you have a control that you need access to multiple times, for example, a cursor.

To create a component, follow the same procedure in Flash as if you were creating an independent SWF file. In our cursor example, I created a document called Cursor.fla. I also like to use eclipse for editing my ActionScript, so I created a Cursor.as class file to go along with my Cursor.swf file. If you aren’t familiar with that process, post a comment and I can add another blog entry.

After you open your new component .fla file, it looks the same as any other file. First create a new symbol in your Library (right-click on the Library area) and name it the same as your ActionScript class, in my case “Cursor”. Under the linkage options, click “Export for ActionScript” and then fill in the Identifier and AS 2.0 Class (I use the same name as my component, so “Cursor”).

You will notice that the new symbol looks the same as any other movieclip in the Library. To turn it into a component, you need to right-click on the movieclip (in the example called “Cursor”). Select “Component Definition” from the menu. In this dialog box, you can configure the component, as well as set up default parameters. The important change to make is the AS 2.0 Class text field. Here I would enter “Cursor”, because that is the name of my class file.

My configuration in Flash is finished, now it’s time to add my class definition in eclipse. Not too much goes in there for a cursor, just a mouse move event handler to set the cursor position to the root mouse position. After my class is set up, I can build any Layers and graphics I need to for my component. I like to reserve the first or top layer in the document for my ActionScript, just for simplicity.

So for my cursor, I might have several different graphics that I want for cursors at different times. I would add a keyframe in my ActionScript layer with the commands Mouse.hide(); and stop(); and a keyframe in my graphics layer with the cursor graphic. Then all I need to do is call my component, goto a specific frame, and the mouse cursor will disappear and my custom graphic will appear. You can add multiple keyframes, thereby keeping all of your cursors in the same location.

Now it’s time to build our component. In the Library, right click on the Cursor movieclip and select “Convert to Compiled Clip” which builds our class definition into the component. If everything is working, the movieclip icon will change into a icon with three colored blocks. You can test your component by adding some ActionScript into the Scene (maybe like a gotoAndStop(3); to show your third cursor) and then select “Test Movie” from the Control menu. You can test and debug your component in the developer environment, which gives you access to the trace() command and other error checking, which is helpful.

Once you are happy with your component, right-click on it in the Library and select “Export SWC File”. Save the .swc file in the components directory so you can use it later. Now click on the menu directly to the right of “Components” (in the sheet) and you will see a “Reload” option. Select it, and your custom component should show up under the Standard Components section. Simply drag your component into another SWF, give it an instance name, and you are ready to go.