Create full-featured Flex code elements from design assets built in Flash Professional

Follow Adobe Cookbooks on Twitter

Avg. Rating 4.3

Tags:

Problem

You want to create your own Button and use it in project written in Flex Builder. You designed the Button in Flash Professional, created a pretty skin, and added label with your favorite font. But how can you easily use this button and communicate with it using the clear and strict Button class, instead of the dynamic MovieClip class?

Solution

Design your button in Flash Professional. Create class Button in your project. Set linkage to your button to Button class. Then you must embed SWF file using [Embed] metatag with param mimeType="application/octet-stream". Then, load embedded asset using Loader.loadBytes() method. Then just wait 1 frame – and you can use all possibilities of your Button.

Detailed explanation

We will create simple button. Create new .FLA file in the Flash Authoring Tool. Give it "assets" name. Create new symbol. Set its type to MovieClip. Draw pretty rounded rectangle in it. Then create new layer and put text field on it. It will be our label. Set instance name for text field to "labelTxt".

Create new ActionScript project in Flex Builder. Create Button class in the default package. Extend it from Sprite class. Declare variable where to keep our text field. It must be public property and its name must be the same as instance name of text field in Flash Authoring Tool.

public var labelTxt:TextField;

Then let's create label property which will be used to set the label for our button:

public function get label():String

{

 return labelTxt.text;

}

public function set label(value:String):void

{

 labelTxt.text = value;

}

In "assets.fla" file set class in linkage properties of our button to "Button".

Ok, we have a simple button, but how we can use it?

First, embed "assets.swf" into some variable of main class of your flex project:

[Embed("../assets/assets.swf",
mimeType="application/octet-stream")]

private var AssetsAsset:Class;

mimeType="application/octet-stream" will tell to flex not to parse our swf. So flex will don't know which type of file we trying to embed.

After embed AssetsAsset will be ByteArrayAsset which is extender of ByteArray. So we can load it using Loader class:

private var myLoader:Loader = new Loader();

...

// this can be written in constructor

var ldrContext:LoaderContext = new LoaderContext(false,
ApplicationDomain.currentDomain);

myLoader.loadBytes( new AssetsAsset (), ldrContext );

We must pass LoaderContext into loadBytes() to load our SWF into the same domain as main application.

To start using our SWF, we must wait 1 frame. Only after 1 frame it will become available.

private var sprite:Sprite = new Sprite();

...

// this can be written in constructor

sprite.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

...

private function enterFrameHandler(event:Event):void 

{ 

 var button:Button = new Button();

 addChild(button);

 button.label = "I'm a button from flash!";

 sprite.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

}

Just try it! After performing these actions right you will see your pretty button on the stage with label that we set :)

EmbedTest2.zip