Combining Flash Visual Components with Flex Classes | Taterboy.com: Graphics, Multimedia and Such

Combining Flash Visual Components with Flex Classes – taterboy
March 30th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tutorials

Building Visual Flex Components using Flash swc Shared Libraries.

I love building skins or visual components in Flash and doing all my coding in Flex. I also try to make all the code as component-ized as possible, so that it can be reused in future projects. So I have visual component classes from Flash and functionality classes built in Flex. How do we marry the two without hardcoding the flash asset names into your Flex code?

The Approach:
Build as little functionality in Flash as possible and establish templates for how each component should be structured. Here are a couple processes for getting those Flash visual components hooked up to your Flex code.

Method1 - The Direct Approach:
In your code that is specific to your application, create all your visual instances first then pass them in as properties to your class.

There is a Flash visual component called “NewButton”

^?View Code ACTIONSCRITP

//create the visual instance
var btn:NewButton = new NewButton();
 
//create the functionality class instance
var btnCode:NewButtonClass = new NewButtonClass(btn);
addChild(btnCode);

Inside the NewButtonClass class the “btn” instance is used as an Object, the functionality is attached to the visual object and everything is added to the stage.

^?View Code ACTIONSCRIPT

private var baseBtn:Object;
public function NewButtonClass(obj:Object):void{
	baseBtn = obj;
 
	// attach listeners
 
	addChild(baseBtn);
 
}

Depending on the class and needs, sometimes it is best to pass in an Array of visual object instances.

Method2 - The Skin Approach:
After a little digging into the button class I was able to pass in the visual class name as a string. This adds event more portability.

^?View Code ACTIONSCRIPT

//create the functionality class instance and pass in the visual class name.
var btnCode:NewButtonClass = new NewButtonClass(“NewButton”);
addChild(btnCode);
 
//or
 
var btnCode:NewButtonClass = new NewButtonClass();
btnCode.skinName = “NewButton”;
addChild(btnCode);

Inside the NewButtonClass class the string is transformed into the actual class, an instance is created, the functionality is attached and added to the stage.

^?View Code ACTIONSCRIPT

import mx.flash.UIMovieClip; 
 
public var skinName:String;
private var baseBtn:UIMovieClip = null;
public function NewButtonClass():void{
 
	var skinClass:Class = null;
 
	if(skinName){
		skinClass = Class(skinName);
	}
 
	if(skinClass != null){
		baseBtn = UIMovieClip(new skinClass());
 
		// attach listeners
 
		addChild(baseBtn);
	}
}

That’s it, we just created an awesome UIComponent in Flex without hardcoding our visual component classes from Flash.

Technorati Tags: Adobe, class, custom components, Flash, Flex, swc

1 Comment »

[...] Combining Flash Visual Components w&#1110t&#1211 Flex Classes | Taterboy.com: Graphics, Multimedia &… [...]

Pingback by Using Audio, Web, And Video Conferencing For Distance Learning — May 3, 2010 @ 6:49 pm