Creating a Simple Flash Website

By Blue_Chi | Flash 8 | Beginner | September 28th, 2006

This tutorial will teach you how to create a simple flash website that has three sections. We are
not going to use any advanced ActionScript and will rely only on the GotoAndPlay method to
control our movie clip. You can view an example of what we're going to create in the Flash
movie below.
This tutorial uses ActionScript 1/2. If you would like to learn how to create a similar project
using ActionScript 3.0 then check out our other Basic Flash Website tutorial.

Setting Up the Stage

Start off with a new Flash movie, access the Properties Inspector to set the dimensions of the
movie to 600x400px, the background color to white, and the frame rate to 12 fps.

On the timeline, create four layers and name them Background, Content, Buttons, and Actions.
Place them in the order illustrated in the image below.

Creating a Preloader
We are not going to discuss how this works as the topic was covered in a previous tutorial which
you can check to learn more about preloaders. We'll use a very basic preloader that shows the
word Loading while the movie loads. To do this, click once on the name of the layer labeled
Content, and then right-click the second frame on that layer and select Insert Frame. Now use
the Text Tool to write the word Loading on the scene. Once you have the word Loading written
on the stage somewhere, you can change the font and the size of it through the Properties
Inspector, choose whatever suits your taste. Make sure that the word is placed in the center of the
scene. (Hint: Use the Align Panel Ctrl+K)
That should do the visual part of the preloader, back to our timeline, right-click the second frame
in the layer labeled Actions and select this time Insert Keyframe. Now right-click the same frame
once again and select Actions to open the Actions Panel. Paste the following code to complete
your preloader:
if (_root.getBytesLoaded() != _root.getBytesTotal()){
gotoAndPlay(1);
}
You can learn more about Preloaders from this tutorial.

Adding the Content

Our website is going to have three sections (i.e. pages), we are going to put these different
sections in three separate frames, those will be the third, fourth, and fifth frame on the timeline.
The first thing that we'll add to our scene is the background, we'll make this extend through all
the three frames we're going to use for content. Click once on the name of that layer first, and
then Right-click the third frame on the Background layer and select the Insert Keyframe
command, we'll expand this keyframe all the way to the fifth frame by right-clicking the fifth
frame and then selecting the Insert Frame command.
We'll now insert our background image, save this JPEG and your desktop, simply go through
File>Import>Import to Stage and then select your image to import it onto the stage. You will
have to place it in the middle of the stage.
Moving on to the actual content, click on the name of the layer labeled Content and then right-
click the third frame on that layer and select the Insert Blank Keyframe command. This frame
should contain the content of our first section. We are going to have an introduction text in here,
select the Text Tool from the toolbar and write whatever text you want to have in the page. You
can just write Welcome in a huge size.

We will now add the content for our second section, this was titled 'Tutorials' in the example
above. Right-click the fourth frame on the same layer you've just edited, the Content layer, and
then select the Insert Blank Keyframe command. Use the text tool to write different text in this
page. I simply wrote, 'tutorial links coming soon!'.
We will repeat the last step for the fifth frame on the Content layer to add the content of our third
section. Right-click the fifth frame on that layer and then select the Insert Blank Keyframe
command. Use the text tool to write 'Click here to visit our Forum'. You can any part of this text
a link by simply selecting the desired word and then accessing the Properties Inspector and then
assigning a URL in the URL field.

Creating the Buttons

Our buttons will remain on the stage all through out the different sections the user views, for this
reason we will place them on a frame that spans across the three frames that have our content.
Click once on the name of the layer labeled Buttons and then Right-click the third frame on it to
select the Insert Keyframe command. This keyframe shall span all the way through the fifth
frame, so right-click the fifth frame and select the Insert Frame command.

It is now time to add the actual buttons, we will use the button component instead of creating our
own. Access the Components Panel by going through Window>Components. You will find the
button component under the User Interface category, simply drag and drop three copies of it onto
the stage.
Select the button at the top and then access the Properties Inspector and click on the Parameters
tag. You will have to change the label of the button to something descriptive, I used Home. You
will then also have to assign an instance name to the button so that we can control this button via
ActionScript. I assigned the name home_btn to it. (Notice: Instance names are case-sensitive)

Repeat the last step for the other two buttons, label the second one Tutorials and assign the
instance name tutorials_btn to it. Label the third one Forum and assign the instance name
forum_btn to it.
ActionScript
All the visual elements of our little website are now present, we need to write the command
codes to tell those buttons to go to the specified section when clicked. Right-click the third frame
in the layer labeled Actions and select the Insert Blank Keyframe command. Once you have a
new keyframe in their, right-click that frame and then select the Action command to open up the
Actions panel. We are going to tell our movie to stop at the home frame (frame number 3) and
then tell the buttons to go to and stop, each at the specified frame for its content. You can do this
by simply pasting the following code in the Actions panel:
stop();
home_btn.onRelease = function () {
gotoAndStop(3);
}
tutorials_btn.onRelease = function (){
gotoAndStop(4);
}
forum_btn.onRelease = function (){
gotoAndStop(5);
}
I think that the code is self-explanatory, you have done it, test the movie to see our simply
website functioning!
This concludes our tutorial, I hope that you learnt something helpful, please feel free to post at
the Oman3D Forum if you have any questions regarding this tutorial. You can read the Tutorial
for Creating a Portfolio Scene in Flashor the Tutorial For Creating a Dynamic Portfolio in Flash
for anybody wishing to learn other relatively advanced techniques for flash navigation.
- End of Tutorial

Creating a Numeric Bar Preloader in Flash

By Blue_Chi | Flash MX / Flash 8 | Beginner

Having a preloader is necessary in all Flash movies displayed on the web as they stop the movie
from being played before loading all the data and it also informs the user how much data has
already loaded. This tutorial will teach you how to create a very simple numeric bar preloader
that could be used in almost any movie. You are not required to have any special ActionScript
knowledge to be able to follow this tutorial.

How does it work?

The idea behind a preloader is pretty simple, we are using ActionScript to retrieve the number of
bytes that has been loaded and then use this value to create a percentage that is assigned as the
width of the loading bar. This tutorial will teach you how to do this in Flash.
Starting off
Start off by creating a new flash movie, you can use the default settings, 550x400 px for the
dimensions, 12 fps as the framerate and white the background.

Setting up the Timeline

Create two layers on the timeline, name the upper one Actions and the one below Contents.
Right-click the second frame on the upper layer (Actions) and select Insert Keyframe, and then
Right-click the second frame in the lower layer (Contents) and select Insert Frame. This makes
the contents of the lower layer span across the first and the second frame, while the upper layer
has different contents in the first and the second frame.
Creating the Bar
We are going to put our bar in the Contents layer, so click once on the name of the layer labeled
Contents and then use the Rectangle Tool to draw in the center of the stage a bar similar to the
one illustrated in the image below, you'll have to check before you make your bar that there is a
fill color and an outline colour selected in the lower part of the toolbar.

We will now have to transform our bar into a movieclip that we can later manipulate using
ActionScript. We are going to separate it from its outline so that the outline remains unaltered.
Use the Selection Tool to select ONLY THE OUTLINE of our bar.
We will now transform our outline into a movie clip. Simply hit F8 on your keyboard to show
the Convert to Symbol window, select Movie clip and name your symbol Outline.

That should do the outline part, select the colored bar body now using the Selection Tool and hit
F8 to open the Convert to Symbol window. We are going to change the Registration Point, i.e.
the place from which our bar is going to grow bigger, select the point on the left side of the
square. Select Movie clip, name the symbol Bar and then hit OK.

A small point that we need to do now is make sure the outline appears above the bar, because of
the order in which we created the objects, the outline would be lower because it was created
earlier. Simply use the Selection Tool to select the bar symbol and then hit Ctrl and the Down
Arrow to make the bar go below the outline.
This is our final step for the bar, while the colored bar body is still selected, access the Properties
Inspector and assign an instance name to it. This makes it possible for us to manipulate this
object using ActionScript. Use the instance name bar_mc.

Creating the Text Field for our Numeric Preloader

This one is easier, use the Text Tool to create a text field below the bar and then access the
Properties Inspector to change the Text Type to Dynamic and assign the instance name
loader_txt to it. I have set the font to _sans, the font size to 12px and the color to black.
Adding the ActionScript
Right-click the second frame on the upper layer labeled Actions and select Actions. Copy and
paste the code below to make our preloader functional.
if (_root.getBytesTotal() != _root.getBytesLoaded()){
gotoAndPlay(1);
}
bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;
loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";
Note: You can learn more about the 'if' conditional by reading this tutorial.

The first part of our code tells the movie to go back to the first frame if the amount of data
loaded does not equal the total amount of the data the file contains. We later set the horizontal
scale of our bar to the percentage of data loaded, and then used the rounded value as the text
value of our text field.
Our preloader is now ready to use, you can insert a keyframe on the forth frame of our content
layer and then import a large image to the stage by going though File>Import>Import to Stage.
You can then test your movie Control>Test Movies and then simulate download by going
through View>Simulate Download.
This concludes our tutorial. I hope that you learnt how to create a preloader that you could use
for all of your flash movies, you can download a sample FLA of the end result through this link.
Please feel free to post your comments, questions or suggestions at the Oman3D Forum.
- End of Tutorial.