Adding a Button Click to Change Images

The previous page used a URLLoader object to get XML data consisting of image file names and then when this load is complete, we used a Loader object to load automatically one of the image files, randomly selected. There is a subtle change one must make if we want to do subsequent file loads from a button click, similar to the XML slideshow we presented in the tutorial, Using the Transition Manager Class in Flash CS3. We demonstrate an applet with this effect as well as the necessary code revisions.

Click the button to see a random image from the four images (by Jess Ensley) whose names are specified in the external xml file

Setting up the stage

This example uses the same stage size as the example on the previous page, but we add a button to the lower right hand corner. The button we used here is the "flat blue play" button from Window > Common Libraries > Buttons, and we gave it the instance name btnAnother. Because this is added directly at authoring time, any objects added at runtime will by default occupy a higher depth and will therefore cover the button. In the code below, you will see that the pictures are added specifically to depth 0 so that we don't have this problem.

The ActionScript code

The first part of the code is the same as in the previous example. See comments on the previous page for more on this.

var pHeight:Number = 200;

var pWidth:Number = 200;

var listLoader:URLLoader = new URLLoader( new URLRequest("filelist.xml") );

var picLoader:Loader = new Loader();

listLoader.addEventListener(Event.COMPLETE, gotList);

The first difference with this example is that we declare the variables xmlData and numImages to have global scope. That is, we would like these variables to be accessible by more than one function. In the example on the previous page, these variables are only used in the one function in which they are declared.

var xmlData:XML;

var numImages:Number;

In the gotList function, the only change is that we no longer need to declare these two variables -- we just need to set their value as we did before.

function gotList(evt:Event):void {

xmlData = XML(listLoader.data);

numImages = xmlData.pix.length();

...

}

The gotPic function similarly uses a globally declared BItmap object (called thisBmp) instead of the local declaration in the example on the previous page. There are two other differences (on bold lines in the code below) from the gotPic function on the previous page: We add thisBmp as a child of the main timeline specifically at level 0 so that it goes behind the button (btnAnother) that is already on the stage; and we manipulate the visibility of btnAnother as part of a strategy to make the button unavailable while the next image is loading.

var thisBmp:Bitmap;

 

function gotPic(evt:Event):void {

thisBmp = Bitmap(picLoader.content);

thisBmp.x = 0;

thisBmp.y = 0;

var thisWidth:Number = thisBmp.width;

var thisHeight:Number = thisBmp.height;

 

thisBmp.scaleX = pWidth/thisWidth;

thisBmp.scaleY = pHeight/thisHeight;

 

addChildAt(thisBmp,0);

picLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, gotPic);

btnAnother.visible = true;

}

The primary addition to this example is the btnAnother button and the function (anotherPic) that is called when this button is clicked. In this function, we first make the btnAnother button invisible (so it cannot be clicked while an image is loading -- the alternative would lead to i/o error if the button is clicked rapidly), removing the last Bitmap object from the main timeline, and then the loading of a new random object. Note that we reset picLoader to be a new Loader each time the button is clicked -- this has to do with issues of "reparenting" that are beyond the scope of this "basic area" tutorial.

btnAnother.addEventListener(MouseEvent.CLICK, anotherPic);

function anotherPic(mevt:MouseEvent):void {

btnAnother.visible = false;

removeChild(thisBmp);

picLoader = new Loader();

var stImage:String = xmlData.pix[Math.floor(numImages*Math.random())].toString();

picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, gotPic);

picLoader.load( new URLRequest(stImage) );

}

Download

The files used on this page of the tutorial are randomPicButton.fla, filelist.xml, pic1.jpg, pic2.jpg, pic3.jpg, and pic4.jpg. To save time, you can download the file randompic.zip to get all the source files and sample images for this tutorial.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.