A Sample Website Structure

There are a few more topics to cover in the control section, like making content scrollable, creating interactive forms, and more button-movieclip interactions, but before we look at those, let's look at one way that a website, which we'll eventually fill with all of the above, might be structured. One of the most effective and easy-to-setup structures for a Flash website (that is, any Flash movie with navigable sections that will be displayed on the web) is to divide up the main timeline into sections.

Say we have a website in which we want to show a bit of introductory animation to get to the main page, and have that main page include three buttons: one for portfolio, one for resume, and one for contact. We'll also want to include a preloader to prevent the movie from playing before all the content has been downloaded, and to indicate to a site visitor how much of the movie has downloaded. We'll present the movie in a separate browser window that has been sized exactly to the dimensions of the movie. Click here to see the sample website movie in a sized window. This is a diagram of the sections we'll set up along the main timeline:

Here are the steps to recreate it, using sitesample_start.fla as a starting point (has the background image and buttons already in the library, swatches in the swatch panel, and the 'logo' saved as a vector offstage, and is available via a link under Files at right).

Create the intro 'animation'

In this movie the background image appears when the movie starts up. The intro animation consists of a translucent panel that slides open, three navigation buttons that appear one after another, and then some introductory text that fades in. Those three parts are achieved with a shape tween, keyframe animation, and a motion tween, respectively. Open sitesample_start.fla and look in the library. In frame 1 of the bg layer, drag samplesite_bg.jpg from the library onto the stage and position it at 0, 0. Save the file as sitesample1.fla. Extend the timeline out to frame 75 by right-clicking frame 75 and choosing Insert Frame. Move the keyframe in frame 1 down to frame 10 (click once to select it, and then click-drag to move it to frame 10). This leaves some blank space at the start of the movie into which we'll later put a preloader.

Shape tween the green content area

Add a layer called green area. Make a keyframe in frame 13, and with the rectangle tool, choose the translucent green from the saved swatches as the fill and no stroke and draw out a 360-pixel-wide rectangle on the right side of the stage, as in the movie. Add solid darker green stripes on either side. Add another keyframe in frame 23. This will be the tween ending keyframe. In frame 13, use the transform tool or transform panel to shrink the panel horizontally to about 3% of its original width. Click frame 13 and choose Shape Tween from the Properties Panel. Scrub the playhead along the top of the timeline to see if the tween looks ok. If not, add a shape hint in the start keyframe (Modify, Add Shape Hint), drag it to the upper left of the skinny rectangle, then click the end keyframe and drag the shape hint there to the upper left of the final rectangle. Repeat, adding a keyframe in the upper right, and again for the bottom left and bottom right, if needed.

Add buttons, appearing sequentially

After the rectangle panel opens, the buttons appear in succession. Add a layer for each button. In the photos button layer, make a keyframe in frame 29 and drag the photos button out of the library, positioning as in the movie. Repeat for the resume button (frame 33 of the resume btn layer) and contact button (frame 37 of the contact button layer).

Add fading-in welcome text

Finally, the text: Add a new layer (intro text) and put a keyframe at 37. Use the text tool with static text to create the intro text. Select the text and convert it to a graphic symbol (Modify, Convert to Symbol) so that you can motion tween it to fade in. Add an ending keyframe in 43. In the start keyframe, select the graphic and set Alpha to 0 in the Properties panel. Click the frame and set the Tween to Motion in the Properties panel. That completes the intro animation (cmd-Enter, pc:ctrl-Enter to test).

Setting up the framework of the movie

We need to make the movie stop once the intro animation has played through, giving the user a chance to click one of the buttons to go to the appropriate section (which we'll set up next). Add an actions layer, put a keyframe in frame 43, and put a stop(); in it.

Next, we'll add labelled frames for each subsection of the movie. Add a labels layer. In frame 53, make a keyframe and in the Properties panel, type photos into the box that says Frame Label. This gives the frame that starts the photos section a name which can be used in actionscript commands instead of the frame number.

In the labels layer, make a keyframe in 63 and label it resume, and a keyframe in 73 and label it contact.

Once the sections have been set up (with labelled frames), we have to go back and adjust the intro animation layers so that only the content we want to persist into the other sections actually does. We'll keep the green area and the buttons, but 'turn off' the intro text in other sections of the site. To do that, right-click in frame 53 of the intro text layer and choose Insert Blank Keyframe.

Put code on the buttons

As a final step, we'll set up the buttons to take the user to the appropriate section when clicked. Select the photos button, open the actions panel, make sure you see "Actions - Button" in the upper left of the panel and paste this:

on (release) {
   gotoAndStop("photos");
}

into the actions panel. Repeat that step for the other two buttons, changing the frame name that is jumped to.

Now the structure of the movie is in place, and we'll move on to put some content into it.