HowTo:
Die Fireworks 3 - Director 8 - Connection
|
|
Home
Workshop-Seite
english version not
yet available
Download
Fireworks Import Xtra
|
Die Schnittstelle vom
Grafiker zum Director-Programmierer ist - so kann ich aus eigener
leidvoller Erfahrung sagen - häufig konfliktbeladen. Zumeist
kommunizieren beide auf unterschiedlichen Ebenen, und oft führt
das zu ineffektiven Lösungen und beträchtlichem Mehraufwand
bei einem der Beteiligten.
Es gibt einige wenige
Tools, die sich dieser Schnittstelle annehmen, allen voran Photocaster
(verfügbar seit Director 6), ein Xtra, das die Ebeneninformationen
aus Photoshop-Files in Director verfügbar macht und einen Darsteller
pro Ebene anlegt. In Director 7 und 8 wird dabei die Transparenzinformation
der Ebene optional als Alpha-Information im Darsteller angelegt.
Von Macromedia wurde kurz
nach Erscheinen von Director 8 das "Fireworks Import Xtra"
vorgestellt, das für die Verbindung von Fireworks 3 zu Director
8 einen sehr spannenden Ansatz bietet. Da das Studio-Paket von Director
8 zudem Fireworks 3 enthält und das Xtra gratis ist, bleibt
für alle Beteiligten nur eines zu tun: Fireworks lernen
;-)
•
Kurzvergleich
Photocaster - FW3-Import-Xtra
•
Arbeitsbeispiel
•
Generelle Anmerkungen
•
Macromedias
Online-Tutorial
|
 |
|
|
•
Photocaster vs. FW3-Import-Xtra
| Photocaster
2 |
Fireworks
Import Xtra |
|
-
Import-Xtra
- öffnet Photoshop-Dateien
- legt pro Ebene einen Darsteller an
- Import mit 8, 16, 24 oder 32 Bit Farbtiefe
- 32-Bit-Import nutzt Ebenentransparenz
- Preis: ca. 200 US-$ pro Plattform
- Hersteller: medialab
|
-
Import-Xtra (plus Fireworks-Export-Skripte)
- öffnet Fireworks-HTML
- legt pro Bildelement (Frame/Slice/Layer) einen Darsteller
an, je nach Exportoption in Fireworks
- Import von PNGs mit 32 Bit (inkl. Alpha)
bzw. 24 / 16 Bit.
- Transparenz wird genutzt
- Preis: gratis
- Hersteller: Macromedia
|
|
Ablauf
- PSD-Dateiformat ist direkt importierbar, Ebenen können
beim Import ausgewählt werden.
|
Ablauf
- spezieller Export aus Fireworks als HTML und PNGs; Import
aller Elemente durch Auswahl des HTML-Files
vgl. hier. |
|
Spezielle
Features
- Rendering der Ebenen auf Hintergrund (falls kein Alpha importiert
wird)
- separate Alpha-Darsteller möglich
- Import-to-Score (direktes Platzieren ins Drehbuch)
|
Spezielle
Features
- Übernahme der Fireworks-Skripte als Lingo-Behaviors
- Funktionstest bereits in Fireworks möglich
- Import-to-Score (direktes Platzieren ins Drehbuch) |
| Vergleich
Teil 2... |
|
|
|
|
| Photocaster
2 |
Fireworks
Import Xtra |
Workflow
1
(Beispiel: Import eines komplexen Menü-Screens mit Buttons,
Rollovers etc.) |
|
-
üblicher Arbeitsablauf erfordert zwei ganz unterschiedliche
Photoshop-Dateien: eine mit den "grafischen" Ebenen,
die der Grafiker für die gewünschten Effekte im
Artwork benötigt, und eine mit "funktionalen"
Ebenen, die für den Import in Director geeignet sind.
-
großer Abstimmungsbedarf und/oder Nachbearbeitung in
Director nötig.
-
Benennungsregeln nötig.
|
-
In Fireworks können auf beliebig vielen Ebenen die "grafisch"
notwendigen Informationen untergebracht werden. Importiert
werden nicht diese Ebenen, sie können also ohne Probleme
erhalten bleiben. Die gesamte funktionale Unterscheidung geschieht
durch "Slices" und "Frames" - d.h. die
Fireworks-Datei enthält sowohl ein "Schnittmuster"
(die Information, wie das Gesamtbild auseinandergeschnitten
werden muß), als auch die unterschiedlichen States (auf
mehreren Frames).
-
Funktionalität ist dank Fireworks-Behaviors direkt im
Grafik-Programm zu überprüfen (insbesondere Rollover-
und Klickeffekte).
-
Interaktivität kann in Director mitimportiert werden,
d.h. passende Lingo-Behaviors werden angelegt: der Import
ist in Director sofort funktional.
|
Workflow
2
(Beispiel: Grafikelemente, die in einer Ebenendatei lediglich
"auf Stand" gebracht werden) |
|
-
Photoshop-Ebenendatei mit Photocaster direkt aus Director
öffnen und Ebenen importieren, Auswahl der Ebenen und
gewünschte Farbtiefe direkt beim Import angeben
|
-
Export der Elemente aus Fireworks, Import aller Ebenen in Director
(PNG bzw. 32-Bit-Darsteller) |
|
nötiges
Know-How
- Photoshop-Ebenen
|
nötiges
Know-How
- Fireworks 3-Kenntnisse (v.a. Slicing, Frames, am vorteilshaftesten
auch die in Fireworks 3 neuen Features wie Button-Symbole,
Behaviors etc.)
|
|
|
|
|
•
Arbeitsbeispiel
So
erstellen Sie komplexe Menüscreens in Fireworks und exportieren
sie zu Director 8. (Klicken sie auf die Bilder, um Abbildungen in
Originalgröße zu erhalten).
Das
Arbeitsbeispiel nutzt die Datei "Lehrgang_Ende.png", das
sich im Verzeichnis "Lehrgang" Ihrer Fireworks 3-Installation
befindet.
(1)
Vorbereitung in Fireworks
 |
(1.1)
Der Buttoneditor in Fireworks 3.
Einen
neuen Button erstellen Sie mit dem Menü "Einfügen
/ Neue Schaltfläche...". Buttons, die auf diese
Weise erstellt werden, können später exportiert
werden.
Im
Bild sehen Sie auch den Fireworks-Verhaltensinspektor. Buttons
haben bereits Standard-Behaviors zugewiesen.
Einen
alternativen Weg, Buttons zu erstellen, sehen Sie in (1.4).
|
 |
(1.2)
Rollover-Effekte können auch außerhalb derButtons
angelegt werden. In dieser Abbildung sehen Sie neben den beiden
Buttons einen Slice mit Textinformationen, der bei Rollover
gegen eine andere Grafik ausgetauscht werden soll. |
 |
(1.3)
Dafür wird ein neuer Frame angelegt, in dem das Austauschbild
gestaltet werden kann (im gleichen Slice-Bereich). Bei Rollover
über den "gifts"-Button soll also die Bildinformation
aus Frame 2 das Bild aus Frame 1 ersetzen.
(1.4
- unten) Im Behavior-Inspektor von Fireworks läßt
sich diese Zuordnung anhand der Slice-Übersicht festlegen.
|
 |
|
|
|
|
(2) Export aus Fireworks
| |
(1.5)
Ist das Screen-lay-out in Fireworks fertiggestellt und - inklusive
Interaktionen - getestet, sind zwei Schritte für den
Export nötig:
1.
Im Menü "Befehle: Setup for Director" muß
der Befehl "Slices" ausgeführt werden. Damit
werden die Exportoptionen für das Dokument und alle Slices
auf PNG 32 gesetzt. Der Web-Layer in Fireworks muß dafür
eingeschaltet sein.
|
 |
 |
2.
Danach betätigen Sie den Exportieren-Befehl, in dessen
Dialogfeld bereits die richtigen Parameter eingestellt sein
sollten (Segmentobjekte verwenden / HTML-Einstellungen: Stil:
Director).
Exportieren
Sie das Firworks-Dokument.
|
| |
|
|
|
|
•
Und noch
einige generelle Anmerkungen:
(1)
Im Vergleich zu Photocaster, wo Photoshop-Dateien direkt geöffnet
und die Layers als Darsteller importiert werden können, ist
der von Macromedia vorgeschlagene Weg doch recht umständlich.
Es gibt keine direkte Importmöglichkeit von PNG-Layers.
Der Weg führt immer über den Fireworks-Export.
(2)
In Director 7 scheinen einige Features nicht zu funktionieren, insbesondere
das automatische Zuweisen der Behaviors. Der oben beschriebene Weg
wurde nur auf Director 8 getestet.
(3)
Es gibt leider keine editierbaren Presets für die Behaviors,
die das Xtra anlegt. Anders formuliert: Macromedia hat in das Import-Xtra
für Director die Behaviors hardgecodet; dies ist ein denkbar
schlechter Weg, denn er erlaubt einem versierten Anwender nicht,
eigene Behaviors für den Fireworks-Import zu nutzen. Die hardgecodeten
Behaviors sind zudem "non-standard", sprich, sie entsprechen
teilweise noch nicht einmal den Macromedia-eigenen Vorgabn für
Behaviors.
(4)
Wenn in einen Drehbuchbereich importiert wird, in dem bereits Sprites
existieren, so können Konflikte auftreten (kürzere Sprite-Spans
etc.). Ähnliches gilt, wenn bereits ein Frame-Behavior existiert.
Wählen sie einen freien Drehbuch-Bereich aus, bevor Sie importieren.
(5)
Das Xtra legt recht willkürlich die Länge (Span) der Sprites
an, die neu generiert werden. Dies läßt sich umgehen,
wenn Sie vor dem Import einen Drehbuchbereich von der Länge
auswählen, die die importierten Sprites ausfüllen sollen.
•
Wird der
Fireworks-Import das Photocaster-Xtra ersetzen?
Photocaster
hat den besseren Workflow (direkter Import); und es hat den Vorteil,
daß Photoshop das verbreitetere Programm ist. Der Fireworks-Import
ist umständlicher, aber in Teilbereichen (vgl. Arbeitsbeispiel)
auch deutlich umfassender als Photocaster.
Wenn
Ihr Grafiker bereits vertraut ist mit Fireworks 3, dann sollte er
möglicherweise auch die Director-Grafikanlieferung mit Fireworks
und der Fireworks-Director-Connection erledigen.
joachim
gola
|
|
|
