Efecto de dibujo de línea con ActionScript -

Este es un sistema muy sencillo para redibujar un trazado de manera que parezca que se está dibujando runtime.

El primer paso será crear el trazado completo que queremos dibujar:




Luego utilizaremos este trazado como guía para un MovieClip, utilizando como punto inicial y final de la interpolación el punto inicial y final del trazado: Ahora mediante código haremos que este MovieClip mientras se desplaza por la guía vaya redibujando el trazado. Para eso crearemos una clase:

1. class redibujaGuia
2. {
3. }

En el constructor de la clase pasaremos como parámentros la ruta de la instancia de clase y el MovieClip que utilizaremos

1. public function redibujaGuia(qRuta:MovieClip, qGlider:MovieClip)
2. {
3. ruta = qRuta;
4. glider = qGlider;
5. //glider._visible = false;
6. var num:Number = ruta.getNextHighestDepth();
7. linea = ruta.createEmptyMovieClip("line"+num, num);
8. linea.lineStyle(1, 0x000000, 100);
9. }

Tambien creamos un MovieClip vacio donde dibujaremos el trazado, y creamos un lineStyle por defecto.

Crearemos tambien una función para poder editar el estilo del trazado:

1. public function lineStyle(qGrosor:Number, qColor:Number, qAlfa:Number):Void
2. {
3. grosor = qGrosor;
4. color = qColor;
5. alfa = qAlfa;
6. linea.lineStyle(grosor, color, alfa);
7. linea.moveTo(glider._x, glider._y);
8. }

Por ultimo crearemos una función que genere un onEnterFrame que dibuje una línea cada vez que el MovieClip se mueva sobre la guía:

1. public function start():Void
2. {
3. glider.onEnterFrame = Delegate.create(this, onEnterFrame);
4. }
5. //---------------------------------
6. private function onEnterFrame():Void
7. {
8. act = {x:glider._x, y:glider._y};
9. linea.lineTo(act.x, act.y);
10. if (prev && act.x == prev.x && act.y == prev.y)
11. {
12. delete glider.onEnterFrame;
13. } else
14. {
15. prev = act;
16. }
17. }

Con lo que la clase completa quedaría asi:

1. import mx.utils.Delegate;
2. //---------------------------------
3. class redibujaGuia
4. {
5. private var grosor:Number;
6. private var color:Number;
7. private var alfa:Number;
8. private var ruta:MovieClip;
9. private var glider:MovieClip;
10. private var linea:MovieClip;
11. private var act:Object;
12. private var prev:Object;
13. //---------------------------------
14. public function redibujaGuia(qRuta:MovieClip, qGlider:MovieClip)
15. {
16. ruta = qRuta;
17. glider = qGlider;
18. //glider._visible = false;
19. var num:Number = ruta.getNextHighestDepth();
20. linea = ruta.createEmptyMovieClip("line"+num, num);
21. linea.lineStyle(1, 0x000000, 100);
22. }
23. //---------------------------------
24. public function lineStyle(qGrosor:Number, qColor:Number, qAlfa:Number):Void
25. {
26. grosor = qGrosor;
27. color = qColor;
28. alfa = qAlfa;
29. linea.lineStyle(grosor, color, alfa);
30. linea.moveTo(glider._x, glider._y);
31. }
32. //---------------------------------
33. public function start():Void
34. {
35. glider.onEnterFrame = Delegate.create(this, onEnterFrame);
36. }
37. //---------------------------------
38. private function onEnterFrame():Void
39. {
40. act = {x:glider._x, y:glider._y};
41. linea.lineTo(act.x, act.y);
42. if (prev && act.x == prev.x && act.y == prev.y)
43. {
44. delete glider.onEnterFrame;
45. } else
46. {
47. prev = act;
48. }
49. }
50. //---------------------------------
51. }

Para utilizarla (a parte del proceso manula de dibujar la guía y colocar el MovieClip) utilizaremos este código en el fotograma donde empieze la interpolación:

1. import redibujaGuia;
2. var linea1:redibujaGuia = new redibujaGuia(this, glider1);
3. linea1.lineStyle(2, 0x000000, 100);
4. linea1.start();

Al final el resultado es este