« Using Flash CS3 with Flex 2 | Main | Flex, Apollo, and Flash CS3 »
April 27, 2007
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.
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:
- 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).
- 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.
Posted by pent at April 27, 2007 02:19 PM
Comments
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. =)
Posted by: Tom Ortega at May 1, 2007 01:50 PM
I forgot that short-cut; thanks for mentioning it.
Posted by: Peter Ent at May 1, 2007 01:53 PM
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?
Posted by: t owens at May 21, 2007 01:06 PM
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.
Posted by: Peter Ent at May 21, 2007 01:13 PM
"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?
Posted by: t owens at May 21, 2007 08:39 PM
ok i got it, my apologies for harassing you. Thanks!
Posted by: t owens at May 21, 2007 08:50 PM
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.
Posted by: Peter Ent at May 22, 2007 08:15 AM
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.
Posted by: Shawn Makinson at June 4, 2007 11:17 AM
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.
Posted by: Shawn Makinson at June 4, 2007 05:19 PM
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.
Posted by: Patrick at June 13, 2007 01:51 PM
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.
Posted by: Ged McBreen at June 25, 2007 10:43 AM
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.
Posted by: DanielMcQ at July 7, 2007 07:01 PM
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.
Posted by: Farzad at July 16, 2007 03:48 PM
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.
Posted by: Farzad at July 22, 2007 05:16 PM
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..
Posted by: Farzad at July 22, 2007 07:13 PM
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.
Posted by: virgo_ct at November 29, 2007 07:42 AM
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.
Posted by: cksachdev at January 14, 2008 05:46 AM
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.
Posted by: Daniel at May 4, 2008 05:32 PM
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?
Posted by: CP at June 27, 2008 12:19 PM
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!
Posted by: Aleksey at July 30, 2008 05:19 PM
With the plugin version for Eclipse, simply refresh the project by hiiting F5.
Posted by: Peter Lorent at August 1, 2008 09:28 AM
Daniel: see this article:
http://www.adobe.com/devnet/flash/articles/flex_component_workflow_04.html
Posted by: Peter Lorent at August 1, 2008 10:47 AM
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
Posted by: Florian Salihovic at September 21, 2008 03:47 AM
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.
Posted by: Peter Ent at September 23, 2008 10:33 AM