Im ersten Teil zur Public Beta von Adobe Flash Catalyst habt Ihr ein paar Infos zu Installation und Interface des Programms erfahren. Nun ist es höchste Zeit eine interaktive Anwendung zu erstellen.
In diesem Artikel lernt Ihr Schritt für Schritt eine dreiseitige Catalyst Anwendung mit Navigation zu erstellen. Da sich Catalyst in erster Linie an Designer wendet geht alles sehr schnell und einfach.

Demo anschauen

1. Photoshop-Datei vorbereiten

Über die bereits kennen gelernten Werkzeuge von Catalyst lassen sich simple Grafiken im Handumdrehen erstellen. Für dieses Tutorial nutzen wir jedoch eine Photoshop-Datei mit drei Screenshots dieser Seite als Grundlage. Diese Datei beinhaltet alle drei Screenshots, je einen auf einer Ebene. Um Euch einen besseren Anhaltspunkt zu geben und Zeit zu ersparen könnt Ihr Euch alle verwendeten Dateien zu diesem Tutorial hier herunterladen.

Download der Demo-Dateien

2. Dateien importieren und positionieren

Zunächst erstellen wir eine neue Catalyst-Datei. Dazu klickt Ihr im Willkommens-Screen des Programms auf "Adobe Flash Catalyst Project" und gebt im nachfolgenden Screen einen Dateinamen sowie eine Breite und Höhe von 400 Pixeln ein. Als Hintergrundfarbe wählt Ihr ein dunkles Grau (#1f252c). Klickt dafür zunächst auf das Farbfeld und tragt anschließend im oberen Bereich den Hexadezimalwert der Farbe ein. Leider scheint Copy-and-Paste (noch?) nicht zu funktionieren.

Als nächstes wollen wir unsere vorbereiteten Photoshop-Datei importieren. Dafür wählt Ihr aus der Programmleiste "Datei > Bildmaterial importieren" und sucht anschließend die entsprechende Photoshop-Datei aus. Im darauf folgenden Dialog stellt Ihr überall "Auf eine Ebene reduzieren" ein. Catalyst importiert nun alle drei Ebenen in einen neuen Ordner.

Positioniert nun die Screenshot-Ebenen zentriert auf Eurer Arbeitsfläche. Achtet bitte darauf, dass die Ebenen sich nicht wie aus Photoshop gewohnt verhalten. Die gesamte Funktionalität erinnert eher an Illustrator wo eine Ebene mehrere Objekte enthalten kann. Habt Ihr eine oder mehrere Ebenen/Objekte markiert könnt Ihr über [Cmd] + [Klick]/[Rechtsklick] auf die entsprechende Ebene in der Arbeitsfläche das Kontextmenü öffnen. Hier wählt Ihr anschließend "Ausrichten > Horizontal zentrieren/Vertikal zentrieren" um eine automatische Ausrichtung anzuwenden.

3. Navigationsflächen gestalten

Wählt nun das Ellipse-Werkzeug und erstellt eine beliebige Form. Anschließend stellt Ihr sicher, dass die Form auf der Arbeitsfläche markiert ist und vergebt im Bedienfeld Einstellungen folgende Werte: Als Breite und Höhe (W, H) wählt Ihr 15 Pixel. Anschließend deaktiviert Ihr über einen Klick auf das weiße Feld mit dem Querstrich den "Strich" (Kontur). Als Füllfarbe vergebt Ihr ein mittleres Grau (#808080). Positioniert den Kreis anschließend mittig unter dem Screenshot. Über "Edit > Kopieren" [Cmd/Strg] + [C] und anschließend "Edit > Einfügen" [Cmd/Strg] + [V] erstellt Ihr eine Kopie des Kreises. Verschiebt diesen links neben den ersten und erstellt anschließend eine zweite Kopie die Ihr rechts des Quellkreises positioniert.

4. Schaltflächen erstellen

Wir haben nun alle Elemente die benötigt werden erstellt, jetzt fehlt nur noch die Interaktion. Markiert zunächst den linken Kreis und wählt anschließend aus der Programmleiste "Fenster > HUD" [F7]. In nun angezeigten schwebenden Bedienfeld, dem sog. Head Up Display (HUD), wählt Ihr unter "Convert Artwork" "Bildmaterial in Komponente konvertieren > Schaltfläche". Euer Kreis wurde nun automatisch in eine Schaltfläche umgewandelt.

Wie aus Flash bekannt verfügen Schaltflächen über verschiedene Zustände die auch alle bereits im HUD angezeigt werden. Wählt hier nun "Darüber" aus; im Bereich der Seiten/Statusanzeige ganz oben im Programm werden nun die verschiedenen Zustände angezeigt. Klickt Ihr einen der Zustände an, so könnt Ihr die Eigenschaften des Kreises innerhalb des ausgewählten Zustandes verändern. Vergewissert Euch, dass der Zustand "Darüber" sowie der Kreis auf der Arbeitsfläche markiert ist und vergebt anschließend in den Einstellungen als Füllfarbe ein etwas helleres Grau (#d8d8d8). Anschließend wechselt Ihr in den Status "Gedrückt" und vergebt als Füllfarbe weiß (#ffffff). Der Status "Deaktiviert" kommt in diesem Tutorial nicht vor und muss daher nicht weiter beachtet werden.
In der schwarzen Leiste unterhalb der Status-Anzeige könnt Ihr über den kleinen Pfeil zurück in die Ausgangsdarstellung navigieren. Alternativ gelangt Ihr über einen Doppelklick auf der Arbeitsfläche dorthin. Wählt nun nacheinander die anderen beiden Kreise aus, wandelt sie ebenfalls über das HUD in eine Schaltfläche um und gestaltet anschließend die verschiedenen Zustände.

5. Seiten erstellen

Nun müssen wir die verschiedenen Screens unseres Tutorials erstellen. Stellt zunächst sicher, dass Ihr Euch direkt in der höchsten Statusebene befindet und nicht noch innerhalb einer Schaltfläche arbeitet. Dort wo zuvor noch die verschiedenen Stadien der Schaltflächen gewählt werden konnten findet Ihr nun eine Auflistung der unterschiedlichen Seiten Eures Projektes; in diesem Fall eine.
Erstellt nun zwei neue "doppelte Stadien" über den Button direkt unterhalb der Statusanzeige. Die verschiedenen Stadien verhalten sich genauso wie die Stadien einer Schaltfläche. Markiert zunächst den mittleren Status und blendet anschließend in der Ebenenpalette den Screenshot "Daylight" aus. Anschließend wechselt Ihr in den dritten Status und blendet dort alle Screenshots bis auf "Winter" aus. Per Klick auf die Stadien könnt Ihr nun die einzelnen Seiten des Projektes kontrollieren.

6. Buttons mit Stadien verknüpfen

Im vorletzten Arbeitsschritt verknüpfen wir die einzelnen Seiten bzw. Stadien mit den drei zuvor erstellten Schaltflächen. Markiert die linke Schaltfläche, sowie die erste Seite und klickt anschließend im HUD [F7] auf das Plus-Icon neben "Benutzerdefinierte Interaktionen". Im folgenden Menü wählt Ihr "On Click" aus. Es erscheint eine weitere Zeile im HUD in welcher Ihr nun festlegen könnt was passieren soll wenn geklickt wird: Wählt im linken Auswahlfeld "Übergang zu Status wiedergeben" und im rechten Feld "Page1" bzw. den Namen Eurer ersten Seite. Das war's auch schon.
Markiert nun die mittlere Schaltfläche und stellt auf die gleiche Art wie soeben beschrieben einen On-Click-Wechsel zu "Page2" ein. Der rechte Button soll auf "Page3" verweisen.

7. Glatte Seitenübergänge hinzufügen

Über die Zeitleiste habt Ihr die Möglichkeit zwei Stadien glatt ineinander überblenden zu lassen. Öffnet zunächst die Zeitleiste am unteren Bildschirmrand und entfernt als erstes die automatische Filterung. Neben dem Suchfeld auf der linken Seite könnt Ihr den Filter deaktivieren. Ihr seht nun eine Übersicht aller Statusübergänge des Projektes. Markiert den ersten Übergang und wählt anschließend den Button "Glatter Übergang" am unteren Ende der Zeitleiste; Es wird eine Übergangsanzeige in der Zeitliste eingefügt. Klickt Ihr diese an, so könnt Ihr die Dauer des Übergangs verändern. Verlängert nun die Dauer auf eine Sekunde. Jetzt müsst Ihr nur noch alle verbliebenen Statusübergänge markieren, einen glatten Verlauf hinzufügen und die Dauer auf eine Sekunde erhöhen.

8. Datei anschauen und veröffentlichen

Ihr habt nun die erste kleine Catalyst Anwendung erstellt. Wählt zunächst "Datei > Projekt ausführen" um die Datei im Primärbrowser anzuschauen. Wenn Ihr Eure Datei als Ausgabeprojekt abspeichern wollt, so wählt "Datei > In SWF veröffentlichen". Flash Catalyst erstellt nun automatisch einige Ordner, Grafiken, JavaScripte und Flash-Inhalte. Die Start-Datei findet Ihr anschließend im Ordner "run-local" unter dem Namen "Haupt.html".

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe hat vor einigen Tagen unter Adobe Labs die Public Beta des neuen Programms Flash Catalyst zum Download bereitgestellt.
Flash Catalyst soll die Schnittstelle zwischen Design und Interaktions-Developement vereinfachen. In diesem Artikel erfahrt Ihr die Basics über Download, Installation, Interface und Werkzeuge von Catalyst. Im nächsten Beitrag erstellt Ihr eine Interaktive Anwendung!

Die Installation

Die Installation funktioniert absolut ohne Probleme. Unter Adobe Labs ladet Ihr Euch zunächst die entsprechende Programmversion (Mac/PC) herunter. Um die ca. 335MB große Datei zu erhalten benötigt Ihr jedoch einen Account bei Adobe. Solltet Ihr über keinen Account verfügen so könnt Ihr Euch hier anmelden.
Nach dem Download funktioniert alles wie gewohnt: Datei entpacken, Setup starten, fertig. Die Seriennummern für die entsprechenden Versionen findet Ihr auf der Download-Page von Adobe. Da ich Sie jedoch auch übersehen habe poste ich sie hier der Vollständigkeit halber noch einmal.

• Macintosh — 1395-0008-4467-2145-8771-1212
• Windows — 1395-1003-6369-7619-0587-6556

Die Programmoberfläche (Interface)

Das Interface von Catalyst ist ähnlich aufgebaut wie Flash CS4 Professional und ist natürlich auch optisch im look-and-feel der gesamten Creative Suite. Sobald das Programm gestartet wurde müssen wir uns entscheiden wie wir vorgehen möchten. Ihr könnt eine leere Arbeitsfläche erstellen oder eine bereits existierende Datei öffnen. In der Public Beta habt Ihr hier die Auswahl zwischen Photoshop-, Illustrator- und FXG-Dateien.
Im oberen Bereich des Programms findet Ihr die verschiedenen Screens/Stadien Eures Projektes. Direkt darunter befindet sich die Arbeitsfläche die Ihr über F4 vergrößern könnt. Die Zeitleiste wurde anders als in Flash am unteren Ende des Programms positioniert. Auf der rechen Seite findet Ihr die bekannten Bedienfelder. Leider lassen sich diese bisher nur über einen Klick auf die Überschrift verkleinern, jedoch (noch) nicht ausdocken. Zu den verfügbaren Bedienfeldern zählt die Werkzeugpalette (sehr ungewohnt auf der rechten Seite), die Ebenen, Wireframes, Bibliothek, Designzeitdaten und Eigenschaften. In der oberen rechten Ecke kann zwischen einer Design- und einer Code-Ansicht gewählt werden.
Die gesamte Usability ist noch etwas schwerfällig und wirkt mitunter wie eine Rich Internet Application, allerdings handelt es sich bei Catalyst ja auch noch um eine Beta.

Werkzeuge & Elemente

Wie bereits erwähnt befindet sich die Werkzeugleiste nun in der rechten oberen Seitenleiste. Im Folgenden erkläre ich kurz und knackig die bisher verfügbaren Funktionen.

• Das erste Werkzeug (von links) ist das Auswahl-Werkzeug. Hiermit wählt Ihr Objekt oder Gruppen aus.
• Das Direktauswahl-Werkzeug wählt innerhalb von Gruppen einzelne Objekte aus.
• Mit der Lupe zoomt Ihr per Klick an die Arbeitsfläche heran oder Ihr zieht einen Rahmen auf um den ausgewählten Bildausschnitt zu vergrößern.
• Die Form-Werkzeuge Rechteck, abgerundetes Rechteck, Ellipse, Linie und Dreieck erstellen eine entsprechende Form. Anschließend könnt Ihr in den Einstellungen rechts unten Konturen, Füllungen, Verläufe, Deckkraft etc. definieren.
• Mit dem Textwerkzeug erstellt Ihr einen Textbereich. In der Beta-Version könnt Ihr den Text noch nicht über einen Doppelklick in das Textfeld hinein editieren sondern müsst diesen ebenfalls im Einstellungen-Bedienfeld eingeben.
• Das Transformieren-Werkzeug ermöglicht es Euch Objekte zu drehen.

Adobe Flash Catalyst Tutorial

Im nächsten Teil zu Adobe Flash Catalyst Public Beta lernt Ihr wie Ihr eine interaktive Anwendung mit Schaltflächen und drei Unterseiten erstellt. Ihr wollt diesen Beitrag nicht verpassen? Dann abonniert meinen RSS-Feed!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.