Home » AS3 »Avanzado »Class » Currently Reading:

Cómo duplicar MovieClips con gráficos en ActionScript 3

enero 3, 2008 AS3, Avanzado, Class 1 Comment
Cómo duplicar MovieClips con gráficos en ActionScript 3

Este código de ejemplo es para duplicar MovieClips que contienen gráficos creados con código.

En el post anterior escribí otra clase para duplicar un MovieClip, en el que se veía que había que para duplicar el clip lo que hay que hacer es crear otra instancia de la misma clase y aplicarle todas las propiedades del clip original al clip duplicado.

El problema viene cuando la propiedad graphics no puede ser copiada directamente, por lo que no podemos hacer esto:

  1. duplicado.graphics = target.graphics;

De manera que al duplicar el clip los gráficos que hayan sido creados por código no se visualizaran.

Navegando por Kirupa vi un método de solucionar este problema. Consiste en crear un objeto Proxy que irá guardando un registro de la propiedad graphics del clip original, y se utilizará para asignarla al clip duplicado.

Esta es la clase que utilizaremos como Proxy:

  1. package com.zguillez.display
  2. {
  3.    import flash.display.Graphics;
  4.    import flash.utils.flash_proxy;
  5.    import flash.utils.Proxy;
  6.    //-----------------------------
  7.    public class GraficoDuplicado extends Proxy
  8.    {
  9.       private var _graphics:Graphics;
  10.       private var historial:Array = new Array();
  11.       //-----------------------------
  12.       public function GraficoDuplicado(graphics:Graphics)
  13.       {
  14.          _graphics = graphics;
  15.       }
  16.       //-----------------------------
  17.       public function get graphics():Graphics
  18.       {
  19.          return _graphics;
  20.       }
  21.       public function set graphics(g:Graphics):void
  22.       {
  23.          _graphics = g;
  24.          copy(this);
  25.       }
  26.       //-----------------------------
  27.       public function copy(graficos:GraficoDuplicado):void
  28.       {
  29.          var hist:Array = graficos.historial;
  30.          historial = hist.slice();
  31.          if (_graphics) {
  32.             var i:int;
  33.             var n:int = hist.length;
  34.             _graphics.clear();
  35.             for (i=0; i<n; i += 2) {
  36.                _graphics&#91;hist[i]].apply(_graphics, hist[i + 1]);
  37.             }
  38.          }
  39.       }
  40.       //-----------------------------
  41.       //-----------------------------
  42.       override flash_proxy function callProperty(metodo:*, ... args):*
  43.       {
  44.          metodo = String(metodo);
  45.          switch (metodo) {
  46.             case "clear" :
  47.                historial.length = 0;
  48.                break;
  49.             default :
  50.                historial.push(metodo, args);
  51.          }
  52.          if (_graphics && metodo in _graphics) {
  53.             return _graphics&#91;metodo].apply(_graphics,args);
  54.          }
  55.       }
  56.       //-----------------------------
  57.    }
  58. }&#91;/as]</div>
  59.  
  60. En la que en el contructor pasaremos la referencia de la propiedad graphics del clip original.
  61.  
  62. lo importante de esta clase es el método override flash_proxy function callProperty con el que asignaremos los métodos al proxy para que guarde en un Array el historial de graficos del clip original a medida que se van creando, y los asignaremos al clip duplicado a través del método copy();
  63.  
  64. Creada esta clase deberemos instanciarla dentro de los objetos gráficos que creemos, así que para un clip en el que vayamos a crear gráficos por código que posteriormente queramos duplicar escribiremos esta otra clase:
  65.  
  66. <div id=codigo>[as]package com.zguillez.display
  67. {
  68.    import flash.display.Shape;
  69.    import com.zguillez.display.GraficoDuplicado;
  70.    //-----------------------------
  71.    public class Grafico extends Shape
  72.    {
  73.       private var _graficos:GraficoDuplicado;
  74.       //-----------------------------
  75.       public function Grafico()
  76.       {
  77.          _graficos = new GraficoDuplicado(graphics);
  78.       }
  79.       //-----------------------------
  80.       public function get graficos():GraficoDuplicado
  81.       {
  82.          return _graficos;
  83.       }
  84.       //-----------------------------
  85.    }
  86. }

Únicamente es una clase que extiende de Shape que incluye un objeto de la clase anterior.

Ahora en el documento .FLA escribiremos así tanto el clip original como las sucesivas copias:

  1. import com.zguillez.display.Grafico;
  2.  
  3. //original
  4. var grafico1:Grafico = new Grafico();
  5. Object(grafico1.graficos).beginFill(0xFFFFFF);
  6. Object(grafico1.graficos).lineStyle(1, 0);
  7. Object(grafico1.graficos).drawRect(0, 0, 50, 50);
  8. grafico1.x = 10;
  9. grafico1.y = 10;
  10. addChild(grafico1);
  11.  
  12. //duplicado
  13. var grafico2:Grafico = new Grafico();
  14. grafico2.graficos.copy(grafico1.graficos);
  15. grafico2.x = 100;
  16. grafico2.y = 10;
  17. addChild(grafico2);

Compártelo:

Cómo duplicar MovieClips con gráficos en ActionScript 3

Post relacinonados:

  1. Cómo duplicar un MovieClip en ActionScript 3
  2. Comunicación entre clases Actionscript 3 con EventDispatcher
  3. Acceder a funciones en MovieClips de películas .swf externas
  4. Clase de ActionScript 3 para añadir sombras a MovieClips
  5. Manejo de MovieClips con ActionScript 3

YARPP
Visto 9.867 veces

Currently there is "1 comment" on this Article:

  1. Rafeo dice:
    30 noviembre, -0001 a las 12:00 am

    Buen código ahora ya se en dónde consultar cuando vuelva a moverle a eso de los duplicados 😉 ,jejeje.

Comment on this Article:








Usuario registrado

Conectar con
Conectar con

Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com