I will proceed to activate those buttons to receive click events. We can do it while adding itself. But there is a problem. We need to deactivate them before First tween starts, otherwise, new objects will be piled up continuously and we cannot control all the Event Chains properly. To overcome that burden, we need toggle functions activate/deactivate. So that, I have added one more function suppressButtons to ButtonsObj.  Their code will be like this:

public function activateButtons():void{
            sprHOMEbtn.buttonMode=true;
            sprHOMEbtn.addEventListener(MouseEvent.CLICK,handleHomeButtonClickEvent);    
        }
        public function suppressButtons():void{
            sprHOMEbtn.buttonMode=false;
            sprHOMEbtn.removeEventListener(MouseEvent.CLICK,handleHomeButtonClickEvent);
        }
        private function handleHomeButtonClickEvent(arg_Event:MouseEvent):void{
            suppressButtons();
            myHomePage=new homePageObj();
        mainTimeLine(this.parent).addChild(myHomePage);
        }

They are self-explanatory, right? AS we are using MouseEvent, we need to import it in the imports section. And we need a reference variable to Home Page.

import flash.events.MouseEvent;
//in imports section
        private var myHomePage:homePageObj;
//in variable declaration section

I am activating only Home Button in this demo. After completing this tutorial and understanding the concepts fully, you can do that for About button yourself. That will be a home work to you. [ me |:-) , you |:( ].

step3:Showing Home Page

Now, our final guest is coming - homePageObj. Upto now, I am displaying only slices of coding, not only to save the HTML space but also to finish the tutorial as fast as I can. But, I won't leave you half-learned. I think now you got some confidence that we can build an entire flash site with only scripting, and you have learnt basic concepts of creating graphics and text inside DisplayObjects and adding them to the DisplayObjectContainers. Now, the most important things are happening inside the homePageObj - Creating two blocks, Placing them Off stage, Tweening them two times in a chain. Please follow the code carefully, I am explaining it very little at this time.

/*homePageObj.as*/
package{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldType;
    import flash.text.TextFieldAutoSize;
     import fl.transitions.Tween;
     import fl.transitions.easing.*;
     import  fl.transitions.TweenEvent;
     import flash.display.DisplayObject;
     import flash.display.DisplayObjectContainer;
     import flash.events.Event;
     import com.pageevents.PageEvent;
    public class homePageObj extends Sprite{
        private var sprLeftPage:Sprite=new Sprite();
        private var sprRigtPage:Sprite=new Sprite();
        private var num_LeftPageWidth_obj:Number=300;
        private var num_LeftPageHeight_Obj:Number=400;
        private var num_RESIZE_SCALE_RATIO_START_obj:Number=1.2;
        private var num_RESIZE_SCALE_RATIO_LIMIT_obj:Number=1;
        public function homePageObj(){
            InitPages();
        addEventListener(Event.ADDED_TO_STAGE,handleAddedToStageEvent);
        }
        private function InitPages():void{
            sprLeftPage.graphics.clear();
            sprLeftPage.graphics.lineStyle(0,0x000000,0);
            sprLeftPage.graphics.beginFill(0xFFFFFF,1);
            sprLeftPage.graphics.drawRect(0,0,num_LeftPageWidth_obj,num_LeftPageHeight_Obj);
            sprLeftPage.graphics.endFill();
            var txthomeCaptionobj:TextField=new TextField();
            txthomeCaptionobj.autoSize=TextFieldAutoSize.LEFT;
            txthomeCaptionobj.type=TextFieldType.DYNAMIC;
            txthomeCaptionobj.text="Home Page Title";
            txthomeCaptionobj.mouseEnabled=false;
            var fmtHomeObj:TextFormat=new TextFormat();
            fmtHomeObj.font="Times New Roman";
            fmtHomeObj.size=20;
            txthomeCaptionobj.setTextFormat(fmtHomeObj);        
            sprLeftPage.addChild(txthomeCaptionobj);
            addChild(sprLeftPage);
            //Left Page added
            sprRigtPage.graphics.clear();
            sprRigtPage.graphics.lineStyle(0,0x000000,0);
            sprRigtPage.graphics.beginFill(0xFFFFFF,1);
            sprRigtPage.graphics.drawRect(0,0,num_LeftPageWidth_obj,num_LeftPageHeight_Obj);
            sprRigtPage.graphics.endFill();
            var txthomeContentobj:TextField=new TextField();
            txthomeContentobj.autoSize=TextFieldAutoSize.LEFT;
            txthomeContentobj.type=TextFieldType.DYNAMIC;
            txthomeContentobj.text="Home Page Content";
            txthomeContentobj.mouseEnabled=false;
            txthomeContentobj.setTextFormat(fmtHomeObj);        
            sprRigtPage.addChild(txthomeContentobj);
            addChild(sprRigtPage);            
        }
        private function handleAddedToStageEvent(arg_Event:Event):void{
            removeEventListener(Event.ADDED_TO_STAGE,handleAddedToStageEvent);
            sprLeftPage.scaleX=sprLeftPage.scaleY=num_RESIZE_SCALE_RATIO_START_obj;
            sprRigtPage.scaleX=sprRigtPage.scaleY=num_RESIZE_SCALE_RATIO_START_obj;
            sprLeftPage.x=-sprLeftPage.width;
            sprLeftPage.y=(stage.stageHeight/2)-(sprLeftPage.height/2);
            sprRigtPage.x=stage.stageWidth;
            sprRigtPage.y=(stage.stageHeight/2)-(sprRigtPage.height/2);
        START_TWEENS();    
        }
        private function START_TWEENS():void{
            var leftXTween:Tween = new Tween(sprLeftPage, "x", Regular.easeOut, -sprLeftPage.width, (stage.stageWidth/2)-(num_LeftPageWidth_obj), 0.5, true);
            var rigtTween:Tween = new Tween(sprRigtPage, "x", Regular.easeOut, stage.stageWidth, (stage.stageWidth/2), 0.5, true);
        rigtTween.addEventListener(TweenEvent.MOTION_FINISH,handleMoveToCenterTweenFinishEvent);
        }
        private function handleMoveToCenterTweenFinishEvent(arg_Event:TweenEvent):void{
            var leftscaleXTween:Tween = new Tween(sprLeftPage, "scaleX", Regular.easeOut, num_RESIZE_SCALE_RATIO_START_obj, num_RESIZE_SCALE_RATIO_LIMIT_obj, 0.5, true);
            var leftscaleYTween:Tween = new Tween(sprLeftPage, "scaleY", Regular.easeOut, num_RESIZE_SCALE_RATIO_START_obj, num_RESIZE_SCALE_RATIO_LIMIT_obj, 0.5, true);
            var leftYTween:Tween = new Tween(sprLeftPage, "y", Regular.easeOut, sprLeftPage.y, (stage.stageHeight/2)-(num_LeftPageHeight_Obj/2), 0.5, true);
            var rigtscaleXTween:Tween = new Tween(sprRigtPage, "scaleX", Regular.easeOut, num_RESIZE_SCALE_RATIO_START_obj, num_RESIZE_SCALE_RATIO_LIMIT_obj, 0.5, true);
            var rigtscaleYTween:Tween = new Tween(sprRigtPage, "scaleY", Regular.easeOut, num_RESIZE_SCALE_RATIO_START_obj, num_RESIZE_SCALE_RATIO_LIMIT_obj, 0.5, true);
            var rigtYTween:Tween = new Tween(sprRigtPage, "y", Regular.easeOut, sprRigtPage.y, (stage.stageHeight/2)-(num_LeftPageHeight_Obj/2), 0.5, true);
        }
    }
}

It is just like ButtonsObj in all the features. Only difference is executing InitPages in the constructor itself. Because the internal content of this object must be added to it before it is added to stage. I Simply added there without any specific positioning commands. Positioning them off-stage will start in the handleAddedToStageEvent. You already knew the reason. Then I am starting the First Tween. from each side, they will tween to the corresponding positions in a way that they will form a continuous rectangle.

Now, wait a moment. I have added the code to Open Home Page in the Button Click Event of ButtonsObj. OK, it will open home page beautifully. But what about default appearence? We need to show it on site load event itself as the old model file.It is very simple - add homePageObj there also in the InitApp function. I will show you the fully developed mainTimeLine.as.   Now fully blown up mainTimeLine looks like this:

/*mainTimeLine.as*/
package{
    import flash.display.MovieClip;
    import flash.display.Sprite;
    public class mainTimeLine extends MovieClip{
        private var myButtons:ButtonsObj=new ButtonsObj();
        private var myHomePage:homePageObj;
        public function mainTimeLine(){
            trace("Dcument class Constructor");
        InitApp();
        }
        private function InitApp(){
            addChild(myButtons);
            myHomePage=new homePageObj();
        addChild(myHomePage);
        }
    }
}

That's why I have created InitApp function separately instead of doing that simple task in the constructor itself. we are simply clubbing similar code in a condensed form. So, we have successfully finished our goal. This is a very simple example, but we can extend it to higher level complexity also.

   

Above sample is my creation with full ActionScript. This way, We can recreate most of the authoring time animations in run time with Script. If we want authoring time frame level animation, we can do it on a seperate file, and we can load it as an external asset. And, what real performance issue in Object Level programming is we can dispose off all the Removed Objects including their internal assets. Here I didn't use that function to be simpler. In each removal of homePageObj object, we can execute it's public function like this : homePageObj.disposeOff(), which removes all the graphics and texts of its owncontent.