3D Carousel

[robert475]

Hi I followed Lee's Creating a 3D carousel part 3.

http://www.gotoandlearn.com/play?id=34

I have constructed it as he explained. I am just trying to change one element of it. When a icon is pressed I want a larger image to be displayed instead of the current image size.

I edited the xml file:

<icon image="icon1.png" largeImage="icon1b.png" tooltip="Multi Purpose - 8'' 2108XPRO" content="LimeWire is a peer-to-peer file sharing client for the Gnutella network. It is free software released under the GNU General Public License. Limewire was the first file sharing program to support firewall-to-firewall file transfers, a feature introduced in version 4.2, which was released in November 2004.LimeWire is written in Java and therefore runs on any computer with a Java Virtual Machine installed. To facilitate installation for casual users, installation packages are available for Microsoft Windows, Mac OS X, and in the RPM format for Linux. Support for Mac OS 9 and previous versions has been dropped with LimeWire 4.0.10. The Windows version of the LimeWire installer includes a version of Sun Microsystems' Java installer which will download and install version 1.5 of the Java Runtime Environment if it detects the machine does not have a recent version of Java installed."/>

The actionscript:

import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.easing.*;

var numOfItems:Number;
var radiusX:Number = 300;
var radiusY:Number = 75;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
//experiment the speed here
var speed:Number = 0.05;
var perspective:Number = 130;
var home:MovieClip = this;
theText._alpha = 0;

var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
	var nodes = this.firstChild.childNodes;
	numOfItems = nodes.length;
	for (var i=0;i<numOfItems;i++)
	{
		var t = home.attachMovie("item","item"+i,i+1);
		t.angle = i * ((Math.PI*2)/numOfItems);
		t.onEnterFrame = mover;
		t.toolText = nodes[i].attributes.tooltip;
		t.content = nodes[i].attributes.content;
		t.icon.inner.loadMovie(nodes[i].attributes.Image);
		t.ref.inner.loadMovie(nodes[i].attributes.image);
		t.icon.the2nd.loadMovie(nodes[i].attributes.largeImage);//attach instance the2nd to largeImage in XML file
		t.icon.onRollOver = over;
		t.icon.onRollOut = out;
		t.icon.onRelease = released;
	}
}

function over()
{
	home.tooltip.tipText.text = this._parent.toolText;
	home.tooltip._x = this._parent._x;
	home.tooltip._y = this._parent._y - this._parent._height/2;
	home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
	home.tooltip._alpha = 100;
}

function out()
{
	delete home.tooltip.onEnterFrame;
	home.tooltip._alpha = 0;
}

function released()
{
	//trace(this._parent.toolText);
	home.tooltip._alpha = 0;
	for(var i=0;i<numOfItems;i++)
	{
		var t:MovieClip = the2nd["item"+i];
		t.xPos = t._x;
		t.yPos = t._y;
		t.theScale = t._xscale;
		delete t.icon.onRollOver;
		delete t.icon.onRollOut;
		delete t.icon.onRelease;
		delete t.onEnterFrame;
		if(t != this._parent)
		{
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,true);
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true);
			var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true);
		}
		else
		{
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,true);
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true);
			var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,200,1,true);
			var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,320,1,true);
			var tw5:Tween = new Tween(theText,"_alpha",Strong.easeOut,0,100,1,true);
			theText.text = t.content;
			var s:Object = this;
			tw.onMotionStopped = function()
			{
				s.onRelease = unReleased;
				//delete t.icon.onRollOver;
				//delete t.icon.onRollOut;
				//delete t.icon.onRelease;
				//delete t.onEnterFrame;

			}
		}
	}
}

function unReleased()
{
	delete this.onRelease;
	var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,true);
	for(var i=0;i<numOfItems;i++)
	{
		var t:MovieClip = home["item"+i];
		if(t != this._parent)
		{
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,t.theScale,1,true);
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,true);
			var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true);
		}
		else
		{
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,100,t.theScale,1,true);
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,100,t.theScale,1,true);
			var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true);
			var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true);
			tw.onMotionStopped = function()
			{
				for(var i=0;i<numOfItems;i++)
				{
					var t:MovieClip = home["item"+i];
					t.icon.onRollOver = Delegate.create(t.icon,over);
					t.icon.onRollOut = Delegate.create(t.icon,out);
					t.icon.onRelease = Delegate.create(t.icon,released);
					t.onEnterFrame = mover;
				}
			}
		}
	}
}

function moveTip()
{
	home.tooltip._x = this._parent._x;
	home.tooltip._y = this._parent._y - this._parent._height/2;
}


xml.load("icons.xml");

for (var i=0;i<numOfItems;i++)
{
	var t = this.attachMovie("item","item"+i,i+1);
	t.angle = i * ((Math.PI*2)/numOfItems);
	t.onEnterFrame = mover;
}


function mover()
{
	this._x = Math.cos(this.angle) * radiusX + centerX;
	this._y = Math.sin(this.angle) * radiusY + centerY;
	var s:Number = (this._y - perspective) / (centerY+radiusY-perspective);
	this._xscale = this._yscale = s * 100;
	this.angle += this._parent.speed;
	this.swapDepths(Math.round(this._xscale) + 100);
}

this.onMouseMove = function()
{
	//speed of carousel
	speed = (this._xmouse-centerX)/2500;
}

This does not work as it comes up with the error opening URL undefined. My edits are highlighted in red. Any ideas how i can get this to work?

[dawsonk]

		var t = home.attachMovie("item", "item"+i, i+1);
		t.angle = i*((Math.PI*2)/numOfItems);
		t.onEnterFrame = mover;
		t.toolText = nodes[i].attributes.tooltip;
		t.content = nodes[i].attributes.content;
		//t.icon.inner.loadMovie(nodes[i].attributes.Image);
		t.icon.inner.loadMovie(nodes[i].attributes.image);
		t.ref.inner.loadMovie(nodes[i].attributes.image);
		t.icon.the2nd.loadMovie(nodes[i].attributes.largeImage);//attach instance the2nd to largeImage in XML file
		t.icon.onRollOver = over;
		t.icon.onRollOut = out;
		t.icon.onRelease = released;
	}

[kalehm]

Did you manage to get this working?? I'm looking for the same thing...