Seriengrafiken mit Fireworks MX

von Fries Websolutions

Kryptischer Name, aber mit praktischer Funktion. Fireworks neuer Data-Driven Graphic Wizard erstellt Seriengrafiken in Sekundenschnelle und ermöglicht auch aufwendige Templates.

Fireworks MX bietet jetzt erstmals die Möglichkeit Elemente als variabel zu bezeichnen und diese mit Daten einer XML-Datei auszufüllen. So kann man eine einzige Vorlage automatisch mit verschiedenen Grafiken und Texten füllen lassen, um beliebig viele unterschiedliche Ergebnisse zu erhalten.

Man kann diese Funktion ähnlich einem Serienbrief für personalisierte Grafiken nutzen, aber auch komplexe Designvorlagen entwerfen, und diese mit verschiedenen Grafiken füllen, um so verschiedene Konzeptvorschläge ohne viel Arbeit zu erstellen. Wir werden in diesem Workshop den Aufbau einer Vorlage, der dazugehörigen XML-Datei und des Data-Driven Graphic Wizard durchgehen.

Am Anfang steht die Vorlage, das Template. Man kann dafür eine neue Grafik in Fireworks erstellen oder einfach ein existierenden Designs modifizieren. Letzteres ist sehr schnell gemacht, denn alle später zu verändernden Elemente werden einfach als Variablen gekennzeichnet, ansonsten ändert sich nichts. Variable Elemente werden durch einen Namen zwischen geschwungenen Klammern bezeichnet, z.B. {Variable}. Drei Arten von variablen Elementen stehen Ihnen zur Verfügung:

Text
Man kann in jedem Text einfach eine Variable einfügen. Fireworks wird später an dieser Stelle die einzusetzenden Texte platzieren ohne den Rest des Textbereichs zu verändern. Denkt man bei der Platzierung von Textvariablen jedoch an den Größenunterschied zwischen dem in der Vorlage erscheinenden Namen der Variable und dem tatsächlichen später erscheinenden Text.

Grafik
Grafiken die variabel eingefügt werden sollen, benötigen ein gleichgroßes Element, an dessen Stelle sie treten können. Dies können Bitmap-Grafiken, aber auch ein einfaches Rechteck sein. Man kann ohne Qualitätsverlust nicht verschieden große Grafiken der gleichen Variable zuweisen. Grafikvariablen werden im Namensfeld des Elements ausgezeichnet, sie stehen anstatt eines Namens.

Link
Hotspots können mit variablen Links ausgestattet werden. Insbesondere bei Grafiken die innerhalb eines Projekts für die verschiedenen Links eingesetzt werden, lohnt sich die Nutzung des Graphic Wizard. Man erstellt in dem Fall die Grafik, trägt die notwendigen Links in eine XML - Datei ein und läßt Fireworks die einzelnen Grafiken automatisch mit HTML-Code exportieren. Um einen Hotspot mit einem variablen Link auszustatten, trägt man im Feld Link des Hotspots eine Variable ein.

DLinks oben befindet sich ein normales Textfeld, das unter anderem eine Variable beinhaltet. Rechts unten steht ein weiteres Textfeld, das mit einem Hotspot überlagert ist, dessen Link ebenfalls eine Variable enthält. Das graue Rechteck im Hintergrund dient dann als Platzhalter für die Grafiken und trägt daher in seinem Namen eine Variable. Man kann natürlich hier auch schon die erste echte Grafik einfügen um ein besseres Gefühl für das Template zu bekommen, aber es ist eleganter die Vorlage nur mit dem Nötigsten auszustatten, um später keine Verwirrung aufkommen zulassen.

Der nächste Schritt ist dann eine passende XML - Datei, die die einzufügenden Daten enthält. Der Data-Driven Graphic Wizard interpretiert nur wenige XML - Tags, daher ist der Aufbau der Datei ziemlich einfach.

Jede XML - Datei beginnt mit der XML - Definition in der ersten Zeile. Der Rest der Datei besteht für diesen Zweck nur aus einem einzigen <records> - Tag, das weitere <record> - Tags einschliesst. Jeweils eines für einen Datensatz. Innerhalb von <record> muss es für jede Variable ein Tag mit dem Namen der Variable geben, das die tatsächlichen Daten einschließt. Man muß selbst dafür sorgen, das man dem richtigen Elementtyp (Text, Link, Grafik) die passenden Daten zuordnet, also reiner Text, eine Linkadresse oder die lokale Adresse einer Grafikdatei. Fireworks kann dies nicht unterscheiden. Denken Sie daran, dass in XML jedes Tag auch wieder geschlossen werden muss.

Die XML-Datei, die wir für unser Beispiel nutzen:

<?xml version="1.0" encoding="iso-8859-1"?>
<records>
<record>
<TutName>Fireworks MX</TutName>
<TutBg>fwlogo.png</TutBg>
<TutLink>http://www.graphicwizard.tut/fireworks</TutLink>
</record>
<record>
<TutName>ColdFusion MX</TutName>
<TutBg>cflogo.png</TutBg>
<TutLink>http://www.graphicwizard.tut/coldfusion</TutLink>
</record>
<record>
<TutName>Dreamweaver MX</TutName>
<TutBg>dwlogo.png</TutBg>
<TutLink>http://www.graphicwizard.tut/dreamweaver</TutLink>
</record>
</records>

Sie enthält drei Datensätze, aus denen Fireworks in Verbindung mit dem Beispiel-Template drei fertige Grafiken erzeugen kann.

Wenn man seine XML - Datei fertig hat, kann man mit der Grafikerzeugung beginnen. Starten Sie den Data-Driven Graphic Wizard unter Commands. Der Wizard funktioniert nur, wenn man eine seit dem letzten Speichern, unveränderte Vorlage nutzt. Hier sind die sechs Schritte bis zur Funktion.

Schritt 1
Im ersten Bildschirm des Graphic Wizard, erhält man nun eine Zusammenfassung der im aktuellen Dokument enthaltenden Variablen. Wenn eine fehlt, brechen sie ab und überprüfen sie die Variablen auf Tippfehler. Geben sie im gleichen Bildschirm die lokale Adresse der XML - Datei, sowie das Verzeichnis in dem die einzusetzenden Grafikdateien liegen an. Alle Grafikdateien für einen Durchgang müssen im gleichen Verzeichnis liegen.

Schritt 2
Im zweiten Schritt gibt Fireworks die Möglichkeit durch die in der XML - Datei gefundenen Datensätze zu blättern und sie zu überprüfen.

Schritt 3
Jetzt auswählen, ob man alle Datensätze abarbeiten lassen will oder nur einzelne.

Schritt 4
Im diesem Schritt ordnet Fireworks im unteren Fenster den Variablen entsprechende Datensätze zu. Sollte es vorkommen das Datensätze oder Variablen übrig bleiben die kein gleichnamiges Gegenstück haben, werden sie in den oberen Fenstern aufgeführt und man kann sie hier einander zuweisen. So kann man auch fremde XML - Dateien nutzen, ohne diese umschreiben zu müssen.

Schritt 5
Nun muß man entscheiden welchen Namen die Ausgabedateien tragen sollen. Dem gewählten Namen wird von Fireworks jeweils eine Nummer angehängt. Die Nummerierung kann man individuell abstimmen. Außerdem kann man hier entscheiden, ob die fertigen Grafiken gleich weiter exportiert und z.B. als GIF oder JPEG-Datei ausgegeben oder für die spätere Bearbeitung wiederum als Fireworks PNG gespeichert werden sollen. Natürlich muß man noch ein Verzeichnis angeben, in das die fertigen Grafiken gespeichert werden sollen.

Schritt 6
Im sechsten und letzten Schritt fasst der Wizard schließlich zur Übersicht noch einmal alle gewählten Einstellungen zusammen. Sobald man ihn starten, erzeugt er die gefüllten Grafiken und hinterlegt sie im entsprechenden Verzeichnis. Als Beispiel die mit unserem Template und der oben aufgeführten XML-Datei erzeugten Grafiken: