A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: XML Photo Gallery in Flash 3.0 Help?

  1. #1
    Junior Member
    Join Date
    Nov 2010
    Posts
    3

    Question XML Photo Gallery in Flash 3.0 Help?

    I need help I am trying to make a photo gallery but I'm not understanding this. This is all new to me for I don't even know if I even have any of it right and for some of the comments I have no clue?? Can anyone help please.....


    Code:
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    
    var numPics:Number;
    var thumbIndex:Number = 0;
    var thumbRowCount:Number = 6;
    
    var numThumbsX:Number = 0;
    var numThumbsY:Number = 0;
    
    var xSpacing:Number = 115;
    var ySpacing:Number = 110;
    
    var largePics:Array = new Array();
    var thumbPics:Array = new Array();
    
    var thumbCanvas:MovieClip = new MovieClip();
    addChild(thumbCanvas);
    
    var picCanvas:MovieClip = new MovieClip();
    addChild(picCanvas);
    
    
    // set the height of our viewing area to one pixel less
    // than the y-position of our dividing line
    
    
    // position the thumbCanvas thumbnail container movie clip as shown in the .swf
    // setting its x and y properties
    
    
    //
    // Load the XML file data
    
    loadTheXML();
    
    // Call the getXMLData() function from an event listener that detects when
    // the loading of the XML file is complete
    function getXMLData(e:Event):void
    {
       // Create and populate the XML object instance (name it xml)
       var Xml:XML = new XML;
       
       // populate the arrays that will hold the paths to the larger pics and thumbnails
       // using a for loop
       for (var i:uint = 0; i < numPics; i++)
          {
             largePathList.push(xmlData.large_path[i]);
             thumbPathList.push(xmlData.thumb_path[i]);
             
          }  // end for each picture in my gallery
       
    function loadThumbs()
    {
       // Load the next thumbnail image using a Loader class and an element of
       // the thumbPics array
    
       var thumbLoader:Loader=new Loader;
       var thumbRequest:URLRequest=new URLRequest(thumbPathList[thumbPics]);
    
       thumbLoader.load(thumbRequest)
       
       
       // call the thumbLoadComplete() function when the loading of the thumbnail
       // is complete
       
       function thumbLoadComplete(e:Event):void
       {
          
          // set path to larger pic for this thumbnail in a variable called bigPicPath
          var bigPicPath:String=largePathList[thumbPics];
          
          // Set x and y positions for thumbLoader based on numThumbsX, numThumbsY, xSpacing,
          // and ySpacing variables.  Don't forget to add some padding.
            thumbLoader.x=numThumbsX*xSpacing+8; // 8 pixel buffer
          thumbLoader.y=numThumbsY*ySpacing+5; // 5 pixel buffer
          
          numThumbsX++;
          
          // If number of thumbnails equals thumbRowCount then start a new row of 
          // thumbnails by resetting numThumbsX and incrementing numThumbsY
            if (numThumbsX==thumbRowCount) {
    
             // if the row has reached the maximum thumbs per row, start a new row
             numThumbsX=0;
             numThumbsY++;
    
          }
          
          // call the loadBigPic() function when the user clicks on the thumbnail that 
          // was just loaded into the thumbLoader Loader class instance
          
          function loadBigPic(e:MouseEvent):void
          {
       
             // disable clickability of thumbnail
             thumbLoader.removeEventListener(MouseEvent.CLICK,loadBigPic);
             
             // remove any larger images that are currently being displayed in the picCanvas movie clip
             
       
               // create a Loader class instance called bigPicLoader and load the larger
             // image for the clicked thumbnail into it using the bigPicPath variable.
             
             var bigPicLoader:Loader=new Loader; 
              
       
             // call the bigPic() function when the larger image completes loading
             // into the bigPicLoader Loader class instance
             
             function bigPic(e:Event):void
             {
       
                // reenable clickability of thumbnail
                thumbLoader.addEventListener(MouseEvent.CLICK,loadBigPic);
       
                // center our background rectangle (bg_mc) in our viewing area
    
                
                
                // Place the loaded image into the picCanvas movie clip
    
                
                // make the picCanvas movie clip invisible until it is 
                // done loading the larger image
                thumbLoader.removeEventListener(MouseEvent.CLICK,picCanvas);
                
                
                // use the Tween class to set the width and height properties
                // of the bg_mc rectangle movie clip to adjust to just greater
                // (35 pixels greater) than the dimensions of the loaded larger image
                
                
                
                // Center the loaded picture in our viewing area
                //
                // we will now alter the picCanvas' x and y values
                // based on the width and height values of the image
                // that has just been loaded into it.  Place the left
                // edge of the picCanvas movie clip (which now has our image in it)
                // at the following position: horizontal center of the 
                // stage minus half the width of the loaded picture image.
                
             
                
    
                
                // Now, determine where the top edge (y-position) of
                // the loaded image should be placed so the picture is
                // centered vertically
                
                
                // Listen for the motion tween to finish (on width property of bg_mc)
                // Use the MOTION_FINISH event of the TweenEvent class to check this
                // calling the showPic() function when it occurs.
    
                
                function showPic(e:TweenEvent):void { 
                   
                   // Make the picture visible by fading it in over 1 second using
                   // a Tween class  (hint: do the fade on the picCanvas movie clip)
                   
                   fadeIn=new Tween(picCanvas,"alpha",None.easeNone,0,1,30,false);
    
                }  // end showPic()
                
             }  // end bigPic()
       
          }  // end loadBigPic()
    
          
          // add loaded thumbnail image as child of thumbCanvas
          thumbCanvas.addChild(thumbCanvas);
          
          
          thumbIndex++;
          
          
          if (thumbIndex < numPics)
          {   // there are more thumbnails to be loaded
          
             loadTheThumbs();
    
          }
             
             // recursive call to loadThumbs() to continue loading next thumbnail image
             
          else
          {   // all thumbnails have been loaded, so reset numThumbsX, numThumbsY, and thumbIndex
              numThumbsX=0;
             numThumbsY=0;
             thumbIndex=0;
          
          }
          
       }  // end thumbLoaderComplete()
       
    }  // end loadThumbs()

  2. #2

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center