about us | contact us | legal
Building a Website - Step-By-Step
Creating a Basic Flash Website (AS3 Version)- Based on Blue Chi's tutorial
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:
- Creating a basic preloader.
- Adding functionality to buttons.
- 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:
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:
- Setting up the movie and timeline.
- Creating all the graphical content.
- 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.
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.
Our movie and timeline are 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 into 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 labeled 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 Actions Panel.
Next, enter the following ActionScript code below into the Actions Panel to program the preloader.
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.
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.
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.
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.
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 top button then access the Components Inspector by clicking the icon shown below...
...or by typing Shift F7. 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.
At this point you also need to assign the instance name to the button by filling in the field on the Properties 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 Orcs, Bloodelves, and Links, and assign the instance names orcs_btn, bloodelves_btn, and links_btn respectively. You should end up with your buttons labeled in the following manner and with the proper instance names assigned to them.
We are now done working with this layer, finish it off by locking it.
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 click 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.
We will now add an image to use for our home page background. Go to File>Import>Import to Stage and select your the home_bg.jpg file. (You can download all the files needed to complete this tutorial in the download the Files section.)
Now that you have the home background image on your stage, you can place it to the right-hand side.
Using the Text Tool, we now add the following text to our home page (shown below).
Adding content to the other sections goes in the same way, right-click the next frame and select Insert Blank Keyframe.
On the new keyFrame, import the orc_bg.jpg image to the stage. Then use the Text Tool to write add the following text description. Repeat this process for the Bloodelves page. You should have these two pages created below.
The completed Orcs page.
The completed Bloodelves page.
Now we have to complete the Links section complete. On the last keyFrame, grab the Txt Tool and type Links. Now click on a blank area on your stage to deselect the text you just created.
Now click again and the Text Tool is activated again. Type in www.worldofwarcraft.com. Using the same method, create two more links, www.flashsteps.com, and www.developphp.com.
We now have the text that will represent our links, but they do not go anywhere yet. Let's fix that. Select the text www.worldofwarcraft.com. Now go to the Properties panel. Under the Properties panel go to the Options section. In the Link field, type in http://www.worldofwarcraft.com, and in the Target field, select the option _blank.
Using the same method, enter the following information in the Links field. Select www.flashsteps.com, and in the Links field for this text type in http://www.flashsteps.jmallott.com (don't forget to select _blank as the target). Finally, select the text www.developphp.com and add the following to the Links field, http://www.developphp.com. (Don't forget to select _blank as the target on this one as well.)
We now have all sections completed. 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 name.
Repeat this process for all the other frames, label them Orcs, Bloodelves, and Links. 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.
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:
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:
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:
And to make our button actually do this code we must attach this listener function to the button using the .addEventListener method:
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:
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 orcs_btn, we must start off by creating a goOrcs function and then attach this function to the listener.
That must have been easy for you to do. We are going to repeat this for the other two buttons now:
This completes 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.
End