4 Replies Latest reply on Feb 21, 2010 10:35 AM by xxxcocolinoxxx

    Need help with a xml photo gallery

    xxxcocolinoxxx

      First, hello to everyone. My name is Tudor , i'm from Romania and i have a flash project which implies building an XML driven scrolling photo galery. Very sorry if my english will slip in some phrases. Well , the question for which i must get an answer is: I already built the gallery, everything works ok.... but ... when i want to make some changes when the pictures load .... well here is the problem. I will print the code and briefly explain and ask at the end....

       

       

       

      import com.greensock.TweenLite;

      import com.greensock.TweenMax;

      import fl.transitions.Tween;

      import fl.transitions.easing.*;

      import fl.transitions.*;

      import fl.containers.UILoader;

       

       

       

      var MASK_WIDTH:Number = myMask_mc.width;

      var menuHolder:MovieClip = new MovieClip();

      //menuHolder.x = myMask_mc.x;

      //menuHolder.y = myMask_mc.y;

      addChild(menuHolder);

      var mouseIsOver:Boolean = false;

      var oldX:Number = menuHolder.x;

      menuHolder.mask = myMask_mc;

       

       

      import flash.filters.ColorMatrixFilter;

      import fl.motion.AdjustColor;

       

      var color : AdjustColor;

      var colorMatrix : ColorMatrixFilter;

      var matrix : Array;

      var filterBW : Array;

       

       

       

      color = new AdjustColor();

      color.brightness = 20;

      color.contrast = 20;

      color.hue = 0;

      color.saturation = -100;

       

       

       

      matrix = color.CalculateFinalFlatArray();

      colorMatrix = new ColorMatrixFilter(matrix);

      filterBW = [colorMatrix];

       

       

       

       

      /// HERE i read and parse the XML

       

      var xmlLoader:URLLoader = new URLLoader();

      var xmlData:XML = new XML();

       

      xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

      xmlLoader.load(new URLRequest("C:/Documents and Settings/Sm/Desktop/feteModel.xml"));

       

      function LoadXML(e:Event):void

      {

      xmlData = new XML(e.target.data);

      ParsePictures(xmlData);

      }

       

      function ParsePictures(input:XML):void

      {

      var mainPictures:Array = new Array();

      var firstPictures:Array = new Array();

      var secondPictures:Array = new Array();

      var thirdPictures:Array = new Array();

      var forthPictures:Array = new Array();

      var dimensiuniArray:Array = new Array();

      var heightArray:Array = new Array();

      var eyeColorArray:Array = new Array();

      var hairColorArray:Array = new Array();

      var numeArray:Array = new Array();

       

      var mainPicturesList:XMLList = input.fata.pozaPrincipala;

      var firstPicturesList:XMLList = input.fata.poza1;

      var secondPicturesList:XMLList = input.fata.poza2;

      var thirdPicturesList:XMLList = input.fata.poza3;

      var forthPicturesList:XMLList = input.fata.poza4;

      var dimensiuniList:XMLList = input.fata.dimensiuni;

      var heightList:XMLList = input.fata.inaltime;

      var eyeColorList:XMLList = input.fata.culoare_ochi;

      var hairColorList:XMLList = input.fata.culoare_par;

      var numeList:XMLList = input.fata.nume;

       

       

       

      for each (var element1:XML in mainPicturesList)

      {

      mainPictures.push(element1);

       

      }

       

      for each (var element2:XML in numeList)

      {

      numeArray.push(element2);

      }

       

       

       

         /////////// HERE I LOAD THE PICTURES ...... i must say that menuItem is a mc - exported as a class , which basically has inside a textfield, a UILoader and a preloader - also movieclip. Also i need the pictures to be black and white when they are displayed and when the mouse is over to color

       

       

       

       

      for (var i=0; i < mainPictures.length; i++)

      {

       

       

       

      var menuItem:MenuItem;

      menuItem = new MenuItem();

       

       

       

      menuItem.y = 200;

      menuItem.x =(i * (menuItem.width+1))+150;

       

       

       

       

       

      menuItem.itemLoader.filters = filterBW;

      menuItem.itemText.text = numeArray[i];

      menuItem.itemLoader.source = mainPictures[i];

      menuItem.itemLoader.maintainAspectRatio = false;

      menuItem.itemLoader.addEventListener(Event.COMPLETE, completeHandler);

      //menuItem.itemLoader.addEventListener(Event.COMPLETE,uiLoaded, false, 0, true);

      //menuItem.itemLoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);

      //menuItem.itemLoader.load();

      //menuItem.preloader_mc.visible = true;

       

       

       

      function completeHandler(event:Event)

      {

           //trace(menuItem.itemText.text);

      }

       

       

       

      menuItem.mouseChildren = false;

       

      menuItem.buttonMode = true;

       

       

        menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);

        menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);

       

        //Add the menuItem to the menuHolder

       

        menuHolder.addChild(menuItem);

       

      }

       

       

       

       

       

      menuHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMenu);

      menuHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMenu);

       

       

       

       

      function mouseOverMenu(e:Event):void

      {

      mouseIsOver = true;

       

       

      //Calculate the vertical distance of how far the mouse is from

      //the topleft  of the mask.

      var distance:Number = mouseX - myMask_mc.x;

       

      //Calculate the distance in percentages

      var percentage:Number = distance / MASK_WIDTH;

       

      //Save the holder's old y coordinate

      oldX = menuHolder.x;

       

       

      var targetX:Number = -((menuHolder.width - MASK_WIDTH +150) * percentage) + myMask_mc.x;

       

      //Tween the menuHolder to the target coordinate

      TweenMax.to(menuHolder, 5, {x: Math.round(targetX)});

       

       

       

      }

       

       

      //This function is called when the mouse is out of the menu

      function mouseOutMenu(e:Event):void

      {

      mouseIsOver = false;

      }

       

       

      var tw1:Tween;

      var tw2:Tween;

       

       

       

      function mouseOverItem(e:Event):void

      {

      var item:MenuItem = e.target as MenuItem;

      menuHolder.addChild(item);

       

      item.itemLoader.filters = [];

      //trace(item.itemText.text);

      tw1 = new Tween(item,"scaleX", Strong.easeInOut,1, 1.25,0.25,true);

      tw2 = new Tween(item,"scaleY", Strong.easeInOut,1, 1.25,0.25,true);

      }

       

       

       

      //This function is called when mouse moves out of the item

      function mouseOutItem(e:Event):void

      {

      var item:MenuItem = e.target as MenuItem;

      item.itemLoader.filters = filterBW;

      tw1 = new Tween(item,"scaleX", Strong.easeInOut,1.25, 1,0.25,true);

      tw2 = new Tween(item,"scaleY", Strong.easeInOut,1.25, 1,0.25,true);

      }

       

       

       

      }

       

      ////

       

       

       

       

      Now , i want each picture to scale when it fully loads ... i thought it will be enough to put it on the completeHandler function , but here is the problem - it scales only the last picture ..... eg. if there are 5 , it scales only the 5th ..... i tried to trace the name of the picture inside the completeHandler and also , i got 4 identical names - the name of the last picture ...... my question  is : why is the completeHandler firing only for the last item?   anyone has any idea why this is hapening? and more how can i fix it? PLEASE ... i'm burning my brain here for half a day here ..........  THANKS in advance!!!!!!!!!!!!!!!!!!   

       

                                                                                                                                                                      REGARDS, Tudor

       

       

       

       

       

        • 1. Re: Need help with a xml photo gallery
          Ned Murphy Adobe Community Professional & MVP

          If you are using a "for" loop to do the loading, it can process thru the entire set of loops before the first image is loaded.  If you want to have control over the loading you should load things sequencially.

           

          So instead of using a for loop, build a pseudo loop using an array of the files to load, a counter variable, a loading function, and a loadComplete function.  Have the loading function load just one image using the counter variable to identify which image in the array to load.  Have the loadComplete function process the one image that was just kloaded, increment the counter, and call the loading function if the counter value does not equal the length of the array.

          1 person found this helpful
          • 2. Re: Need help with a xml photo gallery
            xxxcocolinoxxx Level 1

            hello ned,

             

            Thank you very much for your reply. I will try tomorrow morning to implement it the way you suggested.... i really hope it will work                                          

                                                                                                                                                      Regards, Tudor

            • 3. Re: Need help with a xml photo gallery
              Ned Murphy Adobe Community Professional & MVP

              You're welcome.  It will work, but if you have any problems, just start another posting showing the relevant code (not all of what you did for this) and someone will probably try to help.

              • 4. Re: Need help with a xml photo gallery
                xxxcocolinoxxx Level 1

                it worked like a charm ... thanks again ned .... you saved my day