First, you need to get handle of AS3 drawing API and geometry/math capabilities.
Math is, well, the same as anywhere else.
In JavaScript you will need to get knowledge of its API as well - it is very similar because AS3 and JavaScript are siblings.
stop();
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
/**
* Shape which is used to draw line into.
* Basically line drawing itself.
*/
var animatedLineOverlay:Shape;
/**
* Instance of animatedLineOverlay.graphics
* This variable is created to be reused
*/
var overlayGraphics:Graphics;
// array of points between which to draw line
var overlayPoints:Array;
// x and y postions of line drawing
var overlayMargin:Number = 30;
/**
* Used to kepp reference to current start and end points
* between which line is being drawn
*/
var currentPoints:Object;
/**
* Next point to which draw line in the animation.
*
* Declare here so it can be reused.
*/
var nextPoint:Point;
/**
* Line straight segmen starting point.
*/
var sPoint:Point;
/**
* Line straight segment end point
*/
var ePoint:Point;
/**
* Anngle under which to draw line segment
*/
var angle:Number;
/**
* Line draw speed
*/
var speed:Number = 8;
/**
* How far to advance line animation in a single frame along x
*/
var advanceX:Number;
/**
* How far to advance line animation in a single frame along y
*/
var advanceY:Number;
init();
/**
* Inititalizes entire thing by calling specialized functions
*/
function init():void
{
makeBackground();
definePoints();
makeOverlay();
startAnimation();
}
/**
* Starts line animation by adding ENTER_FRAME event listener
*/
function startAnimation():void
{
addEventListener(Event.ENTER_FRAME, drawLine);
}
/**
* ENTER_FRAME event handler
* @param e
*/
function drawLine(e:Event):void
{
// if no currentPoints defined - go through the logic
if (!currentPoints)
{
/**
* since we shorten overlayPoints while animating line
* whyen array is empty - stop animation
*/
if (overlayPoints.length == 0)
{
// stop animation
removeEventListener(Event.ENTER_FRAME, drawLine);
// calling return will effectively exit drawLine function
return;
}
// get point to process by extracting first element in the array
currentPoints = overlayPoints.shift();
// if element contains color property - change line color
if (currentPoints.lineColor)
{
overlayGraphics.lineStyle(1, currentPoints.lineColor, 1, true);
}
// get start and end points
sPoint = currentPoints.start;
ePoint = currentPoints.end;
// calculate angle between the points
angle = Math.atan2(ePoint.x - sPoint.x, ePoint.y - sPoint.y);
// calculate how far line needs to advance along x/y based on the angle
advanceX = speed * Math.sin(angle);
advanceY = speed * Math.cos(angle);
// move line to startgin position
overlayGraphics.moveTo(sPoint.x, sPoint.y);
// starting point position
nextPoint = new Point(sPoint.x, sPoint.y);
}
// advance drawing coordinates
nextPoint.x += advanceX;
nextPoint.y += advanceY;
// add to line segment nextPoint coordinates
overlayGraphics.lineTo(nextPoint.x, nextPoint.y);
/**
* if the lates drawing did not get to the exact target point
* add the difference
*/
if (Point.distance(ePoint, nextPoint) <= speed)
{
// add the difference
overlayGraphics.lineTo(ePoint.x, ePoint.y);
/**
* nullify currentPoints so that on the next frame
* funciont exectures first conditional
*/
currentPoints = null;
}
}
/**
* Creates data for usage in animation.
* Points coordinates are arbitrary.
*/
function definePoints():void
{
// use this variables to make drawing dynamic - based on overall application dimensions
var overlayWidth:Number = stage.stageWidth - overlayMargin * 2;
var overlayHeight:Number = stage.stageHeight - overlayMargin * 2;
overlayPoints = [];
/**
* each array element will be an Object
* each Object will have two properties start and end
* which represent points at which, naturally start and end line segment
*
* points values are totally arbitrary - use your imagination
*/
overlayPoints.push({start: new Point(0, 0), end: new Point(0, overlayHeight / 6)});
overlayPoints.push({start: new Point(0, overlayHeight * .5), end: new Point(0, overlayHeight)});
overlayPoints.push({start: new Point(0, overlayHeight), end: new Point(overlayWidth / 8, overlayHeight)});
overlayPoints.push({start: new Point(overlayWidth / 8, overlayHeight), end: new Point(overlayWidth / 6, overlayHeight - 50)});
overlayPoints.push({start: new Point(overlayWidth / 6, overlayHeight - 50), end: new Point(overlayWidth * .5, overlayHeight - 50)});
// this element also has color property - to change line color at this segment
overlayPoints.push({start: new Point(overlayWidth * .5, overlayHeight - 50), end: new Point(overlayWidth - 20, overlayHeight - 50), lineColor: 0xFFFFFF});
overlayPoints.push({start: new Point(overlayWidth - 20, overlayHeight - 50), end: new Point(overlayWidth - 20, overlayHeight - 100)});
overlayPoints.push({start: new Point(overlayWidth - 20, overlayHeight - 100), end: new Point(overlayWidth, overlayHeight - 150)});
overlayPoints.push({start: new Point(overlayWidth, overlayHeight - 150), end: new Point(overlayWidth, overlayHeight - 200)});
}
/**
* Creates line drawing plain
*/
function makeOverlay():void
{
// instantiate
animatedLineOverlay = new Shape();
// gain reference to the graphics API
overlayGraphics = animatedLineOverlay.graphics;
// define line properties
overlayGraphics.lineStyle(1, 0, 1, true);
overlayGraphics.beginFill(0x000000);
// draw initial rectangle at the top/left
overlayGraphics.drawRect(0, 0, 80, 10);
overlayGraphics.endFill();
// position drawing plain at its margin
animatedLineOverlay.x = animatedLineOverlay.y = overlayMargin;
addChild(animatedLineOverlay);
}
/**
* Makes applpication background.
*/
function makeBackground():void
{
graphics.beginFill(0xFF8040);
graphics.drawRect(0, 0, stage.stageWidth * .5, stage.stageHeight);
graphics.endFill();
graphics.beginFill(0x0070DF);
graphics.drawRect(stage.stageWidth * .5, 0, stage.stageWidth * .5, stage.stageHeight);
graphics.endFill();
}
16
Replies
AdChoices