4 Replies Latest reply on Feb 24, 2010 6:00 AM by generalbatzorig

    xml gallery alignment, help

    generalbatzorig Level 1

      I am making an XML gallery with thumbnails. It is working fine, but I have a problem with alignment of the images. All the large images are loading into the top left corner. I would like them to load with center alignment for all images. I don't know anything about Action Script. The way I made this website was to use already made sample of some one else. Can you help me to figure out this alignment problem? Again, I am very bad at Action Script, so it would be great if you can show me the actual coding for this to work.

      Here is the sample gallery: http://www.chimeddorj.com

       

      Here goes the Sript>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

       

       

       

       

      RemoveAllThumbs.onLoad = function(){

      removeAllThumbs()

      }

      //init global variables and properties

      Stage.scaleMode = "noscale";

      import gs.TweenFilterLite;

      import gs.TweenLite;

       

      /****************************************************************************

      XML LOADING

      ****************************************************************************/

      //handle loading of external images..

      var slide:XML = new XML();

      slide.ignoreWhite = true;

       

      var largeImageUrl:Array = new Array();

      var thumbUrl:Array = new Array();

      var captions:Array = new Array();//not used

      var p:Number = 0;//tracks position in arrays

       

      /*!!!!if you want to load in another XML file, make sure you clear the existing thumbnails

      by calling the removeAllThumbs() function first!*/

       

      slide.onLoad = function() {

      largeImageUrl = [];

      thumbUrl = [];

      captions =  [];

      xmlNode = this.firstChild;

      var images:Array = this.firstChild.childNodes;

      for (i=0; i<images.length; i++) {

      thumbUrl[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;

      largeImageUrl[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;

      captions[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;

      }

      p = 0;//reset p for different gallery loading

       

      //create a bg clip for the thumbsTrack. Enables padding between images to work correctly

      thumbMask_mc.thumbBox_mc.createEmptyMovieClip("thumbTrackBg",1);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.beginFill(0x000000,20);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.moveTo(thumbMask_mc.thumbBox_mc._x,thumbMask_mc.thum bBox_mc._y);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.lineTo(thumbMask_mc.thumbBox_mc._x+thumbMask_mc.thum bBox_mc._width,thumbMask_mc.thumbBox_mc._y);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.lineTo(thumbMask_mc.thumbBox_mc._x+thumbMask_mc.thum bBox_mc._width,thumbMask_mc.thumbBox_mc._y+thumbMask_mc.thumbBox_mc._height);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.lineTo(thumbMask_mc.thumbBox_mc._x,thumbMask_mc.thum bBox_mc._y+thumbMask_mc.thumbBox_mc._height);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.lineTo(thumbMask_mc.thumbBox_mc._x,thumbMask_mc.thum bBox_mc._y);

      thumbMask_mc.thumbBox_mc.thumbTrackBg.endFill();

      //load the thumbs

      loadThumbs();

      Mouse.removeListener(mouseListener);//kill the mouselistener if it is added

      };

       

      slide.load("paintings.xml");//load xml

       

       

      var imageWidth:Number = 0;//default x position of our movieclips relative to containing movieclip

      var buffer:Number = 20;//padding between images

      var thumbsToShow:Number = 5//

       

      /****************************************************************************

      LOAD THUMBNAILS, ADD ACTIONS & PADDING TO THUMBS

      ****************************************************************************/

      //here we load in our thumbnails

      function loadThumbs() {

      //remove the movieclip loade listener on each iteration of this function

      Clip.removeListener(mclListener);

       

      //attach and associate with a variable a MC to hold each loaded movieClip

      var container:MovieClip = thumbMask_mc.thumbBox_mc.attachMovie("thumbBox", "thumbBox"+p, thumbMask_mc.thumbBox_mc.getNextHighestDepth(), {_x:imageWidth, _y:0});

       

      //create a movieclip loader

      var Clip:MovieClipLoader = new MovieClipLoader();

      var mclListener:Object = new Object();

       

      mclListener.onLoadStart = function(target_mc:MovieClip) {

      target_mc._alpha = 0;//set thumb alpha to be zero

      };

      //handle loading progress - simple counter here

      mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {

      //use this if you want to indicate loading of your thumbnails etc...

      //loadTxt.captions_txt.text = Math.floor(bytesLoaded/bytesTotal*100)+"%";

      };

       

      mclListener.onLoadInit = function(target_mc:MovieClip) {

      //here we can access our loaded clips properties!

      //here is where we attach functions to our clip so that we can dynamically create rollovers etc.

       

      //make our thumbnails visible again

      TweenLite.to(target_mc, 2, {_alpha:100});

       

      //based off image width this places our thumbs next to each other

      imageWidth = (imageWidth+target_mc._width)+buffer;

       

      //associate a variable here with our p value, we use this later to load in large images

      target_mc.pictureValue = p;

       

      //handle  image rollovers these are active only on the thumb image!!! Watch the US spelling!

      target_mc.onRollOver = function() {

      TweenFilterLite.to(target_mc,.4,{type:"Color", brightness:1.5, ease:None.easeOut});

      };

       

      target_mc.onRollOut = function() {

      TweenFilterLite.to(target_mc,4,{type:"Color", brightness:1, ease:None.easeOut});

      };

       

      //handle a click on a thumbnail

      target_mc.onRelease = function() {

      //load large images

      mcLoader.loadClip(largeImageUrl[target_mc.pictureValue],largeImage_mc);

      caption.text = captions[target_mc.pictureValue];;

      };

      p++;//increment value to cycle through array

       

      if (p<thumbUrl.length) {

      loadThumbs();//create loop

      }

      if (p == thumbUrl.length) {

      /*we set this variable here because this is where we know the length of our thumbnails containing mc.

      After we have loaded all content in. Makes sense really!*/

      mcWidth = thumbMask_mc.thumbBox_mc._width;

      //adjust the width and height of the thumbstrack bg clip

      thumbMask_mc.thumbBox_mc.thumbTrackBg._width = mcWidth;

      thumbMask_mc.thumbBox_mc.thumbTrackBg._height = thumbMask_mc.thumbBox_mc._height

      /*add the mouse listener object to the thumbnail mask. We do this element of our script here so

      we do not enable scrolling of our mc before the images have all loaded in. As this can look a little funny*/

      Mouse.addListener(mouseListener);

       

      }

      };

       

      //load in the next thumb

      Clip.addListener(mclListener);

      Clip.loadClip(thumbUrl[p],container);

       

      }

       

      /****************************************************************************

      REMOVE ALL THUMBS METHOD

      ****************************************************************************/

      //Use to clear old thumbs if you are going to add in a new set of thumbs

      function removeAllThumbs():Void {

      for (var i in thumbMask_mc.thumbBox_mc) {

      if (typeof (thumbMask_mc.thumbBox_mc[i]) == "movieclip") {

      removeMovieClip(thumbMask_mc.thumbBox_mc.getInstanceAtDepth(thumbMask_mc.thumbBox_mc[i].ge tDepth()));

      }

      thumbMask_mc.thumbBox_mc._width = thumbMask_mc._width

      }

      }

       

      /*sampleRemoveAllButton.onRelease = function(){

      removeAllThumbs()

      }*/

       

       

      /****************************************************************************

      LOAD LARGE IMAGES MOVIECLIP LOADER FUNCTION

      ****************************************************************************/

      /*generic load object here we handle loading in external images etc

      this block of code loads the large images into the bright blue mc

      for instance, you could fade in/out big images or make a progress indicator

      using this block of script*/

       

      var mcLoader:MovieClipLoader = new MovieClipLoader();

      var listener:Object = new Object();

       

      listener.onLoadStart = function(target_mc:MovieClip) {

      //empty

       

      };

       

      listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {

      //amountLoaded = Math.floor((bytesLoaded/bytesTotal)*100);//calulate a loading percentage!

      };

       

      listener.onLoadInit = function(target:MovieClip):Void  {

      //empty

      };

       

      mcLoader.addListener(listener);

       

      /****************************************************************************

      MOUSE LISTENER

      ****************************************************************************/

      //this handles the panning of the thumbnails

      mouseListener = new Object();

      mouseListener.onMouseMove = function() {

      if (thumbMask_mc.hitTest(_root._xmouse, _root._ymouse, true)) {

      maskOver();//call the scroll function

      }

      };

       

      /****************************************************************************

      SCROLLER FUNCTION

      ****************************************************************************/

       

      var scrollSpeed:Number = 5;

      var halfMaskWidth:Number = thumbMask_mc._width/2;

      var npixels:Number;

      var mcWidth:Number = thumbMask_mc.thumbBox_mc._width;

      var maskWidth:Number = Math.floor(thumbMask_mc._width);

       

      function slideThumbs() {

       

      // stop scrolling if we are off the mask and delete the enterframe event

      if (!thumbMask_mc.thumbBox_mc.hitTest(_root._xmouse, _root._ymouse, true)) {

      delete this.onEnterFrame;

      }

      // mouse over left half of slider:

      if (thumbMask_mc._xmouse>0 && thumbMask_mc._xmouse<thumbMask_mc._x+halfMaskWidth) {

      npixels = (halfMaskWidth-thumbMask_mc._xmouse)/halfMaskWidth*scrollSpeed;

      thumbMask_mc.thumbBox_mc._x += npixels;

      }

      //stop sliding too far to the left

      if (thumbMask_mc.thumbBox_mc._x>=0) {

      thumbMask_mc.thumbBox_mc._x = 0;

      delete this.onEnterFrame;

      }

      // mouse over right half of slider:

      if (thumbMask_mc._xmouse>halfMaskWidth && thumbMask_mc._xmouse<thumbMask_mc._x+thumbMask_mc._width) {

      npixels = (thumbMask_mc._xmouse-halfMaskWidth)/halfMaskWidth*scrollSpeed;

      thumbMask_mc.thumbBox_mc._x -= npixels;

      }

      //stop sliding too far to the right

      if (thumbMask_mc.thumbBox_mc._x<=-(mcWidth-maskWidth)) {

      thumbMask_mc.thumbBox_mc._x = -(mcWidth-maskWidth);

      delete this.onEnterFrame;

      }

      }

       

      //function to do the scrolling man!

      function maskOver() {

      this.onEnterFrame = function() {

      slideThumbs();

      };

      }

        • 1. Re: xml gallery alignment, help
          kglad Adobe Community Professional & MVP

          change:

           

          listener.onLoadInit = function(target:MovieClip):Void  {

          //empty

          };

           

          to:

           

          listener.onLoadInit = function(target:MovieClip):Void  {

          target._x=(Stage.width-target._width)/2;

          target._y=(Stage.height-target._height)/2;

          };

          • 2. Re: xml gallery alignment, help
            generalbatzorig Level 1

            Thank you Kglad for answering to my question. I tried to change the code under the LARGE IMAGE LOADING section, and tested with TEST MOVIE command.  Now it aligns the image to the center of the whole stage when the window is in default size. I wanted it to align to the center of the image loading area (not the whole stage). When the window is maximized, the loaded image changes the position to the bottom right corner of the stage. So the problem might be that I missing your instruction somewhere else, or maybe it needs more than that. I am using Flash 4 on Windows computer. Do you have any idea how to fix it? 

            • 3. Re: xml gallery alignment, help
              kglad Adobe Community Professional & MVP

              what's the center of the image loading area?

               

              (and, i assume you mean you're using flash cs4, not flash4.)

              • 4. Re: xml gallery alignment, help
                generalbatzorig Level 1

                I am using Flash CS 4, like I mentioned earlier, I am making this site on some one's pre-made flash file. There is a movie symbol for loading the large images (called largeImage_mc). I resized this movie clip to 550x450 px (landscape). And positioned it at X=200 Y=0 (top left corner registration point or the anchor point).

                The movie clip could be dragged to any position. But images that are loaded into this bo is always aligning to the top left corner of this movie symbol.

                If I calculate the actual center of this image loading area (regarding its position on the window), it would be x=425, y=225.

                I hope my writing makes sence.

                actual site: www.chimeddorj.com