The Main Timeline as the Site Layout Flash

Before you can start digging into Flash, you need to know what you’re excavating what is the basic concept of the experience? Is this an all-Flash Web site? Is this a Flash animation that introduces some other type of content (HTML, Shockwave Director movies, and so on)? For the purposes of this, we create a Flash movie for a basic all-Flash Web site.

Creating a plan
Once you know what goals you want to achieve with your Flash content, you should map the ideas on paper (or with your preferred project planning or flowchart software). We create a basic site for a computer parts company that has four areas: main menu (and welcome page), products, services, and contact information. Our organizational chart for this site has four discrete areas, as shown below.

Our organizational chart will help us plan our Flash movie architecture.

Our organizational chart will help us plan our Flash movie architecture.

Determining Flash movie properties
After you’ve made your organizational chart, you’ll want to determine the frame rate, size, and color of the Flash movie. We’ve skipped much of the “real-life” planning involved with Flash Web sites. For this example, we use a frame size of 640 × 400 (a cinematic aspect ratio), a relatively fast frame rate of 20 fps (for smoother animations), and a white background color. These are set in the Movie Properties dialog, which is accessed by Modify➪Movie (Ctrl+M or Command+M).

The Flash Movie Properties

The Flash Movie Properties

Mapping site areas to keyframes
After you have set up your Flash movie properties, you can create a Main Timeline structure for the site. Because we have four areas in our site (main menu, products, services, and contact information), we’ll have keyframes on the timeline that indicate those sections.

  1. Rename Layer 1 to labels, by double-clicking the Layer 1 text in the timeline window.
  2. With the Arrow Tool, select frame 10, and press F6. This creates a keyframe on frame 10.
  3. With the keyframe selected, open the Frame Panel (Ctrl+F or Command+F).In the Label field, type welcome. After you have typed the text, press Tab (or Enter) to make the name “stick.”
  4. Repeat Steps 2 and 3 with frames 20, 30, and 40, with the frame labels products, services, and contactInfo, respectively.
  5. Select frame 50 of the labels layer, and press F5. This will enable you to read the very last label, contactInfo. Your Main Timeline should resemble below.
  6. Frame labels will be used to differentiate each section of the site.

    Frame labels will be used to differentiate each section of the site.

  7. Save your Flash movie as mainMovie.fla.
  8. Make a new layer, and rename it actions. Add a keyframe on frame 10, and open the Frame Actions Panel (Ctrl+Alt+A or Option+Command+A). Make sure the Actions Panel is in Normal Mode by clicking the menu option in the top-right corner and selecting Normal Mode.
  9. Click the Basic Actions booklet (located in the left-hand column of the Actions Panel) to expand the actions contained there. Double-click the Stop action.This adds the following code to the Actions list in the right-column of the Actions Panel: stop();
  10. Close the Actions Panel, and open the Frame Panel. In the Label field, type //stop. The // characters assign a frame comment instead of a frame label.Although this step isn’t necessary for the functionality of the movie, frame comments can provide quick and easy access to the designer’s or programmer’s notes. Your Main Timeline should now look like below.
  11. Unlike labels, frame comments can not be used in ActionScript. Comments can provide quick visual references for ActionScript code.

    Unlike labels, frame comments can not be used in ActionScript.

  12. Save the Flash movie again.At this point, the Flash movie has a skeleton architecture (a blueprint) for our interactive functionality. Now, let’s add some content to each section of the movie.

Creating content for each area
For the purposes of this example, we add placeholder elements that would be filled in with actual content for live production.

  1. Using the File➪Open as Library command, select your copy of the content.fla file from the Flash 5 Bible CD-ROM. This opens the Library of the content .fla file.
  2. Move the playhead in the timeline window of your mainMovie.fla movie to the welcome label (frame 10).
  3. Create a layer named companyLogo. Add a keyframe at frame 10 of the companyLogo layer.
  4. Drag an instance of the companyLogo Graphic symbol from the content.fla Library window to the Stage of your mainMovie.fla movie. Place the symbol instance near the top-left corner of the Stage.
  5. Create a new layer named heading. Add a keyframe on frame 10 of this layer.
  6. On frame 10 of the heading layer, use the Text Tool to add the text Welcome. For this example, we use the typeface Verdana at 36 points (using the Character Panel). We place the text near the top-center of the movie Stage, as shown below.
  7. The Acme Computer Parts logo should be placed at the top-left corner of the Stage.

    Acme Computer Parts logo should be placed at the top-left corner of the Stage.

    Use the Text Tool to add a welcome heading to the movie.

    Use the Text Tool to add a welcome heading to the movie.

  8. Add a keyframe at frame 20 of the heading layer. The Welcome text block from the previous keyframe will be copied into this keyframe. Change the text to Product Catalog, as shown below.
  9. Change the text block on frame 20 to indicate the current frame label section.

    hange the text block on frame 20 to indicate the current frame label section.

  10. Repeat Step 7 for frames 30 and 40 of the heading layer. Change the text block to indicate the appropriate section of the site (for example, Assembly Services, Contact Information).Now lets add a slide show of the computer parts that the company sells. For this, we create a Movie Clip symbol that has each product graphic on a separate keyframe.
  11. Create a new symbol using Insert➪New Symbol (Ctrl+F8 or Command+F8).Leave the Behavior option at the default Movie Clip setting, and give it a name of productMovie.
  12. Flash automatically switches to Symbol Editing Mode, on the productMovie timeline. Rename Layer 1 to products.
  13. Add keyframes to frames 2, 3, 4, 5, and 6 of the products layer. We have six computer parts in the content.fla Library, and each product graphic is put on its own keyframe.
  14. Move the playhead to frame 1 of the productMovie timeline, and drag the monitor_1 Graphic symbol from the content.fla Library to the Stage of the productMovie symbol.
  15. Continue moving the playhead to the next frame, dragging another computer part to the Stage for each frame. When you’re finished, press the < and > keys to review your frames. You may want to center each graphic on the Stage using the Align Panel (Ctrl+K or Command+K).
  16. You should have six filled keyframes on the products layers of the productMovie timeline.

    You should have six filled keyframes on the products layers of the productMovie timeline.

  17. Now we need to insert an actions layer for this Movie Clip symbol. Create a new layer, and rename it actions. Select frame 1 of the actions layer, and open the Actions Panel. Add a Stop action: stop();
  18. Return to the Main Timeline (Scene 1) by clicking the Scene 1 tab in the upperleft corner of the timeline window.
  19. Create a new layer, and rename it productMovie. Insert a new keyframe on frame 20 of the productMovie layer.
  20. Open the mainMovie.fla Library by pressing Ctrl+L or Command+L. Drag the productMovie symbol from the Library to the Stage. Place it just left of the center of the Stage, as shown below.
  21. Select frame 30 of the productMovie layer, and press F7. This inserts a blank keyframe. Now, the productMovie instance will only show in the product area of the timeline.
  22. Save your .FLA file.
  23. The productMovie instance will only be present in the product section of the movie.

    The productMovie instance will only be present in the product section of the movie.

    Now we have some content in the Flash movie. The following Expert Tutorial provides an excellent overview of the design process for Flash user interfaces. If you want to continue with the demo site, then skip to the next section, “Adding Navigation Elements to the Main Timeline.”


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics