Setting Up the Movie and Timeline

Start off by creating a new ActionScript 3.0 Flash movie; I have used the default settings for a 550x400px canvas
size, 12fps for the frame rate and white for the background. You may change these as you please by accessing
the Properties Inspector on the bottom of the screen.

We are now going to set up our timeline, the timeline is the controller of our Flash movie and it has frames and layers. At
each instance, Flash can show one frame at a time just like a film frame. More than one layer can be put in each frame the
same way an image is composed in Photoshop. We are going to create several layers on our timeline to make our content
organised. Use the Insert Layer button to add 3 more layers to your timeline.
You should end up with 4 layers, double click the label of these layers one at a time to rename them Background, Buttons
and Title, Content, and Action from the bottom to the top to end up with something similar to the image below. Each of
our layers will hold the content type specified on its label.

Creating All Graphical Content for Our Website

Our website is going to have a preloader and four sections. Each of these is going to be located on a frame by its own on
the timeline. Some of the layers of our timeline are going to have different key frames in each of these frames, while
some will share the same content on several frames (e.g. the background). We are going to go in to more detail next as
we work on these frames one by one.

We are going to start off with our preloader first, this frame is only going to have the text "Loading" and it will remain there
until the website finishes loading. To do this, click once on the layer labelled Content then pick the Text Tool and
write loading in the middle of the stage.
We are now going to write the code for the preloader, click once on the Actions layer and then right-click it and
select Actions to open up the Actionspanel. Paste the code below to program the preloader.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void {

var total:Number = this.stage.loaderInfo.bytesTotal;

var loaded:Number = this.stage.loaderInfo.bytesLoaded;

if (total == loaded) {

play();
this.removeEventListener(Event.ENTER_FRAME, loading);

That completes our preloader part, close the Action panel once you are done to go back to your movie. We are going to
start now working on the rest of the website. We will start off now by adding the background. You can use our background
here to follow the tutorial.
We will put content from the bottom up in accordance to our layer structure. The first layer from the bottom is the
background. Right-click the second frame in the Background layer and select Insert Blank Keyframe, this should create a
blank keyframe that differs in content of frame 1. Our background is going to be the same in all of our website sections, so
we can have the same keyframe span across all the sections. To do this Right-click the fifth frame of the background layer
and select Insert Frame to make our keyframe expand across to this frame. You should end up with something similar to
the image below.

To add the background to this part of our website simply click on the stage and press CTRL+R and tehn browse teh pic and
add. Your background should be positioned at the right place and it should span across the 2nd, 3rd, 4th, and 5th frames of
your timeline. We are done working with this layer, so click on the Lock point on your layer label to prevent any changes to
this layer.

Moving on to the Buttons and Title layer, we are going to add in this layer both of these things. Just like
the Background layer, the Buttons and Titlelayer is going to remain the same for all the sections of our website, so we will
just need one Keyframe that spans across the four section frames. To create that frame simply right-click the second frame
of the Buttons and Title layer and select Insert Blank KeyFrame, this should create a blank keyframe that differs in content
of frame 1. To make the content of this new frame remain the same for all of our upcoming frames, we can simply right-
click the fifth frame of this layer and select Insert Frame to make the frame expand all the way up to this frame. You should
end up with something similar to the image below.

It is time to put content in this layer now. Click on the name of the layer once to make sure that you are adding content to
it. For the buttons, we are going to use the Button Component. Components are little smart Flash objects with built-in
functionality. To get an instance of the Button Component go through Window>Components to open up the Components
Panel. Look under the User Interface category to find the Button Component and simply drag and drop an instance of it
onto stage. Repeat the drag and drop three more times to get four buttons in total on stage similar to the ones you see in
the image below.

We will need to change the labels of our buttons and assign to them Instance Names in order to be able to manipulate
them via ActionScript. Starting with the labels, select the first button on the top left, then access the Properties
Inspector and click on the Parameters tab to edit the parameters of the component. Simply click once on the Label field to
rename the button, label the first one Home, you can assign the instance name to it by filling the field on the left side of
the Parameters tab, assign the instance name home_btn to this button.

We need to repeat the process to each of our three buttons, label each of these buttons About, Links, and Contact, and
assign the instance names about_btn, links_btn, and contact_btn respectively. You should end up with your buttons
labelled in the following manner and with the proper instance names assigned to them.
We are going to add the actual Content to our website and we will do that frame by frame. Unlike our previous two layers,
this layer is going to have different content in each of the frames. We are going to achieve this by creating a
separate keyFrame in each of the frames of this layer. We are going to start up with first section of our website,
the Home page. To begin editing clicking once on the name of the Content layer to ensure that you are editing this layer,
then right-click the second frame on the layer and select Insert Blank KeyFrame. Once you do that you can use the Text
Tool to write an introductory text for your website.

Adding content to the other sections goes in the same way, right-click the next frame and select Insert Blank Keyframe,
then use the Text Tool to write something on that page. You can put any sort of content in this frames whether they are
vector shapes, bitmaps, text of whatever.
We have done the Home and About sections, repeat the process we did above to do the Links and Contact sections. Your
timeline should end up with all the Content layer filled up the way it does below.

The final step to complete all of our content assets is the frame labeling process. Labeling frames is not necessary for
navigating through a movie clip using ActionScript as you can use frame numbers, but using labels makes thing much easier
because you do not need to figure out what the frame number is. We are going to put the labels on the same frames as our
content. To label the first actual frame of our website which has the 'Home' content, simply click on Frame 2, and then
access the Properties Inspector and type Home as the Frame Label.

Repeat this process for all the other frames, label them About, Links, and Contact. Once you are done you should notice a
red flag icon on each of your labeled frames, this simply means that this frame has a label.

All of our content is now set and ready for us to make it come to life using ActionScript 3.0.

Coding the Website Using ActionScript 3.0

We are going to attach all of our code to a single new keyframe on our Action layer, click once on the Action layer and then
simply right-click the second frame on the Actions layer and select Insert Blank KeyFrame. Right click this frame and
select Actions to open up the Actions panel and start coding.

CODE:

stop();

function goHome (e:MouseEvent):void{

gotoAndStop("Home");
}
home_btn.addEventListener(MouseEvent.CLICK, goHome);

function goAbout (e:MouseEvent):void{

gotoAndStop("About");
}
about_btn.addEventListener(MouseEvent.CLICK, goAbout);

function goLinks (e:MouseEvent):void{

gotoAndStop("Links");
}
links_btn.addEventListener(MouseEvent.CLICK, goLinks);

function goContact (e:MouseEvent):void{

gotoAndStop("Contact");
}
contact_btn.addEventListener(MouseEvent.CLICK, goContact);

This completed the entire code of our basic Flash website. You can now test your website by going through Control>Test
Movie, or alternatively pressing Ctrl+Enter.