Free ActionScript

Flash AS2 & AS3 Tutorials, Game Code, Effects, Source Files & Sample Downloads

Simple Accordion Menu

8 Comments »

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

8 Responses

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!

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

  • 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.

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

  • can I get this in AS2??

  • Hello, I know this was created quite some time ago. But, i do like the style, but i was wondering how i could actually add words/pictures to each of the scenes?

  • Hi,
    great work. I have a question, if i’d like to use Bounce for movement what code I have to write?

    thanks

  • Leave a Reply

    You must be logged in to post a comment.