Home > Articles > Graphics & Web Design > Dreamweaver & Flash

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

How the Home Page Works

Test the Home Page movie again once the Preloader and Introduction have finished. The Home Page movie contains several elements. Starting to the far left and bound by a blue box, notice a brief paragraph welcoming everyone and giving an introduction to the products and services offered. A small animation that cycles through several shades of blue is seen below that and is a recurring element throughout the various site movies. A lighter blue vertical bar with two dancing vertical lines is seen to the right. Further to the right is a place for the company name in an olive-colored field. Probably the most eye-catching element is the promo presentation playing in the middle of the Stage. As the promo plays, bitmap images sweep in from the left, right, top, and bottom along with teaser lines about the product. To the right of the promo is a satellite that floats up and down, and performs a series of animations. Above the animated logo is a clickable banner ad. At the far right side of the Stage is a vertical bar made of horizontal lines that loop from top to bottom. This is another repetitive design element. Finally, across the bottom, there are three small, clickable banners.

The home page segment of the movie is contained within the Main scene and is comprised of several layers. The Actions/Labels layer contains the frame labeled MainMovie to which the script in the Go button refers. This layer also contains a keyframe with the script that loads the navigation bar into the level above the current movie. At the end of this layer is a keyframe with a stop() action so the movie doesn't loop. Below the Actions/Labels layer is the Ad Banner containing the banner that appears in the upper right of the Stage. Below that is the Macromedia Buttons layer that contains the small advertising banners at the bottom of the Stage. Next is the Animations layer that contains the Promo Movie Clip. Below that is the Text layer that holds the company introduction copy appearing on the left of the Stage. The Animated Image layer that contains the animation of the satellite is next, and then is the Company Name layer with the button Company Name. Following that is Color Bar Animation that contains the Movie Clip for the blue squares animation, and below that is the Vertical Bars Animation layer, which has the Movie Clip with the light blue lines that dance across the Stage. Next, the Side Line Animation layer contains the white striated lines that run across the right side of the Stage. The Blue Background and Green Background layers are next and contain the color fields you see on the Stage. The bottom layer, Temp Background, contains a graphic that covers the whole Stage and acts as a background.


You may have noticed that the navigation bar appeared in your Home Page movie when you tested it earlier. This is because an ActionScript within the Home Page movie calls upon that file (hz_Nav_Bar_new.swf) and loads it into the level above itself. The navigation bar will only appear in your Home Page movie if hz_Nav_Bar_new.swf exists in the same location as the homepage.swf and is named correctly. If you didn't have the Home Page movie in the same folder as the navigation bar, an output window would have popped up with and error message telling you it failed to load the movie.

Take a look at the Actions/ Labels Layer in the Main Scene and scrub the play head across the Timeline until you hit frame 23. Click on the keyframe and look at the Actions window. You'll see the following Script:

// This code loads the navigation bar 

loadMovieNum ("hz_Nav_Bar_new.swf", 1);

As the comment says, this code loads the hz_Nav_Bar_new.swf movie. If you change the name of your Navigation Bar movie you must also change this code to reflect the new name.

  • + Share This
  • 🔖 Save To Your Account