Flash Website Tutorial

Creating a Preloader

Step 1.

To start off, create a new Flash document with the following settings.

Step 2.

Create a text field on the 1st frame with the text "loading", using the settings shown in the image below

Step 3.

Convert the text field (F8) to an MC (Movie Clip Symbol), named "loading" and with the registration point set to the top left.

Step 4.

Double click on the "loading MC" and create another text field to the right, with the text "99%". As can be seen from the properties panel, shown below, the text has been made "dynamic", and a Var (variable) has been given to it called "p". When the Flash site is preloading this variable will hold the percent number that has loaded so far, and it'll be displayed in the dynamic text field.

Step 5.

Next, go back to the root timeline and click on the "loading" MC. Open the actions panel and add the code below. This bit of script checks to see how much of the Flash site has loaded and displays the percentage in the text, via the "p" variable. Once the whole of it is loaded (loaded == total), the timeline will go to frame 2, where we're going to create the actual site.

Step 6.

Name the layer, with the "loading" MC on, "MC" and add a new layer called "script". While the first frame of the "script" layer is selected, add a stop() action in the actions panel. This is to stop the timeline from going any further, while the site loads.

Creating the Header

Step 7.

So now that the preloader has been created, choose the rectangle tool (circled in red). Set the stoke color (circled in blue) toempty (circled in black).

Step 8.

Set the fill color to cream (#E0D8CA) and create a rectangle on the 2nd frame.

Step 9.

From the properties panel, apply the settings shown below.

Step 10.

Convert the rectangle into an MC called "site", where we will be adding all the Flash site movieclips.

Step 11.

Double click on the site MC and convert the rectangle into another MC called (header background.

Step 12.

Go in to the header_background MC and name the bottom layer "BG" and a new layer squares. Import (File > Import > Import to Stage) the squares image onto the new layer.

Step 13.

So that's the header done, we just need to create a background, so go back to the site MC.. Name the layer with the header on "header" and create a new layer called BG.

Step 14.

Create a grey rectangle

Step 15.

Make the rectangle the size of the remaining white part.

Creating the Menu

Step 16.

Before the menu is created, make 3 new layers, as shown below. Import (File > Import > Import to Stage) the bar graphic onto the bar layer,

Step 17.

Position the graphic and expand it, as shown in the settings below.

Step 18.

Convert the bar to an MC called "menu_bar".

Step 19.

For the menu we are going to create a generic button MC and then use it to create each individual button. On the menu layer create a yellow (#E2BE20) rectangle, with the dimensions showns below. I have zoomed in to 200% magnification to do this.

Step 20.

Convert the rectangle to an MC called "menu"

Step 21.

Go into the menu MC and convert the rectangle into another MC called "button".

Step 22.

Name the layer yellow

Step 23.

Double click on the rectangle tool and set the corner radius to 10. Create a grey (#898989) rectangle on the "grey" layer. As you can see below, the bottom rounded corners are masked by the yellow layer.

Step 24.

So now that we've created a button MC, we need to duplicate it for each button. Go to the Menu MC, click on the button MC and copy it (edit > copy).

Step 25.

Paste the button in place. This will place the copy directly on top of the original button MC. The is useful becuase the copy will be in lign we the original, so all you need to do is nudge it to the right with the arrow keys

Step 26.

As you can see below, i've placed 5 instances of the button MC onto the stage.

Step 27.

Now we're going to convert each button MC instance to a new MC, containing the text. So, convert the 1st button MC into another MC called "home_button"

Step 28.

Go into the home _button and name the layer "button". Create a new layer above called "text" and create the text for the button, using the settings shown below.

Step 29.

Next, go back to the menu MC and select the "home_button" MC. From the properties panel, set the instance name of the MC to "home_button" (circled in red). When we write the action script later, we will use the instances names of the MC's to control them. Continue to give the rest of the buttons an instance name.

Step 30.

Now, go back to the site MC and give the menu MC the instance name "menu"

Adding the Content

Step 31.

For this part of the tutorial we're going to create the content section. First of all make the corner radius 10, set the fill color to grey (#F4F5F5), and then click on the first frame of the content layer.

Step 32.

Make a large rectangle, just above the dark grey layer.

Step 33.

Lock all the layers, apart from the content layer. Use the selection tool (V) to select the part of the light grey rectangle that is above the dark grey one.

Step 34.

Delete the selected area, and you should have something like below.

Step 35.

Convert the rectangle in to an MC called "content".

Step 36.

Give the content MC the instance name "content"

Step 37.

Go into the content MC, name the layer with the rectangle "BG" and create a new layer called "labels. Create a blank key frame on frame 10, by clicking on it and pressing F7, and then create another one at frame 20. Each of these blank key frames will hold the content of a section. Click on frame 10, of the "labels" layer and, enter"home" in the properties panel.

Step 38.

Enter a label for each section every 10 frames. When the action script is written in part 5, the labels will be used to tell the playhead to go to that specific section.

Step 39.

Next, create a layer for the content and create a blank key frame at the same position as the labels, for each section. Place a label on from 1 called "start". This is needed for the drawing in animation of the website, when there's no need to show any content. Add some content for the first section, at frame 10. The settings for the body text, that's been created, can be seen below.

Step 40.

The settings for the heading text, that's been created, can be seen below.

Step 41.

Next, add the content for each section. Create a layer called "script" and add a stop() action on the first frame.

Step 42.

Add a simple logo on a new layer.

Writing the Actionscript

Step 43.

Now it's time to write the actionscript, to give the website some functionality. In this part we will write the Actionscript that give the buttons the basic functionality. In the next part

Step 44.

Line 1 - First the content Mc needs to be told to go to the label of 1st page of the site - "home"

Step 45.

Line 2 - 4 - An onPress function is created to tell the content MC to go to the "home" label, when the "home_button" is pressed.

Step 46.

Line 5 - 16 - The rest of the buttons are given onPress functions telling the content MC to go to their corresponding labels.

Making the Buttons Move

Step 47.

In the previous section we made the buttons functional, so when theyre pressed, the section changes. Now we're going to make the buttons slide up when they've been pressed, to make the a little more interesting. This will be done in the same frame as the previous section, but we'll be adding onto the existing code.

Line 1 - The code from the previous section, to tell the content Mc to go to the label of 1st page of the site - "home"

Line 2 - A variable called current s created, which will hold the name of the button when it's pressed.

Line 3 - A boolean variable is created which we will use to see if the buttons needs to be moved.

Line 4 - Each button's Y position will be at 0, but when it's pressed it's going to slide up to position - 10. This value is held in "yMove".

Step 48.

Line 5 - The onPress function from the previous part.

Line 6 - An IF statement is created to check to see if the variable "current" is holding the name of the "this" (home_button). If it is, that mean the button is already at a Y position of -10, so we don't need to do anything.

Line 7 - If the variable "current" is holding the name of the "this" (home_button), we set current's Y position to 0. So if, for example, "current" was holding "media_button" and the home button is pressed, the "media_button" would move to a Y position of 0.

Line 8 - setMove is set to true, so we know that we can start moving the button (more will be explained further below)

Line 9 - the content MC is told to go to the label "home"

Line 10 - Since a new button has been pressed, current needs to be set to "this" (home_button)

Step 49.

Line 13 - 44 - Each button is given the same functionality, but with a different label to go to.

Step 50.

Line 45 - an onEnterFrame function is created, which repeatedly executes the code between the braces {}

Line 46 - Now remember with each button onPress, we are setting "setMove = true"? With the onEnterFrame function we repeatedly check to see if this has happened, so we know when to move it up to -10 Y position.

Line 48 - Now remember with each button onPress, we are setting "setMove = true"? With the onEnterFrame function we repeatedly check to see if this has happened, so we know when to move it up to -10 Y position.

Line 49 - If setMove has been set to true, we now need to check if the button has reach a Y position of -10. If it hasn't we decrease the button (current) by 1 pixel repeatedly(--), until it's reached -10.

Line 50 -52 - When the button has reached -10, we change "setMove" to false, because we no longer need to move it.

Creating the Drawing in Animation

Step 51.

For this part of the tutorial we're going to create the animation sequence at the start, that reveals the website. First we're going to animate the menu bar. So, create a key frame (F6) at frame 15 and then extend the frames of the other layers (F5)

Step 52.

Make the content layer invisible and click on the first frame of the "bar" layer, and use the down arrow key to nudge bar MC, so that it's inline with the grey BG layer.

Step 53.

Right click on any frame of the bar layer in the timeline, and choose create motion tween, So now the bar layer will move up in the animation.

Step 54.

Next, create a key frame (F6), at frame 30, on the "menu" layer, and extend the frames of the other layer (F5)

Step 55.

Drag the 1st frame of the "menu" layer to frame 15.

Step 56.

Move the menu buttons, so that theyre hidden behind the menu bar.

Step 57.

And create a motion tween for the menu layer.

Step 58.

Drag frame 1 of the content layer to frame 30.

Step 59.

Then extend all the frames of each layer to frame 45.

Step 60.

Now we're going to make the content reveal using a mask, So, create a layer called "mask" and make a blank key frame (f7) at frame 30. Use the rectangle tool to create a rectangle, at frrame 30, and the same size as the content section.