2010 March | 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.
Read All About It »

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

| 1 Comment »

Flash Player 10 3D settings with AS3/Flex – taterboy
March 9th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tutorials

Flash Player 10’s 3D capabilities are pretty light, but they have opened up many possibilities in UI design. Getting the perspective just right will take some tweaks, so here’s a demo to show some of the inner workings, like focal length and field of view.

Using the PerspectiveProjection class is the key to getting 3D in Flash looking just right, it is also very easy to use.

^?View Code ACTIONSCRIPT

//new PerspectiveProjection
var pers:PerspectiveProjection = new PerspectiveProjection();
 
//set the field of view - doesn't really do much
pers.fieldOfView = 55;//Default: 55, Range: 1 - 180
 
//set the focal length
pers.focalLength = 663;//Default: 663
 
//get stage center for a straight view, if you want a straight view.				
var centerX:Number = stage.stageWidth * 0.5;
var centerY:Number = stage.stageHeight * 0.5;
 
//set the projection center
pers.projectionCenter = new Point(centerX, centerY);
 
//assign to root/stage
//root.transform.perspectiveProjection = pers;
 
//assign to target/DisplayObject
triImage.transform.perspectiveProjection = pers;