How to create a gallery in Flash using XML data
Author: Bill Trikojus
Using XML with Flash makes it easy to update the content of your Flash website. This is particularly useful for portfolio websites that need to be constantly updated with your latest work. This tutorial will show you how to store your portfolio data in an XML file and create a dynamic web portfolio in Flash. This is what you will be making.
 |
Part one |
|
Create XML file |
|
 |
Part two |
|
Load XML data into Flash |
|
|
Build Flash interface using XML data |
|
 |
Part three |
|
Sliding the thumbnail slider (mmm...easing...) |
|
|
Photoshop Actions |
|
|
Load external JPGs into Flash |
|
 |
Part four |
|
Load big images when required |
|
|
Clean up the interface |
|
 |
Part five |
|
Preload big images |
|
|
Fade between big images |
|
 |
Source code |
To learn more about using XML in Actionscript 1.0 check out 'ActionScript for Flash MX: The Definitive Guide
For a free web based Flash gallery with content management system attached check out Online Galleries.
Share
Like this? Click a link below to share it...
Subscribe and Download
Comments
2008-05-08: Diego said:nice tutorial it works just fine, congratulations. I just wanted to know, what if we needed to add a pre loader for the images? where do we add it? Thanx a lot
2008-05-08: Bill Trikojus said:
Just make a movieclip that constantly watches the holder that the big images are loaded into and shows itself and the loading status whenever the holder is not fully loaded. Pretty sure this 'how to build a website' tutorial shows how to do that.
cheers
cheers
2008-05-29: Bill Trikojus said:
Just added a new part to the tutorial to show how to preload the big images
cheers
2008-07-01: Aloseous said:
itz good.
2008-07-19: Melissa said:
Nice tutorial! How do you make it so the slide auto plays.That way you don't have to put a bunch of buttons if you have many images. Something like a slideshow possibly with next and previous controls on it to skim trough the gallery.
2008-07-21: Bill Trikojus said:
Like this?
How to make a Flash thumbnail scroller
2008-07-27: August said:
Loved the tute! My images vary in size and shape so I would rather that they were aligned centrally to the holder_mc. Is this possible?
2008-07-27: Bill Trikojus said:
Sure. Basic concept is this
//define the width height of big image area
w=400;
h=400;
//define the x and y of big image area
x=300;
y=100;
then when the new big image is fully loaded you get the width and height of the holder and position it inside that area
//eg
holder_mc._x=x+(w-holder_mc._width)/2;
//same for y
cheers
2008-07-29: Melissa said:
I was thinking of something like a slideshow with movie controls that enable you to pause/play or go to next slide or previous.
2008-08-11: August said:
Hi again! Thanks for the tip, it looks much better now. I was wondering about something else though. Is there a way to load a different xml file after the swf file has started? I would like to load in different different sections of pohotos.
2008-08-11: Bill Trikojus said:
Sure. Just format all the XML files the same, load a default one in at the start and make some buttons that call the .load method of your existing XML object providing a different xml file as the parameter. When the new xml file loads, the existing onLoad finction will fire and your interface will be built. You might need to write some code at the top of the function that clears the existing thumbnail scroller to make way for the new one - check out removeMovieClip() to do this
cheers
2008-08-28: Augst said:
Hi! Hope I'm not askong too many questions here :P I tried to load another XML file, and it loaded in as it should, but I can't seem to get the removeMovieClip() right. It just removes the last of the thumbnails, but the new thumbnails start in the position after taht anyway. I even tried with a loop. How should I set it up?
2008-08-28: Bill Trikojus said:
Hard to know without seeing your code. I can't remember the instance names in the tute but it would be something like
for(i=0;i<50;i++){
holder_mc['image'+i].removeMovieClip();
}
//reset starting x pos
//reset starting y pos
//load new xml file
Might be best to post the question on a flash forum like actionscript.org
cheers
2008-09-04: Guillaume Rolland said:
Hi, I've noticed that this tutorial only works if published in Flash Player 6 and not in 7 or 8. Unless I am mistaken, I believe something doesn't work right with the attachMovie.
What could I do to correct this?
2008-09-04: Bill Trikojus said:
It should work fine. In flash 7 actionscript became case sensitive so make sure you don't have attachmovie instead of attachMovie etc. I can't recall if it uses a prototype or not but if it does it needs to be MovieClip.prototype and not Movieclip.prototype.
Hope that helps
2008-09-07: Guillaume Rolland said:
Thanks for the fast reply, and you were right, there is no problem in version 7 or 8. Just got a bit lost in the code was all. Thank You.
2008-11-03: Marcus said:
good tutorial. but how might i make it so there are next/prev buttons that slide it along instead of the number thumbnails? thanks
2009-01-11: Stephen said:
hi there tx for the gr8 tutorial, i just have one question? See i am using the gallery for my website, but i onlty need have the gallery say at frame 80 or label clients. so how do i fix the " newBut =_root.attachMovie('numTemplate', 'num'+i, i);" to only appear on that part of the stage. tx
2009-01-12: Bill Trikojus said:
Hi Stephen
Put an empty movieclip on frame 80
Give it an instance name of holder_mc
Change the code to
newBut =holder_mc.attachMovie('numTemplate','num'+i, i);
That will fix it
cheers
2009-01-19: Stephen said:
Hi there Bill , I have tried to change the code, and i hav put an empty clip on the stage and changed the instance name, but it still does not want to work any ideas
2009-01-19: Bill Trikojus said:
Hi Stephen
Might be time to upload the file to a forum such as actionscript.org - someone there will fix it up in no time
cheers
2009-02-02: Tristen said:
Yes, I'm still looking for a response on the best way to add the additions next/prev button to the stage linked to the external xml page!
thanks in advance!
2009-02-02: Bill Trikojus said:
init a variable
currentImage=0;
change that var whenever a number button is clicked
newBut.onRelease = function() {
//this line is new
currentImage=this.myNum;
targX = 0-(this.myNum*208);
};
Put next and previous buttons on the stage. Give them instance names of next and previous. Then give them an onRelease such as
next.onRelease=function(){
currentImage++
_root['num'+currentImage].onRelease();
}
You would want to add an if statement that checks the currentImage and makes it loop back to the start when they reach the end
cheers
2009-03-03: mauricio said:
I am looking at the as2 code,
why did you use targX ???
can it be another name for variable?
targX = 0-(this.myNum*208);
2009-03-04: Bill Trikojus said:
you can call the var whatever you want
eg
theNewTargetXPosition = 0-(this.myNum*208);
2009-03-12: tom said:
Great tutorial, thanks a lot
If we have 7 or more images then all of them align on the same line which makes the bottom look ugly(i mean longer than the main slideshow above it). Is there any way that it can start a new line after 5?Thanks
2009-03-12: Bill Trikojus said:
use an 'attach in grid' script like this one
http://www.actionscripts.org/forums/showthread.php3?t=8896
2009-03-13: tom said:
Thank you. Just wonder if it's possible to have a video on that part? It is very very helpful. Thanks again
2009-03-13: Bill Trikojus said:
no time - sorry
2009-03-14: tom said:
No need to. I figured out how to do it. Thanks a lot for these valuable tutorials :)
2009-05-06: August said:
Just wanted to say thanks again for this tutorial, and show you what I made :) Here is the link:
http://www.funkyfish.no
2009-05-06: Bill Trikojus said:
Looks good. You have a minor issue with the first image in each gallery not being positioned correctly. Works fine after image is cached though so clear your cache to see. Happened in Firefox on a mac.
cheers
2009-05-08: Elise said:
Great tutorial. I got the xml working, but I have 4 images that has button that's floating. Is it possible to point the xml to the floating button?
Thanks
2009-05-08: Bill Trikojus said:
Not sure what you mean. Please clarify.
2009-06-20: sanjaya said:
thanks load load
2009-07-21: Logan said:
Bill, fantastic tutorial! I have one small problem though. I am using the method you described above in the comments to add next and previous buttons to scroll through the thumbnails, and it works fine. However I am loading this gallery into another shell.
I am using the "loadMovie" command to load this gallery.swf into an empty movieclip in another swf.
Everything works fine, however the next/previous buttons do not work. I suspect it is because maybe some variables are getting lost since _root is now the flash shell the gallery swf is getting loaded into, however I cannot for the life of me figure out how to remedy this. Please help, and thankss for all the hard work, and useful help in the comments!
2009-07-21: Bill Trikojus said:
2 options. Either use a relative path such as 'this' or update the code to include the full path to the buttons
eg
_root.shell_mc.button1
option 1 is much better and will work on its own and when loaded into another movie.
cheers
2009-07-22: Logan said:
Thanks Bill for the quick response, that worked like a charm! One more question if you wouldn't mind..
Is there an easy way to create an endless loop in one direction once you've reached the end of the slideshow? Currently I am using this:
next.onRelease = function() {
if (currentImage>=2) {
currentImage = 0;
_parent['num'+currentImage].onRelease();
} else {
currentImage++;
_parent['num'+currentImage].onRelease();
trace('nextButton');
}
};
Once you have reached the final item in the gallery, if you press the next button again it slides the entire set of thumbnails/desc all the way back to the beginning. I would like it to loop back to the beginning, but in the same direction.
Thanks again, you rock.
-L
2009-07-23: Bill Trikojus said:
No easy solution I'm afraid.
2009-08-16: Roberto Ribeiro said:
Hello.
Just to tell you the tutorial is great. I have a special question for my gallery, I don`t want to use idexed number buttons like yours, I want to use only a next and previous buttons to see the thumbnails. I tryed to script my buttons but isn't work. Can you tell me how to do that?
Best Regards.
2009-08-16: Bill Trikojus said:
Glad you enjoyed the tute.
What code do you have so far?
2009-08-17: Roberto Ribeiro said:
Thanks for your attention, well, my code was like this:
myNum = i;
myCurrentThumb = 0;
next_btn.onRelease = function(){
targX = 0-(this.myNum++)
}
previous_btn.onRelease = function(){
targX 0-(this.myNum--);
}
Now, first I delete all the indexed "newBut" numbers because I don`t need it, then I write the code above but the problem is when you cliks on the next button this scrolls all the thumbnails images at once, the same with the previous button scrlling back all the thumbnails.
By the way, I find a solution adding your "newBut" code and adding new line visibility "false" like this:
newBut._visible = false;
and then using your code for the next/previous buttons like this:
next_btn.onRelease=function(){
currentImage++
_root['num'+currentImage].onRelease();
}
previous_btn.onRelease=function(){
currentImage--
_root['num'+currentImage].onRelease();
}
and now is working good without viewing the indexed number buttons.
Any way I need something more simple to code because I have the indexed number buttons that I not use in my movie.
Thank you very much for your answer.
Best Regards.
2009-08-17: Bill Trikojus said:
right ok. I think you just need something like
currentImage=0;
imageWidth=300;
next_btn.onRelease = function(){
currentImage++;
targX = 0-(currentImage*imageWidth)
}
Hope that makes sense
2009-08-18: Roberto Ribeiro said:
Thanks so much, works for me, now a need only to add a number of images delimiter because when you clicks again on next button with a final thumbnail scrolls more without thumbs (blank frames) and the same with the previous button that still scrolls with blank frames to the other side to back the first thumb. In fact don't stops in first thumb or in last thumb, so I need to stop it in that points, first and final beteewn the number of thumbs I have in my XML file.
But It's ok for mr, is working very good, thank you so much again about your great support.
Best regards.
2009-08-18: Bill Trikojus said:
I can't remember the exact code from the tute but after the xml is loaded, the data would be inserted into an array and then looped through. Just check the .length of the array to see how many pieces there are.
eg
allPieces=theXML.firstChild.childNodes;
numPieces=allPieces.length;
next_btn.onRelease = function(){
if(currentImage
targX = 0-(currentImage*imageWidth)
}
}
cheers
2009-08-25: Roberto Ribeiro said:
Thank you very much! everything is working good in my gallery.
Best Regards.
Roberto Ribeiro
2009-09-22: nhotz said:
i downloaded the .fla file and when i open it this is the message "unexpected file format" i have Macromedia Flash Professional 8, please help i want to see the code and study how it's work,i'm new to flash and i'm teaching myself. thanks in advance.
2009-09-22: Bill Trikojus said:
Sounds like you might need CS3 to open the files. Just follow the tutorial video instead.
2009-10-02: rvr1982 said:
Hello there ;)
First of all, thanks a lot for your tutorials, these are by far the best i've found...
I'm quite new to flash, and have a problem when i try to put my photogallery into another flash website.
Everything is fine when "testing the movie" from the gallery. But when I test it in the website I'm working on, the numbered buttons are gone, so I can only look at the first image.
Everything i've done is create a new file, placed a new movieclip called holder_mc, and put an action on a new layer with this code :
holder_mc.loadMovie('gallery3.swf');
is there anything missing ? should i tell flash to get the XML file in the website too ? He can find the first image, so i suppose the problem comes from somewhere else...
Thanks for helping us out ;)
2009-10-02: Bill Trikojus said:
This is a very common problem. When using loadMovie, your paths can change. A quick google will provide many solutions, but basically you want to change all paths to relative paths. So
_root
will become this or _parent, depending on where the code is located.
Hope that helps
Bill
2009-10-02: rvr1982 said:
I could not fix it yet... Googling gives indeed tons of results, but each explanation is like a chineese book for me and my little knowledge.
I'm going back to you're "intro to actionscript" video tutorial, i think i've missed some important things in there ^^
cheers
2009-10-04: rvr1982 said:
fixed.
Thanks again for these excelent tutorials ;)
2009-10-05: eratiner said:
Hi Bill,
I was wondering if it was possible to create variables that would store the sum values of getBytesLoaded/getBytesTotal for all the thumbnail images.
I've been having problems with this because the images are coming in with loadMovie into holder clips inside the thumbnail template instances.
The idea is to create one preloader for the total file size of all the images rather then embedding the preloader into each thumbnail instance.
cheers
2009-10-06: Bill Trikojus said:
Shouldn't be too difficult. Trigger all the load movies, then define a var such as
totalSize=0;
then loop through all the holders with something like
for(i=0;i
totalSize+=holders[i].getBytesTotal();
}
then on enterframe say something like
loaded=0;
for(i=0;i
}
percent=(loaded/totalSize)*100
hope that helps
2009-10-06: eratiner said:
hmm, not sure if that will work when applied to the gallery tute script.
I tried your example out to calculate the total size of the 4 thumb images you've used in the tutorial but flash just traces out something like 4,8,12,16 for totalSize which i think might be the size of the holder_mc clip inside the template clip, the thumbnails would each be a couple thousand bytes in size.
getBytesLoaded isn't really working either, if i put loaded += newPiece.holder_mc.getBytesLoaded() inside an onEnerFrame script within the for loop, it traces way too much bytes.
2009-10-06: Bill Trikojus said:
OK you might need to post this on a Flash forum such as actionscript.org or just google it - I'm sure there are plenty of example scripts available for this sort of thing. Generally, I prefer to use sequential preloaders to load the images one at a time.
cheers
2009-10-14: rvr1982 said:
I'm having another issue :s
I'm trying to use this gallery to make also a FLV show on my website.
I use exacly the same template, I just added a "New Video" from the library, and did small changes in the Actionscript.
The problem is that Flash will always play the video from the last "piece" in the xml file, even if i try to see the other ones.
this is the script :
newPiece.load_btn.imageName = allGalleryData[i].firstChild.nextSibling.nextSibling.firstChild;
newPiece.holder_mc.loadMovie('thumbs/'+newPiece.load_btn.imageName+'.jpg');
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
theVideo.attachVideo(ns);
newPiece.load_btn.onRelease = function() {
ns.play('animation/'+newPiece.load_btn.imageName+'.flv');
globalContent_mc._visible=false;
trace('animation/'+newPiece.load_btn.imageName+'.flv');
};
As you can see, i used the
I really don't understand why it's working with the images and not the FLV's.
I've tried to get some help on Actionscript.org, but no one seems to know what to do.
Any help would be very appreciated ;)
cheers.
rvr
2009-10-14: rvr1982 said:
sorry, i found the solution.
It was nearly the same problem as my first one.
Had to change "newPiece.load_btn." to "this."
hope i have not taken anyones time !
2010-02-12: kathiravan said:
Excellent
2010-08-25: Arkadi Noeben said:
Thanks for the source at the very end. Very useful
2010-10-16: Osvald said:
If I want to add Autoplay function to this Gallery, How can I do? Thank you a lot!
2011-06-15: dorothy said:
Hello, I used the tutorial for some project, its great the way it works, there is some problem for me though, after playing the gallery, the numbers are appearing on every other page, either on intro,they dont disapear. Please, give me the solution for it.
thank you very much.
dorothy
Post a comment
Garbage posts and SPAM will be deleted.