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.

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

Adobe Flash Catalyst - Neues Projekt anlegen

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.

Adobe Flash Catalyst - Photoshop Importfunktionen

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.

Adobe Flash Catalyst - Dateiansicht nach dem Photoshop-Import

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

Adobe Flash Catalyst - Mit dem Ellipsewerkzeug erstellte Navigationsflächen

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

Adobe Flash Catalyst - Formen in Schaltflächen konvertieren

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.

Adobe Flash Catalyst - Verschiedene Stadien von Schaltflächen zu gestalten

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

Adobe Flash Catalyst - 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

Adobe Flash Catalyst - Benutzerdefinierte Interaktionen

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

Adobe Flash Catalyst - Glatte Ü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“.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Chelmon rostratus
    schrieb am 13.07.2009 um 04:17 Uhr:

    Hey,
    ich würde gerne wissen ob die Anwendungs Interaktion bzw. „Laden“ wirklich bewirkt das die jeweiligen States denen ich dies zuordne auch einzeln geladen werden bzw. nicht einfach wie normal am anfang alles geladen wird ? Oder für was ist das sonst da ?
    um einen animierten „anfang“ zu haben ?
    Würde mich sehr interesieren !
    mfg
    Chelmon rostratus

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →