Making a Flash Website

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 but everything I do should work on Windows computers too.

Finished Result - Click here. May not look amazing but you just need to know the basics... then apply them to your layouts

First 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 action scripts weren't 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 little box comes up change the size to 750x550px.

Click to enlarge

Now that you have the size and setup all organised you can begin 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 properties 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

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 you'll 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 - this is what the button will look like when it is pressed down. Most people don't use it since the button is usually just pressed down for a fraction of a second :O
Hit... I don't know 100% what this does. Maybe its the how the button looks after its pressed down, 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 property 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 top (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 directly under the lock and is on the same row as the background layer. This will lock your background layer so that you wont accidentally 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 content 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.

Click to enlarge

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.

Here's 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 practice 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!!!) Here's what my layout looks like so far

Click to enlarge

Adding Pages

A lot 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.

Don't 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. Don't 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. (don't 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 selection 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

Click to enlarge

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.