H  24  25  26  27  28  29  30  31 

Hands-On: Flash MX 2004 Movie Clips

Exercise 28: Creating the “MAIN” Scene for the Web Site

A Web site can be built entirely in Flash MX if you so desire, in this Hands-On Exercise you will see how to create Movie Clip Scenes that will become the Links for the site.

It will be necessary to have all the parts ready before you begin. Use Fireworks MX to build interface material and images that will be used throughout the site. For this exercise, download my main-interface-31805.fla file to practice with. (Use the link below to access these files).

The secret to making this exercise work is fairly simple. The individual pages of the Website will become Scenes holding Movie Clips. Every Scene has two layers, a Movie Clip layer and a locked Navigation layer. The most important Scene is the MAIN scene, this is where the "Look-and-Feel" and the Navigation is built and used throughout the Website. The Navigation with its ActionScripting will be duplicated into every scene so they will all be interconnected for quick access.

Follow these steps:

  1. Open the main-interface-31805.fla file to do these exercises. (Can also be found in the classfiles for Fichera in Sierra College .) This movie is 750 by 400 pixels to accommodate the graphic used.
  2. Save this file as main-interface-done.fla in your working folder.
  3. Begin by pressing [Ctrl] + [F8] to create your first Movie Clip, name it “main”.
  • This scene will be duplicated several times, so take your time and check everything twice.
  1. Create five layers in this Movie Clip, starting from the bottom up:
    background, image, text, headers, headerbar. (Each will hold an item that matches its name).
  2. Lock all layers and then un-lock a layer when needed for the assignment.
  3. Insert the layoutBackground graphic symbol (found in the graphicSymbols folder of the Library), in the background layer and using the Align panel, center it “to stage” both vertically and horizontally. Re-lock the layer for safety.
  4. In the headers layer, type the statictext that will appear in the left corner. (Use the purple wedge shape.) I used"The Start Page" in Verdana, 18pts, bold and white text .
  5. Also in the headers layer, type ~ HOME Header ~ in Verdana, 36pts, bold, centered with black text and white tildes. (Use the lighter violet bar area.) Re-lock the layer for safety.
  • All the text used in the exercise is only placeholder temporary text to be changed later as needed by you.
  1. In the image layer, insert any image that will be used in the main section of the page.
    I used menus as the graphic for the Home page. (Use the light yellow area for the image.) Re-lock the layer for safety.
  • All the images needed are in the Library under the folder called graphicSymbols.
  1. In the headerbar layer, (brownish-tan bar at the top of the graphic image.) type any information that will appear at the very top. For this exercise type: “Website by Your Name”.
  2. Use Verdana, 13pts, white and bold for the text. Re-lock the layer for safety.
  • This could include additional links not covered in the navbar such as a GUESTBOOK link or PAGE TITLE.
  1. In the text layer, type the text that will appear on the page. Use Verdana, 13pt, normal, Static text. (In this case, placeholder text will be fine.) Re-lock the layer for safety.
  2. If necessary make the text dynamic and include a “scrollbar” from the components panel.
  • (Refer back to the Dynamic Text Hands-On exercise if needed.)
  1. In the navbar layer, drag the HOME button from the Button folder of the Library onto the lower-left side. (Use the brownish-tan bar at the bottom of the graphic.)
  1. In the navbar layer, drag the CONTACT button onto the lower-right side. (Again, use the brownish-tan bar at the bottom of the graphic.)
  2. In the navbar layer, drag the Link 1 button to the top of the brick-red colored area. Continue by adding the Link 2, through Link 7 buttons to the navigation area. Re-lock the layer for safety.
  3. Shift-click on each of the Link buttons and then using the Align panel, de-select the “to stage” button, choose DistributeVertical Center. This will align the buttons neatly.
  4. In the actionslayer, press [F9] and then place the following ActionScript:
    Global Functions > Timeline Control >Stop.
  • This will keep the movie from moving on to the additional scenes on its own.
  1. You have finished making the “main” Movie Clip. Be sure that all layers are locked and then click on the MAIN scene to close the Movie Clip.
  2. In the Main Scene create three (3) layers. Name the bottom layer “movie clip”, the middle layer “navigation”, and the top layer “actions”.
  3. Click the first frame of the movie clip layer and then drag acopy of the "Main" Movie Clip onto the Stage.
  4. Check the Properties Inspector and see that the X and Y settings are at zero (0).
  • It's time to measure twice and cut once.
  • Go back and check everything and make sure it is perfect.
  • You are about to make a lot of copies, and if they are not correct, you've got a lot of fix'n to do!

 

Download and build the “main” scene with this .FLA file, it contains the basics needed for the exercise.
http://profal2.com/cis127/pdf/assets/flash/main-interface31805.fla

Move on to part two to build the navigation links.

 
Back to Top