Question

In Flash CS4, I’m creating a photo gallery. My goal is to load different thumbnails from a number of images. I have managed that when one clicks an image, a number of thumbnails are being displayed, but when one clicks another image, the new thumbnails are placed on top of the old ones. Can someone help me on how to get rid of the old thumbnails?

Here is the code:

for (var i:int = 0; i < thumbnails.length(); i++) {   imgLoader.unload();   imgLoader = new Loader();   imgLoader.load(new URLRequest(thumbnails[i]));   imgLoader.name= i;   imgLoader.x =  95 * columns;   imgLoader.y = 80 * rows;   imgLoader.alpha = 0;   details.gallery.addChild(imgLoader);    if (columns+1< 5) {     columns++;   } else {     columns = 0;     rows++;   } } 

Answer 1

This is where an Array is your friend. You could do this without an array by merely using a while loop to remove every last child from the sprite or movieclip that you added the thumbs to. The reason we use arrays is so that we can reuse the thumbs, instead of reloading them we merely remove them from the display list. You push a reference to each object into an array for each thumb as you add it to the display list. Each thumbContainer node in the XML gets its own array which get added to the main array. The main array holds references to thumbnail arrays. Thumbnail arrays hold references to loaded thumbnails so that they can be added and removed from the display list. If you plan to never use the thumbs after they have been seen once you may set it’s reference equal to null, otherwise merely remove it from the display list; There is no reason to load it many times. When you are ready to add the new thumbs you must clear out previous thumbs. The easiest way to do this is with a while loop.

//Assuming the thumbs were loaded into container while(container.numChildren > 0) {     //Remove the first child until there are none.     container.removeChildAt(0); }  //The XML / 2 Containers / thumbContainer[0] and thumbContainer[1] 

<?xml version='1.0' encoding='utf-8'?> <xml>     <thumbContainer>         <thumb path='path/to/file' />         <thumb path='path/to/file' />         <thumb path='path/to/file' />     </thumbContainer>     <thumbContainer>         <thumb path='path/to/file' />         <thumb path='path/to/file' />         <thumb path='path/to/file' />     </thumbContainer> </xml> 

package {     import flash.display.Sprite;     import flash.events.Event;     import flash.events.MouseEvent;     import flash.net.URLLoader;     import flash.net.URLRequest;      public class DocumentClass extends Sprite     {         private var _container:Sprite;         private var _mainArray:Array;         private var _xml:XML;         private var _urlLoader:URLLoader;         private var _urlRequest:URLRequest;          public function DocumentClass():void         {             if(stage) _init();             else addEventListener(Event.ADD_TO_STAGE, _init, false, 0 , true);         }         private function _init(e:Event = null):void         {             //Will contain arrays for each thumbContainer in the XML.             _mainArray = [];              _urlRequest = new URLRequest('path/to/xml');             _urlLoader = new URLLoader();             _urlLoader.addEventListener(Event.COMPLETE, _onXMLComplete, false, 0, true);               }         private function _onXMLComplete(e:Event):void         {             _xml = new XML(e.target.data);              _loadThumbs(0);         }         private function _loadThumbs(pIndex:int):void         {             _clearThumbs();              //Find out how many sets of thumbs there and add to _mainArray             for(var i:int = 0; i < _xml.thumbContainer.length(); i++)             {                 var tempArray:Array = new Array();                  for(var j:int = 0; j < _xml.thumbContainer[i].thumb.length; j++)                 {                     tempArray[i].push(_xml.thumbContainer[i].thumb[j].@path);                 }                 _mainArray.push(tempArray);             }               //Here is where we add the new content to container, or you can call a function to do it.         }         private function _clearThumbs():void         {             while(container.numChildren > 0)             {                 //Remove the first child until there are none.                 container.removeChildAt(0);             }         }     } } 

Again, it is good practice to hold a reference to something that is reusable and to simply remove it from the display list instead of setting to null and prepping for garbage collection only to be loaded again later. I already have written more than I intended and wasn’t able to slap in all the code I wanted. It is important to setup the code that makes sure it only loads a particular set of thumbs once; That is the whole idea. As for removing them, it’s as simple as the while loop I showed you, you just need to know the name of the DisplayObjectContainer that parents them.