Está en la página 1de 5

Este es un sistema muy sencillo para redibujar un trazado de manera que parezca que se est dibujando al tiempo que

se escribe. Cmo una animacin de un lpiz escribiendo una curva en el papel. Este sera el efecto:

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

Luego utilizaremos este trazado como gua para un MovieClip, utilizando como punto inicial y final de la interpolacin el punto inicial y final del trazado:

Ahora mediante cdigo haremos que este MovieClip mientras se desplaza por la gua vaya redibujando el trazado. Para eso crearemos una clase:

Cdigo :

class redibujaGuia { }

En el constructor de la clase pasaremos como parmetros la ruta de la instancia de clase y el MovieClip que utilizaremos

Cdigo :

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 funcin para poder editar el estilo del trazado:

Cdigo :

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 funcin que genere un onEnterFrame que dibuje una lnea cada vez que el MovieClip se mueva sobre la gua:

Cdigo :

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 quedara asi:

Cdigo :

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 manual de dibujar la gua y colocar el MovieClip) utilizaremos este cdigo en el fotograma donde empiece la interpolacin:

Cdigo :

import redibujaGuia; var linea1:redibujaGuia = new redibujaGuia(this, glider1);

linea1.lineStyle(2, 0x000000, 100); linea1.start();

También podría gustarte