Arbeitsabläufe in Flash Catalyst

Adobe Flash Catalyst CS5 ist ein Designtool, mit dem Benutzeroberflächen von Anwendungen und interaktive Inhalte schnell und ohne Programmierung erstellt werden können. Einsatzfelder sind beispielsweise interaktive Werbung, Produktleitfäden, Designportfolios und komplexe Benutzeroberflächen. Sie beginnen mit einem Projektplan und importieren dann Bildmaterial, das in Adobe Photoshop, Adobe Illustrator oder Adobe Fireworks erstellt wurde. Nach dem Importieren des Bildmaterials und sonstiger Elemente definieren Sie Seiten (Bildschirmseiten) und interaktive Komponenten wie Navigationsschaltflächen und Bildlaufleisten. Schließlich fügen Sie Interaktionen hinzu für Übergänge zwischen Seiten bzw. Komponentenstatus, URLs für den Besuch von Webseiten oder die Steuerung von Animationen und Videos. Zum Schluss veröffentlichen Sie das Projekt für das Web oder den Desktop. Flash Catalyst-Projekte können zur weiteren Entwicklung in Adobe Flash Builder geöffnet werden, z. B. damit ein Entwickler die Anwendung mit einer Datenquelle verbinden kann.

Arbeitsabläufe

Bei Flash Catalyst-Anwendungen werden zwei Haupttypen unterschieden: Microsites und datenorientierte Anwendungen.

In diesem Dokument wird unter einer Microsite eine Anwendung verstanden, die mit der Veröffentlichung durch Flash Catalyst abgeschlossen ist. Weitere Entwicklungsschritte sind nicht erforderlich. Eine datenorientierte Anwendung muss dagegen weiterentwickelt werden, z. B. durch die Integrierung von externen Datendiensten oder Webservices. Die abschließende Entwicklung erfolgt durch einen Flex-Entwickler in Adobe Flash Builder.

Die Arbeitsabläufe beim Design von Microsites und datenorientierten Anwendungen sind einander sehr ähnlich.

Arbeitsablauf für Microsites

Arbeitsablauf für Designer und Entwickler von datenorientierten Anwendungen

Schritte des Arbeitsablaufs

Halten Sie diesen allgemeinen Arbeitsablauf ein, wenn Sie Microsites und datenorientierte Anwendungen erstellen.

Anwendung planen
Beginnen Sie mit einer detaillierten Projektspezifikation. Darin wird jede Seite bzw. jeder Bildschirm beschrieben, einschließlich Bildmaterial und interaktive Komponenten, Benutzernavigation sowie Status der Komponenten. Die Spezifikation beschreibt weiterhin die gegebenenfalls verwendeten Datenlistenkomponenten, mit denen externe Daten abgerufen und angezeigt werden.

Bildmaterial, Video und Sound erstellen bzw. beschaffen
Erstellen Sie das Bildmaterial, Videos und Sounddateien. Erstellen Sie in Adobe Illustrator, Photoshop oder Fireworks ein Designdokument oder eine Komposition mit mehreren Ebenen.

Bildmaterial, Video und Sound integrieren
Starten Sie Flash Catalyst und integrieren Sie das Bildmaterial mit den Ebenen in Flash Catalyst. Sie können auch einzelne Grafikdateien importieren oder einfache Grafiken mithilfe der integrierten Vektor-Zeichenwerkzeuge erstellen. Importieren Sie weitere Elemente wie Video, Sound und SWF-Inhalte. Für datenorientierte Komponenten wie Datenlisten sollten Sie ein typisches Beispiel der Daten (Text oder Bilder) importieren. Weitere Informationen hierzu finden Sie unter Importieren von Bildmaterial.
In Flash Catalyst importiertes oder erstelltes Bildmaterial können Sie in Illustrator oder Photoshop starten und bearbeiten und anschließend wieder in Flash Catalyst übernehmen. Die integrierte Bearbeitung erweitert die Zeichen- und Grafikbearbeitungsfunktionen von Flash Catalyst und verbessert den iterativen Designprozess. Weitere Informationen finden Sie unter Integrierte Bearbeitung.

Seitenstatus erstellen und modifizieren
Erstellen Sie die Seiten entsprechend den Vorgaben der Projektspezifikation. Weitere Informationen finden Sie unter Seiten und Status.

Interaktive Komponenten erstellen und Komponentenstatus definieren
Konvertieren Sie Bildmaterial in vorgefertigte Komponenten (Schaltflächen, Bildlaufleisten, Datenlisten usw.). Häufig verwendete Komponenten mit allgemeinem Aussehen können Sie über das Bedienfeld „Wireframe-Komponenten“ schnell hinzufügen. Erstellen Sie für Verhalten, das nicht durch integrierte Komponenten bereitgestellt wird, benutzerdefinierte Komponenten. Weitere Informationen finden Sie unter Komponenten.

Verwenden Sie für das Design von Datenlistenkomponenten in datenorientierten Anwendungen Entwurfszeitdaten. Als Entwurfszeitdaten können Sie simulierte Inhalte verwenden, z. B. musterhafte Datenbankdatensätze oder Bilder, ohne hierfür eine Verbindung zum Backend-System herstellen zu müssen. Der Flex-Entwickler ersetzt später die Entwurfszeitdaten durch echte Daten aus einer Datenbank oder einem Webservice. Weitere Informationen über Entwurfszeitdaten finden Sie unter Datenlisten und Bedienfelder mit Bildlauf.

Komponenten können mehrere Status aufweisen. Eine Schaltfläche hat z. B. die Status „normal“, „darüber“, „gedrückt“ und „deaktiviert“. Erstellen bzw. modifizieren Sie die verschiedenen Status der interaktiven Komponenten gemäß Projektspezifikation.

Hinweis: Die Arbeitsschritte für die Erstellung von Seitenstatus und interaktiven Komponenten sind austauschbar. Einige Designer bevorzugen es, zuerst die interaktiven Komponenten zu erstellen und diese anschließend den Seiten und Status hinzuzufügen.

Interaktionen und Übergänge definieren
Fügen Sie Interaktionen hinzu, die definieren, was bei einer Interaktion des Benutzers mit der Anwendung geschehen soll. Sie können z. B. festlegen, dass nach Klicken des Benutzers auf eine Schaltfläche ein Seiten- bzw. Komponentenstatus in einen anderen Status übergeht. Sie können auch Interaktionen hinzufügen, durch die eine Animation abgespielt, eine Videowiedergabe gesteuert oder eine URL geöffnet wird. Im Bedienfeld „Zeitachsen“ können Sie glatte, animierte Übergänge zwischen Seiten- und Komponentenstatus hinzufügen und modifizieren. Weitere Informationen zu Interaktionen finden Sie unter Interaktionen. Weitere Informationen zu Übergängen finden Sie unter Übergänge und Aktionssequenzen.

Projekt testen und veröffentlichen
Wenn die Erstellung einer Microsite beendet ist, können Sie das fertige Projekt als Web- oder Offlineanwendung veröffentlichen. Weitere Informationen hierzu finden Sie unter Veröffentlichen.

Projekt für einen Flex-Entwickler freigeben
Speichern Sie eine datenorientierte Flash Catalyst-Projektdatei (FXP) zur weiteren Entwicklung in Adobe Flash Builder. Exportieren Sie die Flash Catalyst-Projektbibliothek. Durch das Exportieren eines Bibliothekspakets wird eine Datei erstellt, die sämtliche Bibliotheksobjekte des Projekts enthält. Dieses Paket wird als FXPL-Datei gespeichert. Weitere Informationen zum Exportieren von Flash Catalyst-Bibliotheken finden Sie unter Flash Builder-Integration.

Neues Flash Catalyst-Projekt starten

Sie haben zwei Möglichkeiten, ein neues Projekt zu beginnen:

  • Sie starten mit einer leeren Zeichenfläche und erstellen die Anwendung. Dieser Ansatz ist sinnvoll für den raschen Entwurf von Benutzeroberflächen mithilfe von Wireframe-Komponenten. Catalyst stellt Wireframe-Komponenten, Zeichenwerkzeuge und Importoptionen für verschiedene Medientypen bereit, sodass Prototypen schnell entwickelt werden können.

  • Importieren Sie ein fertiges Designdokument als in Adobe Photoshop oder Illustrator erstelltes Bildmaterial mit Ebenen oder als ein aus Fireworks exportiertes Design. Bei diesem Ansatz können Sie das Design in der Adobe Creative Suite-Anwendung Ihrer Wahl erstellen und das Bildmaterial rasch in eine funktionsfähige interaktive Anwendung konvertieren.

Projekt mit leerer Zeichenfläche beginnen:

  1. Starten Sie Flash Catalyst. Wählen Sie im Startbildschirm im Abschnitt „Neues Projekt erstellen“ die Option „Adobe Flash Catalyst-Projekt“.

    Hinweis: Ist bereits ein Projekt geöffnet, wählen Sie „Datei“ > „Neues Projekt“, um ein neues, leeres Projekt zu starten.
  2. Benennen Sie das Projekt im Dialogfeld „Neues Projekt“, geben Sie Werte für Größe sowie Farbe der Zeichenfläche ein und klicken Sie auf „OK“.

    Jetzt haben Sie ein neues Projekt mit einer leeren Zeichenfläche. Standardmäßig ist der Arbeitsbereich „Design“ geöffnet. Erstellen Sie Ihre Anwendung, indem Sie Bildmaterial importieren, Seiten hinzufügen, Komponenten erstellen sowie Interaktionen und Übergänge hinzufügen.

    Hinweis: Sie können die Einstellungen der Zeichenfläche über „Ändern“ > „Einstellungen der Zeichenfläche“ ändern.

Projekt starten durch Importieren von Bildmaterial in ein Designdokument mit mehreren Ebenen:

  1. Starten Sie Flash Catalyst.

  2. Wählen Sie im Startbildschirm unter „Neues Projekt von Designdatei erstellen“ den zu importierenden Dateityp. Sie haben folgende Optionen: Adobe Illustrator AI-Datei, Adobe Photoshop PSD-Datei, FXG-Datei (FXG-Dateien können aus Adobe Fireworks sowie anderen Anwendungen exportiert werden).

    Hinweis: Ist bereits ein Projekt geöffnet, wählen Sie „Datei“ > „Importieren“ > „<Dateityp>“.

    Das gesamte Bildmaterial des Designdokuments wird zum neuen Flash Catalyst-Projekt hinzugefügt. Das Bedienfeld „Ebenen“ stellt die Ebenenstruktur des importierten Dokuments dar und wahrt die Integrität des ursprünglichen Entwurfs.

    Erstellen Sie Ihre Anwendung, indem Sie Seiten hinzufügen, Komponenten erstellen sowie Interaktionen und Übergänge hinzufügen.

    Weitere Informationen hierzu finden Sie unter Importieren von Bildmaterial.