Umgang mit Rich Media für Tablets mit Adobe CS5 Teil 2

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.


Einführung

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:


Schritt 1: Export als SWF

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:

  • Die entsprechenden Element-Tags wurden erstellt und geladen.
  • Diese Tags wurden auf die Elemente auf den Seiten angewendet.
  • Öffnet das Strukturfenster und passt die Hierarchie ggf. an.

Seien Sie sich bewusst, wenn dies "Ihr Boot schwimmt", schlagen Sie sich aus.


Schritt 2: Allgemeine Einstellungen

Wenn das Dialogfeld "SWF-Export" geöffnet wird, legen Sie Ihre allgemeinen Voreinstellungen für die SWF-Datei fest.

Gehen wir Ihre Entscheidungen durch:

  • Export: Sie können wählen, ob Sie einen Teil einer Seite, das gesamte Dokument oder einen Seitenbereich exportieren möchten. Bei der Auswahl der HTML-Datei wird der HTML-Wrapper für die SWF-Datei erstellt. Die letzte Option, SWF nach Exportieren, öffnet die HTML-Seite oder die SWF-Datei und ermöglicht Ihnen, das Projekt für eine Testfahrt zu nutzen.
  • Größe (Pixel): Mit diesen Optionen können Sie die physische Größe der endgültigen SWF-Datei auswählen. Zum Beispiel bietet das Pop-Down-Menü Fit an: eine vollständige Palette gängiger Größen oder Sie können Ihre eigenen Werte einstellen. Wenn Sie die physische Größe des Dokuments ändern, wird die Integrität des Entwurfs beibehalten, wodurch die Diskussion "physische Größe" aus der Tabelle entfernt wird.
  • Hintergrund: Wenn Sie transparent wählen, wird die Hintergrundfarbe des HTML-Codes verwendet.
  • Interaktivität und Medien: Wählen Sie Nur Darstellung aus und alle interaktiven Elemente und Medien werden zu Platzhaltern.
  • Seitenübergang: Sie können eine Reihe käsiger Effekte von Blinds auf Zoom Out anwenden. Wenn Sie sich für PowerPoint interessieren, sind Sie im Himmel. Ansonsten ignorieren Sie einfach diesen.
  • Interaktive Seitenrotation: Dies ist eine ziemlich coole Option. Klicken und ziehen Sie eine Umschaltseite, und die Seite wird umgeschaltet. Dies ist jedoch noch nicht ganz bereit für die Prime Time. Ich finde diese Funktion etwas schwierig zu verwenden, da die Seite zurückkehrt, wenn Sie es nicht richtig machen. Ich fand die Verwendung einer Schaltfläche für diesen Navigationszweck sinnvoller.

Schritt 3: Erweiterte Einstellungen

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:

  • Framerate: Die SWF-Bildrate wird hier eingestellt. Beachten Sie, dass die Standardrate von 24 fps die von Flash verwendete ist.
  • Text: Sie haben hier drei Möglichkeiten. Flash Classic-Text wird als durchsuchbarer Text ausgegeben und ergibt die kleinste Dateigröße. In Konturen konvertieren ist eine gute Wahl, wenn Sie nur Überschriften haben. In diesem Projekt ist diese Wahl die falsche, weil es einen ganzen Körpertext gibt. In Pixel konvertieren glättet den Text in eine Bitmap und alle damit verbundenen Unannehmlichkeiten.
  • Bildverarbeitung: Diese Auswahl ist jedem bekannt, der eine SWF-Datei veröffentlicht hat.

Schritt 4: Klicken Sie auf OK, um die SWF-Datei zu veröffentlichen

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.


Schritt 5: Der SWF-Ordner

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:

  • Ressourcen: Dies sind die externen Medien, einschließlich der FLVPlayback-Skins, die im Dokument verwendet werden.
  • HTML: Der HTML-Wrapper für die SWF.
  • SWF: Der SWF, den Sie gerade erstellt haben.

Wenn Sie sich über die Bilder, Schaltflächen und den Text wundern, sind sie alle in die SWF-Datei eingebettet.


Schritt 6: Ausgabe in Flash CS5:

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.


Schritt 7: Als FLA exportieren

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.


Schritt 8: Wählen Sie Ihre Exportoptionen

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:

  • Farbe: Denken Sie nicht, Sie können ein CMYK-Layout verwenden und es in Flash plumpen. Flash verwendet den RGB-Farbraum, und alle Sonderfarben - Pantone ist ein hervorragendes Beispiel - werden in den RGB-Raum verschoben.
  • Transparenz: Stellen Sie insbesondere beim Exportieren in das SWF-Format sicher, dass transparente Objekte keine interaktiven Elemente überlappen. Es besteht die Gefahr, dass die Interaktivität verloren geht.
  • 3D-Attribute: Alle in InDesign verwendeten 3D-Effekte - Text auf einem Pfad - werden nicht zu Flash oder zur SWF-Datei verschoben.
  • Schriftarten: TLF funktioniert nur mit OpenType- und TrueType-Schriftarten. Postscript-Schriftarten sind nicht zulässig.

Schritt 9: Der Flash-Ordner

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.


Schritt 10: Flash CS5

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".


Schritt 11: Animation

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.


Schritt 12: Wählen Sie Text aus

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.


Schritt 13: Wählen Sie das Video aus

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.

Fazit:

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.