Creating a Basic Flash Website (AS3 Version)

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner

This tutorial will teach you how to create a very basic Flash website with three pages and a preloader. This tutorial will not use any advanced ActionScript, but will introduce you to many concepts such as:

  1. Creating a basic preloader.
  2. Adding functionality to buttons.
  3. Using frame labels and the gotoAndStop() method.

And all of that in ActionScript 3.0. Here is an example of the outcome of this tutorial:

We have previously published an older tutorial for ActionScript 1/2 on how to create a Simple Flash Website. You can view it if you are interested in learning more about the older version of ActionScript.

Our website will be made up using several simple frames which we will be switching between using the gotoAndStop() method.

Our tutorial will be divided into three sections:

  1. Setting up the movie and timeline.
  2. Creating all the graphical content.
  3. Writing the ActionScript 3.0 code.

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 framerate and white for the background. You may change these as you please by accessing the Properties Inspector on the bottom of the screen.

Basic Flash Website - Properites Inspector

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.

Basic Flash Website - Add Layers > Basic Flash Website - 4 Layers

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.

Basic Flash Website - Layers Labeled

Our movie and timeline is now set. We are going to add content to each of our frames in the next section of our tutorial.

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.

Basic Flash Website - Timeline Sections

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 labeled Content then pick the Text Tool and write Loading in the middle of the stage.

Basic Flash Website - Text Tool "Loading"

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 Actions panel. 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);

}

}
This code is explained in our AS3 Flash Preloader Tutorial. Please review that tutorial to learn about how this code works.

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. Simply right-click this image and select Copy, we are going to paste it in Flash later.

Basic Flash Website - Background

Back in Flash, we are going to work on our website sections now. 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.

Basic Flash Website - Background Frame Expanded

To add the background to this part of our website simply now right-click the stage and select Paste (assuming that you have copied the image above!), 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.

Basic Flash Website - Background Inserted Basic Flash Website - Lock 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 Title layer 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.

Basic Flash Website - Buttons Layer Expanded

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. Component 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.

Basic Flash Website - Buttons Placed on Stage

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.

Basic Flash Website - Components Parameters Tab

An Instance Name is a reference to an object that can be used to manipulate this object using ActionScript. Instance Names in ActionScript are case-sensitive and cannot start with a number. You can learn more about Instance Names by reading our tutorial on Variables and Data Types.

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 labeled in the following manner and with the proper instance names assigned to them.

Basic Flash Website - Buttons Labeled and Instance Named

The final thing to add to this layer is the title of the website. Use the Text Tool to type something above your buttons, I wrote My Super Simple Flash Website. You can write whatever you want and use whatever font you wish to use here.

Basic Flash Website - Title Written

We are done working with this layer, finish it off by locking it.

Basic Flash Website - Lock Buttons Layer

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.

Basic Flash Website - Add a Blank Keyframe to the Content Layer Basic Flash Website - Content for Home Section

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.

Basic Flash Website - Second Blank Keyframe Basic Flash Website - About Section

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.

Basic Flash Website - Content Layer Done

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.

Basic Flash Website - Select Home Frame Basic Flash Website - Home 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.

Basic Flash Website - All Frames Labeled

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.

Basic Flash Website - ActionScript Frame

Our code is going to have two main tasks (1) stop the movie from playing endlessly, and (2) make the buttons move to different frames in the Flash movie.

Doing the first is pretty easy. All we need to do to stop our movie from automatically playing is use the stop() method:

stop();

Making our buttons do something is a tiny bit more complicated than that. Essentially, in order to make any object reach to an event in Flash you must (1) create an event listener function with the command you want to execute, then (2) attach this function to the object you want to interact with. The general code for this procedure is as follows:

function listenerFunction (Event):void{
//statements;
}

object.addEventListener(Event, listenerFunction);

So for example, if we want to make our home button go the home frame, we must first create the listener home that will execute this action:

function goHome (e:MouseEvent):void{
gotoAndStop("Home");
}
The goAndStop() method is used to move to another frame on the timeline. It can be used with literal frame labels as shown in the example above or with frame numbers, e.g. gotoAndStop(2);.

And to make our button actually do this code we must attach this listener function to the button using the .addEventListener method:

home_btn.addEventListener(MouseEvent.CLICK, goHome);
ActionScript 3.0 provides various events other than Mouse Events such as Keyboard Events, Focus Events, and Text-Input Events. Check the Flash ActionScript Reference for more info on these.

ActionScript 3.0 provides various events for mouse actions and other events as well. However, we need only to use the mouse events for this tutorial. To apply the previous code to our movie we simply add the event listener function and attach it to the home_btn by adding the code below the stop() method:

stop();

function goHome (e:MouseEvent):void{
gotoAndStop("Home");
}

home_btn.addEventListener(MouseEvent.CLICK, goHome);

Our home_btn should now be working, we need to create similar code for each of our other buttons, we are going to do our about_btn, we must start off by creating a goAbout function and then attach this function to the listener.

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);

That must have been easy for you to do. We are going to repeat this for the other two buttons now:

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.

This concludes our tutorial. You can download the end result source file from here. I hope that it helped you learn the basics on how to create a simple Flash website. Feel free to post any questions you have on the Oman3D Forum.

- End of Tutorial.