Solved

Actionscript XML horizontal scrolling image gallery

Posted on 2004-08-23
28
3,327 Views
Last Modified: 2009-07-06
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
Comment
Question by:Gitcho
  • 13
  • 8
  • 5
  • +1
28 Comments
 
LVL 11

Expert Comment

by:Buffon
ID: 11878651
Why dont you want to work with XML object, if you are familliar with programming, just load xml and run through its children.
0
 
LVL 5

Author Comment

by:Gitcho
ID: 11878694
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
 
LVL 11

Expert Comment

by:Buffon
ID: 11879564
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
 
LVL 5

Author Comment

by:Gitcho
ID: 11884409
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
 
LVL 4

Expert Comment

by:mrdilliard
ID: 11910189
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
 
LVL 5

Author Comment

by:Gitcho
ID: 11916461
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
 
LVL 4

Expert Comment

by:mrdilliard
ID: 11924603
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
 
LVL 5

Author Comment

by:Gitcho
ID: 11928707
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
 
LVL 4

Expert Comment

by:mrdilliard
ID: 11928744
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
 
LVL 5

Author Comment

by:Gitcho
ID: 11949105
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
 
LVL 4

Expert Comment

by:mrdilliard
ID: 11949255
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
 
LVL 5

Author Comment

by:Gitcho
ID: 11954654
I am using MX 2004 pro ...
0
 
LVL 5

Author Comment

by:Gitcho
ID: 11954682
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
 
LVL 4

Expert Comment

by:mrdilliard
ID: 11957444
Set it to 7 if you can, or publish for actionscript 2.0 in flash player 6.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 5

Author Comment

by:Gitcho
ID: 11959395
Didn't work ... upgraded to flash 7 & actionscript 2.0 & now I'm getting errors ...

http://rmck.com/ee/Q_21104806/scroller2.zip
0
 
LVL 10

Expert Comment

by:muso120999
ID: 12011798
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
 
LVL 10

Expert Comment

by:muso120999
ID: 12011817
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
 
LVL 5

Author Comment

by:Gitcho
ID: 12013133
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
 
LVL 10

Accepted Solution

by:
muso120999 earned 500 total points
ID: 12013769
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
 
LVL 10

Expert Comment

by:muso120999
ID: 12013787
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
 
LVL 10

Expert Comment

by:muso120999
ID: 12020992
Do you have it working yet Gitcho?
0
 
LVL 5

Author Comment

by:Gitcho
ID: 12031350
sorry - been very busy ... will look at it tonight & get back to you. Thanks for your patience.
0
 
LVL 5

Author Comment

by:Gitcho
ID: 12031878
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
 
LVL 10

Expert Comment

by:muso120999
ID: 12033520
okay, so how is it differing - you can tweak it by adjusting the algorithm for the variable movement...
0
 
LVL 10

Expert Comment

by:muso120999
ID: 12033630
Also the width and position of viewArea_mc have an effect too - the scrolling stops when the mouse is halfway across it
0
 
LVL 5

Author Comment

by:Gitcho
ID: 12035131
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
 
LVL 5

Author Comment

by:Gitcho
ID: 12035217
0
 
LVL 10

Expert Comment

by:muso120999
ID: 12036510
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now