Mit den Filterklassen ermöglicht es ActionScript 2 subtile Animationen zu erstellen, die zum Beispiel für Standardeffekte universell eingesetzt werden können. Dabei braucht der fertige Film in der Regel weniger Speicherplatz, als wenn die Effekte per Tweening animiert werden.
Seit Flash 8 kennt ActionScript die Filtereffekte: Schlagschatten, Glow oder Weichzeichnen. Die Effekte sind nicht nur einfach anzuwenden, sie können auch beliebig per Programmierung angesprochen und verändert werden. Die wenigen Zeilen ActionScript sind ebenso schnell eingefügt, wie das Tweening von Hand erstellt.
Live Demo: Der Apfel verändert den inneren Glow subtil
Starten Sie einen neuen Film und legen Sie ein beliebiges Logo an. Im Beispiel sehen Sie ein Logo eines weniger bekannten Hardware-Herstellers. Die gläserne Optik unterstützt den gewünschten Effekt, der darin besteht, dass sich der Glow, den wir gleich für den Rand definieren, nach Innen ausdehnt, sobald die Maus das Logo berührt.
Wenn Sie eine Grafik importieren, achten Sie darauf, dass sie sauber freigestellt ist. Nun wandeln Sie das Logo in ein MovieClip namens „apfel“ um. In unserem Beispiel und im folgenden Code gibt es innerhalb des Apfelclips ein weiters mit Namen „fuellung“. Wir haben diese vom Rand getrennt, damit letzterer nicht vom Weichzeichner-Effekt betroffen ist.
Live Demo: Auch das Deaktivieren eines Weichzeichners ist ein schöner RollOver-Effekt
Die Programmierung
Der Rest besteht in wenigen Zeilen ActionScript. Zunächst gilt es, die Filterklassen zu importieren. Das geschieht im Moment des Veröffentlichens des Flash-Films. Sie können die einzelnen Filter importieren oder alle auf einmal, in dem Sie den Platzhalter „*“ verwenden.
import flash.filters.*;
Nun erzeugen wir eine Variable für den GlowFilter. Die Parameter des Filters lassen sich sehr gut bei den Codehinweisen im ActionScript-Fenster ablesen. Da wäre zunächst die Farbe, die als Hexadezimalcode angegeben wird. In ActionScript steht stets „0x“ vor der Farbangabe. Dann kommt die Alpha-Deckkraft, dann die Weichzeichner in X- und Y-Richtung, dann die Stärke des Filters und dessen Qualität. „1“ steht für geringe Qualität, „3“ für hohe. Zum Schluss sehen Sie noch die Flaggen für „Inneres Glühen“ und für „Aussparung“. Letzteres lässt nur den Glüheffekt übrig, versteckt aber das eigentliche Objekt.
var Gluehen:GlowFilter = new GlowFilter(0xFFFFFF,80,10,10,3,3,true,false);
Nun wenden wir den Filter auf das MovieClip an. In den eckigen Klammern können auch mehrere Filter stehen.
apfel.fuellung.filters = [Gluehen];
Im nächsten Schritt wird der RollOver-Effekt definiert. Er löst eine Animation aus, welche die Parameter blurX und blurY so lange vergrößert, bis der Wert 30 erreicht wird. Der Divisor 10 bestimmt die Schrittgröße, die von Runde zu Runde kleiner wird. Ein asymptotisches Annähern also, das einem Abbremseffekt entspricht.
apfel.fuellung.onRollOver = function() {
this.onEnterFrame = function(){
Gluehen.blurX += (30-Gluehen.blurX)/10;
Gluehen.blurY = Gluehen.blurX;
Die letzte Zeile sorgt für eine proportionale Veränderung in X- und Y-Wert.
In jeder Runde muss man die Ansicht auf der Bühne aktualisieren:
apfel.fuellung.filters = [Gluehen];
}
}
Der RollOut-Effekt macht im Grunde das Gleiche, nur hat er als Zielwert die Ausgangs-Weichzeichner von „10“.
apfel.fuellung.onRollOut = function() {
this.onEnterFrame = function(){
Gluehen.blurX += (10-Gluehen.blurX)/10;
Gluehen.blurY = Gluehen.blurX;
apfel.fuellung.filters = [Gluehen];
if (Gluehen.blurX<11){
delete this.onEnterFrame;
}
}
}
In ähnlicher Manier ließen sich Weichzeichner oder Schlagschatten animieren. Zum Beispiel wäre ein hübscher Buttoneffekt, wenn ein unscharfes Foto bei RollOver scharf gezogen wird.
Material zum Artikel:
Erstveröffentlichung 26.02 .2008
