Apples „Skim Effekt“ für Flash

Als ich gestern iTunes aktualisiert habe, fiel mir der verstärkte Einsatz des so genannten „Skim Effect“ auf (z.B. in der Geniusfunktion). Apple hatte in Anfang des Jahres mit iLife 08 eingeführt. Kurzerhand gibt es hier von mir eine ActionScript 3 Komponente, die diesen Effekt in Flash erzeugt.

Die Herkunft der Effektbezeichnung lässt sich leicht erklären: „to skim through sth.“ bedeutet blättern oder etwas überfliegen. Der Effekt funktioniert so: Fährt man mit der Maus über ein (Vorschau-)Bild, erscheinen zahlreiche passende Vorschaubilder (z.B. des ganzen Fotoalbums, verschiedene Szene eines Videos, etc.).

Beispiele

Skimming Effekt: Beispiel 1

[kml_flashembed movie=“/wp-content/uploads/2008/10/skim/skimming-01.swf“ base=“.“ width=“500″ height=“220″ /]

Skimming Effekt: Beispiel 2

[kml_flashembed movie=“/wp-content/uploads/2008/10/skim/skimming-02.swf“ base=“.“ width=“420″ height=“360″ /]

Skimming Effekt: Beispiel 2

[kml_flashembed movie=“/wp-content/uploads/2008/10/skim/skimming-03.swf“ base=“.“ width=“516″ height=“250″ /]

Funktionsweise des Skim-Effekts

Alle Bilder, die geblättert werden sollen, sind in einer Grafik- oder Flashdatei untereinander angeordnet (Beispiel). Abhängig von der x-Koordinate des Mauszeiger wird die y-Position des Bild abgeändert. Konkret bedeutet dies, dass das Bild quasi von unten nach oben hinter einer Maske verschoben wird.

Meine Skimming-Klasse kann sehr einfach in Flash eingebunden werden. Den Ablauf kann man sich auch als Screencast ansehen.

• Man geht zu den Standard-Komponenten und zieht eine gewöhnliche UILoader-Komponente auf die Bühne.
• Diese passt man in der Größe so an, dass sie genau die Maße eines einzelnen Bildes hat. Im Komponentinspektor wählt man die Quelldatei (jpg oder swf) und stellt die automatische Skalierung auf false
• Man geht in die Library und klickt mit der rechten Maustaste auf den „UILoader“. Dann ändert man den Klassenpfad in com.florianplag.SkimmingUILoader.
• Fertig!

Die Klasse steht zur freien Verfügung (Open Source MIT Lizenz). Viel Spaß ;)

Screencast: Skim Effekt mit Flash erzeugen
Download: Beispiele und Quelldateien (.zip)
Link: Beispielgalerie von Apple

[ad]