September 2009
Flash Catalyst
Fortsetzung, Teil 3
Zu diesem Zeitpunkt funktioniert unsere Applikation im Grunde genommen schon. Doch um ihr den kleinen Wow-Effekt zu verschaffen und die Vorteile von Flash Catalyst besser auszunutzen, ist ein wenig Finetuning vonnöten. Zunächst wollen wir dazu die verschiedenen States ein wenig verändern, damit in der fertigen Anwendung deutlich wird, dass es sich bei den Minibildern um klickbare Buttons handelt. Hierzu gehen wir für jeden einzelnen Button zurück in das HUD-Menü und definieren ihre verschiedenen internen Zustände.
Am Beispiel des ersten Buttons gehen wir folgendermaßen vor: Auswahl des Buttons durch einfachen Klick und im Up-State die Opacity des Bildes auf 50 Prozent verringern (hierzu nutzen wir das Properties Panel in der rechten unteren Ecke von Flash Catalyst). Für die weiteren States behalten wir die Einstellungen bei. Mit den beiden anderen Buttons verfahren wir in derselben Weise. Um die Buttonauswahl zu deaktivieren, genügt ein Doppelklick in unser Layout. Wenn wir nun "Run Project" auswählen, sehen wir, dass alle drei Buttons ausgegraut dargestellt und erst durch Mouse-Over vollständig sichtbar werden.
Um zu verhindern, dass das Thumbnail bei Auswahl eines Bildes durch Mouse-Over nicht ausgegraut und in Großansicht erscheint, müssen wir ein wenig in die Trickkiste greifen. Für diese Probleme bietet die Preview-Version von Flash Catalyst noch keine ausgereifte Lösung. Um den Trick durchzuführen, gehen wir in die Ansichten der einzelnen Seiten und bearbeiten dort den jeweils gerahmten Button. Wir setzen die Opacity der ausgewählten Buttons jeweils auf 200 Prozent und heben damit die 50 Prozent-Opacity im Up-State auf. Die "Gesamt-Opacity" der anderen Zustände wird dadurch nicht beeinflusst. Damit dürfte unser Thumbnail nicht länger ausgegraut werden, wenn er sich im gerahmten Zustand befindet.
Nun sieht unsere Anwendung schon wesentlich besser aus: Die Thumbnails sind ausgegraut und vollständig sichtbar, wenn die Maus darüber bewegt wird. Wenn die entsprechende Seite ausgewählt ist, bleibt das Minibild im Rahmen zudem weiterhin sichtbar. Im folgenden letzten Schritt wollen wir die Überleitung zwischen den einzelnen Seiten mit einem Bewegungseffekt versehen. Hier kommen die Timelines ins Spiel, die wir zu Beginn des Tutorials an den unteren Rand von Flash Catalyst verbannt haben. Durch Doppelklick auf die Titelleiste "Timelines" bringen wir das Panel wieder hervor. Jetzt sieht man, dass Flash Catalyst im Hintergrund fleißig mitgearbeitet hat, während wir unsere .psd-Datei bearbeitet haben. Diese Ansicht ist mit einem Autofilter versehen ("Auto Filter:..."), den wir abschalten wollen, um die Übergänge zwischen allen Pages der Anwendung möglichst einfach bearbeiten zu können.
Kurz vor Schluss
Catalyst hat diese bereits vorbereitet und somit liegt es nur noch an uns, sie zu verfeinern. Dazu wählen wir die Transitionen für "Page1 -> Page2" aus, klicken "Smooth Transition" am unteren Rand der Timeline und ziehen die Indikatoren für alle wesentlichen Elemente im Zeitstrahl auf 1,5 Sekunden. Dies wird für alle anderen Seitenübergänge wiederholt. Aufpassen müssen wir nur bei den Übergängen zwischen den Seiten 1 und 3 (und zwar in beiden Richtungen), denn bei diesen wird kurz das "View"-Bild von Seite 2 eingeblendet. Um dies zu verhindern, wählen wir am unteren Rand von Flash Catalyst "Add Action ->Set Property" aus. Dadurch wird in der unteren rechten Ecke das Panel zum manuellen Setzen von Eigenschaften eingeblendet. Wir wählen "Property -> Visible -> false" aus (Abb. 5), und das Bild mit dem Titel "View" sollte beim Wechsel zwischen den Seiten 1 und 3 nicht mehr angezeigt werden.
Damit wäre unsere Anwendung fertig. Ein letztes "Run Project" erlaubt uns zu kontrollieren, ob wir alles richtig gemacht haben und sich die Applikation wie gewünscht verhält. Dann können wir unser Werk als .swf-Datei speichern (File -> Publish to SWF) oder als .fxp-Datei zur Bearbeitung durch einen Flex-Entwickler weiterreichen, beispielsweise um mithilfe einer Serveranbindung dynamisch weitere Fotos in die Thumbnailauswahl einzuspeisen.
COD-Redaktion 23.09.2009 um 11:15 Uhr
Adobe Evangelist Andrew Shorten hat auf der FOTB Flasher nach Catalyst befragt: http://tinyurl.com/lrjq6s
#zitieren
Damir 27.11.2009 um 16:40 Uhr
Bei mir hat das leider mit "setProperty" nicht funktionert. Durch Klicken auf „Add Action“ legt man zwar eine Aktion an, aber dann kann man die Properties im Property-Reiter nicht bearbeiten. Dieses Problem lässt sich durch folgende Code-Modifizierung (z.B. im Flash Builder) beheben... siehe mein Blog:
http://damirabdic.com/2009/11/27/adobe-flash-catalyst-testbeispiel/
Grüße #zitieren
flash catalyst
