Drawer Documentation
Author: Alex Uhlmann
Last Modified: 11/19/05 16:49:07
Summary
Drawer class:
Drawer Properties:
Drawer Methods:
version: Documentation not provided.
description:
Drawer allows to draw and animate arbitrary shapes/lines and can also treat the outline and fill separately. Drawer uses the composite design pattern. [GoF] There are two different approaches using Drawer:
For most use cases the drawBy/animateBy approach will probably work for you. It is also the most optimized approach. Behind the scences Drawer shares a single movieclip for all children that each represent one outline and another movieclip for the fill. Since all children share a single movieclip the Flash Player connects the different outlines. Example 1: (Example .swf) Draw a consistent, filled shape.
var part1:Line = new Line(100,100,200,100);
var part2:CubicCurve = new CubicCurve(200,100,250,50,300,150,350,100);
var part3:QuadCurve = new QuadCurve(350,100,400,250,300,400);
var part4:Line = new Line(300,400,90,350,1,8);
var part5:Line = new Line(90,350,100,100);
var myDraw_mc:MovieClip = this.createEmptyMovieClip("draw_mc",999);
var myDrawer:Drawer = new Drawer(myDraw_mc);
myDrawer.addChild(part1);
myDrawer.addChild(part2);
myDrawer.addChild(part3);
myDrawer.addChild(part4);
myDrawer.addChild(part5);
myDrawer.lineStyle(5,0x000000,50);
myDrawer.drawBy();
myDrawer.fillStyle(0xff0000,50);
myDrawer.fill();
var part1:DashLine = new DashLine(100,100,200,100);
part1.lineStyle(2,0x000000,50);
var part2:CubicCurve = new CubicCurve(200,100,250,50,300,150,350,100);
part2.lineStyle(1,0xff0000,100);
var part3:QuadCurve = new QuadCurve(350,100,400,250,300,400);
part3.lineThickness = 4;
var part4:DashLine = new DashLine(300,400,90,350,1,8);
part4.lineStyle(6,0x0000ff,100);
var part5:Line = new Line(90,350,100,100);
part5.lineStyle(6,0x00ff00);
var myDraw_mc:MovieClip = this.createEmptyMovieClip("draw_mc",999);
var myDrawer:Drawer = new Drawer(myDraw_mc);
myDrawer.addChild(part1);
myDrawer.addChild(part2);
myDrawer.addChild(part3);
myDrawer.addChild(part4);
myDrawer.addChild(part5);
myDrawer.draw();
myDrawer.fillStyle(0xff0000,50);
myDrawer.fill();
AnimationCore.duration_def = 500;
AnimationCore.easing_def = Circ.easeInOut;
var part1:DashLine = new DashLine(100,100,200,100);
part1.lineStyle(2,0x000000,50);
part1.animationStyle(1000,Sine.easeIn);
var part2:CubicCurve = new CubicCurve(200,100,250,50,300,150,350,100);
part2.lineStyle(1,0xff0000,100);
var part3:QuadCurve = new QuadCurve(350,100,400,250,300,400);
part3.lineThickness = 4;
var part4:DashLine = new DashLine(300,400,90,350,1,8);
part4.lineStyle(6,0x0000ff,100);
var part5:Line = new Line(90,350,100,100);
part5.lineStyle(6,0x00ff00);
part5.animationStyle(1000,Bounce.easeOut);
var myDraw_mc:MovieClip = this.createEmptyMovieClip("draw_mc",999);
var myDrawer:Drawer = new Drawer(myDraw_mc);
myDrawer.addChild(part1);
myDrawer.addChild(part2);
myDrawer.addChild(part3);
myDrawer.addChild(part4);
myDrawer.addChild(part5);
myDrawer.addEventListener("onEnd",this,"fillShape");
myDrawer.animate(0,100);
function fillShape(eventObject:Object) {
myDrawer.fillStyle(0xff0000,50);
myDrawer.fill();
myDrawer.fillMovieclip._alpha = 0;
new Alpha(myDrawer.fillMovieclip).run(100,1000);
new ColorTransform(myDrawer.lineMovieclip).run(0xffff00,0,3000,Quad.easeOut);
}
For another example take a look at example no. 2 from the Animator class.
usage:
var myDrawer:Drawer = new Drawer();
var myDrawer:Drawer = new Drawer(mc);
parameters:
(MovieClip) Movieclip that contains the drawing.
(MovieClip) Movieclip that contains all outlines.
(MovieClip) Movieclip that contains the fill.
(Number) Outline thickness.
(Number) Outline color of the drawing as hex number.
(Number) Outline transparency (alpha).
(Number) Fill color of the drawing.
(Number) Fill transparency.
description: Draws the contents of the composite.
usage:
myInstance.draw();
returns: Void.
description: Draws the contents of the composite.
usage:
myInstance.drawBy();
returns: Void.
description: animates the contents of the composite.
usage:
myInstance.animate(start, end);
parameters:
returns: void
description: animateBy the contents of the composite.
usage:
myInstance.animateBy(start, end);
parameters:
returns: void
description: Fills the contents of the composite.
usage:
myInstance.fill();
returns: Void.
description: define outline. Overwrites lineStyle settings from childs.
usage:
myInstance.lineStyle();
myInstance.lineStyle(lineThickness, lineRGB, lineAlpha);
parameters:
returns: Void.
description: define fill.
usage:
myInstance.fillStyle();
myInstance.fillStyle(fillRGB, fillAlpha);
parameters:
returns: Void.
description: Same interface as MovieClip.beginGradientFill(). See manual.
usage:
myInstance.gradientStyle(fillType, colors, alphas, ratios, matrix);
parameters:
returns: Void.
description: set animation settings. Overwrites animationStyle settings from childs.
usage:
myInstance.animationStyle(duration);
myInstance.animationStyle(duration, callback);
myInstance.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 of Sequence for details.
usage: myInstance.setAnimateMode();
parameters:
returns: Boolean, indicates if the assignment was performed.
description: returns the current animate mode.
usage: myInstance.getAnimateMode();
returns: String
description: returns the current child of the sequence.
usage: myInstance.getChild();
returns: IOutline
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: IOutline
description: returns the previous child of the sequence.
usage: myInstance.getPreviousChild();
returns: IAnimatable
description: returns the duration of every single 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 Drawer See class description.
usage:
myInstance.addChild(component);
parameters:
returns: IOutline class that was added.
description: removes a primitive or composite from the composite instance of Drawer See class description.
usage:
myInstance.removeChild(component);
parameters:
returns: Void.
description: removes all drawings.
usage:
myInstance.clear();
returns: Void.
description: Allow a visitor to visit its elements. See Visitor design pattern [GoF].
usage:
myInstance.accept(visitor);
parameters:
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(tweenMode);
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(durationMode);
parameters:
returns: true if setting duration mode was successful,
false if not successful.
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();
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 sequence animates a new object.
onEnd, broadcasted when animation ends.
The even object returned, contains the following properties:
type (String) event broadcasted.
target (Sequence) event source.
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:
myInstance.addEventListener(event, listener);
myInstance.addEventListener(event, listener, handler);
parameters:
returns: Void.
description: Removes a listener from a subscribed event.
usage:
myInstance.removeEventListener(event, listener);
myInstance.removeEventListener(event, listener, handler);
parameters:
returns: Void.
description: GDispatcher specific feature. Removes all listeners for a specific event, or for all events.
usage:
myInstance.removeAllEventListeners();
myInstance.removeAllEventListeners(event);
parameters:
returns: Void.
description: GDispatcher specific feature. Checks if a listener is already subscribed to a certain event.
usage:
myInstance.eventListenerExists(event, listener);
myInstance.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