Flash :: [F8] Scrolling Gallery Tutorial?

XML-driven Scrolling Gallery - Most Basic Tutorial?
Hi! I only just found this site today and I'm so blown away by the amount of knowledge sharing going on here!

I'm new to Flash but have been asked by a friend to build a simple scrolling image gallery for her site. I followed the excellent Scrolling Thumbnail Panel tutorial and it works perfectly, but I think an XML-driven solution would be more useful in the long-term.

I have never used XML before, but it seems to have two main advantages as I see it: The scrolling images can be made to loop, so there is no left/right-hand edge, and the images can be replaced without opening the .fla file. Is this correct?

I have been staring at this screen for days trying to find the information on how to do this. I have read a lot of threads where people are trying to achieve something similar, but being so new to this, I'm finding it difficult to pinpoint the useful info.

Is there a tutorial which deals with this, without the added complication of buttons, captions, interactive scrolling content etc? I just need pictures scrolling across the screen based on mouse movement. The Scrolling Thumbnails Panel tutorial was SO close to nailing it, but I really want it to loop, and it'd be a huge bonus if my friend could replace the images herself. I can make the XML file with all the relevant images listed, but I'm not sure how to make Flash use the file to retrieve and display the pictures. I watched the Flash XML Basics tutorial but I'm not savvy enough to reinterpret it for a scrolling gallery. Do I even need a panel? I feel totally daunted but I know it can't be all that complicated!

Thanks for reading, and for your patience! :)

XML Scrolling Gallery -- Tutorial "Adding Thumbnails"
This tutorial was posted on June 14 05 but I seem to be having some problems with it. I get to the point of going through all the Action Script in the tutorial but I am then looking to run the script (export the Movie). Every time I do this, with my own coding or not, I see to the the same Error:
Error finding URL "file:/directory/directory/..../undefined"

this undefined error has reared its head before and it does seem to cause problems!

Could anyone give me some pointers on how to avoid this!

thanks,

Duck

This Is A Fix To The Image Gallery Tutorial - Makes It A Fully Dynamic Gallery
After searching and reading a couple of hundred post on the truly GREAT Kirupa image gallery tutorial - and wondering why nobody has written a new tutorial or at least updated the "old" one to avoid overloading the net with flash image gallery questions.

Im trying to create a new thread that will serve as a basic startingpoint for all Kirupa gallery questions. Im no überscripter nor do I know a lot about flash, but with a little common sense and perhaps some help from all of you... oh well - here goes:

Quick Checklist:

If your JPG's wont load - Make sure you don't save them as progressive JPG's, as they wont load in Flash.
If your images dont align to the photo container movieclip it is probably because your registration point of the photo MC is set to center instead of topleft.
Below is the code I have pieced together from different posts on the subject (I would like to credit all the authors, but that would require me reading all the posts again, as I have forgotten where I got them.

It produces a gallery that loads files dynamicaly thru a phpscript and checks for maximum image height/width and scales the images to fit within the photo MC. It also sets the center of the displayed images to a given coordinate (x,y).

All in all this is a install and forget image gallery, where the only maintaining required is uploading new pictures to the image folder.

On the server the file/directory structure is:
gallery swf
filearray.php
images/file_x.jpg
file_y.jpg
etc...

This is the filearray.php - modify this to check for files in the path set in the actionscript line: this.pathToPics = "images/";

PHP Code:

<?php if ($dir = opendir("images")) { while (($file = readdir($dir)) !== false) { $cont++; if ($file == "." || $file == "..") { } else { $string.= ($file); $string.= "&"; } } closedir($dir); } print($string); ?>

This is the modified actionscript from the original Kirupa gallery script:

ActionScript Code:
// This loads the array created by filearray.php and puts it into pArray lv = new LoadVars(); lv.load("filearray.php"); lv.onData = function(text){ pArray = text.split("&"); for (i=0; i<pArray.length-1; i++) { trace(pArray[i]); } } // variables ------------------------------------------ // put the path to your pics here, include the slashes (ie. "pics/") // leave it blank if they're in the same directory this.pathToPics = "images/"; // fill this array with your pics (set from filearray.php) this.pArray = pArray; this.fadeSpeed = 20; this.pIndex = 0; // MovieClip methods ---------------------------------- // d=direction; should 1 or -1 but can be any number //loads an image automatically when you run animation loadMovie(this.pathToPics+this.pArray[0], _root.photo); // Center the photo at (x,y) the coordinates are set in line 69 MovieClip.prototype.centered = function(x, y) { this._x = x-this._width/2; this._y = y-this._height/2; }; // Makes sure that the image fits within (wMax, hMax) MovieClip.prototype.resize = function(wMax, hMax) { while (this._width>wMax || this._height>hMax) { this._xscale = this._yscale -= 1; } }; // This line sets max width and max height (wMax, hMax) photo.resize(397, 297); MovieClip.prototype.changePhoto = function(d) { // make sure pIndex falls within pArray.length this.pIndex = (this.pIndex+d)%this.pArray.length; if (this.pIndex<0) { this.pIndex += this.pArray.length; } this.onEnterFrame = fadeOut; }; MovieClip.prototype.fadeOut = function() { if (this.photo._alpha>this.fadeSpeed) { this.photo._alpha -= this.fadeSpeed; } else { this.loadPhoto(); } }; MovieClip.prototype.loadPhoto = function() { // specify the movieclip to load images into var p = _root.photo; //------------------------------------------ p._alpha = 0; p.loadMovie(this.pathToPics+this.pArray[this.pIndex]); this.onEnterFrame = loadMeter; }; MovieClip.prototype.loadMeter = function() { var i, l, t; l = this.photo.getBytesLoaded(); t = this.photo.getBytesTotal(); if (t>0 && t == l) { this.onEnterFrame = fadeIn; // This line sets the (x,y) center of the image on the stage this.photo.centered(249, 213); } else { trace(l/t); } }; MovieClip.prototype.fadeIn = function() { if (this.photo._alpha<100-this.fadeSpeed) { this.photo._alpha += this.fadeSpeed; } else { this.photo._alpha = 100; this.onEnterFrame = null; } };

This should do it - the only thing I (think) I need some help with is changing the script to actually load the FIRST image, when the gallery loads. For some reason beyond my knowledge you have to click the next button for a image to load... What part of the script needs to be changed to make sure that a image is loaded on startup???

I hope someone will take the time to help develope this gallery tutorial / help file... It would be great if you added som more steps to the quick checklist... and of course fixed the load image on start problem....

Thumbnail Gallery Tutorial - Gallery Within Movieclip
I've taken the Adding Thumbnail tutorial http://www.kirupa.com/developer/mx2004/thumbnails.htm and it works perfect. However when I play the photogallery swf file within a movie clip (playing as externail swf from main timeline) and the gallery pulls up. The links work and all is good. All until I try and scroll to more thumbnail files. It's now scrolling. Scrolls fine when swf played indendently.

This couldn't have come a worse time as my finals are due in hours.

Please help if you can.

Thanks

Scrolling Photo Gallery But Not Flat Scrolling, Please Help Out
Hey everyone...

First off all, I thank you all to read my first thread in this website and also thanks Kirupa to give me chance to learn from you all masters.

As I am designing a website in which I am stuck where there is a flash script required. I am looking for a script which makes a small 5 to 6 Image scrolling photo gallery.

My problem is I don’t want flat gallery I am looking for a gallery which shows the perspective image coming from a deeper wall (e.g. image attached). In this Image below asume gray is a piller and the image have to scroll from the deep part of the piller in perspective.

Hope you guys and gals can help me.. I'm really stuck here.

Thanks
Rupesh

Looking For A Gallery Tutorial On This
Anyone have a tutorial on how this was done!!?

http://www.undrcrwn.com/

Gallery Tutorial
I've just got this tutorial working - http://www.kirupa.com/developer/mx/photogallery.htm - and it's lovely. See the result here;

http://www.3tcreative.com/_justsardinia/_flashtest/

Question is; how can i change this so the use can click the image and see a larger version in a new window (minus toolbars, etc). can anyone help please?

XML Pix Gallery Tutorial
I was working on the xml picture gallery tutorial and it worked wonderfully, but insted of using jpeg's, i try to use swf's to load and it didn't work. How would i go around that? is it possible?

<images>
<pic>
<image>32808.swf</image>
<caption>32808</caption>
</pic>
<pic>
<image>32812.swf</image>
<caption>32812</caption>
</pic>
</images>

-------------------

>^..^<

Help With XML Gallery Tutorial
On the tutorial Photo Gallery Using XML and Flash on this page http://www.kirupa.com/developer/mx20...otogallery.htm I can´t get the flash files at the bottom to open. Yes, I know they are zipped. When I try to open them I get a message in MX saying "unexpected file format".

Please help

Help With XML Gallery Tutorial
Hi, I'm trying to open the flash files at the bottom of page 1 in the Photo Gallery Using XML and Flash lesson but I can't. I'm using MX and I'm getting an 'unexpected file format' message.

Please help!

Help With Gallery Tutorial
Hello everybody,

Very new to this forum, and to flash design as well! Reading some of the really helpful tutorials written on this site. I was busy with one of them, using xml and flash to create a portfolio (http://www.kirupa.com/web/xml/examples/portfolio.htm).

I was trying to apply to concept and the code to a different layout, but the images simply won't show. I changed the code a bit to use (sub)elements as opposed to attributes. Shouldn't make a big difference as I also adjusted how to find the correct info in the actionscript.
At the moment I'm only trying to get some thumbnails (they're not the right size atm, but that shouldn't make a difference) to show with a title and description when you roll over the image with the mouse.

I've attached my .xml and .fla, i would really appreciate if somebody could take a quick look at it, i think it's just a matter of something being overlooked, but i can't seem to find it! Many thanks in advance!

kind regards, Frederik

Help With XML Gallery Tutorial.
hi,
i am using flash 8 pro. i have tried to complete a number of tutorials for creating an XML gallery. i always end up with the same result. no images and no captions. i get an error saying 'undefined' and this also appears where the caption would appear and there are no images displayed.
http://www.kirupa.com/developer/mx20...togallery2.htm
i have tried this tutorial also with the same results. the example works fine but when i copy and past everything in its correct place and add the instance names i just get the same 'undefined' result.
can anyone help with why this is not working correctly for me

thanks.

edit: i am running mac os 10.5.3
edit2: i have just tried the same tutorial on a different mac running os10.4.11
and get the same result, where the caption should appear it says 'undefined' and i also get an error message saying the same thing on the .swf file.
does this tutorial work with macs? any help or suggestions?

thanks

Tutorial For Image Gallery
Hi,

Anyone knows a good tutorial of how I can achieve a gallery looking like this:
http://www.jorgealcaide.com/
http://www.jorgealcaide.com/

I guess is based on XML. I tried really hard to work it out and I can't figure how the images grow and then when you click them they dissapear back to the menu.

Thank you very much
Nicolae

Help With Photo Gallery Tutorial...
Hi. I recently made a photo gallery following this tutorial
http://www.kirupa.com/developer/mx2...hotogallery.htm

I have the gallery in a mc in my flash document. The gallery itself works fine. What I am trying to do is have a page with all thumbnails of the pics and when you press each on, it will make the mc visible with the appropriate picture showing. So far I have make a few pages of thumbnails and I have managed to make it so when you press on each thumnail, the mc with the gallery becomes visible. now, on the mc with the gallery, if I change the value of "p" it will change the picture that is first displayed. So, how can I make the value of "p" change depending on which thumbnail I click? I tried making p = to a variable, then I defined the variable on the first frame of the move, but I can't get the value of that variable to change when I click the thumbnail. If Iset a value for the variable on the first frame when I define it, it works. The gallery will open to the picture number I defined, but I still can't get that value to change when I click on the thumbnails. I tried so many different ways I saw on the internet. I tried with global variables too. I'm completely lost here. Please someone help me out because I'm tearing my hair out over here. Here's the flash file incase anybody wants to look at it.

http://www.mypcmechanics.com/lost/8919.zip

also, when the mc opens with the gallery I can still hear all the buttons being activated that are behind the gallery when I move the mouse over the picture. Is there anyway to stop that?

Hope I made sense and thanks for the help

Looking For Simple Gallery Tutorial
Hi, i'm relatively new to flash and i'm looking for a simple tutorial that could teach me how to make a gallery.

Thing is I have looked all over the net for a tutorial that will teach me what I need. What I need is a gallery that has thumbnails that, when clicked on, opens up the image in a designated spot or in another window.

Now I thought i'd make the gallery using javascript that opens up the images in another window, but the problem is this script doesn't seem to work on MACs and in Explorer...

I tried using a tutorial shown on Kirupa with the slidding thumbnails but I can't figure out how to load images in the center because some images have different sizes and orientation...

Would be great help if someone could point me in the right direction! Thanks in advance!

XML Photo Gallery Tutorial
hi guys,

I need to create a flash photo gallery that loads the photos and photo title with xml but can't seems to b able to find a suitable one.

this is what i need to do http://www.afterlights.com/phuket/photo_gallery.html
basically the photos, thumbnails and photo description will be all controlled by xml
i've created the flash with everything loaded in flash by hard code now, can anyone share any similar tutorial that can do something like this?

million thanks in advance!

Help On The Photo Gallery Tutorial
Hi people. I have tried the photo gallery tutorial and I was successful. Bu the funny thing is out of the 8 pictures i put inside the array, only 6 of them managed to appear. Can anyone offer me any solutions? Thanks

The Photo Gallery Tutorial...
i got a question on this tutorial... its fine the way it is with one picture on it.

what i want to really do is have like 3-4 photos on the stage.. if i click "next" it changes all those 4 photos to the next set..etc..

possible?

thx

Help With Photo Gallery Tutorial
Tutorial Link: http://www.kirupa.com/developer/mx/photogallery.htm

The error I'm getting when I try to play the movie/photo album,
NaN
NaN
(etc. over and over again until I x out. It displays in the output box after I transition from the first picture to either direction.)

I'm not sure what he means by d=direction. Am I supposed to fill a variable in? If so, where do I put that number? I'm grateful for any help.

My alteration of the code:

//Code written by sbeener (suprabeener)
/*
i wrote this code, but you can use and abuse it however you like.
the methods are defined in the order which they occur to make it easier to understand.
*/
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "http://web.utk.edu/~jwatso13/vacation/";
// fill this array with your pics
this.pArray = ["v2.jpg", "v3.jpg", "v4.jpg", "v5.jpg", "v6.jpg", "v7.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);

Photo Gallery Tutorial
well i completed the tutorial on the photo gallery but when i test it, the image and the buttons are not where i want them to be, if you take a look at the attachment, youll see how it looks. Anybody know whats the problem?

Any Tutorial For Gallery - Link Below
http://www.burberry.com/UK/Collectio...lections.shtml

Photo Gallery Tutorial.
i was doing the create a photo gallery tutorial [ http://kirupa.com/developer/mx/photogallery.htm ] and everything works correctly execpt that when i have the gallery load inside of a scrollpane it wont work, it seems like its not getting the right directory or something. any sugestions?

MX Photo Gallery Tutorial
I've been playing with this and I have a question. Is it possible to set it to say loading when it's actually loading the next image, otherwise you just get the white screen and someone may think it's not doing anything?

this is a really good forum.

Tutorial: XML Photo Gallery
Hi dudes,

About that XML Photo Gallery tutorial...

What code do I have to change/add if I have a lot of images in a local folder and not online, and want to preload them all in 1 time. I don't want to preload the images one by one, I want to preload them all in 1.

Thx

Tutorial Photo Gallery
Ok I have read through the tutorial on
Photo Gallery
and this is the only part I do not understand

Code:

this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
I never got how to work that modulo division operator.
That whole section I am confused. I guess because I can't vision how it works. Can someone explain this is detail and simple for stupid people like me.
Thanks in advance

Photo Gallery Tutorial HELP
Hi,

I tried making a photo gallery in flash using the tutorial found on the site. But my pictures are off-centered. Does anyone know what might be the problem? I'm new to flash and can't seem to figure what I'm doing wrong, since i've copied the code from the tutorial.

Please help,

Rye

In Regards To The Photo Gallery Tutorial.
http://www.kirupa.com/developer/mx20..._slideshow.htm

I am very new to flash and action scripting......... so.... how would i make it so that when the user clicks on the image in the slide show....... that image pops up in a larger size

Picture Gallery Tutorial
Hi,

Im new to the board, just a quick question about the picture gallery tutorial.

How can u change the images to your own? everytime iv tried they fail to load. They are in the correct directory with the right path to them, but they dont load.

Thanks

Help:Photo Gallery Tutorial
the code from tutorials works ok for Flash MX but not for Flash 5 , can any one help, im using Flash 5 will soon upgrade to MX.

latin_sydney

/*
i wrote this code, but you can use and abuse it however you like.
the methods are defined in the order which they occur to make it
easier to understand.
*/
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);

Photo Gallery Tutorial A Lil Help
Hey all I just finished reading through the two gallery tutorials on this site the first here http://www.kirupa.com/developer/mx20...otogallery.htm and the second to add thumnails to the gallery found here http://www.kirupa.com/developer/mx2004/thumbnails.htm.

I just had two questions on how to modify the gallery. The first question is in the begining of the add thumbnails tutorial its shows and option to display the thumbnails in a grid. I was wondering how would I go about making that grid totally lost any help to achieve this would be great. Is it possible to get the thumnails to be listed in the list box component.

My second question is I know how the description text of each image is called. But I wanted to create a pop up buble graphic that if you rolled over and information icon it would display the pop up graphic with description to the corresponding image.

Last quick question how do i change the width and height of the thumbnail images inside the scroller.

Thanx for any help

A Question About XML Gallery Tutorial
Hi

There is a great tutorial under the topic Flash MX2004 – “Adding thumbnails”.
It’s about how to make a photo slideshow with scrollable thumbnails using Flash and XML. And it’s function is simple too, just click on a thumbnail and larger image fades in above.
If photograph is taken as landscape everything is fine but if it happens to be upright or portrait, it appears on left side of the picture_MC.
Is there any way to make upright images appearing in the middle of picture_MC?
Here is the code.

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._heig ht)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=200) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}

function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}

Thank you for any answer.

Xml Photo Gallery Tutorial
hi, i used the xml photo/thumb tutorial with some modifications and it seems to only be working when viewed in firefox, not with IE. in addition, it doesnt preview properly in flash. everything seems to be in order, but any ideas as to what may be happening?

forgot the code:

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("gallery.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 20;
tscroller.onEnterFrame = function() {
if ((this._ymouse>=thumbnail_mc._y) && (this._ymouse<=thumbnail_mc._y+thumbnail_mc._heigh t)) {
if ((this._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((this._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}

and the gallery.xml code is:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<images>
<pic>
<image>photos/photo-01.jpg</image>
<thumbnail>thumbs/photo-01.jpg</thumbnail>
</pic>
[etc. with pic array]
</images>

Xml Gallery Tutorial Problem
I'm following this tutorial to create an image gallery.

Code:
http://www.kirupa.com/developer/mx2004/thumbnails.htm
I can get the main part of the gallery to display just fine, but I can't any thumbnails to display at all. Here's what I have done so far:

Code:
http://s38.yousendit.com/d.aspx?id=13NDFI21TGWVV25JMFVKHD39WE
As you can see I'm trying to get the thumbnails to display in a vertical fashion and I would like to have two side by side if that is possible but at the moment I can't seem to be able to display any. Nevermind the fact that the tutorial displays them horizontally. I should still be able to display one or even just part of one, but I can't. I would really appriciate it if someone could take a look at my file and tell me what I'm doing wrong. thx in advance.

About The Photo Gallery Tutorial......
Instead of the jpg file, can the photo gallery load gif or bmp files?

Help With The Photo Gallery Tutorial Please..
hello.

I'm sorry if this has been answered in a previous thread, I searched but found nothing.

I am working with the Flash MX photo gallery that is posted in the tutorial section, and I seemed to have run into a snag.

I replaced the images (image0 - image9) with my own images that I want to use with the slideshow, and those images don't get recognized. I tried naming them the same and naming them differently and changing the code to reflect that, but they still do not come up in the slideshow.

Am I doing something wrong here. I am at wits end as to what else to try. any help is appreciated.

XML Photo Gallery Tutorial
Hi,

Hope someone can help, when I try to open the fla on this thread > http://www.kirupa.com/developer/mx20...otogallery.htm

it comes up with 'Failed to open'. Can anyone shed any light on this? This would be a REALLY handy tutorial as it is exactly what I need to accomplish for a project I am about to start!

Thanks in advance

PS - I 'am' opening the correct verion (flash 2004)

Help With Photo Gallery Tutorial
Ok, I figured it out! Thanks.

Help With The XML Flash Gallery Tutorial?
Alrighty, before we start I would like to say I am definately not an ActionScript type of person, which makes it difficult for me to work this all out. I prefer the "making things look nice" side of it all.

I've went though the Flash Gallery using XML tutorial and the one with the thumbnails added, got it all working wonderufully... the problem is that I have no idea where to start editing it to my own needs.
I've tried deleting things and changing lines and stuff and it just doesn't like me touching it, a helping hand would be nice.

So what do I want to try and make happen?
Its probably quite simple, I have the XML file, structured like it shows on the tutorial, only without the descriptions or thumbnails, so thats out of the way, no need to touch it until I want to add new images.
Now all I need is to get Flash to display them scrolling along from right to left continuously (eg the thumbnails tutorial without the mouse interaction and then repeating). One nice little thing would be if the images could get bigger when the mouse went over them, but not in a seperate place, just scrolling along. I just can't quite figure out among all this code which pieces are making the images display and which parts I could get rid of after making this happen.

I could probably work out the scrolling and the size changes myself but because its got the XML stuff to look at and its got to load it, my mind just suddenly can't cope. It could be I will come back to this tomorrow and all will make sense but I doubt it.
Face your worst nightmare and give me a hand?

Thanks in advance to anyone who helps me or points out a silly mistake I've made.

Photo Gallery Tutorial
Hi,everybody. I was wondering if i could get some help or guided in the right direction in finding my answer. I did this photo gallery tutorial (http://www.kirupa.com/developer/mx/photogallery.htm). I magment get everything to work but when i put the script in a moveClip that goes on my main time line, it doesn't work. ideally i would like to put the script in a swf that will load in to may main movie. If somebody could help that would be grate.

This is what the script looks like.

// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory

this.pathToPics = "animation/";

// fill this array with your pics

this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg", "image10.jpg","image11.jpg", "image12.jpg","image13.jpg","image14.jpg","image15 .jpg","image16.jpg","image17.jpg","image18.jpg","i mage19.jpg","image20.jpg"
];
this.fadeSpeed = 20;
this.pIndex = 0;

// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation

loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;

//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};

// Actions -----------------------------------------
// these aren't necessary, just an example implementation

this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);

Xml Gallery From Kirupa Tutorial
hi all. i've used the tutorial here for the photo gallery with scrolling thumbnail. everything works fine except the thumnails are aaaaaalllll the way to the right. they don't come up where they're supposed to. I'm looking at it and it's not even showing the thumbnails on the site... I don't know what's wrong. They show up on the swf file way to the right but they don't show at all on the site. Can someone tell me what do I need to do to get the thumbnails in place?

Below is the link to the site I'm working on click on "photo gallery"

http://www.africandancelady.com

stop();

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("pics.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._heig ht)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}

Photo Gallery Tutorial Help
Hi all,

I have used the Photo Gallery (with scrolling thumbnails) tutorial on kirupa.com as the basis for a project I am working on for my client. Basically, they have 8 different categories of products they want to show images of, so I set up 8 different xml and swf files that are loaded into a level from a main swf that holds the nav buttons.

My question: Is there a way to add some script that when you reach the end of one category, that it will then load the next category on the final "next" button hit? In other words, there are 5 images to load in category 1, you click through that category and when you come to the last image, you click next again and it will then load category 2 swf?

Thanks in advance

Gallery Based On Xml Like In Tutorial, But....
Hi
I try to make galery based on xml, just like in tutorial http://www.kirupa.com/developer/mx20...otogallery.htm , but i wanna, that preloading will be not before every picture, bu t just one in start. First load all jpg from xml, and then start to looking at it.

Could someone help me with this? I'm begginer in AS, so plese, help.

Sorry if my english isn't as wel, as it should.

Photo Gallery Tutorial Help
Hi Im relatively new to actionscripting and im trying to modify the photo gallery tutorial which is on this site. I have provided the code below. Basically i have modified the original script with the help of other tutorials on this site. So right now i have it automatically changing between images with an interval of 3 seconds and also displaying the array of images in a random sequence. What i really, really, really, really want it to do from here is to load this movie onto multiple movieclip targets situated on the stage, so that there are like 6 instances of the movie on stage.

If anyone could help me i would greatly appreciate it!!!

my script:

// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "image_files/";
// fill this array with your pics
this.pArray = ["2.jpg", "3.jpg", "4.jpg","5.jpg","6.jpg","7.jpg","8.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.myMC1);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.myMC1._alpha>this.fadeSpeed) {
this.myMC1._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.myMC1;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.myMC1.getBytesLoaded();
t = this.myMC1.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.myMC1._alpha<100-this.fadeSpeed) {
this.myMC1._alpha += this.fadeSpeed;
} else {
this.myMC1._alpha = 100;
this.onEnterFrame = null;
}
};
//change photos
this.randomPhoto = function() {
this.pIndex = Math.floor(Math.random()*pArray.length);
this.onEnterFrame = fadeOut;
};
interval = setInterval(this, "randomPhoto", 3000);
this.onEnterFrame = null;

[CS3] Photo Gallery Tutorial
Hey i read your tutorial on Creating a Photo Gallery:

http://www.kirupa.com/developer/mx/photogallery.htm

I've been trying to figure out how to activate the script when I click on a button - as in loadmovie into a blank mc.

For example I click on "project1" and it loads "image1.1" "image1.2" and "image1.3" ; I click on "project2" and it loads "image2.1" "image2.2" and "image2.3" etc.

Can't get it working though.

Photo Gallery Tutorial
In reference to this tutorial:
http://www.kirupa.com/developer/mx/photogallery.htm

I was wondering how to load portrait pictures as well as landscape. I can resize pictures so that they fit in the window, but all portrait pictures end up on the left side of the movie. Is there a way that I can simply center portrait pictures?

Thanks!
Brett

Photo Gallery Tutorial Help
I have just tried doing the "Create a Photo Gallery" tutorial:http://www.kirupa.com/developer/mx/photogallery.htm

It kind of works, but it is only showing one picture. What am i doing wrong? here is the code:

//Code written by sbeener (suprabeener)
/*
i wrote this code, but you can use and abuse it however you like.
the methods are defined in the order which they occur to make it
easier to understand.
*/
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "";
// fill this array with your pics
this.pArray = ["pic2.jpg", "pic1.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);

Both pictures are in the same file and labled and named correctly. Can anyone help? Thanks very much.