Als die Medienfreunde im Januar 2005 (Wow! Schon zwei Jahre ist das her!) mit dem Weblog-Eintrag «Flexible Flash» vielerorts ein Aha- und Wow-Erlebnis hervorruften, hat mich die Möglichkeit, Flash-Content einfach und problemlos in der Grösse anpassen zu können, immer wieder fasziniert und gefesselt. Die von Torsten und Sven publizierte Variante, mittels Klassenzuweisung und Nutzung relativer Masseinheiten, ein Flashelement beliebig zu verändern ist eine smarte und wirklich einfache Möglichkeit.
Ich habe selber viel damit rumgespielt und versucht das Ganze Prinzip auch mit Images und Grafiken umzusetzen. Ich möchte Bilder ebenfalls dymanisch darstellen und zwar so, dass ich trotzdem verschiedene Klassen zum Styling nutzen kann und die Bilder wahlweise dynamisch bzw. eben nicht dynamisch dargestellt werden. Die Nutzung von Em’s, also relativer Masseinheiten, hat mir einen Strich durch die Rechnung gemacht. Bilder sind nun mal nicht im Vektorformat und logischerweise auch nicht beliebg skalierbar. Hinzu kommt, dass eine exakte Berechnung von Bildgrössen in Em’s praktisch nich möglich ist.
Nun, lange Rede kurzer Sinn: Jetzt geht’s. Zwar auf eine andere Art und Weise, aber es geht. Image Replacement heisst das Zauberwort!
Mit swfIR, einer interessanten JavaScrip-Flash Kombination, wird ziemlich clever ein simpler Umtausch vorgenommen. Ein beliebiges Bild wird damit, per JavaScript, einfach gegen ein Flash ausgetauscht. Juhee!
swfIR eröffnet mir somit ganz neue Möglichkeiten. Ich kann beispielsweise nur bestimmte Bilder durch ein Flash austauschen und diesem Flash zusätzlich, auf einfachste Art und Weise, Effekte wie Schatten, Rotation oder abgerundete Ecken zuweisen! Das ganze läuft dann selbstverständlich nur wenn JavaScript und Flash auf dem Client eingeschaltet sind. Und genau das wiederum ist doch ziemlich cool! Ist JavaScript nicht an, wird einfach das normal eingebunden Bild dargestellt.
Beispiele gefällig? Hier beispielsweise die einfache Zuweisung eines Borders mit runden Ecken, oder eben die dynamische Vergrösserung eines Headers.
Das Prinzip ist einfach. Ein IMG TAG wie das folgende:
<img src="pic.jpg" alt="A picture" id="pic" />
wird durch folgenden Code ersetzt:
<span class="swfir" id="pic"> [replaced image; code varies by browser] </span>
Man bindet einen Script-Aufruf in den HTML Code der Seite ein und lädt zwei Files auf den Server. Fertig. Der Rest geht von alleine. Einfacher kann man es nicht haben! Oder doch?
Ich werde mir swfIR die Tage mal genauer ansehen. Vielversprechend ist es auf jeden Fall. Wie siehts aber mit der Performance aus? Wir werden sehen. Runterladen kann man sich das Teil auf jeden Fall. Probieren geht über studieren.
Webseite: www.swifr.com
