Am 19.März 2009 veröffentlichte Microsoft neben der Betaversion von Silverlight 3, auch Expression Blend 3 in der Preview-Version (CTP). Bei Expression Blend 3 hat sich einiges getan, was auf den ersten Blick nicht so ersichtlich ist. Neu dabei wären zwei unterschiedliche Effekte für WPF- und Silverlight-Anwendungen. In der „Objects and Timeline“ können beim Aufzeichnen von Animationen diese an Controls definiert werden.

Der BlurEffect

Als Beispielanwendung wird ein neues WPF-Projekt erzeugt. Die Größe auf 400x400 Definiert und ein Image auf die Mitte gelegt. Dann wird unter „Objects and Timeline“ ein neues Storyboard mittels Plus-icon erstellt. Als Name wird der Standard „Storyboad1“ belassen.

Abb.1.1. – Neues Storyboard anlegen.

Expression Blend wechselt sofort in den Animation-Workspace. Jetzt können Links in der Toolbox die „Asset Library“ aufgerufen werden. Zu Beginn werden alle Standard-Controls angezeigt. Die Effekte liegen nun im Tabulator unter „Effects“.

Abb.1.2. – Effekte auswählen in der „Asset Library“

Für dieses Beispiel soll der BlurEffect mit gedrückter Maustaste auf das Image Control unter „Objects and Timeline“ gezogen werden.

Abb.1.3. – Der BlurEffect für das Image-Control

Unter dem Image-Control wird nun das Icon für den BlueEffect angezeigt. Das wird nun zu Beginn ausgewählt und im rechten Properties-Menü unter Miscellaneous der Radius auf 10 gesetzt. Das Image wird verschwommen und undeutlich angezeigt. In der Timeline wird unter dem Effekt automatisch ein Record Keyframe gesetzt.

Abb.1.4. – BlurEffect Einstellen

Dann wird ein Klick bei der Timeline auf der 2-Sekundenlinie gesetzt und der Radius auf 0 eingestellt.

Abb.1.5. – BlurEffect Animation erzeugen

Ein Trigger wird später für die Steuerung der Animation benötigt. Neben dem Projekte-Fenster befindet sich das Trigger-Fenster. Ein Trigger ist so eine Art Event, was auf bestimmte Aktionen ausgelöst werden soll. Bei einem neuen Storyboard wird dieser automatisch auf „Window.Loaded“ (Wenn Anwendung gestartet) gesetzt.

Bei diesem Beispiel soll die Animation gestartet werden wenn der Mauszeiger den Focus vom Bild erreicht. Dazu wird „Window.Loaded“ Markiert und darunter bei „When Window Loaded is raised“, auf Window das Image ausgewählt. Daneben kommt die Auswahl bei welchem Ereignis der Trigger gestartet werden soll. Hier wird MouseEnter für das Eintreffen der Maus verwendet. Damit der Trigger nun mit unserem Storyboard gebunden wird, muss mittels Plus-Icon daneben „Add new action“ das Storyboad mit der Aktion Begin gewählt werden. Bei einem kurzen Start der Anwendung mit der Taste F5, kann der Trigger live getestet werden.

Wenn der Mauszeiger das Bild verlässt soll das Bild wieder den ursprünglichen Zustand erhalten. Dazu wird mit + Event ein neuer Trigger erzeugt, der auf „Image“ – „MouseLeave“ gestellt wird. Unter deren Storyboard stellt Remove den Ursprung wieder her.

Abb.1.6. – Trigger erzeugen

Die Animation mit dem neuen Effekt wäre nun fertig. Mit ein wenig Feintuning in der Timeline kann dies noch ein wenig verbessert werden (z.B. 0,5 Sekunden).

Fazit

Unter Flash man erinnere sich an Swish, waren fertige Effekt-Animationen eine große Stärke. Microsoft bietet hier direkt in der Designer-Anwendung fertige Effekte, das sehr schön ist. Dennoch sind in der Preview-Version nur zwei dabei, das sich mit Sicherheit noch ändern wird. Umso spannender werden Effekte von Drittanbietern.

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.