25Apr

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>

Share/Save/Bookmark

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.

8 Responses to “Actionscript 3 Carousel Animation for Menu”

  1. Posted by dk 21st August, 2008 at 10:28 am

    ….missing shadows.

    I “optimized” your code a bit, and I added in some neat features. Send me an email if you want to take a look at the code.

    -Dk

  2. Posted by Webshop-Winkelen 3rd September, 2008 at 3:12 am

    I can’t understand that you made your code so dependend on your implementation and thus not very re-usable.

    Anyway, thank you very much as it helped me a lot getting started coding a carousel.

  3. Posted by Kosa 5th September, 2008 at 1:16 pm

    Please dk, show us your optimized code and a preview! Thanks!

  4. Posted by Seb 28th September, 2008 at 11:16 am

    Hello ,

    I’m developing a 3d carousel.
    Would be very interested in having a look at your maended code.

    Can you please send it to me ?

    Thanks

  5. Posted by sofie 10th October, 2008 at 5:06 am

    I made a 3d carousel as well.
    Can you make the carousel stop already?
    I like some help, because it loops over my other scenes.

    Thanks

  6. Posted by admin 10th October, 2008 at 7:01 am

    Hi Sofie, To make the carousel stop, you will need to remove the event listener for the mover function:

    removeEventListener(Event.ENTER_FRAME, mover);

    -Morgan

  7. Posted by Nigel Dean 17th November, 2008 at 11:53 am

    Hi.

    First time looking at this kind of thing, but I’m looking to redesign my site and wanted a carousel to show customers the various products we have in different catagories.

    Is it possible to produce a carousel of 4 - 6 products and when they hit the front view (0 degrees in the 360 degree turn) a load of text appears below which gives details on that product! i.e no click to a seperate page to see that info… it all appears as the product hits the front and then disapears when the product moves past…. and the next product and text appears….

    ANY help on if this is possible and how easy it may be would be great.

    Cheers

    Nigel.

  8. Posted by admin 19th November, 2008 at 5:53 am

    Hi Nigel,

    To have the products display some text you could write a function that detects what their z-index is on, from there you could display their respective content.

    Thanks, Morgan

Leave a reply