Sequence Documentation
Author: Alex Uhlmann
Last Modified: 09/24/05 19:15:30
Summary
Sequence class:
Sequence Properties:
Sequence Methods:
version: Documentation not provided.
description:
Sequence allows you to animate the classes of de.alex_uhlmann.animationpackage.animation one after the other in a uniform manner. Sequence uses the composite design pattern. [GoF]
Example 1: (Example .swf) Animate a sequence of animations back and forth.
var myMoveOnQuadCurve:MoveOnQuadCurve = new MoveOnQuadCurve(mc,100,100,300,300,500,100); var myScale:Scale = new Scale(mc,50,50); var myRotation:Rotation = new Rotation(mc,360); var myColorTransform:ColorTransform = new ColorTransform(mc,0xff0000,50); var mySequence:Sequence = new Sequence(); mySequence.setAnimateMode("EACH"); mySequence.addChild(myMoveOnQuadCurve); mySequence.addChild(myScale); mySequence.addChild(myRotation); mySequence.addChild(myColorTransform); mySequence.animationStyle(4000,Circ.easeInOut,"onCallback"); mySequence.animate(0,100); myListener.onCallback = function(source) { trace("end of "+source); source.callback = "onCallback2"; source.animate(100,0); } myListener.onCallback2 = function(source) { trace("end of "+source); source.callback = "onCallback"; source.animate(0,100); }
Example 2: (Example .swf) Animate a sequence of Move animations like a path animation back and forth. Notice that every Move will be animated separately like in the example above. The problem is with the backward animation.
var myMove1:Move = new Move(mc,[400,300,400,50]); var myMove2:Move = new Move(mc,[400,50,150,50]); var myMove3:Move = new Move(mc,[150,50,150,300]); var mySequence:Sequence = new Sequence(); mySequence.setAnimateMode("EACH"); mySequence.addChild(myMove1); mySequence.addChild(myMove2); mySequence.addChild(myMove3); mySequence.animationStyle(2000,Circ.easeInOut,"onCallback"); mySequence.animate(0,100); myListener.onCallback = function(source) { source.callback = "onCallback2"; source.animate(100,0); } myListener.onCallback2 = function(source) { source.callback = "onCallback"; source.animate(0,100); }
The order of Move animations doesn't seem correct for our path.
Example 3: (Example .swf) Let's fix the problem with setting the animate mode to JOIN instead of Each. Since Sequence comes by default with animate mode set to JOIN all we have to do is simply to delete the setAnimateMode line.
Example 4: (Example .swf) Notice that in the example above our easing equation is applied to every child each. To let the Move animations behave more like a path animation we need to set the easing mode to JOIN.var myMove1:Move = new Move(mc,[400,300,400,50]); var myMove2:Move = new Move(mc,[400,50,150,50]); var myMove3:Move = new Move(mc,[150,50,150,300]); var mySequence:Sequence = new Sequence(); mySequence.addChild(myMove1); mySequence.addChild(myMove2); mySequence.addChild(myMove3); mySequence.animationStyle(2000,Circ.easeInOut,"onCallback"); mySequence.animate(0,100); myListener.onCallback = function(source) { source.callback = "onCallback2"; source.animate(100,0); } myListener.onCallback2 = function(source) { source.callback = "onCallback"; source.animate(0,100); }
Reader exercise: create a smoother path animation with MoveOnQuadCurve, MoveOnCubicCurve and/or MoveOnCurve. And, take a look into MoveOnPath for another approach to create path animations using Ivan Dembicki's com.sharedfonts.Path class.var myMove1:Move = new Move(mc,[400,300,400,50]); var myMove2:Move = new Move(mc,[400,50,150,50]); var myMove3:Move = new Move(mc,[150,50,150,300]); var mySequence:Sequence = new Sequence(); mySequence.addChild(myMove1); mySequence.addChild(myMove2); mySequence.addChild(myMove3); mySequence.setEasingMode("JOIN"); mySequence.animationStyle(2000,Circ.easeInOut,"onCallback"); mySequence.animate(0,100); myListener.onCallback = function(source) { source.callback = "onCallback2"; source.animate(100,0); } myListener.onCallback2 = function(source) { source.callback = "onCallback"; source.animate(0,100); }
Example 5: (Example .swf) Animate a sequence back and forth and attaches a Trail animation on a certain part of the sequence. The Text class helps to log all the updates of the sequence. Notice the usage of Sequence.getCurrentValue and the specific properties of the eventObject returned by EventDispatcher. There are getter methods of the Sequence class that also offer the information returned by the eventObject.
var myStar:Star = new Star(275,200,60,15,6); myStar.lineStyle(); myStar.fillStyle(0x9C3031); myStar.draw() var mc:MovieClip = myStar.movieclip; var myMoveOnQuadCurve:MoveOnQuadCurve = new MoveOnQuadCurve(mc,300,100,400,300,580,100); var myScale:Scale = new Scale(mc,50,50); var myRotation:Rotation = new Rotation(mc,360); var myColorTransform:ColorTransform = new ColorTransform(mc,0x8CA6BD,0); var myText:Text = new Text(); function onStart(eventObject:Object) { this.setText(eventObject); } function onUpdate(eventObject:Object) { this.setText(eventObject); //if the next child of the Sequence is an instance of Rotation, attach the Trail //for the duration of the Rotation instance. if(eventObject.nextChild instanceof Rotation) { var myTrail:Trail = new Trail(mc); myTrail.attach(250,40,eventObject.childDuration); } } function setText(eventObject:Object) { var myTextfield:TextField = myText.getText(); if(myTextfield == null) { myText.setText(eventObject.nextChild+" is at no. " +mySequence.getCurrentValue()+" in your "+mySequence); } else { if(myTextfield.textHeight < Stage.height-10) { myText.addText("\n"+eventObject.nextChild+" is at no. " +mySequence.getCurrentValue()+" in your "+mySequence); } else { myText.movieclip.removeMovieClip(); } } } //Note that myText and mySequence will be visible inside the onUpdate, onStart //and setText functions (closure). var mySequence:Sequence = new Sequence(); mySequence.addEventListener("onStart",this); mySequence.addEventListener("onUpdate",this); mySequence.addChild(myMoveOnQuadCurve); mySequence.addChild(myScale); mySequence.addChild(myRotation); mySequence.addChild(myColorTransform); mySequence.animationStyle(6000,Circ.easeInOut,"onCallback"); mySequence.animate(0,100); myListener.onCallback = function(source) { source.callback = "onCallback2"; source.animate(100,0); } myListener.onCallback2 = function(source) { source.callback = "onCallback"; source.animate(0,100); }
usage:
var mySequence:Sequence = new Sequence();(Number) Duration of animation in milliseconds or frames. Default is milliseconds.
(Object) Easing equation in Robert Penner style. Default equation is Linear.easeNone. www.robertpenner.com/easing/
(String) Function to invoke after animation. See AnimationCore class.
description: animates the contents of the composite.
usage:
mySequence.animate(start, end);
parameters:
returns: void
description: jumps to a specific step of the animation and stays there.
usage:
instance.goto(percentage);
parameters:
returns: void
description: jumps to a specific step of the animation and stays there.
usage:
myInstance.goto(percentage);
parameters:
returns: void
description: set the animation style properties for your animation. Overwrites animationStyle settings from childs. Notice that if your easing equation supports additional parameters you can send those parameters with the easing parameter in animationStyle. You have to send an Array as easing parameter. The first element has to be the easing equation in Robert Penner style. The following parameters can be your additional parameters. i.e.:
See also "Customizable easing equations" in readme for more information.var myRotation:Rotation = new Rotation(mc); myRotation.animationStyle(2000,[Back.easeOut,4]); myRotation.run(360);
usage:
mySequence.animationStyle(duration);
mySequence.animationStyle(duration, callback);
mySequence.animationStyle(duration, easing, callback);
parameters:
returns: Void.
description: sets the animate mode. If JOIN, the start and end percentage parameters influences the composite animation as a whole. Defaults to JOIN. See class documentation.
usage: myInstance.setAnimateMode();
parameters:
returns: Boolean, indicates if the assignment was performed.
description: returns the current animate mode.
usage: myInstance.getAnimateMode();
returns: String
description: sets the easing mode. If EACH, each child will be animated separately. If JOIN the childs seem to share one easing equation. Defaults to EACH.
usage: myInstance.setEasingMode();
parameters:
returns: Boolean, indicates if the assignment was performed.
description: returns the current easing mode.
usage: myInstance.getEasingMode();
returns: String
description: returns the current child of the sequence.
usage: myInstance.getChild();
returns: IAnimatable
description: returns an Array of all children of the sequence. Could contain other Sequences.
usage: myInstance.getChildren();
returns: Array
description: returns the next child of the sequence.
usage: myInstance.getNextChild();
returns: IAnimatable
description: returns the previous child of the sequence.
usage: myInstance.getPreviousChild();
returns: IAnimatable
description: returns the duration of the currently animated child in constrast to the duration property, which is the duration of the whole Sequence.
usage: myInstance.getChildDuration();
returns: Number
description: adds a primitive or composite to the composite instance of Sequence See class description.
usage:
mySequence.addChild(component);
parameters:
returns: IAnimatable class that was added.
description: removes a primitive or composite from the composite instance of Sequence See class description.
usage:
mySequence.removeChild(component);
parameters:
returns: Void.
description: rounds animation results to integers. (might be usefull for animating pixelfonts). Default is false.
usage:
myInstance.roundResult(rounded);
parameters:
true rounds the result. Animates with integers. Less accuracy. false animates with floating point numbers.returns: Void.
description: Flash does not guaranteed that time-based tweening will reach the end value(s) of your animation. By default AnimationPackage guarantees that the end value(s) will be reached. The forceEnd method allows you to disable this guarantee and only accept the values from your easing equation. In certain situations this can lead to a smoother ending of the animation. Notice that in frame-based tweening the end value(s) will always be reached.
usage:
myInstance.forceEnd(forceEndVal);
parameters:
true or false.returns: Void.
description: returns the optimization mode. See setOptimizationMode for more information.
usage: getOptimizationMode();
returns: Boolean
description:
Allows to explicitly remove parts of the animation that don't change during
the animation.
This can add additional performance to your animation. Note that
setting this method to true has side effects. If all start and end values match,
the animation won't start and will immediatly invoke an onEnd event.
The order of values returned by getStartValue(s), getCurrentValue(s),
getEndValue(s) and the value property of the eventObject returned
by EventDispatcher might change if you set this method to true. You can
still retrieve the parts of the animation that are actually animated
if you access the Animator instance of your animation class via
myAnimator. Ask myInstance.myAnimator.setter to retrieve
all currently animated parts of the animation. See Animator
documentation. Of cource, if you know your input values you would
probably look at them.
Note that the AnimationCore class offers a static setOptimizationModes method (note the last "s" at the end) that allows you to remove parts of 'all' your animations that don't change during the animation.
usage:
myInstance.setOptimizationMode(optimize);
parameters:
returns: Void.
description: returns the current tween mode used by the instance. Please check with AnimationCore.setTweenModes for more information.
usage: getTweenMode();
returns: String that specifies the tween mode. Either AnimationCore.INTERVAL or AnimationCore.FRAMES.
description: sets the current tween mode used by the instance. Please check with AnimationCore.setTweenModes for more information.
usage: setTweenMode(t);
parameters:
returns: true if setting tween mode was successful,
false if not successful.
description: returns the current duration mode used by the instance. Please check with AnimationCore.setTweenModes for more information.
usage: getDurationMode();
returns: String that specifies the duration mode. Either AnimationCore.MS or AnimationCore.FRAMES.
description: sets the current duration mode used by the instance. Please check with AnimationCore.setTweenModes for more information.
usage: setDurationMode(d);
parameters:
returns: true if setting duration mode was successful,
false if not successful.
description: Allow a visitor to visit its elements. See Visitor design pattern [GoF].
usage:
myInstance.accept(visitor);
parameters:
returns: Void.
description: stops the animation if not locked..
usage: myInstance.stop();
returns: true if instance was successfully stopped.
false if instance could not be stopped, because it was locked.
description: pauses the animation if not locked. Call resume() to continue animation.
usage: myInstance.pause(duration);
parameters:
returns: true if instance was successfully paused.
false if instance could not be paused, because it was locked.
description: continues the animation if not locked.
usage: myInstance.resume();
returns: true if instance was successfully resumed.
false if instance could not be resumed, because it was locked.
description: locks the animation to prevent pausing, resuming and stopping. Default is unlocked.
usage: myInstance.lock();
returns: Void.
description: unlocks the animation to allow pausing, resuming and stopping. Default is unlocked.
usage: myInstance.unlock();
returns: Void.
description: checks if the instance is currently animated.
usage: myInstance.isTweening();
returns: true if instance is tweening,
false if instance is not tweening.
description: returns the original, starting value of the current tween. First position of sequence. Always zero.
usage: myInstance.getStartValue();
returns: Number
description: returns the targeted value of the current tween. first position of sequence. Last position of sequence. Number of childs added to the sequence.
usage: myInstance.getEndValue();
returns: Number
description: returns the current value of the current tween. Current position of sequence.
usage: myInstance.getCurrentValue();
returns: Number
description: returns the current state of the animation in percentage. Especially usefull in combination with goto().
usage: myInstance.getCurrentPercentage();
returns: Number
description: returns the elapsed time or frames since the current tween started tweening.
usage: myInstance.getDurationElapsed();
returns: Number
description: returns the remaining time or frames since the current tween started tweening.
usage: myInstance.getDurationRemaining();
returns: Number
description: Subscribe to a predefined event. The following standard EventDispatcher events are broadcasted
onStart, broadcasted when sequence starts.
onUpdate, broadcasted when a Sequence's child updates.
onUpdatePosition, broadcasted when sequence animates a new child.
onEnd, broadcasted when sequence ends.
The even object returned, contains the following properties:
type (String) event broadcasted.
target (Sequence) event source.
value (Sequence) current position of Sequence. First child is 1.
nextChild (IAnimatable) next child in sequence to be animated.
lastChild (IAnimatable) last child in sequence that has been animated.
childDuration (Number) duration of every single child.
usage:
mySequence.addEventListener(event, listener);
mySequence.addEventListener(event, listener, handler);
parameters:
returns: Void.
description: Removes a listener from a subscribed event.
usage:
mySequence.removeEventListener(event, listener);
mySequence.removeEventListener(event, listener, handler);
parameters:
returns: Void.
description: GDispatcher specific feature. Removes all listeners for a specific event, or for all events.
usage:
mySequence.removeAllEventListeners();
mySequence.removeAllEventListeners(event);
parameters:
returns: Void.
description: GDispatcher specific feature. Checks if a listener is already subscribed to a certain event.
usage:
mySequence.eventListenerExists(event, listener);
mySequence.eventListenerExists(event, listener, handler);
parameters:
returns: true if event exists on listener.
false if event doesn't exist on listener.
description: returns a unique ID of the instance. Usefull for associative arrays.
usage: myInstance.getID();
returns: Number
description: returns the name of the class.
usage: myInstance.toString();
returns: String