Work Environment:
Computer: iMac G5
Flash: CS4
Actionscript: Version 2 (AS2)
Export Version Target: Flash Player 7
Hi
I’m in the middle of attempting to complete a slideshow for the website of the Library I work for.
(It’s a photo Gallery at the moment, but once the bugs are clear, it will be a slideshow)
I’m working off of a project that I had started a couple years ago and then stopped working due to other priorities, projects, life etc…
It was based on the Photo Gallery Kirupa tutorial:
http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm
I’m using AS2 to reduce the need for the newest Flash Player, and because AS2 is still the most familiar to me.
The features I’ve been trying to add is:
• Auto Resize based on size and dimensions of XML Loaded Photo
- It detects if the height is greater than it’s width and resizes one, determines the percentage of the new size versus the old size, and then resizes the other dimension based on that percentage
[[ Semi Example:
If (Image_height > Image_width) {
Percentage = Original_height versus Maximum_image_height
Image_height = Original_height x percentage
Image_width = Original_width x percentage
]]
• It then centers the newly resized photo into the middle of the area dedicated to the photos.
The photo centering works perfectly.
The Photo resize is the problem.
The first photo loaded into the program works perfectly, as does any subsequent photo, provided that it’s LARGER than the largest loaded photo.
If it’s smaller, the code imports it in, and despite the fact that had it been the first photo Loaded, it now loads, as a small percentage of it’s original size (this percentage is directly determined by how big that last Big photo was. (Not on purpose))
So if you load 3 photos:
Image1 - 400px Wide, Image2 - 600px Wide, Image3 - 800px Wide
and Image1 > Image2 > Image3
By the time you get back to Image1 in the loop Image1 one is now something like 100px wide.
I haven’t a clue why this is working like this.
The Code Traces I’ve been using have sent me the Dimensions of the photos as each one is loaded, but the numbers don’t quite make sense, I haven’t been able to determine what’s happening.
The code determines which dimension is larger and then launches code similar to this.
For example: Height is larger than width
pickheight = picture._height;
resizePercentage1 = (280 / pickheight) * 100;
// Example result: 58.333333333333+
// I:E 280 is 58.333333333333+% of 480
picture._height = resizePercentage1 / 100 * pickheight;
picture._width = resizePercentage1 / 100 * pickWidth;
]
That’s pretty much it, the rest of it, consists of the code to handle the XML, code to center the photos after resize, and code to check the size of the photo against the maximum size, and to determine which side of the photo is larger so that it resize the correct side first and resizes the remaining size based off of the resize percentage.
I’ll include the rest of the Code at the end of this post.
So like I said, the code resizes the first image perfectly, as well as any image that is larger than the largest. But when I cycle back to an new or old Image that is smaller than the largest the resize code acts strangely.
I’ve attached the Fla file along with the xml file, and the 5 images I quickly pulled off of Google for testing purposes.
I’ve saved the Flash file as a CS4 (what I’m working with) CS3, and Flash 8.
I don’t have the tools here to go lower then that.
*Edit: Forgot to attach the Zip file, then discovered it was too large to upload to the forum.
File available for download here:
http://www.4shared.com/file/215084451/d6ea1736/Photo_XML_Resizer.html
The file should be safe. It was created on a Mac, and never touched any PC much less an infected one.
Thank you for your time, I’d appreciate any advice you might have.
Uhm.
P.S. Also can anyone recommend a simple to use, freeware Photo Application that will allow the other Library staff to resize the photos they need to put online, and save as web quality? (Webquality = 24k versus 240k)
I’m using Photoshop at the moment for my work here, but my time expires at the end of march, and Photoshop goes with me. (I’m using my own computer in the Libraries back room)
So I need to leave a working system whereby the Library staff, who don’t have an in depth understanding of the computers can modify the slideshow easily.
The autoresizing feature of the photogallery/slideshow was to help simplify this.
Anyway… Thanks.
Here’s the code:
stop();
//Global Variables used later
photoLoaderHeight = 280;
photoLoaderWidth = 380;
// Variables below used for numbering Debugging Traces
_root.HwCheck = 0;
_root.WhCheck = 0;
_root.HwCheck2 = 0;
_root.WhCheck2 = 0;
// ===========
// More Debugging Code
pickWidth = picture._width;
trace("First pickWidth = " + pickWidth);
pickheight = picture._height;
trace("First pickheight = " + pickheight);
trace("");
trace("=================================");
trace("");
//============
//============ START First functions ============
function nextImage() {
trace("Next Btn Size Check");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
trace("=================================");
trace("");
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
title_txt.text = heading[p];
desc_txt.text = description[p];
picture_num();
}
} else if (p==(total-1)) {
p=0;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p],1);
title_txt.text = heading[p];
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
title_txt.text = heading[p];
desc_txt.text = description[p];
picture_num();
} else if (p==0) {
p=(total-1);
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p],1);
title_txt.text = heading[p];
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 loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
//percentCalc not in use, it caused an odd error :/
function percentCalc(a) {
if (a = "h") {
finalResult = (photoLoaderHeight / pickheight) * 100
// Example result: 58.333333333333+
// I:E 280 is 58.333333333333+% of 480
trace("Percent Calc Result = " + finalResult);
trace("");
return (finalResult);
} else if (a = "w") {
finalResult = (photoLoaderWidth / pickWidth) * 100
// Example result: 79.166666666667
// I:E 380 is 79.166666666667% of 480
trace("Percent Calc Result = " + finalResult);
trace("");
return (finalResult);
}
}
//============ END First functions ============
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("photos.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;
}
}
// Start Resize and center
pickWidth = picture._width;
pickheight = picture._height;
pickX = picture._x
pickY = picture._y
// box is an MC that is masking the loaded Photos
// It's used here to give the code a sense of what is center
boxWidth = box._width;
boxHeight = box._height;
boxX = box._x
boxY = box._y
// Reference:
// new size / old size * 100 = percentage
// percentage / 100 * old size = new size
if (pickheight > pickWidth) {
if (pickheight > boxHeight) {
_root.HwCheck = ++_root.HwCheck
trace("Height is bigger then Width: Num " + _root.HwCheck);
trace("Pre Change:");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
resizePercentage1 = (280 / pickheight) * 100;
// Example result: 58.333333333333+
// I:E 280 is 58.333333333333+% of 480
picture._height = resizePercentage1 / 100 * pickheight;
picture._width = resizePercentage1 / 100 * pickWidth;
trace("Post Change:");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
trace("=================================");
trace("");
} else if (pickWidth > boxWidth) {
_root.HwCheck2 = ++_root.HwCheck2;
trace("Width check from height activated: Num " + _root.HwCheck2);
resizePercentage2 = (380 / pickWidth) * 100;
picture._width = resizePercentage2 / 100 * pickWidth
picture._height = resizePercentage2 / 100 * pickheight
}
} else if (pickWidth > pickheight) {
if (pickWidth > boxWidth) {
_root.WhCheck = ++_root.WhCheck;
trace("Width is bigger then Height: Num " + _root.WhCheck);
trace("Pre Change:");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
resizePercentage3 = (380 / pickWidth) * 100;
// Example result: 79.166666666667
// I:E 380 is 79.166666666667% of 480
picture._width = resizePercentage3 / 100 * pickWidth
picture._height = resizePercentage3 / 100 * pickheight
trace("Post Change:");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
trace("=================================");
trace("");
} else if(pickheight > boxHeight) {
_root.WhCheck = ++_root.WhCheck2;
trace("Height check from Width activated: Num " + _root.WhCheck);
trace("Pre Change:");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
resizePercentage4 = (280 / pickheight) * 100;
picture._height = resizePercentage4 / 100 * pickheight;
picture._width = resizePercentage4 / 100 * pickWidth;
trace("Post Change:");
trace("picture._width =" + picture._width);
trace("picture._height = " + picture._height);
trace("");
trace("=================================");
trace("");
}
}
// Center Image
// Locates the centers of the loaded photos and the load area
pickWidth = picture._width;
pickheight = picture._height;
pickX = picture._x
pickY = picture._y
PickXcenter = pickWidth/2
PickYcenter = pickheight/2
boxWidth = box._width;
boxHeight = box._height;
boxX = box._x
boxY = box._y
BoxXcenter = boxWidth/2
BoxYcenter = boxHeight/2
XCenter = (BoxXcenter - PickXcenter) + boxX
picture._x = XCenter;
YCenter = (BoxYcenter - PickYcenter) + boxY
picture._y = YCenter;
// End Resize and center
};
