...

View Full Version : xml gallery



djsand
03-20-2009, 11:36 AM
Hello there,
I have been helping a friend with an image gallery for his photos. We are loading the images from an XML-file.

I am new to ActionScript, so I have been using this tutorial (and adapted it a little bit to suit my friend's wishes): http://www.oman3d.com/tutorials/flash/xmlimagegallery/

The movie opens with thumbnails only. Clicking a thumbnail loads a full sized image, which stays on screen . A navigation system allow the viewer to go to the next full image or close the pop up window (movie), however when you get to the last full images I will like the gallery to go back to the first image, I would be very grateful if someone would share their thoughts on this subject about how I could do it.

Thank you

code

myGalleryXML.onLoad = function() {
gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
gallery_height = myGalleryXML.firstChild.attributes.gallery_height;
myImages = myGalleryXML.firstChild.childNodes;
myImagesTotal = myImages.length;
//numimages = myImagesTotal;
//trace("myImagesTotal "+myImagesTotal);
info_image = myImagesTotal;
//
//trace("myImagesTotal= "+myImagesTotal);
swa_page = myImagesTotal/15;
info_text.text = "Total Image: "+myImagesTotal;
//trace("Total Page= "+swa_page);
//page_text.text = swa_page;
onEnterFrame = function () {
b = swa_page;
test(b);
delete this.onEnterFrame;
};
//
thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
thumb_width = myGalleryXML.firstChild.attributes.thumb_width;
full_x = myGalleryXML.firstChild.attributes.full_x;
full_y = myGalleryXML.firstChild.attributes.full_y;
callThumbs();
createMask();
//scrolling();
};
var _loc2 = 5;
var _loc3 = 22;
var _loc4 = 1;
function callThumbs() {
swarup.createEmptyMovieClip("container_mc", 0);
//container_mc.attachMovie("txt", getNextHighestDepth());
//container_mc._x = gallery_x;
//container_mc._y = gallery_y;
var clipLoader = new MovieClipLoader();
var preloader = new Object();
clipLoader.addListener(preloader);
for (i=0; i<myImagesTotal; i++) {
thumbURL = myImages[i].attributes.thumb_url;
//thum_swa =
//swa = container_mc[i].attachMovie("txt", "txt", container_mc.getNextHighestDepth());
myThumb_mc = swarup.container_mc.createEmptyMovieClip(i, +i);
//mytxt_mc = attachMovie("txt", "txt"+i, getNextHighestDepth());
myN = eval("container_mc"+i);
//trace("ddddd+ "+mytxt_mc);
//for (var j in _parent.container_mc) {
//}
//trace("myThumb_mc= "+swa)
//myThumb_mc._y = thumb_height*i;
myThumb_mc._x = mytxt_mc._x=_loc3;
myThumb_mc._y = mytxt_mc._y=_loc2;
if (_loc4 == 3) {
_loc3 = _loc3+97;
_loc2 = 5;
_loc4 = 0;
} else {
_loc2 = _loc2+100;
}
++_loc4;
clipLoader.loadClip("photos/collection/thumbs/"+thumbURL, myThumb_mc);
preloader.onLoadStart = function(target) {
//attachMovie("my_love", target.getNextHighestDepth,0,0,100,20);
target.createTextField("my_txt", target.getNextHighestDepth, 0, 0, 100, 20);
target.my_txt.selectable = false;
target.my_txt.color = 0xFFFFFF;
};
preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
target.my_txt.color = 0xFFFFFF;
};
preloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
//target.my_txt.removeTextField();
target.my_txt.color = 0xFFFFFF;
target.my_txt.text = "";
target.onRelease = function() {
this._alpha = 100;
fullImage_mc2.removeMovieClip();
callFullImage(this._name);
//trace("callFullImage= = "+this._name);
fullImage_mc2.my_mun.text = this._name;
tt.removeTip();
};
target.onRollOver = function() {
this._alpha = 50;
//tooltip._visible = true;
//tooltip.testo = "HI";
//tt.showTip(this._name);
calltips(this._name);
//trace("onRollOver");
//attachMovie("tips", "tips", getNextHighestDepth(), {_x:_xmouse, _y:_ymouse});
};
target.onRollOut = function() {
this._alpha = 100;
//tooltip._visible = false;
//tips.removeMovieClip();
tt.removeTip();
};
};
}
}
//
function calltips(myNumber) {
myURL2 = myImages[myNumber].attributes.full_url;
myTitle2 = myImages[myNumber].attributes.title;
myStyle_Info2 = myImages[myNumber].attributes.style_info;
myDescribtion2 = myImages[myNumber].attributes.describtion;
//trace("myStyle_Info= "+myStyle_Info2);
tt.showTip(myTitle2);
}
//
function callFullImage(myNumber) {
next_btn.enabled = false;
pre_btn.enabled = false;
myURL = myImages[myNumber].attributes.full_url;
//trace("GUBLU============ "+myURL)
myTitle = myImages[myNumber].attributes.title;
myStyle_Info = myImages[myNumber].attributes.style_info;
myDescribtion = myImages[myNumber].attributes.describtion;
//trace("callFullImage url= "+myURL);
//trace("myStyle_Info= "+myStyle_Info);
//createEmptyMovieClip("fullImage_mc",getNextHighestDepth());
attachMovie("fullImage_mc2", "fullImage_mc2", getNextHighestDepth());
fullImage_mc2.pic_l.createEmptyMovieClip("fullImage_mc", getNextHighestDepth());
//fullImage_mc._x = full_x;
//fullImage_mc._y = full_y;
var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);
fullPreloader.onLoadStart = function(target) {
fullImage_mc2.lod = "";
//target.createTextField("my_txt",fullImage_mc2.pic_l.fullImage_mc.getNextHighestDepth,0,0,200,20);
//target.my_txt.selectable = false;
};
fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
//target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
fullImage_mc2.lod = Math.floor((loadedBytes/totalBytes)*100);
};
fullPreloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
//target.my_txt.text = myTitle;
fullImage_mc2.my_title.text = myTitle;
fullImage_mc2.my_style.text = myStyle_Info;
fullImage_mc2.my_describtion.text = myDescribtion;
fullImage_mc2.lod = "";
//fullImage_mc2.lod._visible = false
//fullImage_mc2.my_mun.text = this._name;
};
fullClipLoader.loadClip("photos/collection/full_images/"+myURL, fullImage_mc2.pic_l.fullImage_mc);
//trace("photos/collection/full_images/"+myURL)
}
//slideshow
function callSlideShow(myNumber) {
trace("callSlideShow");
fullImage_mc2.my_mun.text = "";
myURL3 = myImages[myNumber].attributes.full_url;
myTitle3 = myImages[myNumber].attributes.title;
myStyle_Info3 = myImages[myNumber].attributes.style_info;
myDescribtion3 = myImages[myNumber].attributes.describtion;
trace("myStyle_Info= "+myStyle_Info);
trace("callSlideShow= "+myURL);
//createEmptyMovieClip("fullImage_mc",getNextHighestDepth());
//attachMovie("fullImage_mc2","fullImage_mc2",getNextHighestDepth());
fullImage_mc2.pic_l.createEmptyMovieClip("fullImage_mc", getNextHighestDepth());





//fullImage_mc._x = full_x;
//fullImage_mc._y = full_y;
var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);
fullPreloader.onLoadStart = function(target) {
fullImage_mc2.lod = "";

//target.createTextField("my_txt",fullImage_mc2.pic_l.fullImage_mc.getNextHighestDepth,0,0,200,20);
//target.my_txt.selectable = false;
};
fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
//target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
fullImage_mc2.lod = Math.floor((loadedBytes/totalBytes)*100);
};
fullPreloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
//target.my_txt.text = myTitle3;
fullImage_mc2.my_title.text = myTitle3;
fullImage_mc2.my_style.text = myStyle_Info3;
fullImage_mc2.my_describtion.text = myDescribtion3;
fullImage_mc2.my_mun.text = myNumber*1;
//trace("SWA-myNumber= "+myNumber);
slide.gotoAndPlay(3);
fullImage_mc2.lod = "";
//trace("IMAGE LOAD DONE")
};
fullClipLoader.loadClip("photos/collection/full_images/"+myURL3, fullImage_mc2.pic_l.fullImage_mc);
}
//next
function callSlideNext(myNumber) {
trace("callSlideShow");
//fullImage_mc2.my_mun.text = "";
myURL4 = myImages[myNumber].attributes.full_url;
myTitle4 = myImages[myNumber].attributes.title;
myStyle_Info4 = myImages[myNumber].attributes.style_info;
myDescribtion4 = myImages[myNumber].attributes.describtion;
trace("myStyle_Info= "+myStyle_Info);
trace("callSlideShow= "+myURL);
//createEmptyMovieClip("fullImage_mc",getNextHighestDepth());
//attachMovie("fullImage_mc2","fullImage_mc2",getNextHighestDepth());
fullImage_mc2.pic_l.createEmptyMovieClip("fullImage_mc", getNextHighestDepth());
//fullImage_mc._x = full_x;
//fullImage_mc._y = full_y;
var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);
fullPreloader.onLoadStart = function(target) {
fullImage_mc2.lod = "";
//target.createTextField("my_txt",fullImage_mc2.pic_l.fullImage_mc.getNextHighestDepth,0,0,200,20);
//target.my_txt.selectable = false;
};
fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
//target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
fullImage_mc2.lod = Math.floor((loadedBytes/totalBytes)*100);
};
fullPreloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
//target.my_txt.text = myTitle4;
fullImage_mc2.my_title.text = myTitle4;
fullImage_mc2.my_style.text = myStyle_Info4;
fullImage_mc2.my_describtion.text = myDescribtion4;
fullImage_mc2.my_mun.text = myNumber*1;
//trace("SWA-myNumber= "+myNumber);
//slide.gotoAndPlay(3);
//trace("IMAGE LOAD DONE")
fullImage_mc2.lod = "";
};
fullClipLoader.loadClip("photos/collection/full_images/"+myURL4, fullImage_mc2.pic_l.fullImage_mc);

}

Thank you for taking the time to help me.....

fmaximum
03-20-2009, 01:26 PM
Try this link

http://www.flashden.net/item/xml-image-carousel/836

djsand
03-20-2009, 04:37 PM
Thank you, but that is not really what I need, and it does not he;p me to understand:confused:

marilynn.fowler
03-20-2009, 05:45 PM
You need to add "if statements" to your nav buttons. For the next button it needs to say that if the variable is equal to the gallery photo length, then set the variable to 0. For the previous button you say if the variable is equal to 0, set the variable to the gallery photo length.

djsand
03-23-2009, 11:28 AM
You need to add "if statements" to your nav buttons. For the next button it needs to say that if the variable is equal to the gallery photo length, then set the variable to 0. For the previous button you say if the variable is equal to 0, set the variable to the gallery photo length.

Thank you
I am really a newbee..and I try to do what you said so
on navigation I added


if (_parent.image_nun=myImages.lenght){
_parent.image_nun=0;
}

error messages Statement must appear within on/onClipEvent handler

gnomeontherun
03-24-2009, 09:49 AM
Ok its really hard to read the top code (please put code between the code tags in the editor, the # mark helps you), but find these lines


function callSlideNext(myNumber) {
trace("callSlideShow");
//fullImage_mc2.my_mun.text = "";
myURL4 = myImages[myNumber].attributes.full_url;
myTitle4 = myImages[myNumber].attributes.title;
myStyle_Info4 = myImages[myNumber].attributes.style_info;
myDescribtion4 = myImages[myNumber].attributes.describtion;
trace("myStyle_Info= "+myStyle_Info);
trace("callSlideShow= "+myURL);
//createEmptyMovieClip("fullImage_mc",getNextHighestDepth());
//attachMovie("fullImage_mc2","fullImage_mc2",getNextHighestDepth());
fullImage_mc2.pic_l.createEmptyMovieClip("fullImage_mc", getNextHighestDepth());
//fullImage_mc._x = full_x;
//fullImage_mc._y = full_y;
var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);
fullPreloader.onLoadStart = function(target) {
fullImage_mc2.lod = "";
//target.createTextField("my_txt",fullImage_mc2.pic_l.fullImage_mc.getNextHighestDepth,0,0,200,20);
//target.my_txt.selectable = false;
};

This is what calls the next image (I'm pretty sure). By the way this is AS2, not AS3.

So instead of attaching to the button, we put a conditional here. I can't test this for sure, but it should be a good start. Look at bolded parts for changes.


function callSlideNext(myNumber) {
if (myNumber >= myImagesTotal)
{
myNumber = 0;
}
trace("callSlideShow");
//fullImage_mc2.my_mun.text = "";
myURL4 = myImages[myNumber].attributes.full_url;
myTitle4 = myImages[myNumber].attributes.title;
myStyle_Info4 = myImages[myNumber].attributes.style_info;
myDescribtion4 = myImages[myNumber].attributes.describtion;
trace("myStyle_Info= "+myStyle_Info);
trace("callSlideShow= "+myURL);
//createEmptyMovieClip("fullImage_mc",getNextHighestDepth());
//attachMovie("fullImage_mc2","fullImage_mc2",getNextHighestDepth());
fullImage_mc2.pic_l.createEmptyMovieClip("fullImage_mc", getNextHighestDepth());
//fullImage_mc._x = full_x;
//fullImage_mc._y = full_y;
var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);
fullPreloader.onLoadStart = function(target) {
fullImage_mc2.lod = "";
//target.createTextField("my_txt",fullImage_mc2.pic_l.fullImage_mc.getNextHighestDepth,0,0,200,20);
//target.my_txt.selectable = false;
};

Its as simple as checking if the current index marker (myNumber) is equal or greater than the total number of images (myImagesTotal). If so, we set myNumber to 0 to restart, theoretically this would work or provide you with a place to start.

Remove the if statement from the button, all actionscript on a button must be inside of a on (action) { functions... } structure, but just be content to know that you can't just add any code onto a button, it has to follow a specific syntax.

djsand
03-24-2009, 11:45 AM
hello and thank you for your quick reply.
I tryied tto add that statement but it does not do anything :(
I do not have any code on any button (that gave me an error). However I do have some more code for the navigation inside the popup movie called fullImage_mc2.
this goes:

stop();


for (var w in _parent.swarup.container_mc) {
_parent.swarup.container_mc[w].enabled = false;
}
next2.onPress = function() {
jaan2 = image_nun*1+1;
_parent.callSlideNext(jaan2);
//trace("jaan= "+jaan);
};
pre.onPress = function() {
jaan2 = image_nun*1-1;
_parent.callSlideNext(jaan2);
//trace("jaan= "+jaan);
};


I tried to add the if statement here afer the next2.onPress function, but still no luck. I beleive that would be the right place, but I'm quite confuse about variable(which one to use)

full file can be found here
http://www.megaupload.com/?d=597L7ZF6

Big thanx for helping......
thank you or any suggestions...

djsand
03-27-2009, 07:54 PM
Thank you for put in me on the right path.
I finall managed
The right code was

if (_parent.image_nun >= _parent._parent.info_image*1-1){
_parent.image_nun = -1;
}


it does work like a charm, and I must say thanx to you two I learn a hell of a lot.

Thanx:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum