[Shadow OSX]

I am basically looking for the similar effect done on http://www.5nak.com/.

if you click on 2.Graphics and then click on one of the pictures, it dynamically loads. I'm not sure how he did this. I was hoping some of you had an idea.

If you could point me to a tutorial which would give me the desired effect that would be great.

Again the site is http://www.5nak.com/. Click on 2.Graphics
then click on one of the pics.

Thanks again.

[sandro]

Shadow OSX, on 1 Sep, 2006 - 11:32 AM, said:

I am basically looking for the similar effect done on http://www.5nak.com/.

if you click on 2.Graphics and then click on one of the pictures, it dynamically loads. I'm not sure how he did this. I was hoping some of you had an idea.

If you could point me to a tutorial which would give me the desired effect that would be great.

Again the site is http://www.5nak.com/. Click on 2.Graphics
then click on one of the pics.

Thanks again.

hi Shadow OSX,

this is one possible way of doing it. I hope the code is clear enough.

XML file:

<?xml version="1.0" encoding="UTF-8"?>
<imageList>
	<mItem name="Products">
		<subItem bigImage="flash.jpg" smallImage="small_flash.jpg">flash</subItem>
		<subItem bigImage="dreamweaver.jpg" smallImage="small_dreamweaver.jpg">dreamweaver</subItem>
		<subItem bigImage="cfmx7.gif" smallImage="small_cfmx7.gif">coldfusion</subItem>
	</mItem>
</imageList>

ACTIONSCRIPT CODE

//CREATE THE ARRAYS TO HOLD THE IMAGE NAMES
var bigImg_array:Array = new Array();
var smallImg_array:Array = new Array();
//DECLARE A VARIABLE THAT WILL HOLD THE INDEX DATA FOR THE SELECTED MENU
var nIndex:Number;
//MOVIECLIPLOADER 
var mainContainer:MovieClip = createEmptyMovieClip("mainContainer", this.getNextHighestDepth());
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(this);
//FUNCTION TRIGGERED WHEN IMAGES HAVE FINISHED LOADING
function onloadInit(mc:MovieClip) {
	//LOOP THROUGH THE IMAGES 
	for (var j:Number = 0; j<nIndex; j++) {
		//WHEN CLICKING ON ONE IMAGE EXTRACT THE SUBSTRING CONTAINING THE NUMBER
		//CORRESPONDING TO THE ARRAY INDEX VALUE OF ALL THE IMAGES
		mainContainer["smallContainer"+j+"_mc"].onRelease = function() {
			var mySubstring:String = new String();
			mySubstring = this._name.substring(14, 15);
			//PASS THIS STRING AS nUMBER TO THE FUNCTION THAT LOADS THE BIG IMAGE
			//AT THE CORRESPONDING ARRAY INDEX
			loadImage(Number(mySubstring));
		};
	}
}
//CREATE A NEW XML OBJECT
var myXML:XML = new XML();
//IGNORE ALL SPACES AND CARRIAGE RETURNS IN THE XML DOCUMENT
myXML.ignoreWhite = true;
//SET THE EVENT HANDLER
myXML.onload = function(success) {
	if (success) {
		//RECOVER THE  LENGTH OF THE CHILDNODES CONTAINING THE IMAGE NAMES
		// AND ASIGN IT TO THE NINDEX VARIABLE
		nIndex = myXML.firstChild.childNodes[0].childNodes.length;
		//LOOP THROUGH THE SUBITEM IN THE XML OBJECT TO RECOVER THE ATTRIBUTES VALUES
		for (var i:Number = 0; i<nIndex; i++) {
			//POPULATE THE ARRAY THAT WILL STORE THE NAMES OF THE THUMBNAILS
			smallImg_array.push(myXML.firstChild.childNodes[0].childNodes[i].attributes.smallImage);
			//CREATE A NEW EMPTY CLIP FOR EACH NODE IN THE EMPTY CLIP "MAINCONTAINER"
			mainContainer.createEmptyMovieClip("smallContainer"+i+"_mc", mainContainer.getNextHighestDepth());
			//POSITION THE CLIPS
			mainContainer["smallContainer"+i+"_mc"]._x = 20;
			mainContainer["smallContainer"+i+"_mc"]._y = 40*i +20;
			//LOAD THE THUMBNAILS INSIDE THE CLIPS USING THE MOVIECLIPLOADER OBJECT CREATED EARLIER
			mcLoader.loadClip("images/"+smallImg_array[i], mainContainer["smallContainer"+i+"_mc"]);
			//POPULATE THE ARRAY THAT WILL STORE THE NAMES OF THE BIG IMAGES
			bigImg_array.push(myXML.firstChild.childNodes[0].childNodes[i].attributes.bigImage);
		}
	}
};
//LOAD THE XML DATA
myXML.load("menu.xml");
//FUNCTION THAT CREATES A NEW EMPTY CLIP, POSITION IT AND LOADS THE BIG IMAGE
//CORRESPONDING TO THE ARRAY INDEX PASSED AS PARAMETER
function loadImage(nArrayIndex:Number) {
	//CHECK IF THE CONTAINER FOR THE BIG IMAGES EXISTS OTHERWISE CREATE IT
	if (!container_mc) {
		_root.createEmptyMovieClip("container_mc", _root.getNextHighestDepth());
		//POSITION THE CONTAINER
		_root.container_mc._x = 350;
		_root.container_mc._y = 150;
	}
	//LOAD THE BIG IMAGE		  
	_root.container_mc.loadMovie("images/"+bigImg_array[nArrayIndex]);
}

You will need 3 thumbnails and 3 bigger images in a folder called "images".
Check the names of the images in the XML file or edit as required.
This code contains only the dynamic functionality and no other effect like in the site you referred to.
Good Luck
Sandro