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"

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).
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:
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:
- / /
- / /
- / /
- event_spr ) ; addChild (event_spr);
- / /
- / /
- createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matriz. createGradientBox (area_width, area_height, 1, 0, 0);
- / /
- event_spr . graphics ) { con (event_spr. gráficos) (
- fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, colores, alphas, ratios, matriz, spreadMethod);
- 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
- ; endFill ();
- )
- / / Evento Paint
- ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
- ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
- ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
- ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
- / /
- 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);
- bmp ) ; addChild (bmp);
- / / Forma temporal
- draw_shape ) ; addChild (draw_shape);
- / /
- ) ; debug ( "_onMouseDown");
- . lineStyle ( 10 , c , 1 ) ; draw_shape. gráficos. lineStyle (10, c, 1);
- . moveTo ( e . localX , e . localY ) ; draw_shape. gráficos. moveTo (elegidos por localX, y. localy);
- md = true;
- )
- / /
- md = false;
- . draw ( draw_shape ) ; bmp. BitmapData. empate (draw_shape);
- . clear ( ) ; draw_shape. gráficos. Clear ();
- )
- / /
- ) ; debug ( "_onMouseMove");
- md && ! e . ctrlKey ) { if (MD & &! y. ctrlKey) (
- . lineTo ( e . localX , e . localY ) ; draw_shape. gráficos. lineTo (elegidos por localX, y. localy);
- ( md && e . ctrlKey ) { ) Else if (MD & & y. CtrlKey) (
- . 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);
- )
- )
- / /
- d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ": getSeconds" + D. () + ": getMilliseconds" + D. () + ":" + v);
- )
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().
Versión en 3D - fuente:
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:
- / /
- / /
- / /
- event_spr ) ; addChild (event_spr);
- / /
- / /
- createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matriz. createGradientBox (area_width, area_height, 1, 0, 0);
- / /
- event_spr . graphics ) { con (event_spr. gráficos) (
- fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, colores, alphas, ratios, matriz, spreadMethod);
- 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
- ; endFill ();
- )
- / / Evento Paint
- ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
- ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
- ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
- ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
- / /
- 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);
- bmp ) ; addChild (bmp);
- / / Forma temporal
- draw_shape ) ; addChild (draw_shape);
- / /
- ) ; debug ( "_onMouseDown");
- . lineStyle ( 10 , c , 1 ) ; draw_shape. gráficos. lineStyle (10, c, 1);
- . moveTo ( e . localX , e . localY ) ; draw_shape. gráficos. moveTo (elegidos por localX, y. localy);
- md = true;
- )
- / /
- md = false;
- . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; bmp. BitmapData. empate (draw_shape, NULL, NULL, (elegidos por ctrlKey? "borrar": "normal"));
- . clear ( ) ; draw_shape. gráficos. Clear ();
- )
- / /
- ) ; debug ( "_onMouseMove");
- md ) { if (MD) (
- . lineTo ( e . localX , e . localY ) ; draw_shape. gráficos. lineTo (elegidos por localX, y. localy);
- )
- )
- / /
- d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ": getSeconds" + D. () + ": getMilliseconds" + D. () + ":" + v);
- )
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!













[...] ¿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. [...]
[...] Crear un Paint en Flash CS3 [...]
Solución óptima, adecuada para las soluciones, incluso innnumerevoli relativas a los gráficos de aplicaciones web.
@ Jim: ¡Gracias! Véase también pintor: La simple aplicación de dibujo en Flash CS3 Pro