FLASH WEBSITE TUTORIAL
SETTING UP LAYERS
1. Open Adobe Flash Professional CS6 program. Go to Create
New>ActionScript 3.0
2. You will change the dimensions of the stage to commonly used website
dimensions. Right-click on your stage and go to Document Properties.
Change the dimensions to 1024 (width) x 768(height). Change background
color to #000000. Click OK.
3. For the website, you will create your basic template and 4 different pages.
Create 7 layers and rename them as shown:
The Template layer is where your web design background will go. Texts
converted to button symbols will go in the Home, About Us, Services, and
Contact Us layers. The stop action scripts will be in the Actions layer. And the
content for each of your web page will be in the Content layer.
4. In the Content layer, you will need to put 4 keyframes. The first frame will
be for Home, second frame for About Us, third frame for Services, fourth
frame for Contact Us. Later on, you will add the content you need for each
of these layers.
5. In the Actions layer, insert 4 keyframes. In these keyframes, you will add
the “stop” action script later on. A stop is an instruction in the actionscript
program language that tells Flash to pause on a particular frame rather
FLASH WEBSITE TUTORIAL
than continuing to the end of the animation.
6. Go to the Contact Us layer. Right-click and Insert Frame on frame 4.
Difference between keyframe and
frame is keyframe have little circle
drawn on them and frame have
little square. Also, keyframes
represents a change in the content,
and inserting frame keeps the
content the same.
7. For Services, About Us, Home, and Template layers, right-click and Insert
Frame. This is how your layers should look right now:
CREATING THE WEB TEMPLATE
1. Right-click your Template layer and click Lock Others. This will lock all of
your layers except for the Template layer. By locking your layers, you are
preventing any accidental changes.
2. In the Template layer, you will create a gradient colored background for
your website. Click the rectangle tool. Then click the color swatch. Switch
from Solid color to Linear gradient:
FLASH WEBSITE TUTORIAL
3. Create the gradient rectangle on your stage:
4. Change the direction of the gradient by using the Gradient Transform Tool.
Simply rotate the rotation control to change the direction of the gradient:
FLASH WEBSITE TUTORIAL
5. You can also change the color of the gradient by double clicking on the
sliders and picking the color that you want from the Swatches panel:
6. Create another rectangle for the navigation menu bar. Use the gradient
transformation tool to adjust how the gradient looks:
7. Think of a good company name. On the top left of your web layout, create
either a text or logo:
FLASH WEBSITE TUTORIAL
MAKING TEXTS AND BUTTON SYMBOLS
1. Select the Home layer and unlock it. Create a text called home. Position it
on the navigation menu bar:
2. Select the Home text. Press Ctrl+C to copy. Lock the Home layer. Unlock the
About Us layer. Press Ctrl+Shift+V to paste in place. While holding shift,
move the copied text to the right and rename it About Us:
3. Create Services text in the Services layer. Create Contact Us text in the
Contact Us layer. Make sure you put the following texts in their
corresponding layers :
4. Select the Home text and convert it to a button symbol. Rename the button
home_btn:
FLASH WEBSITE TUTORIAL
5. Select the Home text, give it an instance name of home:
The reason you are creating instance names is because you will be
controlling the instance names with ActionScript.
6. Select the About Us text and convert it to a button symbol. Rename the
button about_btn. Give it an instance name of about.
7. Select the Services text and convert it to a button symbol. Rename the
button services_btn. Give it an instance name of services.
8. Select the Contact Us text and convert it to a button symbol. Rename the
button contact_btn. Give it an instance name of contact.
9. Go ahead and test your buttons by going to Control>Test Movie>in
Browser. Right now, you are not going to see any content when you click on
the menus because you haven’t done that part yet. 
CREATING CONTENT
1. Now it’s time to create the content for your web pages. Your Content layer
has 4 keyframes. Each of the keyframes will have different contents in
them. The first keyframe will have the Home content. The second keyframe
will have the About Us content. The third keyframe will have the Services
content. The fourth keyframe will have the Contact Us content. Lock all of
your layers EXCEPT for the Content layer. This prevents you from
accidently making unwanted changes to the other layers you are not
currently working on.
2. Select the first keyframe of the Content layer. This is your Home content so
type a paragraph for an introduction for your company. Import a picture to
FLASH WEBSITE TUTORIAL
the library and drag it onto your stage. This is how my home page look like:
3. Select the second keyframe of your Content layer. This is your About Us
content so type in a paragraph about your company and add photos. This is
how my About Us page look like:
4. Select the third keyframe of your Content layer. This is your Services
content so type in a paragraph about what your company offers. This is
how my Services page look
like:
FLASH WEBSITE TUTORIAL
5. Select the fourth keyframe of your Content layer. This is your Contact Us
content so provide some contact information about your company. This is
how my Contact Us page look like:
ACTIONSCRIPT IN FLASH
1. Go ahead and test how your website looks like right now. Go to
Control>Test Scene. You will see that the keyframes you have made are
playing continuously.
2. To make the keyframes stop for each web content, you will create some
actionscripts in your Actions layer. Unlock your Actions layer. Select the
first keyframe of your Actions layer. Right-click and go to Actions. Type in
stop();
3. Select the 2nd keyframe of your Actions layer. Enter the script stop();
4. Select the 3rd keyframe of your Actions layer. Enter the script stop();
5. Select the 4th keyframe of your Actions layer. Enter the script stop();
6. Test your scene again by going to Control>Test Scene. You will see that your
keyframes are no longer being played. But if you click on your menus, you
are not being taken to your web pages. You will have to add a script for
this.
7. Lock your Actions layer because you are done adding script to this.
FLASH WEBSITE TUTORIAL
8. It’s time to add scripts to your Home, About Us, Services, and Contact Us
layers. So unlock these layers.
9. Right-click your keyframe on your Home layer, go to Actions and add this
script:
home.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler1);
function mouseDownHandler1(event:MouseEvent):void
{
gotoAndPlay(1);
}
For this code, you added a listener to your home button(remember you
gave this button an instance name of “home”?). When the listener hears
your mouse click the “home” button, it will go and play keyframe 1. So this
is what that code means.
10. Right-click your keyframe on your About Us layer, go to Actions and type
this script:
about.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void
{
gotoAndPlay(2);
}
For this code, you added a listener to your about button. When the listener
hears your mouse click the About Us button, it will go and play keyframe 2.
11.Right-click your keyframe on your Services layer, go to Actions and add this
script:
services.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler3);
function mouseDownHandler3(event:MouseEvent):void
{
gotoAndPlay(3);
}
For this code, you added a listener to your services button. When the
listener hears your mouse click the Services button, it will go and play
keyframe 3.
FLASH WEBSITE TUTORIAL
12.Right-click your keyframe on your Contact Us layer, go to Actions and type
this script:
contact.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler4);
function mouseDownHandler4(event:MouseEvent):void
{
gotoAndPlay(4);
}
For this code, you added a listener to your Contact Us button. When the
listener hears your mouse click the Contact Us button, it will go and play
keyframe 4.
13.Test your scene by going to Control>Test Scene. Your buttons should now
be working. If not, double-check your scripts, make sure it is exactly the
same as the ones I have here in the tutorial. Also, make sure you gave each
of your button an Instance Name in order to work with the script. Go back
to Making Texts and Symbols section of this tutorial.
CENTERING YOUR WEBSITE AND PUBLISHING IT
1. If you have not saved your actual Flash file yet, do so now. Go to File>Save
As. Save it as your first name and last name. Remember where you are
saving this file.
2. If you test your scene, you probably see that your website is on the top left
of your internet browser. To center it, go to File>Publish Settings. Click
HTML Wrapper and set Size to Percent. For Output file, save your .swf and
HTML file in the same location where you saved your Flash file. Check on
Enable JPEG deblocking to make jpeg
pictures look smoother:
FLASH WEBSITE TUTORIAL
3. Click Publish to publish both your SWF and HTML files.
4. Rename your SWF as your first name and last name and upload the SWF at
3dteacheronline.com
SETTING UP YOUR WEBSITE LIVE ONLINE
1. This part of the tutorial is NOT required. But if you would like to make your
website live online so everyone can view it, go to www.000webhost.com
and get a free web host to host your site. You will need both your SWF and
HTML files and upload it in a directory folder. Go to
http://youtu.be/P5zUtmEIJ3w for step by step instructions on how to
upload your website.