Efecto de trazo de lapiz animado en Flash

Este es un sistema muy sencillo para redibujar un trazado de manera que parezca que se está dibujando al tiempo que se escribe. Cómo una animación de un lápiz escribiendo una curva en el papel. Este sería el efecto:

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:

Código :

class redibujaGuia
{
}

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

Código :

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:

Código :

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:

Código :

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:

Código :

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 guía y colocar el MovieClip) utilizaremos este código en el fotograma donde empiece la interpolación:

Código :

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

 

Tweet