Für einen Messestand auf der dmexco 2009 habe ich im Auftrag von margo® drei Flash-Animationen für Strör Interactive sowie BusinessAd programmiert. Besonderheit war die Entwicklung einer zwei Screen Animation im Vollbildmodus, sowie eine Starfield-Animation mit Papervision.
Zwei Screen Animation mit Air
Zwangsläufig wird man Probleme beim Implementieren der Flash-Animation bekommen, wenn der Flash-Player genutzt werden soll. Auf einem erweiterten Desktop können zwei Flash-Filme nicht gleichzeitig im Fullscreen laufen. Wechselt der Film auf Screen zwei in den FS-Modus, schaltet sich der Film auf dem ersten Screen wieder in Normal-Modus.
Gut, wenn man im Hinterkopf hat, dass Adobe Air mehrere native Fenster unterstütz. Schaut man in die Fensteroptionen stellt man fest, dass die Fenster auch ohne Fensterrahmen angezeigt werden können.
1
2
3
4
5
6
7
8
9
10
| const options :NativeWindowInitOptions = new NativeWindowInitOptions ();
options .systemChrome = NativeWindowSystemChrome .NONE;
const win1 :NativeWindow = new NativeWindow (options );
win1 .stage.scaleMode = StageScaleMode.NO_SCALE;
win1 .stage.align = StageAlign.TOP_LEFT;
win1 .stage.stageWidth = 2732;
win1 .stage.stageHeight = 768;
win1 .x = 0;
win1 .y = 0;
win1 .activate(); |
Diese Option ermöglich in unserem Fall die Realisierung eines 2732 x 768 Pixel großen Fenster, welches sich über die gesamten zwei Screens, mit jeweils 1366 x 768 Pixel Auflösung, des erweiterten Desktops erstreckt. Dank dieser Tatsache ist es nicht mehr nötig überhaupt in den Fullscreen-Modus zu wechseln.
Da die Messebauer die Monitore 90° CW rotiert moniert haben, muss die Air-Applikation diesen Missstand wieder korrigieren. Alle Enthaltenen Elemente müssen 90° CCW gedreht werden. Das ergibt beim Testen am heimischen PC einen steifen Nacken. 
Auf den Screens kamen bei Strör Interactive, sowie bei BusinessAd, jeweils eine Papervision Animation zum Einsatz.
Starfield-Animation
Auf dem Messestand zeigten zusätzlich zwei Beamer Logos in einer Starfield-Animation. Diese wurde mit Papervision umgesetzt. Uns lagen die Logos als Vektorgrafiken vor, wurden aber beim Mappen der Textur des MovieMaterials in Bitmaps umgerechnet. Das macht Papervision automatisch und ist auch logisch, da die MovieMaterial- die BitmapMaterial-Klasse erweitert.
Nun stand ich vor dem Problem, dass die Logos stark verpixeln, wenn sie frontal auf die Kamera zufliegen, oder diese sogar durchfliegen. Die Rasterung der Grafiken steigert sich mit jedem virtuellen Pixel im 3D-Raum, wenn die Logos der Kamera näher kommen. Um diesem Effekt entgegen zu wirken griff ich in die Trickkiste. Nachdem die Planes, dank der “useOwnContainer”-Flag, im Viewport ihren eigenen Container erhalten, kann man die Position und Größe der 3D Objekte in 2D auslesen. Kurz bevor die Kamera durchflogen wird, werden die 3D-Planes auf Alpha=0 gestellt und auf der Bühne die original Vektorgrafik über den Viewport gelegt. Der Wechsel zwischen 3D und 2D ist bei einem Frontalanflug kaum zu unterscheiden. In den folgenden Frames werden die Größe und Position des 3D Objekts auf das 2D Logo übersetzt. Eine Alternative ist das Verwenden größerer Bitmaps, was aber die Performance deutlich verschlechtert. Der Austausch-Vorgang ist hingegen sehr schnell und einfach, dafür aber nur in Spezialfällen geeignet.
1
2
3
4
5
6
7
8
| if(z < 500){
_disObj.width = container.width;
_disObj.height = container.height;
_disObj.y = container.getRect(_stage).y;
_disObj.x = container.getRect(_stage).x;
_disObj.visible = true;
alpha = 0;
} |
Die Überprüfungen laufen im Plane selbst ab. Im Beispiel wird die Annäherung an die Kamera durch die Z-Entfernung angegeben. Das “_disObj” ist die 2D-Vektorgrafik. Die Übertragung der Werte findet nach jeder Bewegung des Planes statt.
Messeaufbau und Testphase
Hier ein paar Eindrücke der Testphase in den kölner Messehallen bis 2 Uhr Nachts.
Gruß Tjomas
