manewcActionscript Snippets

Actionscript 3 Carousel Animation for Menu

8 comments so far

So, after reviewing the Carousel videos from gotoandlearn.com, I revised the code and adapted it for Actionscript 3 for a new project that I will be working on. Here is a demo.. for now the only type of control of the carousel is the left and right direction, won’t stop for now.

Here is the Document class:

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;

	// for the xml file
	import flash.net.URLLoader;
	import flash.net.URLRequest;

	// events
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.events.IOErrorEvent;
	import flash.events.MouseEvent;

	import flash.display.Loader;
    import flash.display.LoaderInfo;

	// graphics
	import flash.filters.BlurFilter;

	public class Main extends Sprite
	{

		private var xml:XML;
		private var ba:Array = new Array(); // Bottle Array
		private var ct:Number = 0; // just a counter

		private var numOfItems:Number = 3;
		private var radiusX:Number = 275;
		private var radiusY:Number = -10;
		private var centerX:Number = (stage.stageWidth / 2) - 70; // the -70 is an offset because of the image size
		private var centerY:Number = (stage.stageHeight / 2) - 240; // the - 240 is an offset because of the image size
		private var speed:Number = 0.04;
		private var perspective:Number = 120;
		private var angle:Number;

		private var imgLoader:Loader;

		public function Main()
		{
			loadXML();

		}

		private function loadXML():void
		{
			var loader:URLLoader = new URLLoader();
			loader.load(new URLRequest("http://manewc.com/projects/flash/Carousel/icons.xml"));
			loader.addEventListener(Event.COMPLETE, loadBottles);
		}

		private function loadBottles(e:Event):void
		{
			// pull in the xml file and load the song data
			xml = new XML(e.target.data);

			var imglist:XMLList = xml.bottleimages.@image;

			for each (var urlXML:XML in imglist)
			{

				angle = ct * ((Math.PI*2)/numOfItems);

				ba.push(new Bottle(imglist[ct],angle));

				// Load in the image
            	imgLoader = new Loader();
            	imgLoader.load(new URLRequest(ba[ct].earl));

				// add to stage
				addChild(ba[ct]);

				// add image loader to the new mc
				ba[ct].addChild(imgLoader);

				ct++;
			}

			if ( ba.length == 0 )
			{
				trace("\nloadSongs Function - no XML data provided");
			}
			else
			{
				// xml is loaded
				trace("\nxml is loaded - " + ba);

				// animate
				addEventListener(Event.ENTER_FRAME, mover);

				// capture mouse events
				stage.addEventListener(MouseEvent.MOUSE_MOVE, adjustSpeed);
			}
		}

		private function imageLoaded(e:Event):void
		{
			addChild(imgLoader);
		}

		private function mover(e:Event):void
		{
			for ( var b=0; b < ba.length; b++ )
			{
				// xpos
				ba[b].x = Math.cos(ba[b].bottleAngle) * radiusX + centerX;

				// ypos
				ba[b].y = Math.sin(ba[b].bottleAngle) * radiusY + centerY;

				// perspective
				var s = (ba[b].y - perspective) /(centerY+radiusY-perspective);
				ba[b].scaleX = ba[b].scaleY = s;

				// update
				ba[b].bottleAngle+= speed;
			}

			// rearrange
			sortZ();
		}

		private function sortZ():void
		{
			ba.sortOn("scaleX"); // re arrange by X scale in ascending order, by default

			for(var i:uint = 0; i < numOfItems; i++)
			{
				setChildIndex(ba[i], i);
			}
		}

		private function adjustSpeed(m:MouseEvent):void
		{
			speed = (mouseX-centerX)/2500;
		}
	}
}

Here is class that is the object for when reading the xml file:

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
    import flash.display.LoaderInfo;  

	public class Bottle extends MovieClip
	{
		// public properties for the class
		public var earl:String;
		public var bottleAngle:Number;

		public var imgLoader:Loader = new Loader();

		public function Bottle(e:String,a:Number)
		{
			earl = e;
			bottleAngle = a;
		}
	}
}

the xml file:

<icons>
<bottleimages image="http://manewc.com/projects/flash/Carousel/i/sport.png" />
<bottleimages image="http://manewc.com/projects/flash/Carousel/i/original-lemonlime.png" />
<bottleimages image="http://manewc.com/projects/flash/Carousel/i/infused-blackraspberry.png" />
</icons>

Friday, April 25th, 2008 at 9:23 am and is filed under Actionscript 3, Actionscript XML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.