|
|
| |
Flash MX / Cinema 4D Release 8: Ein 3D/Vektorgrafik Preloader |
 |
| |
Während der Entwicklung einer komplett aus Flash bestehenden Webseite habe ich mich erstmals eingehender mit dem in der Cinema 4D Release8 integrierten FlashEx Plugin beschäftigt. Mit diesem Tool lassen sich direkt in Cinema 4D die Animationen in das Flash-Format exportieren. In folgendem Tutorial werfen wir einen kleinen Blick auf die Möglichkeit, mit dem Tool Vektorgrafiken zu erstellen - immer mit dem Ziel vor Augen, eine möglichst geringe Dateigröße als Ergebnis zu erhalten. Als Ziel schwebte mir eine Art Hochhaus vor, dessen Stockwerke
"beleuchtet" werden, je nach der bereits geladenen Datenmenge des kompletten Flash-Films. Allerdings habe ich das Problem, dass ich meine Arbeiten mit einer Idee beginne und oft wird dann etwas völlig anderes daraus. So wurde mir schnell bewußt, dass es durchaus passieren könnte, dass ich die Perspektive des Hochhauses ändern wollte. Daher fiel meine Wahl auf Cinema 4D samt FlashEx-Plugin. Somit konnte ich während der Entwicklung die Perspektive in Cinema 4D ändern und hätte somit schnell und komfortabel neue Vektorgrafiken als Ergebnis, ohne
das Hochhaus komplett neu zu erarbeiten. |
| |
Cinema 4D - Die Modellierung der ersten Ebene |
|
| |
 Das Haus soll aus 5 Ebenen sich überlagernder Würfel jeweils ohne Boden und Decke bestehen. Wir erstellen in Cinema 4D als erstes einen Würfel mit den Maßen X=200/Y=50/Z=200 und der folgenden Unterteilung X=3/Y=1/Z=3. Nun konvertieren wir dieses parametrische Objekt in ein Polygonobjekt. Dies geht am einfachsten über die Taste "C". In der Ansicht von oben ("F2") markieren wir die beiden Punktreihen, die Parallel zur Z-Achse verlaufen
und legen im Koordinatenmanager deren neue Größe fest: X=180. Stellt sicher, dass die Rechteck-Selektion mit abgewählter "Nur sichtbare Elemente"-Option genutzt wird. Die beiden Punktreihen parallel zur X-Achse erhalten ebenfalls die Größe Z=180. Somit haben wir erreicht, dass "das innere Quadrat" der oberen und unteren Deckfläche auf eine Größe von 180px reduziert wurde.
Im Polygonmodus werden nun die beiden soeben skalierten Viereck-Polygone mittels der Funktion Brücke aus dem Würfel entfernt. Hierfür die beiden Polygone anwählen, das Brückewerkzeug aktivieren (Taste "B") und zwei an gleichen Positionen liegende Punkte der Ebenen verbinden. Mit einer Ebene deren mittleres Polygon ebenfalls entfernen, können wir bei Bedarf einen Boden realisieren. Diesen gruppieren wir so gleich mit den Wänden und nennen die Gruppe "Ebene 1".
Da ich mir später nicht die Mühe machen wollte, die Wände in Flash einzufärben, habe ich hierfür ein Material nur mit aktiviertem Farbkanal erstellt. Ein weiteres, etwas dunkleres Material färbt bei mir den Boden ein. Mit dem Comic-Renderer lässt sich das bisherige Zwischenergebnis bereits überprüfen. |
| |
Cinema 4D - Die Modellierung der restlichen Ebenen |
|
| |
 Wir duplizieren die soeben erstellte Ebene nun viermal und geben die im Bild angegebenen Werte für diesen Vorgang ein. Die Funktion finden wir in der Menüleiste unter:
Funktion > Duplizieren. Die Werte für die Y-Achse habe ich folgendermaßen ermittelt:
Doppelte Wandhöhe einer Ebene multipliziert mit der Anzahl der Instanzen [(2x50)*4].
Als Ergebnis erhalten wir einen Turm (kleines Bild) - unser Hochhaus, dass wir im nächsten Schritt für den Export vorbereiten. Hierfür erstellen wir eine Animation mit nur fünf Bildern. |
| |
Cinema 4D - Vorbereitung für den Export nach Flash MX |
|
| |
Da ich die Transparenzen der einzelnen Objekte in Flash MX steuern möchte, habe ich eine Animation erstellt, die es mir erlaubt, die einzelnen Ebenen des Turms in Flash kinderleicht in Objekte/Movieclips umzuwandeln. In der Zeitleiste (Shift+F3) erstelle ich vorab eine Animation mit 5 Bildern. Der Trick besteht darin, in jedem Bild nur eine Ebene darzustellen. Doch dazu später mehr, denn nach dem Import in Flash wird dies deutlicher.
Bevor ich beginne ändere ich die Dokumentvoreinstellungen dahingehend ab, dass ich als Minimum "Bild 0" (0B) und als Maximum "Bild 4" (4B) definiere. Die Bildrate spielt hierbei keine Rolle. In der Zeitleiste wird nun für die zweite Ebene eine Parameterspur erstellt. Hierfür klicken wir mit der rechten Maustaste auf die gewünschte Ebene und wählen "Neue Spur > Parameter > Sichtbar beim Rendern". Mit einem Klick bei gedrückter Taste: Steuerung (STRG) klicken wir in der Spur auf Bild 0. Im Attribute-Manager wird automatisch
auf Key-Eigenschaften gewechselt. Hier stellen wir folgenden Wert ein "Sichtbar beim Rendern: AUS". In Bild 1 erstellen wir ein neues Schlüsselbild mit dem Wert "Sichtbar beim Rendern: AN". In Bild 3 wiederum ein Schlüssel Bild mit dem Wert "Sichtbar beim Rendern: AUS". Mit dieser Sequenz können wir nun leicht die Animation erstellen, die wir für den Export benötigen. Hierfür kopieren wir diese Sequenz auf jede Ebene und verschieben die Sequenz nun so, dass die Ebenen in folgenden Bildern sichtbar sind: (Ebene
1 - Bild 0) / (Ebene 2 - Bild 1) / (Ebene 3 - Bild 2) / (Ebene 4 - Bild 3) / (Ebene 5 - Bild 4). Danach sollte die Zeitleiste wie in diesem Bild Aussehen:
 |
| |
Cinema 4D - Export mit dem FlashEx-Plugin |
|
| |
Nachdem die Datei nun ausreichend vorbereitet wurde, können wir uns daran machen, den Turm als Flash-Film zu exportieren. Anschließend können wir den Film dann in Flash importieren und die eigentliche Animation erstellen. Doch nun zu den Einstellungen des FlashEx-Exports.
Da wir die nötigen Anmiations-Einstellungen bereits in den den Cinema 4D - Dokumenteinstellungen vorgenommen haben, können wir diese mit einem einfachen Klick auf "Rendereinstellungen" in das Plugin übernehmen. Für den Turm benötigen wir beinahe ausschließlich die Standardeinstellungen. Daher wählen wir nun nur noch den Darstellungsmodus und einen Dateinamen und Speicherort. Als Modus habe ich "Solid" gewählt. Als Ergebnis erhalten wir undurchsichtige Flächen, deren Farbe den vergebenen Materialfarben entsprechen. Die Arbeit
in Cinema 4D ist damit getan. |
| |
Flash MX - Import und Nachbearbeitung der Daten |
|
| |
 Vor dem Import der Dateien erstelle ich in Flash einen leeren Movieclip (STRG+F8) und geben diesem einen eindeutigen Namen wie etwa "Turm". Flash ist hier intelligent genug, den Movieclip auf der Bühne bereits für die Bearbeitung zu öffnen. Bevor wir nun mit dem Import beginnen, lege ich noch zwei weitere Ebenen an: "Labels" für die Bezeichnung und "Actions" für die Aktionen. Der unteren Ebene vergebe ich vorerst keinen Namen.
Als nächstes wird über die Tastenkombination "STRG+R" der Import gestartet. Als Quelle geben wir hier den soeben exportierten Film an. Da wir bereits in Cinema 4D die Animation der Ebenen vorgenommen haben, liegt nun jede Ebene in einem eigenen Schlüsselbild (!). Wir können nun aus jeder Ebene eine eigene Grafik machen, in dem wir den kompletten Inhalt eines Schlüsselbildes markieren und über die Taste "F8" daraus einen neuen Movieclip erstellen. Auch hier ist es von Vorteil, sinnvolle Namen für die Bezeichnung zu verwenden. Ich habe
die Grafiken Ebene 1 - Ebene 5 benannt.
Anschließend aktivieren wir Option "mehrere Bilder bearbeiten" und stellen unter Zwiebelschichten "alle Zwiebelschichten" ein. Nun können wir alle auf der Bühne befindlichen Grafiken auswählen und mit der Funktion auf Ebenen verteilen erhält jede Grafik eine eigene Ebene. Dadurch könnten wir die Grafiken einzeln und unabhängig animieren. Ein weiterer Vorteil ist der, dass wir auf der Hauptbühne nun den kompletten Turm sehen können, was die Plazierung ungemein erleichtert.
Wir haben nun die Möglichkeit, die einzelnen Ebenen unseren Wünschen entsprechend umzugestalten. Damit wir die einzelnen Ebenen über Actionscript ansprechen können, sollten wir den einzelnen Instanzen wiederum passende Namen geben (zb.: "mcEbene1"...). Ich habe abschließend jedem Ebenen-Movieclip ("mcEbene 1"...) eine Alphaeigenschaft von 40% zugewiesen. Anschließend begeben wir uns wieder zur Hauptbühne und platzieren unseren Movieclip "Turm". Als Instanzname sollten wir wiederum eine sinnvolle Bezeichnung wählen,
denn dies erleichtert die spätere Programmierung. Ich habe "mcTurm" benutzt. |
| |
Flash MX - Die Steuerung des Ladebalkens per Actionscript |
|
| |
 Was soll nun genau passieren? Jede Ebene des "Turms" steht der Einfachheit halber für 20% der geladenen Daten. Nach jeweils 20% geladenen Daten soll sich die Alphaeigenschaft der entsprechenden Ebene auf 80% erhöhen. 0%: keine Ebene / 20%: mcEbene1... 100% mcEbene5.
Um das zu realisieren, bereiten wir die Hauptzeitleiste des Flash-Films vor, in dem wir 2 neue Zeitleisten-Ebenen erstellen "Actions" und "Labels". In den Frames 1,5 und 10 erstellen wir Schlüsselbilder. Ich habe 5er-Schritte gewählt, um die Übersichtlichkeit des Screenshots zu erhöhen. Diesen "Keyframes" geben wir folgende Namen 1: check - 2: restart - 3: inhalt.
Der Turm soll während des ganzen Films zu sehen sein und erhält daher bis Frame 15 Bilder ("F5"). In Keyframe 5 schreiben wir folgende Aktion: gotoAndPlay("check"); Dies bewirkt einen Neustart der Überprüfung, wieviel Prozent geladen wurden. Diese Überprüfung wird in Bild 1 ("check") durchgeführt. Nachdem alle Frames geladen wurden, soll der Flash-Film an den Keyframe "Inhalt" springen, andernfalls soll Flash den Film weiter abspielen, bis es zu dem Frame "restart" gelangt. Das Skript dafür
sieht folgendermaßen aus:
if (_framesloaded>=_totalframes) { gotoAndPlay("inhalt"); } else { play(); }
Nun folgen die Anweisungen, die dafür sorgen sollen, dass Flash je nach geladenen Bytes den Ladefortschritt am Turm visualisiert, in dem es einer Ebene die Eigenschaft Alpha=80% zuweist. Wir erinnern uns: Die Ebenen befinden sich in dem dem Movieclip Turm auf der Hauptzeitleiste. Folglich lautet die Adressierung folgendermaßen: _root.mcTurm.mcEbene* der Stern "*" steht für die Nummer der jeweiligen Ebene. Alpha=80% für Ebene 1 wird folgendermaßen adressiert. _root.mcTurm.mcEbene1._alpha = 80. Diese Zuweisung der Alphaeigenschaften
benötigen wir momentan noch nicht, können diese aber bereits jetzt für alle Ebenen eingeben.
Nun sollten wir den Ladezustand in Prozent ermitteln. Hierfür benötigen wir zwei Werte die bereits geladenen Bytes (getBytesLoaded) und die Gesamtmenge der Bytes (getBytesTotal)des Films. Daraus können wir mit den folgenden Befehlen den Prozentwert ermitteln:
geladen = getBytesLoaded();
gesamt = getBytesTotal();
prozent = math.round((geladen/gesamt)*100);
Den Wert der hier definierten Variablen Prozent benutzen wir nun, um den Ebenen des Turmes die Alphaeigenschaften zuzuweisen. Das geht für Ebene 1folgendermaßen:
if ((prozent>=20)&&(prozent<=40)){ _root.mcTurm.mcEbene1._alpha = 80;}
Das bedeutet: Wenn der Wert der Variable Prozent größer ist als 20 (oder gleich), aber kleiner als 40, dann setzte den Alphawert von mcEbene1 eins auf 80. Hieraus lässt sich nun leicht die Programmierung der restlichen Ebenen ableiten. Da wir bereits eine "if"-Anweisung in dem Skript verwendete haben, benötigen wir für die anderen Ebenen die Anweisung "else if"! Das fertige Skript sollte im ganzen so aussehen wie im untenstehenden Bild:
|
| |
Flash MX - Finaler Test |
|
| |
Um den Film zu testen legen wir nun ein möglichst großes Bild in den Keyframe"inhalt". Anschließend können wir zusehen, wie unser "Turm" sich je nach Ladezustand verändert. Die Größe des Preloader entspricht inklusive der Turmgrafiken ca. 1kB (!).
Nun ist dieser Preloader sicherlich nicht perfekt, aber es lassen sich auf seiner Basis doch viele und komplexere "Ladebalken" erstellen.
Ich hoffe somit, einen Grundstein für viele neue Möglichkeiten gelegt zu haben und auch eine Daseinsberechtigung für das FlashEx-Plugin in Cinema 4D Release 8 aufgezeigt zu haben.
Der leicht modifiziert Preloader kann hier bewundert werden » |
|
