Building entire Flash Website with only ActionScript

While I am learning flash, my faculty planted me a seed. He is an ardent fan of flash actionscript. He has a goal: to build an entire website with only script, that means without creating any content on stage by authoring time interface. I liked that iIdea - to be frank, I too am bitten by that idea. Can we do it really? Yes, we can! In fact, Flash actionscript started with very litle syntax in it's begining stages. Mostly, gotoAndPlay, gotoAndStop play and stop. But It has evolved into a full functional control system in AS2. We can create most of the objects at runtime and we can do every thing with script - all type of transformations and transitions - what we are doing at authoring time.

And, with the advent of AS3 - with all it's robust packages - we can do it very easily. Now, I am an experienced programmer to do it with an ease. So, I am waiting for a situation to show it to others in a simple way, and now, I got it. One of my fellow flash designers created a beautiful authoring time animation, and I am impressed by it. I want to work on this model to show all of you. First I want to show his original work. He called it as a printing press animation(old time art, now we are in the age of desktop publishing, you may not see it regularly). Click any one of the two buttons to see the action.

Yes, it is very nice. But it is very hard to create, and It needs your time and patience. You can download the flash file  from here -> to see how tedious to design it. But It has very simple structure. That's why I took this as an example. First I studied all the object features and their Tween Time charecterestics. Once I understood perfectly, I am ready to do it right from the begining with ActionScript.

step1:Document Class

I have created a new blank file mainTimeLineTestApp.fla in authoring time window. It is fully clean.  I think you know where we put all our code in TimeLine mode. We are doing it from the ages by pressing F9 on the First frame of the top most layer. But I am fascinated by the other recent Document Class Model. In this way We will leave the flash file there. We need to create a new script file. We are doing it now also to use it as include file in main time line code, right? But, I am going in a different way. I have created a class here and attached it to the flash file as Document class. To do so, You need to take two carefull things. First You need to know backbone structure of a simple ActionScript class.

/*mainTimeLine.as*/
package{
    import flash.display.MovieClip;
    public class mainTimeLine extends MovieClip{
        public function mainTimeLine(){
            trace("Dcument class Constructor");
        }
    }
}

This is the Simple structure of a Flash ActionScript class.I will explain you all the bits you are seeing above one by one. First thing you need to remember is saving the .as file with same name of the class.And that package refers to the folder that contains the script. Here, I left it without any name, because I saved it into the same folder, normally refered as root/home of the website when you hosted the project into server. If I saved it in a com or flash or any other named folder, I need to write here package com{ there. Next line is import statement. If you are working in TimeLine mode all the general packages will be opened to the Global RunTime Memory automatically. But, in this class mode you need to import the relevant package for each and every type of the Object, which you are manipulating through your code. I have imported MovieClip class because, I have defined my class by extending MovieClip. You can extend Sprite also for a Document Class. Every Document Class must contain a constructor function, that also must be with the class name.

Now, we need to attach it to our flash file. It is very simple. First lock the one and only layer and press <ctrl>F3. It will open properties panel to the Flash Document. There expand the publish tab, if it is in collapsed state.Here you type in the class name. That's it. Publish it and you will get the trace which I wrote in the constructor function. So, we are successful in our first step, creating a Document Class for our Flash Document.

step2:Adding Buttons

Now, we need to create Interface. They are simple Rounded rectangles with a TextField having the Label. Drawing two rounded Rectangles and Putting some TextField inside them is not a complicated thing. We can simply add two Sprites, and - inside their graphics Object - We can draw Rectangles and Text, and can activate them to open relevant pages. But, I wanted to do it in a separate Object. This is a type of granular coding. In the class structure of coding, It is a better practice to make each major object, a code granule - a self sufficient container to behave on it's own taking responsibilities for it's role - to reuse it again and again in the project. So, I have created ButtonsObj class.

/*ButtonsObj.as*/
package{
    import flash.display.Sprite;
    import flash.events.Event;    
    public class ButtonsObj extends Sprite{
        private var sprHOMEbtn:Sprite=new Sprite();
        private var sprABOUTUSbtn:Sprite=new Sprite();
        public function ButtonsObj(){
trace("ButtonsObj constructor");    
        addEventListener(Event.ADDED_TO_STAGE,handleAddedToStageEvent);
        }
        private function handleAddedToStageEvent(arg_Event:Event):void{
trace("ButtonsObj Added to Stage")    
            drawButtons();
        activateButtons();
        }
        private function drawButtons():void{
        }  
        public function activateButtons():void{
        }              
    }
}

I have already explained you about class structure. Here, our tasks are only two. First drawing buttons and activate them. But for positioning the buttons, we need some stage related values. Before adding it to stage, we cannot refer the stage object. So, I have shifted that functionality to a function, which captures the Event.ADDED_TO_STAGE for this ButtonsObj object. Then, I have modified mainTimeLine code.Before the constructor function defenition I have created a reference variable.

private var myButtons:ButtonsObj=new ButtonsObj();

And, I have wrote a function INITAPP to add this object into mainTimeLine.We can add the object in the constructor itself. But, it is a newly practicing style, to make the function reusable.

private function InitApp(){
            addChild(myButtons);
        }

And, in the constructor, I added one command InitApp(); next to the trace command. If you publish the mainTimeLineTestApp.fla now, three lines of text will appear in it's output panel.

ButtonsObj constructor
Dcument class Constructor
ButtonsObj Added to Stage

Can you imagine why "ButtonsObj constructor" is coming before "Document class Constructor"? Because, we are creating it's instance while declaring itself, and that is taking place before the Instance creation of mainTimeLine class object. So, the Logical Chaining of the code I wrote is successful, even for that Event.ADDED_TO_STAGE capturing. Now, we need to place the actual objects on Stage. I have wrote code for creating that Rounded rectangles and Caption TextFields inside drawButtons function.

sprHOMEbtn.graphics.clear();
            sprHOMEbtn.graphics.lineStyle(0,0x000000,0);
            sprHOMEbtn.graphics.beginFill(0xFFFFFF,1);
            sprHOMEbtn.graphics.drawRoundRect(-(num_BUTTONWIDTH_obj/2),-(num_BUTTONHEIGHT_obj/2),num_BUTTONWIDTH_obj,num_BUTTONHEIGHT_obj,num_ellipseWidth_obj,num_ellipseHeight_obj);
            sprHOMEbtn.graphics.endFill();
            addChild(sprHOMEbtn);
            sprHOMEbtn.x=(stage.stageWidth/2)-(((sprHOMEbtn.width/2)+(num_BUTTONMARGIN_obj/2))*1);
            sprHOMEbtn.y=50;
            var txthomeCaptionobj:TextField=new TextField();
            txthomeCaptionobj.autoSize=TextFieldAutoSize.LEFT;
            txthomeCaptionobj.type=TextFieldType.DYNAMIC;
            txthomeCaptionobj.text="Home";
            txthomeCaptionobj.mouseEnabled=false;
            var fmtHomeObj:TextFormat=new TextFormat();
            fmtHomeObj.font="Times New Roman";
            fmtHomeObj.size=20;
            txthomeCaptionobj.setTextFormat(fmtHomeObj);
            sprHOMEbtn.addChild(txthomeCaptionobj);
            txthomeCaptionobj.x=-txthomeCaptionobj.width/2;
            txthomeCaptionobj.y=-txthomeCaptionobj.height/2;
            txthomeCaptionobj.selectable=false;
            sprHOMEbtn.mouseChildren=false;                        
            //Home button added
            sprABOUTUSbtn.graphics.clear();
            sprABOUTUSbtn.graphics.lineStyle(0,0x000000,0);
            sprABOUTUSbtn.graphics.beginFill(0xFFFFFF,1);
            sprABOUTUSbtn.graphics.drawRoundRect(-(num_BUTTONWIDTH_obj/2),-(num_BUTTONHEIGHT_obj/2),num_BUTTONWIDTH_obj,num_BUTTONHEIGHT_obj,num_ellipseWidth_obj,num_ellipseHeight_obj);
            sprABOUTUSbtn.graphics.endFill();
            addChild(sprABOUTUSbtn);
            sprABOUTUSbtn.x=(stage.stageWidth/2)+(((sprHOMEbtn.width/2)+(num_BUTTONMARGIN_obj/2))*1);
            sprABOUTUSbtn.y=50;
            var txtaboutCaptionobj:TextField=new TextField();
            txtaboutCaptionobj.autoSize=TextFieldAutoSize.LEFT;
            txtaboutCaptionobj.type=TextFieldType.DYNAMIC;
            txtaboutCaptionobj.text="About";
            txtaboutCaptionobj.setTextFormat(fmtHomeObj);
            sprABOUTUSbtn.addChild(txtaboutCaptionobj);
            txtaboutCaptionobj.x=-txtaboutCaptionobj.width/2;
            txtaboutCaptionobj.y=-txtaboutCaptionobj.height/2;
            txtaboutCaptionobj.selectable=false;

All I have done here is creating two Sprites with Rounded Rectangle graphics and placing text for each of them.I have positioned one on right to stage Half and the other one on left Stage Half with equal margin. I made all the building and positioning with variables, not with fixed values. It will be easy to change just a common variable rather than editing each of the button creating statements. To enable this i have defined variables before constructor.

private var num_BUTTONWIDTH_obj:Number=200;
        private var num_BUTTONHEIGHT_obj:Number=30;
        private var num_ellipseWidth_obj:Number=num_BUTTONHEIGHT_obj;
        private var num_ellipseHeight_obj:Number=num_BUTTONHEIGHT_obj;    
        private var num_BUTTONMARGIN_obj:Number=30;

Please note that we are Using TextField object newly and adding some TextField specific properties to it. So, we need the packages into Document Memory Space. So, I am importing them also.

import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldType;
    import flash.text.TextFieldAutoSize;

Now that, construction of Basic Interface is Over. If you publish the flash file, It will look like the screen shot below. If you compare this with old model, buttons look smaller here. First I have created them as  replicas to old buttons, but I thought of smaller size willl be nice. I just did it with changing only two lines of coding!