von Frank Puscher
Mit den neuen Filtereffekten von Flash lässt sich ein weicher Übergang zwischen zwei Bildern realisieren.
Per Mausklick eine Produktabbildung zu vergrößern, stellt für Flasher keine Herausforderung dar. Spannender wird es, wenn er dem Benutzer eine Lupe in die Hand gibt, mit der man die verkleinerte Darstellung selbständig abtasten kann. Im Lupenglas erscheint dann eine vergrößerte Variante des Originalbilds.
Der Übergang erfolgt mit Hilfe eines Weichzeichners
Die statische Vergrößerung funktioniert schon sehr gut und deckt den Informationsbedarf des Benutzers ab. Optisch lässt sich der Effekt allerdings noch verfeinern. Im Folgenden nutzen wir eine dynamische Form der Vergrößerung des Bildes und der Repositionierung. Der Übergang wir mit einem Weichzeichner unterstützt.
Zunächst müssen wir den Film vereinfachen, denn wir benötigen nur ein einziges Bild für den Effekt. Löschen Sie also das gesamte Movieclip „lupe“ von der Bühne und wandeln Sie das verkleinerte Bild in ein Movieclip um. Es bekommt den Instanznamen „bild“.
Da uns jetzt der Button als Auslöser fehlt, müssen wir einen neuen, leeren Button auf einer eigenen Ebene realisieren. Die Programmierung bleibt gleich wie eben.
on (press){
steuerung.play();
}
Was sich nun grundlegend verändert ist das Steuerungsclip. Es wird zunächst auf fünf Frames verlängert. Im ersten Bild bleibt das stop();.
Ein einziges Bild genügt, für den dynamischen Effekt
Im zweiten Frame folgt die Unterscheidung, ob das Bild vergrößert ist, oder nicht:
if(gross==1){
_root.bild._x=50;
_root.bild._y=50;
_root.bild._xscale=50;
_root.bild._yscale=50;
gross=0;
gotoAndStop(1);
}else{
zahl=0;
ziel_x = (50-_root._xmouse)*1,5;
ziel_y = (50-_root._ymouse)*1,5;
import flash.filters.BlurFilter;
var filter:BlurFilter = new BlurFilter(20, 20,1);
_root.bild.filters = [filter];
}
Betrachten Sie zunächst die obere If-Bedingung. Das Bild wird auf die Original-Position und auf die Ursprungsgröße zurückgesetzt und das Steuerungsclip springt zurück in den ersten Frame.
Im zweiten Teil wird der Effekt berechnet. Zunächst setzen wir eine Variable „zahl“, die dabei hilft, den Effekt sukzessive wirken zu lassen.
In den folgenden beiden Zeilen wird die korrekte Endposition des vergrößerten Bildes berechnet. Das entspricht der Vorgehensweise in den beiden vorherigen Workshops mit dem Unterschied, dass das große Bild auf Szene 1 angelegt ist und die Koordinaten entsprechend der linken oberen Ecke (50/50) des verkleinerten Bildes bereinigt werden.
Das Skript läuft fünfmal durch
Darunter finden Sie die Anwendung eines Weichzeichners aus den Flash8-Filtern. Spannend sind nur die drei Werte in der Klammer. Sie beschreiben die Effektstärke in X- und Y-Richtung sowie ein Qualitätsniveau. Je geringer dieses Niveau gewählt wird, umso schneller kann Flash den Effekt verarbeiten.
In Frame 3 erfolgt die dynamische Berechnung von veränderter Größe und Position.
_root.bild._xscale=_root.bild._xscale+10;
_root.bild._yscale=_root.bild._yscale+10;
_root.bild._x=_root.bild._x+(ziel_x/5);
_root.bild._y=_root.bild._y+(ziel_y/5);
Die Grössenveränderung erfolgt in fünf Schritten, ausgehend von 50 Prozent. 10 Prozentpunkte pro Schritt führen also zur vollen Gesamtgröße.
Der Versatz berechnet sich aus der vorhergehenden Position des Bildes und der vorher berechneten Zielposition, die durch fünf geteilt wird. Es wird also nur eine asymptotische Näherung zum „echten“ Zielwert erreicht. Aber das genügt.
Frame 4 bleibt leer und in Frame 5 erfolgt die Auflösung. Ist die Variable „zahl“ kleiner als 4, dann wiederholt der Film die Größenveränderung und Repositionierung. Sind die fünf Schritte durchlaufen, wird der Weichzeichner aufgehoben, die Variable „zahl“ zurückgesetzt und die Steuerung in den ersten Frame geschickt. ™
if (zahl<4){
zahl=zahl+1;
gotoAndPlay(3);
}else{
import flash.filters.BlurFilter;
var filter:BlurFilter = new BlurFilter(0,0,1);
_root.bild.filters = [filter];
zahl=0;
gotoAndStop(1);
gross=1;
}
Material zum Thema:
.FLA Datei (3 MB)
Erstveröffentlichung 05.07.2006
