Turning Flash CS3 assets into Flex components – Integration of Flash and Flex using Flex Component Kit

(A Flash CS3 FLV player integrated into Flex 3)

click for source

EDIT: EXAMPLE HAS BEEN TAKEN DOWN FOR BANDWIDTH REASONS – USE THE ABOVE LINK TO VIEW SOURCE

EDIT: re: FLVPlayback component in Flex http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=13927

This is a method of taking Flash CS3 assets (whether they be flash components, timeline animations or other assets) and creating Flex components from them. These can then be used in Flex and their properties and methods accessed directly from the flex app. This allows one to exploit the advantages of Flash (there still are some advantages), and use them in the superior Flex environment. This is truly the best of both worlds.
One advantage Flash has over Flex is it’s FLVPlayback component. You have seen some methods of using this component in Flex in this blog: link
Although creating cross-talk between .swfs is useful, the method described here is far superior to the previous one for the purpose of integrating the Flash FLVPlayback component into your Flex application.

Required software:
You will need Flash CS3, Flex 2.0.1+, Adobe Extension Manager, and the extension Flex Component Kit. You can download the Flex component kit here: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins
you will need an adobe ID to access this page.

First Steps:

first create an actionscript file called FLVpb.as (either in a text editor or in flash) this file will reside in the same folder as the FLA you are about to create. this is a necessary step as the class name of your symbol asset must reference this file, which needs to extend UIMovieClip)
In your .as file add the following code:

package {

import flash.display.MovieClip;

import mx.flash.UIMovieClip;

import fl.video.FLVPlayback;

public class FLVpb extends UIMovieClip{

public function FLVpb(){
super();
}
}

}
1) download Flex component Kit mxp file
2) double click to install – this should automatically launch Adobe Extension Manager
3) Open Flash CS3 click new->Flash File (ActionScript 3.0) this should be named FLVpb.FLA and be saved in the same folder as your as file above.
4) click insert->new symbol create a movie clip symbol and call it ‘boundingBox’ leave the linkage fields blank

(note: in order to create a flex component, the flash asset (or assets) must all be contained within a single movieclip symbol – you can’t just drag a bunch of stuff onto the stage… create a movieclip first, then put everything inside that)

5) draw a rectangle shape inside this symbol registered at 0,0 (the reason for this bounding box will be explain later
6) click insert-> new symbol create a movieClip called FLVpb. type in FLVpb for Class and flash.display.MovieClip for base class. select Export for actionscript and Export in first frame.
7) open up the FLVpb movieClip and drag in an instance of bounding box. (it seems that without the bounding box Flex does strange things with the FLVPlayback componenet, since the buffer bar is very wide, even though it’s invisible, flex sees it and adds horizontal scrollbars on the app to accommodate it’s invisible width…) make bounding box 640px wide X 360px high (or whatever aspect ratio you will end up using – this is 16:9 widescreen)
Add a layer within the FLVpb movieclip., call it actions and insert the following code on the first keyframe (I know it’s bad form to attach code to keyframes in AS3 – so if you don’t want to , do it your way. You can also just drag an instance of FLVPlayback component from the components window – don’t forget to name it ‘myFlv’):

import fl.video.*;

var myFlv:FLVPlayback;
myFlv = new FLVPlayback();
addChild(myFlv);
myFlv.x = 0;
myFlv.y = 0;
myFlv.width = 640;
myFlv.height = 360;
myFlv.skinBackgroundColor = 0×333333;
myFlv.skinBackgroundAlpha = .6;
myFlv.skin = “SkinOverAllNoCaption.swf”;
myFlv.skinAutoHide=true;
myFlv.autoPlay=false;
myFlv.scaleMode=”exactFit”;

9) make sure the FLVpb movieclip is selected (highlighted) in the library, and click commands->make Flex components.
10) go to publish settings, and make sure ‘export swc’ is checked, then click Publish
11) put the resulting swc into some folder on your computer (I put them in one called FlashFlexSwcLibrary) this does not need to be in the folder where your other files are.
12) Launch Flex, and open a new Flex project.
13) goto Project->properties->flex build path->library path->add swc then browse to find your swc and add it to your library path.
14) you will need to add a new naamespace for this component, see the following code for this.
15) Now we will look at the flex code. It’s pretty self explanatory, so I’ll let the code to the talking. One thing to note is that I have play() for the flvPlayback component in several places (including on init) this is done for the following reason: I have autoplay set to false, since if this component was in a viewstack, and we has the creationPolicy set to “all” (my preference since not doing this creates a load lag between page changes – (I’d rather wait for everything at the beginning and have a smooth interaction from that point on), the video will start playing even if it is on an index of the viewstack which is not visible. I avoid all this by setting autoplay to false, and having control over when the vid plays. This particular example does not have this problem, but I created the swc for another project, so there you have it.

Right Click on the example for the source code. Notice how easy it is to call functions and listen for events from the Flash FLVPlayback component. It’s beautiful!

Further reading:

(Book) Flex Solutions – Essential Techniques for Flex 2 and 3 developers by: Maco Casario – friends of ed.

(web)

Special thanks to: http://www.flashcomguru.com/index.cfm/2007/7/18/flvplayback-in-flex

http://blogs.adobe.com/flex/archives/2007/04/flex_component_kit_for_flash_c.html

http://lordbron.wordpress.com/2007/05/01/flex-component-kit-step-by-step/

http://weblogs.macromedia.com/pent/archives/2007/04/example_of_the.html

http://blog.flexexamples.com/2007/09/02/installing-the-flex-component-kit-for-flash-cs3/

http://blogs.adobe.com/flexdoc/2007/08/using_the_flex_component_kit_f_1.html

http://www.flexcapacitor.com/flexcomponentkit/

Tweet This Post