Faculty of Design / Video Tutorials / Flash - AS2 - Flash and XML / How to create a gallery in Flash using XML data
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.
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-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-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
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
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.
' by Colin Moock.
