Example of the Flex Component Kit for Flash CS3

,,,

I’ve now had a chance to use the Flex Component Kit for Flash CS3. It worked as advertised for me. Check out Glenn’s presentation on the Adobe Labs page. If you are interested in this example, you will need to follow the instructions given on that page to upgrade Flex 2 and get the Kit for Flash CS3. Both are pretty easy to install.

I’m going to use the ball-and-star Flash SWF from the previous examples. This really shows how far things have come. When you compare this to the first article using ActionScript 2 SWFs with Flex 2, you’ll see what I mean.

Download this example

Here’s how I went about the process of using the Kit. I started with the same FLA I used in the last article.

Create a New Flash CS3 Document

It’s important to create a new Flash CS3 document. If you want to use symbols from another Flash 8 (or earlier) document, copy them to the new document’s Library. That’s what I did with the example and called it star_and_ball.fla. I copied over the Star and Planet symbols.

You can only use symbols with the Flex Component Kit. Since my previous example had all of the tweens and ActionScript code on the root timeline, I needed to create a new symbol for them in the new document. I created a new, plain, MovieClip symbol which I called StarAndBall (yes, it should have been StarAndPlanet). I placed the Star and Planet symbols into the new StarAndBall symbol in separate layers and copied the guide layer as well and the tween.

Note: Symbols should have (0,0) as their registration point. I made sure that my Star and Planet symbols were positioned so that as the Planet orbits the Star it all stays within these boundries. However, you can also add a special boundingBox to your symbol and Flex will use that for your component’s size. You can read about that in the documentation.

Creating the Flex Component

Once the symbol was working I selected it in the Library. Then I picked the new command, "Make Flex Component" from the Commands menu. Several things happened:

  1. Since my movie wasn’t set to 24fps, I was asked if I wanted to change it to 24fps. I responded Yes (see documentation for explanation).
  2. Then the output window showed that UIMovieClip was added to my Library and that my symbol, StarAndBall, was ready for export.

That’s really all there was to it. If you looked at the symbol’s properties before doing this you would have seen that it didn’t have a linkage name. Now, you’ll see that it has an ActionScript class (more on that later), that its base class is UIMovieClip, and that it is being exported.

Publish

You must publish your movie. This not only creates the SWF, but it also creates a SWC. Since my file is named star_and_ball.fla, publishing created star_and_ball.swf and star_and_ball.swc. When using the Flex Kit, ignore the SWF. Maybe a future version will even let you avoid creating the SWF, but for now just ignore it.

Using the Flash Component in Flex

Being able to pick any MovieClip symbol in your Flash libary and selecting a command to turn it into a Flex component was easy. Now the fun part. I created a new Flex project and opened its Project Properties dialog. I then went to the Build Path and selected the Library tab. Then I picked "Add SWC" and browsed to the star_and_ball.swc and brought it in.

Flex now believes that star_and_ball.swc contains a true Flex component named StarAndBall. To use I started typing:

<Star

Flex Builder’s code assistant brought up the StarAndBall class, so I selected it and <local:StarAndBall was inserted. I closed the tag and ran my application. The Flex application ran and the planet was orbiting the star.

At this point you probably think this may be no better than just using SWFLoader. That would be less steps, but did you see how Flex Builder found the Flash symbol as a class? That’s due to UIMovieClip in the SWC, making the symbol a true Flex component.

Going For Objects

In the past examples you could control the Flash SWF (stopping the ball from orbiting, scaling and rotating the star). In the first example it was all controlled by LocalConnection. In the second example (just a few days ago, really), you can directly invoke functions on the root timelime.

Using the Flex Kit also allows you to invoke methods, not on the root timeline, but on the symbol itself, just like any Flex component.

Going backt to the Flash CS3 document, star_and_ball.fla, I opend the properties for the StarAndBall symbol. You can see that there is a class named: StarAndBall. If I click on the pencil (edit) button, I’m told that the class does not exist but one will be generated for me in the SWC. Very nice. But you can make your own, too.

I created a class, StarAndBall.as and used the root timeline functions as class methods:

package {
     
import flash.display.MovieClip;
     
import mx.flash.UIMovieClip;

     
public class StarAndBall extends UIMovieClip
     
{
          
public function StarAndBall():void
          
{
          
}

         
public function rotateStar( angle:Number ) : void {
              
star_mc.rotation = angle;
          
}

          
public function zoomStar( factor:Number ) : void {
               
star_mc.scaleX = factor;
               
star_mc.scaleY = factor;
          
}

          
public function stopPlanet() : void
          
{
               
stop();
          
}

          
public function resumePlanet() : void
          
{
               
play();
          
}
     
}
}

Hmm, very similar to Flex component code. Of course, this is ActionScript 3, so you have packages and public functions and import statements. Now when the FLA is published, my class gets put into the SWC.

Back to Flex

In the Flex application I gave the component a name: <local:StarAndBall id="star" />. I added a button to pause the orbit of the ball/planet and made the click event handler invoke the stopPlanet() method of the StarAndBall class:

star.stopPlanet();

Flex Builder was happy to code-assist me with this one, too. When I typed the period, Flex Builder showed me all of the possible properties and methods, stopPlaying() being one of them!

Now that interacting with the Flash symbol as a bonafide Flex component works, I added the Pause/Play button and Slider controls for rotation and scaling. The event handlers for those controls directly invoke the methods on the Flash component. For example, the rotation HSlider does this:

star.rotateStar(event.target.value)

I hope this gives you some idea of the possibilies with Flash CS3 and Flex. Read the information on the Flex Connectivity Kit for Flash CS3 page; there are more things you can do with this tighter integration between Flex and Flash.


30 Responses to Example of the Flex Component Kit for Flash CS3

  1. Tom Ortega says:

    Nice write up! I’m just thrilled with this new component kit. The only thing I’d add to your post is the “Publish”. Rather than publishing and getting the useless SWF, you can just right click on the Symbol in the Library panel and choose “Export SWC File…”. No more useless SWF file. =)

  2. Peter Ent says:

    I forgot that short-cut; thanks for mentioning it.

  3. t owens says:

    Hi! this is great, i’m thrilled to see an example where there is a written class vs the generated class from flash. I’m having one problem. There is a clip in the library, I wrote a super simple class

    package
    {
    import flash.display.MovieClip;
    import mx.flash.UIMovieClip;

    public class testClip extends UIMovieClip
    {
    public function testClip(){
    trace(“testClip”);
    }
    }
    }

    it traces out in the flex console but it never is shown on the screen. any ideas?

  4. Peter Ent says:

    I take it that you have symbol in your FLA which has its ActionScript class set to “testClip”. In your Flex code you should have someplace in a Container (say the Application).

    You should also have updated the Flex 2 SDK (and/or Flex Builder 2) with the SWCs found on the Adobe Labs page mentioned above.

  5. t owens says:

    “I take it that you have symbol in your FLA which has its ActionScript class set to “testClip”. In your Flex code you should have someplace in a Container (say the Application).” yes very much so. I’ve gone so far as to uninstall eclipse, flex builder 2, the plugin and reinstall flex builder and drop the .jars back into the correct directories. Flash complains that I should return the base class to flash.display.MovieClip and it no longer shows up in Flex?

  6. t owens says:

    ok i got it, my apologies for harassing you. Thanks!

  7. Peter Ent says:

    When you supply your own ActionScript class for the one generated by the Flex Component maker in Flash CS3, you must change the base class to flash.display.MovieClip.

    I didn’t find that very clear at first. The error you get says that your class already extends the base class (UIMovieClip) and so you need to change the base class on the Properties dialog from UIMovieClip to simply MovieClip.
    ——————–
    Peter: I had the same problem and asked one of the developers of the Flex Component kit. He concurred and they will try to make this clearer in the future.

  8. Have you guys had any luck with the currentStateChange and the Flex/Flash integration kit? It seems to fire immediately instead of when the transition to the :end frame is done playing.

  9. I made a slight change to help with the currentStateChange issue I mention above: You can get it here if you like: http://squarefactor.com/words/2007/jun/04/uimovieclip-fix-flexflash/

    This is a temporary fix until the final release is out, which will likely work as expected.

  10. Patrick says:

    Just don’t try to apply any flex effects on these components you import. Will adobe be updating the api to allow this in the future?

    P
    ———————-
    Peter: That’s a good question. I don’t know. I imagine that it will be possible given that Flex 3 is more sync’d up with Flash CS3.

  11. Ged McBreen says:

    Hi Peter,
    What would be best practice for dynamically loading flash cs3 components made with the kit?

    I’ve been trying to do this using RSL’s without success yet. Ideally I’d like to leave the flash content out of the compiled app swf.

    Thanks,
    Ged
    —————
    Try putting all of the SWC symbols into a SWF and then use SWFLoader or create a Module with the symbols.

  12. DanielMcQ says:

    Hello Peter,

    Thanks for helpful post.

    Any suggestions for techniques to initialize various components *within* the UIMovieClip?

    I have a bunch of buttons that I want to attach event handlers to. I want to do this within my class that extends UIMovieClip (for later export into Flex), in some sort of initialize() function.

    However, I’m not sure of how to run an initialization function once the children are all populated. I imagine it has something to do with the parent class’s creationComplete event, but how would I use this in my extension of UIMovieClip class?

    Thanks for any thoughts.

    DMcQ
    ———————
    This is the weird part for Flash developers coming into ActionScript 3 and using it to write Flex components. The “Make Flex Component” function in Flash CS3 makes the Flash symbol extend a class which makes it all fit into the Flex framework.

    This means you can override createChildren(), commitProperties(), and updateDisplayList(). You can use those functions to initialize or change your class’s internal members.

  13. Farzad says:

    Peter, excellent article and great news, i used to avoid interaction between flash 8 and flex 2 , it just seemed like too much trouble.
    Now its just asking me to use it, amazing.

  14. Farzad says:

    Thanks for uploading your example peter,
    Quick question, i have a method in my Flash as class
    function showThink(county:MovieClip):void

    in flex click=”FlashClipID.showThink(SymbolX);”

    gives me this error?
    “1067: Implicit coercion of a value of type Class to an unrelated type flash.display:MovieClip”
    ——————
    Peter: try doing FlashClipID.showThink(SymbolX as MovieClip) – but if SymbolX is a Class and not an instance this won’t work.

  15. Farzad says:

    Thanks peter, tried that while ago, null object reference error.
    Flex see’s SymbolX as a class, tryed declaring it in flex as a movie clip, but obviously it got seen as null..

  16. virgo_ct says:

    Having huge problems integrating a complex map Flash component. I am forced to initialise the application from a Flex button (not even creationComplete on the map works). Once initialised, things are huge and all over the place. I wish there was an example of how one should script the .fla file. I.e. should one put the script logic for the movie inside the UIMovieClip class and only have simple functions in frame scripts?
    ——————–
    Please check the Flash CS3 Forums.

  17. cksachdev says:

    Nice article on integrating Flex and Flash CS 3. Is it possible to use Flex Components in ActionScript 3 as well. I mean instead of using the local tag, is it possible to import component in AS3 ?
    Any links … 🙂
    ————
    Peter: The reverse is not yet possible, but we are working on it.

  18. Daniel says:

    In response to Ged and dynamically loading the flash CS3 component: I am also having a lot of trouble with this. I want to use the SWF and not the SWC (why do you say its useless?)

    I’ve loaded my SWF via the loader class. A call to flash.utils.describeType indicates that my loaded class extends UIMovieClip, however when I try to cast it as a UIMovieclip I get a type coercion error. Any ideas?

    Hi Peter,
    What would be best practice for dynamically loading flash cs3 components made with the kit?

    I’ve been trying to do this using RSL’s without success yet. Ideally I’d like to leave the flash content out of the compiled app swf.

    Thanks,
    Ged
    —————
    Try putting all of the SWC symbols into a SWF and then use SWFLoader or create a Module with the symbols.

  19. CP says:

    Thanks for the article and your responses to all the questions. For those that want further reading, there is some detailed documentation here:

    http://blogs.adobe.com/flexdoc/pdf/swf9.pdf

    One thing it does not address, and which I have been banging may head against, is how to link a packaged as3 class with the Flash symbol.

    i.e. (for use with the WhereAmI symbol)

    package my.example {
    import mx.flash.UIMovieClip;
    public class WhereAmI extends UIMovieClip {

    …etc

    If I put the WhereAmI.as file in the same folder as the .fla file, I get an error that says the file’s package does not match its current location. However, if I move the file to the correct location in a subdirectory my/example/WhereAmI.as, then the “Convert Symbol to Flex Component” action does not associate my WhereAmI symbol with the my.example.WhereAmI class. I have tried a number of approaches to try and get the compiler to link to the .as file, but I have failed. Anyone have a suggestion or two?

  20. Aleksey says:

    Thanks for the example.
    When I recompile the SWC in Flash, the Flex Builder compiler uses the old SWC – the changes do not show up.
    I have to remove the SWC from Project Properties – Build Path – Library tab and add it again, which causes the compiler to use the new SWC. Is there a way to avoid this step? Thanks!

  21. Peter Lorent says:

    With the plugin version for Eclipse, simply refresh the project by hiiting F5.

  22. Hello Peter, one thing is asked at flexoders, but could be answered was, what happens to the metadata tags (http://tech.groups.yahoo.com/group/flexcoders/message/125663).

    I’d love/have to use them and i can define for the ActionScript classes, but will they be compiled into the *.swc as well?

    Best regards from Germany, Florian

  23. Peter Ent says:

    This is a good question but I do not know the answer to it. I will do some research and post a comment if I turn up anything.

  24. Jeff says:

    Nice write up. I’m trying to get up to speed in Flex, coming from a flash background, but I can’t seem to get the component to scale properly (actually I have not been successful at all while trying to use scaleX and scaleY.

    I’m sure it’s something simple that I don’t yet know about Flex, but how is this accomplished ?

    Thanks for the example, though it works exactly as advertised.

  25. Peter Lorent says:

    The [Event(name=””, type=””)] metadata tag in a class that is connected to the Flash Symbol gives the expected codehinting in Flex. I haven’t tested other metadata tags yet.

  26. The [Bindable] metadata tag will be compiled into the resulting swf. But i guess that the Flash compiler will not preprocess the accessors as MXMLC does. So i would rather use a custom event.

  27. Amy says:

    UIMovieClip actually doesn’t seem to support commitProperties(), so you can’t override it. You can maybe write it from scratch if that’s your bag…

  28. Another one from me – think of the following situation. I have a baseclass, which contains basics like accessors or eventlisteners and inherits from UIMovieClip. A symbol in a fla will be converted to a component first, Then i set my baseclass as the superclass of my symbol.

    I set two frames, both get labeled and testing the component using the currentState property shows me: works fine.

    Now i add two textfield instances, one per frame. I should be able to access the textfield instance also in the superclass using the []-array operator. The strange thing is: i just get access to the textfield in the first frame (respectively state), but not to the textfield in the second state.

    Why?

  29. Peter Ent says:

    This is a pretty complex question to answer here. I think your best bet is to compose a specific example and post your question to the Adobe Flash forum.