Skip to main content
M
mikey_ray
Participating Frequently
March 20, 2008
Question

AS3 xml photo gallery

  • March 20, 2008
  • 16 replies
  • 1146 views
I'm fairly new to flash, and after reading a few online tutorials on trying to make xml photo galleries (specifically the one here: http://www.tutorio.com/tutorial/simple-flash-xml-photogallery) I'm trying to figure things out.

I want to make something similar, but have the photos line up in columns (not rows), and once there are a certain number of photos in a column (in this case, 6) have them load into another column.

I have been trying to mess around with the AS given in the tutorial as well as what I've been reading on the net, and here is what I have so far:

***

I'm loading the images and thumbs through the images.xml file. On my stage I only have 2 movie clips (loader & thumbnails) and a dynamic text field (title_txt). Any thoughts??? I really am new to this, but I'm trying hard to figure it out - I'm at the point now where I need help.

Thanks!

Mike (mray@uvic.ca)
***

This topic has been closed for replies.

16 replies

J
Jamesabth
Participating Frequently
March 22, 2008
Great! And you're welcome.
M
mikey_rayAuthor
Participating Frequently
March 22, 2008
This is great!

I've already gone through the tweener tutorial - once I get the hang of doing things through AS I'm sure it will cut down on having to manually create mouse event listeners and a bunch of motion tweens on the timeline.

Thanks so much for the help! I'm currently testing all these different parameters out and trying to work on creating a scrolling thumbnail set - I just want to learn as much as I can and hopefully start to make sense of it all and put it together.

Thanks again!
M
mikey_rayAuthor
Participating Frequently
March 21, 2008
Yah - I think photoshopping the photos first would make more sense! Just run the batch, and in a couple second everything is ready!

If I wanted to take things a step further and add a fade for the loader so when the photos load they would fade in, and when I choose another they would fade out, would I have to add an eventListener on the thumbs and define two separate functions to change the alpha on the loader?

And if I wanted to try to add a shadow to the thumbs, loader, or both, would it work to essentially duplicate the whole code, calling on an xml file with a list of "shadow-looking" images, or can a shadow be added in a different way?

Thanks for the link to the video - VERY helpful!
J
Jamesabth
Participating Frequently
March 22, 2008
You can add a drop shadow filter by creating a new variable at the top of the code:

var dropShadow:DropShadowFilter = new DropShadowFilter(PARAMETERS);

You can test different parameters to change the appearence - see this page on the livedocs, or look at Flash help for the accepted parameters:

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001633.html

//---------------------------------------------------

I thought you would be asking about making a fade transition, it aways makes it look much better.

I would definitely recommend downloading the "Tweener" library and placing the "caurina" folder in the same folder as your FLA or in your "global ActionScript directory". This tutorial will teach you all about Tweener:

http://www.gotoandlearn.com/player.php?id=45

Attached code includes a fade in and out transition on the images and adds a drop shadow to the thumbnails.

I also realised (after testing for the first time!) that the thumbs were lining up vertically instead of in columns and I corrected the following 2 lines of code:

thumb.x = xOffset + (thumbWidth+xspacing)*i; //j becomes i
thumb.y = yOffset + (thumbHeight+yspacing)*j; //i becomes j
J
Jamesabth
Participating Frequently
March 21, 2008
Check out this youtube video!

http://www.youtube.com/watch?v=ttoEQJ4SqCk
J
Jamesabth
Participating Frequently
March 21, 2008
PS - I just googled "batch resizing photoshop" and found that you can easily resize a load of images proportionally to a certain width or height. Perhaps that could help you if you decide to go that route.

>>I have no idea how you know all this stuff, but you do and the code works great!

Thanks! Just takes practice - a lot of the code I pasted from past projects. I remember sitting at the computer screen thinking up the code for creating grids and resizing some thumbnail images I was loading in - eventually code starts spilling out and its great when it starts to work!
J
Jamesabth
Participating Frequently
March 21, 2008
Unfortunately not with ActionScript, Flash is a very bad program when it comes to scaling bitmaps, but you could try using a server-side programming language such as PHP to resize the image if you have that running on your server. However, for the best quality it's better to do it in a program like photoshop or fireworks.
M
mikey_rayAuthor
Participating Frequently
March 21, 2008
I have no idea how you know all this stuff, but you do and the code works great!

I have been reading a couple forums about trying to resize an image before it loads into the flash player in order to keep the quality of it, but I haven't been able to find anything super easy to understand - any suggestions for that?

I understand that it just might be easier to photoshop everything to the size I want prior to calling it in the xml file, but if there's way to do it through action script that would save a ton of work in editing - is it possible, however?
J
Jamesabth
Participating Frequently
March 21, 2008
PS - thumbsPerCol doesn't have to be outside of the function necessarily, as long as it is before the numCols variable, but I thought that it was best to put all the variables that can be changed together.
J
Jamesabth
Participating Frequently
March 21, 2008
Oh sorry! I forgot that I updated that in the origional code. The variable thumbsPerCol should be declared outside the function and

var numCols:uint = Math.ceil(images.length()/6);

should be

var numCols:uint = Math.ceil(images.length()/thumbsPerCol);

As it is in the origional code.

This is because if you change thumbsPerCol, the number of columns will change. As it is in the revised code, you would have to change the 6 in the numCols variable as well as the 6 in the thumbsPerCol variable to get it to work properly.

I have now edited the revised code above.
M
mikey_rayAuthor
Participating Frequently
March 21, 2008
It does indeed work!

I do have a couple questions related to the code however. Why is it on this revised code you placed the following section:

var numCols:uint = Math.ceil(images.length()/6);
var thumbsPerCol:uint = 6;

inside the "function xmlLoaded(ev:Event):void {" section, instead of specifying it beforehand, as you did in the first example? And what exactly does this mean? I've been playing around with it and I can kind of manipulate it by changing the 6's to other numbers, but how will this change when a different xml file is loaded with a different amount of images in the file?
Show more replies
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices