Несколько фигур, созданных динамически с помощью ActionScript 3

Question

Я пытаюсь создать анимацию в AS динамически. Я хочу создать несколько фигур, которые будут анимировать один за другим. Итак, во-первых, одна форма создается и анимируется из точки 1. После этого вторая форма должна быть сделана и анимирована до точки 2. Число позиций удержания точек. Я использую функцию drawLine для рисования линии. До этого я установил 10 точек. В строке fullDate у меня есть список точек. Результатом этого кода является только первая анимация. Я думаю, что код не генерирует новую форму, поэтому анимация заканчивается после первой анимации. Кто-нибудь знает, как исправить эту проблему? Заранее спасибо!

import flash.display.Shape; 

var startPoint:Point = new Point(); 
var endPoint:Point = new Point(); 

var prog:Number = 0; 
var bonus:Number = 1; 
var frames:int = 150; 

var numbers:Array = new Array(); 

numbers[0] = new Array(); 
numbers[0][0] = 460; 
numbers[0][1] = 100; 

numbers[1] = new Array(); 
numbers[1][0] = 10; 
numbers[1][1] = 20; 

numbers[2] = new Array(); 
numbers[2][0] = 10; 
numbers[2][1] = 100; 

numbers[3] = new Array(); 
numbers[3][0] = 10; 
numbers[3][1] = 180; 

numbers[4] = new Array(); 
numbers[4][0] = 160; 
numbers[4][1] = 20; 

numbers[5] = new Array(); 
numbers[5][0] = 160; 
numbers[5][1] = 100; 

numbers[6] = new Array(); 
numbers[6][0] = 160; 
numbers[6][1] = 180; 

numbers[7] = new Array(); 
numbers[7][0] = 310; 
numbers[7][1] = 20; 

numbers[8] = new Array(); 
numbers[8][0] = 310; 
numbers[8][1] = 100; 

numbers[9] = new Array(); 
numbers[9][0] = 310; 
numbers[9][1] = 180; 

var fullDate:String = "271524"; 

var i:Number; 
var pom:Number; 
var shapes:Vector.<Shape> = new Vector.<Shape>(); 
for (i=0; i < fullDate.length; i++){ 

    pom = int(fullDate.charAt(i)); 
    shapes[i] = new Shape(); 
    addChild(shapes[i]); 

    trace(numbers[pom+1][0]); 
    drawLine(numbers[pom][0], numbers[pom][1], numbers[pom+1][0], numbers[pom+1][1], 120); 
} 

function drawLine(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{ 
    for each(var shape:Shape in shapes) 
    { 
     shape.graphics.clear(); 
     shape.graphics.lineStyle(14,0x2dfdfd); 

     shape.graphics.moveTo(startPoint.x,startPoint.y); 
     shape.graphics.lineTo(startPoint.x + ((endPoint.x - startPoint.x) * progress), startPoint.y + ((endPoint.y - startPoint.y) * progress)); 

    } 

} 

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

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

Answer 1

Из-за асинхронной природы ActionScript, метод drawLine вызывается на каждом из форм перед первым tick выполняется. Затем метод drawTickLine рисует (ту же) линию с точками, связанными с последней частью даты в каждой из созданных вами фигур.

Следующие могут быть не идеальными, потому что это не на 100% ясно из вашего вопроса, какими должны быть результаты, но, надеюсь, он должен дать вам толчок в правильном направлении. Я попытался включить комментарии, чтобы объяснить мои мысли.

import flash.display.Shape; 
import flash.geom.Point; 
import flash.events.Event; 

var startPoint:Point = new Point(); 
var endPoint:Point = new Point(); 

var count:int = 0; 
var prog:Number = 0; 
var bonus:Number = 1; 
var frames:int = 150; 

// Pushing a bunch of point objects onto the array is a neater 
// method than using a multi-dimensional array. If you want the clarity of the 
// index to help with debugging you could also do this: 
// numbers[0] = new Point(460, 100); 
var numbers:Array = []; 
numbers.push(new Point(460, 100)); 
numbers.push(new Point(10, 20)); 
numbers.push(new Point(10, 100)); 
numbers.push(new Point(10, 180)); 
numbers.push(new Point(160, 20)); 
numbers.push(new Point(160, 100)); 
numbers.push(new Point(160, 180)); 
numbers.push(new Point(310, 20)); 
numbers.push(new Point(310, 100)); 
numbers.push(new Point(310, 180)); 

var fullDate:String = "271524"; 

// Vector for shapes seems overkill unless you need to loop over 
// your shapes again later. For now, we store a reference to the 
// current shape only 
var shape:Shape; 

// Set up the first line 
drawLine(); 

// Probably easier to run a single enter frame for the duration of the whole animation 
this.addEventListener(Event.ENTER_FRAME, tick); 

function drawLine(time:Number = 120):void { 

    // Get the appropriate index for start and end points in the numbers array 
    var startIndex:int = int(fullDate.charAt(count)); 
    var endIndex:int = int(fullDate.charAt(count + 1)); 

    startPoint = Point(numbers[startIndex]); 
    endPoint = Point(numbers[endIndex]);  

    // create a new shape and add it to stage 
    shape = new Shape(); 
    this.addChild(shape); 

    frames = time; 
    prog = 0; 
} 

function drawLineTick(progress:Number):void{ 
    shape.graphics.clear(); 
    shape.graphics.lineStyle(14,0x2dfdfd); 

    shape.graphics.moveTo(startPoint.x,startPoint.y); 
    shape.graphics.lineTo(startPoint.x + ((endPoint.x - startPoint.x) * progress), startPoint.y + ((endPoint.y - startPoint.y) * progress)); 
} 

function tick(e:Event):void { 
    drawLineTick(prog/frames);  
    prog += bonus; 

    // Finished drawing a shape 
    if(prog >= frames){ 
     // Increment count, reset progress and set up the next line 
     count ++; 
     prog = 0; 
     drawLine(); 
    } 

    // Finished drawing all shapes 
    if (count == fullDate.length + 1) { 
     // Good practice to remove the eventlistener when finished 
     this.removeEventListener(Event.ENTER_FRAME, tick); 
    } 
}