Gallery AS2/XML DIV Problems

  • alexwebair
  • Born
  • Born
  • alexwebair
  • Posts: 1

Post 3+ Months Ago

Hello everyone and thank you for your help davance!

That is my problem:

Jai included a photo gallery as2 (+ xml) on an XHTML page. More
precisely in a div the same size as the flash file. This gallery
composed of thumbnails of the pictures (size = 18% loriginal) loaded via an xml file,
and when the User clicks on the thumbnail moon that displays the photo in his
original size (size = 100%) and it also offers the possibility of the photo dragger.
So far, so good.
But Id like to know how saffranchir the div which is integrated. Swf when
the photo is 100%? Because quen made filing remains locked in the div and it is not
the most beautiful effect!
How to solve this problem??? The action directly in the script or HTML?
Thank you again for your help!


This is my AS:
Code: [ Select ]
// Import the transitions classes so you can add a fading effect when the images load to the Stage.
import mx.transitions.*;

// Set the starting X and Y positions for the gallery images.
_global.thisX = 30;
_global.thisY = 70;

/* Set static values for the Stage's width and height.
  Using Stage.width and Stage.height within the code results in
  strangely positioned full images when testing in the Flash environment
  (but the problem doesn't exist when published to a SWF file). */
_global.stageWidth = 594;
_global.stageHeight = 1000;

// Create and configure the XML instance which is used to load the list of gallery images on the fly.
var gallery_xml:XML = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success:Boolean) {
    try {
        /* if you are able to successfully load and parse the gallery from a remote XML file,
          parse out the image names and add them to an array. */
        if (success) {
            var images:Array = this.firstChild.childNodes;
            var gallery_array:Array = new Array();
            for (var i = 0; i<images.length; i++) {
                gallery_array.push({src:images[i].firstChild.nodeValue});
            }
            /* call the displayGallery function which handles loading in each
              of the gallery images and placing them on the Stage. */
            displayGallery(gallery_array);
        } else {
            throw new Error("Unable to parse XML");
        }
    } catch (e_err:Error) {
        trace(e_err.message);
    } finally {
        delete this;
    }
};

// load the gallery.xml file from the current directory.
gallery_xml.load("gallery_tween.xml");

/* create a function which loops through the images in an array,
  and creates new movie clips on the Stage. */
function displayGallery(gallery_array:Array) {
    var galleryLength:Number = gallery_array.length;
    // loop through each of the images in the gallery_array.
    for (var i = 0; i<galleryLength; i++) {
        /* create a movie clip instance which holds the image. We'll also set a variable,
          thisMC, which is an alias to the movie clip instance. */
        var thisMC:MovieClip = this.createEmptyMovieClip("image"+i+"_mc", i);
        
        /* load the current image source into the new movie clip instance,
          using the MovieClipLoader class. */
        mcLoader_mcl.loadClip(gallery_array[i].src, thisMC);
        
        // attach the preloader symbol from the Library onto the Stage.
        preloaderMC = this.attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);
        
        /* set the preloader's bar_mc's _xscale property to 0%
          and set a default value in the progress bars text field. */
        preloaderMC.bar_mc._xscale = 0;
        preloaderMC.progress_txt.text = "0%";
        
        // set the _x and _y coordinates of the new movie clip.
        thisMC._x = _global.thisX;
        thisMC._y = _global.thisY;
        
        // set the position of the image preloader.
        preloaderMC._x = _global.thisX;
        preloaderMC._y = _global.thisY+20;
        
        // if you've displayed 5 columns of images, start a new row.
        if ((i+1)%5 == 0) {
            // reset the X and Y positions
            _global.thisX = 20;
            _global.thisY += 80;
        } else {
            _global.thisX += 80+20;
        }
    }
}

// define the MovieClipLoader instance and MovieClipLoader listener Object.
var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadStart = function() {
};

// while the content is preloading, modify the width of the progress bar.
mclListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
    var pctLoaded:Number = Math.round(loadedBytes/totalBytes*100);
    // create a shortcut for the path to the preloader movie clip.
    var preloaderMC = target_mc._parent["preloader"+target_mc.getDepth()+"_mc"];
    preloaderMC.bar_mc._xscale = pctLoaded;
    preloaderMC.progress_txt.text = pctLoaded+"%";
};

// when the onLoadInit event is thrown, you're free to position the instances
mclListener.onLoadInit = function(evt:MovieClip) {
    evt._parent["preloader"+evt.getDepth()+"_mc"].removeMovieClip();
    /* set local variables for the target movie clip's width and height,
      and the desired settings for the image stroke and border. */
    var thisWidth:Number = evt._width;
    var thisHeight:Number = evt._height;
    var borderWidth:Number = 2;
    var marginWidth:Number = 8;
    evt.scale = 18;
    // draw a white rectangle with a black stroke around the images.
    evt.lineStyle(borderWidth, 0x000000, 100);
    evt.beginFill(0xFFFFFF, 100);
    evt.moveTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
    evt.lineTo(thisWidth+borderWidth+marginWidth, -borderWidth-marginWidth);
    evt.lineTo(thisWidth+borderWidth+marginWidth, thisHeight+borderWidth+marginWidth);
    evt.lineTo(-borderWidth-marginWidth,thisHeight+borderWidth+marginWidth);
    evt.lineTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
    evt.endFill();
    
    /* scale the target movie clip so it appears as a thumbnail.
      This allows users to quickly view a full image without downloading it every time,
      but unfortunaltey also causes a large initial download. */
    evt._xscale = evt.scale;
    evt._yscale = evt.scale;
    // rotate the current image (and borders) anywyhere from -5 degrees to +5 degrees.
    evt._rotation = Math.round(Math.random()*-10)+5;
    /* when the target_mc movie clip instance is pressed, begin to drag the current movie clip
      and set some temporary variables so once you are finished rescaling and positioning
      the full image, you can return the instance to its original position. */
    evt.onPress = function() {
        // start dragging the current clip.
        this.startDrag();
        /* set the _xscale and _yscale properties back to 100% so the image appears full sized.
          You're also storing the original X and Y coordinates so you can return

the image where you found it. */
        this._rotation = 0
        this._xscale = 100;
        this._yscale = 100;
        this.origX = this._x;
        this.origY = this._y;
        // find the depth of the current movie clip, and store it within the movie clip.
        this.origDepth = this.getDepth();
        /* :TRICKY: swap the depth of the current movie clip, with the next highest movie clip of the _parent.
          Effectively this makes the current movie clip the top of the "stack". */
        this.swapDepths(this._parent.getNextHighestDepth());
        // try and center the current movie clip on the Stage.
        this._x = (_global.stageWidth-evt._width+30)/2;
        this._y = (_global.stageHeight-evt._height+30)/2;
        // apply a transition to the movie clip which makes the movie clip flicker for a split second.
        mx.transitions.TransitionManager.start(this, {type:mx.transitions.Photo, direction:0, duration:1, easing:mx.transitions.easing.Strong.easeOut, param1:empty, param2:empty});
    };
    /* when the movie clip instance is released, stop dragging the movie clip.
      Reset the _xscale and _yscale properties as well as the _x and _y coordinates.

*/
    evt.onRelease = function() {
        this.stopDrag();
        this._xscale = this.scale;
        this._yscale = this.scale;
        this._x = this.origX;
        this._y = this.origY;
    };
    // if the mouse cursor was released outside of the movie clip, call the onRelease handler.
    evt.onReleaseOutside = evt.onRelease;
};
mcLoader_mcl.addListener(mclListener);
  1. // Import the transitions classes so you can add a fading effect when the images load to the Stage.
  2. import mx.transitions.*;
  3. // Set the starting X and Y positions for the gallery images.
  4. _global.thisX = 30;
  5. _global.thisY = 70;
  6. /* Set static values for the Stage's width and height.
  7.   Using Stage.width and Stage.height within the code results in
  8.   strangely positioned full images when testing in the Flash environment
  9.   (but the problem doesn't exist when published to a SWF file). */
  10. _global.stageWidth = 594;
  11. _global.stageHeight = 1000;
  12. // Create and configure the XML instance which is used to load the list of gallery images on the fly.
  13. var gallery_xml:XML = new XML();
  14. gallery_xml.ignoreWhite = true;
  15. gallery_xml.onLoad = function(success:Boolean) {
  16.     try {
  17.         /* if you are able to successfully load and parse the gallery from a remote XML file,
  18.           parse out the image names and add them to an array. */
  19.         if (success) {
  20.             var images:Array = this.firstChild.childNodes;
  21.             var gallery_array:Array = new Array();
  22.             for (var i = 0; i<images.length; i++) {
  23.                 gallery_array.push({src:images[i].firstChild.nodeValue});
  24.             }
  25.             /* call the displayGallery function which handles loading in each
  26.               of the gallery images and placing them on the Stage. */
  27.             displayGallery(gallery_array);
  28.         } else {
  29.             throw new Error("Unable to parse XML");
  30.         }
  31.     } catch (e_err:Error) {
  32.         trace(e_err.message);
  33.     } finally {
  34.         delete this;
  35.     }
  36. };
  37. // load the gallery.xml file from the current directory.
  38. gallery_xml.load("gallery_tween.xml");
  39. /* create a function which loops through the images in an array,
  40.   and creates new movie clips on the Stage. */
  41. function displayGallery(gallery_array:Array) {
  42.     var galleryLength:Number = gallery_array.length;
  43.     // loop through each of the images in the gallery_array.
  44.     for (var i = 0; i<galleryLength; i++) {
  45.         /* create a movie clip instance which holds the image. We'll also set a variable,
  46.           thisMC, which is an alias to the movie clip instance. */
  47.         var thisMC:MovieClip = this.createEmptyMovieClip("image"+i+"_mc", i);
  48.         
  49.         /* load the current image source into the new movie clip instance,
  50.           using the MovieClipLoader class. */
  51.         mcLoader_mcl.loadClip(gallery_array[i].src, thisMC);
  52.         
  53.         // attach the preloader symbol from the Library onto the Stage.
  54.         preloaderMC = this.attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);
  55.         
  56.         /* set the preloader's bar_mc's _xscale property to 0%
  57.           and set a default value in the progress bars text field. */
  58.         preloaderMC.bar_mc._xscale = 0;
  59.         preloaderMC.progress_txt.text = "0%";
  60.         
  61.         // set the _x and _y coordinates of the new movie clip.
  62.         thisMC._x = _global.thisX;
  63.         thisMC._y = _global.thisY;
  64.         
  65.         // set the position of the image preloader.
  66.         preloaderMC._x = _global.thisX;
  67.         preloaderMC._y = _global.thisY+20;
  68.         
  69.         // if you've displayed 5 columns of images, start a new row.
  70.         if ((i+1)%5 == 0) {
  71.             // reset the X and Y positions
  72.             _global.thisX = 20;
  73.             _global.thisY += 80;
  74.         } else {
  75.             _global.thisX += 80+20;
  76.         }
  77.     }
  78. }
  79. // define the MovieClipLoader instance and MovieClipLoader listener Object.
  80. var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
  81. var mclListener:Object = new Object();
  82. mclListener.onLoadStart = function() {
  83. };
  84. // while the content is preloading, modify the width of the progress bar.
  85. mclListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
  86.     var pctLoaded:Number = Math.round(loadedBytes/totalBytes*100);
  87.     // create a shortcut for the path to the preloader movie clip.
  88.     var preloaderMC = target_mc._parent["preloader"+target_mc.getDepth()+"_mc"];
  89.     preloaderMC.bar_mc._xscale = pctLoaded;
  90.     preloaderMC.progress_txt.text = pctLoaded+"%";
  91. };
  92. // when the onLoadInit event is thrown, you're free to position the instances
  93. mclListener.onLoadInit = function(evt:MovieClip) {
  94.     evt._parent["preloader"+evt.getDepth()+"_mc"].removeMovieClip();
  95.     /* set local variables for the target movie clip's width and height,
  96.       and the desired settings for the image stroke and border. */
  97.     var thisWidth:Number = evt._width;
  98.     var thisHeight:Number = evt._height;
  99.     var borderWidth:Number = 2;
  100.     var marginWidth:Number = 8;
  101.     evt.scale = 18;
  102.     // draw a white rectangle with a black stroke around the images.
  103.     evt.lineStyle(borderWidth, 0x000000, 100);
  104.     evt.beginFill(0xFFFFFF, 100);
  105.     evt.moveTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
  106.     evt.lineTo(thisWidth+borderWidth+marginWidth, -borderWidth-marginWidth);
  107.     evt.lineTo(thisWidth+borderWidth+marginWidth, thisHeight+borderWidth+marginWidth);
  108.     evt.lineTo(-borderWidth-marginWidth,thisHeight+borderWidth+marginWidth);
  109.     evt.lineTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
  110.     evt.endFill();
  111.     
  112.     /* scale the target movie clip so it appears as a thumbnail.
  113.       This allows users to quickly view a full image without downloading it every time,
  114.       but unfortunaltey also causes a large initial download. */
  115.     evt._xscale = evt.scale;
  116.     evt._yscale = evt.scale;
  117.     // rotate the current image (and borders) anywyhere from -5 degrees to +5 degrees.
  118.     evt._rotation = Math.round(Math.random()*-10)+5;
  119.     /* when the target_mc movie clip instance is pressed, begin to drag the current movie clip
  120.       and set some temporary variables so once you are finished rescaling and positioning
  121.       the full image, you can return the instance to its original position. */
  122.     evt.onPress = function() {
  123.         // start dragging the current clip.
  124.         this.startDrag();
  125.         /* set the _xscale and _yscale properties back to 100% so the image appears full sized.
  126.           You're also storing the original X and Y coordinates so you can return
  127. the image where you found it. */
  128.         this._rotation = 0
  129.         this._xscale = 100;
  130.         this._yscale = 100;
  131.         this.origX = this._x;
  132.         this.origY = this._y;
  133.         // find the depth of the current movie clip, and store it within the movie clip.
  134.         this.origDepth = this.getDepth();
  135.         /* :TRICKY: swap the depth of the current movie clip, with the next highest movie clip of the _parent.
  136.           Effectively this makes the current movie clip the top of the "stack". */
  137.         this.swapDepths(this._parent.getNextHighestDepth());
  138.         // try and center the current movie clip on the Stage.
  139.         this._x = (_global.stageWidth-evt._width+30)/2;
  140.         this._y = (_global.stageHeight-evt._height+30)/2;
  141.         // apply a transition to the movie clip which makes the movie clip flicker for a split second.
  142.         mx.transitions.TransitionManager.start(this, {type:mx.transitions.Photo, direction:0, duration:1, easing:mx.transitions.easing.Strong.easeOut, param1:empty, param2:empty});
  143.     };
  144.     /* when the movie clip instance is released, stop dragging the movie clip.
  145.       Reset the _xscale and _yscale properties as well as the _x and _y coordinates.
  146. */
  147.     evt.onRelease = function() {
  148.         this.stopDrag();
  149.         this._xscale = this.scale;
  150.         this._yscale = this.scale;
  151.         this._x = this.origX;
  152.         this._y = this.origY;
  153.     };
  154.     // if the mouse cursor was released outside of the movie clip, call the onRelease handler.
  155.     evt.onReleaseOutside = evt.onRelease;
  156. };
  157. mcLoader_mcl.addListener(mclListener);
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 9 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.