Simple Accordion Menu

Thursday, October 15th, 2009 | AS3 Gadgets

This is a very simple accordion menu. It uses the free TweenLite tweener for movement.

?View Code ACTIONSCRIPT
package
{
	/**
	 * Accordion Menu
	 * 
	 * @author 		Philip Radvan
	 * @url 		http://www.freeactionscript.com
	 * @version 	1.0
	 * 
	 */
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
 
	import gs.TweenLite;
 
	public class Accordion extends MovieClip
	{		
		var speed:Number = 1;
 
		public function Accordion()
		{
			screen01.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);		
			screen02.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
			screen03.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
			screen04.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);			
		}
 
		protected function clickHandler(event:MouseEvent):void
		{
			if(event.target == screen01)
			{
				TweenLite.to(screen01, speed, { x:0, y:0 } );
				TweenLite.to(screen02, speed, { x:430, y:0 } );
				TweenLite.to(screen03, speed, { x:470, y:0 } );
				TweenLite.to(screen04, speed, { x:510, y:0 } );
			}
			else if(event.target == screen02)
			{
				TweenLite.to(screen01, speed, { x:0, y:0 } );
				TweenLite.to(screen02, speed, { x:40, y:0 } );
				TweenLite.to(screen03, speed, { x:470, y:0 } );
				TweenLite.to(screen04, speed, { x:510, y:0 } );
			}
			else if(event.target == screen03)
			{
				TweenLite.to(screen01, speed, { x:0, y:0 } );
				TweenLite.to(screen02, speed, { x:40, y:0 } );
				TweenLite.to(screen03, speed, { x:80, y:0 } );
				TweenLite.to(screen04, speed, { x:510, y:0 } );
			}
			else if(event.target == screen04)
			{
				TweenLite.to(screen01, speed, { x:0, y:0 } );
				TweenLite.to(screen02, speed, { x:40, y:0 } );
				TweenLite.to(screen03, speed, { x:80, y:0 } );
				TweenLite.to(screen04, speed, { x:120, y:0 } );
			}
		}
	}
}
//the end
Download Fla Sample

Download Fla Sample


Tags: , , , ,

4 Comments to Simple Accordion Menu

StapledPuppet
October 15, 2009

Wow, that’s a really nice little script, and will definitely come in handy…

One question though, how do people get new menus to pop up, etc. like in game when I button is clicked or ‘NPC’ is interacted with?

Thanks!

pradvan
October 20, 2009

StapledPuppet, I would just attach a new graphic from the library. Are you asking something more specific?

StapledPuppet
October 25, 2009

Hmm… What I mean is, how would you make it so a new window pops up, with, let’s say a tutorial message or a hint.

pradvan
October 25, 2009

Well, think of your tutorial message or hint as an asset in the library, that you will “popup” using addChild()

Leave a comment

You must be logged in to post a comment.