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.

16 Responses to “Create .fla components for Flash CS3”

  1. spender says:

    it’s weird that adobe are leaving it to the community to unpick this new component model, so thanks for sharing your findings. i wonder when adobe will see fit to give us an official line on this?

  2. Alin says:

    Thank you for writing. We’ve discovered many things during the development of the V3 components. The community is a big help always. There are few useful info on Adobe but we hope that we will be able to release the AS 3.0 version working as the CS3 components are.

  3. negush says:

    Indeed, it’s a pity that Adobe left out this (important) part of their documentation. Maybe they would like the ActionScript developers to switch from Flash to Flex… ok… but what about the Flash users ? In case of Flash CS3, most of them are (or will be) probably designers, since Flash is more designer oriented than programmer oriented and Flex is more programmer oriented than designer oriented (at least this is how me and a few other colleagues believe). Anyway, if this would be the case, those designers would need plenty of third party components, since Flash CS3 comes with only a few UI and media components. Who would write those components ? How will they learn to correctly create fla based components for Flash CS3 ?

  4. Serkan Buldan says:

    Yup its good that im not the only one who couldnt find any documentaion about components, good work mate.

  5. alindogar says:

    I’m sure that sooner or later we will figure out how to build components for Flash CS3 designers. And I’m sure that the community will find solutions to this issue. However, any suggestions, ideas and messages will be appreciated :).

  6. Darren Ortiz says:

    I was wondering if by using this method to create a component in CS3 if I would be forced to export as version 9. I would love to be able to build a component in the CS3 authoring environment but I can’t be restricted to using version 9 as a publish setting.

    Thanks! Great article.

  7. negush says:

    Well, Darren, if you create components using Flash CS3 and ActionScript 3.0, you won’t be able to use them in older versions of Flash. But you can still create ActionScript 2.0 components using Flash CS3 and install them in Flash 8 (I’ve already tried it).

  8. negush says:

    Finally, Adobe did post a report on how to create fla based components for Flash CS3. Here’s the link to the page: http://www.adobe.com/devnet/flash/articles/creating_as3_components.html

  9. I am facing a problem with component development where my component contain other components. After pasting my fla file to Components folder, Flash shows other components which are used in my component. I tried your workaround but it doesn’t works for me. Could you please explain a bit on how not to display the default components which are used in my component.

    What I have done:
    I created a Component Shim for my component by
    1.creating a blank MovieClip
    2.naming its class as MyComponentShim
    3.then converted it to Compiled clip
    4. Rename as MyComponentShim
    5. Replace default Component Shim with the one I created above and then compile my component again.
    6. Paste it to Components Folder.

    Please help me with this. I don’t want to display the default components used by my Component.

    Looking forward to your response.


    Chetan Sachdev

  10. I really like the Avatar 3D movie, particularly the story line, not only it brings a totally new sensation but eye opening thoughts of humanity. I heard the New Avatar 2 is comming soon, cannot wait to see it again…!

  11. Elly Leddy says:

    Rarely I can find good theme for WordPress. There are enough good themes, but very inconvenient in settings. I have installed recent versions of Crackatoa, Aparatus, Jarrah, Rockwell, also I installed also BAsense – simple, but optimized for adsense. Rarely you can find something normal but good in options.

  12. Thanks for this tutorial. Are you going to post a fresh Photoshop tutorial any time soon?

  13. Pc Boxen says:

    Hi all, i am from spain so my english knowledge is not that impressive. Please dont blame me. I read online journals to improve my english and i have to say that your blog was perfect readable for me, because the english is really clear and all the article are perfect readable. I will come back, to improve my english even more. Thanks a lot 🙂

  14. alejY2k says:

    Works to this day like a charm. Thanks!

  15. I Tip extensions
    This is for my personal collection and I’m completely satisfied with how and
    what I received. Again, I think you are being completely absurd.

    If I ever get to your point in comic book collecting, I’m
    going to quit because to me it will no longer by a relaxing hobby and instead an intensive money
    grab..

    costume wigs When the tenancy of The Rovers is being sold by
    the brewery in 1987, Bet can’t raise the money to buy it.
    Club owner Alec Gilroy (Roy Barraclough) offers her a loan but she
    can’t pay him back so flees to Spain for a few weeks. Alec manages to track her down to bring her back, and then proposes to her.
    costume wigs

    hair extensions Years later, I saw Free To Play and was blown away.
    I had no idea that it had grown or gotten so
    big. That pulled me back in, but much more on the spectator
    side than as a player. I know is that that baby is just about
    the cutest thing ever. While we all love photos of our children in full on grin,
    sometimes a different expression, even crying, can be priceless and
    bring the memories flooding back. Heck, they look like grumpy faces just as often as smiling angels, right?.
    hair extensions

    human hair wigs They ran of her messages, purchased her gloves and flowers,
    went in debt for opera boxes for her, and made themselves amiable in a thousand ways.

    And they talked English with adorable simplicity, and
    to the constant amusement of Becky and my Lord Steyne, she would mimic
    one or other to his face, and compliment him on his advance in the English language with a gravity which never failed to
    tickle the Marquis, her sardonic old patron. Truffigny gave Briggs a shawl by way of winning over Becky’s confidante, and asked her to take charge of a letter which the
    simple spinster handed over in public to the person to whom it
    was addressed, and the composition of which amused everybody
    who read it greatly. human hair wigs

    hair extensions My co creators tend to start the game differently every time,
    and yet also the same: Usually with a fetch quest.

    The fetch quest is pretty insignifigant, but it leads to exploration which generates the “game”.
    We started with shipwrecks, Martel company boats anchored off the shore, and even a couple airship and airship crashes.
    hair extensions

    cheap wigs human hair “Silver, sir,” returned the captain; “he’s as anxious as you and I to smother things up. This is a tiff; he’d soon talk ’em out of it if he had the chance, and what I propose to do is to give him the chance. Let’s allow the men an afternoon ashore. (CC) Holland BaptistaThis monopodial species is a good example of what can be an orchid of aerial growth: some of its roots get attached to the tree but most of them just hang from the branches. They are covered by a white spongy tissue (the vellamen) which is responsible for absorbing humidity from the air and storing rain water. This species also bears special evergreen inflorescences used for blooming over several years.. cheap wigs human hair

    human hair wigs The majority of the feuds remained unresolved and carried on to future events. Bam Bam Bigelow was scheduled to face his main rival, Doink the Clown, but Bigelow’s team ended up facing four other wrestlers wearing clown makeup instead. Matches from the Survivor Series also helped set up feuds for Royal Rumble 1994, the WWF’s next pay per view. human hair wigs

    wigs online By distributing this task from the regular editors of one article to the regular editors of several articles, I believe that the task of fact checking this information can be expedited. Thank you very much. Philwelch 20:45, 24 Mar 2005 (UTC)’have gas’Well, the part about why she uses that very stage name reads fairly funny, but I assume ‘have gas’ is not appropriate for Wikipedia? I’m no English native speaker, but I really do think it is a bit too vulgar. wigs online

    hair extensions “Yeah. The only statement I want to make is that I
    am an innocent man convicted of a crime I did not commit.
    I have been persecuted for 12 years for something I did
    not do. Shimmer and Shine Birthday Cake Decorations and IdeasThe cake plays
    an important role in any birthday party it’s integral in that special moment when the lights go down and the cake is brought out with candles lit.
    Everyone sings Happy Birthday, the birthday girl (or boy) blows out the candles, makes a
    wish, and cameras snap away for the next few minutes. These images will be the main thing most people
    remember from a party so it’s crucial to get it right!.
    hair extensions

    U Tip Extensions And that just the modern medicine has made childbirth so safe that it sometimes seems like there is no risk.
    Don be fooled. Without modern medicine, you are right back where we were
    a few hundred years ago and for thousands of years before that.
    Supporting our Hometown: Wigs 4 Kids is excited to announce we will be participating
    in the St. Clair Shores Farmers Market on Sunday, July 24th from 8 AM 1 PM.
    This is a family friendly event where guests can enjoy farm fresh foods straight from local vendors, and information about community organizations that promote
    wellness and healthy lifestyles. U Tip Extensions

    tape in extensions Making the assumption that it all goes well, then this coin will have a run just like XRB is having now and the sky would be the limit assuming there isn a huge crash.
    It would be technology like we never seen before, XRB is like bitcoin 2.0 at the moment, XBY
    potentially will be ETH 2.0. Investor are put off at the minute though because as I said it a bit
    risky at the moment. tape in extensions

    costume wigs Just in case we ever come across this issue again,
    I discuss it with the Boss Man, see if he thinks
    it a viable option. I don have any experience with those
    units personally, but from what I read/heard, they not great.

    Running old, massively outdated versions of Android, with no
    real upgrade path set out. costume wigs

    wigs for women There may be reasons that J. Lo knows bottle feeding is best
    for her babies. Perhaps she is on some medication? I personally am agast
    at how many people breastfeed while pumping themselves with all kinds of medications.

    You can go on to experience impeccable results after undergoing such a surgery
    of what the condition of your hair is. The answer is a resounding no!

    Do be informed that there are not one but several factors determining the success of the treatment.
    First of all do know for a fact that at an advanced stage, the surgeon might as well ask you to consider alternatives instead of undergoing this surgery at all!
    You might as well be advised wig or else you might as well have to settle for patchy results..
    wigs for women

    wigs online Red coats were first worn by British sea going regiments
    when adopted by The Prince of Denmark’s Regiment in 1686.[38] Thereafter red coatees became the normal parade and battle dress for marine infantry, although the staining effects of salt spray meant that white fatigue jackets and subsequently blue undress tunics were
    often substituted for shipboard duties. The Royal Marine Artillery wore dark blue
    from their creation in 1804. The scarlet full dress tunics of the Royal Marine Light Infantry were abolished in 1923 when the
    two branches of the Corps were amalgamated and dark blue
    became the universal uniform colour for both ceremonial and ordinary occasions.[39].
    wigs online

    tape in extensions I run a machine shop that does on a good year just under 8 with 36 employees.
    You don just go from one million a year to 300. I could not reiterate enough
    how crazy of a jump that is, let alone Zinke son worked for
    the goddamn company over the summer tape in extensions.

  16. My wife and i felt now fulfilled that John managed to deal with his web research with the ideas he made from your own blog. It is now and again perplexing just to possibly be freely giving techniques that many other people might have been selling. And we all know we have got the writer to give thanks to because of that. The main explanations you have made, the simple blog navigation, the friendships your site make it possible to create – it’s many remarkable, and it’s leading our son and our family do think the subject matter is cool, which is especially important. Thanks for all the pieces!

Leave a Reply