The Best Structure for your Flash Site - Page 5

Frame 4
Before we look at the code for frame 4, let's review. When our Flash file loads, it hits frame 1 and sets all the variables that we will need throughout our site. Next, in frame 2, we gather external data. We got a little bonus and learned how to import XML code which we then parsed and stored in 3 arrays that we'll use in frame 4. In frame 3, we imported the CSS that we'll use in frame 4.

What I want you to notice is that we're at our last frame and, at this point, nothing has been built. Up to this point we've only gathered the data that we'll need. We are now at frame 4, where the playhead will rest indefinitely and our Flash file will take form.

We start by tracing our arrays just to reassure ourselves that we have everything we need. If you're not familiar with the trace() function, then you won't get far in Flash. Trace() is used to display messages in the Output panel while testing your SWF file. Do a CTRL + ENTER right now and it should pop up the Output panel, displaying the data from our arrays.

for (var i = 0; i<nTotalButtons; i++) {

navHolder_mc.createEmptyMovieClip("navButton"+i, i );

// make new MovieClip and set to newly created button

var navButton:MovieClip = navHolder_mc["navButton"+i];

// load images

image_mcl.loadClip( astrImages[i], navButton );

}

Recall that nTotalButtons was set in frame 2 and is equal to 4 -- the total number of buttons. Also notice that navHolder_mc is already on our canvas in the navHolder layer.

Now, we use a 'for loop' to create our 4 buttons. Within navHolder_mc, we use the createEmptyMovieClip() method to create a movie clip that will hold our buttons.

var navButton:MovieClip = navHolder_mc["navButton"+i];

This creates a movie clip called navButton and sets it equal to your newly created movie clip. This just makes life easier: we can simply refer to navButton, instead of navHolder_mc["navButton"+i], now.

image_mcl.loadClip( astrImages[i], navButton );

We tell the loadClip() method to load the button image (from our array) into the newly created movie clip.

Now, remember that image_mcl was defined in frame 1 as a MovieClipLoader, and MovieClipLoader allows us to implement listener callbacks that let us know when our image has completed loading.

mclListener.onLoadInit = function(target_mc:MovieClip) {

The onLoadInit handler is invoked after the actions in the first frame of the clip have executed, so you can begin to manipulate the loaded clip. This handler is called after the onLoadComplete handler. For most purposes, use the onLoadInit handler.

At this point, we have a new movie clip for our button with our image loaded into it. Now let's set some properties.

target_mc.linkURL = astrLinks[nCounter];

This attaches a variable called 'linkURL' to target_mc movie clip; target_mc is automagically set to the object that called this function; in this case it's our movie clip button. Don't believe me? Trace it!

Note: 'Automagically' is a technical term for when something happens automatically without you doing anything and you can't really explain how it happens! Feel free to use it around the office -- it will catch on.

Next, we set linkURL equal to the first link in our array.

target_mc.onPress = buttonClick;

This attaches the onPress event handler to our button. In other words, when the button is clicked, it will call the buttonClick function.

var buttonImgHeight:Number = target_mc._height;

var buttonImgWidth:Number = target_mc._width;

We define a couple of variables: one stores our button's height, while the other stores its width.

1 | 2 | 3 | 4 | 5 | 6 | 7