Loading JPGs Dynamically

Open virtualaquarium2.fla.

We'll continue working with this file from the preceding exercise.

Note the empty movie clip instance on the Placeholder layer (the small white circle in the panel graphic's upper-left corner). Called placeholder_mc, this is the movie clip instance into which our external JPGs will be loaded. Also note the text field with the name title_txt, at the top of the panel; we'll use that in our exercise as well.

Using your operating system's directory-exploring application, navigate to the Lesson18/Assets directory and locate the image files named image0.jpg, image1.jpg, and image2.jpg.

Return to Flash. With the Actions panel open, select Frame 1 of the Actions layer and add the following line of script just below the backgrounds array from the preceding exercise:

var slides:Array = new Array(["Shark", "image0.jpg"], ["Jellyfish",)"image1.jpg"],

 ["Seahorse", "image2.jpg"]);

This step creates a new two-dimensional array named slides. As you learned in Lesson 6, "Creating and Manipulating Data," this is an array in which each element contains more than one item. The first part of each element is simply a string description of the image; the second parameter represents the directory path to that image.

Add the following script just below the randomBackground() function call:

var currentSlide:Number;

function changeSlide(number:Number){

  if (number >= 0 && number < slides.length){

    currentSlide = number;

    title_txt.text = slides[number][0];

    loadMovie (slides[number][1], "placeholder_mc");

  }

}

The first line creates a variable named currentSlide, which will track the currently visible slide. This variable is created outside the function because it needs to exist as long as the application is running. Upcoming steps will discuss how this variable is used.

The next part of the script creates a function named changeSlide(). Let's look at how this function works.

Notice that the function is passed a parameter named numbera numerical value that the function will use to determine which image to load. The if statement at the beginning of the function definition dictates that the function executes only when a number within a certain range is passed to the function. The lower end of this range is 0, and the upper end depends on the number of elements in the slides array. Thus, the if statement basically states that if number is greater than or equal to 0 and less than the length of the slides array (which is 3 because the array contains three elements), the actions in the function should be executed. Under these circumstances, the function executes only if number is 0, 1, or 2. (In a moment, you'll begin to understand why we've set up the function this way.)

The first action in the function sets the value of currentSlide to the value of the number parameter passed to the function. This variable's value will be used a bit later, when executing actions on our two arrow buttons.

The next line in our script sets the value of the text field title_txt to the value of slides[number][0]. The last line in the function uses a loadMovie() action to load one of our external JPG images into the instance named placeholder_mc, which is on the root timeline. To make sense of this function, let's look at a couple of scenarios:

If the value 1 is passed to this function, the if statement determines that to be an acceptable value, and the actions in the function are executedin which case, they're evaluated as follows:

currentSlide = 1;

title_txt.text = slides[1][0];

loadMovie (slides[1][1], "placeholder_mc");

Because the last two actions in the function reference elements in the slides array, you can further break down those actions:

currentSlide = 1;

title_txt.text = "Jellyfish";

loadMovie ("image1.jpg", "placeholder_mc");

The result is that image1.jpg is loaded into the instance named placeholder_mc and the text string "Jellyfish" appears above the panel in the title_txt text field.

Add the following function call just below the randomBackground() function call:

changeSlide(0);

Add the following event handler at the end of the current script:

prev_btn.onRelease = function(){

  changeSlide(currentSlide - 1);

}

Add the following event handler after the script added in Step 6:

next_btn.onRelease = function(){

  changeSlide(currentSlide + 1);

}

This script adds an onRelease event handler to the next_btn instance, similar to the one in Step 6 but with one exception: the parameter value passed to the changeSlide() function depends on how currentSlide + 1 is evaluated. If currentSlide has a value of 0 when this button is clicked (after the movie begins playing), the changeSlide() function receives 1 (the result of adding 1 to the value of currentSlide). Remember that this value is evaluated by the if statement in the function. In this case, because the number is between 0 and 2, the if statement allows the continued execution of the function, which loads the appropriate JPG as described in Step 4. As the image is loading, the changeSlide() function updates the value of currentSlide based on the value passed to the function (1 in this case) so that the prev_btn and next_btn buttons we just scripted can act based on this value when subsequently clicked.

The next_btn button instance cannot navigate the slideshow beyond the last image, because after currentSlide has the value 2, clicking this button again would send the changeSlide() function a value of 3 (which the if statement in that function would analyze, and then would prevent the function from executing).

Choose Control > Test Movie.

As soon as the movie begins playing, the image of a shark appears and the title_txt text field above the panel displays the text string "Shark". The upper-left corner of the image is placed at the registration point of the empty movie clip into which it was loaded.

Click the prev_btn instance and nothing happens. Click the next_btn instance once, and the next JPG image loads; click it again and another JPG loads. However, if you click this button a third time, nothing happens because you've reached the upper limit of how far this button can advance. The prev_btn button instance has a similar restriction in the opposite direction.

unloadMovie("nameOfInstance")

Close the test movie and save the file as virtualaquarium3.fla.