[flash8]praktischer Einsatz vom Blurfilter

[Wanderratte]

Hier findet ihr ein kleines Beispiel wie man den Blurfilter auf Texte anwendet.
Natürlich wird hier alles dynamisch erzeugt

import flash.filters.BlurFilter;
//Array für den Textinhalt
textInhalt = new Array("der", "neue", "Blurfilter", "mit", "dynamisch", "erzeugten", "Textfelder", "im", "Einsatz");
//Deklaration der Variablen
var aus_mc:MovieClip;
//zaehler
var zaehler:Number = 0;
//x/y Position für den Blureffekt
var blurY:Number = 0;
var blurX:Number;
//Qualtität des Blureffektes
var quality:Number = 2;
//Bühnenweite 
var bWeite:Number = Stage.width;
//Bühnenhoehe
var bHoehe:Number = Stage.height;
//Arraylaenge
var tLaenge:Number = textInhalt.length;
//Berechnung der Filmbreite
var fLaenge:Number = bWeite*tLaenge;
//Funktion zum erstellen des oberen MovieClip
function hauptMC() {
    aus_mc = erstelleTextfeld(Stage.width, Stage.height, "text_feld");
    aus_mc._x = bWeite/2;
    aus_mc._y = bHoehe/2;
}
//Funktion zum Erstellen des Inhaltes
function erstelleTextfeld(w:Number, h:Number, name:String) {
    //Formation der Textfelder
    var txt_fmt = new TextFormat();
    with (txt_fmt) {
        font = "Arial";
        size = 40;
        bold = true;
    }
    //erstellt einen neuen Movieclips, auf die nächst freie Ebene
    var mc:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    //For-Schleife zum Erstellen der einzelnen Textfelder
    for (i=0; i<tLaenge; i++) {
        //Methode gibt die Informationen zu den Textmaßen an
        var groesse = txt_fmt.getTextExtent(textInhalt[i]);
        //Variable z wird für die Ausrichtung gebraucht
        var z = groesse.textFieldWidth/2;
        //Erstellt das Textfeld, genau in der Größe und Hoehe wie gebraucht wird.
        mc.createTextField("tfeld"+i, i, w*i-z, 0, groesse.textFieldWidth, groesse.textFieldHeight);
        mc["tfeld"+i].border = false;
        mc["tfeld"+i].wordWrap = true;
        mc["tfeld"+i].text = textInhalt[i];
        mc["tfeld"+i].setTextFormat(txt_fmt);
    }
    return mc;
}
//Funktion für den Blureffekt und Bewegung
function blur() {
    ziel = aus_mc._x-bWeite;
    aus_mc.onEnterFrame = function() {
        this._x += (ziel-this._x)/5;
        blurX = Math.abs((ziel-this._x)/5);
        var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
        var filterArray:Array = new Array();
        filterArray.push(filter);
        this["tfeld"+zaehler].filters = filterArray;
        if (zaehler == tLaenge-1) {
            this["tfeld"+0].filters = filterArray;
        } else {
            this["tfeld"+(zaehler+1)].filters = filterArray;
        }
        if (blurX<=.05) {
            this["tfeld"+zaehler]._x += fLaenge;
            zaehler++;
            if (zaehler>=tLaenge) {
                zaehler = 0;
                removeMovieClip(this);
                hauptMC();
            }
            delete this.onEnterFrame;
        }
    };
}
//start
hauptMC();
//Interval
var interval;
interval = setInterval(blur, 5000); 

und wie immer, ich werde zu diesem Script keine Fragen per Mail oder PN beantworten, dafür ist das Forum da.

Viel Spaß beim ausprobieren.

[Wanderratte]

und hier kommt die genaue Beschreibung des Scriptes.


In Flash8 sind einige neue Filter integriert worden, unter anderem auch der Blurfilter.
Vorbei sind die Zeiten wo man mit mehreren Bildern arbeiten musste und das doch recht aufwändige Ausrichten auf der Bühne bis alles passte. Die neuen Filter sind allesamt nur auf einem MC (MovieClip) anzuwenden, dies zur Info für die Designer die lieber auf der Timeline arbeiten. In diesem Beispiel habe ich mich für eine komplett dynamische Lösung entschieden, da mir das Scripten einfach mehr liegt.

Nach der kurzen Theorie kommen wir zum praktischen Teil.

Als erstes wird ein neuer Film erstellt, die Bühnengröße ist hierbei egal, da dass Script den Inhalt automatisch an der Bühnenbreite/ höhe ausrichtet.
Nach dem der praktische Teil erledigt ist, geht es an das Script. Im Nachfolgenden werden ich kurz die wichtigsten Befehle bzw. den groben Ablauf erklären.

In der ersten Zeile muss die Klasse für den Blurfilter importiert werden.

import flash.filters.BlurFilter; 

Als nächstes kommt der Text der Angezeigt werden soll, dieser wird in einem Array gespeichert.

//Array für den Textinhalt
textInhalt = new Array("der", "neue", "Blurfilter", "mit", "dynamisch", "erzeugten", "Textfelder", "im", "Einsatz"); 

Jetzt kommt die Deklaration der Variablen

//Deklaration der Variablen
var aus_mc:MovieClip;
//zaehler
var zaehler:Number = 0;
//x/y Position für den Blureffekt
var blurY:Number = 0;
var blurX:Number;
//Qualtität des Blureffektes
var quality:Number = 2;
//Bühnenweite 
var bWeite:Number = Stage.width;
//Bühnenhoehe
var bHoehe:Number = Stage.height;
//Arraylaenge
var tLaenge:Number = textInhalt.length;
//Berechnung der Filmbreite
var fLaenge:Number = bWeite*tLaenge; 

Die erste Funktion ist für das erstellen des Hauptmovieclips und Positionierung zuständig , der im späteren Verlauf des Scriptes bewegt wird.

//Funktion zum erstellen des oberen MovieClip
function hauptMC() {
    aus_mc = erstelleTextfeld(Stage.width, Stage.height, "text_feld");
    aus_mc._x = bWeite/2;
    aus_mc._y = bHoehe/2;
} 

Die nächste Funktion erstellt die einzelnen Textfelder aus dem Array heraus und ordnet die einzelnen Felder an.

//Funktion zum Erstellen des Inhaltes
function erstelleTextfeld(w:Number, h:Number, name:String) { 

In der With-Anweisung werden die Eigenschaft der Textfelder definiert, hier kann natürlich beliebig erweitert werden. Ich habe hier in dem Beispiel nur das Nötigste genommen.

//Formatieren der Textfelder
    var txt_fmt = new TextFormat();
    with (txt_fmt) {
        font = "Arial";
        size = 40;
        bold = true;
    }
    //erstellt einen neuen Movieclips, auf die nächst freie Ebene
    var mc:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth()); 

Die For-Schleife nehmen wir etwas genauer unter die Lupe

//For-Schleife zum Erstellen der einzelnen Textfelder
    for (i=0; i<tLaenge; i++) { 

Mit der Methode getTextExtent und den Befehlen, textFieldHeight und textFieldWidth ist man in der Lage die genaue Größe/Höhe auszulesen, die man für das Textfeld braucht. Durch die Formel w *i-z (Bühnenweite * Stelle – ½ Textfeldbreite) wird das neue Textfeld auf der X-Koordinaten in dem Film ausgerichtet.

//Methode gibt die Informationen zu den Textmaßen an
        var groesse = txt_fmt.getTextExtent(textInhalt[i]);
        //Variable z wird für die Ausrichtung gebraucht
        var z = groesse.textFieldWidth/2;
        //Erstellt das Textfeld, genau in der Größe und Hoehe wie gebraucht wird.
        mc.createTextField("tfeld"+i, i, w*i-z, 0, groesse.textFieldWidth, groesse.textFieldHeight);
        mc["tfeld"+i].border = false;
        mc["tfeld"+i].wordWrap = true;
        mc["tfeld"+i].text = textInhalt[i];
        mc["tfeld"+i].setTextFormat(txt_fmt);
    }
    return mc;
} 

Die letzte Funktion ist für die eigentlichen Bewegung und das Blureffekt zuständig.

//Funktion für den Blureffekt und Bewegung
function blur() { 

Als erstes, wird ein Wert aus der x Postion – der Bühnenbreite an der Variablen ziel übergeben.

ziel = aus_mc._x-bWeite;
    aus_mc.onEnterFrame = function() { 

Durch diese Berechnung wird der Hauptmovieclip auf der x-Koordinaten bewegt und je näher es dem Endpunkt (ziel) kommt abgebremst.

this._x += (ziel-this._x)/5; 

Durch den Befehl Math.abs wird das Vorzeichen einer Zahl in diesem Fall ein – entfernt so, dass der Wert Positiv ist.

blurX = Math.abs((ziel-this._x)/5); 

In den nächsten Codezeilen wird der Blurfilter defeniert und dem entsprechenden Textfeld zugewiesen, bei jedem durchlauf der onEnterFrame – Funktion wird der Filter neu definiert und zugewiesen, so dass der Blureffekt bei kleiner werdenden Geschwindigkeit auch abnimmt.

var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
        var filterArray:Array = new Array();
        filterArray.push(filter);
        this["tfeld"+zaehler].filters = filterArray;
        if (zaehler == tLaenge-1) {
            this["tfeld"+0].filters = filterArray;
        } else {
            this["tfeld"+(zaehler+1)].filters = filterArray;
        } 

Sobald der Inhalt der Variable blurX kleiner/gleich wie 0.5, den Wert habe ich mittels trace(blurX) ermittelt, nimmt man einen kleineren Wert funktioniert das Script nicht mehr einwandfrei, die einzigste Möglichkeit wäre sicherzustellen, dass die Berechnung immer mit <= Null ist. Was aber hier nicht unbedingt von Nöten ist. Wird der Wert erreicht bzw.: Unterschritten wird das Textfeld am Ende des Filmes postioniert und die Variable zaehler um 1 erhöht.

        if (blurX<=.05) {
            this["tfeld"+zaehler]._x += fLaenge;
            zaehler++; 

Das Löschen und neu Erstellen des Hauptfilmes musste hier sein, weil der Hauptfilm durch das Versetzen der Textfelder immer länger wurde und Flash irgendwann die Textfelder nicht mehr richtig positioniert hat. Der User kriegt von diesem Vorgang nichts mir, da das erste Wort wieder auf der Bühne sichtbar und ausgerichtet ist.

if (zaehler>=tLaenge) {
                zaehler = 0;
                removeMovieClip(this);
                hauptMC();
            }
            delete this.onEnterFrame;
        }
    };
} 

Hier wird der Hauptfilm gestartet

//start
hauptMC(); 

Zum Schluß wird noch ein Interval gesetzt, damit der Film auch von alleine weiterläuft.

//Interval
var interval;
interval = setInterval(blur, 5000); 

Im Anhang findet ihr die SWF und HTML-Seite zum anschauen, die Fla habe ich mit absicht weggelassen weil ich davon ausgehe dass jeder in der Lage ist, dass Script in Flas reinzukopieren