Lab 2: Image Browser

Task

This week's project asks you to create a simple utility for browsing a collection of digital images. To do this, you'll store image names in an Array object, which allows you to create a numbered, sequential list. The starter file contains five buttons: a row of four triangular buttons such as you might find on a VCR, keyed to the predictable functions: go to first item, go to previous item, go to next item, go to last item. There is also a fifth button for random selection.

In the file lab091804Starter.fla, the buttons have already been scripted with calls to functions. The function bodies have been written in a script on the solitary frame in a layer called "scripts." Most Flash scripters use this procedure. Note that the button scripts invoke their functions with the prefix "_root". This is necessary whenever scripts are written to a frame of the main movie.

You've also been provided with a set of 15 JPEG images, stored in a folder called pix. You'll need to know the image names. They are: beach, beachombers, canyon, coast1, coast2, dawn, embankment, greenHills, jungleSteps, lake, lighthouse, lunar, monuments, peak1, and peak2. To invoke each image, you'll have to write a complete file path, such as pix/beach.jpg.

Background

1. Defining an Array

Arrays are defined at load time. Since we are storing our statements and functions in a frame script, we do not need the onClipEvent(load) handler, but can write the Array definition simply as the first line of the script in frame 1 of the scripts layer. Any statement written into a frame script and not contained within a function body will execute directly as soon as the frame is accessed by the playback head.

The statement that defines an Array (technically called a constructor) looks like this:

arrayName = new Array ("item", "item");

All the words in italics are arbitrary. Name your Array anything you like. Where you see item, insert an image name. Since the image name is a string, it must be given in quotation marks. Note that the commas separating items go outside the trailing quotation mark. If you entered a number into your Array, it would not have quotation marks around it.

2. Referring to Items in an Array

Every item in the Array has an index number. The first item is numbered 0. Since we start at zero, the index for the last item is one less than the total number of items. That is, a three-element Array has items numbered 0,1, and 2. To indicate an Array item in a subsequent statement, use square brackets:

myArray[14];

or

myArray[n];

where the variable n is elsewhere defined.

3. Length of an Array

To do things like selecting the last item and choosing a random item, you will need to know the number of items in your Array. This information is stored in a property called length. Like any other property, it is referenced through dot notation:

myArray.length

4. Displaying a JPEG File

ActionScript includes a statement called loadMovieNum(). As the name suggests, we mostly use this statement to load a new Flash movie (a .swf file) into some location within the main movie. However, the statement can also be used to load JPEG files.

The loadMovieNum() statement requires at least two arguments within its parentheses: the file path of the JPEG (or movie) to be loaded, and the level on which it will be loaded. Levels are a bit like layers in a PhotoShop document -- virtual slices through an axis pointing out of the monitor toward you (the Z-axis). Unfortunately, Flash also has an interface element called layer, so try not to be confused. Levels come into play only when we're loading new elements.

Here's an example of loadMovieNum() used to load a JPEG:

loadMovieNum("pix/beach.jpg",1);

Note that the file path is given in quotation marks, because it is a string literal. This example shows the basic syntax, but since it indicates a particular file, you'd have to write 15 of these statements to cover all the images in this assignment. Fortunately you can insert a variable into the syntax:

loadMovieNum("pix/"+pixNames[n]+".jpg",1);

The expression pixNames[n] refers to an element of an Array called pixNames that has been defined earlier. The value of n must also be defined. Note that we use the + sign here not as an arithmetic operator but as a concatenator, combining elements into a larger string. This can be a little confusing until you get used to it. The + sign does arithmetic when it's used with numbers, concatenation when it's used with strings.

Finally, notice that both examples above load their images into Level 1 of the movie. That is one level above all the elements defined in the main movie timeline, which are assigned by default to Level 0. Again, numbering in ActionScript always starts with zero.

You may use as many levels as you like to create a complex, multi-layered composition; but for this assignment you only need Level 1, since we want each image to replace its predecessor.

Follow this link for a working solution to the lab assignment.