Architektur für abbrechbare Animationen

[bokel]

Ich arbeite gerade an einem Flashfilm, bei dem es jede Menge Folgen von Animationen gibt. Ein Beispiel: Der User klickt auf einen Button, der ein Video starten soll.

1. Klick
2. Der Button fährt eine kleine Animation ab
3. Der Button fährt raus
4. Ein anderer Button (quasi sein Gegenstück) fährt rein
3. Der Button feuert sein eigentliches Event ab
4. Der Videoplayer wird gestoppt
5. Eine Maske legt sich über den Player
6. Das Laden des Videos wird gestartet
7. Eine Ladeanzeige erscheint
8. Das Video ist bereit
9. Die Ladeanzeige verschwindet
10. Die Maske verschwindet
11. Das Video startet

Wenn es jetzt mehrere solcher Buttons gibt, und der User wild auf den Buttons herumklickt, bricht das totale Chaos aus. Die Frage ist, wie löst man dieses Problem.

1. Quick und Dirty
Nachdem der Button geklickt worden ist, wird alle weitere Benutzerinteraktion unterbunden, bis die Sequenz komplett fertig ist. Das kann man z.B. machen, indem man einen unsichtbaren MovieClip über den ganzen Film legt.

Das ist die einfachste Lösung. Wenn die Sequenzen nicht zu lang sind, und das Video schnell anläuft, merkt der Benutzer es wahrscheinlich noch nicht einmal.

2. Sauber und (hoffentlich nicht zu) aufwendig
Meine Idee ist es, die jeweils aktuelle Sequenz als Objekt zu speichern und ihr eine Möglichkeit zum Abbrechen mitzugeben. Wenn jetzt eine andere Sequenz gestartet werden soll, muss zuerst die erste Sequenz abgebrochen werden. Damit es nicht schon dabei zum Chaos kommt, müsste der Abbruch ohne Unterbrechung ablaufen können. Dazu könnte man wiederum Methode 1 benutzen.

Die zweite Methode hört sich erstmal gut an, die werde ich mal ausprobieren. Wenn ihr Erfahrung mit solchen Sachen habt oder vielleicht andere Ideen, so lasst es mich wissen.

mfg. r

[michael]

sowas finde ich auch immer sehr schwierig aufzubauen.
wenn die sequenz nicht sehr lang ist, würde ich auch immer zum "quick and dirty" greifen, meistens hab ich dann einfach eine methode in der navigation die diese ausschaltet.

in deinem fall ist das natürlich komplizierter, da die länge der sequenz ja unbekannt ist, da sie duch das laden des videos von der bandbreite des users abhängig ist. da würd ich schauen das ich methode1 und 2 kombiniere und mir sozusagen "breakpoints" setze, in deinem fall etwa so:

1. Klick
====================================== buttons alle abschalten
2. Der Button fährt eine kleine Animation ab
3. Der Button fährt raus
4. Ein anderer Button (quasi sein Gegenstück) fährt rein
3. Der Button feuert sein eigentliches Event ab
====================================== buttons alle einschalten ====================================== ab hier methode2
4. Der Videoplayer wird gestoppt
5. Eine Maske legt sich über den Player========== während der animation buttons evtl. kurz abschalten
6. Das Laden des Videos wird gestartet
7. Eine Ladeanzeige erscheint
8. Das Video ist bereit
9. Die Ladeanzeige verschwindet
10. Die Maske verschwindet========== während der animation buttons evtl. kurz abschalten
11. Das Video startet


hmm nicht das gelbe vom ei, aber solche sachen sind meistens zu individuell als das man ein universelles "AnimationSequence-Pattern" entwerfen könnte.
wäre aber doch mal eine interessante herausforderung.

gruß
michael

[André Michelle]

Ich hatte das Problem auch hier.

Bei den Referenzen wollte ich auch zulassen, dass wild rumgeklickt wird. Besonders nett, wenn man gerade noch schnell eine Hörprobe angeklickt hat, die einen Ladevorgang mit Preloadinganzeige startet.
Ich hatte eine Art Process Klasse, die einen Funktionsaufruf (Delegate) und ein Event "belegte", um selber mitzuteilen, dass der Process abgeschlossen ist. Zu jedem Prozess gibt es ein Reverse-Prozess, zB. load/abortLoad.

Es war irre viel Arbeit. Bei dem Bandbreitenpunkt hatte ich dann keine Lust mehr. Dort ist die Quick&Dirty Methode. Ist auch okay :)

[bokel]

Ja, ich glaube so ähnlich wie Andre es geschildert hat, will ich auch vorgehen.

Alle Animationen stecke ich in eine Liste, aus der sie der Reihe nach abgefahren werden. Jedes Ding, das gestartet wird, erzeugt seinerseits einen Abbruch/Reset-Handler, der dann in einer Abbruchliste gespeichert werden soll.

Wenn jetzt der Abbruch kommt, wird alles gelöscht, was noch in der ersten Liste steht, also noch gar nicht gelaufen ist und anschliessend werden die Sachen aus der Abbruchliste ausgeführt.

Jetzt weiss ich nur noch nicht, ob ich einen zentralen AnimationsManager dafür nehmen soll, oder ob ich es über eine Art Kommando mache, das herumgereicht wird und das die Listen dann enthält. Mal sehen ... ich baue mal ein reduziertes Beispiel.

mfg. r

[antiplex]

he andé, schicke seite die du da gemacht hast.
ich finde das funktioniert alles sehr gut, die referenzsoundschnipsel lassen sich
prima durchschalten. wenn da während dem laden alle anderen buttons inaktiv
wären fände ich das schon störend, so isses aber echt sauber.

nebenbei: die wellen werden einmal gezeichnet und dann mit unterschiedlichen
geschwindigkeiten von links nach rechts durchgeschoben nehm ich an? und dann
eben die entspechend die höhe der punkte an ihrer jeweiligen posi angepasst?
kommt gut!

[_sevenDust]

Ich habe mir mal ein Sequence-Klasse geschrieben. Die könnte man
dafür etwas abändern.
Die jetzige Form sieht so aus, dass der Sequence-Instanz eine Reihe
von Command-Objekten angefügt werden können. Die Commands würden in diesem Fall die Animationssteuerung wrappen.
Die Commands liegen in einer Liste, die abgearbeitet wird.(via Callbacks)
Sie generieren ihrerseits ein Event "onCallComplete". Ist die komplette Sequence abgearbeitet folgt ein "onSequenceComplete".
Zur Zeit sieht es noch so aus, dass dieses direkt mit dem jeweiligen execute()
ausgeführt wird. Wenn eine Timelineanimation über 500 Frames innerhalb eines Commands ausgeführt wird, macht das natürlich wenig Sinn, wenn der onCallComplete mit Animationsstart gesendet wird.
Dafür habe ich ein spezielles Command "Timeline" geschrieben, das mit einer Abort-Framezahl initialisiert werden kann. Wenn die Ani an dem Frameangekommen ist, wird der onCallComplete gesendet.

Der onCallComplete leitet die Abarbeitung des nächsten Commands in der Liste ein.

Die Sequence müsste dann so überarbeitet werden, dass ein, wie Andre es genannt hat, Reverse Process oder DeCommand eingeführt wird. Der bricht, wie pauschal im TimeLine-Command, entweder sofort ab ( also ein einer Command-Instanz inherentes DeCommand) und sendet einen "onAbort" oder wenn wie in meinem Fall die Sequenzliste numerisch iteriert wird, eine parallele DeCommand
Liste bereitgestellt wird, die das Anhängen von einem dem Command zugehörigen custom DeCommand ermöglicht am entsprechenden ListenIndex.

Die Sequence sollte auch eine kill-Methode bekommen, die die Command-Liste
löscht um alle nachfolgenden Commands zu verhindern und gegebenfalls für das aktive Command das DeCommand startet.

Deweiteren sollte es einen SequenceManager geben, der alle laufenden Sequences listet ( falls parallele erlaubt sind) und auch die abgearbeiten wieder entfernt.
Er sollte auch ein flag handleType besitzen, das bestimmt, ob parallele Sequences laufen dürfen, oder immer nur eine aktiv sein darf, und die
dann bei einem SequenceRequest entweder hart abbrechen soll oder auf den onSequenceComplete Event warten soll.


Jede Interaktion in der Applikation ( oder zumind. die, die es betreffen soll)
kontaktiert den SequenceManager, der entscheidet was dann passiert.
Der SequenceMAnager kontrolliert so imho den Abbruch eines oder mehrerer laufender Prozesse und
das Einleiten eines neuen.

Nur mal so schnell hergedacht.

[_sevenDust]

Man könnte auch bei einem kill die DeCommands reversiv bis zum Anfangszustand der Sequence durchlaufen lassen.
Stop auf Schritt 3:
1. Ein anderer Button (quasi sein Gegenstück) fährt raus
2. Der Button fährt KEINE kleine Animation ab (da kein cusom DeCommand)
3. Der Button fährt rein

[_sevenDust]

Vielleicht wäre es auch ganz sinnvoll, wenn man ein Sequence-DeCommand
einführt, welches (nachdem ein Abort registriert wurde) bis zum letzten AnimationsCommand durchläuft und dann sozusagen vom "Endbild" ausgehend einn BlendOut-Command startet.

[bokel]

Genaugenommen ist das was ich will doch sowas wie eine Transaktion. Also entweder wird alles ausgeführt, oder nichts. Zu diesem Thema kann ich bestimmt mehr finden.

[bokel]

So, ich habe jetzt mal ein Beispiel fabriziert. Drei Buttons sollen so animiert werden, dass immer einer "draussen" ist. Wenn man schnell auf die beiden Buttons links klickt, soll die aktuelle Animation rückgängig gemacht und dann erst die neue Animation ausgeführt werden. Der Einfachkeit halber, habe ich keine echte Animation eingebaut, sondern nur eine Verzögerung - nur falls sich jemand wundert

Andre' hat schon recht, da kommt schnell eine Menge Code zusammen. Man schaue sich nur den Unterschied zwischen der normalen und der cancelable Animation an.

public function switchButtons( buttonToMoveOut:MainButton, buttonToMoveIn:MainButton, onComplete:Function):Void{
        buttonToMoveOut.setX( horizontalOffPosition);
        buttonToMoveIn.setY( buttonToMoveOut.getY());
        buttonToMoveIn.setX( x);
        onComplete();
    }   
    
    public function switchButtonsCancelable( buttonToMoveOut:MainButton, buttonToMoveIn:MainButton, onSequenceComplete:Function):Void{
        var sequence:AnimationSequence = AnimationManager.getInstance().newSequence();
        //
        var self:MainButtonLayouter = this;
        var command:AnimationCommand = new AnimationCommand();
        command.run = function( onComplete:Function):Void{
            trace( "run 1");
            buttonToMoveOut.setX( self.horizontalOffPosition);
            this.id = FunctionUtils.executeLater( onComplete, 500); // Verzögerung nur zum Testen eingebaut
        }
        command.cancel = function( onComplete:Function):Void{
            trace("cancel 1");
            clearInterval(this.id);
            buttonToMoveOut.setX( self.x);
            onComplete();
        }
        sequence.addCommand( command);
        //
        command = new AnimationCommand();
        command.run = function( onComplete:Function):Void{
            trace("run 2");
            buttonToMoveIn.setY( buttonToMoveOut.getY());
            buttonToMoveIn.setX( self.x);
            this.id = FunctionUtils.executeLater( onComplete, 500); // Verzögerung nur zum Testen eingebaut
        }
        command.cancel = function( onComplete:Function):Void{
            trace("cancel 2");
            clearInterval( this.id);
            buttonToMoveOut.setX( self.horizontalOffPosition);
            onComplete();
        }
        sequence.addCommand( command);
        //
        AnimationManager.getInstance().runSequence( sequence, onSequenceComplete);
    } 

Ok, das mit dem Interval ist jetzt nur Testcode, aber trotzdem, ist schon ein ganz schöner Aufwand. Das ist ja jetzt nur eine Animation, wenn ich Zeit habe versuche ich später nochmal, eine andere dazu zu bauen.

mfg. r

[bokel]

Ok, das ist noch ein gutes Stück davon entfernt, sinnvoll zu sein. Die Sequenz müsste erweiterbar sein, so dass man zur Laufzeit weitere Animationen hinzufügen kann. Daraus folgt dann, dass wir nicht mehr automatisch am Ende der Sequenz "habe fertig" melden können, das müsste stattdessen die letzte Animation machen. Mal sehen.

[atothek]

Ist deine Sequenz letzendlich nicht nur eine Timeline?
Frage ist ob es das nicht klarer macht? Die Idee klingt schon mal sehr nett


mfg
Alex

[michael]

prinzipiell müsste das animationpackage solche events doch feuern.
wenn man natürlich zeitleistentweening dazwischen hat, wirds haarig mit sauberem oop.

[bokel]

Ich habe jetzt ein Beispiel gebaut, bei dem es noch eine weitere Animation gibt. Passend zum Button fährt ein Content rein und raus. Die Architektur ist jetzt dementsprechend angepasst (wie in meinem letzten Posting beschrieben).

mfg. r

[bokel]

Was mich daran allerdings stört, ist das aufwendige Management und überhaupt, ich frage mich ob der Manager überhaupt soviel wissen muss. Ich versuche später noch eine andere Version, bei der nur die Cancel-Funktionen und die Listener für das "Erfolgreich" Event verwaltet werden. Das sollte eigentlich reichen. Um den Ablauf der Animation kann sich eigentlich jemand anders kümmern.