A few weeks ago, I started rewriting the V3 components from AS2 to AS3. Since I didn’t find any documentation from Adobe on how to create components for the new Flash CS3, I assumed it is done just like in the previous version of Flash. So I started working on AS3 version of LoaderProV3 component and managed to create a working version for AS3. I wrote a class and then, created the .swc file. So, I was happy that I managed to create my first Flash CS3 component, using AS3 coding. The loader does not have any assets so I didn’t bother with the fact that I could edit the assets for Adobe’s new Flash UI components simply by double clicking on the instance on stage.

The next component, how ever, required to do just that. It was a slider component with skinning possibilities, so the user should be able to edit the component’s assets on the stage. A created the component’s .swc file, but it didn’t work like the new Adobe components. After digging a bit through Adobe’s documentation I found out that Flash CS3 now supports .fla based components. Basically, you wouldn’t have .swc file, but a .fla file, containing all the component’s required classes and assets. Now, the big question: how on earth would you do that ? Adobe’s documentation doesn’t really say anything about component creation, only about how to skin the existing components.

I posted a question on one of Adobe’s forums, but it didn’t get answered. I don’t know, maybe I wasn’t clear enough or I just didn’t post it on the right forum. Anyway, I was able to find some valuable information on a few blogs. A step-by-step tutorial on how to build fla-based components for Flash CS3 can be found here (FlashBrighton) and here (you should read the comments too).

Currently, Flash CS3 supports two types of components: swc-based components and .fla based components. If your components don’t need any assets or skinning, probably the traditional .swc components will work just fine. These types of components are created exactly the same way as in Flash 8 or earlier. But if you create visual components, which are skinnable, you should probably choose the .fla based components, since the new way of editing assets is pretty convenient to everybody.

How to create a simple .fla component

In case of .fla based components for Flash CS3, there are a few more steps to follow:

1. First, create your component’s class and .fla files. The .fla file must contain whatever assets you need for the visual part of the component, a component shim, a component avatar and the movie clip corresponding to your component (with the correct linkage id and class associated).

2. In your .fla file create any artwork and skin clips you need for your component. Give them the linkage ids you need. Next, create an empty movie clip which will have the same name as your component. Don’t forget to give it a linkage id and associate your component’s class to it (Properties panel).

3. The component’s avatar is basically the bounding box. To create this avatar, you need to create an empty clip and draw a rectangle into it at the x=0 and y=0 coordinates. Then, drag the avatar clip from the Library into the first frame of the movie clip corresponding to your component. This avatar must be the only clip/shape on the first frame of your component’s clip.

4. The component shim is a compiled clip which has to have embedded into it all the classes your component needs. To create a component shim, you should open a new document and create as many empty clips in the Library as classes you need to embed (if you do not embed the classes into the component shim, you will have to give your component’s users the .fla file along with any .as file it uses). For each movie clip, you have to set in the Properties panel, the class to which it is associated (in case your component uses more than one class). Finally you’ll have to create one more clip and, in the Class edit box, of the Parameters panel, you should write a non-existing class name (you could use even “ComponentShim”, though, I belive it is better to use a different name for each component shim you create for your components). Convert the last clip into a compiled clip and copy it into your component’s .fla file. For any other details about the component shim, you should consult this article on www.flashbrighton.org.

5. Next, on the second frame your component’s clip, you need to place all the assets of the component: movie clips for the different states of the component, different artwork you need, a focus rectangle (if your component needs one) and the component shim.

6. Finally, right-click on the component’s clip and open the Component definition panel. Here, you need to set the main class of your component, check the Display in Components panel checkbox (otherwise it won’t appear in the Components panel) and set the Edit frame property to 2 (that way, when the user double clicks on your component, the contents of the second frame will be displayed – the component’s assets). In addition, you may set an icon for your component (click the button under the “Description” label and choose a predefined icon or your own custom one, or you can also use the [IconFile("iconName")] meta tag in your component’s class) and a live preview (if your component needs one).

7. To set up a live preview from an external .swf file, you need to create a new .fla document which has the fl.livepreview.LivePreviewParent class as document class and place your component on the stage (which has the same height as your component) at the (0, 0) coordinates; next, create the .swf file and, in the original .fla file of your component, give the new .swf file as your component’s live preview, in the Component Definition panel (I usually choose Live preview with .swf file embedded in .fla file).

8. After you have finished, you need to place the .fla file in the flash components folder

[Windows 2000/XP] Documents and Settings\userName\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\Components

or

Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components\ - this path works too.

Fla based complex components that contain other components

In case you develop a component that makes use of other components embedded in it (the case of Adobe’s TextArea component which is composed of the TextArea component and the UIScrollBar component), one problem arises.

I’ll give you an example:

If you create a scroll bar component you need to put it into the flash components path to be able to access it from the Components panel. Next, you decide to create a TextArea component which uses the scroll bar component (it will be embedded into the TextArea .fla file). After you finish developing the component, you copy the .fla file to the flash components path. Next time you start Flash CS3, in the Components panel, you will see one TextArea component and two scroll bar components.

This happened to me while I was working on a similar component (it uses another component previously developed by me). I looked into the new Adobe UI components sources and it looks like all the UI components are placed into a single .fla file. Looks like this is the case if you develop visual components that contain other visual components and you want your users to be able to edit the assets by double clicking on the component. This will take them into the second frame of the component, where all the assets are, along with instances of the other components you need. Next, they are able to double click on those components too, to edit their assets. This would be the correct way to customize the component assets but it comes with the previously mentioned cost: you would have to deploy your component along with the other components it uses with a single .fla file. So, if someone would like one of your components used by that complex one that you’ve created, he/she would have to get the .fla file of your complex component, along with all the components it uses.

A work around this inconvenience would be to include the other components into the compiled clip of the component shim, so your component will still have access to those other components but your component’s users wouldn’t be able to directly edit the assets of the other components.

This entry was posted on Friday, July 13th, 2007 at 7:50 am and is filed under Flash CS3. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.