[Tutorial] Simple Flash Website

This is a very simple, stripped flash tutorial which will require almost no knowledge of Flash.
I used Adobe Flash CS5, it doesn't differ too much from older versions.

If you want to use unique buttons or own designs, make sure to make everything beforehand. Images, buttons, backgrounds, logos, whatever your site will require.

Let's start by opening up Flash, open up an Actionscript 3.0 document.
• Change the workspace to Designer if it already isn't.
• Change the size of your document, I prefer 1000x600 but it's totally up to you, I feel this is a rather perfect size for a regular website sheet, you can change the background color as well.

First steps.

• Make four layers, you can name them if you don't want to be confused.
• Go to File > Import > Import to Library. Select all images you will need for your website.
• Now we'll start adding our content. Throw in the logo, background and other still images on the background layer.
• You can change the size from the left and align the image from the right.

Stuff locations.

Alright, now we need buttons, don't we?
• Select the menu layer, the text tool and create yourself buttons for all the sections.
• If you decided to make your own, just drag and position them on the stage.

Stuff locations.

Now, if you want, you can duplicate all the buttons and change the colour, we'll add that to the hover section later, totally optional.

• Select a button, go to Modify > Convert to Symbol, or press F8.
• Name it whatever you want. The type should be button. Ok it.
• Do this with all of the buttons, the hover ones as well if you decided to make them.
If you didn't, skip this.
• Double click on a button, there should be a new timeline up, rightclick over and insert a keyframe.
• Now drag the hover button on the normal button from the library. Make sure you have the over tab selected.
• Do this with every button. Doubleclick the stage to go back.

• Alright, now click on a button, and in the upper left side you should see a field for an instance name, name your buttons(one at a time, not all) whatever you wish.


Let's start adding content then.
• Select the keyframes of pages, menu and bg, copy them and select the next three corresponding frames and paste them. Repeat this for as many pages as you need.

• Okay, now select the first keyframe of the pages layer, on the left side, under label, name it page1 or whatever you wish.
• Then add the text and images you want to be displayed in that section.
• Repeat this for every keyframe.

Important stuff, again.

Then all that's left is adding the actions (:

• Select the frame in actions and press F9, or rightclick and select actions.
I won't go into detail about this part.

• Remember to change the button and page names to yours!

Code:

---

stop();

function buttonname1_clicked(e:MouseEvent):void{
        gotoAndStop("pagename1");
}

function buttonname2_clicked(e:MouseEvent):void{
        gotoAndStop("pagename2");
}

function buttonname3_clicked(e:MouseEvent):void{
        gotoAndStop("pagename3");
}

function buttonname4_clicked(e:MouseEvent):void{
        gotoAndStop("pagename4");
}

buttonname1.addEventListener(MouseEvent.CLICK, buttonname1_clicked);
buttonname2.addEventListener(MouseEvent.CLICK, buttonname2_clicked);
buttonname3.addEventListener(MouseEvent.CLICK, buttonname3_clicked);
buttonname4.addEventListener(MouseEvent.CLICK, buttonname4_clicked)

---

Should look like this.

Close the window and enjoy!
You just made a flash website o:

Test your site = Control > Test Movie > Test

Now, you can either wrap the .swf in HTML yourself, or just go to File > Publish and it'll make you both a HTML and a .swf file, note that the HTML file Flash generates doesn't change the alignment of the flash.

Here's the site.
Here is my .fla file if you want to use it as a template, Hotfile.com: One click file hosting: flashwebsite.fla

Critique and comments are always welcome, hope you learned something (: