Dynamic button rollover states

programming flash
1

Hey everybody,

I apologize if I’ve been posting too many questions lately or something; I’m pretty much just beginning and there’s a lot I’d like to learn.

As a test, I’m loading images (or references to images, more accurately) from an external XML file into Flash, each image representing where a thumbnail might appear in a portfolio, for example. I can get that to work fine. I have a couple of problems with the way the images appear, though. For one thing, when the 95 px X 95 px images are brought into the dynamically created 100 px X 100 px movieclips I have set for them, the JPGs stretch to fit… is this because I’m using the loadMovie method? I’m going off of the Kirupa tutorial on the subject, and that’s the recommended way, I guess.

The main difficulty I have, though, is my inability to get these individual movieclips containing JPG images to exhibit rollover and rollout behavior dynamically… without disturbing the image contained within.

Here’s the code I have right now; my lame attempt at a dynamic rollover behavior is the for… loop at the bottom, which is non-functional, by the way.

function loadXML(loaded) 
{
	if (loaded) 
	{
		//according to "content2.xml," this would set the parser at "<projects>".
		xmlNode = this.firstChild;
		var thumbs:Array = new Array;
		var description:Array = new Array;
		var tempClips:Array = new Array;
		totalProjects = xmlNode.childNodes.length;
	
			//"totalProjects" here would be 3, because there are three <project>'s...
			//ACCORDING TO "content2.xml
			for (i = 0; i < totalProjects; i++) 
			{
				thumbs* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
				/*the second array accesser is set to "2" because in my xml file (content2.xml),
				the third child of each project is the description, not the second like this guy's.
				*/
				description* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
			}
			tempClips = populateImageArrays(thumbs);
			displayThumbs(thumbs, tempClips);
			//trace(thumbs);
			//trace(description);
		//firstImage();
	} 
	else 
	{
		trace("File not loaded.");
	}
}

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("content2.xml");

function populateImageArrays(thumbArray:Array):Array
{
	var temp:Number = thumbArray.length;
	//trace(temp);
	var thumbClip:Array = new Array;
	
	for(var i:Number = 0; i < temp; i++)
	{
		//"prototype" movieClip all duplicates based on is created here...
		var tempClip:MovieClip = ph_mc.duplicateMovieClip("thumb_" + i, i);
		//populate the array with movieClips
		thumbClip* = tempClip;
		//set all movieClips 15 pixels apart
		thumbClip*._x = (ph_mc._width * i) + (15 * i);
	}
	
	//remove prototypical movieclip
	ph_mc.swapDepths(1);
	ph_mc.removeMovieClip();
	
	return thumbClip;
}

function displayThumbs(thumbArray:Array, mcArray:Array):Void
{
	//trace(thumbArray);
		
	for(var i:Number = 0; i < thumbArray.length; i++)
	{
		mcArray*.loadMovie(thumbArray*, i + 1);
	}
}

//traverse through each movieClip continuously to see if they're being moused over....
onEnterFrame = function()
{
	//"3" temporary until I can figure out a way to make it dynamic
	for(var b:Number = 0; b < 3; b++)
	{
		thumbClip**.onRollOver = function()
		{
			thumbClip**.play();
		}

		thumbClip**.onRollOut = function()
		{
			thumbClip**.gotoAndPlay("return");
		}
	}
}

If I can better explain this so helping me is any easier, please let me know.

Thanks a lot,
TheRiddler