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.

After the release of the V3 components for Flash MX 2004, Flash 8 and 9 with ActionScript 2.0, we started working on the components for Flash CS3 with ActionScript 3.0. So, after a month of Flash CS3 and AS3 here’s a personal overview of Adobe’s new product.

The new language features were a welcome addition and the rebuilt framework proved to be better than the previous Macromedia V2 architecture (at least, this is my opinion after a few days of work with AS3 and the new Adobe framework). In my personal opinion, AS 3 is a big leap forward, though it has its own problems (a few design faults- things I would have done a little different), but still, I’m already falling in love with AS3 (I started programming in C/C++ and Delphi, so I’m glad they decided to base the new language on the ECMAScript).

The “new” IDE looks better than the old one, but, I believe, it doesn’t perform as well. The transparency of the panels uses significant system resources and it’s not so easy to place them in the desired position, they have the tendency to attach them selves to other panels. The new ActionScript editor is better than the previous one and besides it, the new Flash CS3 has a few more interesting features (the possibility to import Photoshop files with their layers, advanced debugger or the new, easily skinnable, interface components). But, I’ve read other people’s opinions and I agree that for those who use Flash mainly to create animations and user interfaces, Flash 8 it’s more suitable. Those who need Flash with AS3… it’s clear… they need Flash CS3.

Finally, I give two thumbs up for ActionScript 3.0 and… let’s say… half a thumb up for the new IDE.

negush

We’ve just launched the MCTE V3 (MovieClip Transition Effect V3), the one and only flash transition manager, with lots of included patterns and customizable presets, the MCTE is maybe the most important flash component that ever launched.

We’re now working on various custom patterns to add value to the MCTE V3.
Visit the MCTE V3 page.

The story of the MCTE V3

We wanted to help flash users to make show/hide MovieClip animations without knowing to code, in a fast reliable way. After we released the Square Effects component we started to think about a component that will be used for all possible transitions between 2 different states of a MovieClip and we came up with the idea of THE MovieClip Transition Effect (MCTE).

With lots of patterns, having their own presets, with some customParams, a general Gain parameter, and with customizable tweening, MCTE V3 is simply the most easy to use, the most customizable transition effect ever.

We are currently developing other cool effects for the MCTE so all previous customers will not need to learn new component models after using MCTE. Once you understand how MCTE works, you can use it for all your animations, both frame animations, and dynamic animations, and change the patterns and presets at a blink of an eye.

The mass preorder rate that MCTE encountered convinced us to develop further patterns and packages (Both AS2.0 and AS3.0) and to improve the MCTE in order to fulfill your needs; this is why we want to assure you that working with the MCTE will be an easy job.