Changing Objects with Tweener

A simple demo to show how to toggle from one object to another using tweener. Hit 1, 2, or 3 on your keyboard to demonstrate. For my project here I have 3 separate .as files that can perform anything that you code, for my demo though I just have 3 separate RoundRectangle objects.

Here is the Main document class:

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.display.DisplayObject;
    import flash.display.DisplayObjectContainer;
	import caurina.transitions.*;

	public class ToggleAnimation extends Sprite
	{
		// theater area
		private var _theater:Sprite;

		// current page
		private var CurrentObject:DisplayObject;

		// objects
		private var obj1:PageOne;
		private var obj2:PageTwo;
		private var obj3:PageThree;

		public function ToggleAnimation()
		{
			// set the stage
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			// add the theater object placeholder
			_theater = new Sprite();
			addChild ( _theater );

			// key events
            stage.addEventListener ( KeyboardEvent.KEY_DOWN, PageControl );
		}

		public function PageControl (k:KeyboardEvent):void
		{
			if ( k.keyCode == 49 )
			{
				obj1 = new PageOne();
				HelloTheater ( obj1 );
			}
			else if ( k.keyCode == 50 )
			{
				obj2 = new PageTwo();
				HelloTheater ( obj2 );
			}
			else if ( k.keyCode == 51 )
			{
				obj3 = new PageThree();
				HelloTheater ( obj3 );
			}
		}

		/*
		THEATER DISPLAY CONTROL
		============================================================
		*/
		private function HelloTheater( obj:DisplayObject ):void
		{
			// flyout the first object
			ByeTheater( CurrentObject );

			// set the current object
			CurrentObject = obj;

			// slide off the screen
			obj.y = stage.stageHeight;

			// add object to the theater
			_theater.addChild( obj );

			// slide in to the screen
			Tweener.addTween(obj, {y:0, time:1.0, transition:"easeOutBack"});
		}

		private function ByeTheater( dobj:DisplayObject ):void
		{
			if ( dobj )
			{
				Tweener.addTween(dobj, {x:400, time:1.2, transition:"easeInBack", onComplete: function(){ _theater.removeChild ( dobj );dobj = null; }});
			}
		}

	}
}

The class to create a Round Rectangle

package
{
    import flash.display.DisplayObject;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;

    public class RoundRectangle extends Sprite {
        private var rrX:Number;
		private var rrY:Number;
		private var rrRadius:Number;
		private var rrWidth:Number;
		private var rrHeight:Number;
        private var bgColor:uint;
        private var borderColor:uint;
        private var borderSize:Number;
		private var child:Shape = new Shape();

        public function RoundRectangle(rrX:Number=0,rrY:Number=0,rrWidth:Number=10,rrHeight:Number=10,rrRadius:Number=0,bgColor:uint=0x000000)
		{
            child = new Shape();
            child.graphics.beginFill(bgColor);
           	child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRoundRect(rrX, rrY, rrWidth, rrHeight, rrRadius);

            child.graphics.endFill();
            addChild(child);
        }

		public function clearRR(){
			this.graphics.clear();
		}

    }
}

The classes for each page:

package
{
	import flash.display.Sprite;

	public class PageOne extends Sprite
	{
		public function PageOne()
		{
			var p = new RoundRectangle( 0, 0, 200, 200, 10, 0x000000 );
			addChildAt ( p, 0 );
		}
	}
}

package
{
	import flash.display.Sprite;

	public class PageTwo extends Sprite
	{
		public function PageTwo()
		{
			var p = new RoundRectangle( 0, 0, 200, 200, 10, 0xcccccc );
			addChildAt ( p, 0 );
		}
	}
}

package
{
	import flash.display.Sprite;

	public class PageThree extends Sprite
	{
		public function PageThree()
		{
			var p = new RoundRectangle( 0, 0, 200, 200, 10, 0x336699 );
			addChildAt ( p, 0 );
		}
	}
}