Home » AS2 »Class »Trucos »Tutoriales » Currently Reading:

Redibujar una línea con ActionScript

febrero 23, 2007 AS2, Class, Trucos, Tutoriales 5 Comments
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:

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


Aquí pueden descargarse el .FLA de ejemplo
😉

Compártelo:

Redibujar una línea con ActionScript
Visto 5.547 veces

Currently there are "5 comments" on this Article:

  1. eporroa dice:

    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

  2. Erick dice:

    Muy buen ejemplo, para comenzar a usar clases

  3. Emir dice:

    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…

  4. Emir dice:

    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.

  5. admin dice:

    @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

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Adobe Creative Meet Up, 25 octubre

28 sep 2015

Tipografía, dibujo, composición y participación serán las claves del próximo Creative Meetup en Madrid dentro del marco del Brief Festival. Únete en vivo u online para inspirarte, experimentar, aprender nuevas técnicas de la mano de grandes artistas y conocer su flujo de trabajo, ver en primicia las novedades de Adobe MAX y, sobre todo, participar y exponer tu creatividad en la multitud de actividades que te proponemos antes y durante el meetup. Si lo tuyo es la tipografía y el dibujo, haz hueco en tu mochila para tu tablet y tu ipad pues Puño y Clara Montagut prometen hacer temblar …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com