topical media & game development
graphic-flex-draw-classes-DrawingGradientLines.ax
graphic-flex-draw-classes-DrawingGradientLines.ax
[swf]
flex
package {
import flash.display.CapsStyle;
import flash.display.GradientType;
import flash.display.Shape;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.*;
import flash.geom.Matrix;
import flash.geom.Point;
[SWF(width=550, height=400, backgroundColor=0xFFFFFF)]
Demonstrates how gradient lines can be drawn with the drawing API.
This example specifies the same color but with different transparencies, creating dashes.
public class @ax-graphic-flex-draw-classes-DrawingGradientLines extends Sprite {
private var _currentShape:Shape;
private var _color:uint;
private var _startPosition:Point;
Constructor. Sets up listeners for mouse events.
public function @ax-graphic-flex-draw-classes-DrawingGradientLines() {
super();
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage(e:Event):void
{
this.init();
}
private function init():void
{
stage.addEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
}
Draws the gradient line from the start position to the current mouse position.
private function drawLine():void {
var thickness:Number = 40;
// same color
var colors:Array = [_color, _color];
// two different transparencies
var alphas:Array = [1, 0];
// same ratio, means an immediate change between transparencies
var ratios:Array = [180, 75];
// find the angle of the line based on the start and current mouse position
var currentPosition:Point = new Point(stage.mouseX, stage.mouseY);
var xDist:Number = (currentPosition.x - _startPosition.x);
var yDist:Number = (currentPosition.y - _startPosition.y);
var angle:Number = Math.atan2(yDist, xDist);
// use the matrix to rotate the gradient
var matrix:Matrix = new Matrix();
matrix.createGradientBox(thickness, thickness, angle);
// draw the gradient line
_currentShape.graphics.clear();
_currentShape.graphics.lineStyle(thickness/8, 0, 1, false, null, CapsStyle.SQUARE);
_currentShape.graphics.lineGradientStyle(GradientType.LINEAR, colors, alphas, ratios, matrix, SpreadMethod.REPEAT);
_currentShape.graphics.moveTo(_startPosition.x, _startPosition.y);
_currentShape.graphics.lineTo(stage.mouseX, stage.mouseY);
}
Handler for when the stage is clicked. This adds a new shape to draw new line,
saves the start position for the line and sets up a listener for when the mouse moves.
parameter: event Event dispatched by stage.
private function onStageMouseDown(event:MouseEvent):void {
_color = Math.random()*0xFFFFFF;
_currentShape = new Shape();
addChild(_currentShape);
_startPosition = new Point(stage.mouseX, stage.mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove);
}
Handler for when the mouse is released. This removes the listener for when the mouse moves.
parameter: event Event dispatched by stage.
private function onStageMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove);
}
Handler for when the mouse moves. This updates the current line.
parameter: event Event dispatched by stage.
private function onStageMouseMove(event:MouseEvent):void {
drawLine();
event.updateAfterEvent();
}
}
}
(C) Æliens
27/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.