topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#graphic-flex-image-effects-01-Flex-DrawingGradientLines.ax

#graphic-flex-image-effects-01-Flex-DrawingGradientLines.ax [swf] [flash] 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.MouseEvent;
          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-image-effects-01-Flex-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-image-effects-01-Flex-DrawingGradientLines() {
                          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 = [127, 127];
  
                          // 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, 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();
                  }
  
          }
  
  }

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

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.