Example for Flex Component Kit for Flash CS3

If you saw the amount of work you have to do in my past article, you’ll appreciate how much work you DON’T have to do using the new Flex Component Kit for Flash CS3 (now on labs with 50% more beta!). I’ve modified my example from that article using the new kit to show you how much easier it is to both create Flash assets for Flex, but also to use them IN Flex 2. Deadline at work, so too little time to do another Captivate; hopefully images’ll do.

First, let’s take a look at the FLA in CS3 on my MacBook. Notice, nothing on the root timeline / stage.

Going into the BackgroundPanel symbol in the library, notice no code on frames. You can see the bottom layer is where I put my bounding box. This is a convention used since Flash 5 (before my time, hehe) which gives the MovieClip a “default width and height”. Now, for Flash components, this was typically used for the size methods written in ActionScript. In Flex, it does a whole lot more. Flex has a layout engine that measures MovieClip’s, and that way “knows” when to show scrollbars. By default UIMovieClip measures every frame so if your Flash animation increases in size, so too will your content in Flex. When you are playing inside of containers inside of Flex, this is VERY important. Here, though, I actually WANT to remain square. Therefore, I make a 800 x 600 MovieClip with an instance name of “boundingBox”.

Now, the contract you have to abide by as a Flash Designer when creating assets for Flex is 2 things: states and transitions. You create different “states” that your component / animation exists in. In my panel’s case, these are: hidden, intro, main, and spin. Flash Developers typically would use either the timeline or different redraw methods. A Flex Developer uses the state tags. These 2 will now be combined. The Flash component will “represent” the state tags in Flex via frame labels on the MovieClip symbol’s timeline. This way, a Flex Developer can use the familiar syntax on your component:

panel.currentState = “spin”;

The second is transitions. Transitions are the changes that happen form one state to the next. For example, in my Login Form example, I show how you can change from one state to the other and give visual feedback to the user you’ve changed state. You represent transitions in Flash via specifically named frame labels.

For good or ill, transitions are (at least with the version I have) all or nothing. Most Flash Designers who are timeline junkies will read that and laugh. That’s the attitude. I’ve found the component acts weird if you only define transitions for some states, and not others. Best to do at least the default transition to each state.

One quirky thing is that the UIMovieClip will go to your state frame label when it’s done playing the transition, if any. I didn’t really like this. The compromise Adobe came up with is to put your state frame label on the same frame as your ending transition frame label. Now, most of us Flash Purists think putting 2 frame labels on the same frame is blasphemy… madness!

…however, it actually works out well here (thanks Glenn Ruehle!). It makes it easier for as an animator to have my ending transition “end” on the state. However, for more complex animations, like the one Grant Skinner showed at 360Flex, it actually behooves you to animate unique transitions for each state change.

For example, if I were animating a human character, he could have 3 states: stand, run, and sit. If I were to set the current state from sit to run, I wouldn’t want him to immediately start running; I’d have to animate him to stand first. For non-animators, this can seem like a lot of work. For those of us in the know, it’s necessary for a good looking component.

So, again, you may find another frame label timeline convention you dig; no worries.

The syntax for states are “my state”; basically whatever you want. The syntax for transitions is a little more complex. It follows the way transitions in Flex work. They have a “fromState” property and a “toState” property. Transitions are always bound to a state change. You can choose a state name as a string OR a *. A * means “any state”. So, if you write fromState=”*” toState=”spin”, that means anytime the state changes to spin, play this transition.

Frame labels in Flash use a “from-to:state” syntax. Dissecting this, the from is your from state, and can be the name of the state, OR *. Same goes for the to; the to state name or a *. The state is the name of the state, and must be a state name. Always put a start and end set of transition frame labels. If you misspell the frame label, currently there is no JSFL to help you out, and the Flex Dev will most likely get an error dialogue that isn’t easily debug-able. He’ll probably blame you so just make sure for every “start” you see an “end”. Keep in mind too that for some transitions, it’ll use the end frame to play them backwards depending on what state you are changing too, so animate accordingly.

You’ll notice for my simple example, I’ve been slack and just put the state frame labels at the end of the transition animations.

For example, if the Flex Developer were to use this component, and set the currentState = “intro”, then it would do a gotoAndPlay for the “*-intro:start” frame.

Same goes for the spin, regardless of what state you were on previously:

Notice that the main state doesn’t really have any transition; it’s just the main state where you mainly are, and thus it is plain Jane, reflective a main type of state. Word. Yes, it does have an event sound, though.

Now, when creating this component, you do what you typically do in Flash. Create a new MovieClip symbol, name it, and hit ok. You’ll notice the Linkage dialogue in Flash CS3 has a new field: All Your Base Class are Belong to Adobe. When you create a MovieClip in Flash CS3, it’ll default to flash.display.MovieClip. Good, leave it be, let it create your symbol.

Later, you can run the Flex Kit JSFL command, and it’ll put the needed SWC in the Library, and then convert your symbol for you to have the correct base class (mx.flash.UIMovieClip); all you have to do is select it in the Library. It’ll tweak your FLA settings (in a good way) too.

Poof; it’s exported as an SWC where your SWF usually is. Done!

Few more quirks. Flex states are based around the Flash Player 9 DisplayList model. DisplayObjectContainers are basically MovieClip like things. Except, instead of createEmptyMovie, attachMovie, duplicateMovieClip, unloadMovie, and removeMovieClip, we have a brand new API. This API allows us to create MovieClips, but NOT have them draw. In the past, we’d stop it’s animations, turn it invisible, move it off stage, and pray. This didn’t work so well with a ton of MovieClips. Now, we can just go:

var a:MovieClip = new MovieClip();

And call methods on it, but not actually have it automatically have to be drawn in some depth. Now, we go:


And THEN it’ll draw. Cool, right? You can even re-parent it, and remove it without killing all the code on it. Dope.

Problem? Flex states are built atop this. When you go to a state, things are removed from the DisplayList and others are added. What happens to those that are removed? Flash Player does what it was built to do; it removes them from memory as needed.

Great for application developers, suck for designers. From the day I got into this industry, I’ve made it my mission to ensure my stuff plays hot, and if it means taking all of your CPU and RAM to do so, so be it; it’s there for the taking Blackbeard style.

The hack I showed at 360Flex has been modified slightly. Basically, I’d put all of the frames on a MovieClip, since those have to be preloaded before drawn, and then put it before the animation. Now, I’ve found better results doing the same thing, but having it last he entire tween. Notice the spin and intro preloader layers in the above pictures below the animations. You can see what’s inside of those MovieClips here. Technically, you should just put them all on one frame, but I ran out of time. I then just made them alpha 0. If you move the off-stage, the measuring code will think your Flash component got really really big, and then you’ll see scrollbars in Flex, and go wtf?

So, what do you do with your SWC? You give to the Flex Dev, and smoke ’em if ya got ’em. The Flex Dev then, if he’s a purist, he’ll throws it in a lib directory. For this example, I just throw it in the root project. You then link it to your Flex Project via adding it to the Flex Build path as a Library via Project > Properties, and then Flex Build Path, Library Path tab, and then Add SWC button.

You’ll notice a sample implementation here with Buttons setting the current state of the panel. Notice the lack of strong-typing; I’m such a rebel (-es=true -as3=false -strict=false 4 uber h@X!!!).

Now, I think I broke something, but the convention is “boundingBox”… or it’s ilk. You name your MovieClip that, and that’ll define your component’s rect. In MXML (or AS if you were so inclined) you can set the bounding box instance name to use. I don’t recommend this, but hey, freedom’s rad, choose what you want.

This’ll compile to something like this. If you’d like to play, click the image. WARNING: Has sound – she’s loud.

To give you a visual example of what this would look like in Flex (uber simplified btw), here’s the states defined in MXML instead.

And the corresponding (optional) transitions that match those states.

Some dig MXML, some dig Timelines, I dig both.

Few final tips. Every time you recompile a new SWC (Test Movie / Publish, whateva’), don’t forget to Refresh the Flex Project, or you’ll get the cached version. I usually use an Ant script to just copy the new .SWC from the assets directory (or however you setup your Flex projects). Also, not sure if it’s fixed, but if you’re Flex Dev starts getting code hints for “frame31():Object”, don’t be alarmed. If you put code on the timeline, I’m the only guy I know that fires people for that (except stops of course… I’m not THAT mean). These methods are merely created from code you have on that specific frame (thanks Robert Penner!).

One thing to notice in some of the above images of Flash’s timeline is the Flex friendly layer vs. the Flash friendly. You un-guide the Flex friendly one for development and testing. That way, Flex Builder doesn’t chug loading all of those uncompressed PNG’s into memory, thus making Flex Builder compiling really slow. When ready, you just un-guide the Flash friendly one, and re-guide the Flex friendly one, and finally recompile. Naturally, most people are using video nowadays or hand animated bitmaps & vectors which are immensely less RAM intensive. Then again, good to know.

Also, this whole example didn’t use any ActionScript. There is no reason I couldn’t make an ActionScript 3 class for my component. If you don’t write a class, Flash CS3 will make one for you. So, I didn’t have to make a “BackgroundPanel2.as” file. If I wanted to, I could of written an AS3 class to maybe play some other scripted animations, or play sounds… video, whatever.

Finally, don’t forget to remind the Flex Dev to up his framerate via the Application tag (or compiler… either or)!

18 Replies to “Example for Flex Component Kit for Flash CS3”

  1. another great post … thanks again for the useful tidbits. i think i went all googly-eyed when i read this part… heh.

    ‘…the from is your from state, and can be the name of the state, OR *. Same goes for the to; the to state name or a *. The state is the name of the state, and must be a state name. ‘

    word. :)

  2. I was wondering about the best policy for making button components for Flex using CS3. I know there are multiple options but sticking with the Flex Component kit, it’s convenient to create custom buttons using states on UIMovieClip just as for other types of components. This has the advantage of creating cool transitions ont he buttons between the states. However, it is a pain for the Flex developer to wire up all the event listeners for rollover, click, etc. So do you think it is a good idea to create a custom base class which wires the events up for the Flex developer and can be shared across all buttons. As long as the designer uses the same state names then buttons can be used right from the swc by the Flex developer. I tested the below on a button and it worked.

    package com.eui.cs3.components {

    import mx.flash.UIMovieClip;

    import flash.events.Event;

    public class MCButton extends UIMovieClip
    public function MCButton() {
    addEventListener(‘mouseDown’, handleDown);
    addEventListener(‘mouseOver’, handleOver);
    addEventListener(‘mouseUp’, handleUp);
    addEventListener(‘mouseClick’, handleHit);

    protected function handleDown(event:Event):void {

    protected function handleOver(event:Event):void {

    protected function handleUp(event:Event):void {
    protected function handleClick(event:Event):void {



  3. While you can use UIMovieClip controls as skins, I agree, it doesn’t work wtih the animations, so it’s better for the Flash Designer to code it himself to ensure it looks right. The downside is, this asks a lot of a Flash Designer to code their buttons, but… it’s either him, or the Flex Dev, and I’d have more faith in the Flash Designer getting it right, so…

  4. Hi Jesse, thanks for this tutorial.

    Controlling of animation states are really helpful in terms of visual impact of a project,
    I was wondering how can i get my SWC to pass out data to the main mxml in which it sits in? Like passing a string var?

    Are there any examples for this?

    Im just starting out on flex2 trying to learn =]


  5. When you export, Flash will create an AS3 class for you. You do, however, have the option of writing it youself. It’s just an AS3 class that is treated like any other component. So…

    public var cow:String = "cheese";

    And then in Flex:

    <local:MyComp id="sup" />

    <mx:Label text="{sup.cow}" />

  6. Hey Jesse,

    I am wondering if you have any insight on why the code completion in flex for the added CS3 swc works at first then stops working completely. I can still build from flex and see the component show up correctly, I just dont get any code completion for either the namespace its added under nor attributes on the CS3 component tag.

    I’ve tried removing the swc and putting it back, quitting flex and starting it again. Clean build, refresh. Any ideas? I’m on a mac.


  7. Jesse – you’re the man. Thanks for taking the time to write this up – it provides a great insight.

    Question – have you found the performance of flash running slower when it is in a flex movie as opposed to running it outside of flex?

    Thanks. Keep up the great work.

  8. Yes. Obviously the first reason is because Flex is set to like 24 fps by default (I think) whereas the Flash we usually create is 31. When it’s brought into Flex, it runs slower … because it was told to do so.

    Even when you match Flex’ framerate though, yeah, a tad. This is uber subjective so I wouldn’t take my agreement as a scientific ackknowledgement. Either way, it could just be the ‘_level0 is framerate god’. Since you are loading a SWF INTO another SWF that is _level0… then, well… ‘no high-framerate 4 j00!’.

  9. Hi,

    very nice article. Thank you for it.

    Is it possible to bind the value of a text field in the SWC to a bindable property in my application model?

    I guess it requires some manual work but it would be nice to know it there is some clever way of doing it.


  10. Hi Jesse,

    THanks for this article. I’ve been looking into how to load Flash CS3 – flex kit components into a flex app dynamically – ie not compiling them into the swf. I’ve tried RSLs with no joy. Have you any suggestions.


  11. Hi,

    I have a dynamic text field in a movie clip, that I export an an SWC. I can load the SWC in Flex without any problems. But, how do I change the value of the text in the dynamic text field in Flex?


  12. All of this is well and fine for simplistic examples like the one in the article and the ones in the comments. Try using a more complex Flash movie in Flex like a dynamic wrapping panning world map with parts of symbols outside the viewable area, welcome to a hellish nightmare! I had to manually hide parts of the flash movie that are outside the Flex container and add tons of code to handle resizing the Flex container… anyone had this problem before? Also, I had to instantiate and initialise my Flash symbols from Flex, I got null errors if I didn’t (the script in the flash movie couldn’t find the symbol instances, including stage). I can’t even use creationComplete, I have to delay it later, else e.g. stage won’t be available to my Flash script.

    Any comments/suggestions?

  13. I noticed that your example above has sound clips in the Flash symbol that you export to Flex. I am doing something a simpler that contains sound clips as well. I have been unable to get the sound clips to work in the Flex application. Everything else works great (states, transitions, etc), I just can’t get any sound. Is there some kind of trick to getting sound to work when using the Flex Component Kit? Would you share your source?


  14. Hi i want to when we ma ke linkage in flash….in default flash.display.MovieClip i can this this classs… but in this example..flash.display.UIMovieClip

    is there any difference between both the class

  15. hey jesse,

    i’ve compiled an swc from flash and imported in flex, its working fine , but when i apply scale 9 grid transformation to that component, it not occuring.do u have any inputs / ideas..?

Comments are closed.