Ein eigenes Design für Acrobat X Portfolios erstellen.

Einleitung

Dieses Tutorial ist auch als PDF in den Dateien vorhanden, die es ganz unten zum Download gibt. Deswegen taucht hier ab und an der Begriff Dokument zu diesem Post auf.

Diese Anleitung wurde auf einem Mac erstellt. Alle Schritte sind aber auch genau so auf Windows ausführbar. Die Bilder vergrößern sich auf Klick und sind dann auch besser einsehbar.

Und damit auch alles seine Richtigkeit hat: Ich habe diese Anleitung als Angestellter von Adobe geschrieben und das Copyright liegt bei der Adobe Systems GmbH.

Jetzt aber mal los:

Acrobat X Portfolios Layouts (Navigators) können durch verschiedene Designs im Aussehen angepasst werden. Adobe nennt das „Visuell Themes“.

Diese Anpassung kann auf zweierlei Wegen passieren. Die flexiblere Möglichkeit ist die Variante „Flex“ (das soll kein Wortspiel sein).

Diese kann nur im Adobe Flash Builder CS5 mit dem Navigator Compiler erstellt werden. Die einfachere Variante nennen wir kurz „Flash“.

Diese Variante ist einfach mit der CS5 zu erstellen, allerdings sind für alle verwendeten Grafiken die Positionen und Animationen im Portfolio bereits festgelegt und nicht so flexibel, wie in der „Flex“ Variante.

In dieser Anleitung geht es ausschließlich um die „Flash“ Variante.

Den „Flex“ Weg beschreiten Sie am besten, indem Sie sich das Acrobat X Portfolio SDK von Adobe Labs laden:

http://labs.adobe.com/technologies/portfoliosdk/

Voraussetzungen für diese Anleitung

Sie benötigen auf jeden Fall Adobe Flash CS5. Wenn Sie sich in Adobe Illustrator CS5 auskennen, empfehlen wir diese Variante, da Sie dort eine bessere visuelle Übersicht über die Gestaltung haben.

Dateien

In Ihrem Ordner sollten sich folgende Dateien befinden:

  • FlashDesignSkin.fla
  • MeridienSkin.ai
  • TransparentAluminum.ai

Der Ansatz über Flash CS5:

Die Datei „FlashDesignSkin.fla“ enthält einen kompletten Satz von Grafiken, die später dann im Acrobat X Portfolio die Positionen im Layout „Durchklicken“ einnehmen und die vorgegebenen ersetzen.

Öffnen Sie die Datei „FlashDesignSkin.fla“ in Flash CS5.

Jede sichtbare Grafik hat bereits einen Objekt Namen. Flash CS5 unterstützt, wie die Vorgänger Versionen, die isolierte Bearbeitung von Grafiken / Objekten. Sie können jedes Objekt in der Datei ändern, in dem Sie doppelt auf das Objekt klicken und dann oben im Datei Fenster sehen, wie der Datei-Pfad den Namen des Objektes anzeigt.

Bitte wählen Sie einmal das oberste Ordner Symbol und doppelklicken Sie auf die Datei. Nun sollte im Pfad oben „FolderSmall_Skin“ zu sehen sein.

Ändern Sie die Grafik nach Ihren Wünschen, oder ersetzen Sie diese durch eine eigene Grafik, die Sie in Flash dort erstellen.

Sie können z. B. dieses Symbol nun einfach löschen und durch eine eigene Grafik ersetzen.

Wenn Sie die Grafiken in anderen Programmen erstellt haben, können Sie diese nun auch über den Befehl „Importieren“ in Flash CS5 einfach einfügen.

Acrobat X wird später diese Grafik anzeigen, da der Name eindeutig ist und damit im Portfolio automatisch zugeordnet werden kann.

Ändern Sie nie die Namen der einzelnen Objekte/Grafiken, da das Design dann nicht mehr funktioniert wie gewünscht.

Sie finden am Ende dieses Dokumentes eine Tabelle mit allen Objekt-Namen und Ihrer Funktion im späteren Portfolio.

Sie können jederzeit über den Menü-Punkt „Datei“ > „Einstellungen für Veröffentlichung…“ eine SWF Datei ausgeben, diese in Acrobat X als Design für eine Portfolio testen und dann Änderungen in Flash CS5 vornehmen. Auch wenn die SWF Datei immer gleich heißt, kann Sie ohne Probleme die vorherige im Portfolio ersetzen.

Wie man Design SWF im Portfolio nutzt, lesen Sie bitte hier im hinteren Teil des Dokumentes nach.

Der Ansatz über Illustrator CS5 (im Zusammenspiel mit Flash CS5!):

Diese Anleitung setzt voraus, dass Sie die grundsätzliche Arbeitsweise mit Adobe Illustrator CS5 kennen.

In Illustrator CS5 haben Sie eine weit genauere Kontrolle über das endgültige Design, da in den zur Verfügung gestellten Illustrator CS5 Dateien die Anordnung dem endgültigen Portfolio nachempfunden ist.

Sie sollten mit dem Konzept der Ebenen-Verwaltung in Illustrator vertraut sein, da es verschiedene Ebene für die Einzelnen Bereiche im Portfolio gibt. So lässt sich das zu bearbeitende Objekt leichter isolieren.

Da Illustrator seit der Version CS4 das Konzept der isolierten Bearbeitung von Grafiken und Objekten aus Flash übernommen hat, ist es sehr einfach Änderungen anzuwenden, ohne andere Teile aus Versehen zu ändern.

Öffnen Sie die Datei „MeridienSkin.ai“ in Illustrator CS5.

Wenn nicht bereits offen, öffnen Sie bitte über das Menü „Fenster“ die Palette „Ebenen“.  Die Palette sollte so aussehen:

Die oberste Ebene „Non-SkinParts: Rendered by Acrobat“ ist nur zur Darstellung eines simulierten Portfolios gedacht. Diese Ebene können Sie sich einblenden lassen, um das Endergebnis visuell besser zu beurteilen. Bearbeiten müssen Sie diese nicht.

Alle anderen Ebenen enthalten jeweils Teil des Portfolios, die anhand der Ebenen-Namen identifizierbar sind. Diese Namen sind Englisch, da auch die Objekte und Grafiken in Englisch benannt sind. Ansonsten würde das Portfolio in Acrobat X die Einzelteile nicht erkennen. In der Ebenen Palette sind links zwei Reihen mit Anklickfeldern. Die erste Reihe regelt die Sichtbarkeit der einzelnen Ebenen, die zweite kann Ebenen sperren, so dass dort keine versehentlichen Änderungen vorgenommen werden können.

Ändern Sie die Sichtbarkeit auf „keine“ für alle Ebenen außer der Ebene „Buttons“ und setzen Sie ein Schloss zum Sperren für alle Ebenen außer „Buttons“.

Nun können Sie auf der Ebene arbeiten, ohne andere Objekte zu verändern.

Doppelklicken Sie auf den rechten Pfeil. Sie sehen, dass Illustrator in den Isolier-Modus wechselt. Alle bisher sichtbaren Ebenen verschwinden und oben im Dateifenster ist der Pfad zur isolierten Grafik zu sehen.


Dort sollte jetzt im Pfad „NextButton“ zu sehen sein.

Verändern Sie diesen Button nach Ihren Vorstellungen. Wenn Sie fertig sind, klicken Sie auf den Pfeil nach links, der sich im Pfad neben „NextButton“ befindet und kehren somit in das Layout zurück.

Nun können Sie die Änderungen auf den linken Pfeil anwenden, indem Sie auch dort per Doppelklick in den Isolier​modus wechseln.

Durch ein- und ausschalten der Sichtbarkeit und des Schlossen in den Ebenen können Sie sich also Objekt für Objekt  an Ihr eigenes Design heran arbeiten.

Wenn Sie zufrieden sind mit Ihrem Ergebnis, schalten Sie alle Ebenen außer „Non-SkinParts: Rendered by Acrobat“ auf „Sichtbar“ (das Auge ist im Feld zu sehen!) und versichern Sie sich, dass die Ebenen nicht gesperrt sind.

Die Ebene „Non-SkinParts: Rendered by Acrobat“ sollte gesperrt werden.

Sichern Sie Ihre Arbeit unter einem eindeutigen Namen ab!

  • Starten Sie bitte Flash CS5.
  • Wählen Sie „Neu“ aus dem Menü „Datei“.
  • Selektieren Sie den Typ „ActionScript 3.0“.
  • Im Menü „Datei“ gehen Sie bitte auf „Importieren“ > „In Bühne importieren..“

Im aufgehenden „Öffnen“ Dialog wählen Sie jetzt Ihre angefertigte Illustrator Datei aus und setzen für den Import die folgenden Einstellungen:

  • Im Feld „Zu importierende Illustrator-Ebenen prüfen:“ bitte prüfen, ob alle Ebenen aus der Illustrator Datei angewählt sind, außer der oben bereits erwähnten „Non-SkinParts: Rendered by Acrobat“.
  • Ebenen umwandeln in: Flash-Ebenen
    • Kreuzen Sie bitte die beiden ersten Punkte an:
    • Objekte auf ursprünglicher Position platzieren.
  • Bühne auf die gleiche Größe wie die Illustrator-Zeichenfläche einstellen (1280 x1024)
  • die anderen beiden Punkte bitte nicht ankreuzen.

Klicken Sie auf „OK“.

Die Illustrator Datei ist jetzt in das Flash Format umgewandelt.

Speichern Sie die Flash Datei unter einem eindeutigen Namen.

Gehen Sie wieder auf das Menü „Datei“ und dann auf „Einstellungen für Veröffentlichung…“ Dort können Sie getrost „HTML“ abwählen, denn Sie benötigen nur die „.swf“ Datei.

Im Anschluss einfach auf den Button „Veröffentlichen“ klicken und damit ist die endgültige Skin als SWF Datei für das Portfolio erstellt.

Importieren der erstellten Design Skin in Acrobat X PDF Portfolios

Um die nun erstellte Skin Datei für ein PDF Portfolio nutzen zu können, starten Sie bitte Acrobat X.

Im Begrüßungsbildschirm wählen Sie „PDF-Portfolio erstellen“.

Sollten Sie den Begrüßungsbildschirm ausgeschaltet haben, gehen Sie auf das Menü „Datei“ > „Erstellen“ > „PDF-Portfolio…“

Wählen Siedort entweder das Layout „Durchklicken“ oder „Linear“, denn nur diese Vorgaben sind mit der erstellten Flash Skin anpassbar.

Acrobat X bietet Ihnen während der Portfolio Erstellung die Möglichkeit Dateien direkt auszuwählen und zu laden. Sie können dies aber auch gern später machen.

Hinweis: die Navigation im unteren Bereich des Portfolios ist aber erst nach Zufügen einer Datei sichtbar!

In der „Layout“ Palette auf der rechten Seite in Acrobat klicken Sie bitte auf den Reiter „Design“, so dass der Teil der Palette ausklappt.

Dort ganz unten auf den Button „Benutzerdefiniertes Design importieren…“ klicken und Ihre Datei von der Festplatte hinzufügen.

Fertig ist Ihr eigenes Layout. Jetzt können Sie noch auf den Kopf-Bereich des Portfolios klicken und z. b. ein Logo hinzufügen. Dieses Logo sollte als PNG Datei mit Transparenz vorliegen. Höhe 100 Pixel.

Weitere Tutorials und Hinweise zu Acrobat X finden Sie auf

http://tv.adobe.com/de/product/acrobat-pro/

Viel Erfolg mit Ihrem angepassten Portfolio!

Hier gibt es die Dateien zum Download!

Im Nachfolgenden Teil finden Sie die Tabellen mit den genauen Bezeichnungen der einzelnen Objekte die für die Design Skins des Portfolios notwendig sind.

Objekt Name Beschreibung
IconBackground Hintergrund für alle Icons.
Größe: 30px x 30px
IconBackgroundOver MouseOver Zustand für IconBackground
Größe: 30px x 30px
InfoIcon Icon für die Metadaten Anzeige. Nicht in allen Layoutsverfügbar.
Größe: 30px x 30px
ExtractIcon Icon für den Download von Datein.Größe: 30px x 30px
DeleteIcon Icon zum Löschen von Daten. Größe: 30px x 30px
NavCard Hintergrund für die Bilder Karte der Daten.
Unterstützt 9-slice scaling*
NavCardOver MouseOver Zustand für die NavCard
Unterstützt 9-slice scaling*
NavCardSelected Ausgewählter Zustand der NavCard
Unterstützt 9-slice scaling*
CardTitleBar Hintergrund für den Kopf der NavCard
Größe: 54px Höhe
Unterstützt 9-slice scaling*
FolderTitleBar Hintergrund für die Ordner Titel
(erscheint unter dem Ordner icon)
Unterstützt 9-slice scaling*
CloseButton Schliessen knopf für die Flip Funktion. Nicht in allen Layouts verfügbar.
CloseButtonOver Überroll Zustand für CloseButton. Nicht in allen Layouts vorhanden.
Ordner Symbole
FolderSmall Grafik zur Anzeige der Ordner in der MiniNavigation des Portfolios
FolderMedium Grafik zur Anzeige der Ordner im Free Form Layout des Portfolios
FolderLarge Grafik zur Anzeige der Ordner in den Karten
Optimale Größe: 285 x 360
Hintergrund Bilder
NavBackground Hintergundbild für das Portfolio. Hinweis: diese Grafik wird zur Anzeige gestreckt, wo notwendig. Unterstützt nicht das 9-slice scaling
HeaderBackground Hintergrundbild der Kopfzeile.
Hinweis: in manchen layout nur wenn es Kopfgrafiken gibt. Größe: 100 px Höhe
MiniNavBackground Hintergrundbild für die MiniNav
File Navigation  Buttons
NextButton Bild für den „NextButton“
Größe: 50px x 50px
NextButtonOver MouseOver Zustand des „NextButton“
PreviousButton Bild für den „PreviousButton“
Größe: 50px x 50px
PreviousButtonOver MouseOver Zustand des „PreviousButton“
MiniNavigator
MiniNavSlammerBackground Hintergrund für den Auf- und Zu-Schalter der MiniNav. Größe: 80px x 28px
MiniNavSlammerBackgroundOver MouseOver für den MiniNavSlammerBackground Größe: 80px x 28px
MiniNavSlammerIcon Icon für den „Slammer button.“
hinweis: diese Grafik dreht sich. Sollte für den
„offen“ Zustand der MiniNav gestaltet werden.
MiniNavCard Anzeige der MiniNav
Unterstützt 9-slice scaling*
MiniNavCardOver MouseOver für die MiniNavCard
MiniNavCardSelected Auswahl Zustand für die MiniNavCard

*Infos zu 9 Slice Scaling:

http://help.adobe.com/de_DE/illustrator/cs/using/WSD315BB06-CB18-4b70-BC9C-04E6CA6E64E6a.html