Share
Tablets sind heute das Big Thing. Klar, das iPad kann kein Flash, aber es ist nur die erste Welle einer Welle. Adobe InDesign CS5 bietet eine Vielzahl interaktiver Funktionen, die sich hervorragend für die große Bildschirmfläche eines Tablets eignen. Anschließend können Sie Flash für Verbesserungen und Optimierungen nutzen. In diesem Lernprogramm erfahren Sie, wie Sie mit der InDesign-Seite arbeiten.
Als Adobe letztes Jahr seinen iPhone-Compiler für Flash bei Max auf den Markt gebracht hatte, muss ich zugeben, dass ich kurzzeitig überwältigt war. Dann wandte ich mich an den Typ neben mir im Publikum und sagte: "Das wird großartig, bis Apple einen Weg findet, es herunterzufahren." Was erklärt, warum Apple's "April Shock" mich wirklich nicht überrascht hat. Wie sie das machten, war eine Überraschung, aber das Herunterfahren war nicht unerwartet.
Ein paar Wochen später befand sich Richard Galvan, der Flash Product Manager, auf der Bühne bei FlashintheCan und präsentierte ein paar "quirlige" Sachen, die Flash CS5 bieten kann. Im Verlauf seines Vortrags demonstrierte er, wie InDesign CS5 nun eine Menge interaktiver Dinge erledigen kann, die dann einfach als .fla auf Flash CS5 umgestellt oder einfach als vollständig interaktives SWF aus InDesign herausgeschossen werden können. Ich gebe zu, dass ich die gleiche Reaktion hatte wie viele von Ihnen: "Gimme eine Pause. Es gibt keine Möglichkeit, dass ein Flash-Entwickler / Designer, der den Titel verdient, aus InDesign einen großen, hupenden SWF erstellt."
Nach Richards Vortrag habe ich ihn in die Enge getrieben und gefragt, warum er etwas demonstrierte, das einem verrückten Mann eine Waffe gäbe. Seine Ein-Wort-Antwort rüttelte mich zurück.
Tablets.
er sagte.
Wenn es eine grundlegende Regel gibt, die ich in die Köpfe meiner Schüler zu schlagen versuche, so ist es, wenn es darum geht, sich mit Problemen auseinanderzusetzen, "mit dem Offensichtlichen beginnen und zurück ins Dunkle gehen". Richards Antwort war so offensichtlich, dass ich mich etwas verlegen fühlte.
Obwohl das iPad ein wirklich cooles Gerät ist, neigen wir dazu, zu vergessen, dass Tablets eine aufstrebende Technologie sind. Google, HP und andere werden ein regelmäßiges Füllhorn dieser Dinge herausbringen und sie werden alle Flash-fähig sein. Nehmen Sie die Flash Player 10.1-Version auf, die auf jedem mobilen Gerät mit Ausnahme von Apples Angeboten auftauchen wird, und es ist nicht viel zu glauben, dass es nur eine Frage der Zeit ist, bis unsere Kunden auf den mobilen Zug aufsteigen.
Nur weil Apple mit seinem "Spielzeug für coole Kinder" zum ersten Mal aus dem Block war, heißt das nicht, dass es der Maßstab ist. Wenn sich diese Dinge ausziehen, könnte es nur Apple sein, das ein "Nischenprodukt" produziert hat.
Was bringt mich zu diesem Tutorial. Tablets haben viel Platz auf dem Bildschirm, was ziemlich genau so groß ist wie ein normales Blatt Papier, das aus Ihrem Laserdrucker geworfen wird. Es ist sinnvoll (und Wired zeigt dies bereits), Druckausgaben nur als Seiten mit "Inhalten" zu betrachten und den Flash Player zu verwenden, um aus einem eher passiven Medium ein Rich Media-Erlebnis zu machen.
In den nächsten Monaten werden in diesem Sommer eine Reihe neuer Android-Handys und -Tablets auf den Markt kommen. Das Line-Up umfasst das ADAM von Notion Ink, aber es gibt auch andere, darunter Marvell Moby, WePad und Dell Mini 5, um nur einige zu nennen.
Im Verlauf dieser zweiteiligen Serie werden Sie erfahren, warum Flash CS5 seine Moleküle mit dem neuen XFL-Format umgekrempelt und neu angeordnet hat. Wie sich InDesign CS5 plötzlich von einer statischen Layout-App zu einer mit einer Fülle interaktiver Funktionen entwickelt hat und wie das neue TextLayout-Framework in Flash viel mehr ist als eine eher kuriose Ergänzung des Line-Ups. Natürlich werden wir die Assets in InDesign zusammenstellen. Am Ende dieses Stücks hoffe ich, dass viele von Ihnen erfahren werden, wie "cool" die interaktiven Funktionen von InDesign wirklich sind und, was noch wichtiger ist, warum sie überhaupt da sind. Lass uns anfangen:
OK. Ich bin faul. Ich lasse mein iPhone damit umgehen. Brendan Dawes aus MagneticNorth aus dem Vereinigten Königreich stellte mich auf eine ziemlich interessante iPhone-App - addLib - vor, die ein von Ihnen gefüttertes Bild aufnimmt und einige recht interessante Variationen seiner Verwendung aufwirft. Da ich einige der Funktionen von InDesign CS5 demonstrieren wollte, dachte ich, eine Reise, die ich in ein kleines chinesisches Dorf - Huo Guo - unternahm, würde genau das Richtige sein, und das Foto des alten Mannes, der über die Mauer blickte, ist einer von meine Favoriten von dieser Reise. Ich habe das Bild in addLib eingegeben und die letzte Behandlung hat mir wirklich gut gefallen.
Aufgrund dieses Entwurfs wusste ich, dass das Werkzeug für den Job Illustrator CS5 war, und dass die Bildgebung am besten in… gemacht wurde… machen Sie sich bereit für… Fireworks CS5.
Als das Bild geöffnet wurde, musste zunächst eine überschaubare Größe erreicht werden. Das Originalbild meiner Nikon D200 hatte eine Auflösung von 2896 x 1944 Pixeln, was in Illustrator CS5 oder Fireworks CS5 nicht funktionieren würde. Ich habe das Bild auf der Fireworks-Leinwand ausgewählt, "Ändern"> "Leinwand"> "Bildgröße" ausgewählt und die Pixelabmessungen in die in der Abbildung gezeigten geändert. Mit der Bildgröße wurde auf die Schaltfläche „Leinwand anpassen“ im Eigenschaftenfenster geklickt, um sicherzustellen, dass im endgültigen Bild keine zusätzliche Leinwand vorhanden ist.
Das Bild ist ziemlich dunkel und könnte etwas Farbkorrektur erfordern. Ich habe das Bild im Canvas-Bereich ausgewählt und im Eigenschaftenfenster Filter> Farben anpassen> Ebenen eingestellt. Das Histogramm zeigte mir, dass ich etwas Weißes auf der rechten Seite der Grafik ausschneiden musste. Durch Bewegen des Weißpunkts (wie in der Abbildung gezeigt) wurde das Bild aufgehellt. Das Bild wurde als CoverColor.jpg gespeichert.
Das Erstellen einer Graustufenversion war ebenfalls ein Kinderspiel. Wenn das Bild auf der Leinwand ausgewählt ist, habe ich Filter> Farben anpassen> Farbton / Sättigung ausgewählt und den Sättigungswert auf -100 gesetzt, wodurch die Farbe aus dem Bild entfernt wurde. Dieses Bild wurde dann als CoverGrey.jpg gespeichert.
Ich dachte, eine Fotogalerie in InDesign einzubauen, war ein Kinderspiel und würde diese Funktion der Anwendung demonstrieren. Natürlich werden 12 Bilder, die nicht so groß sind wie das Titelbild, nicht fliegen können, und das Skalieren der Bilder von Hand macht keinen Spaß.
Eine meiner Lieblingsfunktionen von Fireworks CS5 ist die Stapelverarbeitung: Datei> Stapelprozess. Dies ist ein sehr einfacher Workflow. Ermitteln Sie die Fotos, bestimmen Sie den Skalierungsbetrag und lassen Sie die verkleinerten Versionen von Fireworks in einem separaten Ordner ablegen. Dies dauerte weniger als 30 Sekunden.
Das Design von addLib war in Illustrator CS5 bemerkenswert einfach zu replizieren. Mit einer Kombination aus einfachen Formen, Masken und Typ konnte ich diese in weniger als 30 Minuten zusammenziehen. Die Hauptentscheidung betraf das Ausgabeformat. Ich habe mich für das AI-Format entschieden, da ich sowohl in Flash als auch in InDesign die Möglichkeit habe, zu Illustrator zurückzukehren, um Änderungen vorzunehmen. Wenn dies für eine Web-App mit einem Stopp in Catalyst oder Flex bestimmt wäre, hätte ich FXG in Fireworks, Flash und Illustrator durchgängig gewählt.
Nachdem die Assets zusammengestellt waren, war es an der Zeit, sich mit InDesign zu beschäftigen.
Ich dachte, ich würde ein oder zwei Minuten brauchen, um mich tiefer in dieses Thema zu vertiefen, bevor ich mich in das Projekt einbringe, denn ehrlich gesagt, wie viele von Ihnen, sah ich es als ein Drucklayout-Werkzeug, das auf der Werkzeugbank saß und nicht eins in meinem interaktiven Werkzeugkasten. Obwohl ich ein bisschen wie ein Junkie bin, frustriert mich nichts mehr, als auf der Druckseite des Zauns feine Typografie-Techniken anwenden zu können, während wir es auf der interaktiven Seite irgendwie "fälschen" mussten. Ganz zu schweigen davon, dass der Versuch, ein mehrspaltiges Layout- oder Rastersystem in Flash zu erstellen, von meinen Grafikkollegen auf der Druckseite der Straße immer wieder erwähnt wurde.
InDesign CS5 stoppt diese freundliche Nadelung. Zu den Funktionen von InDesign CS5, die ich gerade grabe, gehören:
Machen Sie keinen Fehler, Leute. Bei diesen Dingen handelt es sich nicht um Whisky-Knaller, sondern um kostenlose App-Bonbons, die der App hinzugefügt wurden, um bei Demos und Konferenzen Chöre von "Cool" aus den Fan Boyz zu sammeln. Dies sind, wie Sie gerade entdecken werden, Funktionen für die Industrie, die sich nahtlos in eine SWF- oder Flash-Datei einfügen. Tatsächlich müssen Sie für Ihre Körper nicht einmal Flash oder Catalyst berühren. InDesign-Dokumente können als gutes altes XML ausgegeben werden.
Allerdings ist dies ein aufkommender Workflow, der speziell für die Flash-Crew zusätzliche Arbeit von Ihrer Seite erfordert. Ich halte das für eine "gute Sache", denn wenn Sie sehen, ein Flash-Dokument aus InDesign herauszumachen, macht aus einem Flash-Künstler keinen. Du bekommst die nackten Knochen und wenn deine Flash-Fähigkeiten minimal sind, bist du im Grunde tot im Wasser.
Schließlich ist dies kein InDesign-Lernprogramm. Es dient dazu, Ihnen zu zeigen, wie die interaktiven Funktionen von InDesign einer Seite hinzugefügt werden und wie ein Dokument in den Formaten SWF und FL ausgegeben wird.
Lasst uns damit weitermachen…
Öffnen Sie InDesign CS5 und wählen Sie „Fenster“> „Arbeitsbereich“> „Interaktiv“, um das Bedienfeld „Interaktivität“ zu öffnen.
In groben Zügen tun die einzelnen Elemente des Panels Folgendes:
Jetzt wenden wir einen Animationseffekt auf die Beschriftung an. Wählen Sie das zu animierende Objekt aus, öffnen Sie das Animationsfenster und wählen Sie die Animation aus dem Popup-Fenster "Voreinstellung" aus. Wenn Sie das tun, passieren ein paar Dinge:
Der Bewegungspfad in grün wird auf der Seite angezeigt und eine Vorschau der Animation wird auf den Schmetterling im Vorschaufenster des Bedienfelds angewendet. Diese Bewegungspfade können mit dem Stiftwerkzeug bearbeitet werden, und ein wirklich schöner Aspekt ist, dass alle benutzerdefinierten Pfade, die Sie in Flash erstellen können, hier verwendet werden können und umgekehrt. Verwenden Sie den Namensbereich, um der Animation einen Namen zu geben, und wählen Sie aus, ob das Ereignis - Beim Laden der Seite, Klicken beim Klicken auf Seite, Beim Klicken (Selbst), Beim Überrollen (Selbst) - über das Ereignis (s) angezeigt wird.
Sie können auch die Dauer und die Häufigkeit auswählen, selbst wenn die Animation wiederholt werden soll. Im Popup-Menü "Geschwindigkeit" können Sie die Beschleunigung anwenden.
Wenn Sie ein Flash-Designer sind, sehen die Eigenschaften ziemlich vertraut aus. Mit dem Popup-Fenster "Animieren" können Sie bestimmen, wie die Animation funktioniert - von oder zu aktuellem Erscheinungsbild oder zu aktuellem Ort. Im Bereich „Animieren in“ können Sie die Drehung und Skalierung auf den Endzustand des Objekts in Bewegung anwenden.
Das Testen von Animationen oder Interaktivität in früheren Versionen von InDesign war mühsam. Sie erstellen die Animation, kompilieren die SWF-Datei und verlassen InDesign, um eine Vorschau Ihrer Arbeit im Flash Player anzuzeigen. Das Vorschaufenster fasst alle diese Schritte an einer Stelle zusammen.
Wenn Sie mit Ihrer Animation fertig sind, klicken Sie einfach auf die Schaltfläche Vorschaufenster. Das Bedienfeld wird angezeigt. Es wird zunächst leer sein. Dies liegt daran, dass InDesign eine SWF-Datei erstellt, die im Panel abgespielt wird. Wenn die Seite angezeigt wird, klicken Sie auf die Wiedergabeschaltfläche in der linken unteren Ecke. Die Beschriftung wird eingeblendet.
Wenn das Panel zu klein erscheint, ziehen Sie einfach eine Ecke heraus, um die Ansicht zu vergrößern.
Die zwölf Bilder, die wir zuvor mithilfe der Stapelverarbeitung in Fireworks CS5 vorbereitet haben, können jetzt in das Dokument eingefügt und in einer Diashow verwendet werden. Dies ist ein zweistufiger Prozess: Bringen Sie die Bilder in die Seite und richten Sie sie in ein Multi-State-Objekt aus. Hier ist wie:
Wählen Sie Bearbeiten> Platzieren, suchen Sie den Ordner mit den skalierten Bildern und wählen Sie bei gedrückter Umschalttaste alle aus, und klicken Sie auf OK. Sie sehen eine kleine "Waffe" mit einer Miniaturansicht eines Bildes. Klicken Sie darauf und das Bild in der Miniaturansicht wird auf die Seite gezogen und die "Pistole" zeigt Ihnen das nächste Bild im Stapel. Bewegen Sie alle Bilder grob dorthin, wo die Folien angezeigt werden sollen. Wenn alle Bilder ausgewählt sind, öffnen Sie das Bedienfeld Ausrichten, indem Sie die Taste F7 drücken. Richten Sie die Bilder am oberen und linken Rand aus.
Nachdem Sie den "Stapel" erstellt haben, öffnen Sie das Bedienfeld "Objektstatus" und klicken Sie auf die Schaltfläche "Auswahl in Objekt mit mehreren Status konvertieren" - die Seite mit der nach oben gerichteten Ecke am unteren Rand des Bedienfelds - und alle Bilder werden im Bedienfeld angezeigt . Geben Sie dem Objekt einen Namen und ordnen Sie die Bilder gegebenenfalls neu an, indem Sie sie im Bedienfeld auf verschiedene "Ebenen" im Stapel ziehen.
Ein Stapel ist nutzlos, wenn Sie ihn nicht zum Laufen bringen. In diesem Fall werden in Fireworks CS5 erstellte Vorwärts- und Zurückschaltflächen für die vorliegende Aufgabe importiert. Wie viele der CS5-Apps enthält auch InDesign eine Bibliothek mit "vorgerollten" Schaltflächen - "Fenster"> "Beispielschaltflächen", aber keine passt zum Design. Sie wurden mit Datei> Platzieren an die endgültige Position auf der Seite gebracht.
Um eine Schaltfläche zu erstellen, öffnen Sie das Schaltflächenbedienfeld und klicken bei ausgewähltem Objekt auf die Schaltfläche "Objekt in Schaltfläche konvertieren". Diese Schaltfläche befindet sich direkt neben dem Papierkorb im Schaltflächenbedienfeld. In diesem Fall leuchtet das Bedienfeld auf und Sie können der Schaltfläche einige Eigenschaften zuweisen.
Als Erstes geben Sie der Schaltfläche einen Namen. Als nächstes fügen Sie der Schaltfläche ein Ereignis hinzu. Es gibt sechs Ereignisse, von denen zwei ausschließlich für PDF-Projekte vorgesehen sind. "On Release" ist eine sichere Wette. Im nächsten Schritt weisen Sie einem Ereignis eine Aktion zu. Klicken Sie auf das Pluszeichen im Aktionsbereich. Eine Pop-Down-Liste wird angezeigt. Dies ist eine Diashow, daher ist es sinnvoll, die Aktion "Zum nächsten Status wechseln" zuzuweisen. Hierbei ist zu beachten, dass die Aktionen nach der endgültigen Verwendung gruppiert werden. In diesem Fall gehen wir zu SWF und Flash, damit die Auswahl funktioniert.
Wenn die Aktion ausgewählt ist, werden Sie im Schaltflächenbedienfeld gefragt, welches Objekt von der Schaltfläche gesteuert werden soll. In diesem Fall handelt es sich um den Village-Stack. Sie können auch auf das Optionsfeld "Stop at Last State" klicken, um sicherzustellen, dass der Benutzer tatsächlich beim letzten Bild im Stapel stoppt.
Wiederholen Sie diesen Vorgang für die Schaltfläche "Zurück" und testen Sie die Diashow im Vorschaubereich.
Das Hinzufügen eines Audiotracks zu einer Seite ist denkbar einfach. Sie können entweder das Menü "Datei"> "Platzieren" verwenden oder einmal auf das Medienbedienfeld klicken und die Schaltfläche "Audio- oder Videodatei einfügen" - die Schaltfläche in der rechten unteren Ecke des Bedienfelds - drücken, um das Dialogfeld "Medien platzieren" zu öffnen. Denken Sie daran, dass das einzige Audioformat, das Sie verwenden können, MP3 ist.
Sobald die Datei importiert ist, erscheint ein kleiner Audiocontainer auf der Bühne. In vielerlei Hinsicht ähnelt dieser Container der Art, wie Flash Audio auf der Bühne verwaltet. Der Container kann an beliebiger Stelle platziert werden, da er mehr Platzhalter als alles andere ist.
Im Audiofenster können Sie den Ton testen, indem Sie auf die Schaltfläche "Abspielen" klicken. Die Optionen sind etwas selbsterklärend. Wenn Sie die interaktive Route wählen, sollten Sie die ersten beiden Optionen auswählen. Andernfalls wird Ihre Audiodatei auch dann weiter abgespielt, wenn Sie die Seite verlassen.
Einfache UX-Entwurfsprinzipien besagen, dass Sie dem Benutzer beim Abspielen einer Audiodatei die Möglichkeit geben sollten, diese abzubrechen. In diesem Fall wurden in Fireworks CS5 eine Pause- und eine Wiedergabeschaltfläche erstellt und in InDesign CS5 in Schaltflächen umgewandelt. Sobald Sie die Schaltfläche mit einer Quelle verknüpfen, erkennt sie eine Audiodatei, und Sie sehen die in der Abbildung dargestellten Audiosteuerungsoptionen. Eine wirklich nette Funktion des Schaltflächenbedienfelds ist das Symbol in der unteren linken Ecke. Klicken Sie darauf und das Vorschaufenster wird geöffnet, damit Sie feststellen können, ob die Schaltfläche das tut, was Sie möchten.
Video - FLV, F4V, MP4 - kann so einfach wie eine Audiodatei zu InDesign hinzugefügt werden, und die Videoeigenschaften werden im Medienfenster festgelegt. Dennoch gibt es einige Aspekte, die Sie kennen müssen.
Sie haben zwar zwei Wiedergabemöglichkeiten, aber wenn Sie dem Benutzer einen Controller zuweisen, lassen Sie ihn nicht ausgewählt. Mit der Option Poster können Sie ein Bild aus dem Video oder sogar ein anderes Bild auswählen, das im Dokument angezeigt werden soll. In diesem Beispiel habe ich den Scrubber im Bedienfeld verwendet, um den Frame zu identifizieren, der im Layout angezeigt wird. Sie können auch einen Controller auswählen - die SkinOver-Skins von Flash sind Ihre einzige Wahl - und ob der Controller angezeigt wird oder nicht, wenn der Cursor über das Video auf der Seite bewegt wird. Sie können dem Video auch Cue-Points hinzufügen (InDesign werden Navigationspunkte genannt), oder sie können mit Adobe Media Encoder CS5 hinzugefügt werden.
Die andere Sache, die Sie über diese Videofunktion wissen sollten, insbesondere wenn Sie Video in Flash verwenden, ist, dass das Video auf der Bühne angeklickt werden muss, damit es abgespielt werden kann oder die Haut freigelegt werden kann. Es ist möglicherweise keine schlechte Idee, wenn Sie nur einen SWF-Befehl ausgeben und eine kleine Beschriftung oder ein Symbol hinzufügen, die den Benutzer dazu auffordert, auf das Bild zu klicken, um die Videowiedergabe zu starten.
Verwenden Sie schließlich das Vorschaufenster, um das Video zu testen.
In diesem Artikel habe ich Ihnen gezeigt, wie Sie alle Funktionen des interaktiven Bedienfelds von InDesign CS5 verwenden. Ich habe Ihnen gezeigt, wie Sie Schaltflächen erstellen, Audio und Video hinzufügen und einen Stapel importierter Bilder in eine Diashow verwandeln. Sie haben auch gezeigt, wie Sie mit den Tasten Audio steuern und einem Video einen Skin hinzufügen können.
Ich habe auch angegeben, wie viele Assets in Fireworks CS5 und Illustrator CS5 erstellt und für die Platzierung im InDesign CS5-Projekt vorbereitet wurden.
In der nächsten Ausgabe dieser Serie werde ich Sie durch die Schritte führen, die erforderlich sind, um ein interaktives InDesign-Dokument für die Wiedergabe in einem Browser oder für das weitere "Tweaking" in Flash auszugeben. Danke fürs Lesen!
Accentsconagua