Video tutorial: Make Flex components with Flash CS4
The Flex component kit for Flash is seriously underestimated and I’ve always been a strong supporter for it. In this video, you’ll learn how easy it is to make your own custom Flex component with Flash CS4.
I was actually kidding in the video, but I already got a few emails asking me for the source of this beautiful TheaterDisplay movieclip… so here it is ;-)
24 Comments
Trackbacks/Pingbacks
- Creating Flex Components - the easy way (for Flash IDE converts) | Psyked - [...] came across this post by Serge Jespers; a brilliant video for getting started. However, I wanted my components to ...
- Make Flex components with Flash CS4 | theflexmagazine.com - [...] it here. Share and [...]
- [Flex] ??? flash cs4 ?export flex ???library « Lab of Chowky - [...] Source: http://www.webkitchen.be/2008/12/12/video-tutorial-make-flex-components-with-flash-cs4/ [...]
Feel free to follow me on: 
Excellent, I could not create communication between these two programs.
Now I can:)
Good example and beautiful movieclip !
thanks Serge. I’ll definately get some use out of this.
Hi Serge,
i think the title and description for this video are wrong on adobe tv.
You’re right… They are and I already reported this to the Adobe TV team. Thanks.
Inspiring me to learn more Flex… I am a Flash Dev and i don’t see any need to migrate to Flex but I would like to research more and see how Flex can expand my knowledge of online media. Thanks for the insight.
Hi Serge,
Thanks for the tutorial – it’s really good! However, I’m getting the following error in the Flash IDE when you look at the properties of the MovieClip and click ok:
The base class will not be used because the class specified extends its own subclass. If you wish to use the base class, please specify a class name in the Class field that will be auto-generated or enter the default base class ‘flash.display.MovieClip’ in the Base Class field.
I’ve tried exporting this anyway and used it a Flex Project, it lets me use it in ActionScript code but not as an MXML tag, like in your example. I’ve got the Flex Component kit for Flex installed, and have tried creating my own component and tried using the example in your zip.
Any help would be much appreciated,
Thank you,
Mark
The title of this posting mentions Flash CS4, but in the video the application is Flash 9 and the link for the Flex Skin Design Extensions & Flex Component Kit install is for Flash 9. In addition, the extension packages for are cryptically named and confusion (there are apparently two downloads necessary, one of which is the Flash Skin Design Extension for Flash which downloads with a filename of Flex_Skins_12_05.mxp, has no version attribute, and installs with a name of Flex Skinning Templates in Adobe Extension Manager).
What is the proper install procedure for Flash 10? My Flash 10 install will not display the new commands demonstrated in the video after installing each extension.
Disregard my question above: I did manage to get this working in Flash 10.
The confusion over the version names still exists though. Adobe should make it clear whether the extensions with CS3 references apply to Flash 10 or not.
Hi Serge or Stephen
as per your post previously, I am having a few issues with this:
1. I have Flash CS4
2. I have installed the Flex Skin Design extension for Flash filename Flex_Skins_12_05.mxp
Now although I can through the extension manager that it has installed successfully, and is enabled, I can access the Flex Skin templates in Flash CS4, however, from the commands dropdown, I can’t see the; convert symbol to flex component, and convert symbol to flex container options from the commands options. How do I get to these?
You did say:
“Disregard my question above: I did manage to get this working in Flash 10.”
how did you do this?
thanks in advance,
Andrew
Hey Andrew,
You actually need to install the “Flex Component Kit for Flash CS3 Professional”. It’s the last MXP on the page linked in the article. I know it’s kind of confusion that it’s seemingly only for CS3 but it works just fine in CS4.
Hope this helps,
Serge
Thanks Serge, all sorted.
Super-informative site! I am loving it!! Will come back again – taking you feeds also, Thanks.
Hello
Thank you for instruction.
But as I looked, I can only convert symbols to Flex Component. And what if I have the whole document Class?
How can I convert it to Flex Component?
Hi Serge
I tried several times to install the component Kit in Flash CS4 on Mac OSX but it doesn’t work. The command did not appear in my “Commands” menu. Also i can’t find the jsfl file or the base component anywhere. Is there a way to install the kit manually?
Thanks and regards
Christoph
If someone has problems with installing the kit, just start the extension manager directly out of flash and install the extension. Not by double clicking the .mxp file. This was the solution for my problems.
Very nice, I really hope the release of Flash Builder 4 will have a nice UI to manage it.. Also why its not integrated in flash CS4 already?!?
Hey Serge,
This article is awesome … Believe me this example will take so many of us ahead who are looking at flex and flash .
Regards,
Naveen
Hi Serge, how do you gain control over the lifecycle of the flex component? For example, let’s say your flex component is an image loader. So you have a url property that is set via MXML in Flex, but how do you override the UIComponent initialization lifecycle to load an image with the url property that was set?
Is this on adobe tv at all? The code is hard to read… Love it though, thanks!
Hi. thank you for this wonderful tutorial.
i have one question,
how do i convert a button symbol to a flex component? there isn’t a UIButton and when i try that the button’s class will inherit mx.controls.Button it does not load, saying that i need to declare it in declaration scope.
ok to answer my own question.
I do not convert a button to a flex component. instead of a button, i create a movieclip, and use the actionscript code myMovieClip.buttonMode = true;
this command change the mouse cursor to a hand mouse cursor.
and it’s possible to connect to the MouseEvent.Click event listeners of the movieclip
Hi Serge,
Can you confirm if you can create a Flex3 swc (FP9) in Flash CS5 using this process?
Seems as soon as I convert to Flex Component I get a load of compile time errors when targeting Flash Player 9.
Many Thanks,
Thanks a lot Serge….!!!
I would like to repost DannyT’s questions as I’m struggling with this right now:
“Can you confirm if you can create a Flex3 swc (FP9) in Flash CS5 using this process?”
I will really appreciate if someone can come up with some kind of definite answer to this question.
All the best,
Trifon