Im vorigen Artikel habe ich Ihnen erläutert, wie Sie mit einer Vielzahl von Anwendungen die Assets für ein interaktives Magazin erstellen und anschließend in InDesign CS5 Medien, Bewegung und Interaktivität zu diesen Assets hinzufügen. Dieser Artikel konzentriert sich auf das Endspiel: Ausgabe des Projekts zur Lieferung über eine Webseite oder Senden des Projekts an Flash für mehr Arbeit und Ausgabe an eine SWF- oder sogar eine AIR-App.
Ich verwende hier ein Layout im Magazinstil, weil ich viele Funktionen in InDesign CS5 vorführen möchte. Ich gebe zu, dass die Seitengröße vielen von Ihnen als ein bisschen groß erscheinen mag. Denken Sie daran, Sie können jede beliebige Seitengröße verwenden, und Sie vermuten, dass eine der gebräuchlicheren Größen in der Nähe von 800x600 liegt. Die Wahl liegt jedoch bei Ihnen.
Bevor wir uns einarbeiten, beschäftigen wir uns mit dem unvermeidlichen "Warum eine SWF?" und "Warum eine Flash-Datei?" Fragen. Sie sind gültig und die Antwort kann einige von Ihnen überraschen.
Die Designer waren schon seit vielen Jahren gezwungen, beim Flash-Soireé auf den Stühlen entlang der Wand zu sitzen. Sie hatten einige großartige Ideen, aber ihr Einfluss nahm mit der gleichen Geschwindigkeit ab, wie ihre Gegenstücke in der Entwicklungsumgebung stiegen. Wenn wir uns in einem digitalen Kommunikationsbereich bewegen, in dem Papier und Bildschirme als nichts anderes als Anzeigemedium betrachtet werden, wird das Grafikdesign immer wichtiger. Projekte, die für den Druck entwickelt wurden, können, wie Sie gesehen haben, die statische Druckseite verlassen. Interaktivität, Audio- und Videoelemente können direkt in das Design integriert werden.
Das SWF-Format, insbesondere mit der Version 10.1 von Flash Player, mit der ein Monster eines Mediaplayers in die Hände eines jeden gelangt, der Zugriff auf einen Bildschirm hat, ermöglicht Ihnen die Erstellung schneller Prototypen für Ihre Kunden. Nur weil wir es verstehen, heißt das nicht, dass Ihre Kunden dies tun werden. Den intellektuellen Sprung vom Papier zum Bildschirm zu machen, wird eine neue Erfahrung sein, und wenn man ihnen einen SWF in die Hand gibt, dann "sehen" sie eigentlich, worüber man spricht.
Das Flash-Format wird die Entwickler absolut begeistern. Das Projekt wird in Flash-freundliche Stücke zerlegt, die die Fähigkeiten eines erfahrenen Flash-Entwicklers erfordern, um wieder zum Leben erweckt zu werden. Es gibt nichts davon: "Ja, nur eine Ausgabe an Flash und du bist im Spiel." das scheint immer die Aufmerksamkeit von Leuten zu erregen, die Flash noch nie benutzt haben. Ich sage gern: "Das wird nicht passieren." Sie werden sehen, warum ich das später sage.
Von da an setzt der normale Flash-Workflow ein, da der Entwickler die Klassendateien, den Code und die Medienelemente zusammenführt, die auf den Bemühungen des Graphic Designers aufgebaut werden, und in vielen Fällen sogar verbessert. Die Designer werden begeistert sein, dass Flash CS5 alles daran setzt, die Integrität des Designs zu berücksichtigen. Wenn dieser Vorgang abgeschlossen ist, kann das Projekt als beliebige Ausgabe von der endgültigen SWF-Datei zum Einbetten in eine Webseite in eine AIR 2.0-App ausgegeben werden.
Lass uns anfangen:
Wählen Sie bei geöffnetem InDesign-Dokument Datei> Exportieren aus, um das Dialogfeld Export zu öffnen. Wählen Sie Flash Player (SWF) im Popup-Menü "Format" aus und klicken Sie auf "Speichern".
Ihre Entscheidungen sind zum größten Teil selbsterklärend, aber es gibt ein paar hier, die Ihre Aufmerksamkeit auf sich ziehen könnten:
InDesign Markup (IDL): Dieses Format ermöglicht das Öffnen des Dokuments in InDesign CS4. Das geht uns nichts an.
InDesign-Snippet: Dies hat absolut nichts mit der Code-Snippet-Funktion von Flash CS5 zu tun. Sie können Objekte auf der InDesign-Seite speichern und wiederverwenden.
XML: Ich wette, das hat deine Aufmerksamkeit erregt. Seien Sie nicht zu aufgeregt, da dies viel zusätzliche Arbeit seitens der Entwickler erfordert. Wenn Sie mit dieser Option fasziniert sind, können Sie XML nur exportieren, wenn Sie Folgendes getan haben:
Seien Sie sich bewusst, wenn dies "Ihr Boot schwimmt", schlagen Sie sich aus.
Wenn das Dialogfeld "SWF-Export" geöffnet wird, legen Sie Ihre allgemeinen Voreinstellungen für die SWF-Datei fest.
Gehen wir Ihre Entscheidungen durch:
Klicken Sie im Dialogfeld SWF exportieren auf die Registerkarte Erweitert, um die erweiterten Optionen zu öffnen.
Hier übernehmen die Profis, da dieses Panel die Funktionsweise der SWF bestimmt. Gehen wir Ihre Entscheidungen durch:
Wenn Sie auf OK klicken, wird die SWF-Datei erstellt. Wie Sie in der Abbildung sehen können, wird das Projekt auf einer Webseite geöffnet.
OK, minimieren Sie InDesign und öffnen Sie den SWF-Ordner…
Wir sind sozusagen alle auf derselben Seite, hier sind die Dateien, die dort stecken bleiben:
Wenn Sie sich über die Bilder, Schaltflächen und den Text wundern, sind sie alle in die SWF-Datei eingebettet.
Für einen Flash-Entwickler oder -Designer ist der sofortige Wechsel zu einer SWF-Datei "einfach nicht erledigt". Ich konnte nicht mehr zustimmen. Ich finde die Videofunktion etwas "grundlegend" und ich bin kein großer Fan davon, ein Video-Skin während der Wiedergabe über das Video zu legen. Wenn Sie die verschiedenen Bedienfelder verwenden, um Schaltflächen zu "verdrahten" und so weiter, wenn ich es mit ActionScript 3.0 effizienter ausführen kann, fühlen sich diese "verrückten" Funktionen von InDesign eher wie "aufziehende" Spielzeuge an als alles andere. Trotzdem bieten sie die Möglichkeit, die Funktionalität zu testen, sie haben also einen Nutzen. Wenn Sie eine schlanke, mittlere und schnell ladende SWF-Datei erstellen möchten, ist Flash die nächste Station des Prozesses.
Bevor Sie davon begeistert sind, müssen Sie wissen, dass diese Technik, wie Sie bald erfahren werden, am besten zwischen Flash CS5 und InDesign CS5 funktioniert. Es ist tatsächlich das einzige Flash-Format, das Ihnen zur Verfügung steht. Außerdem hat Adobe die XFL-Exportoption in InDesign eingestellt. Es war nur dazu da, InDesign CS4 die Möglichkeit zu geben, sich in Flash zu bewegen. Flash-Export ersetzt es.
Vergewissern Sie sich vor dem Exportieren, dass Sie ein neues Verzeichnis für die Dateien erstellen.
Lass uns anfangen.
Wählen Sie Datei> Exportieren> Flash CS5 Professional (FLA) und klicken Sie auf die Schaltfläche Speichern, um das Dialogfeld Flash CS5 Professional (FLA) exportieren zu öffnen.
Viele der Auswahlmöglichkeiten finden Sie im allgemeinen Bereich des SWF-Exportdialogfelds. Der Neue ist Text.
Sie haben vier Möglichkeiten. Drei - klassischer Text, in Konturen konvertieren und in Pixel konvertieren - wurden bereits behandelt. Der Neue ist Flash TLF-Text. Dies ist die neue Art, Text in Flash CS5 zu verwalten. TLF steht für Text Layout Framework und ist die Funktion, die Typografie in Flash integriert. Alle in InDesign vorgenommenen typografischen Änderungen werden unverändert in Flash übernommen. Dies sind großartige Neuigkeiten für Designer. Die schlechte Nachricht ist, dass diese Funktion nur mit Flash CS5 und Flash Player 10 oder höher funktioniert.
Mit der Auswahl "Diskretionäre Trennpunkte einfügen" werden Wörter "unterbrochen", wenn sie gegen die Kante eines Textfelds stoßen.
Bevor Sie nach Flash exportieren, sollten Sie eine Vorabprüfung durchführen, um sicherzustellen, dass Sie wirklich WYSIWYG erhalten. Unter den zu überprüfenden Sachen:
Minimieren Sie InDesign und öffnen Sie den Flash-Ordner.
Der einzige Unterschied, den Sie zwischen dem Inhalt dieses Ordners und dem seines SWF-Gegenstücks sehen sollten, ist der Einschluss einer .fla-Datei.
Nehmen Sie die .fla und öffnen Sie sie in Flash CS5 (hier wird es ernsthaft cool).
Zunächst einmal hat der Film nur drei Frames. Der Grund ist jeder Spread in InDesign, und es gibt drei davon in diesem Dokument, die in einen eigenen Movieclip ("Spread-xxx") in der Bibliothek eingeschlossen sind. Alle im InDesign-Dokument verwendeten Schaltflächen werden in Schaltflächensymbole in der Flash Library umgewandelt. Jedes in der Diashow verwendete Bild - ein Objekt mit mehreren Status in InDesign - wird in einen Movieclip konvertiert und die Bilder werden dem Flash hinzugefügt Bibliothek als Bitmap-Symbole.
Die schlechten Nachrichten, und für viele von Ihnen ist das keine wirklich schlechte Nachricht, alles Interaktivität geht verloren. Sie müssen das Projekt mit ActionScript 3.0 "neu verkabeln".
Lassen Sie uns das Öffnen eines Movieclips mit einem animierten Objekt besprechen.
In diesem Projekt gibt es einen animierten Textblock auf Seite 3, der mit einem Alpha-Wert von 0 beginnt und in InDesign den Effekt "Fly In From Top" verwendet. Diese Effekte bewegen sich in Flash und werden den Motion-Ebenen hinzugefügt. Die Pfade können in Flash vollständig bearbeitet werden.
Doppelklicken Sie auf einen Spread in der Hauptzeitleiste, um den Movieclip zu öffnen, und klicken Sie auf einen Textblock.
Wie Sie sehen, wird die gesamte in InDesign angewendete Textformatierung, einschließlich des Flusses zwischen Containern, in den Texteigenschaften des Textcontainers in Flash CS5 übernommen. Das ist riesig. Das einzige, was fehlt, ist Textumbruch. Es wird nicht zwischen InDesign und Flash verschoben. Was sich jedoch bewegt, sind Inline-Bilder. Hierbei handelt es sich um Bilder oder grafische Elemente, die als Inline-Elemente in InDesign Textcontainern hinzugefügt werden. Das ist wieder riesig.
Video und Audio, typische externe Assets, werden nicht in Flash übertragen. Jedes Video wird durch einen Bitmap-Platzhalter des Posterframes des Videos aus InDesign CS5 ersetzt, und Audio wird ignoriert. Auch diese beiden Medientypen lassen sich am besten mit ActionScript 3.0 behandeln, so dass kein großer Verlust entsteht. Tatsächlich kann der Videoplatzhalter durch eine FLVPlayback-Komponente oder ein Videoobjekt ersetzt werden.
In diesem Lernprogramm habe ich Sie durch die Schritte geführt, die erforderlich sind, um ein InDesign CS5-Dokument für die Webwiedergabe als SWF- oder .fla-Datei vorzubereiten. Sie sind bemerkenswert ähnlich, wie sie exportiert werden, aber die beiden Formate unterscheiden sich stark.
Wie bereits erwähnt, eignet sich der SWF-Export gut für Prototyping und einige andere sehr spezifische Anwendungen. Für viele von Ihnen ist es die .fla, die aus InDesign rausgeschmissen wurde.
Ich habe Ihnen gezeigt, wie Bewegung, Seiteninhalte, Text sowie Audio und Video in Flash verschoben werden. Der wichtigste Aspekt dabei ist, dass alle Assets in der Flash-Bibliothek landen, aber es wird die Aufmerksamkeit eines Flash-Entwicklers erfordern, um das Projekt mit ActionScript 3.0 neu zu "verdrahten". Das ist eine gute Sache; Diejenigen, die nicht über Ihre Fähigkeiten und Kenntnisse verfügen, werden zweimal überlegen, bevor Sie Indesign-Dokumente nach Flash exportieren, da sie der Meinung sind, dass dadurch ihre Probleme gelöst werden. Weit davon entfernt. Sie fangen gerade erst an.
Sobald das Projekt "verkabelt" und funktionsfähig ist, kann es schließlich ins Web verschoben oder als XFL-Dokument gebündelt und dem Flex-Team übergeben werden. Dies ist ein brandneuer Workflow, und ich vermute, dass viele von Ihnen dies als zusätzliche Arbeit sehen werden. Ich habe ehrlich gesagt das Gefühl, dass InDesign bald ein weiteres Werkzeug in unserem Arsenal werden wird, wenn Sie einmal den "Dreh" haben, denn eine Flut von Tablets - Android und andere Betriebssysteme - stehen vor der Tür.