- Home
- Categorie
- Digital Marketing
- Grafica, Visual Design & UX
- linea che si disegna
-
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!!
-
Ciao Stellina,
Usa il ```
trace(newEnd.x);Se newEnd.x raggiunge il suo valore finale (usa if()), ferma il onEnterFrame ``` this.onEnterFrame = null; ```. :)
-
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???
-
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.
-
grazie per la soluzione,
ma dallo stesso punto com'è possibile far partire più linee in contemporanea?
-
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
-
Ti ringrazio per il suggerimento,
ci proverò anche se non credo di avere le competenze necessarie per farlo....