Drop Down Menü mit AS3 und Klassen

Hier erkläre ich anhand von 4 Beispielen, wie man sich ein Drop Down Menü in AS3 erstellen kann. Die Beispiele fangen einfach an und werden dann Schritt für Schritt etwas komplexer. Selbstverständlich könnt ihr euch die dazughörigen Dateien runterladen. Sie befinden sich in den AS3 Dateien.

Menü 1

In allen Beispielen gibt es eine Movieclipklasse, "MenueBox" in der Bibliothek und einer Klassenbibliothek. Im ersten Beispiel befindet sich in dieser Movieclipklasse ein Movieclip mit Instanznamen "back" welcher alle Buttons enthält. Dieser Movieclip wird ein und ausgeblendet. Die Actions befinden sich in der Klassendatei MenueBox.as. Die Buttons haben hier keine Aktionen. Diese könnte man in der Klassendatei hinzufügen, nachdem man den Buttons Instanznamen verpasst hat.

Actions im ersten Bild der fla

var myMenue:MenueBox = new MenueBox();
addChild(myMenue);

Actions der MenueBox.as

package  {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;



	public class MenueBox extends MovieClip {


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenueBox() {

			//die Hintergrundfläche mit den Buttons		
			this.back.visible=false;

			this.addEventListener(MouseEvent.MOUSE_OVER, showButtons);
			this.addEventListener(MouseEvent.MOUSE_OUT, hideButtons);

			
		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		// Buttons anzeigen
		protected function showButtons(evt:MouseEvent):void {

			this.back.visible=true;

		}

		// Buttons ausblenden
		protected function hideButtons(evt:MouseEvent):void {

			this.back.visible=false;

		}

	}
}

Menü 2

Während im ersten Beispiel die Anzahl der Buttons fester Bestandteil der Klasse MenueBox war, kann man in diesem Beispiel, die Anzahl der Buttons und die Beschriftung per Parameter bestimmen.

Es ist nun eine weitere Klasse hinzugekommen und zwar die Movieclipklasse MenuePunkt. Sie hat auch eine selbst erstellte Klassendatei und erwartet als Parameter einen String der als Beschriftung eingefügt wird. Dieser Movieclip beinhaltet ein dynamisches Textfeld mit Instanznamen "beschriftung" sowie 3 unterschiedliche Bilder in der Zeitleiste für die 3 Buttonzustände. Die beiden Eigenschaften buttonMode und useHandCursor werden auf true gesetzt. Damit der Handcursor auch über dem Textfeld erscheint müssen die TextField Eigenschaften selectable und mouseEnabled auf false gesetzt werden.

Die Movieclip Klasse MenueBox wurde modifiziert. In ihr befindet sich ein Movieclip mit Instanznamen "container". Dieser Movieclip "container" beinhaltet einen Movieclip mit Instanznamen "back", der aus einer Hintergrundgrafik besteht. In die Movieclipinstanz "container" werden alle Menüpunkte geladen und außerdem wird die Hintergrundgrafik "back" in der Höhe entsprechend angepasst. Die Klasse MenuePunkt hat nun einen Parameter bekommen und zwar wird ein Array erwartet, welches alle Beschriftungen der Buttons enthält. Anhand der Länge dieses Arrays wird die Anzahl der MenuePunkte bestimmt.

Indem man "container" sichtbar und unsichtbar macht, blendet man das DropdownMenü aus und ein.

Actions der fla

var meineButtons:Array = new Array("Home", "Profil", "Produkte", "Impressum");

var myMenue:MenueBox = new MenueBox(meineButtons);
addChild(myMenue);

Actions der Klasse MenuePunkt

package {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;



	public class MenuePunkt extends MovieClip {


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenuePunkt(menueText:String) {
			

			beschriftung.selectable=false;
			beschriftung.mouseEnabled=false;
			beschriftung.text=menueText;
			
			this.buttonMode=true;
			this.useHandCursor=true;

			this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverFunction);
			this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutFunction);
			this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownFunction);
			this.addEventListener(MouseEvent.MOUSE_UP, mouseUpFunction);
		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		function mouseOverFunction(evt:MouseEvent):void {
			this.gotoAndStop(2);
		}

		//-----------------------------------------------------------

		function mouseOutFunction(evt:MouseEvent):void {
			this.gotoAndStop(1);
		}

		//-----------------------------------------------------------

		function mouseDownFunction(evt:MouseEvent):void {
			this.gotoAndStop(3);
		}

		//-----------------------------------------------------------
		function mouseUpFunction(evt:MouseEvent):void {
			this.gotoAndStop(1);
		}

		//-----------------------------------------------------------


	}
}

Actions der Klasse MenueBox

package  {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;


	public class MenueBox extends MovieClip {


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenueBox(buttons:Array) {
			
			for(var i:uint=0; i < buttons.length;i++){
				var button:MenuePunkt = new MenuePunkt(buttons[i]);
				button.x=10;
				button.y=35+i*30;
				this.container.addChild(button);
				}

			//die Hintergrundfläche mit den Buttons	
			this.container.back.height=buttons.length*30+40;
			this.container.visible=false;

			this.addEventListener(MouseEvent.MOUSE_OVER, showButtons);
			this.addEventListener(MouseEvent.MOUSE_OUT, hideButtons);

			
		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		// Buttons anzeigen
		protected function showButtons(evt:MouseEvent):void {

			this.container.visible=true;

		}

		// Buttons ausblenden
		protected function hideButtons(evt:MouseEvent):void {

			this.container.visible=false;

		}

	}
}

Menü 3

Im vorigen Beispiel hatten die Buttons noch keine Actions. Das wird nun geändert. Während das Symbol in der Bibliothek unverändert bleibt, wird jedoch die Klassendatei von MenuePunkt geändert. Es kommt ein weiterer Paramter hinzu, welcher die URL als String enthält. Mit dem entsprechenden EventListenern wird diese URL auf Mausklick aufgerufen.

Die Klasse MenueBox bekommt nun auch einen zweiten Parameter. Hier wird ein Array mit den URLs erwartet. Das Array muss selbstverständlich die gleiche Anzahl an Elementen haben wie das Array, welches die Beschriftungen der Menüpunkte enthält.

Actions der fla

var buttonText:Array = new Array("Home", "Profil", "Produkte", "Impressum");
var url:Array = new Array("home.htm", "profil.htm", "produkte.htm", "impressum.htm");




var myMenue:MenueBox = new MenueBox(buttonText, url);
addChild(myMenue);

Actions der Klasse MenuePunkt

package {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;




	public class MenuePunkt extends MovieClip {

		//Variablen
		var url:URLRequest;


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenuePunkt(menueText:String,link:String) {
			
			beschriftung.selectable=false;
			beschriftung.mouseEnabled=false;
			beschriftung.text=menueText;
			url=new URLRequest(link);
			this.buttonMode=true;
			this.useHandCursor=true;



			this.addEventListener(MouseEvent.MOUSE_OVER,mouseOverFunction);
			this.addEventListener(MouseEvent.MOUSE_OUT,mouseOutFunction);
			this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownFunction);
			this.addEventListener(MouseEvent.MOUSE_UP,mouseUpFunction);
		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		private function mouseOverFunction(evt:MouseEvent):void {
			this.gotoAndStop(2);
		}

		//-----------------------------------------------------------

		private function mouseOutFunction(evt:MouseEvent):void {
			this.gotoAndStop(1);
		}

		//-----------------------------------------------------------

		private function mouseDownFunction(evt:MouseEvent):void {
			this.gotoAndStop(3);
		}

		//-----------------------------------------------------------
		private function mouseUpFunction(evt:MouseEvent):void {
			this.gotoAndStop(1);
			navigateToURL(url,"_blank");
		}

		//-----------------------------------------------------------

	}
}

Actions der Klasse MenueBox

package {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;




	public class MenueBox extends MovieClip {


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenueBox(beschriftung:Array, links:Array) {
			

			for (var i:uint=0; i < beschriftung.length; i++) {
				var button:MenuePunkt = new MenuePunkt(beschriftung[i], links[i]);

				button.x=10;
				button.y=30+i*30;
				this.container.addChild(button);
			}

			//die Hintergrundfläche mit den Buttons
			this.container.back.height=beschriftung.length*30+50;
			this.container.visible=false;

			this.addEventListener(MouseEvent.MOUSE_OVER, showButtons);
			this.addEventListener(MouseEvent.MOUSE_OUT, hideButtons);


		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		// Buttons anzeigen
		protected function showButtons(evt:MouseEvent):void {

			this.container.visible=true;

		}

		// Buttons ausblenden
		protected function hideButtons(evt:MouseEvent):void {

			this.container.visible=false;

		}

	}
}

Menü 4

Hier hat sich nicht sehr viel geändert, lediglich die Actions der Menüpunkte wurden geändert. Anstatt eine URL aufzurufen, wird hier ein Bild der Hauptfilmzeitleiste aufgerufen. Die Bilder folgen alle direkt aufeinandern, so dass man auf einen zweiten Parameter oder ein zweites Array mit Bildnummern verzichten konnte. Als weiteres Beispiel könnte ich mir vorstellen, dass man den Menüpunkten von außen Actions zuweisen kann. Dazu müßte man dann mit Event Dispatchern arbeiten. Wer Lust hat mir so ein erweitertes Beispiel zu schicken, um es hier zu veröffentlichen, kann das gerne machen, das würde mich freuen.

Aus dieser Menuebox lässt sich auch sehr einfach eine horizontale Menüleiste mit Unterpunkten erstellen, indem man mehrere Instanzen auf die Bühne bringt und nebeneinander plaziert.

Actions der fla

stop();
var buttonText:Array = new Array("Home", "Profil", "Produkte", "Impressum");


var myMenue:MenueBox = new MenueBox(buttonText);
addChild(myMenue);

Actions der Klasse MenuePunkt

package {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;





	public class MenuePunkt extends MovieClip {

		//Variablen
		var frame:uint;


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenuePunkt(menueText:String, bildnummer:uint) {
			
			this.buttonMode=true;
			this.useHandCursor=true;

			beschriftung.selectable=false;
			beschriftung.mouseEnabled=false;
			beschriftung.text=menueText;

			frame=bildnummer;

			this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverFunction);
			this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutFunction);
			this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownFunction);
			this.addEventListener(MouseEvent.MOUSE_UP, mouseUpFunction);
		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		private function mouseOverFunction(evt:MouseEvent):void {
			this.gotoAndStop(2);
		}

		//-----------------------------------------------------------

		private function mouseOutFunction(evt:MouseEvent):void {
			this.gotoAndStop(1);
		}

		//-----------------------------------------------------------

		private function mouseDownFunction(evt:MouseEvent):void {
			this.gotoAndStop(3);
		}

		//-----------------------------------------------------------
		private function mouseUpFunction(evt:MouseEvent):void {
			this.gotoAndStop(1);
			evt.currentTarget.root.gotoAndStop(frame);
		}

		//-----------------------------------------------------------

	}
}

Actions der Klasse MenueBox

package  {
	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.events.*;




	public class MenueBox extends MovieClip {


		//--------------------------------------------------------------------------



		//Konstruktor

		public function MenueBox(buttons:Array) {
			
			for(var i:uint=0; i < buttons.length;i++){
				var button:MenuePunkt = new MenuePunkt(buttons[i], i+1);
				button.x=10;
				button.y=30+i*30;
				this.container.addChild(button);
				}

			//die Hintergrundfläche mit den Buttons	
			this.container.back.height=buttons.length*30+50;
			this.container.visible=false;

			this.addEventListener(MouseEvent.MOUSE_OVER, showButtons);
			this.addEventListener(MouseEvent.MOUSE_OUT, hideButtons);

			
		}
		//ende Konstruktorfunktion


		//-----------------------------------------------------------


		// Buttons anzeigen
		protected function showButtons(evt:MouseEvent):void {

			this.container.visible=true;

		}

		// Buttons ausblenden
		protected function hideButtons(evt:MouseEvent):void {

			this.container.visible=false;

		}

	}
}

Startseite www.pastorpixel.de