linea che si disegna

stellina25

linea che si disegna

Ciao a tutti,
ho bisogno di creare all'interno di un piccolo filmatino in flash un pulstantino che premuto disegni una linea curva che va da un punto ad un altro.
Ho tentato di farlo in actionscript.
Sembrerebbe funzionare ma il disegno viene ripetuto all'infinito.


origin = {x: 60, y: 160}; 
control = {x: 150, y: 30}; 
end = {x: 480, y: 360}; 
percent = 0; 
this.onEnterFrame = function(){ 
    this.clear(); 
    this.lineStyle(2,0xaa0000,100); 
     
    percent += .01; 
    if (percent >= 1) percent = 0; // repeat 
     
    var newControl = { 
        x: origin.x + (control.x-origin.x)*percent, 
        y: origin.y + (control.y-origin.y)*percent 
    }; 
    var mid = { 
        x: control.x + (end.x-control.x)*percent, 
        y: control.y + (end.y-control.y)*percent 
    }; 
    var newEnd = { 
        x: newControl.x + (mid.x-newControl.x)*percent, 
        y: newControl.y + (mid.y-newControl.y)*percent 
    }; 
     
    this.moveTo(origin.x, origin.y); 
    this.curveTo(newControl.x, newControl.y, newEnd.x, newEnd.y); 
     
    arrow._x = newEnd.x; 
    arrow._y = newEnd.y; 
    arrow._rotation = Math.atan2(newEnd.y-newControl.y, newEnd.x-newControl.x)*180/Math.PI; 

};

Come faccio a stoppare l'animazione in modo che quando la freccia arriva alla fine si fermi??

Grazie!!

onsitus

Ciao Stellina,

Usa il ```
trace(newEnd.x);

Se newEnd.x raggiunge il suo valore finale (usa if()), ferma il onEnterFrame ```
this.onEnterFrame = null;
```.

:)

stellina25


origin = {x: 60, y: 160};
control = {x: 150, y: 30};
end = {x: 280, y: 360};
percent = 0;
this.onEnterFrame = function(){
 this.clear();
 this.lineStyle(2,0xaa0000,100);
 
 percent += .01;
 if (percent >= 1) percent = 0; // repeat
 
 var newControl = {
  x: origin.x + (control.x-origin.x)*percent,
  y: origin.y + (control.y-origin.y)*percent
 };
 var mid = {
  x: control.x + (end.x-control.x)*percent,
  y: control.y + (end.y-control.y)*percent
 };
 var newEnd = {
  x: newControl.x + (mid.x-newControl.x)*percent,
  y: newControl.y + (mid.y-newControl.y)*percent
 };
 
 this.moveTo(origin.x, origin.y);
 this.curveTo(newControl.x, newControl.y, newEnd.x, newEnd.y);
 
 arrow._x = newEnd.x;
 arrow._y = newEnd.y;
 arrow._rotation = Math.atan2(newEnd.y-newControl.y, newEnd.x-newControl.x)*180/Math.PI; 
 trace(newEnd.x);
 trace(newEnd.y);
 
 if (newEnd.x=='280' and newEnd.y=='360')
 {
  this.onEnterFrame = null;
 }
 
};

ho fatto cosi ma continua a ciclare e mi mostra dei valori nel file di output...
cosa sbaglio???

onsitus

Se guarda il output del trace, vedrai che newEnd.x non sara mai uguale al valore di end.x (dovuto a formula matematica).

Gli valore non devono essere in '..' e usare && invece di 'and'

Questo potrebbe essere una soluzione (credo che basta con il x)

if((end.x-10)<=newEnd.x){
    this.onEnterFrame=null;
}

Controlla l'output per vedere il valore massimo di newEnd.x e adjustare come necessita.

stellina25

grazie per la soluzione,
ma dallo stesso punto com'è possibile far partire più linee in contemporanea?

flep

Ciao,
per poter avere linee multiple che disegnano, la cosa diventa abbastanza complessa.
Ti do l'input:
-crei un array

crei un ciclo che per ogni iterazione crea una MovieClip vuota e la inserisce (push) nell' array.
crei un altro ciclo in cui fai disegnare ogni clip creata che è nell'array
i valori dei punti variano in base all' iterazione del ciclo

stellina25

Ti ringrazio per il suggerimento,
ci proverò anche se non credo di avere le competenze necessarie per farlo....