Need help fine tuning my gallery

Question

Hello everybody... first let me post the code and then I'll post the errors and what needs to be done...
XML Code:
<images>
<image src="images/image1.jpg" title="Jelly 4" url="images/image1.jpg" />
<image src="images/image2.jpg" title="Cat" url="images/image2.jpg" />
<image src="images/image3.jpg" title="Statue" url="images/image3.jpg" />
<image src="images/image4.jpg" title="Arch 3" url="images/image4.jpg" />
<image src="images/image5.jpg" title="Penguin" url="images/image5.jpg" />
<image src="images/image6.jpg" title="Jelly" url="images/image6.jpg" />
<image src="images/image7.jpg" title="Statue 2" url="images/image7.jpg" />
<image src="images/image8.jpg" title="Arch 1" url="images/image8.jpg" />
<image src="images/image9.jpg" title="Arch 2" url="images/image9.jpg" />
</images>
AS 3.0 Code:
import gs.*;
import gs.easing.*;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
function LoadXML(e:Event):void {
     xmlData = new XML(e.target.data);
     buildScroller(xmlData.image);
//declaring variables
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 5;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;
var thisOne:MovieClip
//build scroller from xml
function buildScroller(imageList:XMLList):void{
     for (var item:uint = 0; item < imageList.length(); item++ )  {
          thisOne = new MovieClip();
          //outline
          var blackBox:Sprite = new Sprite();
          blackBox.graphics.beginFill(0xFFFFFF);
          blackBox.graphics.drawRect( -1, -1, 82, 82);
          blackBox.alpha = thumbFadeOut;
          thisOne.addChild(blackBox);
          thisOne.blackBox = blackBox;
          thisOne.x = thisOne.myx = (80 + padding) * item;
          thisOne.itemNum = item;
          thisOne.title = imageList[item].attribute("title");
          thisOne.link = imageList[item].attribute("url");
          thisOne.src = imageList[item].attribute("src");
          //image container
          var thisThumb:Sprite = new Sprite();
          //add image
          var ldr:Loader = new Loader();
          var urlReq:URLRequest = new URLRequest(thisOne.src);
          ldr.load(urlReq);
          //assign event listeners for Loader
          ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
          ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
          thisThumb.addChild(ldr);
          thisOne.addChild(thisThumb);
          //create listeners for this thumb
          thisOne.buttonMode = true;
          thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
          thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
          thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
          //add item to the scroller mc
          scroller.addChild(thisOne);
     scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
function overScrollerItem(e:MouseEvent):void {
     //trace("over" + e.currentTarget.name);
     TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2} );
     TweenMax.to(e.currentTarget.blackBox, 1, { alpha:thumbFadeIn} );
function outScrollerItem(e:MouseEvent):void {
     //trace("out" + e.currentTarget.name);
     TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0} );
     TweenMax.to(e.currentTarget.blackBox, 0.5, { alpha:thumbFadeOut} );
var mcFullImage:MovieClip;
var fullLdr:Loader
function clickScrollerItem(e:MouseEvent):void {
     mcFullImage = new MovieClip();
     fullLdr = new Loader()
     var urlReq:URLRequest = new URLRequest(e.currentTarget.link);
     fullLdr.load(urlReq);
     fullLdr.contentLoaderInfo.addEventListener(Event.INIT, initHandler)
     addChild(mcFullImage);
     mcFullImage.x = 100;
     mcFullImage.y = 90;
     mcFullImage.addChild(fullLdr);
     var image:Bitmap = Bitmap(e.target.content);
     image.smoothing = true;
function initHandler(e:Event):void
     TweenMax.from(fullLdr, 1, {alpha: 0});
     mcFullImage.addEventListener(MouseEvent.CLICK, removeImg);
function removeImg(e:MouseEvent):void
     TweenMax.to(mcFullImage, 0.2, {alpha: 0, onComplete: unloadImg});
function unloadImg(e:Event):void
     removeChild(fullLdr);
     fullLdr.unload();
     removeChild(mcFullImage);
     mcFullImage = null;
function completeHandler(e:Event):void {
     //size image into scroller
     resizeMe(e.target.loader.parent, 80, 80, true, true, false);
     var image:Bitmap = Bitmap(e.target.content);
     image.smoothing = true;
     TweenMax.to(e.target.loader.parent.parent, 0.5, { alpha:1} );
function errorHandler(e:IOErrorEvent):void {
     trace("thumbnail error="+e);
//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
     if (centerHor) {
          mc.x = (maxW - mc.width) / 2;
     if (centerVert){
          mc.y = (maxH - mc.height) / 2;
function moveScrollerThumbs(e:Event):void {
     if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
          if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
               speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
          else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
               speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
          else {
               speed = 0;
          scroller.x += speed;
          //scroller limits
          if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
               scroller.x = -scroller.width + stage.stageWidth - padding;
          else if (scroller.x > padding) { //if scrolled to far right
               scroller.x = padding;
The problem is that when I click on a thumb it shows up the image nicely, but when I click on the image to close it, I get this error:
ArgumentError: Error #1063: Argument count mismatch on XMLScroller_fla::MainTimeline/unloadImg(). Expected 1, got 0.
     at Function/http://adobe.com/AS3/2006/builtin::apply()
     at gs::TweenLite/complete()
     at gs::TweenMax/complete()
     at gs::TweenMax/render()
     at gs::TweenLite$/updateAll()
Also, when there's already an image which is loaded, and I click another thumb, a new image loads on top of the one that is already loaded. I tried removing "thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);" in the clickScrollerItem function but it didn't work.... Any suggestions?

Answer 1

Now I tried adding a boolean to check whether there's an image that is already loaded to the stage or not and still no luck I really need to fix this, so please someone tell me where did I go wrong...!! here's the code:
import gs.*;
import gs.easing.*;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
function LoadXML(e:Event):void {
     xmlData = new XML(e.target.data);
     buildScroller(xmlData.image);
//declaring variables
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 5;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;
var thisOne:MovieClip
var loaded:Boolean = false;
//build scroller from xml
function buildScroller(imageList:XMLList):void{
     for (var item:uint = 0; item < imageList.length(); item++ )  {
          thisOne = new MovieClip();
          //outline
          var blackBox:Sprite = new Sprite();
          blackBox.graphics.beginFill(0xFFFFFF);
          blackBox.graphics.drawRect( -1, -1, 82, 82);
          blackBox.alpha = thumbFadeOut;
          thisOne.addChild(blackBox);
          thisOne.blackBox = blackBox;
          thisOne.x = thisOne.myx = (80 + padding) * item;
          thisOne.itemNum = item;
          thisOne.title = imageList[item].attribute("title");
          thisOne.link = imageList[item].attribute("url");
          thisOne.src = imageList[item].attribute("src");
          //image container
          var thisThumb:Sprite = new Sprite();
          //add image
          var ldr:Loader = new Loader();
          var urlReq:URLRequest = new URLRequest(thisOne.src);
          ldr.load(urlReq);
          //assign event listeners for Loader
          ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
          ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
          thisThumb.addChild(ldr);
          thisOne.addChild(thisThumb);
          //create listeners for this thumb
          thisOne.buttonMode = true;
          thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
          thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
          if(loaded == false) {
          thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
          //add item to the scroller mc
          scroller.addChild(thisOne);
     scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
function overScrollerItem(e:MouseEvent):void {
     //trace("over" + e.currentTarget.name);
     TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2} );
     TweenMax.to(e.currentTarget.blackBox, 1, { alpha:thumbFadeIn} );
function outScrollerItem(e:MouseEvent):void {
     //trace("out" + e.currentTarget.name);
     TweenMax.to(e.currentTarget, 0.5, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0} );
     TweenMax.to(e.currentTarget.blackBox, 0.5, { alpha:thumbFadeOut} );
var mcFullImage:MovieClip;
var fullLdr:Loader
function clickScrollerItem(e:MouseEvent):void {
     mcFullImage = new MovieClip();
     fullLdr = new Loader()
     var urlReq:URLRequest = new URLRequest(e.currentTarget.link);
     fullLdr.load(urlReq);
     fullLdr.contentLoaderInfo.addEventListener(Event.INIT, initHandler)
     addChild(mcFullImage);
     mcFullImage.x = 100;
     mcFullImage.y = 90;
     mcFullImage.addChild(fullLdr);
     var image:Bitmap = Bitmap(e.target.content);
     image.smoothing = true;
     loaded = true;
function initHandler(e:Event):void
     TweenMax.from(fullLdr, 1, {alpha: 0});
     mcFullImage.addEventListener(MouseEvent.CLICK, removeImg);
function removeImg(e:MouseEvent):void
     TweenMax.to(mcFullImage, 0.2, {alpha: 0, onComplete: unloadImg});
function unloadImg():void
     mcFullImage.removeChild(fullLdr);
     fullLdr.unload();
     removeChild(mcFullImage);
     mcFullImage = null;
     loaded = false;
function completeHandler(e:Event):void {
     //size image into scroller
     resizeMe(e.target.loader.parent, 80, 80, true, true, false);
     var image:Bitmap = Bitmap(e.target.content);
     image.smoothing = true;
     TweenMax.to(e.target.loader.parent.parent, 0.5, { alpha:1} );
function errorHandler(e:IOErrorEvent):void {
     trace("thumbnail error="+e);
//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
     if (centerHor) {
          mc.x = (maxW - mc.width) / 2;
     if (centerVert){
          mc.y = (maxH - mc.height) / 2;
function moveScrollerThumbs(e:Event):void {
     if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
          if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
               speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
          else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
               speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
          else {
               speed = 0;
          scroller.x += speed;
          //scroller limits
          if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
               scroller.x = -scroller.width + stage.stageWidth - padding;
          else if (scroller.x > padding) { //if scrolled to far right
               scroller.x = padding;