ActionScript 3 Sliding Images XML Gallery
This file is a ActionScript 3 demo of a sliding images gallery, as used on my work site, http://www.thereformation.co.nz.
Basically images are loaded sequentially from an XML file into a Sprite, which is dynamically masked and then tweened. The gallery has support for text descriptions (via a support class) and also creates a dynamic image number navigation system which updates itself based off how many images you happen to load in.
This is a class based file, which relies on two helper support classes. One of which simply provides an array of images from an XML file. The other, the “TextNavigation” class provides a mechanism for dispatching events to the text navigation section of the gallery. Updating its status, so that it matches the currently displayed image. There is also an optional text descriptions class which will pull in descriptions from an XML file and display these along with the images.
Gallery Features
- Vertical or Horizontal Sliding
- External XML Images
- next, previous, play, pause public methods
- Supports multiple galleries
- Event Based Architecture
- Dynamic tweened mask, so that it supports different image sizes
- Either Manual or Automatic Image Progression
- Optional Text Navigation – supports embedded fonts
- Optional Text Comments – supports embedded fonts
Updates
July 08, 2008: A new rewrite of the class moving it to a more modular structure. I’ve decided to make this a donator file, after spending a solid day rewriting it. Download includes, source, example and documentation.
Jan, 12, 2009: API changes, new events, class now supports loading in new galleries, various bug fixes and documentation improvements. Class is now at Version 1.5
Updated 15 July, with a new method for autotweening text comments
View Example
Here is an example of the file; http://www.noponies.com/dev/as3_slideimages/
Source Files
Donator Only File
Dependencies
Files use TweenLite, available from here; http://www.tweenlite.com
February 22nd, 2008 at 9:53 am
This Photo gallery is really cool. I’m looking online for a gallery like this that integrates video and audio players with the photos, sort of a mixed multimedia player/viewer.
Is this a difficult mod to this?
I’m just getting started with ActionScript 3.
February 22nd, 2008 at 12:44 pm
To be honest, I’m not sure. I’ve not actually done much with video. It may work..
February 26th, 2008 at 3:42 pm
I’m also trying to change the gallery into a horizontal sliding one. Where can I find how to load the images so they are horizontal instead of vertical? Thanks.
February 26th, 2008 at 4:21 pm
Ross,
Just change all the y values to x values and heights to widths etc.
March 18th, 2008 at 1:00 pm
Hi Dail,
thank you for the great example here.
I am learning as3 and wondering how do you have the slide number shows one by one after certain image is loaded.
where should i look into from the source code?
thank you for your time.
March 19th, 2008 at 12:12 pm
Hi Dail, i see it’s done within function Loaded(), thanks!
March 20th, 2008 at 12:46 pm
no problem pei!
March 24th, 2008 at 12:31 pm
Dail,
I work only in Flex Builder (don’t have Flash CS3).. I’ve tried to pick through the .fla with Notepad, but, so far, I’ve had no luck guessing how I’d call the slideshow from a Flex Builder project..
what’s the simplest way to initiate the slideshow in actionscript code? I’m too new to all this to understand some of the subtler points of working with these custom packages..
P.S. Your code contributions are great.
March 24th, 2008 at 2:08 pm
oop.. nevermind.. I figured it out. In case anyone comes here and wants to know how to get this working in Flex Builder..
Start a new Flex Builder project.
Copy all the *.as files and the slideimages.xml into the SRC directory.
my mx:script part of my main project xml file just has this basic code (since i’m so new to this.. i just had a button call the runShow() function:
import flash.events.*;
var myloadXml:loadXml;
var newSlides:slidingImage;
private function runShow():void
{
myloadXml = new loadXml(”slideimages.xml”);
myloadXml.addEventListener(”xmlParsed”, callbackHandler);
}
private function callbackHandler(event:Event):void
{
newSlides = new slidingImage(thinger, myloadXml.imagesArray);
}
March 24th, 2008 at 4:21 pm
Hi Eli,
Glad you got that figured out. My Flex skills are 0 at the moment.
March 28th, 2008 at 9:20 am
I’m quite new with Flash and I’m trying to create multiple slideshows with your “sliding images gallery”.
I’ve created 3 different xml files with image data but how would I have the AS in the FLA point to them? I was thinking I need to make 3 loadXml.as files to corrospond to the xml files…. If this is the correct way to go about this how would I modify the AS below to match up with loadXml1.as … loadXml2.as , etc
[CODE]
/*load in xml via call to external xml parsing class
it returns us a nice array of images to pass to the slideshow class*/
var myloadXml:loadXml = new loadXml(”images1.xml”);
myloadXml.addEventListener(”xmlParsed”, initSlides);
//create a new instance of the crossfading slideshow in the callback
//handler of the XML parsing routine.
function initSlides(evt:Event):void {
var newSlides:slidingImage = new slidingImage(this, myloadXml.imagesArray);
}
[/CODE]
Thank you very much,
Kevin
March 30th, 2008 at 10:32 am
Hi, that’s a prettyy well done AS3 script, thanks for sharing.
I have one question, I see in the xml file that there are more information like a name, and a description as well, but when I run the script, I can’t see this, is there a flag somewhere in your script i’m missing ?
Many thanks/
Matt
March 30th, 2008 at 4:58 pm
Matt,
That was planned to be added, hence the XML, but in the end I didn’t have time. So, to answer your question, no, there is no flag to turn it on.
March 31st, 2008 at 8:44 am
Dail, …arf ok! lol.
Hum, have you got any clues or tips, I’m new at actionscript, so I must say I’m able thanks to your comments to understand the code, but not make it myself.
In fact I bought a script that’s making the same, but it’s in AS2, and the project I must work on is on AS3, so I thought it was better to try to start from scratch with your work, … but i’m a zero lol.
Could you show me how to load and put the ‘about’ in a variable and then load it in a textarea on screen ?
Thanks.
Matt
March 31st, 2008 at 7:27 pm
Hi Matt,
I’ll have a look at it tomorrow.
April 1st, 2008 at 2:03 am
Dail, super nice from you, thank you!
Drop me a mail when you’re done, and be sure that if I can deal with your script on my future website, I’ll donate.
Matt
April 1st, 2008 at 2:06 pm
Matt,
There is a version with comments enabled up in the source files section of the post.
April 4th, 2008 at 7:54 am
Everything works fine locally when I upload it to the net – It only fetches some of the images and then just continues to wait for a response from my server … Am i doing something wrong.. appreciate help.
April 4th, 2008 at 9:23 am
Actually I figured it out.. some the image file names were not consistent in the XML file.. some had caps and illegal characters..
thanks anyway
April 5th, 2008 at 9:51 am
Hey
Very very nice! Had a long play with it and it works perfectly… trying to swap the “images” for “movie clips”.
Curious if you played around with that while designing it or did you make it purely for viewing images?
Shame I only found it an hour before going out for the night, I’ll explore it more tomorrow I’m sure.
Thanks fot the code Dail
April 5th, 2008 at 1:04 pm
Oliver,
It should work fine with movieClips.
May 6th, 2008 at 7:48 am
this is awesome. anyone set it up where it goes to the next slide auto?
i would love to know how
May 6th, 2008 at 8:34 pm
Ryan,
Read the class documentation.
May 7th, 2008 at 3:38 am
Is it possible to extend the loadXml class to handle variables from a php script generating the xml? I know I need to use URLRequestMethod.GET and URLLoaderDataFormat.VARIABLES but I am unsure how to get them to work within the class.
I thought it maybe something like this, which it isn’t as the URLRequestMethod and URLLoaderDataFormat come up as undefined
myXMLURL = new URLRequest(XML_URL);
myXMLURL.request.method = new URLRequestMethod.GET;
myXLoader = new URLLoader(myXMLURL);
myXLoader.dataFormat = new URLLoaderDataFormat.VARIABLES;
Any advice would be appreciated.
May 7th, 2008 at 6:49 pm
Thomas,
It is possible. I have extended that class to handle URL Vars. Its paid client work however..
May 8th, 2008 at 1:50 am
That’s fair enough. You already have shared a great deal of knowledge
I will continue to read up on the subject.
May 10th, 2008 at 8:24 am
Dale,
I’m trying to load up different galleries without changing the base code too much (from the main timeline). I have 3 buttons which are tied to specific xml files i want to load. I got that part to work but i keep appending a new gallery to the stage on top of the other galleries.
any suggestions would be great.
code //
var created:Boolean = false;
var mc:MovieClip = new MovieClip;
addChild(mc);
weddings.addEventListener(MouseEvent.CLICK,loadGallery);//slide images
people.addEventListener(MouseEvent.CLICK,loadGallery);//slide images
nature.addEventListener(MouseEvent.CLICK,loadGallery);//slide images
function loadGallery(e:Event):void {
var xmlFile:String = e.target.name+”/”+e.target.name+”.xml”;
/*load in xml via call to external xml parsing class
it returns us a nice array of images to pass to the slideshow class*/
var myloadXml:loadXml = new loadXml(xmlFile);
myloadXml.addEventListener(”xmlParsed”, initSlides);
//create a new instance of the crossfading slideshow in the callback
//handler of the XML parsing routine.
function initSlides(evt:Event):void {
var newSlides:slidingImage = new slidingImage(mc, myloadXml.imagesArray);
var newCommentsDisplay:DisplayComments = new DisplayComments(newSlides, myloadXml.commentsArray);
mc.addChild(newCommentsDisplay);
}
}
a prototype of my attempt can be found at http://www.pandtphotography.com/test/
This is some very handy code.. thanks a ton!!!
May 11th, 2008 at 7:45 pm
Peter,
Sounds like you simply need to remove the old gallery before you load in a new one? Or are you trying to have multiple galleries running at the time?
May 12th, 2008 at 4:59 am
I’m trying to have one at a time, just having trouble figuring out what exactly i need to remove. i created the empty MC (mc) but for some reason i cant access it correctly. i tried removeChild(mc), this.removeChild(mc), this.parent.removeChild(mc), etc, etc ..
i think i tried all of them haha..
Any pointers would be awesome. Thanks again!
May 12th, 2008 at 3:58 pm
Peter,
Try, mc.removeChild(0) to remove the slides, and removeChildAt(1) to remove the captions (might need to be removeChildAt(0) as the depths will shuffle when you remove the slideshow). The slideshow adds a new child to your mc sprite, so you just need to remove the slideshow sprite, and the comments sprite from that mc sprite. Also, the class expects a Sprite to be passed to it, I’m surprised it does not complain at you passing in a MovieClip (mc)
May 12th, 2008 at 7:54 pm
Thanks for your help Dale! I got the gallery part working at least. the comment block however is acting a little interesting. but ill work through that.
On a side note i have a perl back end generating the XML from ‘watched’ directories. this allows me just to drop in any file and it will populate the XML that your code displays. Very handy! thanks again!
here’s my ‘fixed’ code
//code
function initSlides(evt:Event):void {
if (mc.numChildren > 0 )
{
mc.removeChildAt(0);
//mc.removeChildAt(1);
}
var newSlides:slidingImage = new slidingImage(mc, myloadXml.imagesArray);
May 14th, 2008 at 10:19 am
First of all this is such an awesome app, I have been looking for one like this for a while. Just a quick question, I am uber new to AS3 after years of AS2, its taken a while to get a hang of it. I have been staring at the script for hours trying to figure out how to use buttons (movieClip style) to cycle through the images manually. I know how to in AS2 its the AS3 thats bogging my brain.
Any hints?
May 14th, 2008 at 6:48 pm
I find when I click a text link and come back to the movie – wait for the frame to change the formatting is ignored. Has anyone noticed this?
May 15th, 2008 at 3:02 am
Hey,
This is great! im just getting to grips with this stuff at the moment. Like Rob’s post above i am trying to make this slide left to right. So far so good, it is working ok except that the images seem to overlap by about 150 pixels. ive gone through the scripts but cant get this to work. Any help you could give would be great, im really stuck here!
May 15th, 2008 at 5:47 pm
JessicaBo,
Check the updated files. That ability has been added in.
Peter,
I’ve seen that bug, once or twice. Seems to be a Flash player bug.
Jonathan,
You will have to keep trying with that, sorry.
May 19th, 2008 at 10:06 am
Ok thanks. Just to not – I do not see the error on your active live site files – but on the downloaded version (untouched of course)… and I wanted to ask, is there a cure? Right now I add formatting in the xml to override the ignored formatting – but I believe it is a bad idea.
One other question:
Cand we render css font formatting inside the xml with a span, class or ID?
Thank you,
Peter
May 19th, 2008 at 12:24 pm
You can use CSS formating, using spans etc.
I’m not sure what causes that bug. I’ve seen it happen on the odd occasion in my files. There should be no reason, as the default textFormat for the textField is set. I could perhaps try setting the textFormat as well. I’ll give it a go, and see how it works.
May 21st, 2008 at 12:20 pm
Thank you for responding – I also noticed it happens: when you select the text, click on the text without a link or when you click on the text with a link. I went through the DisplayComments.as and tried moving constructTextDisplay() around to see if I could re-call that after each slide transition – with no success.
May 21st, 2008 at 6:38 pm
Peter,
Ok, its an odd bug. I’ll change the defaultTextFormat to a setTextFormat and see if that makes a change.
June 5th, 2008 at 7:18 am
Sorry to bother – but did your ’setTextFormat’ change work?
June 13th, 2008 at 8:00 am
This is fantastic. Thanks for contributing this excellent gallery.
A little bug report: If the gallery has manual movement active, then it will crash once you reach the end of the gallery (ie, it does not loop and flash reports error about indexing out of bounds). Quick and dirty fix is to edit the following line in the slideImages function:
if (pic == slideArray.length && (event==null || event.target == “[object Timer]” )) {
Such that the condition only checks slideArray.length and not the event. Of course, this probably breaks something else, but it worked for my purposes.
Thanks again for posting this!
June 13th, 2008 at 2:41 pm
Kevin,
Thats for logging that bug. I’ll have to investigate it.
June 17th, 2008 at 12:12 pm
amazing script, I love it!
So like as a quick question about modifying the script…
if I was to insert a link into the xml file, how would I change the actionscript to grab the hyperlink with in the xml on the mouse click?
Like I figure you would change the function on the mouse click over the image loading handler, but beyond that I loose myself in the script.
Thanks!
-Mark
June 23rd, 2008 at 2:46 pm
Hi Dale,
Is it possible to add a previous and next button? Also create two instance of the SlideImage one for fixed size to hold picture and one for backgound with 100% width. When button(previous&next) are clicked both slide show instance scroll. I wanted to do something similar to hulu.com home page. I am new to as3 and wanted to know what is the effort to do this. Love this script =). Maybe I can hire you.
Gerald
June 27th, 2008 at 11:30 am
Hi Dale!
I’m testing it and as i see you delete the function when you click on last picture to return to the first picture…
Otherwise nice gallery, i love your code
Thanks
PS: is an update in comming?
June 27th, 2008 at 8:04 pm
Mathias,
If I get a chance I’ll update it. There is another bug to fix as well..
July 7th, 2008 at 3:38 pm
Mathias,
Those bugs have all been fixed. This class is for donators only now sorry.
July 9th, 2008 at 1:52 pm
Oh! but i dont see an example
tell me how much i need to donate?
Thanks Dale
July 10th, 2008 at 12:17 pm
Matias,
The example online is an old version of the file. The new version works the same, but internally is completely different. I didn’t put up the new version. You can donate whatever you like, there is no minimum or maximum amount.
July 13th, 2008 at 12:15 pm
ignore the above message.
is there a way to use thumbnails for links?
July 21st, 2008 at 11:56 pm
How to download this file
July 22nd, 2008 at 2:24 pm
Nag,
Read what the post says..
September 5th, 2008 at 8:24 pm
hey, nice stuff, but can i add links to the images?
September 6th, 2008 at 1:54 pm
Alex,
Not directly. But you can listen for a click event on each image and respond to that, calling up your URL etc.
September 8th, 2008 at 5:36 am
what would be the use, i want the gallery to be editable externally (the links also), i have only some basic as2 experience, not very helpful when it comes to as3..
imo this would be one of the best AS3 galleries if you could:
-add to navigation names instead of the generated numbers
-links in the xml for any specific picture…
September 8th, 2008 at 11:44 am
The gallery would remain editable.
You would simply store your XML in a var outside of the gallery.
Outside of the gallery you would listen for a click event on the gallery, and when you get that event, query the gallery to see what image was clicked and from that access its ID. The ID number gives you the position in your XML file to get your link from. Which you then do.
I can try to whip up an example, but I wont be able to for a few days.
September 9th, 2008 at 2:03 am
Dale, whenever you could, that would be real awesome …
, and you’ll help me finish faster a lot of bugging flash projects i don’t really like to do :]
September 17th, 2008 at 8:45 am
Dale,
Is it possible to add next/previous arrows to navigate through the images, while at the same time updating the numbered navigation’s at state?
Also, can an alpha tween be added to hide the sliding of the images?
thanks,
-JM
September 17th, 2008 at 5:34 pm
JM,
Yes, there are methods to manually move to the next slide etc.
No, no alpha tween, but you could add it.
September 19th, 2008 at 4:03 pm
how bout my example Dale, i’m still @.
September 23rd, 2008 at 6:26 am
Dale,
One more question- Would it be possible for me to add proportional scaling to this gallery, or can it only remain at a fixed size?
Thanks,
-JM
September 24th, 2008 at 10:16 am
Hey Dail,
I know a similar question has been posted before; I just want to make sure this code is right for me before I will (gladly) donate for it. Does the script support/preload swfs? I would like to do something like the slider on ectravel.com.mt ?¢‚Ǩ¬¶ except in AS3, dynamically loading external swf?¢‚Ǩ‚Ñ¢s(4 or 5), and using the Next and Previous buttons?¢‚Ǩ¬¶ do you think I would manage? (I am new to AS3)
Thanks and great work
Ian
September 29th, 2008 at 2:47 am
Hi again,
Great (and clean app!) The SWFs loaded, but the movie is not recognizing their correct x and y dimensions. is there a way to disable the x and y automatic resizing and make them constant?
Thanks
Ian
September 29th, 2008 at 4:11 am
To change slide direction for Horizontal, change the following:
line 61
private var slideDirection:String=”horizontal”//direction of the class
line 321
public function NpSlidingImage(targetMc:DisplayObject,slideArray:Array,slideDirection:String=”horizontal”) {
September 29th, 2008 at 7:33 am
In my last post I was referring to the NpSlidingImages file.
Dale, can you please tell me how I can load the xml comments into the SWFs I am loading via the banner?
Thanks
Ian
October 5th, 2008 at 1:54 pm
Hello there guys!!!
I?Ǭ¥m encountering a problem while loading this viewer into another AS3.
The problem is that if I load it into a certain X Y position different than default, the navnumbers position is miles away from the pictures. And when I try to change default position of the numbers, when the first picture slides, they slide up and place themselves on top of the pictures.
All the pictures I?Ǭ¥m loading are the same size, so I don?Ǭ¥t really need those numbers to move around. I?Ǭ¥d like to know how to give them a fix position, so I could positionate the whole movie wherever I want without experiencing those kind of problems
Cheers!
October 6th, 2008 at 2:26 am
Look at the sample fla and see how the nav is positioned base off various events. Remove those listeners, and place the nav numbers where you like.
October 6th, 2008 at 3:43 am
I am kinda new to using xml with flash and i am trying to incorporate this gallery into my website. My site is set up so that i have several buttons that i want to have link to different types of galleries. If I make the gallery a movie clip then it offsets the images, comments bar, and numbers. I can fix the images by changing the x and y variables but I’m not sure how to fix the other parts. I also tried by just putting the gallery into the flash site without making it a movie clip and everything works fine. The only problem is that when you click on my close button everything closes except the xml gallery which stays open throughout the site. Any suggestions? Thanks!
October 6th, 2008 at 8:44 am
http://board.flashkit.com/board/showthread.php?p=4104487#post4104487
October 6th, 2008 at 7:52 pm
DALE I LOVE YOU!!!! :-p
Thank you very much mate, I struggled half of my weekend with that. hahaha. I want to say this here, so you have witness on writing……If I get the job I?Ǭ¥m applying, you?Ǭ¥ll get a massive thank you and a bonus (be it a present, help for any of your projects or a nice donation)!
October 7th, 2008 at 12:23 am
One more thing……. I wonder how to set a fixed position for the Comments….. I tried playing with the autotweening, and also tried to assigned a fixed .y and .x to it….but it didnt work. If anyone around can give me a hand it would be kindly appreciated.
October 7th, 2008 at 3:37 am
the comments work the same way as the nav. You should just be able to turn off the autoTweening and remove all event listeners that reference the comments.
November 14th, 2008 at 3:35 pm
Hi Dale
First of all THANKS FOR THE SUPER Cool gallery!
- i’ve tried to implement the AUTOSLIDING which was posted earlier by Adam.
I ran through the code and tried it. But something is missing when it comes to:
largeContent.removeChild(loadImage.content);
The “loadImage” dont refere to anything, so do you know what i can do about it. It doesnt work for me
November 14th, 2008 at 9:43 pm
Jessica,
Are you sure this is posted for the right file?
January 22nd, 2009 at 2:53 pm
Hi Dale,
Thanks for the cool gallery. Do you know how I might implement a random number of pictures being displayed by the gallery? In other words, sometimes I want to display on 1 image at other times, I want to display 2 or 3 images.
I know I need to call loadImage() recursively, however, I am stuck.
Thanks.
January 22nd, 2009 at 10:37 pm
This file does not have a loadImage method.
May 1st, 2009 at 1:15 pm
Hi Dale,
Your gallery is exactly what I’ve been looking for to integrate into a website I am developing in Flash! I am however, having a problem. When I try to navigate away from the gallery I need to remove the photos. For this, I include a check:
if (newSlides){
newSlides.removeChildAt(0);
}
while this removes the images, it does not remove the captions or the text navigation. You mentioned in a previous post that to remove the captions, one should also include newSlides.removeChildAt(1); But this does not work – I get an error saying index is out of bounds.
The second issue is when I try to navigate back to the gallery I get Error #2007: Parameter text must be non-null, which occurs at quite a few different functions.
Is there a clean way to unload the gallery when I navigate to another location in my main timeline?
Thanks very much.
Kartik
May 2nd, 2009 at 11:02 am
@Kartik,
You need to remove both the gallery and the captions separately. Each is its own self contained class, newSlides is just the images.