Building a Simple Web Site

Introduction

In this tutorial, you will be creating a web site that contains an opening animation and 4 subsequent lower level pages. The schematic of the web site is as follows:

The home page will contain an animation. When the animation is finished, the viewer will be lead into the about us page. On the home page, the user will have the option to skip the opening intro.

On each of the four lower level pages, the user will be able to navigate to the remaining three pages. When the user goes from one page to the next, a transition animation is played.

Setting up the Movie

1. Open a new Flash file
2. Save the file as simplesite.fla
3. Go to Modify -> Document
   1. Make the Stage size 640 x 480
   2. Make the Stage color black.

This site will consist of two scenes: “Intro” and “Main”.

1. Go to the Scene panel. Change the name of Scene One to “Intro”
2. Add another scene, name this one “Main.”
3. Make sure that in the Scene panel, intro is on top of main. This ensures that Flash will play “Intro” before it plays “Main”.
4. You should be in the “Intro” scene.

Creating the Intro Animation

For the purpose of saving time, you will use any previous animation you have made as the opening of this web site.

1. Open an .FLA file you created for a previous animation.
2. Click and drag across all the layers for the entire length of the animation.
3. Choose Edit -> Timeline -> Copy Frames
4. Go back to the Flash file, simplesite.fla and click on the first frame in Layer 1.
5. Choose Edit -> Timeline -> Paste FramesNow the old animation will be the splash animation in this site. Open the library associated with simplesite.fla. You will notice that all of the symbols that were made when you created the animation you just copied on to the main timeline, have been copied over to the simplesite.fla file.
6. Put all the symbols currently in the Library into a folder called “intro animation.”

Making a Skip Button for the Intro Movie.

1. Make a new layer at the very top of all the layers in the “Intro” scene. Name it “skip.”
2. Choose Insert -> New Symbol and call it “skip button.” Choose type “button.”
3. Make a skip button of your choice. Remember to cut it and paste it to center it within the symbol editing window. Also – don’t forget to make the hit area encompass the entire button area.

Setting up the web site.

Set up the following layers from top to bottom in this order in the main scene: labels, actions, transitions, menubar, content.

1. In the labels layer, insert blank keyframes at frame 11, 21 and 31.
2. Click in frame one of the labels layer, then go to the frame panel and type “about” in the label dialog box.
3. Click in frame 11 of the labels layer, then go to the frame panel and type “consulting.”
4. Click in frame 21 of the labels layer, then go to the frame panel and type “products.”
5. Click in frame 31 of the labels layer, then go to the frame panel and type “contact.”
6. In the actions layer, insert blank keyframes at frame 10, 20 and 30 and 40.
7. Click on frame 10 and open the actions panel. Add the stop action by typing:stop();

8. Repeat step 7 three more times, adding stop actions to frame 20, 30 and 40.

Making the Menu Bar

If you like the skip button that you made for the home page, you will use this same type of button for the menu bar. If you want to try something different, make a different type of button. I am going to use the skip button I made for the home page as a basis for the buttons in the menu bar.

1. Go to the library, select your skip button. Go to the options menu in the library and choose “duplicate.”
2. Name the duplicated button “about_button.”
3. Repeat step 1 and 2 three more times and create buttons for: consulting, products and contact.
4. Edit each of the new buttons you created so that the text is accurate for each of the buttons.
5. Drag your four new buttons: about_button, consulting_button, products_button, and contact_button onto the stage on the menubar layer.
6. Click in frame 40 on the menubar layer.
7. Choose Insert-> Frame. Now your menubar should be present throughout your entire movie.

Add the Content

1. On the content layer, insert a blank keyframe on frame 10.
2. Click on frame ten in the content layer and click and drag a text box for your content with the text tool.
3. Copy and paste your content for the about page into the text box.
4. Click on frame 40 in the content layer and choose Insert -> Frame, so that the content stays on the stage throughout the entire movie.
5. We want to change the content for every page, but use the same text box. So, click in frame 20 of the content layer and choose Insert -> Keyframe. Change the content for the consulting page.
6. Now click in frame 30 of the content layer and choose Insert -> Keyframe. Change the content for the products page.
7. Now click in frame 40 of the content layer and choose Insert -> Keyframe. Change the content for the contact us page.Right now the content for each page is being held for 10 frames. We only want to have it held for 1 frame.
8. Click on frame 1, in the content layer, and choose Insert -> Blank Keyframe. Repeat in frames: 11, 21, and 31.
9. Now the content only exists on frames 10, 20, 30, and 40 in the content layer.

Programming the Menu Bar and Skip Button

We now need to make the menu bar work.

1. Select the about button
2. Give it an instance name “buabout”
3. Put an action on frame 1 that listens for the user clicking on this button.buabout.addEventListener(MouseEvent.MOUSE_DOWN, toAbout);

   function toAbout(pEvent:MouseEvent):void {
   gotoAndStop(“about”);

   }

   This action means – when the user clicks the button, take them to the frame labeled “about”.

4. Repeat step 2 for all the buttons. You should make the release of the consulting button take you to the consulting label, the products button to the products label and the contact button to the contact label.

We also need to make the skip button work.

1. Go to the “Intro” scene and select the skip button. Give it an instance name: “buskip”
2. Open the actions panel.
3. Make the skip button take you to the about label in the main scene, by typing the following commands in the Actions panel.buskip.addEventListener(MouseEvent.MOUSE_DOWN, toSkip);

   function toSkip(pEvent:MouseEvent):void {

   gotoAndStop(“main”,”about”);

   }

Now test your movie (Control -> Test Movie), all the interactivity should work. You should notice that there is a bit of a pause before you see the content for each section of the web site. That is because Flash has to play the 9 frames preceeding the content before it actually gets to the content. We want to use these 9 frames for a transition animation.

Creating the Transition Animation.

1. We want the transition to be 9 frames long. We will put this transition in a separate symbol.
2. Select Insert -> New Symbol.
   1. Name it “transition”
   2. Choose graphic behavior. (The reason why we are choosing graphic behavior is so we can make the symbol 9 frames long and be ensured that it will fit perfectly in the 9 frames we held for the transition animation.)
3. Make an animation that lasts 9 frames in the transition symbol. I made an animation of a bunch of different colored circles expanding and disappearing. I tried to play off of the theme that was introduced in the intro animation.
4. Go back to the “Main” scene. Insert the transition symbol at frame one of the animation.
5. Insert a keyframe on the transition layer at frames 11, 21 and 31.
6. Now insert a blank keyframe on frames 10, 20, 30 and 40.

Your resulting timeline should look like this:

Test your movie. You now have an entire web site made in Flash! My sample web site was only 30 K! No need for a preloader animation!