Crear un Paint en Flash CS3

Domingo, 10 de febrero 2008

Como se indica en Flash Actionscript Concurso: goma de borrar no se puede "borrar" un área particular de las líneas de Sprite, MovieClip, y forma en que se localizó o rectángulos con el puntero de gráficos. Hay, de hecho, el único método clear() que, sin embargo, no tiene efecto sobre toda la superficie de nuestro objeto. La solución al problema radica en la posibilidad de utilizar el mapa de bits y objetos BitmapData. Como veremos que podemos tener acceso y manipular los datos de mapa de bits directamente con el fin de "borrar" los rasgos de un instrumento real "borrador".

Voy a presentar dos métodos diferentes para lograr la "puerta". El primer "dibujar" (eliminar) los datos directamente en BitmapData, utilizando el fillRect() método fillRect() - también se puede utilizar setPixel() por ejemplo. El segundo método, que es la preferida, utiliza los métodos de las fusiones (blendMode).

En primer lugar vamos a ver qué tipo de organización es necesaria para lograr un pintor sencillo mínima en Flash. El esquema se presenta a continuación se aplica tanto a las propuestas de la "compuerta"

esquema de mapa de bits

He creado tres capas: la primera, MovieClip o Sprite, trabaja como gerente y eventos de fondo (MouseDown, MouseUp y MouseMove). El segundo, el mapa de bits es nuestra capa principal, la que contendrá los gráficos realmente diseñado y que se aplicará el "delete". La tercera y última capa, la forma, aborda dos temas: el primero es ser capaz de utilizar directamente las funciones proporcionadas por el puntero de gráficos (como lineStyle drawRect() etc ...). También aumenta el rendimiento gráfico durante el seguimiento, como se detalla a continuación.

Método 1 - Acceso directo a los datos de mapa de bits

Esta "muestra" utiliza el fillRect() método fillRect() directamente en BitmapData (capa 2) después de que el diseño ha sido copiado (usando el draw() el método draw() de la forma (capa 3) de mapa de bits (nivel 2).

Cargando Flash Player ...

Para entender cómo funciona aquí es la misma película con capas y desordenado en pseudo 3D - elaborado en el cuadro de color - fuente:

Cargando Flash Player ...

Como se puede ver que dibuje en la capa 3, la forma. Desencadena el evento MouseUp, cuando se copia el contenido en la forma de mapa de bits (y por tanto los datos están presentes en BitmapData) y luego la forma es limpia clear()

Nota: este último punto, el clear() la forma, no debe subestimarse. Algunos ejemplos del pintor en Flash (casi todos carecen de una puerta de verdad ""), dibujando directamente en un MovieClip o forma, mantener los datos en que se basan. Después de un poco de 'dibujar el sistema se ralentiza, como el área de "vector" de los aumentos de MovieClip. En el método que he presentado este problema está resuelto porque el vector de datos de forma, cuando se copian en el mapa de bits, tasformati en bits y forma se elimina, liberando memoria y volver al flujo de diseño!

Manteniendo pulsada la tecla Ctrl (control) es "eliminado" directamente a través de la fillRect() BitmapData fillRect() Esto es posible porque fillRect() como otros métodos que funcionan en un BitmapData, permiten configurar el "color" a través de 0xARGB, donde A es el valor alfa, transparente.

El código es el siguiente - fuente:

ActionScript
  1. . MouseEvent ; flash.events de importación. MouseEvent;
  2. . BitmapData ; flash.display de importación. BitmapData;
  3. . Bitmap ; flash.display de importación. Bitmap;
  4. . GradientType ; flash.display de importación. GradientType;
  5. / /
  6. . Matrix ; flash.geom de importación. Matrix;
  7. / /
  8. Boolean = false ; MD var: Boolean = false;
  9. / /
  10. Sprite = new Sprite ( ) ; event_spr var: Sprite = Sprite nuevo ();
  11. event_spr ) ; addChild (event_spr);
  12. / /
  13. Number = event_spr . stage . stageWidth ; area_width var: Número = event_spr. etapa. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; area_height var: Número = event_spr. etapa. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; fillType var: String = GradientType. linealidad;
  17. : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var colors: Array = [0xFF0000, 0x00FF00, 0x0000FF];
  18. : Array = [ 1 , 1 , 1 ] ; var alphas: Array = [1, 1, 1];
  19. : Array = [ 0 , 128 , 255 ] ; var ratios: Array = [0, 128, 255];
  20. String = SpreadMethod . PAD ; var spreadMethod: String = SpreadMethod. PAD;
  21. : Matrix = new Matrix ( ) ; var matriz: Matrix = Matrix nuevo ();
  22. createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matriz. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr . graphics ) { con (event_spr. gráficos) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, colores, alphas, ratios, matriz, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Evento Paint
  30. ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
  31. ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
  32. ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
  33. ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
  34. / /
  35. BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; bmpd var: BitmapData = BitmapData nuevo (event_spr. ancho, event_spr. altura, es cierto, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = Bitmap nuevo (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / / Forma temporal
  39. Shape = new Shape ( ) ; draw_shape var: Forma = Forma nueva ();
  40. draw_shape ) ; addChild (draw_shape);
  41. / /
  42. e : MouseEvent ) : void { función _onMouseDown (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. : uint = 0xffffff ; var c: uint = 0xFFFFFF;
  45. . lineStyle ( 10 , c , 1 ) ; draw_shape. gráficos. lineStyle (10, c, 1);
  46. . moveTo ( e . localX , e . localY ) ; draw_shape. gráficos. moveTo (elegidos por localX, y. localy);
  47. md = true;
  48. )
  49. / /
  50. e : MouseEvent ) : void { función _onMouseUp (e: MouseEvent): void (
  51. md = false;
  52. . draw ( draw_shape ) ; bmp. BitmapData. empate (draw_shape);
  53. . clear ( ) ; draw_shape. gráficos. Clear ();
  54. )
  55. / /
  56. e : MouseEvent ) : void { función _onMouseMove (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md && ! e . ctrlKey ) { if (MD & &! y. ctrlKey) (
  59. . lineTo ( e . localX , e . localY ) ; draw_shape. gráficos. lineTo (elegidos por localX, y. localy);
  60. ( md && e . ctrlKey ) { ) Else if (MD & & y. CtrlKey) (
  61. . fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; bmp. BitmapData. hg.fillRect (Rectangle nuevos (elegidos por objetivo. mouseX - 10, y. destino. mouseY - 10, 20, 20), 0);
  62. )
  63. )
  64. / /
  65. v : String ) : void { depuración de la función (v: String): void (
  66. : Date = new Date ( ) ; var d: Fecha = Fecha de nuevo ();
  67. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ": getSeconds" + D. () + ": getMilliseconds" + D. () + ":" + v);
  68. )

Línea 61, como se muestra en el código anterior, se ejecuta siempre cuando se presiona la tecla Control. Como se puede ver esta sección de código se basa directamente en el BitmapData con el color 0, que es 0x0000!

MÉTODO 2 - Uso de los modos de fusión

Este es probablemente el mejor método para el tiempo le permite utilizar cualquier tipo de "puerta". A diferencia del método anterior no acceder directamente a los datos de mapa de bits presentes en BitmapData, sino explotar la mezcla (blendMode) y la copia de mapas de bits utilizando el draw(). método draw().

Cargando Flash Player ...

Versión en 3D - fuente:

Cargando Flash Player ...

Exactamente de la misma manera que copia los datos de la forma de mapa de bits, la "puerta" es "simultáneamente" al copiar los datos de la forma de mapa de bits, pero esta vez, el establecimiento de la draw() el método blendMode draw() para erase

El código es el siguiente - fuente:

ActionScript
  1. . MouseEvent ; flash.events de importación. MouseEvent;
  2. . BitmapData ; flash.display de importación. BitmapData;
  3. . Bitmap ; flash.display de importación. Bitmap;
  4. . GradientType ; flash.display de importación. GradientType;
  5. / /
  6. . Matrix ; flash.geom de importación. Matrix;
  7. / /
  8. Boolean = false ; MD var: Boolean = false;
  9. / /
  10. Sprite = new Sprite ( ) ; event_spr var: Sprite = Sprite nuevo ();
  11. event_spr ) ; addChild (event_spr);
  12. / /
  13. Number = event_spr . stage . stageWidth ; area_width var: Número = event_spr. etapa. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; area_height var: Número = event_spr. etapa. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; fillType var: String = GradientType. linealidad;
  17. : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var colors: Array = [0xFF0000, 0x00FF00, 0x0000FF];
  18. : Array = [ 1 , 1 , 1 ] ; var alphas: Array = [1, 1, 1];
  19. : Array = [ 0 , 128 , 255 ] ; var ratios: Array = [0, 128, 255];
  20. String = SpreadMethod . PAD ; var spreadMethod: String = SpreadMethod. PAD;
  21. : Matrix = new Matrix ( ) ; var matriz: Matrix = Matrix nuevo ();
  22. createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matriz. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr . graphics ) { con (event_spr. gráficos) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, colores, alphas, ratios, matriz, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Evento Paint
  30. ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
  31. ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
  32. ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
  33. ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
  34. / /
  35. BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; bmpd var: BitmapData = BitmapData nuevo (event_spr. ancho, event_spr. altura, es cierto, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = Bitmap nuevo (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / / Forma temporal
  39. Shape = new Shape ( ) ; draw_shape var: Forma = Forma nueva ();
  40. draw_shape ) ; addChild (draw_shape);
  41. / /
  42. e : MouseEvent ) : void { función _onMouseDown (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. : uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (! y. ctrlKey? 0xffffff: 0x000000);
  45. . lineStyle ( 10 , c , 1 ) ; draw_shape. gráficos. lineStyle (10, c, 1);
  46. . moveTo ( e . localX , e . localY ) ; draw_shape. gráficos. moveTo (elegidos por localX, y. localy);
  47. md = true;
  48. )
  49. / /
  50. e : MouseEvent ) : void { función _onMouseUp (e: MouseEvent): void (
  51. md = false;
  52. . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; bmp. BitmapData. empate (draw_shape, NULL, NULL, (elegidos por ctrlKey? "borrar": "normal"));
  53. . clear ( ) ; draw_shape. gráficos. Clear ();
  54. )
  55. / /
  56. e : MouseEvent ) : void { función _onMouseMove (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md ) { if (MD) (
  59. . lineTo ( e . localX , e . localY ) ; draw_shape. gráficos. lineTo (elegidos por localX, y. localy);
  60. )
  61. )
  62. / /
  63. v : String ) : void { depuración de la función (v: String): void (
  64. : Date = new Date ( ) ; var d: Fecha = Fecha de nuevo ();
  65. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ": getSeconds" + D. () + ": getMilliseconds" + D. () + ":" + v);
  66. )

Este código no es muy similar a la del año anterior. La diferencia real está en la fila 52! Esto determina el "modo de mezcla" cuando se copia de la forma de mapa de bits, y cuando se presiona la tecla de Control se utiliza el método de fusión de erase
Eso es todo! Se habla más sobre el mapa de bits lo más pronto posible y las diferencias entre MovieClip, Sprite, de forma y de mapa de bits ... Todos los objetos visuales!

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...

4 comentarios a "Crear un Paint en Flash CS3"

  1. getAvatar 1,0
    31 de marzo 2008 Undolog.com »Blog Archive» Cómo guardar las imágenes en Flash CS3:

    [...] ¿Cómo guardar las imágenes en Tags Flash CS3: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Biblioteca, Internet, PHP, Flash Save Image, Desarrollo, TutorialsCon Flash CS3 con el mapa de bits es lo mejor que es inmediatamente quería crear una pintura pequeña. Ya hemos visto cómo hacer una pintura pequeña (véase Creación de una aplicación ™ € Paint en Flash CS3 y pintor: La simple aplicación de dibujo en Flash CS3 Pro) pueden apoyar a una verdadera "puerta" - función de borrado, mediante el uso particular, la capa de forma y de mapa de bits. Digamos que Flash (en lugar de "Flex") no permitirá que la codificación (JPG o PNG) será guardado automático de imágenes de mapa de bits. Sin embargo, puede superar este obstáculo mediante el uso de un servidor de secuencias de comandos y la capacidad de enviar datos en POST Flash. [...]

  2. getAvatar 1,0
  3. getAvatar 1,0
    30 de octubre 2008 Gianni:

    Solución óptima, adecuada para las soluciones, incluso innnumerevoli relativas a los gráficos de aplicaciones web.

  4. getAvatar 1,0

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción:
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL