Gallery with Portrait and Landscape images

Ok, I’ve been searching these forums for the last 3 days trying to find a solution so please don’t just tell me to do a search for it.

I’ve gone through the gallery tutorial and that works fine. The problem is my galleries are a good mix of photos that are oriented in different ways (portrait and landscape), more specifically they are either 480x360 or 360x480 (hey, this is real life, sometimes you have to turn the camera sideways to get the best picture). Is it possible to tweak the gallery so that it displays all the images correctly?

If you need to see what i’m talking about, download the .fla in the gallery tutorial, open the animations folder, rotate one of the pictures 180 degrees and run the movie.

I’ve looked at a couple of lostinbeta’s threads about centering the movie but I can’t figure anything out. Thanks.

*also, what about adding a counter to it, so it displays something like ‘01 of 22’. the ‘22’ is the total length of the array but I am new to actionscript so I dont know var names and the ‘01’ could be determined by a counter in the loop but I don’t know how or where to add it.

Hello i had the same problem as yours but i solved it using XML files it takes a little bit of extra time but it is a guaranteed solution.

Sorry that i can’t remember the thread but somewhere on this forum there are a post of an image gallery based on XML file the actionscript code is written there on how to extract the information from it.

The thing i’ve done is that i added an attribute to the items of the file including the image state if it is vertical or horizontal and then based on that value i placed the empty movieClip that will load the image on the correct coordinates.

If you are interested in the code i’ll post it and i will be pleased to provide any further help.

Yes I would be interested! I don’t know much about XML though so you might need to explain your code. Go ahead and post it if you can and I let you know if i’m still running into problems.

Thanks.

Well the XML we use here is so simple and you’d be more comfortable with it if you have a previous knowledge of HTML.

The thing you need to know is that you can create XML files using NOTEPAD and then saving them as .XML file you can still edit them with notepad after that. The next step is creating your XML data file.

You should always begin the XML file with this line it is called the identifier:

<?xml version="1.0" encoding="UTF-8"?>

The you open a tag for your parent entity:

<Gallery>

Then you begin to add your children entities

<image>

with their respective attributes in our case imageName and state. For state i used ‘1’ for landscape and ‘2’ for portrait.

Your final XML file should look somrthing like this:


<?xml version="1.0" encoding="UTF-8"?>
<Gallery>
     <image imageName = "image01.jpg" state = "1" />
     <image imageName = "image02.jpg" state = "2" />
     <image imageName = "image03.jpg" state = "2" />
</Gallery>

and so on you must use this format or the XML parser in flash will not interpret the XML well.Do not use an empty line between to child entities entries.

A last note about XML if you have a large number of photos for example 100 it will be very time consuming to file the images name in the notepad i advice you to rename the images automatically using photoshop or ACDSee in a series from image001.jpg to image100.jpg then use EXCEL to provide the string name squence and you can simply copy and paste the sequence from EXCEL to an XML editor called XMLSpy.

Now you got your XML file the next step is to get the data from it.
you can use this actionscript code it is straight forward any strange command is clearly explained in the FLASH MX actionscript reference.

[AS]
stop();
XML.prototype.ignorewhite = true;
var _root.imagePointer = 0;
var ImageName = new Array();
var ImageState = new Array();
var myXML = new XML();

myXML.load("…/XMLFiles/myXML.xml");

function getFilesNames() {
// Parse XML
imageCount = tempXML.firstChild.childNodes.length;
node = tempXML.firstChild.childNodes;
for (var i = 0; i<myXML.firstChild.childNodes.length; i++) {
ImageName.push(node*.attributes.imageName);// Store the information of the imageName attribute in ImageName array
ImageState.push(node*.attributes.state);//same as above
}
return (imageCount);
}

if (myXML.loaded) {
play();
}
[/AS]
since sometimes the loading of the XML file may have some errors the last if statement is used to confirm loading the file.

when you reach the next frame you’ll have the following code
[AS]
stop();
getFilesNames(); // use the previous function to parse the file
if (ImageState[0] == 1) {
_root.mainImage._x = 204; // good position for landscape images
_root.mainImage._y = 180;
} else {
_root.mainImage._x = 304; // good position for portrait photos
_root.mainImage._y = 80;
}

// in my case i created on the root an empty movieClip to hold the images with an instance name mainImage
_root.mainImage.loadMovie("…/PhotosFolder/" + ImageName[0]);
// use this command to initially place the first image on stage

// in your case you have two buttons on stage one to cycle through the images upward (next) and one downward (previous)
// next and previous are the instances’ names of the buttons on the root
_root.next.onPress = function () {
if (_root.imagePointer == imageCount) {
_root.imagePointer = 0; // return to the first image if you are at the last one
} else {
_root.imagePointer ++; // increment pointer
}

      if (ImageState[_root.imagePointer] == 1) {
_root.mainImage._x = 204;
_root.mainImage._y = 180;
       }else {
_root.mainImage._x = 304;
_root.mainImage._y = 80;
       }

_root.mainImage.loadMovie("…/PhotosFolder/" + ImageName[imagePointer]);
}

_root.previous.onPress = function () {
if (_root.imagePointer == 0) {
_root.imagePointer = imageCount; // return to the last image if you are at the first one
} else {
_root.imagePointer --; // decrement pointer
}

      if (ImageState[_root.imagePointer] == 1) {
_root.mainImage._x = 204;
_root.mainImage._y = 180;
       }else {
_root.mainImage._x = 304;
_root.mainImage._y = 80;
       }

_root.mainImage.loadMovie("…/PhotosFolder/" + ImageName[imagePointer]);
}
[/AS]

That’s all hope everything is clear

Ok, thank you the code you posted makes sense, it’s just I can’t get it to work. I keep getting the error

Error opening URL “file:///C|/Documents%20and%20Settings/user/Desktop/animation/”

I have no idea how to fix it, I could post a zip with my fla, xml and images folder if you could take a look at it. Once again, thank you.

make sure you are making a proper path reference to your XML file and images folder as you can see in the code you have two path. “…/XMLFiles/” and “…/PhotosFolder/” this means that your XML files and photos must be in their respective folders.

Hey, I checked all the paths and they’re all right. You can download the files here: http://www.exshield.com/gallery.zip (~1.4mb) if you have a chance, please check it out and see what I did wrong.

Thanks

Hello this is a final working version of the code.

I will explain what went wrong later.
some of the errors were mistakes by me sorry :tie:

Thank you so much, it works like a charm. The only problem is I can’t see the buttons now??? I’ll look into this and see if i can fix it on my own. Thanks so much for the help.

Nevermind, they don’t show up in test movie but when I play the swf externally it works awesome. Thank you so much.

All right, now i’m just frustrated. The whole thing works when it’s on my desktop by as soon as I put it online, the swf will play but the pictures are no where to be seen. I’ve tried everything, including putting the entire folder (fla, swf, folders with images and xml) on my site and it still won’t load the pics. Any suggestions?

make sure that you have uploaded the files in the same order i mean by that folders included. the swf in a folder, xml in the XMLFiles and the photos in the Photo Folder.

It’s the exact same order, I unziped your file which created a folder called finished that contains the swf and folders for the xml and jpgs, I ran the swf and it worked. uploaded the folder called finished and tried to run the swf and an htm with the swf inside and both would load the swf and I can see the next and previous buttons but no picture (and its not waiting for the pic to load, the pic is about 20k and i’m on a dsl connection). Any other suggestions?