LOADING JPGS DYNAMICALLY


Now that you've learned how to load an external movie into a project, the process of dynamically loading a JPG should be easy: It's almost identical to that of loading an external SWF. As demonstrated in the previous exercise, the loadMovie() action is used to load an external SWF into a target. You'll then use the same action to load an external JPG as well but with a twist. Take a look at the following syntax:

 loadMovie("myBitmap.jpg", "_root.myClip"); 

This loadMovie() action identifies a JPG as the external asset to load, as opposed to a SWF, as shown in the previous exercise. Here, the myBitmap.jpg JPG is loaded into the _root.myClip target. Once a JPG is loaded into a movie in this fashion, Flash sees it as a movie clip instance, which means you can control it via ActionScript, rotating, resizing or making it transparent just like any other clip.

In this exercise, we'll build slide-show functionality into our project to demonstrate how we can load JPGs into a target on an as-needed basis.

  1. Open virtualaquarium2.fla in the Lesson17/Assets folder.

    This is the file we worked on in the previous exercise.

    Note the empty movie clip instance on the placeholder layer (the small, white circle in the panel graphic's top-left corner): Called placeholder, this is the movie clip instance into which our external JPGs will be loaded. Also note the text field with a name of title, which exists at the top of the panel: We use it in our exercise as well.

    graphics/17fig06.gif

    In this exercise, we'll add some script to Frame 1 of the Actions layer as well as script the two arrow buttons in the scene. Before we do this, however, let's review the contents of the directory containing our externally loaded assets.

  2. Using your operating system's directory exploring application, navigate to the Lesson17/Assets directory.

    • Locate the following JPG images:

    • image0.jpg

    • image1.jpg

    • image2.jpg

    graphics/17fig07.gif

    NOTE

    Only standard JPEG files are supported. Progressive JPEG files are not supported.

    Each of these images is 378 W by 178 H the size at which they will be loaded into the receiving movie. Once the images are loaded, however, Flash will recognize them as movie clip instances and can thus resize and transform them in any number of ways (as we'll demonstrate in the next exercise).

  3. Return to Flash. With the Actions panel open, select Frame 1 of the Actions layer and add the following line of script just below where we created the backgrounds array in the previous exercise:

     slides = new Array(["Shark", "image0.jpg"], ["Jellyfish", "image1.jpg"],  ["Seahorse", "image2.jpg"]); 

    This creates a new, two-dimensional array named slides . As you learned in Lesson 7, this is an array where each element in the array contains more than one item. The first part of each of these elements is simply a string description of the image; the second represents the directory path to that image.

    Let's next create a function that will load these images into our project, with the functionality of a slide show.

  4. Place the following function definition just below the randomBackground() function definition:

     function changeSlide(number){    if (number >= 0 && number < slides.length){      currentSlide = number;      _root.title.text = slides[number][0];      loadMovie (slides[number][1], "_root.placeholder");      }  } 

    graphics/17fig08.gif

    This creates a function named changeSlide() . Let's look at how this function works.

    First, you'll notice that the function is passed a parameter named number a 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 will only execute when a number within a certain range is passed to it. 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 will only execute if number is 0, 1, or 2. (You'll begin to understand why we've set up the function to operate this way in a moment.)

    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 to whatever slides[number][0] evaluates to. The last line in the function uses a loadMovie() action to load one of our external JPG images into the instance named placeholder, which is on the root timeline. To make sense of this function, let's take a look at a couple scenarios:

    If a value of 1 were passed to this function when called, the if statement would determine that to be an acceptable value, and thus the actions in the function would be executed in which case they would be evaluated as follows:

     currentSlide = 1;  _root.title.text = slides[1][0];  loadMovie (slides[1][1], "_root.placeholder"); 

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

     currentSlide = 1;  _root.title.text = "Jellyfish";  loadMovie ("image1.jpg", "_root.placeholder"); 

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

    graphics/17fig09.gif

    Now let's take a look at one more scenario. If, when this function was called, a value of 3 were passed to it, the if statement would prevent it from executing and thus prevent our project from attempting to load content that does not exist (as defined in the slides array). In other words, the slides array does not contain an element at index number 3; thus, the function would not work properly if it were allowed to execute. Obviously, if we were to increase the number of elements in the slides array, the upper limit accepted by the if statement would dynamically increase as well.

  5. Place the following function call just below the randomBackground() function call:

     changeSlide(0); 

    This line of script calls the changeSlide() function, passes that function a value of 0, and as a result displays the initial image when the movie is played. Note that this initial function call will set the value of currentSlide to 0 an important thing to keep in mind as you progress through the next couple steps.

  6. With the Actions panel open, select the button on the stage that points left and attach this script:

     on(release){    changeSlide(_root.currentSlide - 1);  } 

    The above script calls the changeSlide() function we defined in Step 4. The parameter value passed to that function will depend on how _root.currentSlide - 1 is evaluated. As just mentioned, when the movie initially plays, the changeSlide() function is called and passed a value of 0. Consequently, currentSlide is set to 0. Thus, pressing the button that points left, just after the movie begins to play, will result in the changeSlide() function being called and passed a value of -1 (the result of subtracting 1 from the value of currentSlide , as shown). The if statement in the changeSlide() function then evaluates that value (-1) and prevents the function from executing (see Step 4). As a result, this button does nothing until currentSlide has a value greater than 0. (This button cannot navigate the slide show beyond the initial image.) The other arrow (the arrow pointing right) button increases the value, as shown in the next step.

  7. With the Actions panel open, select the button that points right and attach this script:

     on(release){    changeSlide(_root.currentSlide + 1);  } 

    This script is identical to the one in the previous step with one exception: The parameter value passed to the changeSlide() function depends on how _root.currentSlide + 1 is evaluated. If currentSlide has a value of 0 when this button is pressed (after the movie begins playing), the changeSlide() function is sent a value of 1 (the result of adding 1 to the value of currentSlide , as shown). You'll remember that this value is evaluated by the if statement in the function, which, in in this case, since the number is between 0 and 2, allows the continued execution of the function, which will load the appropriate JPG, as described in Step 4. As the image is loading, the changeSlide() function also updates the value of currentSlide (in this case to 1) so that the arrow buttons we just scripted can act accordingly, based on this value, when they are subsequently pressed.

    This button cannot navigate the slide show beyond the last image because once currentSlide has a value of 2, pressing this button again would send the changeSlide() function a value of 3 (which, you'll remember, the if statement in that function would analyze, then preventing the function from executing).

    In tandem, these two buttons advance and rewind the slide show though only within the limits described above.

  8. Choose Control > Test Movie.

    As soon as the movie begins playing, the image of a shark appears. In addition the title 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.

    Press the left-arrow button, and you'll see that nothing happens. Press the right-arrow button once and the next JPG image will load; press it again and another JPG will load. However, if you press this button a third time nothing will happen because you've reached the upper limit of how far this button can advance. The left button has a similar restriction, only in the opposite direction.

    TIP

    If you ever wish to remove a movie that's been loaded into an instance (so that the instance becomes empty), you can use the following syntax:

     unloadMovie("_root.nameOfInstance"). 
  9. Close the test movie, and save the file as virtualaquarium3.fla.

    This completes the exercise. We will build on this file in the following exercises.

TIP

If you wanted to add additional slides to this project, you would simply add the appropriate data to the slides array and place the JPG files in the directory. The movie would then accommodate the new images automatically. This means you can add hundreds of images without affecting the file size of the main movie.


TIP

Because the images are external, you can easily bring them into a photo editor, update or change them, then resave them, and your changes will be reflected the next time the project is played.




Macromedia Flash MX ActionScripting Advanced. Training from the Source
Macromedia Flash MX ActionScripting: Advanced Training from the Source
ISBN: 0201770229
EAN: 2147483647
Year: 2002
Pages: 161

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net