Making a Flash Website

by Force
Tuesday, 2nd August 2005

Alright, Finally I have decided to sit down and type this big tut on how to make a website in flash. I am using Flash MX 2004 and working on a mac os x (dads comp) but everything I do should work ok in PC computers too. To see the completed site Click Here.

1st things first. Open up Flash MX 2004 and check that you are using ActionScript 2 (I originally spent ages trying to find out why my actionscripts werent working and I found out that this was because I was using ActionScript 1 !! ). To check that you are using ActionScript 2 go to File>Publish Settings Go to the Flash tab. Now check that your ActionScript version is set to "ActionScript 2.0". Then press ok. Also when you first open flash you probably would have noticed loads of boxes open along the right side. You can close them all down. Go to Windows>Library and keep that library box open.

For the purpose of this tut I will be making a small site which will suit people with 800x600 screen resolutions. 1st thing you will have to do before designing will be to setup the canvas size. In your properties box (Windows>Properties) click on the size (which should be in pixels) and when the lil box comes up change the size to 750x550px.



Now that you have the size and setup all organised you can beigin to make your site. The site I am creating for the purpose of this tutorial will be fairly simple.
To apply a bg color for the background simply go to the porperties panel and change the color of the background like in the picture -

Making Buttons

Ok now you have your background done. Easy so far, right? Now lets try making some buttons for the site. This is easy. Just follow the instructions -

1. Go to Insert>New Symbol. Make the symbol a "button" and give it a name of button.



You should have noticed that in your library the button symbol you created shows up. Now you need to draw your button. My button is going to be a circle. You can make your button look like whatever you want. I used the Oval tool. 1st youll need to understand how the button symbol works. Take a look at the picture-



You see those tabs? Let me explain what the basically mean.
Up - This is what you button will look like normally (when no mouse is over it).
Over - This is what you button will look like when the mouse is placed over it.
Down - Thiis is what the button will look like when it is pressed down. Most people don't use it since the button is usualy just pressed down for a fraction of a second :O
Hit - um... I dont know 100% what this does. Maybe its the how the button looks after its pressed down,rofl.... but I have never used it... so lets continue on with the tut before you start to think your following a tut by someone that has no idea what their doing!!!!

Now all you need to do is draw your button. First of all draw what you want the button to normally look like. Then go to the Over tab. You see the white box area BELOW the over tab. Right click on it and go to "insert keyframe".



Now change your button the way you want it to look like when someone puts their mouse over it. I changed the color of my button. To do this I picked the "selection tool" (this comes up when you press "v"). I then clicked on the part of the button that i wanted to change the color of. It should be highlighted now. The property panel should change to that of the button. Now I can change the color of the button from the propert panel like this-



Now... forget about the down tab and insert a keyframe under the HIT tab. So now the tabs should look like this-



Now, Return to your stage. To do this click on the scene 1 tab at the tob (it is circled in red in the pic above).

Site Layout

Now make a new layer.



Just click on the button that is circled in red in the pic. You see your "Layer 1", rename that to "background". Press the circle that is dircetly under the lock and is on the same row as the background layer. This will lock your background layer so that you wont accidently change it or move it.
Rename the new layer that you made (Layer 2) to "buttons".
Make another new layer and call it "text".
Make another layer and call it "content".
Make one final layer and call it "actions".

This is what my layers now look like-



Now all you need to do is "draw" you site up. On the content layer draw your contnent box. Since you are drawing this content box on your 1st frame, pretend that you are drawing your homepage. So on the CONTENT layer draw your content box (I used the rectangle box to draw my content box) and add your homepage text to your text box ( Use the text tool). Make sure that when you are adding text that you set it to "static text". This is very important when you are adding text to the buttons. You may want to set the text for the sites content pages to "input text" so that you can copy and paste the text from it. To swap your text modes simply change its property in the properties box.



Now go to your buttons layer. Remember earlier when you made your button? You should be able to see it in your library panel (windows>library). Make sure your on the BUTTONS layer. Drag the button symbol from the library onto your canvas. For the sake of this tut i will add 3 buttons. So just drag the symbol from the library panel onto your canvas 3 times.

Heres a neat trick. Once you have the buttons on your canvas. Use the Selection tool (black arrow on the top left) and draw a box around the 3 buttons. Press ctrl+K. A small box should pop up. Now press the buttons you need to align the buttons. This saves time and is more prcise than manually moving the buttons around.



Go to the TEXT layer. It should be above your buttons layer. Use the text tool and add the text which is to be on top of the buttons. Remember to set the text mode to static. On the text layer you could add a small text made header (just make sure its static text!!!) Heres what my layout looks like so far -

Adding Pages

Alot of people make their pages on external swf files. For this tut, the pages will just be made on a different frame. We will use actionscript to call up each frame when it is needed.Go to the CONTENT layer. On the 2nd frame add a keyframe.



Dont panic when everything else dissapears!!! This happens because your viewing everything on the 2nd frame. Everything you have done so far is on the 1st frame. Dont worry about it yet. Just change the text the way you want it to appear on a new page (in my case it will be on the about page since my 3 pages are home,about and contact). Once you finish adding the text .. add another keyframe on the frame after and add text (make sure you are on the content layer for all this). Once you have your page content all made go to your other layers and on their third frames add a new keyframe. (dont add a keyframe on the actions layer or the background layer). Now your layers should look something like this-



You are now almost ready to add your actionscript. Lets name each of the buttons.Get the slection tool (V). Go to the buttons layer. Make sure you are on the 1st frame. Click once on your button. The button properties should now be displayed in the properties box. Change the instance name to "whateveryouwant_btn". See what I mean in the picture below -



Do this with any remaining buttons. Since I made three buttons, one for the home page, one for the about page and one for the contact page, I named them - home_btn, about_btn and contact_btn. Now you are ready to add the actionscript. The action script will be what makes the pages change when you click on each button.

---

Written by Force - force@apdz.com