CODEWITHSUNDEEP
flashanimationactionscript
Bob
Bob

Reputation: 8704

How to draw diagonal line in action script

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();

Upvotes: 0

Views: 661

Answers (1)

BadFeelingAboutThis
BadFeelingAboutThis

Reputation: 14406

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;
}

Upvotes: 1

Related Questions