1 Reply Latest reply on Jan 18, 2010 3:39 PM by Mr Playdo

    Altering This Gallery+Thumbs. Who's Good??

    Mr Playdo
      I'm not an actionscripter but an artist with limited actionscript knowledge. For over two weeks now I've been trying to get a piece of code together but keep running into endless brick walls. I would have thought this would be easy but there hasn't been anyone out there capable of showing me the final solution so far.

       

      I'm looking for a result similar to this tutorial http://www.republicofcode.com/tutorials/flash/xmlimagegallery/ but with a few specific changes. I haven't uploaded my attempts at the code because it probably will complicate things.

      The source files are located at the bottom of this link: http://www.republicofcode.com/tutorials/flash/xmlimagegallery/7.php

       

      What I am trying to acheive is the above gallery but which specifically does the following when a thumbnail is pressed:

       

      - Show the preloader (whilst keeping the current image on screen).
      - When the preloader has finished then fade the current image to alpha=0
      - Slight Pause
      - After the pause fade the next image in to alpha=100.

       

      - In addition I've been trying to get the thumbnails alpha to be 50%. Then on onRollover and onRelease to set the alpha to 100%. Similar to this: http://www.republicofcode.com/tutorials/flash/imagegallery/
      If anyone can actually do this then please post. But don't post unless you have tested and confirmed it because I can't be running backwards and forwards anymore.

       

      http://www.republicofcode.com/tutorials/flash/xmlimagegallery/

        • 1. Re: Altering This Gallery+Thumbs. Who's Good??
          Mr Playdo Level 1

          Below is the tutorial's code:

           

           
          import mx.transitions.Tween;
          import mx.transitions.easing.*;
           
          var myGalleryXML = new XML();
          myGalleryXML.ignoreWhite = true;
          myGalleryXML.load("gallery.xml");
           
          myGalleryXML.onLoad = function() {
          _root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
          _root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
          _root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
          _root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;
           
          _root.myImages = myGalleryXML.firstChild.childNodes;
          _root.myImagesTotal = myImages.length;
           
          _root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
          _root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;
           
          _root.full_x = myGalleryXML.firstChild.attributes.full_x;
          _root.full_y = myGalleryXML.firstChild.attributes.full_y;
           
          callThumbs();
          createMask();
          scrolling();
           
          };
           
          function callThumbs() {
          _root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
          container_mc._x = _root.gallery_x;
          container_mc._y = _root.gallery_y;
           
          var clipLoader = new MovieClipLoader();
          var preloader = new Object();
          clipLoader.addListener(preloader);
           
          for (i=0; i<myImagesTotal; i++) {
          thumbURL = myImages[i].attributes.thumb_url;
          myThumb_mc = container_mc.createEmptyMovieClip(i, container_mc.getNextHighestDepth());
          myThumb_mc._y = _root.thumb_height*i;
          clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);
           
          preloader.onLoadStart = function(target) {
          target.createTextField("my_txt",target.getNextHighestDepth(),0,0,100,20);
          target.my_txt.selectable = false;
          };
           
           
          preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
          target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
          };
           
          preloader.onLoadComplete = function(target) {
          new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
          target.my_txt.removeTextField();
          target.onRelease = function() {
          callFullImage(this._name);
          };
           
          target.onRollOver = function() {
          this._alpha = 50;
          };
           
          target.onRollOut = function() {
          this._alpha = 100;
          };
           
           
          };
          }
          }
           
           
           
          function callFullImage(myNumber) {
           
          myURL = myImages[myNumber].attributes.full_url;
          myTitle = myImages[myNumber].attributes.title;
          _root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
          fullImage_mc._x = _root.full_x;
          fullImage_mc._y = _root.full_y;
           
          var fullClipLoader = new MovieClipLoader();
          var fullPreloader = new Object();
          fullClipLoader.addListener(fullPreloader);
           
          fullPreloader.onLoadStart = function(target) {
          target.createTextField("my_txt",fullImage_mc.getNextHighestDepth(),0,0,200,20);
          target.my_txt.selectable = false;
          };
           
          fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
          target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
          };
           
          fullPreloader.onLoadComplete = function(target) {
          new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
          target.my_txt.text = myTitle;
          };
           
          fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);
           
          }
           
          function createMask() {
           
          _root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());
           
          mask_mc._x = _root.gallery_x;
          mask_mc._y = _root.gallery_y;
           
          mask_mc.beginFill(0x000000,100);
          mask_mc.lineTo(_root.gallery_width,0);
          mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
          mask_mc.lineTo(0,_root.gallery_height);
          mask_mc.lineTo(0,0);
           
          container_mc.setMask(mask_mc);
           
          }
           
          function scrolling() {
          _root.onEnterFrame = function() {
           
          container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*15;
           
          if (container_mc._y>mask_mc._y) {
          container_mc._y = mask_mc._y;
          }
           
          if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc._height))) {
          container_mc._y = mask_mc._y-(container_mc._height-mask_mc._height);
          }
           
          };
          }