opentransmission

Native 3D Flash Interface

Eric Cohen — Wed, 03 Feb 2010 00:10:17 +0000

Little experiment with native Flash 3D. I had been playing around with Papervision and needed a simple way to deal with a single element of an application as a 3D object. I found Flash Player 10’s matrix3D adequate for this purpose. Papervision requires a lot of processing power and longer compile times. If you’re working with Flex, you’ll need to have the most recent SDK that compiles to Flash 10. Using native 3D is an easy way to add 3D to your projects by simply applying matrix3D properties to your elements.

Here I’ve set a container and arranged blocks into a grid. If you click on a block, it changes it’s z and rotationY properties. On the “back” of the block is a second block set back in z space one pixel. When the block flips around, the front block is turned invisible and the back turned visible. On mouse out, the reverse happens.

The hardest thing was working around the fact that it doesn’t support a double sided plane. I hacked around this by putting the back face with a scale of -1 and setting the visibilities of the front and back faces on a timer that goes off while the plane is turns 90 degrees.

Download Source

Block3D.as

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import fl.transitions.Tween;
 	import fl.transitions.easing.*;
	import fl.transitions.TweenEvent;
 
   	public class Block3D extends Sprite 
	{
		private static var NUM_SQUARES:uint = 15;
		private static var NUM_ACROSS:uint = 5;
		private static var BLOCK_OFFSET:Number = 100;
 
		private var container:Sprite;
 
		private var easeOut:Number = 0.3;
		private var rotX:Number = 0.1;
		private var rotY:Number = 0.1;
 
		private var scaleTween:Tween;
		private var rotationTween:Tween;
 
		private var activeSquare:Object;
		private var front:BlockFaces;
		private var back:BlockFaces;
 
		public function Block3D():void 
		{
			buildDisplay();
			positionDisplay();
 
			stage.addEventListener(MouseEvent.MOUSE_OVER, enterMovieHandler);
			stage.addEventListener(Event.MOUSE_LEAVE, leaveMovieHandler);
		}
 
		private function buildDisplay():void
		{
			container = new Sprite()
			addChild(container);
 
			var blockXPos:Number = -200;
			var blockYPos:Number = 0;
			var blockNum:Number = 0;
 
			for(var i:uint = 0; i < NUM_SQUARES; i++)
			{
				var block:Block = new Block();
				block.itemNum = i;
				container.addChild(block);
 
				block.addEventListener(MouseEvent.MOUSE_OVER, scaleBlock);
				block.addEventListener(MouseEvent.MOUSE_OUT, scaleBlock);
				block.addEventListener(MouseEvent.MOUSE_DOWN, scaleBlock);
 
 
				if (blockNum < NUM_ACROSS -1) {
					block.x = blockXPos;
					block.y = blockYPos;
					blockXPos += BLOCK_OFFSET;
					blockNum++;
				} else {
					block.x = blockXPos;
					block.y = blockYPos;
					blockYPos += BLOCK_OFFSET;
					blockXPos = -200;
					blockNum = 0;
				}
			}
		}
 
		private function positionDisplay():void
		{
			container.x = stage.stageWidth/2;
			container.y = stage.stageHeight/2 - container.height/2 + BLOCK_OFFSET/2;
			container.z = 200;
		}
 
		private function scaleBlock(e:MouseEvent):void
		{
			switch(e.type){
				case MouseEvent.MOUSE_OVER:;
				scaleTween = new Tween(e.currentTarget, "z", Regular.easeOut, e.currentTarget.z, -200, .3, true);
				container.setChildIndex(Sprite(e.currentTarget), container.numChildren - 1);
				break;
 
 
				case MouseEvent.MOUSE_OUT:
				scaleTween = new Tween(e.currentTarget, "z", Regular.easeOut, e.currentTarget.z, 0, .3, true);
				if (e.currentTarget.rotationY >= 180) {
					rotationTween = new Tween(e.currentTarget, "rotationY", Regular.easeOut, e.currentTarget.rotationY, 0, .3, true);
					e.currentTarget.frontFlip();
				}
				break;
 
				case MouseEvent.MOUSE_DOWN:
				e.currentTarget.z = -200;
				rotationTween = new Tween(e.currentTarget, "rotationY", Regular.easeOut, e.currentTarget.rotationY, 180, .3, true);
				e.currentTarget.backFlip();
				break;
			}
		}
 
		private function mouseOverHandler(e:Event):void
		{
			var xDist:Number = mouseX - stage.stageWidth * 0.5;
			var yDist:Number = mouseY - stage.stageHeight * 0.5;
			container.rotationY += (xDist * rotY - container.rotationY) * easeOut;
		}
 
		private function enterMovieHandler(e:MouseEvent):void
		{
			addEventListener(Event.ENTER_FRAME, mouseOverHandler);
		}
 
		private function leaveMovieHandler(e:Event):void
		{
			removeEventListener(Event.ENTER_FRAME, mouseOverHandler);
		}
 
	}
}

Block.as

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.AntiAliasType;
 
	import flash.events.TimerEvent;
    	import flash.utils.Timer;
 
	public class Block extends Sprite
	{
		private var _number:uint;
		private var front:BlockFaces;
		private var back:BlockFaces;
 
		private var t1:Timer;
		private var t2:Timer;
 
		public function Block()
		{
			front = new BlockFaces(0xFF0000);
			addChild(front);
			front.itemNum = _number;
			front.mouseEnabled = false;
			front.mouseChildren = false;
 
			back = new BlockFaces(0x0000FF);
			addChild(back);
			back.itemNum = _number;
			back.mouseEnabled = false;
			back.mouseChildren = false;
			back.z = -1;
			back.scaleX = -1;
			back.visible = false;
 
		}
 
		public function set itemNum(num:uint):void
		{
			_number = num;
			front.itemNum = _number;
			back.itemNum = _number;
		}
 
		public function frontFlip():void
		{
			t1 = new Timer(100);
           			t1.addEventListener(TimerEvent.TIMER, timerHandler);
			t1.start();
		}
 
		public function backFlip():void
		{
			t2 = new Timer(100);
			t2.addEventListener(TimerEvent.TIMER, timerHandler2);
			t2.start();
		}
 
		private function timerHandler(event:TimerEvent):void 
		{
			t1.stop();
			front.visible = true;
			back.visible = false;
		}
 
		private function timerHandler2(event:TimerEvent):void 
		{
			t2.stop();
			front.visible = false;
			back.visible = true;
		}
 
	}
}

BlockFaces.as

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.AntiAliasType;
 
	public class BlockFaces extends Sprite
	{
		private var _number:uint;
		private var tFTitle:TextField;
 
		public function BlockFaces(color:uint)
		{
			var square:Sprite = new Sprite();
			addChild(square);
			square.graphics.lineStyle(2,0xffffff);
			square.graphics.beginFill(color, 1);
			square.graphics.drawRect(-50,-50,100,100);
			square.graphics.endFill();
 
			var fmt:TextFormat = new TextFormat();
			fmt.size = 16;
			fmt.color = 0xcccccc;
			fmt.align = TextFormatAlign.LEFT;
			fmt.font = "Arial";
 
			tFTitle = new TextField();
			tFTitle.defaultTextFormat = fmt;
			tFTitle.selectable = false;
			tFTitle.antiAliasType = AntiAliasType.ADVANCED;
			tFTitle.border = false;
			tFTitle.wordWrap = true;
			tFTitle.mouseEnabled = false;
			square.addChild(tFTitle);
			tFTitle.width = 100;
			tFTitle.height = 50;
			tFTitle.text = "";
			tFTitle.x = -50;
			tFTitle.y = -50;
 
		}
 
		public function get itemNum():uint
		{
			return _number;
		}
 
		public function set itemNum(num:uint):void
		{
			_number = num;
			tFTitle.text = String(_number + 1);
		}
 
	}
}

Tweener Text Swap Animation

Eric Cohen — Sun, 31 Jan 2010 23:36:56 +0000

I came across this little trick and think it’s a great way to swap out copy in an easy and unique way. Using one of Tweener’s Textshortcut properties, you can change the copy in a textfield by tweening between strings. Typically I try to use native Flash tweening in these prototypes, but Tweener has this transition not found in Flash’s framework.

Here, an event listener waits for a button to be clicked. Depending on which button is clicked, it sets the string to new copy and changes the size of the sprite behind it. For this to work, download the newest Tweener AS3 classes from http://code.google.com/p/tweener/ and include it in your project with the import statements in the first few lines of the TweenerSwap class.

Download Source

Main.as

package
{
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.TextShortcuts;
	TextShortcuts.init();
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.AntiAliasType;
 
	import fl.controls.Button;
 
	public class TweenerSwap extends Sprite
	{
		private var btn1:Button;
		private var btn2:Button;
		private var btn3:Button;
		private var squContainer:Sprite;
		private var square:Sprite;
		private var tF:TextField;
 
		private var textStr:String;
		private var squWidth:Number;
		private var squHeight:Number;
 
		public function TweenerSwap()
		{
			init();
			format();
		}
 
		private function init():void
		{
			squContainer = new Sprite();
			addChild(squContainer);
			squContainer.alpha = 0;
 
			square = new Sprite();
			squContainer.addChild(square);
			square.graphics.beginFill(0xFF0000, 1);
			square.graphics.drawRect(0,0,100,100);
			square.graphics.endFill();
 
			var fmt:TextFormat = new TextFormat();
			fmt.font="Arial";
			fmt.size=12;
			fmt.color= 0xCCCCCC;
			fmt.leading=4;
			fmt.align = TextFormatAlign.CENTER;
 
			tF = new TextField();
			tF.multiline=true;
			tF.wordWrap=true;
			tF.width=300;
			tF.selectable=false;
			tF.defaultTextFormat=fmt;
			tF.antiAliasType = AntiAliasType.ADVANCED;
			tF.mouseEnabled = false;
			squContainer.addChild(tF);
 
			var container:Sprite = new Sprite();
			addChild(container);
			container.addEventListener(MouseEvent.MOUSE_DOWN, swapText, false, 0, true);
 
			btn1 = new Button();
			btn1.label = "String 1";
			container.addChild(btn1).name = "btn1";
 
			btn2 = new Button();
			btn2.label = "String 2";
			container.addChild(btn2).name = "btn2";
 
			btn3 = new Button();
			btn3.label = "String 3";
			container.addChild(btn3).name = "btn3";
		}
 
		private function format():void
		{
			btn1.y = 0;
			btn2.y = 24;
			btn3.y = 48;
 
			squContainer.x = stage.stageWidth/2;
		}
 
		private function swapText(e:MouseEvent):void
		{
			switch(e.target.name)
			{
				case "btn3":
				textStr = "As we must account for every idle word, so must we account for every idle silence.";
				squWidth = 180;
				squHeight = 60;
				break;
				case "btn2":
				textStr = "If you would not be forgotten as soon as you are dead, either write something worth reading or do things worth writing.";
				squWidth = 350;
				squHeight = 40;
				break;
				case "btn1":
				textStr = "A great empire, like a great cake, is most easily diminished at the edges.";
				squWidth = 410;
				squHeight = 20;
				break;
				default:
				break;
			}
 
			Tweener.addTween(squContainer, {x:stage.stageWidth/2 - squWidth/2 + 50, y:stage.stageHeight/2 - squHeight/2, alpha:1, time:1, delay:0, transition:"easeInOutQuart"});
			Tweener.addTween(square, {width:squWidth, height:squHeight, time:1, delay:0, transition:"easeInOutQuart"});
			Tweener.addTween(tF, {_text:textStr, width:squWidth, height:squHeight, time:1, delay:0, transition:"easeInOutQuart"});
 
		}
	}
}

Bare Bones Flash MVC

Eric Cohen — Sun, 31 Jan 2010 23:11:20 +0000

It’s nice to have a simplified version of an MVC architecture to start a new project with. Those familiar with MVC (Model, View, Controller) know that it’s a very scalable architecture and a great way to separate your data from the visual assets of your site, then allow the controller to interface between the two. Those unfamiliar will enjoy how well it allows the data, logic and view to work with each other in an encapsulated way.

The framework operates in a cyclical way: View > Controller > Model > View.
Here, the View has an event listener waiting for a button to be clicked. This listener calls a function in the controller. Depending on the logic in the controller, the method sends a property to the Model. Upon receiving that property the Model dispatches an event that the View is listening for. The View then initiates an action.

In this example, buttons, the text box and the red bar exist in the View. The event listener in the View waits for a button to be clicked and then executes a method in the Contoller. The Controller performs simple logic with the data it’s received. Here it tests if the number is between 0 and 10. If is does, then set a property in the Model. The Model then dispatches an event that the View is listening for. The View executes code which changes the width of the bar.

Download Source

Main.as

package
{
	import mvc.*;
	import flash.display.Sprite;
 
	public class Main extends Sprite {
		private var _model:Model;
		private var _controller:Controller;
		private var _view:View;
 
		public function Main():void {
			_model=new Model();
			_controller=new Controller(_model);
			_view=new View(_model,_controller);
			addChild(_view);
		}
 
	}
 
}

Model.as

package mvc
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
 
	public class Model extends EventDispatcher
	{
		public static var UPDATE:String='modelWasUpdated';
 
		private var _number:Number = 0;
 
		public function Model(){}
 
		public function get number():Number{
			return _number;
		}
 
		public function set number(n:Number):void{
			_number=n;
			dispatchEvent(new Event(Model.UPDATE));
		}
 
	}
}

View.as

package mvc
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import fl.controls.Button;
	import fl.controls.TextArea;
 
	public class View extends Sprite
	{
		private var _model:Model;
		private var _controller:Controller;
 
		private var btnUp:Button;
		private var btnDown:Button;
		private var textArea:TextArea;
 
		private var bar:Bar;
 
		public function View(model:Model,controller:Controller)
		{
			_model=model;
			_controller=controller;
			_model.addEventListener(Model.UPDATE,update);
 
			init();
			positionAndFormat();
		}
 
		private function init():void
		{
			var container:Sprite = new Sprite();
			addChild(container);
			container.addEventListener(MouseEvent.MOUSE_DOWN, _controller.numberUpdate, false, 0, true);
 
			btnUp = new Button();
			container.addChild(btnUp).name = "numUp";
 
			btnDown = new Button();
			container.addChild(btnDown).name = "numDown";
 
			textArea = new TextArea();
			addChild(textArea);
 
			bar = new Bar();
			addChild(bar);
		}
 
		private function positionAndFormat():void
		{
			btnUp.x = 0;
			btnUp.label = "Number Up";
 
			btnDown.x = 110;
			btnDown.label = "Number Down";
 
			textArea.y = 30;
			textArea.width = textArea.height = 22;
			textArea.text = String(_model.number);
 
			bar.x = 28;
			bar.y = textArea.y;
		}
 
		private function update(e:Event):void
		{
			textArea.text = String(_model.number);
			bar.update(_model.number);
		}
 
	}
}

Controller.as

package mvc
{
	import flash.events.MouseEvent;
 
	public class Controller
	{
		private var _model:Model;
 
		public function Controller(model:Model)
		{
			_model=model;
		}
 
		public function numberUpdate(e:MouseEvent):void 
		{
			switch(e.target.name)
			{
				case "numUp":
				if (_model.number < 10) _model.number++;
				break;
				case "numDown":
				if (_model.number > 0) _model.number--;
				break;
				default:
				break;
			}
		}
 
	}
}

Bar.as

package
{
	import flash.display.Sprite;
 
	import fl.transitions.Tween;
 	import fl.transitions.easing.*;
 
	public class Bar extends Sprite
	{
		private var square:Sprite;
 
		public function Bar():void
		{
			square = new Sprite();
			addChild(square);
			square.graphics.beginFill(0xff0000, 1);
			square.graphics.drawRect(0,0,1,22);
			square.graphics.endFill();
			square.visible = false;
		}
 
		public function update(num:Number):void
		{
			var scaleTween = new Tween(square, "width", Regular.easeOut, square.width, num * 65, .5, true);
			square.visible = true;
		}
 
	}
}

Add/Subtract Items from an Array

Eric Cohen — Sun, 31 Jan 2010 21:31:48 +0000

Here is something I used for a sorting/filtering application. I needed a way to add and remove items from an array and have the button know whether or not it had been added. When a button is clicked, the event handler sends a boolean property to the clicked button setting it as added or not added. Because the button stores that property, when you click the button it can toggle it’s properties in and out of the array based on whether or not it has been added.

The basic flow is as follows. Create buttons based on an array and position them. Here our “_itemsArr” has five items. Set up an event listener for the buttons and store the boolean property in the button and update it when it has been clicked. Depending on whether the property is true or false, add or subtract that button’s label property to an array while updating the text area with the array.

Download Source

ArrayExample.as

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import fl.controls.TextArea;
 
	public class ArrayExample extends Sprite
	{
		private static var buttonOffset:Number = 141;
		private var _itemsArr:Array = ["Earth", "Fire", "Wind", "Water", "Chicken"];
		private var _activeItemArr:Array = new Array;
 
		private var container:Sprite;
		private var traceArea:TextArea;
		private var button:ButtonClass;
 
		public function ArrayExample()
		{
			buildDisplay();
			positionDisplay();
		}
 
		private function buildDisplay():void
		{
			container = new Sprite();
			addChild(container);
			container.addEventListener(MouseEvent.MOUSE_DOWN, buttonHandler);
 
			var buttonPosition:Number = 0;
			for(var i:uint = 0; i < _itemsArr.length; i++)
			{
				button = new ButtonClass();
				container.addChild(button);
				button.label = _itemsArr[i];
				button.x = buttonPosition;
				buttonPosition += buttonOffset;
			}
 
			traceArea = new TextArea();
			addChild(traceArea);
		}
 
		private function positionDisplay():void
		{
			traceArea.x = container.x;
			traceArea.y = container.y + 30;
			traceArea.width = container.width;
		}
 
		private function buttonHandler(e:MouseEvent):void
		{
			var activeItem:ButtonClass = e.target as ButtonClass;
 
			if(!activeItem.added){
				addToArray(e.target.label);
				activeItem.added = true;
			} else { 
				removeFromArray(e.target.label);
				activeItem.added = false;
			}
 
			traceArea.text = String(_activeItemArr);
		}
 
		private function addToArray(type:String)
		{
			var dupNumber:Number = 0;
			_activeItemArr.push(type);
 
			for (var i : int = 0; i < _activeItemArr.length; i++) {
				if (_activeItemArr[i] == type) dupNumber++;
			}
 
			if (dupNumber > 1) _activeItemArr.pop();
		}
 
		private function removeFromArray(type:String)
		{
			for (var i : int = 0; i < _activeItemArr.length; i++) {
				if (_activeItemArr[i] == type) _activeItemArr.splice(i,1);
			}
		}
 
 
	}
}

ButtonClass.as

package
{
	import fl.controls.Button;
 
	public class ButtonClass extends Button
	{
		private var _added:Boolean = false;
 
		public function get added():Boolean
		{
			return _added;
		}
 
		public function set added(added:Boolean):void
		{
			_added = added;
		}
 
		public function ButtonClass(){}
 
	}
}