How to create a basic layout in Flash CS4

To create a layout in flash CS4, first you need flash CS4 software, ideally I would recommend that you make a layout of what is in your mind on a white paper, as to the size, the color, the font, the navigation links you want, where to place them etc.,

Open the flash CS4 ->File -> New (shortcut key is Ctrl+N)

You will see a white stage, you can change the size and color by clicking on Modify on the main menu and clicking on Document (shortcut key is Ctrl+J)

You can choose the size of your flash CS4 website, here in this example I have chosen 700 pixels width and 500 pixels height and chosen #FFD7BB (beige color as background) with frame rate 30 fps as shown below.

Let us create a background rectangle for the site, so turn on the fill color and turn of the stroke color like this one below and choose one color from the color panel. I have chosen white color #FFFFFF.

Now choose the rectangle tool

and create a rectangle with 650 pixel width and 500 pixel height as shown below.

Now let us create a movie clip, click on the white banner on stage and press F8 and name the movie clip “main” and select movie clip and press OK like this one below:

Having created the main movie-clip, double click on the main movie-clip and create another movie-clip and call it “background” and press OK like this one below.

Having done this, double click on background movie-clip and using your selection tool

Drag over 75 percent of the stage downwards like this one below:

Click on the highlighted portion of the stage and click on the fill color and choose any color of your choice. I have chosen (#333333) a dark grey color.

Now having created the background movie-clip,

go back on the main movie-clip by clicking on “main” circled in red as shown above and name the layer which has the background movie-clip as background and add two more layers and call one “content” and another one “buttons”. To add layers you have to click on the icon circled in red below.

Let us add some content by using the text tool

Choose the font style I have chosen Ariel Black with font size as 20 as shown below:

Type “ABOUT US” and convert it into a symbol by pressing F8 and call it “Content” as shown below.

Now double click on “ABOUT US” you will enter the content movie-clip and rename that layer as sections as shown below.

Add a sub-heading if you want, below “ABOUT US” in a smaller font say 16 pixels and call “CEO”. Then add some content under the CEO with the fonts and sizes that I have selected from the character properties.

Now let us go ahead and add an image and optimize it. When importing images (File > Import > Import to Stage) into flash you have the ability to optimize them, It’s good to optimize your images from within flash, because you can tweak their quality whenever you want, without having to open them up again in an image editing program. So the file extension usually use for images is PNG, which provides a high quality image. So below you can see an image, that I have imported, as the featured item of the Flash site.

Now that we have imported the image on stage and optimized it, let us convert the image into a button, that opens up a browser window, now convert the flower image into a movie clip symbol and call it flowerMC, so press F8 and name it flowerMC and check on movie clip and click on OK.

Now you can give the movie clip an instance name, call it flower from the properties panel as shown below.

The image can now be given some functionality by referring to the instance name. In the content movie clip, create a new layer called script and click on the 1st frame of the layer.

Open up the actions panel and enter the code shown below.

Flower.onRelease = function(){
getURL(http://www.bestwebdesignz.com, “blank”)
}

This code refers to the image, using the instance name ‘flower’, giving it an onRelease function. So when ever the image is pressed and release, it can be told to do something. In this case, it is told to open up a browser window (getURL), using the address bestwebdesignz. We also have to add a stop action, because we are about to create more frames in the content movie clip

Now go ahead and add the rest of the content. We will be creating some buttons later, which. when clicked, will display the corresponding section. In the content MC we are going to create each section at a different frame. So when one of the buttons is clicked, the content MC will go to the frame with the respective content on. To do this, we are going to give each section a label that we can tell the content MC to go to. So, create a new layer called ‘labels’, in-between the script and section layer. Click on the first frame of the labels layer and, at the properties panel, enter ‘about’ under ‘frame’ circled in red as shown below:

Select the 10th frame of all the layers and then insert key frames for each layer press F6 or right click and select insert key frames as shown below.

On the 10th frame, of the labels layer, add another label called “portfolio”. You can add more frames, extending them to frame 20, by using f5 while layer 10 of all frames is selected.

Change all the text to suit this section and add the first thumbnail for your portfolio as shown below.

Convert the image to an MC called ‘thumbnail2′

You can add as many thumbnails you want, also converting them to Movie clip s called thumbnail1, thumbnail2, thumbnail3 and so on. Then give the thumbnail2 movie clip the same instance name, which we will use to give some functionality. Do the same with each of the other thumbnails, giving thumbnail3 movie clip the instance name ‘thumbnail3′ etc.

Click on frame 10 of the script layer and open up the Actions panel. As we did with the featured image, add the code show below, this time swapping the URL address for what ever you want the thumbnails to open up as shown below.

Thumbnail2.onRelease = function() {
getURL(“http://www.bestwebdesignz.com/tips/fireworks/fireworks-website-templates”,”_blank”)
}

Thumbnail3.onRelease = function() {
getURL(“http://wwwbestwebdesignz.com/tips/oscommerce/best-oscommerce-templates/”,”_blank”)
}

Thumbnail4.onRelease = function() {
getURL(“http://www.bestwebdesignz.com/tips/wordpress/best-wordpress-templates/”,”_blank”)
}

Thumbnail5.onRelease = function() {
getURL(“http://www.bestwebdesignz.com/tips/zen-cart-tutorials/best-zen-cart-e-store-template-themes/”,”_blank”)
}

Add another section, create another key frame by pressing F6 at frame 20 of all the layers. Create a label for the 3rd section. As you can see we have called it ‘services’

Now that we have all the sections in the content movie clip , go back to the main movie clip and give the content movie clip an instance name. We can then use the instance name to control the content movie clip.

Now we are going to create some buttons to tell the content movie clip how to go to the corresponding label. On the button layer, select the rectangle tool and draw a rectangle on stage using the same color as the background.

Convert the rectangle into a movie clip by pressing F8 and call it “BT background”.
We can now use the instance of BT background movie clip for each button. So copy and paste it besides the first one, do it for 3 times, since we have created 3 web pages (About, Portfolio, Services) then convert the first movie clip into another button symbol by pressing F8 and call it “about”, this button will be used to tell the content movie clip to go to the ‘about’ label, repeat the same process for the portfolio page as well as the services page as shown below.

Double click on the first button symbol and create a new layer and add the text ‘about’ , repeat the same procedure for portfolio and services button, as shown below.

Now create a layer called “script”, above the buttons layer in the main movie clip. Open up the Actions panel and add the action script as shown below. This script gives each button functionality, so that when they are pressed, the content movie clip goes to the corresponding pages.

And now for the final stage of the tutorial to create a basic Flash website, we are going to create a pre-loader for the website, go back to root of the time, where the ‘Main’ movie clip is, and move the first frame, to frame 2 as shown below.

Now make a text field on the first frame, with the text “loading”, and convert the text field by pressing F8 to a movie clip called ‘loader’. Double click on the ‘loader’ movie clip and create a second text field on the right, with the text “99%”. From the properties panel the text has been made “dynamic”, and a var (variable) has been given to it called “percent”. When the website is preloading, this variable will hold the percent value that is loaded so far, and it will be displayed in the dynamic text field.

Now go back to the root timeline, instead of placing the code on a frame in the timeline, put it on the loader movie clip by clicking on it, opening up the Actions Panel, and then entering the code, shown below. This block of action script will check to see how much of the website has loaded and display the percentage in the text, using the variable. Once all of it is loaded, the timeline will go to frame 2, and the site will be displayed.

Last but not the least, on the first frame of the root timeline (Scene1) insert a layer called script and place a stop() action in the action script as shown below.

That’s it, you now know how to create a basic website in flash CS4.

Series Navigation

«How to create a scroll bar in Flash CS4How to load pictures in flash CS4 dynamically using the loader component»

Tags: How to create a basic layout in Flash CS4
Posted in Flash CS4 Tutorial | No Comments »