• 
• 
• 
• 
• 
• 
• 
• 3

September 2009

Flash Catalyst

Fortsetzung, Teil 2

(Link zum Artikel: http://www.createordie.de/cod/artikel/2576)

Unser Layout wird nun in Flash Catalyst angezeigt. Sollte unterhalb des Layouts die Timeline-Ansicht zu sehen sein, wollen wir diese zunächst durch Doppelklick auf die Überschrift "Timelines" schließen. Auf diese kommen wir erst später zurück. In der rechten Hälfte der Ansicht sehen wir verschiedene Tools, die uns für die Bearbeitung der importierten .psd-Datei zur Verfügung stehen, sowie die aus Photoshop übernommenen Ebenen und Ebenengruppen (Layers). Etwas tiefer finden wir Wireframe Components, die Library und Design-Time Data, die für dieses Einsteiger-Tutorial zunächst allerdings keine Rolle spielen.

Unser Ziel ist es, beim Anklicken der Thumbnails das entsprechende Foto in der Großansicht aufzurufen. Hierfür müssen wir die Thumbnails als Erstes in interaktive Buttons umwandeln. Ein einfacher Klick in das Bild mit dem Herzen öffnet das Heads Up Display (HUD), das genutzt wird, um interaktive Komponenten zu kreieren und zu verwalten (Abb. 2). Dann wählen wir nun "Convert Artwork to Component -> Button" und wiederholen diesen Schritt für die beiden anderen Bilder. Dann sollten alle drei Images als Button definiert sein. Den blauen Rahmen, der das erste Bild umschließt, brauchen wir an dieser Stelle nicht weiter zu beachten.

Als nächsten Schritt müssen wir weitere Pages oder States anlegen. In Flash Catalyst werden diese Begriffe austauschbar gehandhabt, da Webdesigner in der Regel mit dem Ausdruck "Pages" vertraut sind, Applikationsdesigner hingegen den Begriff "States" verwenden. Für unsere Applikation brauchen wir insgesamt drei Anwendungszustände. Daher klicken wir unter "Pages" oberhalb unseres Layouts entweder zweimal auf den Button "Duplicate State" oder wählen zweimal "Duplicate State" mit rechtem Mausklick (Abb. 3). Momentan sind unsere drei States identisch. Um dies zu ändern, wählen wir in der Page-Ansicht "Page 2" aus und entscheiden, welche Layer in dieser Seitenansicht erscheinen und wo sich welche Elemente des Layouts befinden sollen. In diesem Fall nutzen wir Drag-and-Drop, um den Rahmen auf den zweiten Thumbnail zu ziehen.

Zusätzlich deaktivieren wir die Sichtbarkeit des Herz-Bildes (benannt mit "Heart") in der Ebenengruppe "Images" (Abb. 4). Damit haben wir innerhalb weniger Sekunden die zweite Page unserer Anwendung erstellt. Für das Design der dritten Page gehen wir auf dieselbe Weise vor: Auswahl von Page 3 in der Page-Ansicht, Verschieben des Rahmens auf das Bild mit dem Kaffeebecher, Deaktivieren der Bilder mit den Titeln "Herz" und "View" in der Gruppe "Images".

Damit die Buttons auf Mausklicks reagieren und uns auf die entsprechenden Seiten der Anwendung führen, müssen wir die Funktionalitäten unserer Buttons genauer definieren. Dazu wählen wir die einzelnen Buttons durch einfaches Anklicken aus und legen die gewünschten Eigenschaften aus dem HUD fest. Zunächst entscheiden wir uns durch einen Klick auf das Pluszeichen für "Custom Interactions -> on click". Die Aktion, die wir ausführen möchten, hat den Namen "Play Transision to State". Dies bedeutet, dass per Mausklick die Überleitung von der momentanen auf die nächste Seitenansicht ausgelöst wird. Als State wählen wir "Page 1" für die Bearbeitung des Buttons mit dem Herzen, "Page 2" für den mit der Meeresaussicht und "Page 3" für den mit dem Kaffeebecher. Dadurch führt ein Klick auf den Thumbnail später dazu, dass das zugehörige Foto in Großansicht angezeigt wird.

Nachdem wir das Klickverhalten für alle drei Buttons definiert haben, ist unsere Applikation bereit für einen ersten Testlauf. Hierzu wählen wir "Run Project" im Menü "File", um unsere Anwendung automatisch im Default-Browser zu öffnen.

• 1
• 2
• 3

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• flash,
• adobe,
• catalyst,
• developer,
• designer