[Flep]

After seeing how to use Tweener Caurina of Zeh Fernando in the first tutorial by FlepStudio, here is the second example.

This time I simulated the creation of a website in Flash CS3, with colored background that changes according to the section, menus and content all simulated using the tweener caurina.

I would like to say that for people who need a tweener, in my opinion Caurina is the best one.

Be that as fact and as simplicity and immediacy in its use.

Example:

Main.as :

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.utils.getDefinitionByName;
	import caurina.transitions.Tweener;
	
	public class Main extends MovieClip
	{
		private var items_array:Array;
		private var background_colors:Array;
		
		private var container_mc:MovieClip;
		private var underline_mc:MovieClip;
		
		private const ROWS:int=10;
		
		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			stage.frameRate=31;
			
			items_array=new Array(menu_mc.item_0_mc,menu_mc.item_1_mc,menu_mc.item_2_mc,menu_mc.item_3_mc,menu_mc.item_4_mc);
			background_colors=new Array(0x006699,0xCC0066,0xFF3300,0x009900,0x333333);
			
			changeItemColor(0);
			displayContent("Square");
			
			addMenuListeners();
		}
		
		private function addMenuListeners():void
		{
			for(var i:int=0;i < items_array.length;i++)
			{
				items_array[i].id=i;
				items_array[i].mouseChildren=false;
				items_array[i].buttonMode=true;
				items_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
				items_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
				items_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
			}
		}
		
		private function setOver(evt:MouseEvent):void
		{
			underline_mc=new MovieClip();
			underline_mc.graphics.beginFill(0xFFFFFF,1);
			underline_mc.graphics.drawRect(0,0,1,1);
			underline_mc.x=evt.target.x;
			underline_mc.y=evt.target.y+evt.target.height+5;
			menu_mc.addChild(underline_mc);
			
			Tweener.addTween(underline_mc,{width:evt.target.width+5,time:0.3,transition:"easeOutQuad"});
		}
		
		private function setOut(evt:MouseEvent):void
		{
			if(underline_mc!=null)
			{
				menu_mc.removeChild(underline_mc);
				underline_mc=null;
			}
		}
		
		private function setDown(evt:MouseEvent):void
		{
			Tweener.addTween(bg_mc,{_color:background_colors[evt.target.id],time:1.2,transition:"easeOutQuad"});
			
			menu_mc.removeChild(underline_mc);
			underline_mc=null;
			changeItemColor(evt.target.id);
			
			switch(evt.target.id)
			{
				case 0:
					displayContent("Square");
				break;
				
				case 1:
					displayContent("Circle");
				break;
				
				case 2:
					displayContent("Star");
				break;
				
				case 3:
					displayContent("Oval");
				break;
				
				case 4:
					displayContent("Line");
				break;
			}
		}
		
		private function changeItemColor(n:int):void
		{
			for(var i:int=0;i < items_array.length;i++)
			{
				if(i==n)
				{
					items_array[i].mouseEnabled=false;
					Tweener.addTween(items_array[i],{_color:0x000000,time:1.5,transition:"easeOutQuad"});
				}
				else
				{
					items_array[i].mouseEnabled=true;
					Tweener.addTween(items_array[i],{_color:0xFFFFFF,time:1.5,transition:"easeOutQuad"});
				}
			}
		}
		
		private function displayContent(s:String):void
		{
			var className:Class=getDefinitionByName(s)as Class;
			
			if(container_mc!=null)
			{
				removeChild(container_mc);
				container_mc=null;
			}
			container_mc=new MovieClip();
			for(var i:int=0;i < 50;i++)
			{
				var clip:MovieClip=new className();
				clip.scaleX=clip.scaleY=0;
				clip.x=66+((i%ROWS)*30);
				clip.y=66+(Math.floor(i/ROWS)*30);
				Tweener.addTween(clip,{scaleX:2,scaleY:2,delay:0.05*i,time:0.2,transition:"easeOutQuad"});
				container_mc.addChild(clip);
			}
			container_mc.x=(stage.stageWidth-container_mc.width)/2;
			container_mc.y=(stage.stageHeight-container_mc.height)/2;
			addChild(container_mc);
		}
	}
}

Source files: