Flash Workshop: Papervision3D – Die Grundlagen

Die ActionScript-Klassen von Papervision3D erzeugen mit recht einfachen Mitteln 3D-Objekte, Kameras und Beleuchtungseffekte. Deren sinnvoller Einsatz bleibt Sache des Gestalters.

Zugegeben, wir sind etwas spät dran. Papervision3D gibt es nun schon seit über zwei Jahren und der große Hype in der Flash-Entwicklergemeinde spielte sich Mitte 2008 ab. Doch die Verspätung hat ihren Grund. Es sind nicht allzu viele wirklich spannende 3D-Projekte im Marketing- oder Businessumfeld erschienen. Das ganze Thema “3D” blieb in weiten Teilen – und das auch schon lange vor Papervision3D – spielerischen Anwendungen oder einfach gestalterischen Experimenten vorbehalten.

Und darum geht es: Live Demo 1: Paperball – Live Demo 2: Würfel

Inzwischen kommt etwas Bewegung in das Thema, ausgelöst von einer Reihe von Kampagnen, die mit Augmented Reality auf Flash-Basis arbeiten. Hier wird das 3D-Thema in zwei Varianten eingesetzt: einerseits zur Objektdarstellung, etwa beim dreidimensionalen Eifelturm auf ARsights oder als Interface. Und das ist der neue, der spannende Teil. Die Verbindung von WebCam, Erkennungsmuster und 3D kann berührungslose Interfaces für Webanwendungen erzeugen. Interface nicht nur im Sinne von Seitenaufruf – das könnte die WebCam alleine mit einer Mustererkennung, nein, Papervision erzeugt über 3D eine Verbindung zur Umgebung des Nutzers vor dem Rechner, in dem die dargestellten Flash-Filme auf eine dreidimensionale Ebene – einen Schreibtisch, eine Magazinseite – aufgesetzt werden.

Der Hintergrund der schweizer Feldschlöschenseite bewegt sich dreidimensional – dank PaperVision3D

Das erste Projekt

Aus diesem Grund und weil Flash inzwischen eigene 3D-Fähigkeiten besitzt, die ähnliches ermöglichen, bleiben wir in den folgenden beiden Workshops auch an der Oberfläche von Papervision3D. Wir erarbeiten so viel Wissen, um zu verstehen, wie das Zusammenspiel mit dem FLARToolkit und dem FLARManager funktioniert.

Zunächst orientieren wir uns an einem Workshop von Lee Brimelow zur Herstellung eines einfachen Würfels, dann modifizieren wir diesen, sodass daraus eine interaktive und klickbare Weltkugel wird.

Zur Vorbereitung des Projekts benötigen Sie einen aktuellen Satz ActionScript-Klassen von PaperVision3D. Die Platzierung und Einbindung entnehmen Sie bitte dem vorhergehenden Workshop. Aus grafischer Sicht benötigen Sie sechs Icons, Logos oder Bilder, Sie können aber zu Testzwecken einfach sechs Zahlen verwenden.

Starten Sie einen neuen Flash-Film auf der Grundlage von ActionScript 3. Wir integrieren das Script in den Film und verknüpfen nicht mit einer externen AS-Datei.

Zeichnen Sie mit einer hellen Farbe ein Quadrat mit einer Kantenlänge von 150 Pixeln auf die Bühne. Wandeln Sie das in ein Movieclip namens „hintergrund” um, klicken Sie doppelt, um es zu bearbeiten und wandeln Sie das Quadrat erneut in ein MovieClip namens „hintergrund_grafik” um. Gehen Sie in die „Eigenschaften” und stellen Sie dort einen neuen Filter ein, in dem Sie auf das kleine Plus-Symbol unten links im Filtzer-Fenster klicken. Der angewendete Filter ist „Glühen”, die Farbe beliebig und wählen Sie „Inneres Glühen”, damit der Effekt innerhalb der Fläche sichtbar ist.

Kehren Sie zurück zu Szene1 und löschen Sie das MovieClip von der Bühne. Nun erzeugen Sie über „Einfügen/Neues Symbol” ein neues MovieClip mit dem Namen „flaeche1″. Ziehen Sie aus der Bibliothek das MovieClip „hintergrund” auf die Bühne und sperren Sie die entsprechende Ebene.

Der Filter „Inneres Glühen” verhilft den Würfelseiten zu einer hübschen Verbindung

Auf einer neuen Ebene platzieren Sie Ihr Bildmotiv, Logo oder einfach eine Zahl. Nun kehren Sie erneut zurück zu Szene 1. Öffnen Sie das Bibliotheksfenster und duplizieren Sie das MovieClip „flaeche1″ fünf Mal. Die Seriennummern steigen an bis „flaeche6″. Ändern Sie in jedem MovieClip das Vordergrundelement, in dem Sie den Bearbeitungsmodus per Doppelklick öffnen.

Zum Schluß der Vorbereitung ziehen Sie alle sechs MovieClips auf die Bühne. Geben Sie ihnen einzeln die Instanznamen ebenso „flaeche1″ bis „flaeche6″. Wählen Sie alle Clips aus, gehen Sie in die Eigenschaften und wählen Sie die Option „Anzeige/Löschen”. So machen Sie die Bühneninstanzen beim Starten des Films unsichtbar. Und noch bei bestehender Auswahl ziehen Sie alle Clips neben die Bühne.

Speichern Sie den Film, erzeugen Sie eine zweite Ebene, nennen Sie diese (Doppelklick auf den Ebenennamen) „Aktionen” und öffnen Sie das Aktionsfenster.

Dieser Workshop wird in der nächste Woche fortgesetzt.

(tm), (sl)

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.