XML Gallery/SlideShow

talk open source
1

Ya, thats right, another xml gallery. Stringy motivated me!! :lol:
Preview one
Preview two
[URL=“http://2210media.com/xmlGallery/xmlGallery_Josh_Rhame.zip”]**zip file here
****zip file two with external text
zip file three with thumbs and images

[COLOR=Teal]Phoenix68[/COLOR]****[COLOR=Teal] added a version that has the main image resize with the browser window [/COLOR][COLOR=Red]here [/COLOR]

[URL=“http://2210media.com/xmlGallery/xmlGallery_externalConfig_Josh_Rhame.zip”]
[SIZE=1][COLOR=Blue]Zip files were updated at 12/12/2005. Re-download if you have an older version. Couple bugs fixed [/COLOR][/SIZE]**:slight_smile:

Some things to note.
XML nodes are set up like this


<image color="0x8E94AF">
<description>image 1</description>
<pic>splat.jpg</pic>
<link>http://kirupa.com</link>
</image>

<image color> is the main background color
<description> is description
<pic> is the name of jpg. IMAGES HAVE TO BE IN A FOLDER CALLED IMAGES!
<link> is the link to go to when the main image is clicked.

The two examples are the exact same fla. This is what you have control over in the configuration layer.

** a: The thumb display, wether full screen or use buttons and the way the thumbs come in, either slide up from the bottom or just blink in.
** b: Colors: Thumb background, thumb preloader bar, info drop down box background, button background if “buttons” is choosen, arrow color, main image background box and hover caption background. I didnt give the option to change the text color because most will want to use thier own font anyway.
** c:** You also have total control over how everything is tweening. The main image box, the thumb slide left and right if “buttons” is choosen, the way the thumbs slide up if “slide” is choosen. And also the speed of how everything moves. Even the fade speed of the main image, in **and out.
** d: the border size around the image
e: if the first image loads or not
f: what you want the hover caption to say for the rollover and even if the node is left empty.

Here is a couple of FAQ’s that I know will be asked. :sigh:
**1: How come I get an error that Im missing an .as file.
**You need the laco tween component to make it work. Download the component [URL=“http://laco.wz.cz/tween/?page=download”]**here
**Download the extension manager here if you dont already have it.

** 2:How do I change the speed of the timer.**
Double click the timer_mc and just adjust the timeline.

Also, “nobuttons” and “blink” kinda work weird together. The thumbs load faster than the mc can center it self if the thumbs are cached. It doesn’t break or anything, it’s just cosmetic only.

The code for the fullscreen thumbs was taking from the flashlevel menu by **Voetsjoeba. **I do not take credit for this. But everything else is mine. And a big thanks to Scotty for helping me with a little math. ■■■■ thumbs :stuck_out_tongue:

Any questions let me know. I will try to answer as many as I can. But dont expect me to change anything. I think I gave you enough options as it is :lol: Any bugs you find post them here, Im only human :wink:

Josh

edit: there is no MX version, sorry.

double edit: [COLOR=Red]Im already getting pms with people asking me how to install the lacoz tween and use it. I added a second zip file above that loads all the configurations from a text file. There is no .fla in that zip. If you dont have the lacoz tween installed, then whats the point :wink:[/COLOR]

2

First off, dude, this gallery rocks and I have learned so much exploring it. Second, sorry to bring up stuff where someone might not even check it, but I figured I’d give it a shot here instead of starting a new thread.

I am working on manipulating this a little. I am using the XMLGallery_wThumbs version.

Basically, i want to preload all the large images first before anything happens. I know there is a version that just checks the thumb (which is resized from teh big image) but Just wanted to come up with a solution for many images.

I basically looked here:

http://www.kirupa.com/forum/showthread.php?t=210750&highlight=preloading+images

In the zip that Scotty provided in the thread above, I changed the xml file and the nodes in the AS to point where I needed them, and got it to preload all 17 images and works.

The problem comes when implementing that into this gallery.

I copied the code and preload bars and stuff (of the working one)…and put the AS in frame 1 of this gallery. It preloads the 17 images, but when the other part of the movie starts up…it still has to individually preload all the big images, hence defeating the purpose of what I was trying to do.

I don’t quite know why it works on its own using the zip Scotty made…but when I try to implement it in this gallery in frame 1…it preloads the 17 images, but still has to load them…I even tried just commenting out the pre-existing preloader AS for the main image in teh gallery AS…but that was no joy.

I would REALLLLLY appreciate some help. I am workin Flash 8, but I could save it to something else and post a zip for anyone if they have an idea, or you are just terribly bored.

P.S. I was registered under a different name…aptd…won’t let me post anymore because I’m denied permissions…did they do some clean up or something? Anyways…thanks in advance guys, I could really use some help.

_D

3

In addition to my post just above…

So I included a zip of the file I am working with.

I have the preloader set up in a folder, in frame 1.

If you prewview it and simulate download speed of DSL or something, you will see what I’m talking about as far as having to load each individual large image, even though teh preloader in frame 1 is loading something.

Could really use some help.

Once again, I even tried commenting out the preloader that exists on the images so far…and that didn’t do much, still had to wait fo rthe images to appear (minus the loading bar) heh…I can’t seem to figure this out.

In the zip there is an MX2004 and Flash 8 file. The file size is too large to attach, so please get it here:

http://www.dsull.com/kirupa/xmlGallery_preload.zip

Thanks in advance guys. :thumb2:

_D

4

skyo sucks monkey balls!

5

First of all, Thumb up !! for rahmej- great work

i have a question. I have put 150 images in this gallery, and it works pretty great. But for be able to see that last images you will have to scroll like 15 and more time to see them,…So I was wondering is there any way for “selecting” to which set of the images would gallery jump…like, let say that we have 15 sets of images. and i’m on 3rd, and i want to jump directily to 15th set…How could i do that?

Thanks for your replies

6

Whoopsie, good catch. When I added the extra node I forgot to add that into the equation. Zip file in first post is fixed. =)

7

Not really sure. The gallery really wasnt really designed for that many images. If you find a way, feel free to share it with us though =)

8

Not really getting your logic for wanting to preload all the images. :huh:
Thats pretty much what the gallery does with out the thumbs. It preloads each individual image and shrinks the large image into a thumb. So when you click it, the image should show immediately.

9

Well, I downloaded this one
http://2210media.com/xmlGallery/xmlGallery_Josh_Rhame.zip

The one without the seperate thumbs.

And that loading image… text that shows up before the large image shows up…is that needed?

Basically my logic for the overall preload is because I want the speed of the slideshow to be quite fast. Now, with teh other file (the one without the thumbs) I guess, the wait time will be with the thumbs loading in and shrinking them down…but the large image should pop up automatically? Seems as if it loads a little something, but then again, that might just be text you put in there? I

I mean, this code here…puts up that preloading image text. Can I take out parts of this code so it doesnt pause as much? Or is it needed to check with Flash before it pulls up the large image?


function loadMainImage() {
mtClip.loadMovie("images/"+nextImage);
var temp:MovieClip = _root.createEmptyMovieClip("temp", 99999);
temp.onEnterFrame = function() {
trace('loading');
if (mtClip._width>5 && mtClip._height>5) {
if (showSlide == true) {
timer_mc.gotoAndPlay(2);
}
preloader_mc._visible = false;
preloader_mc.gotoAndStop(1);
mtClip._x = Stage.width/2-mtClip._width/2;
mtClip._y = Stage.height/2.-mtClip._height/2-50;
var mainBoxX:Number = mtClip._x-imageBorder;
var mainBoxY:Number = mtClip._y-imageBorder;
var mainBoxW:Number = mtClip._width+imageBorder*2;
var mainBoxH:Number = mtClip._height+imageBorder*2;
mainBox.tween("_width", mainBoxW, mainBoxTweenSpeed, mainBoxType, 0);
mainBox.tween("_height", mainBoxH, mainBoxTweenSpeed, mainBoxType, 0);
mainBox.tween("_x", mainBoxX, mainBoxTweenSpeed, mainBoxType, 0);
mainBox.tween("_y", mainBoxY, mainBoxTweenSpeed, mainBoxType, 0);
mainBackground.colorTo(mainColor, colorSpeed, "easeOutQuad");
mainBox._visible = true;
fadeOut = false;
fadeMain();
mtClip.onRelease = function() {
if (nextLink != null) {
getURL(nextLink, "_blank");
}
};
mtClip.onRollOver = function() {
follow_mc._visible = true;
onMouseMove = function () {
if (nextLink != null) {
follow_mc.follow_txt.text = rollOverText;
follow_mc.followBg._width = follow_mc.follow_txt._width+5;
} else {
follow_mc.follow_txt.text = emptyNodetext;
follow_mc.followBg._width = follow_mc.follow_txt._width+5;
}
follow_mc._x = Math.floor(_root._xmouse-follow_mc._width);
follow_mc._y = Math.floor(_root._ymouse);
};
};
mtClip.onRollOut = mtClip.onReleaseOutside=mtClip.onDragOver=function () {
follow_mc._visible = false;
};
delete temp.onEnterFrame;
trace('delted');
}
};
}

Thanks for takin a look, and I love this gallery, learning so much.

_D

10

The “loading image” is just there in case someone’s internet connection hic-ups. Since the image is already cached, the code has to check some how if the image is already loaded. If the viewers internet loses connection for a second or two, and you never know what type of connection someone has, its nice to let them see that something is happening. Otherwise they will think the site is broken and just leave. Feel free to take out the “loading image” if you want =)

edit: Also, the pause you may be experiencing is that flash can only load one thing at a time. If its loading 20 or 30 images, then it has to wait until its done loading, or catch the code in-between loads, to show the first image.
All the code above you posted is needed. Dont delete any of it. =)

11

I see…

That makes sense, thanks for the explanation. You think I would know that simple rule by now. Anyways…

Yea, I am just tryign to figure out a solution for running teh slideshow as quickly as possible…the one without thumbs would work perfect for that…

But the other thing is that I wanted like some odd 100 images…so therefore the one without thumbs wouldn’t be able to start effectively without loading the thumbs… well it could…just would lag, and maybe cause some issues (havent tried yet). So with the 100 or so images, the one with thumbs seemed the best possible option. And therefore, preloading those 100 large images beofre the slideshow even happens would be effective for this. Then the only work flash would have to do is load the thumbs…

Then again, 100 images being called externally will cause problems, but we will see.

Thanks for your help, any suggestions would be nice. :thumb:

_D

12

How come you can’t select the dynamically loaded text in the infoBox MC.
I added some links ans stuff but i won t react to text?

13

Make the text selectable in the text field properties.

14

Well it didn’t work. What i did is that i cut the infoText out of the infoBox and paste it in the same place and the satge and then applied the slideInfo() to infoText and now it work. It seams like you can t make a dynamictext selectable when it is inside a MC

15

Hmmm, i guess your right. I think the rollover event for the slide out is conflicting with the text field. I played with it a bit and not sure it can be done using the tween method I am using. You may have to make it slide out using a frame base tween like here. http://www.kirupa.com/developer/mx/dropdownmenu.htm

Sorry.

16

Well i just put it outside of the infoBox mc and then applied the tween to the infoText textfield and it works !!!
By the way i am not using the roll over function but created an on/off buttun to make it work

17

RHAMEJ,
would you be interested in the resize code i added to you gallery? it resizes the main image and the image back ground when you resize the screen. Plus it resizes pictures bigger than the stage to fit the stage. If the picture is smaller than the stage then it wont resize it up after it has reached its original size

here is a demo
http://phoenix68.9online.fr/t/thumbs.html

18

You bet. Post it up for every one. =)

19

here is the fla with the resise fonctions
http://phoenix68.9online.fr/t/xmlGalleryThumbs.fla

20

Sweet, I updated the first post =)