Redibujar una línea con ActionScript
Este es un sistema muy sencillo para redibujar un trazado de manera que parezca que se está dibujando runtime. Este sería el efecto:
El primer paso será crear el trazado completo que queremos dibujar. Luego utilizaremos ese 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:
- class redibujaGuia
- {
- }
En el constructor de la clase pasaremos como parámentros la ruta de la instancia de clase y el MovieClip que utilizaremos
- public function redibujaGuia(qRuta:MovieClip, qGlider:MovieClip)
- {
- ruta = qRuta;
- glider = qGlider;
- //glider._visible = false;
- var num:Number = ruta.getNextHighestDepth();
- linea = ruta.createEmptyMovieClip("line"+num, num);
- linea.lineStyle(1, 0x000000, 100);
- }
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:
- public function lineStyle(qGrosor:Number, qColor:Number, qAlfa:Number):Void
- {
- grosor = qGrosor;
- color = qColor;
- alfa = qAlfa;
- linea.lineStyle(grosor, color, alfa);
- linea.moveTo(glider._x, glider._y);
- }
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:
- public function start():Void
- {
- glider.onEnterFrame = Delegate.create(this, onEnterFrame);
- }
- //---------------------------------
- private function onEnterFrame():Void
- {
- act = {x:glider._x, y:glider._y};
- linea.lineTo(act.x, act.y);
- if (prev && act.x == prev.x && act.y == prev.y)
- {
- delete glider.onEnterFrame;
- } else
- {
- prev = act;
- }
- }
Con lo que la clase completa quedaría asi:
- import mx.utils.Delegate;
- //---------------------------------
- class redibujaGuia
- {
- private var grosor:Number;
- private var color:Number;
- private var alfa:Number;
- private var ruta:MovieClip;
- private var glider:MovieClip;
- private var linea:MovieClip;
- private var act:Object;
- private var prev:Object;
- //---------------------------------
- public function redibujaGuia(qRuta:MovieClip, qGlider:MovieClip)
- {
- ruta = qRuta;
- glider = qGlider;
- //glider._visible = false;
- var num:Number = ruta.getNextHighestDepth();
- linea = ruta.createEmptyMovieClip("line"+num, num);
- linea.lineStyle(1, 0x000000, 100);
- }
- //---------------------------------
- public function lineStyle(qGrosor:Number, qColor:Number, qAlfa:Number):Void
- {
- grosor = qGrosor;
- color = qColor;
- alfa = qAlfa;
- linea.lineStyle(grosor, color, alfa);
- linea.moveTo(glider._x, glider._y);
- }
- //---------------------------------
- public function start():Void
- {
- glider.onEnterFrame = Delegate.create(this, onEnterFrame);
- }
- //---------------------------------
- private function onEnterFrame():Void
- {
- act = {x:glider._x, y:glider._y};
- linea.lineTo(act.x, act.y);
- if (prev && act.x == prev.x && act.y == prev.y)
- {
- delete glider.onEnterFrame;
- } else
- {
- prev = act;
- }
- }
- //---------------------------------
- }
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:
- import redibujaGuia;
- var linea1:redibujaGuia = new redibujaGuia(this, glider1);
- linea1.lineStyle(2, 0x000000, 100);
- linea1.start();
Aquí pueden descargarse el .FLA de ejemplo 😉
Compártelo:
Visto 8.480 veces
Me parece que necesitas agregar una función “linea.removeMovieClip()” a la clase para que borre el trazo realizado cuando recarga, un metodo clear() no le vendrÃa mal :D, interesante el tuto por cierto!
Salu2
Muy buen ejemplo, para comenzar a usar clases
Hola amigos, mi pregunta es como hacer este efecto de “Redibujar una lÃnea con ActionScript” yo manejo Flash 8 en un nivel principiante y lamentablemente no m resulta el efecto
les pediria una ayuda por favor…
m olvidaba si alguien tiene algun codigo para realizar este tipo de efecto pra flash 8…les agradeceria muchisimo mi correo es: emirlara@hotmail.com
Dios les Beniga.
@Emir: Este ejemplo es con código actionscript 2, con lo que te ha de funcionar con Flash 8 perfectemente.. unicamente has de manejar bien el uso de clases