Schlagwort-Archive: flex

API – Blog von Jens Franke » Flash

Ich will niemandem den Spaß am Spielen mit den APIs nehmen, aber schreitet als Entwickler ein, wenn Dritte API-Demos zu einem Konzept zaubern. Verwendet ihr APIs von Dritten, dann solltet ihr immer ausreichend Buffer einkalkulieren.

Nicht selten kommt man in Grenzbereiche der API, wo man sich entweder tief in die API einarbeiten muss, um sein Ziel zu erreichen oder einfach in der Abhängigkeit gefangen ist und warten muss bis die API-Entwickler einen erhören und dann auch noch das Richtige veröffentlichen.

Eine Gradwanderung, die viel Feingefühl und einen kühlen Kopf benötigt.

Blog von Jens Franke » Flash.

Flex 3 Button Skinning

Einen Button kann in Flex 3 einfach über css gestyled werden.

/*Cutom Buttons css*/
.imgBtnLeft
{
    up-skin: Embed("../assets/buttons/Links.png");
    down-skin: Embed("../assets/buttons/LinksAktiv.png");
    over-skin: Embed("../assets/buttons/LinksAktiv.png");
    disabled-skin: Embed("../assets/buttons/Links.png");
} 
 
.imgBtnRight
{
    up-skin: Embed("../assets/buttons/Rechts.png");
    down-skin: Embed("../assets/buttons/RechtsAktiv.png");
    over-skin: Embed("../assets/buttons/RechtsAktiv.png");
    disabled-skin: Embed("../assets/buttons/Links.png");
}

Damit sich die Maus beim Überfahren des Custombuttons auch zu einer “Hand” verwandelt muß der buttonMode=”true” und mouseChildren=”false” gesetzt werden.

Codebeispiel Flex.

<mx:Canvas id="control" width="100%">
  <mx:Button id="btnBack" left="5"  buttonMode="true" mouseChildren="false" styleName="imgBtnLeft" click="nextPic(DIR_PREV)" toolTip="Vorheriges Bild"/>
  <mx:Button id="btnNext" right="5" buttonMode="true" mouseChildren="false" styleName="imgBtnRight" click="nextPic(DIR_NEXT)" toolTip="Nächstes Bild" />
</mx:Canvas>

Quelle und ausführliche Beschreibung:

http://userflex.wordpress.com/2008/03/13/button-image-skinning/

as3 removeEventListener wird nicht aufgerufen.

Ich bin auf das Problem gestoßen das ich ein Eventlistener hatte der sich nicht enfernen lies.
Nach reichlich gegoogle fand ich den Grund. Die ersten 3 Parameter des removeEventListener() müssen mit den ersten 3 Parameter der addEventListener() – Methode übereinstimmen.
Den entscheidenen Hinweis fand ich
hier

removeEventListener(): Removes an event handler added to a listeners list using addEventListener. The same first 3 arguments used in addEventListener must be used in removeEventListener to remove the correct handler.

Falsch:

public function initApp():void{
	box.addEventListener(MouseEvent.CLICK, clickHandler);
}
 
public function clickHandler(event:MouseEvent):void{
	trace("click");
	box.removeEventListener(MouseEvent.CLICK,onRemoveHandler );
}
 
private function onRemoveHandler(event:MouseEvent):void{
	trace("Handler removed");
}

Richtig:

public function initApp():void{
	box.addEventListener(MouseEvent.CLICK, clickHandler);
}
 
public function clickHandler(event:MouseEvent):void{
	trace("click");
	box.removeEventListener(MouseEvent.CLICK,clickHandler );
}

box.addEventListener(MouseEvent.CLICK, clickHandler);
box.removeEventListener(MouseEvent.CLICK,clickHandler );

Ein kleines Malprogramm in as3

Um mit flash zu malen bedarf es nicht viel. Hier ein super kleines Beispiel.

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class SimpleAs3 extends Sprite
	{
		private var _sprite:Sprite;
 
		public function SimpleAs3()
		{
			_sprite = new Sprite();
			addChild(_sprite);
			_sprite.graphics.beginFill(0xffffff);
			_sprite.graphics.drawRect(10, 10, 350, 350);
			_sprite.graphics.endFill();
			_sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			_sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);	
 
		}
 
		private function onMouseDown(event:MouseEvent):void{
			_sprite.graphics.lineStyle(1,23,1);
			_sprite.graphics.moveTo(mouseX, mouseY);
			_sprite.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);	
		}
 
		private function onMouseUp(event:MouseEvent):void{
			_sprite.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
		}
 
		private function onMouseMove(event:MouseEvent):void{
			_sprite.graphics.lineTo(mouseX,mouseY);
		}
	}
}

Ausprobieren?
http://showcase.ingo-reschke.de/simpleAs3/SimpleAs3.html
Mit der Maus auf die weiße Fläche.
Linke Maustaste drücken und gedrückt halten. -> zeichnen.
Maustaste loslassen – > aufhören zu zeichnen.

Ein einfaches AS3 Projekt

In Flexbuilder “NEW” -> Actionscript Project klicken Name für das Projekt vergeben und Fertig stellen. Standardeinstellungen können bebehalten werden. Es werden vom Flexbuilder alle notwendigen Dateien und Verzeichnisse angelegt. Einen leere bin-debug Ordner und einen src Ordner incl. der Startdatei. (SimpleAs3.as)

package {
	import flash.display.Sprite;
 
	public class SimpleAs3 extends Sprite
	{
		public function SimpleAs3()
		{
		}
	}
}

Diese Datei kann man schon ausführen (Run – Button). Es ist natürlich nicht sonderlich viel zu sehen. Es sollte sich ein Browserfenster öffen mit einem blauen Hintergrund. Um ein bisschen Leben reinzubringen hier eine kleine Schleife die zufällige Linien zeichnet.

package {
	import flash.display.Sprite;
 
	public class SimpleAs3 extends Sprite
	{
		public function SimpleAs3()
		{
			graphics.lineStyle(1,0,1);
			for(var i:int=0; i&lt;100; i++){
				graphics.lineTo(Math.random() * 400, Math.random() * 400);
			}
		}
	}
}