XML photo gallery - Help with Titles

[mchscstew]

Hello All

I'm creating a flash application for an XML photo imaging gallery. What it would ideally be able to do is to pull any image from a folder, resize the image and align it on a grid, and when clicked, would resize to a zoomed in position. Alongside the image zoomed in, I'd like to display the caption alongside the image and be properly formatted etc..

I have found an online tutorial of an xml image gallery and modified my photo gallery to do what I wanted above, except I am having difficulty with the caption portion.

What I have done is put my images into an array, added frames to those images, and placed them inside a container that is resized and looped into a grid on the screen. However, I also have the caption inside the container (I needed to in able to load the "title" child from the xml with the according image number in the array). The problem with the caption being inside the container is that when the image resizes, the caption text also resizes causing font inconsistencies depending on the image size.

My "xml is set up:

<images>
    <image src="images/image.jpg" picnum="01" title="This is image 1"/>
    <image src="images/image2.jpg" picnum="02" title="This is image 2"/>
</images>

My code is attached to this post.

Can anyone give an idea of how I can load the "title" node without adding it to the container of my image? Let me know if you need any source files.

[mchscstew]

Can anyone help, please? Any help would be greatly appreciated. Thanks

[dawsonk]

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;

var xml:XML;
var images:Array = new Array();
var imagesLoaded:int=0;
var imagesTitle:Array = new Array();
var tween:Tween;
var zoomed:Boolean=false;
var canClick:Boolean=true;
var lastX:int;
var lastY:int;
var lastscaleX:int;
var lastscaleY:int;

var nrColumns:uint=5;

var textformat:TextFormat = new TextFormat();

textformat.color=0xFFFFFF;
textformat.size=17;

// Black Screen 
var screen:Sprite = new Sprite();
screen.graphics.beginFill(0x111111, .75);
screen.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
screen.graphics.endFill();

function loadXML(file:String):void {
	var urlLoader:URLLoader = new URLLoader();
	var urlReq:URLRequest=new URLRequest(file);
	urlLoader.load(urlReq);
	urlLoader.addEventListener(Event.COMPLETE, handleXML);
}

function handleXML(e:Event):void {
	xml=new XML(e.target.data);
	for (var i:int = 0; i < xml.children().length(); i++) {
		var loader:Loader = new Loader();
		loader.load(new URLRequest(String(xml.children()[i].@src)));
		images.push(loader);
		imagesTitle.push(xml.children()[i].@title);
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
	}
}

loadXML("images.xml");

function loaded(e:Event):void {
	imagesLoaded++;
	if (xml.children().length()==imagesLoaded) {
		prepImages();
	}
}
var dict:Dictionary = new Dictionary();
var infoArea:Sprite;
function prepImages():void {
	for (var i:int = 0; i < images.length; i++) {
		var container:Sprite = new Sprite();
		var frame:Sprite = new Sprite();
		frame.graphics.beginFill(0xFFFFFF);
		frame.graphics.drawRect(0, 0, images[i].width, images[i].height);
		frame.graphics.endFill();
		dict[container]=imagesTitle[i];
		container.addChild(frame);
		container.addChild(images[i]);
		if (container.width>container.height) {
			container.width=130;
			container.scaleY=container.scaleX;
		} else if (container.height>=container.width-10 && container.height<=container.width) {
			container.height=95;
			container.scaleX=container.scaleY;
		} else if (container.height>container.width) {
			container.height=95;
			container.scaleX=container.scaleY;
		} else if (container.height == container.width) {
			container.height=95;
			container.scaleX=container.scaleY;
		}
		if (i<6) {
			container.y=8;
			container.x = (i*130)+(i*8) + 8;
		} else if (i>=6 && i<12) {
			container.y=116;
			container.x = ((i-6)*130)+(((i-6)*8)+8);
		} else if (i>=12 && i<18) {
			container.y=224;
			container.x = ((i-12)*130)+((i-12)*10+10);
		} else if (i>=18 && i<24) {
			container.y=332;
			container.x = ((i-18)*130)+((i-18)*10+10);
		}
		var shadowFilter:BitmapFilter=new DropShadowFilter(3,90,0x252525,1,2,2,1,15);
		var filterArray:Array=[shadowFilter];
		container.filters=filterArray;
		container.addEventListener(MouseEvent.MOUSE_UP, zoomHandler);
		addChild(container);
	}
}

function zoomHandler(e:MouseEvent):void {
	var mc:Sprite=e.currentTarget as Sprite;
	if (! zoomed&&canClick) {
		canClick=false;
		addChild(screen); 
		setChildIndex(mc as DisplayObject, (mc.parent.numChildren - 1));
		lastX=mc.x;
		lastY=mc.y;
		tween = new Tween(mc, "scaleX", Strong.easeInOut, mc.scaleX, (3.5*mc.scaleX), 0.5, true);
		tween = new Tween(mc, "scaleY", Strong.easeInOut, mc.scaleY, (3.5*mc.scaleY), 0.5, true);
		if (mc.x<=417) {
			tween=new Tween(mc,"x",Strong.easeInOut,mc.x,10,0.8,true);
			tween=new Tween(mc,"y",Strong.easeInOut,mc.y,10,0.8,true);
		} else if (mc.x > 417) {
			tween=new Tween(mc,"x",Strong.easeInOut,mc.x,340,0.8,true);
			tween=new Tween(mc,"y",Strong.easeInOut,mc.y,10,0.8,true);
		}
		tween.addEventListener(TweenEvent.MOTION_FINISH, zoomInFinished);
	} else if (zoomed && canClick) {
		removeChild(infoArea)
		tween = new Tween(mc, "scaleX", Strong.easeInOut, mc.scaleX,(mc.scaleX/3.5),0.2, true);
		tween = new Tween(mc, "scaleY", Strong.easeInOut, mc.scaleY,(mc.scaleY/3.5),0.2, true);
		tween=new Tween(mc,"x",Strong.easeInOut,mc.x,lastX,0.2,true);
		tween=new Tween(mc,"y",Strong.easeInOut,mc.y,lastY,0.2,true);
		tween.addEventListener(TweenEvent.MOTION_FINISH, zoomOutFinished);
	}
}
function doText(mc):void {
	infoArea = new Sprite();
	infoArea.name="infoArea";
	var infoField:TextField = new TextField();
	infoArea.x=mc.x;
	infoArea.y=mc.y;
	infoArea.graphics.beginFill(0x111100, 0.75);
	infoArea.graphics.drawRect(0, 0, mc.width, 80);
	infoArea.graphics.endFill();
	infoArea.y=mc.height-80;
	infoField.defaultTextFormat=textformat;
	infoField.antiAliasType=AntiAliasType.ADVANCED;
	infoField.width=mc.width-5;
	infoField.height=20;
	infoField.text=dict[mc];
	infoArea.addChild(infoField);
	addChild(infoArea);
}
function zoomInFinished(e:TweenEvent):void {
	doText(e.currentTarget.obj);
	zoomed=true;
	canClick=true;
}

function zoomOutFinished(e:TweenEvent):void {
	zoomed=false;
	removeChild(screen);
}

[mchscstew]

WOW Thank you. Thank you so much. I knew there was some sort of class I wasn't utilizing. Dictionary nailed it. Now it's just a matter of formatting the textfield. Thank you so much. I am forever in your debt!