As promised in my presentation at Adobe Max 2007 in Chicago, I am posting all the examples and source code.
Using Flash and Flex Together
- Learn how to effectively use Flash and Flex together in applications from a designer’s perspective.
- Implement designs typically created in Flash and Photoshop.
- “Make or break” points that determine if you are doing something in Flex you should probably do in Flash instead, and vice versa.
- Integration features provided by Flash CS3 Professional and Flex Builder
These photos show you what a Flex application can look like using the new Flash Component Kit. Below the images is a link to the live example. Please note this is a “down and dirty” example created to show the possibilities, and has very limited functionality.
Click on the top left button to see the Flash component expand. These are buttons in a Flex VBox.Notice how the buttons below properly shift to maintain the correct spacing.
Click play on the audio player to see this Flash component work properly in Flex.
This example shows a Flash container used to contain a Flex DataGrid component. Click on the top right to open the “Cart”.
This video player was created in Flash and used in the Flex application. It is using the Flash FLVPlayback component within Flex. Click on the little “Plus button” to open the video player.
Click here to see the live example…
Here are some individual examples of the various features of the Flash Component Kit. I have included all of the source code. The Flex project includes all of the example FLAs and MXML code.
- Download the MaxPresentation Flex project archive.
- Import the zip archive as a “Flex Project”. It will unzip and take it from there.
- To use the included FLA examples, you will need to change the classpath in the FLA to the local source (src) directory of the Flex project Some of the FLAs use externaclasses that are within this folder, and the directory will be incorrect. Be sure to delete the old classpath (points to the src dir on my machine).
- Update the classpath in the project properties to add your Flash CS3 ActionScript 3.0 Classes…only do this if you want to edit the Classes in Flex that are for the FLAs.
- Download the presentation PDF.
- Get the latest Adobe documentation.
Here are the published examples:
- Stateless Check Box Example
- Stateful Check Box Example
- Flash Video Player used as Flex Component Example
- Example of Resizing a Flash component from Flex (Just make the window small to see the Flash component react)
- Example of dispatching a custom event from Flash to Flex (Drag the icon into the folder to see Flex receive the Flash component’s event)
- Example of using View States in a Flash component triggered by Flex (and used as a Flex component skin. Its a skinned Flex CheckBox Component)
- Example of Focus Management from Flash to Flex (Click on the content to give focus to the Flex application and tab from Flex to Flash)
- Example of triggering a Flex Tool Tip from within a Flash Component
- Example of the usage of a Bounding Box in a Flash Component
- Example of using a Flash Component as a Flex Container (ie. Panel component)
Amazing stuff Nick.
Any chance of seeing the Audio Player FLA?
I did not document the code on the audio player, as it really had nothing to do with the Component Kit, other than it is a Flash Component.
Releasing undocumented code usually raises more questions than answers…
[...] Flex Components Tutorial http://www.velloff.com/?p=39 [...]
i didn’t found the command Conver Symbol to Flex Container, is there any problem?
so will u give the version kit can cover Symbol to Flex Conatner?
zhaohongri,
make sure you lave the latest Flash Component Kit extension installed (included in the Flex 3 Beta “flash-integration” folder).
Re-publish the container FLA, because there is a little bug where Flex does not recognize the container clip for some reason… seems to get fixed after you republish the FLA.
As a note, when you update a Flash CS3 extension, you must replace the compiled component in you flash library if you were using an older version.
For these examples, you would replace your FlexComponentBase symbol with the one that shows up in your components. Your FLA would then utilize the updated classes.
well,i read the document today,and i found the Flash Component Kit recently version in the Flex3 sdk/frameworks/flash-integration,but the download link in the labs.adobe.com provide is the old version,the adobe site’s error,:)
Yes, the version in the labs is old. You definitely want to use the one in the latest Flex 3 beta.
I found a newer version in just about every engineering build of Flex
i try to finish the example by myself to complete the custom resize plane,i review the swf9.pdf and the tutorial http://flexwiki.adobe.com/confluence/display/ADOBE/Flex 3 Details – Flex Component Kit
but i fail when i do the collapse action,the contentHolder didn’t hide,i try to let it’s alpha changed from 100 to 0 in the tween from expand to collapse.i looked your tutorial,but i can’t found the way to implement this effect,may i get your kindly help?
the url address which i writed is in the http://flexwiki.adobe.com/confluence/display/ADOBE/Flex
the last link
When it collapses you have to change the size of the boundingBox clip to alert the size change to flex. Also, in AS3 alpha values range from 1 to 0, not 100…
ok,i change the alpha value in the Flash cs3 IDE,i try again,:)
velloff,i want to know in the Flash cs3 IDE,i change the contentHolder’s alpha 100% to 0%,why it is not implement,and i see the Adobe’s example
the Custom Panel is not extends ContainerMovieClip
package {
import flash.events.*;
import flash.display.*;
import flash.text.*;
import mx.flash.*;
public class MyPanel extends UIMovieClip {
public var resizer:SimpleButton;
public var background:MovieClip;
public var titleField:TextField;
public var contentHolder:PanelContents;
public var boundingBox:MovieClip;
public function MyPanel():void{
addFrameScript(0, frame1);
resizer.addEventListener(MouseEvent.CLICK, resizer_clickHandler);
resizer.useHandCursor = false;
}
public function get title():String{
return (titleField.text);
}
function frame1(){
stop();
}
public function set title(_arg1:String):void{
titleField.text = _arg1;
}
override public function setActualSize(_arg1:Number, _arg2:Number):void{
super.setActualSize(_arg1, _arg2);
}
private function resizer_clickHandler(_arg1:MouseEvent):void{
currentState = ((currentState == “expand”)) ? “collapse” : “expand”;
}
}
}//package
package {
import mx.flash.*;
public dynamic class PanelContents extends UIMovieClip {
}
}//package
why the MyPanle is not extends ContainerMovieClip,but extends UIMovieClip,and the ContentHolder instance also extends UIMovieClip
i found the contentHolder is not move in the tween from start to end,not noly move it,but also change it’s alpha,is there any option to set?
i think this is a bug
http://zhaohongri.cn/upload/Main.swf
Make sure you named the “contentHolder” clip in the IDE. I would just name it contentHolder. Then access it as you would any other clip, myComponent. contentHolder.height = h;
Hey Nick, thanks for the examples. But there is one thing I don’t get:
I was trying to build something similar to your CustomEventExample. You are using the CustomEventComponent class in …flashClasses/view as base class for the CustomEventComponent mc in the fla. When I change the code of that class in your example in flex, I can see the influence without having to update the swc import. That is what I want, but it doesn’t work in my case.
I want to separate the .as from the .fla, so that I just have to convert the mc including the base class reference into a flex component and write the class in flex.
Here is what I did: I added a new classpath in flash, which is the same as my main source folder in flex and linked the base class of the mc to com.flashClasses.NameofMC, because my class NameofMC.as lies in folder src/com/flashClasses.
After converting the mc into a flex component, flash changes the name of the base class back to …UIMovieClip and ignores the class I wrote in flex. After importing the swc, I just can see the mc, but it is not doing what the code says.
Can you tell, what I did wrong?
Try manually putting the class location in the library item, instead of using the convert to flex component. Put a trace command in the constructor to make sure it is seeing the linkage.
Hey Nick, thanks for your help. It is working now. Great!!!
Is it possible to load swc files on demand, i.e. If I have a large number of assets created in Flash CS 3, how to load them at run time.
Please reply soon …
Thanks
You can load external swf files, and use Application.getClassReferenceByName(string) … and get a reference to the class at runtime.
@velloff
I want to use swc files at run time created in Flash CS3. Is it possible to preload and load swc files at runtime and using them as we use swf files.
Or
the only alternative to this is to use Application.getClassReferenceByName(string)
Waiting for reply ….
Hi Veloff,
I was wondering about the containers, i created one placed by contentHolder within its bounds, everything works fine on the flex end, i can put stuff inside it with no problem. The only thing is when i put it in a TileList i get redraw bounds going way outside the cells, thus making it impossible to select nearby cells in the tilelist. its like every cells redraw region is a 3×2 range of cells. It works just as intended when i dont put anything inside the container but as soon as i put something in it it goes berserk.
Any help would be apreciated.
Thanks.
I found the containers to be very buggy when I was using them. I would make sure you have the latest component kit by grabbing the latest flex 3 sdk, and get the extension from there.
http://labs.adobe.com/technologies/flex/sdk/
I do hope Adobe is continuing work on this functionality… I think it is a critical piece missing in Flex.
Yeah i’m already on a newer version than beta 3, i’m on the prerelease program running the feb 1st build. Oh well i guess i’m gonna have to use something else instead in the meantime.
sorry i new i flex 3 i have this problem
( Severity and Description Path Resource Location Creation Time Id
unable to open ‘\Applications\Adobe Flash CS3\Configuration\Components\Video\FLVPlaybackAS3.swc’ MaxPresentation Unknown 1208505158593 10)
when i compile the project i know you said something about that in you tutorial but i can`t fix it please help me
Ok, so I’m guessing here… but I imagine the Flex Component Kit may have been updated to support Flex 3, and changes in the API…
I would open the FLVPlaybackAS3 FLA and make sure the latest Flex Component Kit extension is installed, and replace the object in the library.
Then recompile the swc (just publish) and see if that solves the issue.
I’ve been trying to load my flash components dynamically but I can’t seem to get some things working in Flex such as triggering transitions or setting currentState to change the frameLabel.
Is it possible to use the SWF instead of the SWC and to get all of this functionality?
Every tutorial I’ve seen talks about the SWC and I haven’t seen any thing about loading components dynamically.
I don’t see any reason you couldn’t load the library at run time. I have not tried it and it would probably be a bit tricky.
Thanks a bunch for the source code! After two days of trying to pass a custom event from a component created in flash, I was considering weeping. Thanks to your files, I finally got it working… THANKS!!!
This is absolutely beautiful. I’m particularly interested in the “expanding buttons in a flex VBox” example – I’m having a huge problem getting the equivalent of an AS onClick to work following adobe’s instructions for a custom container–but as a dumb designer I’m not really sure which of your examples I should be combining.
The “Example of Resizing a Flash component from Flex”, right? But how about the full expand/collapse onClick container behavior?
Thanks so much for your help and kindness to everyone.
[...] and Code Samples from Adobe – eismann-sf.com Flex Error Handling: A Simple Example – javaworld.com Flex Component Kit Examples, MAX 2007 Chicago Presentation – velloff.com From Java to Flex – flexexamples.blogspot.com Flex on Rails: Building Rich Internet [...]
Hi,
Just a quick comment to say thanks for the code, in particular the bounding box example. It fixed a problem i was having with an animated component perfectly.
Cheers
Alan
[...] Flex Component Kit Examples, MAX 2007 Chicago Presentation – velloff.com [...]
Thanks alot for the flash & flex integration summary. It really inspired me.
but I’m afraid I did not grasp every concept in the doc. Do you happen to have any resources lying around that explain more in detail…(especially the part about “states and transitions”).
Much appreciated.
Hi Velloff,
2 years later I’m and here I’m trying to use one Flash design into one Flex project and your presentation is helping enormously, but one thing is driving me crazy, why an 800 x 600 mc exported from flash doesn’t fit at all inside an 800 x 600 app?
I’ve made several attempts from the simplest one as exporting the flash background which delimits the app to the entire mc and always I get some grey area outside or scrolls if I let the scrollpolice not set to off.
I’ve done tests with web and AIR projects and both exhibits the same behaviour.
Thanks again.
John
[...] Flex Component Kit Examples, MAX 2007 Chicago Presentation – velloff.com [...]
[...] Flex Component Kit Examples, MAX 2007 Chicago Presentation – velloff.com [...]
did you publish the source code for expanding button for the beetle component (top left button)?
Thanks
[...] Flex Component Kit Examples, MAX 2007 Chicago Presentation – velloff.com [...]