Hier ein kurzer Tipp, der sehr nützlich sein kann wenn man eine HTML/CSS Website baut die auch ein paar Flash-Elemente beeinhalten soll. Manchmal kommt es nämlich vor, dass sich die Größe des Flash´s verändern soll und die ist leider durch die Größe des HTML-Containers in dem das Flash eingebunden ist begrenzt. Mit ein wenig Java- und ActionScript kann man das Problem aber ganz leicht beheben.

Dieser Code muss in das HTML oder in eine von extern eingebundene JavaScript Datei:

1
2
3
4
5
6
7

<script type="text/javascript">
    function containerAnpassen(id, width, height) {
	    var container = document.getElementById(id);
	    container.style.width = width+'px';
	    container.style.height = height+'px';
    }
</script>

Diese 3 Zeilen JavaScript sorgen dafür, dass das HTML-Element mit der übergebenen ID die ebenfalls übergebene neuen Werte für Breite und Höhe bekommt. Bindet man sein SWF jetzt mit 100% Höhe und Breite ein (z.B. mit SWFObject 2.0) ist das Flash immer so groß wie der Container und wird somit mitskaliert

In Flash muss man dann diese JavaScript Funktion dann nur noch aufrufen, und das funktioniert folgendermaßen:

ActionScript 3:

1

    ExternalInterface.call("containerAnpassen", "container", 300, 200);

Mit der Funktion ExternalInterface.call werden zuerst der Funktionsname im Javascript und anschließend zu übergebende Parameter übergeben (in diesem Fall den Namen des Flashcontainers, sowie die neuen Angaben für Höhe und Breite).

Wer das ganze mal in Aktion sehen will: Demo
Und hier gibts ein Codebeispiel zum Download

Flash CS5 steht in den Startlöchern. Die Beta soll innerhalb der nächsten Wochen veröffentlicht werden und vermutlich folgt irgendwann nächstes Jahr die neue Creative Suite. Das Top- (und wohl auch meistgehypte) Feature der neuen Flash Version ist die Möglichkeit Programme und Spiele für iPhone und iPod touch zu entwickeln. Lee Brimelow hat auf gotoandlearn.com ein 30-minütiges Video über weitere neue Features vorgestellt, die auch nicht ganz ohne sind. Für alle die keine Zeit/Lust haben sich das Video anzugucke gibts hier eine kleine Übersicht inklusive einer kurzen (subjektiven) Nützlichkeitsbewertung von mir:

Allgemein

• Der Splash-Screen beim Start überdeckt nicht den Rest. Man kann während Flash lädt in anderen Programmen weiterarbeiten.
• Der Komponenten-Inspektor fällt weg. Eigenschaften von Standartkomponenten werden statt dessen rechts in der Sidebar angezeigt.
• Das Farbauswahl-Bedienfeld wurde überarbeitet.
• Es gibt eine „SWF-History“ die den Veröffentlichungszeitpunkt und die Dateigröße jeder veröffentlichten swf anzeigt. Dateigrößenveränderungen können so gut nachvollzogen werden und es gibt eine Warnung wenn diese sich mehr als verdoppelt. Praktisch für Bannerentwicklung o.ä. wo man in der kb-Anzahl meistens eingeschränkt ist.

Video

• Es gibt ein paar neue Skins für die FLVPlayback-Komponente.
• Interaktion mit eingebetteten Videos ist auch auf der Bühne möglich und können beispielsweise dort abgespielt werden.
• ActionScript CuePoints können über ein Bedienfeld hinzugefügt werden.

Schrifteinbettung

• Es gibt ein neues Bedienfeld für die Schrifteinbettung: In diesem werden alle Schriften die irgenwdo im Flashprojekt eingebettet sind angezeigt und man kann bequem alle Optionen dafür einstellen. Die fieberhafte Suche nach Textfeldern mit eingebetteten Schriften fällt also demnächst weg :-) Über das Bedienfeld lassen sich auch neue Schriftarten einbetten.

Dateiformat

• Es gibt ein neues Dateiformat: unkomprimiertes xfl. Alle Daten werden auf XML-Basis in einem Ordner gespeichert. Dateien aus der Bibliothek liegen als Rohdaten vor. Der große Vorteil: Die XML-Daten können in eine Versionkontrolle integriert werden.

Coding

• Snippet-Bedienfeld mit vielen vordefinierten Best-Practise-Snippets für verschiedene Anwendungsfälle.
• Code-Hinting und Code-Completion für eigene Klassen. Endlich!
• Das Compiler-Errors Bedienfeld wurde leicht überarbeitet
• Flash-Builder Integration: Flash Projekte können im Flash Builder programmiert werden. Filme können aus FlashBuilder in Flash Professional veröffentlicht, getestet und debuggt werden.

Deko-Werkzeug

• eigene Brushes können mit JavaScript erstellt werden. Nutzt das irgendjemand?

Veröffentlichen

• Werden SWFs als HTML veröffentlicht, wird standartmäßig SWF-Object2 als Einbindungsmethode verwendet.

Text Layer Framework (TLF)

• mehrere Textcontainer können ähnlich wie in InDesign miteinander verbunden werden. Dieser bleibt auch über alle verlinkten Textfelder hinaus markierbar.
• mehrspaltiger Text
• japanischer und arabischer Text wird nativ unterstützt (Leserichtung oben nach unten und links nach rechts)

Im letzten Berufsschulblock hatten wir mal wieder eine Projektaufgabe: Erstellung einer interaktiven Infografik. Und weil ich bei diesem Projekt für die Umsetzung mit Flash und AS3 zuständig war, will ich das hier mal kurz vorstellen.

Der Bene hat dazu folgendes ins Konzept geschrieben:

„Das Internet ist ein stetig wachsendes und lebendig wirkendes Medium. Genau das macht sich unsere animierte Infografik zu nutze. In Form von „Bubbles“ und „Partikeln“ wird ein Universum geschaffen was dem Internet gleicht.

Nachdem man sich durch betätigen des Power-Buttons mit dem Internet verbunden hat taucht man ein in die Digitale Welt des World Wide Web. Die Partikel im Hintergrund sind ständig in Bewegung und visualisieren das zu Anfang genannte Prinzip. Die großen Bubbles zeigen die eigentliche Thematik, Funktionsweise und den Zusammenhang des Internets auf. Vom PC aus mit dem Internet-Server verbunden ist alles mit einander vernetzt. So „kleben“ Nachrichten, E-Mail, Foren, Shops, Datenbanken und das Online-Banking am Server.

Für eine genauere Detailansicht reicht ein Klick auf die jeweiligen Bubbles. Was folgt ist das alt bekannte Prinzip: Aktion durch Reaktion. Durch Aktion des Users formieren sich die Partikel zu dem jeweilige Icons. In einer Detailansicht werden dann genauere Informationen der Bubbles aufgezeigt.”

Tja, dem ist nichts mehr hinzuzufügen oder?
Hier kann man die Infografik anschauen

Und hier gibts einen kleinen Vorgeschmack:

Events sind ein nützliches Werkzeug in ActionScript3 um Programmabläufe erst zu einem bestimmten Zeitpunkt auszuführen. Ein einfaches Beispiel: Der Benutzer klickt auf einen Button und ein Link wird geöffnet. Für diesen und viele andere Fälle hat Flash voreingestellte Events. Irgendwann, gerade wenn man eigene Klassen oder sogar ein eigenes Framework entwickelt, kommt man aber an den Punkt wo man denkt „Hmm, dafür wär jetzt ein eigenes Event echt praktisch”. Das ist zum Glück kein Problem - wenn man weiß wie´s geht:

Download der Beispieldateien

Zuerst die Basics: Wie werden Events verwendet?

Ein voreingestelltes Event zu nutzen ist ganz einfach. Bleiben wir bei dem Beispiel mit dem Button: Sobald der Nutzer auf die Schaltfläche „openLink_btn" klickt, soll etwas passieren. Das ganze funktioniert so:

1
2
3
4
5
6
7
8

// EventListener
openLink_btn.addEventListener(MouseEvent.CLICK, machWas);
 
// Eventfunktion
function machWas() {
    // Rufe eine URL auf
    navigateToURL(new URLRequest("http://www.thomas-aull.de", "_self"));
}

Wir sagen einem EventListener, dass er die ganze Zeit auf den Button „openLink_btn” horchen soll, ob der Nutzer mit der Maus draufklickt. Tritt dieser Fall ein, soll er die Funktion „machWas” aufrufen.

Jetzt geht´s ans Eingemachte: eigene Events schreiben...

...was schon ein wenig schwieriger ist. Ein wenig Grundwissen in Objektorientierter Programmierung kann nicht schaden um den kompletten Vorgang zu verstehen.

Zuerst erzeugen wir unsere eigene Eventklasse, die die Flash-Eventklasse erweitert. Grob gesagt: Wir nehmen die Eventklasse von Flash und packen unseren Code einfach dazu. Dieser Code muss in einer eigenen .as-Datei mit dem Namen „MeinEvent.as" abgelegt werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package {
        // Import der Flash Eventklasse
	import flash.events.*;
 
	public class MeinEvent extends Event {
 
                // Eventarten, bekanntes Beispiel: MouseEvent.CLICK
		public static const TESTEREIGNIS:String = "TESTEREIGNIS";
 
                // Variable in denen wir zusätzliche Eventdaten speichern können
		public var data;
 
                // Der Konstruktor
		public function MeinEvent(type:String, data) {
			super(type);
			this.data = data;
		};
	};
};

Als nächstes erzeugen wir eine neue Flash-Datei (AS3) und packen folgenden Code in das erste Schlüsselbild:

1
2
3
4
5
6
7
8
9
10
11
12
13

// Wir sagen Flash, dass wir unsere Klasse "MeinEvent" benutzen wollen
import MeinEvent;
 
// Wir fügen einen EventListener wie im Beispiel oben hinzu
addEventListener(MeinEvent.TESTEREIGNIS, machWas)
 
// Hier feuern wir unser Event ab
dispatchEvent(new MeinEvent(MeinEvent.TESTEREIGNIS, null));
 
// Die Funktion die dann durch den EventListener aufgerufen wird
function machWas(e:MeinEvent) {
    trace("Das Event funktioniert!");
};

Zuerst sagen wir Flash, dass wir unsere Klasse "meinEvent" verwenden wollen. Anschließend schreiben wir einen normalen EventListener wie im MouseEvent-Beispiel oben. Wir sagen hier aber, dass er auf das Event „MeinEvent” und den Eventtyp „TESTEREIGNIS” hören soll. Tritt dieser Fall ein, soll er die Funktion „machWas” aufrufen.

Weil jetzt aber niemand außer uns weiß, wann das Event genau aufgerufen werden soll, müssen wir das selbst machen. Das ist der sogenannte „Event-Dispatcher”. Der sagt, dass bitteschön jetzt unser Event „MeinEvent” mit dem Eventtyp „TESTEREIGNIS” abgefeuert werden soll. Wir wollen keine weiteren Eventdaten übergeben (= null).

Wenn wir den Film jetzt starten, bekommen wir einen trace mit dem Inhalt "Das Event funktioniert!". Wichtig dabei ist, dass alle Dateien im gleichen Verzeichnis liegen!

Und jetzt?

Das war die eigentliche Grundlogik. Wir können unsere Events aber noch um folgende Punkte ergänzen:

Mehrere Eventtypen verwenden: Um weitere Eventtypen verwenden zu können, müssen wir einfach unsere Eventklasse um die entsprechenden Variablen erweitern. Wenn wir anstatt des Eventtyps „TESTEREIGNIS” auch noch „USERINTERKATION” und „BILD_GELADEN” abfragen möchten, hinterlegen wir diese einfach in unserer Klasse:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

package {
        // Import der Flash Eventklasse
	import flash.events.*;
 
	public class MeinEvent extends Event {
 
                // Eventarten, bekanntes Beispiel: MouseEvent.CLICK
		public static const TESTEREIGNIS:String = "TESTEREIGNIS";
                public static const USERINTERAKTION:String = "USERINTERAKTION";
                public static const BILD_GELADEN:String = "BILD_GELADEN";
 
                // Variable in denen wir zusätzliche Eventdaten speichern können
		public var data;
 
                // Der Konstruktor
		public function MeinEvent(type:String, data) {
			super(type);
			this.data = data;
		};
	};
};

Eventdaten übergeben: Häufig ist es auch erforderlich an das Event verschiedene Daten anzuhängen die für die Weiterverarbeitung nötig sind. In unsere Eventklasse haben wir dafür schon die nötige Variable „data” hinterlegt. Wir müssen im Dispatcher einfach noch die Daten übergeben. In unserer Eventfunktion können wir diese Daten dann auslesen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
// EventListener
addEventListener(MeinEvent.TESTEREIGNIS, machWas)
 
// Dispatcher mit Eventdaten füttern...
var data:Object = new Object;
data.name = "Max Mustermann";
data.alter = 21;
// ...und abfeuern
dispatchEvent(new MeinEvent(MeinEvent.TESTEREIGNIS, data));
 
// Eventfunktion: Daten auslesen
function machWas(e:MeinEvent) {
    trace(e.data.name);
    trace(e.data.alter);
};

Download der Beispieldateien