Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3340
  • Last Modified:

Actionscript XML horizontal scrolling image gallery

Hey all ...

New to actionscript, but have a pretty good programming background ... I want a horizontal scrolling image gallery (with highlight mouse-overs), and can't figure out how (and where) to load the images from the XML file, which looks like this :

<gallery>
      <image title="Image Title - 01" img_path="images/01.jpg">This is a description of Image 01</image>
      <image title="Image Title - 02" img_path="images/02.jpg">This is a description of Image 01</image>
      <image title="Image Title - 03" img_path="images/03.jpg">This is a description of Image 01</image>
</gallery>

Would it be best to load these into an array, then loop through the array adding images to the scene ?

Full source code for this question has been provided in answers to questions almost exactly like this by EE flash experts before (many of which I really like), but not with an XML image list  before.

I'm willing to do the work on this one, just need some code examples and advice.
0
Gitcho
Asked:
Gitcho
  • 13
  • 8
  • 5
  • +1
1 Solution
 
BuffonCommented:
Why dont you want to work with XML object, if you are familliar with programming, just load xml and run through its children.
0
 
GitchoAuthor Commented:
New to actionscript ... also pretty new to XML, though I know what you're talking about, and working directly with the XML is probably what I'd do ...  

I'm not understanding the syntax of loading the images, and placing them on the stage ... I'm pretty sure that you use the createEmptyMovieClip function to load the .JPG's , but am not sure how to apply the actions and funtions to each new movie clip.
0
 
BuffonCommented:
you use createEmptyMovieClip to create new movie and then you use loadMovie into this one.
What do you mean  by "apply the actions and functions to each new movie clip"?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GitchoAuthor Commented:
Well ... like I said, i'm new at flash, but have seen enough code to know how to put it together, but don't know the steps ...

Could someone post the pseudocode here, so I've got an idea of the steps to get this done ?
0
 
mrdilliardCommented:
I think you probably should just loop through the XML like Buffon said. No reason to add the extra step of the array in flash.

Anyway, here's how you would do it, assuming you're using MX 2004

====================
var xmlList:XML = new XML();
//don't keep track of white space in XML file
xmlList.ignoreWhite = true;
xmlList.onLoad = function(success) {
      this.counter = 0;
      var xLevel = this.firstChild.firstChild;
      if (success) {
            //loop through the items in the gallery node
            while (xLevel) {
                  _root.createEmptyMovieClip("image"+this.counter, 100+this.counter);
                  //horizontal spacing - assumes all pictures are 100 pixels wide (no buffer space)
                  _root["image"+this.counter]._x = this.counter*100;
                  _root["image"+this.counter].loadMovie(xLevel.attributes["img_path"]);
                  this.counter++;
                  //move to the next item
                  xLevel = xLevel.nextSibling;
            }
      }
};
xmlList.load("gallery.xml");
==================

I would go ahead and use the code you mentioned you'd already found to make it scroll horizontally. I'm lazy and don't want to write it, and I'm sure they've already done a good job.

Have fun!
0
 
GitchoAuthor Commented:
Thanks mrdilliard ... that's pretty good ... think I got it ... what's the syntax for referring to the image properties (width,height etc.) of the NEXT and PREVIOUS images (nextsibling) in the XML file ?

I want to set the images up next to each other, but they may have variable widths (likely have the same height), so I'll have to calculte each image's width.
0
 
mrdilliardCommented:
You'll be able to retrieve the previous sibling and next sibling with xLevel.prevSibling and xLevel.nextSibling. So to get the width of the nextSibling, you'll say: xLevel.nextSibling.attributes["width"]

The problem with this is, is that you'll have to actually create width attribute in your xml file with a little bit of server-side code.

If you want to get the width of the previous image (i.e. the actual image in your flash movie) and space on that, you'd do it like this:

if(counter > 0){
    _root["image"+counter]._x = _root["image"+counter-1]._x + _root["image"+counter-1]._width + buffer;
}

As far as application logic, it makes more sense to me to calculate based on the previous sibling. I haven't tested code, but it should work.
0
 
GitchoAuthor Commented:
Here's the .fla... i basically just need to know how to piece this code together ... my code is commented out at the bottom ...

http://rmck.com/ee/Q_21104806/scroller.zip


0
 
mrdilliardCommented:
ok, wherever it says _root["image"+counter] or something similar, change it to _root.slide["image"+counter]. For the create movie clip function, do _root.slide.createEmptyMovieClip("image"+this.counter,100+this.counter)

This will put all the images into the slide movie clip. In your fla, everything is sent to the left a little bit. I would subtract a certain amount, whatever you want it to be, from each movie clip when you create them to move it over.

For example,

if(counter > 0){
    _root["image"+counter]._x = _root["image"+counter-1]._x + _root["image"+counter-1]._width + buffer;
}

*remember to update this code to say _root.slide["image"+counter]

Change this code to subtract the buffer and make the buffer variable 200 or something.

I hope this is what you're asking for.
0
 
GitchoAuthor Commented:
i can't figure this out for the life of me ... I've reposted the code here http://rmck.com/ee/Q_21104806/scroller.zip with the changes you suggested, except
- i created a new empty movie clip "newImages", and created an insance on the stage called "newSlides"
- changed the code from _root.slide to _root.newSlides

I did this so I could run both the existing & new code to compare ... this shouldn't be that hard, but I am just not getting it ...
0
 
mrdilliardCommented:
what version of flash are you using? i noticed your publishing for flash 5. that right there is going to kill most of my code. if you have mx or 2004, set it to go for flash player 6. i recommend the upgrade to mx 2004 if possible.
0
 
GitchoAuthor Commented:
I am using MX 2004 pro ...
0
 
GitchoAuthor Commented:
I'll try setting it to flash player 6 when I get home & let u know ... thanks for the help so far - this on'es driving me crazy ...
0
 
mrdilliardCommented:
Set it to 7 if you can, or publish for actionscript 2.0 in flash player 6.
0
 
GitchoAuthor Commented:
Didn't work ... upgraded to flash 7 & actionscript 2.0 & now I'm getting errors ...

http://rmck.com/ee/Q_21104806/scroller2.zip
0
 
muso120999Commented:
Okay here goes - I now have the code to do a basic XML scroller based on the code from the other question...

It isn't perfect (there are occasional gaps between the images), but it does work okay, and should hopefully give you some ideas.  You should just be able to paste the code into your existing project too - I've added roll-over effects so that the images fade-in on mouseover, and each image individually snaps to the other end of the thumbnails so that it scrolls continiously.  I have also added a routine to scale the images to having a fixed width, and a height proportionate (it still works with that  bit of the code commented out though).

_global.path = _root.createEmptyMovieClip("holder", 1);//thumbHolder_mc
_global.counter = 0;
_global.rollOverNum = -1;
_global.thumbnailSize = 200;
function resizeImage(mc, width) {
      var ratio = mc._height/mc._width;
      mc._width = width;
      mc._height = width*ratio;
}
function initImages() {
      _global.rightEdge = path._width;
      for (var i = 0; i<counter; i++) {
            path["image"+i].imageNo = i;
            path["image"+i].onRollOver = function() {
                  _global.rollOverNum = this.imageNo;
            };
      }
      path.onEnterFrame = function() {
            var movement = (((viewArea_mc._width/2)-viewArea_mc._xmouse)/viewArea_mc._width)*10;
            for (var i = 0; i<counter; i++) {
                  // rollover/out effects...
                  if (_global.rollOverNum == i) {
                        if (path["image"+i]._alpha<=100) {
                              path["image"+i]._alpha += 10;
                        }
                  } else {
                        if (path["image"+i]._alpha>=50) {
                              path["image"+i]._alpha -= 10;
                        }
                  }
                  // movement of thumnails...
                  path["image"+i]._x += movement;
                  var prevImage = (i+(counter-1)) % counter;
                  var nextImage = (i+(counter+1)) % counter;
                  if (movement<0) {
                        if (path["image"+i]._x<-path["image"+i]._width) {
                              path["image"+i]._x = path["image"+prevImage]._x+path["image"+i]._width;
                        }
                  } else {
                        if (path["image"+i]._x>_global.rightEdge-path["image"+i]._width) {
                              path["image"+i]._x = -path["image"+i]._width;
                        }
                  }
            }
      };
}
function preload(mc) {
      var loaded = path["image"+counter].getBytesLoaded();
      var total = path["image"+counter].getBytesTotal();
      if (mc._width>0) {
            mc._alpha = 50;
            resizeImage(mc, _global.thumbnailSize);
            // REMOVE THIS TO USE DEFAULT SIZES
            clearInterval(_root.id);
            counter++;
            _global.xLevel = _global.xLevel.nextSibling;
            path.createEmptyMovieClip("image"+counter, counter);
            if (_global.xLevel<>null) {
                  path["image"+counter]._alpha = 0;
                  path["image"+counter].loadMovie(xLevel.attributes["img_path"]);
                  path["image"+counter]._x = mc._x+mc._width;
                  _root.id = setInterval(preload, 80, path["image"+counter]);
            } else {
                  // everything is done - now can add mouse events
                  initImages();
            }
      }
}
// not sure wher this is initialised...
var xmlList:XML = new XML();
xmlList.ignoreWhite = true;
xmlList.onLoad = function(success) {
      _global.xLevel = this.firstChild.firstChild;
      if (success) {
            path.createEmptyMovieClip("image"+counter, counter);
            if (_global.xLevel<>null) {
                  path["image"+counter]._alpha = 0;
                  path["image"+counter].loadMovie(xLevel.attributes["img_path"]);
                  _root.id = setInterval(preload, 80, path["image"+counter]);
            }
      }
};
xmlList.load("img_gallery.xml");


enjoy ;-)

muso.
0
 
muso120999Commented:
forgot to mention that - in case you hadn't noticed - you can add onClick events onto the images similarly to the onRollOver code I used above:

     for (var i = 0; i<counter; i++) {
          path["image"+i].imageNo = i;
          path["image"+i].onRollOver = function() {
               _global.rollOverNum = this.imageNo;
          };
     }

0
 
GitchoAuthor Commented:
Looks good so far , but I'm not getting any scrolling ...

Is this code right ? syntax looks odd to me ...  

               if (movement<0) {
                    if (path["image"+i]._x<-path["image"+i]._width) {
                         path["image"+i]._x = path["image"+prevImage]._x+path["image"+i]._width;
                    }
               } else {
                                 trace(path["image"+i]._x);
                    if (path["image"+i]._x>_global.rightEdge-path["image"+i]._width) {
                         path["image"+i]._x = -path["image"+i]._width;
                    }
               }
0
 
muso120999Commented:
Hi, sorry Glitcho - you spotted the deliberate mistake.

The program does work perfectly however (with named mcs on the stage)!  The syntax is fine!! (the trace can go though)

What you need is a movieclip called:

viewArea_mc

In my case I created 2 movieclips - 1 empty, and I called it "thumbHolder_mc": the first line was like this (you might like to change it too):
_global.path = thumbHolder_mc.createEmptyMovieClip("holder", 1);//thumbHolder_mc

and I had a second movieclip (just a rectangle, the colour is irrelevant), which I made 400x150 pixels in size - this I called "viewArea_mc", which is what is being referred to in the code (you cn hard-code sizes instead if you prefer instead of all of this though).

This second movieclip I made to mask the empty mc thumbHolder_mc (from a separate layer), where the images would load into.

By doing it this way it hides the background hide/show of the images as they slide by.

Again, sorry about the confusion - I intended to remove references to external mcs before posting, but I feel it maybe helps a little keeping it in!

viewArea_mc is key because not only does it mask the images, it also ties together the mouse movement routine.
0
 
muso120999Commented:
oh, also place viewArea_mc and thumbHolder_mc at the same x/y coordinates - you can adjust the width and height of the mask (viewArea_mc) to suit.

muso :-)
0
 
muso120999Commented:
Do you have it working yet Gitcho?
0
 
GitchoAuthor Commented:
sorry - been very busy ... will look at it tonight & get back to you. Thanks for your patience.
0
 
GitchoAuthor Commented:
OK ... it's scrolling now, but the scrolling direction doesn't respond to the mouse, as in the original script ... here's the code :

------------------------------------------------------------------------------------------
_global.path = _root.createEmptyMovieClip("holder", 1);//thumbHolder_mc
_global.path = _root.createEmptyMovieClip("viewArea_mc", 1);//viewArea_mc
_global.counter = 0;
_global.rollOverNum = -1;
_global.thumbnailSize = 200;
function resizeImage(mc, width) {
     var ratio = mc._height/mc._width;
     mc._width = width;
     mc._height = width*ratio;
}
function initImages() {
     _global.rightEdge = path._width;
     for (var i = 0; i<counter; i++) {
          path["image"+i].imageNo = i;
          path["image"+i].onRollOver = function() {
               _global.rollOverNum = this.imageNo;
          };
     }
     path.onEnterFrame = function() {
          var movement = (((viewArea_mc._width/2)-viewArea_mc._xmouse)/viewArea_mc._width)*10;
          for (var i = 0; i<counter; i++) {
               // rollover/out effects...
               if (_global.rollOverNum == i) {
                    if (path["image"+i]._alpha<=100) {
                         path["image"+i]._alpha += 25;
                    }
               } else {
                    if (path["image"+i]._alpha>=50) {
                         path["image"+i]._alpha -= 25;
                    }
               }
               // movement of thumnails...
               path["image"+i]._x += movement;
               var prevImage = (i+(counter-1)) % counter;
               var nextImage = (i+(counter+1)) % counter;
               if (movement<0) {
                    if (path["image"+i]._x<-path["image"+i]._width) {
                         path["image"+i]._x = path["image"+prevImage]._x+path["image"+i]._width;
                    }
               } else {
                    if (path["image"+i]._x>_global.rightEdge-path["image"+i]._width) {
                         path["image"+i]._x = -path["image"+i]._width;
                    }
               }
          }
     };
}
function preload(mc) {
     var loaded = path["image"+counter].getBytesLoaded();
     var total = path["image"+counter].getBytesTotal();
     if (mc._width>0) {
          mc._alpha = 60;
          resizeImage(mc, _global.thumbnailSize);
          // REMOVE THIS TO USE DEFAULT SIZES
          clearInterval(_root.id);
          counter++;
          _global.xLevel = _global.xLevel.nextSibling;
          path.createEmptyMovieClip("image"+counter, counter);
          if (_global.xLevel<>null) {
               path["image"+counter]._alpha = 0;
               path["image"+counter].loadMovie(xLevel.attributes["img_path"]);
               path["image"+counter]._x = mc._x+mc._width;
               _root.id = setInterval(preload, 80, path["image"+counter]);
          } else {
               // everything is done - now can add mouse events
               initImages();
          }
     }
}
// not sure wher this is initialised...
var xmlList:XML = new XML();
xmlList.ignoreWhite = true;
xmlList.onLoad = function(success) {
     _global.xLevel = this.firstChild.firstChild;
     if (success) {
          path.createEmptyMovieClip("image"+counter, counter);
          if (_global.xLevel<>null) {
               path["image"+counter]._alpha = 0;
               path["image"+counter].loadMovie(xLevel.attributes["img_path"]);
               _root.id = setInterval(preload, 80, path["image"+counter]);
          }
     }
};
xmlList.load("img_gallery.xml");
0
 
muso120999Commented:
okay, so how is it differing - you can tweak it by adjusting the algorithm for the variable movement...
0
 
muso120999Commented:
Also the width and position of viewArea_mc have an effect too - the scrolling stops when the mouse is halfway across it
0
 
GitchoAuthor Commented:
Although it's not tweaked the way I want it yet, you have technically answered my question, and it's not fair to keep asking questions on how to tweak it.   I will post a new question in a few minutes on modification of this script.

Thanks so much for your help.
0
 
GitchoAuthor Commented:
0
 
muso120999Commented:
Okay, thanks for the points - I'll have a look at the new question, and make some comments whan I get the chance
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 13
  • 8
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now