Nach dem die SWC mit Add To Library dem Projekt hinzugefügt wurde, gibt es die Optionen

1. Library (inlcude referenced classs)
2. Include library (include completely)
3. External libratry (not included)

Zu Punkt 1:
Hier werden nur die Klassen importiert, die auch tatsächlich genutzt werden. Es ist nicht möglich dynamisch Klassen zu nutzen, die vorher noch nicht referenziert wurden. Habe ich zum Beispiel zwei Verlinkungen in der SWC, einmal assets.ball und assets.korb. Wenn ich nun im Code new assets.korb(); schreibe aber niemals new assets.korb(); so würde ich eine Fehlermeldung bekommen, wenn ich loaderInfo.applicationDomain.getDefinition(“assets.korb”); benutzen würde. Der Grund ist, da die Klasse zuvor nicht referenziert wurde. Nur ein import assets.korb; würde auch nicht ausreichen.

Zu Punkt 2:
Mit dieser Option wird alles aus der SWC importiert, egal ob es benutzt oder nicht benutzt wird. Hier stehen alle Klassen aus der SWC zur Verfügung.

Zu Punkt 3:
Hier wird die SWC nicht importiert und dient lediglich der Autovervollständigung. Die SWF muss zwingend vom Programm nachgeladen werden, ansonsten gibt es eine Fehlermeldung, da alle Klassen der SWC nicht vorhanden sind.

Nun müssen wir überlegen, was für Klassen wir brauchen. Wir haben ein Feld und Kugeln, mehr nicht, daher bietet sich an, jeweils eine Klasse für das Feld und eine für die Kugel zu erstellen.  Dann benötigen wir noch einen Levelzyklus und eine Event-Klasse. Somit ergibt eine Struktur wie folgt (kurzer Anriss, eine genau Struktur kann in der jeweiligen Klassendatei eingesehen werden:

Main.as
Hauptprogramm zur Steuerung der Level und ein paar Anzeigen, Punktestand und Level.
Mögliche Methoden:

• zur Aktualisierung der Anzeige
• erstellen neuer Level

Field.as
Aufbau des Feldes und Steuerung der Kugeln, also für die Spielelogik.
Mögliche Methoden:

• Feld erstellen
• suchen nach Kombinationen
• Mauseingabe verarbeiten
• Atome hinzufügen und entfernen
• Ereignisse auslösen für Levelende und Abbau von Atomen. Natürlich könnte man noch mehr Ereignisse auslösen, das sollte aber fürs erste reichen

Atom.as
Die Kugel, ich nenne das kleinste Teil mal Atom, muss ja nicht unbedingt eine Kugel sein.
Mögliche Methoden:

• Anzeige der Grafik
• Positionieren der Grafik

FieldEvent.as
Für die Ereignisse, die von Field geworfen werden. Diese erbt von Event, der Event Klasse von Flash. Dies müssen wir, da der EventDispatcher, mit dem wir Ereignisse werfen können, nur Events verarbeiten kann.

Für ein einfaches Spiel reichen uns diese vier Klassen.

Wir verzichten auch auf ein Grafikasset und Zeichnen uns die Textfelder und Kugeln per ActionScript 3.0, nur für die Soundeffekte benötigen wir eine Flashdatei.

Ich habe das ganze mit FlashDevelop realisiert, wie man ein Projekt einrichtet wurde zuvor unter “Anleitung Teil 1 : ActionScript 3 Projekt mit FlashDevelop erstellen” beschrieben.

Die fertigen Klassen

Main.as

public class Main extends Sprite
	{

		/* Punkte */
		private var _score:int;

		/* Spielfeld */
		private var _field:Field;

		/* Zähler für abgebaute Atome pro Feldaufbau*/
		private var _deleteCount:int;

		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			// Verschiebung der Ansicht
			Atom.OFFSET_X = 5;
			Atom.OFFSET_Y = 0;

			// Minimale Anzahl der Kette
			Field.MIN_CHAIN = 2;
			// Maximale Anzahl der Farben
			Field.MAX_COLOR = 1;

			// Feld erstellen
			_field = new Field(17, 15);

			//Listener hinzufügen
			_field.addEventListener(FieldEvent.ATOMS_DELETED, updateHUD);
			_field.addEventListener(FieldEvent.NO_MORE_MOVES, onNoMoreMoves);

			// Auf Bühne legen
			addChild(_field);

			// Texfeld für die Punkte erstellen
			var tf:TextField = new TextField();
			tf.x = 10;
			tf.y = 255;
			tf.defaultTextFormat = new TextFormat("Verdana", 12, 0x000000, true);
			tf.name = "score";
			addChild(tf);

			// Punkte aktualisieren
			score = 0;

			// Atomzähler auf 0 setzen
			_deleteCount = 0;
		}

		/**
		 * Wird von FieldEvent aufgerufen
		 * @param	evt		FieldEvent
		 */
		private function updateHUD(evt:FieldEvent):void
		{
			// Punkte addieren
			score += (evt.amount * evt.amount);

			// Atomzähler setzen
			_deleteCount += evt.amount;
		}

		/**
		 * Wird von FieldEvent aufgerufen wenn keine Züge mehr möglich sind
		 * @param	evt			FieldEvent
		 * @param	count		für den setTimeout
		 */
		private function onNoMoreMoves(evt:FieldEvent, count:int = 0):void
		{
			// Nach Textfeld für den Countdown und Level suchen
			var ctf:TextField = getChildByName("counter_txt") as TextField;
			var tf:TextField = getChildByName("level_info_txt") as TextField;

			// Drei Sekunden Zähler
			if (count < 3)
			{
				if (ctf == null) // Textfeld für Countdown erstellen, falls nicht vorhanden
				{
					ctf = new TextField();
					ctf.defaultTextFormat = new TextFormat("Verdana", 20, 0xFF8000, true);

					ctf.autoSize = TextFieldAutoSize.CENTER;
					ctf.multiline = true;
					ctf.x = 150;
					ctf.y = 150;
					ctf.name = "counter_txt";
					ctf.filters = new Array(new BevelFilter(), new DropShadowFilter(10, 45, 0x4B4B4B, .5, 10, 10));
					addChild(ctf);
				}

				if (tf == null) // Textfeld für Level erstellen, falls nicht vorhanden
				{
					tf = new TextField();
					tf.defaultTextFormat = new TextFormat("Verdana", 20, 0xFF8000, true);

					tf.autoSize = TextFieldAutoSize.CENTER;
					tf.multiline = true;
					tf.x = 150;
					tf.y = 130;
					tf.name = "level_info_txt";
					tf.filters = new Array(new BevelFilter(), new DropShadowFilter(10, 45, 0x4B4B4B, .5, 10, 10));
					addChild(tf);
				}

				// Auswertung nur beim ersten Aufruf
				if (count == 0)
				{
					// Nach drei Aufrufe Feld zurücksetzen
					if (_deleteCount == _field.fieldWidth * _field.fieldHeight)
					{
						// Alle Atome abgebaut
						// Nächstes Level mit mehr Farben, maximale Farben, dann von vorne
						Field.MAX_COLOR = ++Field.MAX_COLOR > Atom.COLOR.length ? 1 : Field.MAX_COLOR;

						tf.text = "Level " + Field.MAX_COLOR + " ...";
					}
					else
					{
						// nicht alle Atome abgebaut
						tf.text = "Nicht geschafft, " + score + " Punkte";

						score = 0;
						Field.MAX_COLOR = 1;
					}
				}

				ctf.text = "Weiter in " + (3 - count) + " Sekunden";

				// nach einer Sekunde noch mal aufrufen
				setTimeout(onNoMoreMoves, 1000, evt, ++count);
				return;
			}

			removeChild(ctf);
			removeChild(tf);
			evt.target.reset();

			_deleteCount = 0;
		}

		/**
		 * Get und Set für Punkte
		 */
		public function set score(value:int):void
		{
			_score = value;
			var tf:TextField = getChildByName("score") as TextField;
			tf.text = _score + " Punkte";
		}

		public function get score():int
		{
			return _score;
		}

	}

Field.as

	public class Field extends MovieClip
	{
		/* Minimale Kette */
		public static var MIN_CHAIN:int = 2;

		/* Maximale Farben */
		public static var MAX_COLOR:int = -1;

		/* Feld Array länge max. Anzahl der Atome*/
		private var _field:Array;

		/* Feldgröße, Anzahl Atome horizontal und vertikal */
		private var _width:int;
		private var _height:int;

		/* Ausgewählte Kette */
		private var _selectedChain:Array;

		/* Angeklickets Atom */
		private var _clickedAtom:Atom;

		/**
		 * Konstruktor Feld
		 * @param	width		Atome horizontal
		 * @param	height		Atome vertikal
		 */
		public function Field(width:int, height:int)
		{

			// Feldhintergrund
			graphics.beginFill(0xffffff);
			graphics.drawRect(0, 0, 300, 300)
			graphics.endFill();

			// Feld maximale Atomanzahl
			_field = new Array(width * height);

			// Größe setzen
			_width = width;
			_height = height;

			// Atome erstellen
			for (var x:int = 0; x < width; x++)
			{
				for (var y:int = 0; y < height; y++)
				{
					var atom:Atom = new Atom(x, y, MAX_COLOR);
					addAtomAt(x, y, atom);
				}
			}

			// Listener für die Maus erstellen
			addEventListener(MouseEvent.MOUSE_DOWN, handleMouse);
			addEventListener(MouseEvent.MOUSE_UP, handleMouse);

		}

		/**
		 * Kobinationen suchen
		 * @param	x				ab Position x
		 * @param	y				ab Position y
		 * @param	depth			Rekursionstiefe
		 * @param	combination		Gefundene Kombinationen
		 * @param	checked			Bereits geprüfte Atome
		 * @return					Kombination
		 */
		public function findCombinations(x:int, y:int, depth:int = 0, combination:Array = null, checked:Dictionary = null):Array
		{
			// Leere Kombination erstellen
			if (combination == null)
				combination = new Array();

			// Für bereits geprüfte steine.
			if (checked == null)
				checked = new Dictionary(true);

			// prüfen ob im zulässigem Bereich
			if (!isInBounds(x, y)) return null;

			// Zuprüfendes Atom holen
			var atom:Atom = getAtomAt(x, y);

			// Wenn leere Position beenden
			if (atom == null)
				return combination;

			// Atom als überprüft merken
			checked[atom] = atom;

			// Atom in die Kobination einfügen
			combination.push(atom);

			if (atom != null)
			{
				// In alle Richtungen suchen
				var a1:Atom = getAtomAt(x + 1, y) ;
				var a2:Atom = getAtomAt(x - 1, y) ;
				var a3:Atom = getAtomAt(x    , y + 1) ;
				var a4:Atom = getAtomAt(x    , y - 1) ;

				// Für Suche in X-Richtung rechts
				// Wenn Atom in Suchrichung existiert (Feldposition nicht leer)
				if (a1 != null)
				{
					// dann, wenn das Atom in Suchrichtung die gleiche Farbe hat und wenn das Atom noch nicht geprüft wurde
					if (a1.color == atom.color && checked[a1] == undefined)
					{
						// weiter in X-Richtung nach rechts suchen.
						findCombinations(x + 1, y    , depth + 1, combination, checked);
					}
				}

				// Kürzere schreibweise in die anderen Richtungen
				if (a2 != null) if (a2.color == atom.color && checked[a2] == undefined ) findCombinations(x - 1, y    , depth + 1, combination, checked);
				if (a3 != null) if (a3.color == atom.color && checked[a3] == undefined ) findCombinations(x    , y + 1, depth + 1, combination, checked);
				if (a4 != null) if (a4.color == atom.color && checked[a4] == undefined ) findCombinations(x    , y - 1, depth + 1, combination, checked);
			}

			// Depth = 0, wenn es der erste Aufruf war (nullte Rekursion) und wenn die Kobination nicht die minimale Kette hat wird null zurück gegeben (nichts gefunden)
			if (depth == 0 && combination.length < MIN_CHAIN)
			{
				combination = null;
			}

			// Ansosnten die gefundenen Atome zurückgeben
			return combination;
		}

		/**
		 * Wird vom MouseEvent aufgerufen
		 * @param	evt		MausEvent
		 */
		public function handleMouse(evt:MouseEvent):void
		{
			// Nacht type schauen
			switch (evt.type)
			{
				case MouseEvent.MOUSE_DOWN:
						/// Maus gedrückt und das Ziel ein Atom ist
						if (evt.target is Atom)
						{
							// Gedrücktes Atom merken
							_clickedAtom = evt.target as Atom;

							if (_selectedChain == null) // Wenn keine aktieve Kombination
							{
								// Klicksound abspielen
								new click().play();
								// Atom als ausgewählt markieren
								_clickedAtom.selected = true;
								// Kombination Auswählen
								selectCombination();
							}
							else
							{
								// Wenn eine Kombination ausgewählt ist
								//Flag für Atome entfernt
								var combiRemoved:Boolean = false;

								// Für alle Atome in Kombination
								for (var i:int = 0; i < _selectedChain.length; i++)
								{
									// Atom nicht mehr ausgewählt markieren
									Atom(_selectedChain[i]).selected = false;

									// Wenn das das geklickte Atom in der Kobination ist, wurde ein weiteres mal auf die Kobination geklickt
									if (_selectedChain[i] == _clickedAtom)
									{
										// Dann Kombination auflösen und Atome löschen
										combiRemoved = true;
										removeAndDeleteAtoms(_selectedChain);

										// Löschsound abspielen
										new push().play();
									}
								}

								// Ausgewählte Kobination auf null setzen
								_selectedChain = null;

								// Wenn Kombination nicht gelöscht, dann wurde eine andere Kombination gewählt
								if (!combiRemoved)
								{
									// Klicksound abspielen
									new click().play();
									// Neue Kombination auswählen
									selectCombination();
								}
							}
						}

					break;

				case MouseEvent.MOUSE_UP:
					// Wenn die Maus losgelassen wurde, keine Kombination und Atom ausgewählt ist
					if (_selectedChain == null && _clickedAtom != null)
					{
						// Das Atom auf normal setzen
						_clickedAtom.selected = false;
					}
					break;

			}
		}

		/**
		 * Eine Kombination auswählen
		 */
		public function selectCombination():void
		{
			// Nach Kombination suchen, anhand des ausgewählten Atoms
			_selectedChain = findCombinations(_clickedAtom.fieldX, _clickedAtom.fieldY);

			// Wenn Kombination gefunden
			if (_selectedChain != null)
			{
				// Alle Atome in der Kombination als ausgewählt markieren
				for (var i:int = 0; i < _selectedChain.length; i++)
				{
					Atom(_selectedChain[i]).selected = true;
				}
			}
		}

		/**
		 * GET und SET für Feldgröße
		 */
		public function get fieldHeight():int
		{
			return _height
		}

		public function get fieldWidth():int
		{
			return _width;
		}

		/**
		 * Holt ein Atom an einer gegebenen Position
		 * @param	x		Feld X
		 * @param	y		Feld Y
		 * @return			Atom oder null
		 */
		public function getAtomAt(x:int, y:int):Atom
		{
			// Bei ungültiger Position null
			if (!isInBounds(x, y)) return null;

			return _field[x + (y * fieldWidth)];
		}

		/**
		 * Fügt ein Atom an eienr gegebenen Feldpositon ein
		 * @param	x		Feld X
		 * @param	y		Feld Y
		 * @param	atom	Atom
		 */
		public function addAtomAt(x:int, y:int, atom:Atom):void
		{
			// Ungültige Position abfangen
			if (!isInBounds(x, y)) return;

			// Atom suchen
			_field[x + (y * fieldWidth)] = atom;

			// Atom gefunden
			if (atom != null)
			{
				// Positionieren und hinzufügen
				atom.fieldX = x;
				atom.fieldY = y;
				atom.move();
				addChild(atom);
			}
		}

		/**
		 * Löscht ein Atom an einer gegebenen Position und überschreibt diese mit null
		 * @param	x		Feld X
		 * @param	y		Feld Y
		 * @return			Gelöschte Atom
		 */
		public function removeAtomAt(x:int, y:int):Atom
		{
			// Ungültige Position abfangen
			if (!isInBounds(x, y)) return null;

			// Atom holen
			var a:Atom = getAtomAt(x, y);

			// Atom gefunden
			if (a != null)
			{
				// Atom löschen
				removeChild(a);
				// Position mit null überschreiben
				addAtomAt(x, y, null);
			}

			// Gelöschtes Atom zurückgeben
			return a;
		}

		/**
		 * Löscht und entfern mehrere Atome
		 * @param	atoms		Atom Array
		 */
		public function removeAndDeleteAtoms(atoms:Array):void
		{
			// Für alle Atome im Array
			for (var i:int = 0; i < atoms.length; i++)
			{
				// Atom löschen
				var a:Atom = removeAtomAt(atoms[i].fieldX, atoms[i].fieldY);

				// Wenn Atom gelöscht
				if (a != null)
				{
					// Frei gewordene Position melden zum nachrücken
					invokeFreePosistion(a.fieldX, a.fieldY);
				}
			}

			// Ereignis werfen, dass eine Kobination gelöscht wurde mit Kobinationslänge
			dispatchEvent(new FieldEvent(FieldEvent.ATOMS_DELETED, atoms.length));

			// Wenn es keine Kobinationen mehr gibt Ende melden
			if (hasMoreMoves() == null)
				dispatchEvent(new FieldEvent(FieldEvent.NO_MORE_MOVES));
		}

		/**
		 * Verarbeitet freigewordene Positionen. Aufrüken von Oben nach Unten und von Links nach Rechts
		 * @param	x		Feld X
		 * @param	y		Feld Y
		 */
		public function invokeFreePosistion(x:int, y:int):void
		{
			// Ungültige Positionnen abfangen
			if (!isInBounds(x, y)) return;

			// Atom von Oben
			var a:Atom = getAtomAt(x, y - 1);

			if (a != null) // Atom von Oben gefunden
			{
				// Atom löschen
				removeAtomAt(a.fieldX, a.fieldY);

				// Und an neue tiefere Position einfügen
				addAtomAt(x, y, a);

				// Nächstes Atom zum Nachrücken suchen
				invokeFreePosistion(x, y - 1);
			}
			else // Kein Atom gefunden, Atome nach rechts
			{
				// Atom in Linksrichtung suchen
				a = getAtomAt(x - 1, y);

				// Atom gefunden
				if (a != null)
				{
					// Atom entfernen
					removeAtomAt(a.fieldX, a.fieldY);

					// An neue Position setzen
					addAtomAt(x, y, a);

					// Weier nach links suchen
					invokeFreePosistion(x -1, y);
				}
			}
		}

		/**
		 * Überprüft ob x und y im gültigem Bereich sind
		 * @param	x		Feld X
		 * @param	y		Feld Y
		 * @return			Gültig true, ungültig false
		 */
		public function isInBounds(x:int, y:int):Boolean
		{
			if (x < 0 || y < 0 || x >= fieldWidth || y >= fieldHeight)
				return false;

			return true;
		}

		/**
		 * Überprüft anch weiteren Kombinationen
		 * @return	Gefundene Kobination oder null
		 */
		public function hasMoreMoves():Array
		{
			// Kombination
			var combi:Array = null;

			// Durch alle Atome im Feld
			for (var x:int = 0; x < fieldWidth; x += MIN_CHAIN)
			{
				for (var y:int = 0; y < fieldHeight; y += MIN_CHAIN) 				{ 					// Nach Kobination suchen 					combi = findCombinations(x, y); 					 					// Kombination gefunden dann Funktion beenden und Kobination zurückgeben  					if (combi != null) 					{ 						if (combi.length > 0)
						{
							return combi;
						}
					}
				}
			}

			// keine Kombinationen mehr
			return null;
		}

		/**
		 * Feld zurücksetzen
		 */
		public function reset():void
		{
			// Alle Atome löschen
			for (var i:int = 0; i < _field.length; i++)
			{
				var a:Atom = _field[i] as Atom;
				if (a != null) removeAtomAt(a.fieldX, a.fieldY);
			}

			// Feld mit neuen Atomen befüllen
			for (var x:int = 0; x < width; x++)
			{
				// Reihe für Reihe
				setTimeout(addOneLine, x * 200, x);
			}
		}

		/**
		 * Fügt eine Reihe vertikal an gegebener Position ein
		 * @param	x	Feld X
		 */
		private function addOneLine(x:int):void
		{
			// Für komplette Spalte
			for (var y:int = 0; y < height; y++)
			{
				var atom:Atom = new Atom(x, y, MAX_COLOR);
				addAtomAt(x, y, atom);
			}
		}

	}

FieldEvent.as

public class FieldEvent extends Event
	{
		public static const ATOMS_DELETED:String = "onAtomsDeleted";
		public static const NO_MORE_MOVES:String = "onNoMoreMoves";

		/* Atomzähler */
		public var amount:int;

		public function FieldEvent(type:String, amount:int = 0)
		{
			super(type, true);

			this.amount = amount;
		}

	}

Atom.as

	public class Atom extends MovieClip
	{
		/* Farbtabelle */
		public static const COLOR:Array = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];

		/* Atom größe*/
		public static const SIZE:int = 8;

		/* Verschiebung auf x und y der Bühne*/
		public static var OFFSET_X:Number = 0;
		public static var OFFSET_Y:Number = 0;

		/* X und Y Position im Feld*/
		private var _x:int;
		private var _y:int;

		/* Atomfarbe */
		private var _color:int;

		/**
		 * Konstruktor für ein Atom
		 * @param	x			x Position
		 * @param	y			y Position
		 * @param	maxColor	Maximale Farben
		 */
		public function Atom(x:int, y:int, maxColor:int)
		{
			// x und y der Feldposition setzen nicht x und y der Bühne
			_x = x;
			_y = y;

			// Farbe setzen
			_color = getRandomColor(maxColor);

			// Zeichenen
			draw();

			// Auf Bühnenposition bewegen
			move();

			// Hand an der Maus anzeigen
			buttonMode = true;
			useHandCursor = true;
		}

		/**
		 * Atom zeichnen
		 */
		public function draw():void
		{
			// Wir zeichnen hier eine Kugel
			var g:Graphics = graphics;
			g.lineStyle(1, 0x000000, .2);
			g.beginFill(_color, 8);
			g.drawCircle(0, 0, SIZE);
			g.endFill();
			filters = new Array(new BevelFilter(2));
		}

		/**
		 * An Bühnenposition bringen
		 */
		public function move():void
		{
			// x und y setzen
			x = _x * width + (OFFSET_X + SIZE);
			y = _y * height + (OFFSET_Y + SIZE);
		}

		/**
		 * Zufallsfarbe holen
		 * @param	amout	Anzahl der Farben
		 * @return			HEX Farbwert
		 */
		public function getRandomColor(amout:int = -1):uint
		{
			// Überprüfen ob im zulässigem Farbbereich
			if (amout > COLOR.length || amout == -1)
				amout = COLOR.length;

			// Farbe zurückgeben
			return COLOR[Math.floor(Math.random() * amout)];
		}

		/**
		 * Atom als String
		 * @return		String
		 */
		override public function toString():String
		{
			return "[Atom x=" + _x + ", y=" + _y + ", color=" + _color + "]";
		}

		/**
		 * GET und SET X Feldposition
		 */
		public function get fieldX():int
		{
			return _x;
		}

		public function set fieldX(value:int):void
		{
			_x = value;
		}

		/**
		 * GET und SET Y Feldposition
		 */
		public function get fieldY():int
		{
			return _y;
		}

		public function set fieldY(value:int):void
		{
			_y = value;
		}

		/**
		 * GET Farbe
		 */
		public function get color():uint
		{
			return _color;
		}

		/**
		 * SET Ausgewählt
		 */
		public function set selected(value:Boolean):void
		{
			if (value)
			{
				// Wenn ausgewählt ein paar Filder setzen und Alpha runterschrauben
				filters = new Array(new BevelFilter(2), new GlowFilter(0x000000));
				alpha = .4;
			}
			else
			{
				// Nicht ausgewählt normale Ansicht
				filters = new Array(new BevelFilter(2));
				alpha = 1;
			}
		}
	}

Auf Angabe der Pakete habe ich im Artikel verzichtet.

Das Spiel

Die Sourcen

Balls Flash Game Sourcen

Wir benötigen dafür Ant “Apache-Ant (http://ant.apache.org/)”. Ich verwende momentan Apache Ant 1.8.1.

Apache Ant vorbereiten

Als erstes wird Ant installiert, bzw. es muss nur entpackt werden, zum Beispiel in C:\Programme\. Damit Ant ohne Pfadangabe gestartet werden kann, tragen wir diesen in die Systemvariablen ein.
Dazu klicken wir mit der rechten Maustaste auf Arbeitsplatz -> Eigenschaften und auf die Registrierkarte Erweitert. Nun sollte das Fenster wie im folgendem Bild aussehen, dort gehen wir auf Umgebungsvariablen.

Ein weiteres Fenster öffnet sich, dort suchen wir unter Systemvariablen den Eintrag Path und machen einen Doppelklick drauf.

Jetzt muss nur noch der Eintrag unter Wert der Variablen: mit ;C:\Programme\apache-ant-1.8.1\bin\ erweitert und mit OK bestätigt werden.

FlashDevelop vorbereiten

Da wir später ein Release-Build per Knopfdruck erstellen wollen, müssen wir ein Button in die ToolBar.xml eintragen. Diese liegt im Installationsverzeichnis von FlashDevelop, für gewöhnlich in C:\Programme.

In dieser Datei muss nun der folgende Code vor </toolbar> eingefügt werden.

<seperator />
 <button label="Ant Build (Release)" click="RunProcessCaptured" image="487" tag="c:\windows\system32\cmd.exe;/c $(Quote)ant -buildfile $(Quote)$(ProjectDir)/ant/build.xml$(Quote) release$(Quote)" />

Nach einem Neustart von FlashDevelop sollte dann ein neuer Button zu sehen sein.

1. label wird als Tooltip angezeigt.
2. Was beim Klicken passiert steht in click, hier soll ein Prozess ausgeführt werden.
3. image=”487″ bedeutet, dass das Icon 487 aus der Iconsammlung genommen wird.
4. tag sagt dem RunProcessCaptured was er ausführen soll. Er soll die cmd.exe mit dem Befehl “ant -buildfile “$(ProjectDir)/build/build.xml” release. In etwa so: cmd.exe starte bitte bitte ant mit der build.xml und führe das target release aus. $(Quote) ist ein Anführungszeichen und $(ProjectDir) der absolute Pfad zum Projekt für FlashDevelop.

Möchte man per Knopfdruck noch ein anderes target starten, so müsste ein Weiterer Knopf hinzugefügt werden. Wer gerne mein Plugin benutzen möchte kann sich dies unter http://www.flashdevelop.de/programmierung/ant-plugin-fuer-flashdevelop.html anschauen und installieren, somit bleibt einem der ganze Schritt FlashDevelop vorbereiten erspart.

Das Projekt Stechen mit Ant erweitern

Warum wollen wir das Projekt überhaupt mit Ant erstellen, wenn FlashDevelop das auch kann?

trace Ausgaben könnten Informationen preisgeben, die der Anwender missbrauchen könnte, um sich z. B. Vorteile zu verschaffen, daher müssten wir diese vorher löschen. Der DEBUGMODE muss für den Release von true auf false und wieder zurück geändert werden. Unsere Versionsnummer braucht eine Erhöhung. Dies und noch viel mehr kann Ant für uns übernehmen.

D. h. Ant soll für Stechen:

1. DEBUGMODE auf false stellen.
2. trace Ausgaben löschen.
3. Versionsnummer erhöhen.
4. Release Version erstellen und als ZIP speichern.
5. Debug Version erstellen und starten.

Also erstellen wir zu erst ein neues Verzeichnis und nennen es ant, dort legen wir alle Dateien für Ant hinein. Eine build.xml (New XML File…), eine build.property (New Empty File…) und eine build.number.

Vorab: hier findet ihr die Anleitung von Apache Ant http://ant.apache.org/manual

build.xml

Ein Ant Projekt besteht immer aus einer XML Datei, wir haben unsere build.xml genannt.

<?xml version="1.0" encoding="utf-8" ?>
<!-- Jedes Ant Script wird von einem Project Tag umschlossen.
	Dem geben wir den Namen Stechen und als default Target debug.
	Das Hauptverzeichnis soll das gesamte Projektverzeichnis sein, also ../.
-->
<project name="Stechen" default="debug" basedir="../">

<!--
Vordefinierte Variablen können in Dateien ausgelagert werden.
Variablen werden mit ${name xyz} angesprochen.
Geladen oder erstellt werden diese mit dem Tag property,
sie können aber auch als Parameter übergeben werden.
Mit file geben wir an dass eine Datei geladen werden soll.
Wir wollen die build.property im Hauptverzeichnis unter ant laden.
-->
	<property file="${basedir}/ant/build.property" />

<!--
Dann erstellen wir noch drei weitere Variablen, die jeweils
den Pfad zu bin, lib und src angeben, ausgehend vom Hauptverzeichnis.
-->
	<property name="bin" value="${basedir}/bin" />
	<property name="lib" value="${basedir}/lib" />
	<property name="src" value="${basedir}/src" />

<!--
Nun beginnen wir mit dem ersten Target und nennen ihn debug.
Eine kleine Beschreibung mit description vergeben wir auch noch.
debug soll:
1. die Buildnummer erhöhen
2. das Projekt kompilieren
3. die SWF starten
-->
	<target name="debug" description="Erstellt eine Debug Version">

<!--
Mit dem Tag antcall sagen wir dem debug er soll einen anderes Target ausführen.
Man kann sich dies wie Funktionsaufrufe vorstellen. Hier wollen wir gerne buildnumber
ausführen und übergeben noch einen Parameter mit dem namen increment und dem Wert build.
Dieser kann später im Target buildnumber genutzt werden.
-->
		<antcall target="buildnumber">
			<param name="increment" value="build" />
		</antcall>

<!--
Nun starten wir compile und übergeben drei Variablen, dessen Bedeutung später erläutert werden.
-->
		<antcall target="compile">
			<param name="debugmode" value="true" />
			<param name="srcpath" value="${src}" />
			<param name="benchmark" value="false" />
		</antcall>

<!--
Mit exec können wir andere Programme starten.
executable gibt das zu startende Programm an.
failonerror besagt, dass dies bei Fehlern abgebrochen werden soll.
Mit arg wird dem Programm alles übergeben, was in line steht.
Aufgelöst würde hier stehen <arg line="../bin/Stechen.swf"
-->
		<exec executable="${flashPlayerDebug}" failonerror="true">
			<arg line="${bin}/${outputfile}" />
		</exec>
	</target>

<!--
Unser release Target soll bevor es ausgeführt wird noch clean ausführen, dies besagt depends.
-->
	<target name="release" depends="clean" description="Erstellt eine Release Version">

<!--
buildnumber ausführen für patch Nummer
-->
		<antcall target="buildnumber">
			<param name="increment" value="patch" />
		</antcall>

<!--
Die soeben mit buildnumber geänderte Datei muss nun noch in das temporäre Verzeichnis kopiert werden.
Dateien kopiert man mit copyfile.
src ist die Datei, die kopiert werden soll.
dest ist das Ziel.
Mit forceoverwrite überscheiben wir die bestehende Datei.
-->
		<copyfile src="${src}/BuildVersion.as" dest="${basedir}/tmp/BuildVersion.as" forceoverwrite="true" />

<!--
Nun kompilieren wir die Dateien im tmp Verzeichnis, welches wir mit clean erstellt haben.
-->
		<antcall target="compile">
			<param name="debugmode" value="false" />
			<param name="srcpath" value="${basedir}/tmp" />
			<param name="benchmark" value="true" />
		</antcall>

<!--
Anschließend kann das temporäre Verzeichnis gelöscht werden, mit delete.
-->
		<delete dir="${basedir}/tmp" includeEmptyDirs="true" />
	</target>

<!--
compile soll das Projekt mit dem Adobe Flex Compiler kompilieren. Den Source Path übergeben wir mit dem antcall, debugmode und benchmark ebenfalls.
Eine detaillierte Beschreibung bekommt ihr, in dem ihr im cmd [mxmlc -help list details] oder [mxmlc -help list aliases details] eingebt.
-sp alle benötigten Sourcen, das src oder tmp Verzeichnis und der Tweener.
-include-libraries unsere benötigten SWC's, hier nur die assets.swc
Dann kommen Angaben zur SWF, ja könnten in die build.property ausgelagert werden.
Zum Schluss noch den Einstiegspunkt angeben und mit -o die Ausgabedatei Stechen.swf
-->
	<target name="compile">
		<exec executable="${mxmlc}" failonerror="true">
			<arg line="
						-sp '${srcpath}' ${addClassPaths} 

						-include-libraries '${lib}/assets.swc'

						-default-size 300 400
						-default-frame-rate 31
						-default-background-color 0xFFFFFF
						-debug=${debugmode}
						-incremental=false
						-benchmark=${benchmark}
						-target-player=10.0.0

						'${srcpath}/Main.as'
						-o '${bin}/${outputfile}'
						"/>
		</exec>
	</target>

<!--
clean soll:
1. src Verzeichnis zwischenspeichern, für die Änderungen.
2. DEBUGMODE auf false setzen
3. trace Ausgaben löschen
4. Projekt als ZIP speichern
-->
	<target name="clean">
		<property name="tmp" value="${basedir}/tmp" />

<!--
Zur Sicherheit altes tmp löschen.
-->
		<delete dir="${basedir}/tmp" includeEmptyDirs="true" />

<!--
Verzeichnis kopieren von dir nach todir.
-->
		<copy todir="${tmp}">
			<fileset dir="${src}" />
		</copy>

<!--
Mit replace können Zeichenketten gesucht und ersetzt werden.
In der Datai file und Kodierung encoding.
token wird gesucht und mit value ersetzt.
-->
		<replace file="${tmp}/Main.as" encoding="UTF-8" token="DEBUGMODE:Boolean = true" value="DEBUGMODE:Boolean = false" />

<!--
Mit replaceregexp können reguläre Ausdrücke benutzt werden.
Wir wollen alle trace Ausgaben löschen, suchen also mit dem Ausdruck in match nach trace(....) und ersetzen diesen mit replace.
flags -g sucht und ersetzt in der ganzen Datei.
fileset dir bedeutet nichts anderes als im gesamten tmp Verzeichnis zu suchen.
-->
		<replaceregexp match="trace\(.*\)" replace="" flags="-g">
			<fileset dir="${basedir}/tmp" />
		</replaceregexp>

<!--
build.number auslesen.
Mit zip ein ZIP File erstellen, unter destfile bin/release/Stechen_(versionsnummer).zip.
basedir wird gezipt.
exludes werden ausgeschlossen, unsere Releaseversionen. Debug habe ich wohl nicht mehr gemacht.
INFO: mit dem Tag ftp könnte man auch Dateien auf einem Server schieben.
-->
		<property file="${basedir}/ant/build.number" />
		<zip destfile="${bin}/release/${ant.project.name}_${major}.${minor}.${patch}-${build}.zip" basedir="${bin}" excludes="release/**,debug/**" />

	</target>

<!--
buildnumber soll für release die patch Nummer erhöhen und im debug die build Nummer.
-->
	<target name="buildnumber">

<!--
propertyfile build.number laden.
entry nimmt einen Eintrag aus der Datei, der mit key angegeben wird. Wir übergeben diesen als param und haben die Variable increment genannt.
Mit type setzen wir den Datentype des Eintrages fest, wir brauchen ein Integer.
default setzt den Wert auf 0 falls keiner vorhanden ist.
Dann wollen wir mit operation + den Wert um eins erhöhen.
-->
		<propertyfile file="${basedir}/ant/build.number">
			<entry key="${increment}" type="int" default="0" operation="+" />
		</propertyfile>

<!--
Die neuen Versionsnummern auslesen und wie gehabt, unsere BuildVersion.as aktualisieren.
-->
		<property file="${basedir}/ant/build.number" />
		<replaceregexp file="${src}/BuildVersion.as"
							match="VERSION:String = '(.*)'"
							replace="VERSION:String = '${major}.${minor}.${patch}-${build}'"
							byline="true"  />
	</target>

</project>

build.property

Die build.property ist eine normale Textdatei und nicht sonderlich spannend. Ant liest diese aus und verwendet die Variablen.

#Name der Ausgabedatei
outputfile = Stechen.swf

#Zusätzliche Klassenpfade
addClassPaths = 'c:/Dokumente und Einstellungen/akhon/Eigene Dateien/Classes/greensock-tweening-platform-as3/'

#Flash Player, Debug Player und die Version
flashPlayer = c:/Programme/Adobe/Adobe Flash CS4/Players FlashPlayer.exe
flashPlayerDebug = c:/Develop/flashplayer_10_sa_debug.exe
playerVersion = 10

#Der Pfad zum Flex SDK
flexSDK = c:/Develop/flex_sdk_3.4.1.10084
#Adobe Flex Compiler
#Auch hier können Variablen benutzt werden
mxmlc = ${flexSDK}/bin/mxmlc.exe

build.number

Die Nummern werden von Ant ausgelesen und in die BuildVersion.as eingefügt. Erhöht werden in diesem Projekt nur patch und build

#Thu, 12 Aug 2010 09:38:54 +0200
#Build Number
#Tue Aug 10 21:23:55 CEST 2010
major=0
minor=0
patch=1
build=9

ProjektDateien

Projekt Stechen mit Ant runterladen

• Anleitung Teil 1 : ActionScript 3 Projekt mit FlashDevelop erstellen
• Anleitung Teil 2 : Kartenspiel Stechen mit FlashDevelop

Unser Ziel

Ein kleines Kartenspiel Stechen. Zwei Spieler bekommen aus 32 Karten jeweils die Hälfte. Jeder deckt die oberste Karte seines Stapels auf, die höhere Karte gewinnt und der Gewinner bekommt den Stich. Bei einem Gleichstand bleiben die Karten im Stich liegen. Der Gewinner des Spiels ist, wer nach 16 Zügen die meisten Karten gesammelt hat.

Vorbereitung

Was brauchen wir?

Karten: Handelsübliche Karten 7-10, Bube, Dame, König und Ass mit den Farben Kreuz, Pik, Herz und Karo.

Spielfenster : Mit den Kartenstapel, Hilfe Button, Spieletitel, Versionsanzeige und Modusanzeige.

Popupfenster: Mit einem Textfeld und einem Button, für die Anleitung und der Gameoveranzeige.

Die benötigten Klassen

• Main: Startet das Spiel
• BuildVersion: Versionsanzeige
• Utils: Hilfsmethoden
• Trick: Kartenstich
• Pile: Kartenstapel
• PileEvent: Ereignisse die vom Kartenstapel geworfen werden.
• Card: Eine Karte
• Screen: Stellt verschiedene Methoden zur Verfügung, die für ein Fenster nötig sind.
• ScreenStechen: Erbt von Screen und ist zugleich für die Spiellogik zuständig.
• ScreenPopup: Erbt von Screen und zeigt ein Text an. Benötigt für die Hilfe und Auswertung.

Eine genau Beschreibung was jede einzelne Klasse macht, kann den Kommentaren entnommen werden.

Die benötigten Grafiken (assets.fla)

• Button: Mit einem Textfeld in up und over.
• Card Back: Der Kartenrücken einer Karte. Verknüpft mit assets.GFXCardBack. Wird von Card.as benötigt.
• Cards: Die Karten. Enthält drei Symbols mit den Instanznamen symbol1, symbol2, symbol3 und zwei Textfelder mit Instanznamen value1_txt und value2_txt. Die Textfelder zeigen den Kartenwert 7-10,  B,  D, K oder A an.
• Popup: Popupfenster für die Klasse ScreenPopup. Enthält ein Textfeld mit Instanznamen info_txt und den Button mit Instanznamen ok_btn. Verknüpft mit assets.GFXPopup.
• ScreenStechen: Enthält ein paar Grafiken, eine Button mit Instanznamen help_btn und ein Textfeld header_txt. Verknüpft mit assets.GFXScreen und wird von ScreenStechen.as benötigt.
• Symbols: Enthält vier Bilder in der Zeitleiste 1 = Kreuz, 2 = Pik, 3 = Herz und 4 Karo.

In FLA Dateien hat ActionScript nicht zu suchen.

Das gezipte Projekt

Kartenspiel Stechen kann hier geladen werden .

Das Ergebnis:

Weitere Teile:

• Anleitung Teil 1 : ActionScript 3 Projekt mit FlashDevelop erstellen
• Anleitung Teil 3 : Apache Ant mit FlashDevelop

Ich benutze hier:

• FlashDevelop 3.2.2 RTM
• Adobe Flash CS 4.
• Flex SDK 3.4.1.10084

Projekt aufsetzen

FlashDevelop öffnen und über das Menü Project -> New Project wird ein neues Projekt erstellt.

Wir wollen nun ein Actionscript 3 Projekt erstellen, mit dem Namen Stechen.

Also wählen wir in der linken Liste AS3 Project aus und geben dem Projekt unter Name den Namen Stechen ein. Unter Location könnt ihr dann das Zielverzeichnis angeben, in dem das Projekt später liegen soll. Mit Create directory for project sagt ihr dem Progarmm, dass er das Projekt in einem Unterverzeichnis mit dem Projektnamen erstellen soll. Anschließend bestätigen wir unsere Eingaben mit OK.

Nun ist die Grundstruktur des Projektes fertig.

Rechts sehen wir normalerweise die Struktur des Projektes, unter Project.

Im bin liegen alle Dateien, die für die Veröffentlichung benötigt werden. Dies sind z. B. XML’s, Bilder und SWF’s. Standartmäßig liegt hir schon eine index.html bei. Diese bindet die Flashdatei des Projektes ein, mittels JavaScript und überprüft gleich, ob der passende Flashplayer vorhanden ist.

Im lib sollten später alle Bibliotheken liegen, dies dient der Übersicht.

Im src sind unsere Actionscript Dateien. Hier liegt schon eine vorgefertigte Main.as und ist schon als Einstiegspunkt markiert. Mit Rechtsklick auf eine Datei können wir den Einstiegspunkt zu jeder Zeit ändern, Always Compile. Das ist die Datei, die beim Start ausgeführt wird.

Main.as

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	/**
	 * ...
	 * @author Dein Name
	 */
	public class Main extends Sprite
	{

		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
		}

	}

}

Bei //entry point ist unser Einstiegspunkt.

Da ich bei mir einige Plugins installiert habe, kann die Ansicht etwas anders aussehen.

Unter Project -> Properties (im Menü) müssen wir nun noch weitere Einstellungen vornehmen. Zwei Bilder zuvor habe ich einen Button grün umrandet, welcher den gleichen Effekt hat.

Im Reiter Output stellen wir unter Target den Flash Player 10 ein.  No output, only run pre/post build command benötigen wir nicht, der pre und post command kann im Reiter Build eingegeben werden.

Output file ist unsere Ausgabedatei und wird in bin mit dem Projektnamen abgelegt. Dann noch schnell die Größe Dimensions, Hintergrundfarbe Background color und  Bildrate Framerate eingeben.

Unter Test Movie können wir einstellen, wie das Projekt in FlashDevelop gestartet werden soll. Ich benutze Play in external player.  Probiert einfach die verschiedenen Möglichkeiten aus und schaut was passiert und welche euch am besten gefällt.  Ich habe die Erfahrung gemacht, wenn es zu Abstürzen oder Hängern kommen sollte, schmiert nur der externe Player ab und nicht das ganze FlashDevelop, sofern  Play in external player ausgewählt wurde.

Im Reiter Compiler Options können weitere Einstellungen vorgenommen werden, die wir in unserem Projekt nicht verändern.

Da wir noch den Tweener von http://www.greensock.com/ benutzen wollen, müssen wir diesen unter Classpaths eintragen, Add Classpath… und dann das Verzeichnis vom GreenSock Tweener auswählen.

Wie ihr seht, ist hier schon scr eingetragen, in dem unsere Actionscript Dateien liegen werden.

Jetzt wollen wir im Hauptverzeichnis ein neuen Ordner assets erstellen, dort legen wir unsere FLA Dateien ab. Rechte Maustaste auf Stechen ->  add -> New Folder…

Flashdatei erstellen

Jetzt erstellen wir in Adobe Falsh CS4 eine Flash-Datei (ActionScript 3.0) und geben der die gleiche größe 300 x 4oo Pixel, damit wir die Bühnengröße vor Augen haben. Gespeichert wird diese unter assets.fla in assets. In den Einstellung für Veroffentlichungen wählen wir im Reiter Formate HTML ab und schicken Flash ins ../lib/assets.swf. Wichtig: Unter dem Reiter Flash müssen wir nur noch SWC Exportieren auswählen.

Sobald in der Bibliothek etwas verknüpft und anschließen veröffentlicht wurde, erscheint die SWC im gleichen Ornder der SWF.

Die SWC muss dem Projekt hinzugefügt werden, befor die Verknüpfungen genutzt werden können.

Rechte Maustaste auf die SWC und Add To Library klicken. Nun müssen wir noch dem Projekt mitteilen, wie diese eingebunden sein soll. Hierzu gehen wir ein zweites mal auf die SWC und klicken auf das neu hinzugekommene Options…. Es öffnet sich ein neues Fenster.

1. Hier werden alle verendeten Klassen eingebunde, die SWF muss also nicht nachgeladen werden.

2. Hier wird die Komplette SWC eingefügt, inkl. der Grafiken und pipapo. Ein Nachladen der SWF ist nicht nötig. Für user Projekt verwenden wir diesen Weg.

3. Hier wird nichts eingefüht. Die Klassendefinitionen werden erkannt und können benutzt werden.  Damit das Projekt läuft muss die SWF nachgeladen werden.

Vergewissert euch noch, ob unter Tools -> Programm Settings.. -> AS3Context -> Flex SDK Location der Pfad zum Flex SDK richtig gesetzt wurde.

Fortsetzung folgt …

Vorschau:

• Anleitung Teil 2 : Kartenspiel Stechen mit FlashDevelop
• Anleitung Teil 3 : Apache Ant mit FlashDevelop

SimpleAntPlugin

SimpleAntPlugin erstellt ein Button in der Toolbar, liest ein Buildfile aus und zeigt die verschiedenen Targets an.

1. Alle gefundenen Ant Targets. Der hervorgehobene ist der im default angegebene.
2. Mit Neu laden kann das Buildfile neu eingelesen werden.
3. Ausführen der Pre-Build Command Line und Post-Build Command Line ein- oder ausschalten.

Plugin Settings

• AntPath = Der Pfad zu Ant, sollte eingetragen werden, wenn dieser nicht in den Systemvariablen seht.
• BuilDir = Verzeichis in der die Buildanweisungen sind.
• BuildFile = Die XML Datei (buildfile)
• PreBuild =  Pre-Build Command Line (ausführen = true)
• PostBuild = Post-Build Command Line (ausführen = true)

Ant Build starten

Targets werden gestartet, in dem man eines der Ant Targets aus wählt.  Mit Klick auf das Ant Icon startet immer default Target.

SimpleAntPlugin Download

In Programmsettings Tools -> Programmsettings oder [F10] drücken -> FlashDebugger -> Start Debugger On Test Movie muss False ausgewählt werden.

Möchte man den Debugger zu einem späteren Zeitpunkt nutzen, so muss dieser vor dem Test gestartet werden.

In dieser Version wurden einige Fehler behoben, im Codegenerator, Haxe, japanische Lokalisation, in der IDE Integration, im Refactoring,  im Debugger, Completion und das Ausklappen der View.

Das Programm findet ihr auf der Seite von FlashDevelop unter http://www.flashdevelop.org/community/viewtopic.php?f=11&t=6956

Vor dem Update ist es sinnvoll die vorherigen Settings zu Sichern, unter Tools -> Backup all Settings.

FlashDevelop 3.2.1 RTM gibt es wie immer bei FlashDevelop.org unter  http://www.flashdevelop.org/community/viewtopic.php?f=11&t=6709

Die vorherige Version 3.2.0 RTM brachte umfangreiche Neuerungen mit sich.

1. Nun hat FlashDevelop einen echten Debugger eingebaut.
2. Die Einstellungen können importiert und exportiert werden.
3. Es wird Fat SWC (SWC + ASDocs für Codehinweise) unterstützt.
4. Mit CTRL + rechte Maustaste im Projektmanager bekommt man nun den normalen Kontext angezeigt.
5. Besseres Adobe CS* Unterstützung.
6. FlashDevelop und Plugin Einstellungen können gesucht werden (Filter settings).
7. Das Result-Fenster kann ebenfalls durchsucht werden und hat jetzt verschiedene Filter.
8. Auch ein CodeAnalyzer Plugin ist hinzugekommen, welches Flex PMD integriert
9. … und noch ein paar andere Dinge….

FlashDevelop 3.1.1 RTM kann wie immer direkt von deren Seite geladen werden.