Introduction
Welcome creating a basic Flash website.
We will be creating a website page in Flash CS3. We will start with the assumption that you understand the basic functions of flash. i.e The stage, Time line etc....
The tutorial is designed to help you understand the basics of design, layout and basic Action Script where upon on completion of the tutorial you can build your own site in Flash.
So lets begin by opening Flash
1. Setting the size of the website
For today's example we are going to use the web standard size of width 800px by 600px. Most screens these days are larger than this but this is a good start. To set the size of the stage you need to "Properties" tab at the bottom of the screen and select "Size" or alternatively go via the tool bar and select "Modify/Document". Here change the size for the default 550 x 400pxs to 800 x 600 and press "OK". You can also change the background colour. We will leave it white for now.
2. Designing the site
We now need to think about designing the site. I would always recommend on a piece of paper draw out what you want to see, and what you want the site to do before you even start the project.It is important to make sure your logo is in a position where if the browser is reduced smaller the logo can still be seen. It always best to put your logo top left.
Importing Images/Adding Layers
The first part of the site is to import your logo into the flash project. To do this it very simple but before we do this we need to make sure that the Flash Library is visible as this will mean you can drag and drop our objects into the stage. To get view the library you can either press "CTL+L" or go to Window/Library.
Once the Library is open we now can import the logo into the library. To do this go to the tool bar and select File/Import/Import to Library. Once you select Import to Library a browse window shall appear. Find the image you want I would recommend any images should be in a "png" format I have used a jpg for this example. As soon as you press import follow the on screen instructions. Once imported the image , it will appear in the library and not the stage .
Once the logo has been import to the library drag the image to the stage placing it top left.
When you drag the image to the stage, the image inserts into the first frame of the timeline. We need to now rename the layer as it best practice to work in layers so that when you edit the site it you can just edit one layer at a time.
To do this you can simply double click on the Layer 1 or you can go to the tool bar, Modify/Timeline/Layer Property.
We are going to add a new layer to the website in which we going to add a colour box to the stage to separate the navigation from the content. To do this go to the tool bar Insert/Timeline/Layer, or there is a short cut icon in the time line its the one on the far left.
We need to rename the Layer 2 to Background and drag this layer below the Logo layer. Then click on the first frame in the Background layer and then select the draw rectangle in the tool bar down the left
Once you have selected then draw a rectangle on the stage. If you draw the rectangle below the logo leaving about 10 pixels.
Now we need to add a new Layer so we can add some text to the website. If you add a layer as you did for the background and then rename it as Welcome and then click in the first Keyframe of the Welcome layer. Now click on the "T" for text in the tool bar on the left hand side and click on the stage. Then type "Welcome to a Flash site". In the properties tool bar at the bottom of the screen change the font to 30 pnt and then select a text font. Now we want to position this text at the top of the background area.
We now want to add some content, if you add a new layer and call this "Main Text". Then click on the "T" to add another text box and then cut and paste or type your content. Then position this on the right hand side of the background area.
Now we need to add a image to the site to make it more interesting. If you follow the same steps as you did to import the logo to the library and select an image you want. (File/Import/Import to Library). Once you have imported the images then drag the image onto the stage. Place the image onto the stage below the welcome text and left of the content you have just added.
Now we have created the basic layout of the site. We now want to add some life to the website and use flash as we should.