Filme und Movieclips vorwärts/rückwärts abspielen

[rena]

Immer wieder gerne genommen werden Animationen (Tweens), die je nach Interaktion vorwärts oder rückwärts ablaufen. das Grundkonzept ist hierbei, den Abspielkopf in der entsprechenden Zeitleiste immer einen Frame nach vorne oder zurück zu setzen. Da dies nicht nur einmalig, sondern ständig geschehen soll, muß die eigentliche Anweisung als Aktion auf einer über die gesamte Animation verfügbaren Filmsequenz liegen.

Folgende Aufgabenstellungen sind die häufgsten

1.) Der gesamte Film (Hauptzeitleiste) soll vorwärts oder rückwärts abgespielt werden.
Dazu verwendet man am einfachsten eine leere Filmsequenz (Controller) als Scriptträger für diese Aktion:

PHP-Code:

onClipEvent (enterFrame) {
    if (_root.rewind) {
        _root.prevFrame();
    } else {
        _root.nextFrame();
    }
} 


Über die Variable "rewind" wird festgelegt, ob der nächste oder der vorhergehende Frame abgespielt werden soll und das bei jedem Bilddurchlauf (enterFrame) des Controller-Movieclips erneut.

<ergänzung (18.10.02)>

Soll die Animation also nicht automatisch starten, legt ihr in den ersten Frame der Hauptzeitleiste noch diese Aktion

PHP-Code:

rewind=true; 


</ergänzung>


Auf dem Button, der den Film vorwärts laufen lassen soll:

PHP-Code:

on (release) {
    rewind = false;
} 


Und auf dem Rückwärtsbutton

PHP-Code:

on (release) {
    rewind = true;
} 


In diesem Script liegen beide Buttons wie auch der Controller-Movieclip bei der Animation in der Hauptzeitleiste. Die Maus-Events können natürlich beliebig angepasst oder die Variable "rewind" an einer anderen Stelle gesetzt werden

2.) Eine Animation in einer Filmsequenz soll vorwärts oder rückwärts spielen
Auch hier liegen die Buttons auf der Hauptzeitleiste. Ist dies einmal nicht der Fall, so müssen die entsprechenden Pfade beachtet werden. Das Script der Buttons ist dasselbe wie unter 1.)

Das ClipEvent-Script liegt nun direkt auf dem Movieclip, in dem sich die Animation befindet:

PHP-Code:

onClipEvent (enterFrame) {
    if (_root.rewind) {
        prevFrame();
    } else {
        nextFrame();
    }
} 


Die Vorgehensweise für beide Möglichkeiten sind gleich - im zweiten Fall sogar noch etwas kürzer und flexibler einzusetzen.

Beispieldateien für beide Wege findet ihr hier im Anhang.

Viel Spaß damit
Gruß
Rena

[rena]

Hier noch zwei Varianten:

3.) Dauerloop vorwärts/rückwärts
Ein Dauerloop vorwärts oder rückwärts. beim Rückwärtsspielen wird nach Frame 1 wieder der letzte Frame angesteuert und umgekehrt.

Das Script auf dem Controller-Movieclip (steuert den kompletten Film -> Hauptzeitleiste)

PHP-Code:

onClipEvent (enterFrame) {
    if (_root.rewind) {
        if (_root._currentframe == 1) {
            _root.gotoAndStop(_root._totalframes);
        } else {
            _root.prevFrame();
        }
    } else {
        if (_root._currentframe == _root._totalframes) {
            _root.gotoAndStop(1);
        } else {
            _root.nextFrame();
        }
    }
} 


4.) Animationssteuerung vorwärts/rückwärts je Buttonklick
Die Animation wird bei jedem Buttonklick um einen Frame vor oder zurückgesetzt. in Frame 1 wird beim Rückwärtsklicken wieder der letzte Frame angesteuert.

Zum Beispiel auf dem Rückwärts-Button, der den Abspielkopf auf der Hauptzeitleiste einen Frame zurück setzt:

PHP-Code:

on(release){
    if (_currentframe == 1) {
        gotoAndStop(_totalframes);
    } else {
        prevFrame();
    }
} 


In den Beispieldateien findet Ihr auch Varianten, die jeweils eine Filmsequenz anstelle der Hauptzeitleiste steuern.

Viel Spaß damit
Gruß
Rena

[rena]

5.) Vorwärts und zurück - aber auch stoppen

Ab und zu wurde ich schon gefragt, wie es zu bewerkstelligen ist, einen Clip nicht nur vorwärts und rückwärts zu spielen sondern zwischendurch auch zu stoppen.

Hier braucht es nicht nur zwei Variablenwerte (true/false) sondern drei, z.b.
rewind="rueck"
rewind="vor"
rewind="halt"

Diese können dann wie gehabt abgefragt und je nach Wert der Variablen bestimmt werden, was der Film oder der Movieclip tun soll.

Ein Beispiel findet ihr in diesem Thread:
Film Rückwärts laufen lassen

Gruß
Rena

P.S.: Diese Beispiele sind Flash5-Syntax, können also auch für Veröffentlichungen für das ältere PlugIn verwendet werden. In FlashMX funktioniert das natürlich auch, wobei es dort auch andere Lösungswege gibt.

[Smirgel]

Unter FlashMX hat man die Möglichkeit direkt auf das MC die Buttonaktionen zu schreiben. Außerdem kann man unter FlashMX den onEnterFrame-Event verwenden, den man jederzeit wieder löschen kann. D.h. das ein Script nur so lange laufen muss bis es seine Arbeit getan hat.

Auch hier haben wir den Tween für eine Buttonanimation innerhalb eines MC´s. In das erste und letzte Frame des Tweens scheiben wir jeweils ein "stop();".

Auf das MC schreiben wir folgendes Script:

on (rollOver) {
    delete this.onEnterFrame;
    play();
}
on (rollOut) {
    this.onEnterFrame = function() {
        this.prevFrame();
        if (this._currentframe == 1) {
            delete this.onEnterFrame;
        }
    };
} 

on(rollOver):
"delete this.onEnterFrame" löscht einen evtl laufenden onEnterFrame-Event.

"play()" spielt den Tween vorwärts ab bis er am "stop()" im letzten Frame angekommen ist.

on(rollOut):
"this.onEnterFrame=functione(){" startet einen onEnterFrame-Event. Dieser funktioniert wie der onClipEvent(enterFrame) nur das er jeder Zeit wieder gelöscht werden kann.

"prevFrame()" bewirkt das jeweils ein Frame zurückgesprungen wird (genau wie bei den Flash5-Beispielen).

"if (_currentframe == 1) {" hier wird verglichen ob der Tween wieder am Anfang angekommen ist.

"delete this.onEnterFrame;" löscht den laufenden onEnterFrame-Event. Dadurch benötigt das Script keine weitere Rechenleistung, bis wieder mit der Maus über das MC gerollt wird.


Wer das ganze nicht auf dem MC programmieren möchte, sondern auf einem Button um damit das MC zu steuern kann das folgendermaßen machen:
Dem MC mit der Tweenanimation muss ein Instantname gegeben werden (in unserem Beispiel nehmen wir "buttonmc").
Den Button selbst verwenden wir nur als aktive Schaltfläche. Darum ist es ganz hilfreich wenn man den Button nicht sehen kann. Das erreicht man, in dem man nur im aktiv-Schlüsselbild des Buttons eine Fläche erstellt. Diese Fläche ist dann der klickbare Bereich des Buttons und im erstellten Film nicht zu sehen.

Auf diesen Button legen wir das gleiche Script, nur mit angepassten Pfaden:

on (rollOver) {
    delete buttonmc.onEnterFrame;
    play();
}
on (rollOut) {
    buttonmc.onEnterFrame = function() {
        this.prevFrame();
        if (this._currentframe == 1) {
            delete this.onEnterFrame;
        }
    };
} 

Im Anhang die Datei für FlashMX

[rena]

Der Smi hat's nicht gebraucht - in den Beispielen davor werden jedoch nur absolute Pfade verwendet. Die stimmen ggf. nicht mehr, wenn der Flashfilm in eine andere Datei per loadMovie geladen wird.

Wie sich das vom Prinzip her korrigieren läßt wurde hier gefragt:
MC vorwärts/rückwärts

Zwei Möglichkeiten:
- relative Pfade statt der absoluten verwenden, also this._parent o.ä. statt _root.
- ab MX 2004 den Befehl lockRoot nutzen

Gruß
Rena