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();

Artículos Relacionados

• Cambiar centro de rotación de un Movieclip en ActionScript 2
• Problemas de carga con Loader y ScrollPane en Flash
• Añadir a un MovieClip un efecto de espejo con Actionscript 2

actionscript

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario