The Ones That Got Away: Image Loader and Random Link Apps in Flash

Of the examples and solutions I developed for inclusion in the The Flash Anthology: Cool Effects & Practical ActionScript, there were several that didn't make it into the book. I'll be presenting a number of these solutions over the coming months, starting with this tutorial.

Here, we'll look at two very practical solutions: the loading of images using components, and creating a random "Link of the Day" display for your site.

Before we get started, make sure you download the archive of all the code we'll see in these examples.

Image Loading with Components

This solution requires: Flash MX 2004

I thought it would be a great idea to create a dynamic image loader that utilized some of the built-in components in Flash MX 2004, but I wanted to make sure the information was displayed in a structured way.

Here's the application in action.

In this application, the Photo drop-down menu is populated according to the selection in the Category drop-down. When the user selects a photo, the image is displayed on the right-hand side.

Setting the Scene

The source files for this example are Dynamicimageloader.fla and dynamicimageloader_graphics.zip which are available from the code archive.

1. Create a new 500 x 320 pixel Flash document. Accept the default frame rate and click OK.


2. Rename the default layer Actions and add two further layers below, named Components and Background.


3. Select the first frame of the Components layer. Drag two instances of the ComboBox component from the UI Components section of the Components Panel onto the stage, positioning the second below the first. Name the instances parentCombo and childCombo.
   We will populate the childCombo instance dynamically in just a moment, using values from several arrays.


4. With the parentCombo instance selected, add the information from the table shown below into the Parameters section of the Component Inspector:



The labels for the Category ComboBox will appear as Phireworx, Work, and Home. We'll use the "data" parameters to trigger the population of the childCombo ComboBox component.

5. Drag three label components from the UI Components section of the Components Panel. Position one above the parentCombo ComboBox, one above the childCombo ComboBox, and one to the right of the first label. Select each label component and change the text parameter within the Property Inspector to Category, Photo and Image respectively.


6. Drag a Loader component from the UI Components section of the Components Panel into the first frame of the Components layer and name the instance imageLoader.
   We'll use the Loader component as a repository for the images we'll load dynamically in a moment.


7. Make the application more attractive: add a rounded framing rectangle with a smooth linear gradient background to the Background layer. Lock the Background layer.

We're all done here; let's add the ActionScript that glues the application together!

Adding the ActionScript

The ActionScript for this example hinges around three multidimensional arrays that hold "child" information for the "parent" categories. Through careful modification, and event listeners attached to the ComboBox components, we can trigger a cascade of events that result in the display of the relevant image.

8. Select the first frame of the Actions layer and add the following code within the Actions Panel:

var PhireworxInfo = new Array(["Phireworx Logo", "pw001.jpg"], ["Foto Logo", "pw002.jpg"], ["Juno Logo", "pw003.jpg"]);
var WorkInfo = new Array(["Work Logo", "wk001.jpg"], ["Work Image 001", "wk002.jpg"], ["Work Image 002", "wk003.jpg"]);
var HomeInfo = new Array(["Home Image", "hm001.jpg"], ["Home Image 001", "hm002.jpg"], ["Home Image 002", "hm003.jpg"]);
function populateChild() {
 childCombo.removeAll();
 var childArray = eval(parentCombo.getSelectedItem().data);
 for (var i = 0; i < childArray.length; i++) {
   childCombo.addItem(childArray[i][0]);
 }
}
function showImage(img) {
 loadMovie(img, "imageLoader");
}
// Parent Combo Listener
var parentComboListener = new Object();
parentComboListener.change = function() {
 populateChild();
};
parentCombo.addEventListener("change", parentComboListener);
// Child Combo Listener
var childComboListener = new Object();
childComboListener.change = function() {
 var childArray = eval(parentCombo.getSelectedItem().data);
 showImage(childArray[childCombo.selectedIndex][1]);
};
childCombo.addEventListener("change", childComboListener);
// First run when loaded, populate combo's
populateChild();
var childArray = eval(parentCombo.getSelectedItem().data);
showImage(childArray[childCombo.selectedIndex][1]);

Let's get the code scalpel again and see how this looks on the ActionScript operating table. First of all, we create three multidimensional arrays.

var PhireworxInfo = new Array(["Phireworx Logo", "pw001.jpg"], ["Foto Logo", "pw002.jpg"], ["Juno Logo", "pw003.jpg"]);
var WorkInfo = new Array(["Work Logo", "wk001.jpg"], ["Work Image 001", "wk002.jpg"], ["Work Image 002", "wk003.jpg"]);
var HomeInfo = new Array(["Home Image", "hm001.jpg"], ["Home Image 001", "hm002.jpg"], ["Home Image 002", "hm003.jpg"]);

These arrays contain the description of the image and its filename, like so:

["Phireworx Logo", "pw001.jpg"]

Notice that the array names (PhireworxInfo, WorkInfo, etc.) are the same as the "data" values within the parentCombo ComboBox component. As you will see in a moment, we use the "data" property from the parentCombo ComboBox to trigger the population of the childCombo ComboBox.

We then add an event listener to the parentCombo ComboBox, which waits for its value to change.

/ Parent Combo Listener
var parentComboListener = new Object();
parentComboListener.change = function()
{
 populateChild ();
};
parentCombo.addEventListener("change", parentComboListener);

When the value is registered as changing, we trigger the populateChild() function.

function populateChild()
{
 childCombo.removeAll();
 var childArray = eval(parentCombo.getSelectedItem().data);
 for (var i = 0; i < childArray.length; i++)
 {
   childCombo.addItem(childArray[i][0]);
 }
}

First of all, this function removes all items from the childCombo ComboBox, to make it nice and tidy.

childCombo.removeAll();

We then transfer the contents of the data parameter of the parentCombo ComboBox to a variable called childArray, which basically takes the array we defined at lines 1-3 of the code, and matches it to the data parameter of the parentCombo ComboBox. We use this to populate the childArray variable.

We then use a for loop based on the length of the array to add items to the childCombo ComboBox. The items added form the first part of the multidimensional array (the description).

childCombo.addItem(childArray[i][0]);

With the childCombo ComboBox populated, we can move on to the section of code that deals with what happens when the value changes.

Again we set up an event listener, this time for the childCombo instance for the change event.

// Child Combo Listener
childComboListener = new Object();
childComboListener.change = function()
{
 var childArray = eval(parentCombo.getSelectedItem().data);
 showImage(childArray[childCombo.selectedIndex][1]);
};
childCombo.addEventListener("change", childComboListener);

This time, however, a different function is triggered -- the showImage() function. We pass it the second part of the multidimensional array (the image name) as a parameter.

Note: As both the selectedIndex property of the ComboBox and the "data" parameter of the childCombo instance are array-based, we can use the selectedIndex value of the childCombo ComboBox to select the image name for the currently assigned array.

showImage(childArray[childCombo.selectedIndex][1]);

The showImage() function is the simplest part of the ActionScript. It simply triggers the loadMovie() function to load the image in question into the imageLoader Loader component:

function showImage(img)
{
 loadMovie (img, "imageLoader");
}

When the movie is run first with no selection, we simply trigger child population and image retrieval using the following ActionScript:

// First run when loaded, populate combo's
populateChild();
var childArray = eval(parentCombo.getSelectedItem().data);
showImage(childArray[childCombo.selectedIndex][1]);

9. Save the document to a location of your choice and export your SWF, making sure the 'ActionScript 2.0' option is selected in the 'ActionScript version' dropdown.


10. Extract the contents of the dynamicimageloader_graphics.zip file from the code archive into the same directory as your exported SWF.
    We need to extract the image to the same directory as the SWF file, because this is referenced within the showImage() function as being located in the same directory


11. Preview your exported SWF file.

That's a great technique! It's scalable too -- simply modify the array information, the parentCombo ComboBox (if you require more categories) and the actual images that are imported. The technique makes use of the built-in components within Flash MX 2004 and creates a clever interaction between ComboBox instances.

You could easily add a ProgressBar component to give you feedback on how much of the file is loaded if you're working with larger files, and use XML data to populate both the parent and child combo boxes, but I'll leave it up to you to extend the effect!

Random Link of the Day

What I set out to do in this example was to create a random featured link of the day for which the link was selected randomly from a multidimensional array within a loop, then launched within a new chromeless browser window using simple JavaScript behaviors. The effect works really well and leverages some built-in JavaScript functions such as closing the parent window in which the SWF file is embedded, and triggering printing of the page.

There is much scope for extending this effect, but that's what learning Flash is all about: experimenting with effects and extending them for your own needs.

To edit this effect, locate RandomLinkOfTheDay.fla within the code archive.

Setting the Scene

1. Create a new Flash document that's 510 pixels wide and 105 pixels high. Change the default frame rate to 24 fps and click OK.


2. Rename the default layer Actions, and add below it two further layers called Interface and Background.


3. Create a background rectangle to frame the application within the first frame of the Background layer as shown in Error! Reference source not found.. Lock the Background layer.


4. Select the first frame of the Interface layer and create a new movie clip called linkMC. Name the instance linkMC. Embed a dynamic text box that's approximately 445 pixels wide and 18 high within the linkMC movie clip. Name the instance randomlink.


5. Select the randomLink text box and click Character in the Property Inspector. Click the Specify Ranges checkbox and select Uppercase, Lowercase, Numerals and Punctuation. Add / and \ under the Include these characters section. Click OK. Click the Show border around text option from the Property Inspector
   This dynamic text box will be referenced and populated later by a series of URLs from part of the array that we'll create shortly via ActionScript.


6. Move the linkMC movie clip approximately to center-stage, leaving enough room to add more content above and below the movie clip.


7. Create a new dynamic text box that's approximately 160 pixels wide above, and aligned with, the upper right edge of the linkMC movie clip. Name the instance reccount. Select Character from the Property Inspector, click the Specify Ranges checkbox, and select Uppercase, Lowercase, Numerals and Punctuation. Click OK. On the color swatch in the Property Inspector, change the text color to #990000.
   This dynamic text box will constantly be updated when the ActionScript loops are running in a moment, and will provide feedback as to whether a link is in the process of being selected, or is selected.


8. Create another dynamic text box that's approximately 160 pixels wide. Align it with the bottom right edge of the linkMC Movie Clip naming the instance title. Select Character from the Property Inspector, Specify Ranges checkbox and select Uppercase, Lowercase, Numerals and Punctuation. Click OK.
   This dynamic text box will hold another part of the array that we will select randomly, and will hold the title for the URL within the 'randomlink' dynamic text box.


9. Create a new static text box above the linkMC Movie Clip. Align it with the upper left edge of the clip, and add the text Featured Link of the Day.


10. Drag three instances of the button component from the UI Components of the Actions Panel into the first frame of the Interface layer. Arrange two instances so that they are grouped together at the bottom left edge of the linkMC Movie Clip; align the other with the lower right edge. Name the instance left to right closeParent, printPage, windowLauncher.


11. With each of the button instances selected, within the Property Inspector change the label parameters left to right as follows: Close Parent, Print, launch.
    We will use these buttons to execute certain JavaScript functions later in the example.


12. Save your work.

We've added all the dynamic text boxes and buttons that we need to set the scene for the effect, now we need to add the ActionScript to the movie to make it all gel together.

Go to page: 1 2 Next

If you liked this article, share the love:

• Save to Delicious
Print-Friendly Version Email to a Friend Suggest an Article