Question

How to make effect like drawing diagonal line in Flash using Action Script? I made animation using motion tween, and then I tried to generate action script from that motion tween, but animation starts from the middle of screen, and then it draw it. It should start from left corner, as it is in made in regular animation. This is action script it generates:

import fl.motion.Animator;
var laser_xml:XML = <Motion duration="75" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
    <source>
        <Source frameRate="25" x="13.6" y="13.25" scaleX="1" scaleY="1" rotation="0" elementType="drawing object">
            <dimensions>
                <geom:Rectangle left="10" top="10" width="7.25" height="6.5"/>
            </dimensions>
            <transformationPoint>
                <geom:Point x="-1.3793103448275863" y="-1.5384615384615385"/>
            </transformationPoint>
        </Source>
    </source>

    <Keyframe index="0"/>

    <Keyframe index="74" x="188.70000000000002" y="189.05"/>
</Motion>;

var laser_animator:Animator = new Animator(laser_xml, laser);
laser_animator.play();

Answer 1

Not sure if you’re asking how to modify the generated code, or do it solely with AS3. If the latter, this would give you the desired effect. Note though that using a Tweening library (such as TweenLite or GTween) would be cleaner:

var s:Shape = new Shape();
addChild(s); 

var startPoint:Point = new Point();
var endPoint:Point = new Point();
var prog:Number = 0;
var frames:int = 200;

animateLine(100,100,50,50);

function animateLine(startX:Number, startY:Number, endX:Number, endY:Number, time:Number = 120):void {
    startPoint.x = startX;
    startPoint.y = startY;
    endPoint.x = endX;
    endPoint.y = endY;

    frames = time;
    prog = 0;
    this.addEventListener(Event.ENTER_FRAME, tick);
}

function drawLineTick(progress:Number):void{
    s.graphics.clear();
    s.graphics.lineStyle(3,0xFF0000);
    s.graphics.moveTo(startPoint.x,startPoint.y);
    s.graphics.lineTo(startPoint.x + ((endPoint.x - startPoint.x) * progress), startPoint.y + ((endPoint.y - startPoint.y) * progress));
}

function tick(e:Event):void {
    trace("tick",prog);
    if(prog >= frames){
        this.removeEventListener(Event.ENTER_FRAME, tick);
    }

    drawLineTick(prog / frames);
    prog += 1;
}