Air

Neue Air Datei

Eine Adobe Air Anwendung erstellen.

Wähle Datei Neu / Adobe Air
oder in dem Startscreen Neu erstellen / Adobe Air

Speichere die fla Datei ab.

Zertifikat

Adobe Air Dateien benötigen ein Zertifikat. Das ist ein Sicherheitsfeature, damit der User sich sicher sein kann, dass die Anwendung vom Autor seines Vertrauens stammt und nicht von einem dritten nachträglich verändert wurde.

Erstelle ein Zertifikat folgendermaßen:

Datei/ Adobe Air Einstellungen/ Signatur / Zertifikat / Erstellen
alles ausfüllen und abspeichern

Nun kann man auf dieses Zertifikat für verschiedene Adobe Air Anwendungen nutzen, indem man es auswählt

Datei/ Adobe Air Einstellungen/ Signatur / Zertifikat / durchsuchen

Icon

Erzeuge eine png Grafik, die als Icon dienen soll in folgenden Größen:

16x16, 32x32, 48x48, 128x128

Wähle in den Adobe Air Einstellungen unter Icon die Icons aus

Veröffentlichen

Nachem man alle Einstellungen vorgenommen hat, geht man in den Adobe Air Einstellungen auf Veröffentlichung, um eine Adobe Air Datei zu erzeugen.

Air Events und Functions

schließen der Air Anwendung Hilfe Adobe

Events für Air siehe diesen Tipp

NativeApplication.nativeApplication.exit();

Air für Mobile

Wenn man eine App für ein Android oder iOS Smartphone erstellen will, wählt man diese Option beim Erstellen einer neuen Datei in Animate CC aus.

Es gibt 2 Möglichkeiten. Air ist in der App integriert (höhere Dateigröße) oder Air ist vorinstalliert. Das wird unter den "Einstellungen angegeben".

Richtiger Treiber

Man kann eine App direkt auf dem Smartphone testen. Dazu muss auf dem Rechner der richtige Treiber installiert sein. "Motorola Motorola Device Manger"

Eventuell bekommt man beim Anschluss des Handys eine Meldung im Handy, hier kann man dann auswählen, ob Dateien aufs Handy geladen werden dürfen. Eventuell die obere Leiste des Smartphones nach unten ziehen.

Entwickleroptionen freischalten

Öffnet zunächst die "Einstellungen" eures Geräts und scrollt dann zum Menü "Geräteinformationen" oder "Über das Telefon/Tablet". Bei einigen Herstellern müsst ihr dann noch auf "Softwareinfo" oder ähnlich tippen.

Schließlich gelangt ihr zu dem Punkt "Buildnummer". Tippt solange nacheinander darauf, bis die Meldung "Der Entwicklermodus wurde aktiviert" oder ähnlich erscheint.

USB-Debugging aktivieren

Anschließend navigiert ihr zurück in die Einstellungen, wo ihr jetzt den Punkt "Entwickleroptionen" findet.

Innerhalb der Entwickleroptionen findet ihr die Option "USB-Debugging". Legt den Schieberegler beziehungsweise setzt einen Haken an die Option, um das Ganze zu aktivieren. Bestätigt abschließend mit "OK".

Nachdem man mit der Testerei fertig ist sollte man diese Optionen wieder deaktivieren, um Sicherheitslücken zum vermeiden.

Testen auf dem Smartphone

Wenn ihr eine Anwendung erstellt habt, speichert diese ab, wählte unter

Steuerung, Film testen , auf Gerät über USB, Gerätenr.

First Try

Es folgt eine einfach Air Anwendung, welche das Dateisystem anzeigt.

Erstellen Sie ein neue Air Datei in Flash mit Datei / Neu / Air Datei
Speichern Sie die Datei ab.

Fügen Sie aus dem Komponentenfenster eine Listkomponente in die Bibliothek ein.

Erstellen Sie eine neue Klassendatei mit Namen: FirstTry und fügen Sie den Namen im Eigenschaftenfenster der fla Datei ein.

package 
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import fl.controls.List;
	import fl.data.DataProvider;
	import flash.filesystem.File;
	import flashx.textLayout.elements.ListElement;
	

	//File Class importieren
	public class FirstTry extends MovieClip
	{
		private var _list:List;

		public function FirstTry()
		{
			_list = new List();
			addChild(_list);

			_list.addEventListener(MouseEvent.DOUBLE_CLICK, clickHandler);

			_list.width = 550;
			_list.height = 400;

			//Name von Datei oder Vezeichnis anzeigen
			_list.labelField = "name";

			//Desktopverzeichnis des Benutzers anzeigen
			_list.dataProvider = new DataProvider(File.desktopDirectory.getDirectoryListing());
		}

		private function clickHandler(evt:MouseEvent):void
		{
			//Ist das Verzeichnis ausgewählt?
			if (_list.selectedItem.isDirectory)
			{
				//Liste aktualisieren
				_list.dataProvider = new DataProvider(_list.selectedItem.getDirectoryListing());
			}

		}
	}
}

Fenster

Jede Air Anwendung hat mindestens ein Fenster, welches automatisch erstellt wird.
Man kann jedoch mehrere Fenster anlegen. Dazu sind folgende Klassen wichtig:

flash.desktop.NativeApplictation
flash.display.NativeWindow

Jede Air Anwendung besitzt eine einzige Instanz von NativeApplication, die automatisch erzeugt wird. Über die statische Eigenschaft NativeApplication.nativeApplication erhält man Zugang darauf.

Jedes Fenster in einer Airanwendung ist ein NativeWindow Objekt. Das erste Fenster wird automatisch erzeugt. Alle weiteren Fenster müssen programmatisch erzeugt werden. Bevor man ein NativeWindow Objekt erzeugt, muss man ein flash.display.NativeWindowInitOptions Objekt erstellen. Der Konstruktor von NativeWindow benötigt dieses NativeWindowInitOptions Objekt. Im NativeWindowInitOptions Objekt werden ein paar Anfangsparameter bestimmt, die die Art des Fensters definieren.

NativeWindowsInitOptions Parameter

Nachdem man ein flash.display.NativeWindowInitOptions erstellt hat, kann man dieses im Konstruktor des flash.display.NativeWindow aufrufen. Das Fenster erscheint jedoch erst, wenn man es mittels activate() aufruft.

package 
{
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;

	public class Example extends MovieClip
	{

		public function Example()
		{
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			var window:NativeWindow = new NativeWindow(options);
			window.width = 300;
			window.height = 200;
			window.activate();
		}

	}

}

Inhalte dem Fenster hinzufügen

Ein Fenster ist eigentlich kein Anzeigenobjekt, sondern es verwaltet Anzeigenobjekte über seine Eigenschaft stage. Diese Eigenschaft verweist auf den Anzeigenobjekt-Container flash.display.Stage. Somit kann man mit addChild() und den anderen Methoden Anzeigenobjekte hinzufügen und verwalten.

myWindow.stage.addChild(myDisplayObject);

 
package 
{
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.Shape;
	import flash.display.Graphics;



	public class Example extends MovieClip
	{

		public function Example()
		{
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			var myWin:NativeWindow = new NativeWindow(options);
			myWin.width = 300;
			myWin.height = 100;

			var kreis:Shape = new Shape();
			kreis.graphics.beginFill(0x5500ff);
			kreis.graphics.drawCircle(10,10,50);
			myWin.stage.addChild(kreis);
			myWin.activate();

		}

	}

}

Wenn man dieses Beispiel ausprobiert, stellt man fest, dass die Größe des Kreises nicht zur eingestellten Fenstergröße passen kann und auch die Positonierung ist anders als erwartet. Das Fenster skaliert den Inhalt nach Voreinstellung. Man kann das verhindern, indem man die Eigenschaft scaleMode auf NO_SCALE einstellt und außerdem die Ausrichtung auf oben links einstellt.

import flash.display.StageScaleMode;
import flash.display.StageAlign;

myWin.stage.scaleMode = StageScaleMode.NO_SCALE;
myWin.stage.align = StageAlign.TOP_LEFT;

package 
{
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.Shape;
	import flash.display.Graphics;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;



	public class Example extends MovieClip
	{

		public function Example()
		{
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			var myWin:NativeWindow = new NativeWindow(options);
			myWin.width = 300;
			myWin.height = 200;
			
			myWin.stage.scaleMode = StageScaleMode.NO_SCALE;
			myWin.stage.align = StageAlign.TOP_LEFT;

			var kreis:Shape = new Shape();
			kreis.graphics.beginFill(0x5500ff);
			kreis.graphics.drawCircle(50,50,50);
			myWin.stage.addChild(kreis);
			myWin.activate();

		}

	}

}

eigene Fensterklasse

Es macht Sinn sich ein einfache Fensterklasse zu erzeugen, um schnell verschiedene Fenster zu erzeugen und mit Inhalten zu füllen.

package  {
	

	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	
	
	public class StandardWindow extends NativeWindow {

		public function StandardWindow(breite:Number=200, hoehe:Number=200) {
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;		
			super(options);
			width = breite;
			height = hoehe;
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;
			
		}
	}
}

Hier die Dokumentenklasse, in der eine Instanz der selbst erstellten "StandardWindow" Klasse erzeugt wird.

package 
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Graphics;

	public class Example extends MovieClip
	{

		public function Example()
		{

			var myWin:StandardWindow = new StandardWindow(400,200);
			var kreis:Shape = new Shape();
			kreis.graphics.beginFill(0x5500ff);
			kreis.graphics.drawCircle(50,50,50);
			myWin.stage.addChild(kreis);
			myWin.activate();

		}

	}

}

Fenster mit unregelmäßiger Form

Im folgenden Beispiel wird ein Fenster mit unregelmäßigen Formen erstellt. Siehe die Eigenschaften systemChrome und transparent.

Der Hintergrund ist halbtransparent. Die Form besteht aus 2 Rechecken mit 3 abgerundeten Ecken.

package  {
	import flash.display.Sprite;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeWindowSystemChrome;
	
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	
	public class ExampleWindow extends NativeWindow {
		private var backG :Sprite;
 

		public function ExampleWindow() {
					
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.systemChrome = NativeWindowSystemChrome.NONE;
			options.type = NativeWindowType.LIGHTWEIGHT;
			options.transparent = true;
			super(options);
			backG = new Sprite();
			drawBackground(200,200);
			stage.addChild(backG);
			width = 200;
			height = 200;
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;
		}
		
		private function drawBackground (breite:Number, hoehe:Number):void
		{
			backG.graphics.clear();
			backG.graphics.lineStyle(0,0,0);
			backG.graphics.beginFill(0x0000FF, .5);
			backG.graphics.drawRoundRectComplex(0,0, breite, hoehe, 20,20,20,1);
			backG.graphics.beginFill(0xFFFFFF, .8);
			backG.graphics.drawRoundRectComplex(5,5,breite -10, hoehe -10, 20, 20, 20, 1);
			backG.graphics.endFill();
		}

	}
	
}

In der Fla Datei wurde eine Instanz erzeugt und mittels activate() aktiviert:

import flash.desktop.NativeApplication;
var myWin:ExampleWindow = new ExampleWindow();
myWin.activate();

Das Beispiel ist noch nicht komplett, das man hier das Fenster nicht schließen kann. Siehe nächstes Beispiel. Dort werden alle Fenster geschlossen.

Fenster positionieren und ansprechen

Über das NativeApplication-Object, welches automatisch beim Start erstellt wird, erhält man Zugriff auf alle Fenster. Die Eigenschaft mainWindow verweist auf das Hauptfenster. Die Eigenschaft openedWindows enthält ein Array aller geöffneten Fenster.

Mit der Stage Eigenschaft nativeWindow erhält man Zugriff auf ein nativeWindow Objekt.

Mit folgendem Code werden beim Schließen des Hauptfensters, alle dazugehörigen Fenster geschlossen. Die Klasse ExampleWindow wurde im vorigen Kapitel aufgeführt.

import flash.desktop.NativeApplication;

var myWin:ExampleWindow = new ExampleWindow();
myWin.activate();

this.stage.nativeWindow.addEventListener(Event.CLOSING, closeAllWin);

function closeAllWin(evt:Event):void
{
	var allWins:Array = NativeApplication.nativeApplication.openedWindows;
	for (var i:uint = 0; i < allWins.length; i++)
	{
		allWins[i].close();
	}

}

Die Eigenschaft x und y eines NativeWindow Objects definiert die Position auf dem Desktop.
Wenn es sich um eine mit Flex erstellte Window Komponente handelt, muss man sicherstellen, dass das Object vorhanden ist, bevor man die Position per x, y definiert. Das geschieht mit dem EventListener AIREvent.WINDOW_COMPLETE

Auf folgende Weise kann man ein Fenster mittig auf dem Bildschirm positionieren:

import flash.system.Capabilities;

myWin.x = Capabilities.screenResolutionX/2 - myWin.width / 2;
myWin.y= Capabilities.screenResolutionY/2 - myWin.height / 2;

Mit mehreren Bildschirmen arbeiten / Virtueller Desktop

Der Platz aller Monitore wird für Air als virtueller Desktop angesehen. Der einzelne Bildschirm wird durch die Klasse flash.display.Screen repräsentiert. Über die Screen Eigenschaften bounds und visibleBounds vom Typ Rectangle erhält man Infos über die Abmessungen.

Desweiteren liefert die statische Eigenschaft mainScreen einen Verweis auf den Hauptbildschirm und die Eigenschaft screens ein Array aller Bilderschirme.

Screen Referenzen

package 
{

	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeWindowSystemChrome;
	import flash.events.NativeWindowBoundsEvent;
	import flash.display.Screen;

	public class Example extends MovieClip
	{

		public function Example()
		{
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			var win:NativeWindow = new NativeWindow(options);
			win.width = 200;
			win.height = 200;
			win.activate();
			win.addEventListener(NativeWindowBoundsEvent.MOVE, checkMove);
		}
		private function checkMove(evt:NativeWindowBoundsEvent):void
		{
			var window:NativeWindow = evt.target as NativeWindow;
			//Bildschirmüberschneidung
			var screens:Array = Screen.getScreensForRectangle(window.bounds);
			var screen:Screen;
			if (screens.length == 1)
			{
				screen = screens[0];
			}
			else if (screens.length == 2)
			{
				screen = screens[1];
			}
			//Bei 100 Pixel Abstand an den Rand andocken
			if (window.x < screen.bounds.x + 100)
			{
				window.x = screen.bounds.x;
			}
			else if (window.x > screen.bounds.x + screen.bounds.width - window.width -100)
			{
				window.x = screen.bounds.x + screen.bounds.width - window.width;
			}
			if (window.y < screen.bounds.y + screen.bounds.height - window.height - 100)
			{
				window.y = screen.bounds.y;
			}
			else if (window.y > screen.bounds.y + screen.bounds.height - window.height - 100)
			{
				window.y = screen.bounds.y + screen.bounds.height - window.height;
			}

		}

	}

}

Fenster schließen

Ein einmal geschlossenes Fenster lässt sich nicht einfach wieder öffnen. So würde folgender Code zu einem Laufzeitfehler führen.

stage.addEventListener(MouseEvent.CLICK, openWindow);

private function openWindow(evt:MouseEvent):void
{
	win.activate();
}

Man kann stattdessen ein Fenster unsichtbar machen (visible). Doch muss man auch das Standardverhalten außer Kraft setzen und zwar mittels preventDefault();

package  {
	import flash.display.MovieClip;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowType;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class WindowExample extends MovieClip{
		private var win:NativeWindow;

		public function WindowExample() {
			var options:NativeWindowInitOptions  = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			win = new NativeWindow(options);
			win.width = 200;
			win.height = 200;
			win.activate();
			stage.addEventListener(MouseEvent.CLICK, openWindow);
			win.addEventListener(Event.CLOSING, closeWindow);
			
		}
		private function closeWindow(evt:Event):void
		{
			win.visible = false;
			evt.preventDefault();
		}
		private function openWindow(evt:MouseEvent):void
		{
			win.activate();
		}

	}
	
}

Schließen Button

Im folgendem Beispiel habe ich eine Klasse für ein Window erzeugt. Dort befindet sich eine Button Komponenten, welche das Window Objekt schließt. Bedenke, dass man dazu eine Instanz der Button Komponente in der Bibliothek haben muss.

package 
{
	import flash.display.Sprite;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeWindowSystemChrome;
	import flash.display.NativeWindowDisplayState;
	import flash.desktop.NativeApplication;

	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.controls.Button;

	public class ExampleWindow extends NativeWindow
	{
		private var backG:Sprite;


		public function ExampleWindow()
		{

			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.systemChrome = NativeWindowSystemChrome.NONE;
			options.type = NativeWindowType.LIGHTWEIGHT;
			options.transparent = true;
			super(options);
			
			
			backG = new Sprite();
			drawBackground(200,200);
			var my_btn:Button = new Button();
			my_btn.label = "close";
			my_btn.width = 100;
			my_btn.x = 80;
			my_btn.y = 10;
			stage.addChild(backG);
			backG.addChild(my_btn);
			width = 200;
			height = 200;
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;
			my_btn.addEventListener(MouseEvent.CLICK, closeWin);

		}
		

		private function closeWin(evt:MouseEvent):void
		{
			this.close();
		}

		private function drawBackground(breite:Number, hoehe:Number):void
		{
			backG.graphics.clear();
			backG.graphics.lineStyle(0,0,0);
			backG.graphics.beginFill(0x0000FF, .5);
			backG.graphics.drawRoundRectComplex(0,0, breite, hoehe, 20,20,20,1);
			backG.graphics.beginFill(0xFFFFFF, .8);
			backG.graphics.drawRoundRectComplex(5,5,breite -10, hoehe -10, 20, 20, 20, 1);
			backG.graphics.endFill();
		}


	}

}

Alle Fenster schließen

In dieser Klasse werden alle Fenster geschlossen, wenn man das Hauptfenster schließt. Das erste Fenster, des Arrays openedWindows ist immer das Hauptfenster. Auch hier wird wieder eine Buttonkomponente in der Bibliothek benötigt.

package 
{
	import flash.display.Sprite;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeWindowSystemChrome;
	import flash.display.NativeWindowDisplayState;
	import flash.desktop.NativeApplication;

	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.controls.Button;

	public class ExampleWindow extends NativeWindow
	{
		private var backG:Sprite;
		private var allWins:Array;


		public function ExampleWindow()
		{

			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.systemChrome = NativeWindowSystemChrome.NONE;
			options.type = NativeWindowType.LIGHTWEIGHT;
			options.transparent = true;
			super(options);


			backG = new Sprite();
			drawBackground(200,200);
			var my_btn:Button = new Button();
			my_btn.label = "close";
			my_btn.width = 100;
			my_btn.x = 80;
			my_btn.y = 10;
			stage.addChild(backG);
			backG.addChild(my_btn);
			width = 200;
			height = 200;
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;
			my_btn.addEventListener(MouseEvent.CLICK, closeWin);
			allWins = NativeApplication.nativeApplication.openedWindows;
			allWins[0].addEventListener(Event.CLOSING, closeAllWin);

		}


		private function closeWin(evt:MouseEvent):void
		{
			this.close();
		}

		private function drawBackground(breite:Number, hoehe:Number):void
		{
			backG.graphics.clear();
			backG.graphics.lineStyle(0,0,0);
			backG.graphics.beginFill(0x0000FF, .5);
			backG.graphics.drawRoundRectComplex(0,0, breite, hoehe, 20,20,20,1);
			backG.graphics.beginFill(0xFFFFFF, .8);
			backG.graphics.drawRoundRectComplex(5,5,breite -10, hoehe -10, 20, 20, 20, 1);
			backG.graphics.endFill();
		}



		private function closeAllWin(evt:Event):void
		{
			
			for (var i:uint = 0; i < allWins.length; i++)
			{
				allWins[i].close();
			}
		}


	}

}

Anordnung / Reihenfolge der Fenster ändern

Es gibt einige Befehle um die Reihenfolge oder den Z-Index der Fenster zu ändern.

Verschieben

Ein Fenster mit Chrome lässt sich normal verschieben und skalieren, wie man es in Windows oder OS2 gewohnt ist. Bei einem Fenster ohne Chrome, muss man das programmieren, was jedoch in Air sehr einfach ist.

startMove()

Die Methode startMove() kann man mittels eines EventHandlers MOUSE_DOWN aufrufen. Es ist nicht nötig einen MOUSE_UP Event für das Beendigen des Vorgangs zu programieren, da das automatisch beim Maus loslassen passiert. Siehe auch nächstes Codebeispiel.

Skalieren

Das Fenster sendet ein Resize Ereignis, mit dem es seine Größe zurückgibt. Das kann man nutzen, um es beispielsweise neu zu zeichnen. Im folgenden Codesnippet sieht man die beiden Funktionen. Weiter unten das komplette Beispiel.

			//Resizer ist eine selbst erstellte MC-Klasse in der Bibliothek
			var resizer:Resizer = new Resizer();
			stage.addChild(_resizer);
			resizer.addEventListener(MouseEvent.MOUSE_DOWN, startResizeWin);
			addEventListener("resizing", resizingHandler);
			

		private function resizingHandler(evt:Event):void
		{
			//drawBackground ist eine Funktion die den Hintergrund neu zeichnet
			drawBackground(width, height);
			resizer.x = width - 20;
			resizer.y = height - 20;
			
		}
		private function startResizeWin(evt:MouseEvent):void
		{
			this.startResize(NativeWindowResize.BOTTOM_RIGHT);
		}

import flash.display.NativeWindowResize;

Im folgendem Beispiel müssen ein paar Klassen in der Bibliothek der fla vorliegen. Es sind Movieclips und ein SimpleButton mit Export für Actionscript und folgenden Klassennamen.

WinBack ein Movieclip mit einer Hintergrundgrafik

Resizer ein Movieclip mit 2 Bildern in der Zeitleiste. Im ersten Bild die Action stop(); außerdem befindet sich im ersten Bild ein Rechteck mit transparenter Farbe (alpha = 0). Im zweiten Bild befindet sich das gleiche transparente Rechteck und eine Pfeilgrafik, als Skaliersymbol.

CloseBtn ein SimpleButton mit einem x für Close.

package 
{
	import flash.display.Sprite;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeWindowSystemChrome;
	import flash.display.NativeWindowDisplayState;
	import flash.desktop.NativeApplication;
	import flash.display.NativeWindowResize;

	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.controls.Button;

	public class ExampleWindow extends NativeWindow
	{
		private var backG:WinBack;
		private var allWins:Array;
		private var scaleRect:Resizer;
		private var closeBtn:CloseBtn;


		public function ExampleWindow()
		{

			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.systemChrome = NativeWindowSystemChrome.NONE;
			options.type = NativeWindowType.LIGHTWEIGHT;
			options.transparent = true;
			super(options);


			backG = new WinBack();
			backG.width = 200;
			backG.height = 200;
			
			closeBtn = new CloseBtn();
			closeBtn.x =  backG.width - closeBtn.width - 5;
			closeBtn.y = 5;;
			stage.addChild(backG);
			stage.addChild(closeBtn);
			width = 200;
			height = 200;
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;
			
			scaleRect = new Resizer();
			scaleRect.x=180;
			scaleRect.y =180;
			stage.addChild(scaleRect);
			scaleRect.addEventListener(MouseEvent.MOUSE_DOWN, startResizeWin);
			scaleRect.addEventListener(MouseEvent.MOUSE_OVER, touchMe);
			scaleRect.addEventListener(MouseEvent.MOUSE_OUT, touchOff);
			addEventListener("resizing", resizingHandler);
			
			closeBtn.addEventListener(MouseEvent.CLICK, closeWin);
			allWins = NativeApplication.nativeApplication.openedWindows;
			allWins[0].addEventListener(Event.CLOSING, closeAllWin);
			backG.addEventListener(MouseEvent.MOUSE_DOWN, moveWin);			
		}



		private function moveWin(evt:MouseEvent):void
		{
			this.startMove();
		}
		
		
		private function resizingHandler(evt:Event):void
		{
			backG.width = width;
			backG.height = height;
			scaleRect.x = width - 20;
			scaleRect.y = height - 20;
			closeBtn.x =  backG.width - closeBtn.width - 5;
			
		}
		private function startResizeWin(evt:MouseEvent):void
		{
			this.startResize(NativeWindowResize.BOTTOM_RIGHT);
			evt.currentTarget.gotoAndStop(2);
		}
		
				private function closeWin(evt:MouseEvent):void
		{
			this.close();
		}


		private function closeAllWin(evt:Event):void
		{
			
			for (var i:uint = 0; i < allWins.length; i++)
			{
				allWins[i].close();
			}
		}
		private function touchMe(evt:MouseEvent):void
		{
			evt.currentTarget.gotoAndStop(2);
		}
		private function touchOff(evt:MouseEvent):void
		{
			evt.currentTarget.gotoAndStop(1);
		}

	}

}

Vollbildmodus / fullScreen

Mit der Stage Eigenschaft StageDisplayState kann man fullScreen und Fenstermodus definieren.

stage.displayState = StageDisplayState.FULL_SCREEN;
stage.displayState = StageDisplayState.NORMAL;

Im folgenden Beispiel müssen 2 Button Instanzen auf der Bühne liegen. Die Instanznamen sind full_btn und normal_btn

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.display.StageDisplayState;
// es müssen 2 Instanzen eines Buttons oder Movieclips auf der Bühne liegen
//Instanznamen: normal_btn und full_btn
normal_btn.visible = false;

full_btn.addEventListener(MouseEvent.CLICK, setFull);
normal_btn.addEventListener(MouseEvent.CLICK, setNormal);

function setFull(evt:MouseEvent):void
{
	stage.displayState = StageDisplayState.FULL_SCREEN;
	full_btn.visible = false;
	normal_btn.visible = true;
}


function setNormal(evt:MouseEvent):void
{
	stage.displayState = StageDisplayState.NORMAL;
	full_btn.visible = true;
	normal_btn.visible = false;
}

Ausrichtung und Skaliermodus

Man kann das Skalieren des Fenster einstellen und auch die Ausrichtung.
Referenzen StageScaleMode Referenzen StageAlign

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

StageScaleMode

StageAlign

Menü

Referenzen NativeMenue Referenzen NativeMenueItem

Menüs können auf Anwendungsebene (0s2) oder Fensterebene (Windows) erscheinen. Beides erfüllt den gleichen Zweck. Außerdem gibt es Popup-Menüs, und Kontextmenüs.

Menü erstellen

import flash.display.NativeMenu;

var myMenue:NativeMenu = new NativeMenu();

Menüelement erstellen und hinzufügen

import flash.display.NativeMenueItem;

var item1:NativeMenuItem = new NativeMenuItem("Beispiel Text");

myMenue.addItem(item1);

oder man gibt die Indexposition an

myMenue.addItemAt(item1, 1);

Trennlinien und Häkchen

Menüpunkte mit Häkchen, die anzeigen, dass der Menüpunkt aktiviert ist, erstellt man, indem man die checked Eigenschaft des NativeMenueItem auf den boolschen Wert true setzt.

myMenuItem.checked = true;

Trennlinien in Menüs sind auch Menüpunkte, deren isSeparator Eigenschaft auf true eingestellt ist.

var line:NativeMenuItem = new NativeMenuItem("", true);

ApplicationMenue / WindowsMenue

Wie anfangs erwähnt können Menüs auf Anwendungsebene oder Fenstereben erstellt werden. Ersteres wird in OS2 benötigt, letzteres in Windows. In einer If-Abfrage stellt man fest, was in Frage kommt und fügt dann das entsprechende Menü hinzu:

			
var mainWindow:NativeWindow = NativeApplication.nativeApplication.openedWindows[0] as NativeWindow;

if (NativeApplication.supportsMenu)
{
	NativeApplication.nativeApplication.menu = mainMenue;
}
else if (NativeWindow.supportsMenu)
{
	mainWindow.menu = mainMenue;
}

Einfaches Menü erstellen

Man erstellt ein NativeMenue
var bearbeiten:NativeMenu = new NativeMenu ;
man erstellt Native MenueItems
var kopieren:NativeMenuItem = new NativeMenuItem("Kopieren");
man hängt die NativeMenueItems an das Menü an.
bearbeiten.addItem(kopieren);

Das ist einfach und braucht nicht weiter erläutert werden. Allerdings ist damit die Sache noch nicht erledigt, denn das DisplayObject NativeMenue wurde noch nicht der Anzeigenliste hinzugefügt.

Im Beispiel sieht man es wurde noch ein weiteres NativeMenue erstellt
var mainMenue:NativeMenu = new NativeMenu ;
an welches das andere Menü als Submenue hinzugefügt wurde. Dort wird auch der Anzeigenname zugewiesen.
mainMenue.addSubmenu(bearbeiten,"Bearbeiten");

Das mainMenue wird als ApplicationMenue oder WindowsMenue hinzugeüft. Siehe dazu das vorige Thema.

package 
{
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeMenu;
	import flash.display.NativeMenuItem;
	import flash.desktop.NativeApplication;
	import flash.events.Event;

	public class Menue1 extends MovieClip
	{
		private var _windowsMenu:NativeMenu;

		public function Menue1()
		{
			var mainMenue:NativeMenu = new NativeMenu  ;
			var bearbeiten:NativeMenu = new NativeMenu  ;
			var kopieren:NativeMenuItem = new NativeMenuItem("Kopieren");
			var einfuegen:NativeMenuItem = new NativeMenuItem("Einfügen");
			bearbeiten.addItem(kopieren);
			bearbeiten.addItem(einfuegen);
			mainMenue.addSubmenu(bearbeiten,"Bearbeiten");

			var mainWindow:NativeWindow = NativeApplication.nativeApplication.openedWindows[0] as NativeWindow;

			if (NativeApplication.supportsMenu)
			{
				NativeApplication.nativeApplication.menu = mainMenue;
			}
			else if (NativeWindow.supportsMenu)
			{
				mainWindow.menu = mainMenue;
			}

		}

	}

}

Select Listener

Das NativeMenueItem Objekt sendet ein Select Ereignis vom Typ flash.events.Event, wenn man es ausgewählt hat.
Die target Eigenschaft verweist auf das ausgewählte NativeMenueItem.
Ein NativeMenueItem hat eine data Eigenschaft, mit dem man sinnvolle Anwendungen erstellen kann.

  	var newWindow:NativeMenuItem = new NativeMenuItem("Neues Fenster");
	newWindow.addEventListener(Event.SELECT, selectHandlder);
	
		private function selectHandler(evt:Event):void
		{
			if(evt.target.label == "Neues Fenster") anyfunction();
		}
  

Menü mit Ereignissen

Das folgende Beispiel wird später noch etwas komplexer angelegt. Siehe Kommentare

 package 
{
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeMenu;
	import flash.display.NativeMenuItem;
	import flash.desktop.NativeApplication;
	import flash.events.Event;

	public class Menue2 extends MovieClip
	{
		private var _windowsMenu:NativeMenu;

		public function Menue2()
		{
			//Hauptmenueleiste ein NativeMenue erstellen
			var mainMenue:NativeMenu = new NativeMenu();
			
			//erstes NativeMenue mit Menübefehlen erstellen
			var dateiMenue:NativeMenu = new NativeMenu();
			var speichern:NativeMenuItem = new NativeMenuItem("speichern");
			var schliessen:NativeMenuItem = new NativeMenuItem("schließen");			
			dateiMenue.addItem(speichern);
			dateiMenue.addItem(schliessen);
			
			//zweites NativeMenue mit Menübefehlen erstellen;
			_windowsMenu = new NativeMenu();
			var newWindow:NativeMenuItem = new NativeMenuItem("neues Fenster");
			var line:NativeMenuItem = new NativeMenuItem("",true);		
			_windowsMenu.addItem(newWindow);
			_windowsMenu.addItem(line);
			
			//Menüpunkten Eventlistener zuweisen
			schliessen.addEventListener(Event.SELECT, selectHandler);
			newWindow.addEventListener(Event.SELECT, selectHandler);
			
			//Die beiden Menues dem Hauptmenü als submenues hinzufügen
			mainMenue.addSubmenu(dateiMenue, "Datei");
			mainMenue.addSubmenu(_windowsMenu, "Fenster");
			
			//Procedere für OS2 und Windows um das Hauptmenue hinzufügen
			var mainWindow:NativeWindow = NativeApplication.nativeApplication.openedWindows[0] as NativeWindow;

			if (NativeApplication.supportsMenu)
			{
				NativeApplication.nativeApplication.menu = mainMenue;
			}
			else if (NativeWindow.supportsMenu)
			{
				mainWindow.menu = mainMenue;
			}
			//mainWindow lauscht auf Close Ereignis, closeAll siehe unten
			mainWindow.addEventListener(Event.CLOSE, closeAll);

		}
		
		
		
		//die Funktion für die MenueItems

		private function selectHandler(evt:Event):void
		{
			if (evt.target.label == "schließen")
			{
				closeAll();
			}
			if(evt.target.label == "neues Fenster")
			{
				newWindow();
			}

		}
		//die closeAll function
		
		private function closeAll(evt:Event = null):void
		{
			var windows:Array = NativeApplication.nativeApplication.openedWindows;
			for(var i:uint = 0; windows.length; i++)
			{
				//windows[i].removeEventListener(Event.CLOSE, closeHandler);
				windows[i].close();
			}
		}
		
		//neues Fenster Funktion
		private function newWindow():void
		{
			var windowTitle:String = "Fenster"+ NativeApplication.nativeApplication.openedWindows.length;
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			var window:NativeWindow = new NativeWindow(options);
			window.width = 300;
			window.height = 200;
			window.title = windowTitle;
			window.activate();
			
		}

	}
}
 

Menü erweitert

Das nächste Beispiel ist eine Erweiterung des letzten Beispiels. Hier kann man über einen Menübefehl ein neues Fenster erstellen. Alle neuen Fenster werden mit Events versehen. Zu jedem neuen Fenster gibt es im windowsMenu des Hauptfensters einen neuen Menüpunkt ( menuItem). Dieser erhält ein Häkchen, wenn das Fenster aktiv ist. Das Fenster kann über den Menüeintrag aktiviert werden oder indem man das Fenster direkt anklickt. Damit der Menüeintrag erkennt, welches Fenster ihm zugewiesen wurde, wird das Fenster der data Eigenschaft des menuItems zugewiesen.

Da es sich um ein UtilityFenster handelt, kann man es standardmäßig schließen. Wenn ein Fenster geschlossen wird, werden die damit verbunden EventListener gelöscht und der damit verbunden Menüeintrag entfernt.

	package 
{
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.NativeMenu;
	import flash.display.NativeMenuItem;
	import flash.desktop.NativeApplication;
	import flash.events.Event;

	public class Menue2 extends MovieClip
	{
		private var windowsMenu:NativeMenu;

		public function Menue2()
		{
			//Hauptmenueleiste ein NativeMenue erstellen
			var mainMenue:NativeMenu = new NativeMenu();
			
			//erstes NativeMenue mit Menübefehlen erstellen
			var dateiMenue:NativeMenu = new NativeMenu();
			var speichern:NativeMenuItem = new NativeMenuItem("speichern");
			var schliessen:NativeMenuItem = new NativeMenuItem("schließen");			
			dateiMenue.addItem(speichern);
			dateiMenue.addItem(schliessen);
			
			//zweites NativeMenue mit Menübefehlen erstellen;
			windowsMenu = new NativeMenu();
			var newWindow:NativeMenuItem = new NativeMenuItem("neues Fenster");
			var line:NativeMenuItem = new NativeMenuItem("",true);		
			windowsMenu.addItem(newWindow);
			windowsMenu.addItem(line);
			
			//Menüpunkten Eventlistener zuweisen
			schliessen.addEventListener(Event.SELECT, selectHandler);
			newWindow.addEventListener(Event.SELECT, selectHandler);
			
			//Die beiden Menues dem Hauptmenü als submenues hinzufügen
			mainMenue.addSubmenu(dateiMenue, "Datei");
			mainMenue.addSubmenu(windowsMenu, "Fenster");
			
			//Procedere für OS2 und Windows um das Hauptmenue hinzufügen
			var mainWindow:NativeWindow = NativeApplication.nativeApplication.openedWindows[0] as NativeWindow;

			if (NativeApplication.supportsMenu)
			{
				NativeApplication.nativeApplication.menu = mainMenue;
			}
			else if (NativeWindow.supportsMenu)
			{
				mainWindow.menu = mainMenue;
			}
			//mainWindow lauscht auf Close Ereignis, closeAll siehe unten
			mainWindow.addEventListener(Event.CLOSE, closeAll);

		}
		
		
		
		//die Funktion für die MenueItems

		private function selectHandler(evt:Event):void
		{
			if (evt.target.label == "schließen")
			{
				closeAll();
			}
			if(evt.target.label == "neues Fenster")
			{
				newWindow();
			}

		}
		//die closeAll function
		
		private function closeAll(evt:Event = null):void
		{
			var windows:Array = NativeApplication.nativeApplication.openedWindows;
			for(var i:uint = 0; i < windows.length; i++)
			{
				windows[i].removeEventListener(Event.CLOSE, closeHandler);
				windows[i].close();
			}
		}
		
		//neues Fenster Funktion
		
		private function newWindow():void
		{
			var windowTitle:String = "Fenster "+ NativeApplication.nativeApplication.openedWindows.length;
			var options:NativeWindowInitOptions = new NativeWindowInitOptions();
			options.type = NativeWindowType.UTILITY;
			var window:NativeWindow = new NativeWindow(options);
			window.width = 300;
			window.height = 200;
			window.title = windowTitle;
			window.addEventListener(Event.ACTIVATE, activateHandler);
			window.addEventListener(Event.CLOSE, closeHandler);
			
			var menuItem:NativeMenuItem = new NativeMenuItem(windowTitle);
			menuItem.data = window;
			menuItem.addEventListener(Event.SELECT, selectWindowHandler);
			windowsMenu.addItem(menuItem);
												
			window.activate();
			
		}
		
		//in der Funktion newWindow wurde 3 neue Eventlistener hinzugefügt, es folgen die Funktionen
		private function selectWindowHandler(evt:Event):void
		{
			evt.target.data.activate();	
		}
		private function activateHandler(evt:Event):void
		{
			var item:NativeMenuItem;
			for(var i:Number = windowsMenu.numItems -1; i >= 0; i--)
			{
				item = windowsMenu.getItemAt(i);
				//wenn evt.target dem fenster des angklickten item entspricht wird true geliefert
				//siehe zeile menuItem.data = window
				item.checked = (item.data == evt.target);
			}
		}
		private function closeHandler(evt:Event):void
		{
			var item:NativeMenuItem;
			for(var i:Number = 0; i < windowsMenu.numItems; i++)
			{
				item = windowsMenu.getItemAt(i);
				if(item.data == evt.target)
				{
					windowsMenu.removeItem(item);
					break;
				}
			}
		}
		
	}
}

Kontext Menü

Als Kontextmenü bezeichnet man die Menüs, welche man mit rechter Maustaste aufruft. Im folgenden Beispiel gibt es eine händisch auf die Bühne gezogene Instanz eines Movieclips mit Instanznamen kopf_mc. Dieser Instanz wird ein Kontextmenü hinzugefügt.

package  {
	import flash.display.MovieClip;
	import flash.display.NativeMenu;
	import flash.display.NativeMenuItem;
	
	public class Menue3 extends MovieClip{
		
		public function Menue3() {
			
			var contMenu:NativeMenu = new NativeMenu();
			var item:NativeMenuItem = new NativeMenuItem("Kastenkopp");					
			contMenu.addItem(item);
			kopf_mc.contextMenu = contMenu;
			
		}

	}
	
}

Pop up Menüs

Popup Menüs ruft man mit linker Maustaste auf. Das Menü erscheint und bleibt stehen, so dass man aus dem Menü Menüpunkte anklicken kann. Es ist nicht erforderlich eine EventListener zu programmieren, der das Popup Menü schließt, denn es wird geschlossen sobalt man irgendwo außerhalb klickt.

Auch im folgenden Beispiel muss eine MC-Instanz auf der Bühne liegen, die den Instanznamen kopf_mc hat.

package  {
	import flash.display.MovieClip;
	import flash.display.NativeMenu;
	import flash.display.NativeMenuItem;
	import flash.events.MouseEvent;
	
	public class Menue4 extends MovieClip{
		var popMenu:NativeMenu;
		

		public function Menue4() {
			
			 popMenu = new NativeMenu();
			var item1:NativeMenuItem = new NativeMenuItem("zurück");
			var item2:NativeMenuItem = new NativeMenuItem("weiter");
			var item3:NativeMenuItem = new NativeMenuItem("speichern");
			var item4:NativeMenuItem = new NativeMenuItem("drucken");
			popMenu.addItem(item1);
			popMenu.addItem(item2);
			popMenu.addItem(item3);
			popMenu.addItem(item4);
			kopf_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMenu);
			
		}
		
		private function showMenu(evt:MouseEvent):void
		{
			popMenu.display(stage, mouseX, mouseY);
		}

	}
	
}