Video tutorial: Make Flex components with Flash CS4

by Serge Jespers on 12. Dec, 2008 in Flash, Flex, How-to, Popular, Video, Video Tutorial

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 ;-)

Diggdel.icio.usFacebookStumbleUponTechnorati

Tags: component kit, Flash, Flex, flex component kit for flash, How-to, tutorial, Video

« What’s your video platform of choice?

Start playing with Adobe Stratus (client to client communication) »

26 Responses to “Video tutorial: Make Flex components with Flash CS4”

Caniche 12. Dec, 2008 at 10:34 am #

Excellent, I could not create communication between these two programs.
Now I can:)

Good example and beautiful movieclip !
finty 12. Dec, 2008 at 11:17 am #

thanks Serge. I’ll definately get some use out of this.
eme 12. Dec, 2008 at 4:33 pm #

Hi Serge,
i think the title and description for this video are wrong on adobe tv.
Serge Jespers 12. Dec, 2008 at 4:34 pm #

You’re right… They are and I already reported this to the Adobe TV team. Thanks.
Bodie Leonard 12. Dec, 2008 at 4:58 pm #

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.
Mark Starling 12. Dec, 2008 at 10:09 pm #

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
Stephen Downs 06. Jan, 2009 at 12:02 am #

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.
Stephen Downs 06. Jan, 2009 at 12:09 am #

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.
Andrew Ellis 02. Feb, 2009 at 2:08 pm #

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
Serge Jespers 02. Feb, 2009 at 4:08 pm #

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
Andrew Ellis 02. Feb, 2009 at 6:21 pm #

Thanks Serge, all sorted.
Ray 18. Feb, 2009 at 5:36 pm #

Super-informative site! I am loving it!! Will come back again – taking you feeds also, Thanks.
Gaiar 04. Jun, 2009 at 2:33 pm #

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?
webfraggle 14. Jun, 2009 at 12:33 pm #

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
webfraggle 15. Jun, 2009 at 7:48 pm #

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.
Tom 28. Dec, 2009 at 2:13 pm #

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?!?
Naveen 14. Feb, 2010 at 8:19 pm #

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
jeff 13. Mar, 2010 at 2:02 am #

Is this on adobe tv at all? The code is hard to read… Love it though, thanks!