TUTORIAL 26: EL API DE DIBUJO

[roger]

 

INTRODUCCIÓN

El API de dibujo de Flash es  un conjunto de funciones que se aplican a los clips de película  que nos permite dibujar trazos y rellenos.

 

1.- ANTES DE DIBUJAR CREAMOS EL CLIP VACÍO

Para dibujar una línea primero creamos un clip de película vacío. Hasta ahora hemos creado clips de película dibujándolos en el escenario.

 

La acción para dibujar un clip de pleícula vacío es:

createEmptyMovieClip("el nobre de la línea",10);

Esta función tiene dos parámetros: el primero es el nombre del clip y el segundo es el nivel de profundidad.  

Lo situaremos también en el escenario en la esquina superior izquierda.

Ejemplo:

createEmptyMovieClip("linea1",10);

linea1._x = 0;
linea1._y = 0;

 

2.- DIBUJAMOS LA LÍNEA

Primero especificaremos el estilo de la linea

linea1.lineStyle(grosor, color hexadecimal, nivel alpha);

Ahora situamos dónde empezará a dibujarse dentro del clip que hemos creado.

linea1.moveTo(0, 0);

Una vez que sabemos dónde empezará, le decimos hasta dónde se dibujará:

linea1.lineTo(200, 100);

 

Nota: la función lineStyle teine más parámetros pero para empezar ya nos valen con estos.

 

Cómo primera práctica seria conveniente experimentar con estas funciones para crear diferentes figuras geométricas. También podéis experimentar aplicando bucles o temporizadores para crear algunos efectos.

 

[Nani]

Gracias, Roger.

[Emilia Alcaraz Delgado]

Hola a tod@s,

Estoy inssitiendo en el tema de la paleta de colores y he creado esta actividad.

Alguien sabe cómo evitar que la pintura salga del lienzo ??? No consigo solucionarlo.

Muchas gracias, Emilia

[Nani]

Emilia, te ha quedado genial. La impresora no me va. Cuando me pongo encima, parpadea. ¿Es así o es mi navegador?

[Alfredo Rodrigálvarez]

Emilia me gusta mucho, mucho tu trabajo.

Y se puede aplicar en el cole.

Un saludo.

Alfredo

[roger]

Emilia puedes crearesto:

Crear una sentencia condicional if . 

Con esta sentencia comparas las coordenadas del puntero  del ratón con las del lienzo. Si el puntero  está dentro del lienzo pues dibujas. Por ejemplo para dibujar en un lienzo que va desde las coordenadas 10,10 hasta  500,500

if(_root._xmouse>10 and _root._xmouse<500 and _root_ymouse>10 and _root._ymouse<500) {

acciones para dibujar

}

Emilia Alcaraz Delgado dijo:

Hola a tod@s,

Estoy inssitiendo en el tema de la paleta de colores y he creado esta actividad.

Alguien sabe cómo evitar que la pintura salga del lienzo ??? No consigo solucionarlo.

Muchas gracias, Emilia

[Emilia Alcaraz Delgado]

Hola Roger,

Gracias por tu respuests, pero no he sido capaz de incorporar el código. No sé si se adapta muy bien al que yo tengo.

A ver si podéis  dar otra pista. Adjunto el fla.

Nani, ya he arreglado la impresora.

Muhas gracias. Emilia

[roger]

Mira Emilia,

El código es esté:

function dibujar() {
if (_root._xmouse>34 and _root._ymouse>28 and _root._xmouse<569 and _root._ymouse<565) {
trazo.moveTo(_xmouse, _ymouse);

trazo.onMouseMove = function() {
if (_root._xmouse>34 and _root._ymouse>28 and _root._xmouse<569 and _root._ymouse<565) {
this.lineStyle(ancho_trazo, color_trazo, 100);
this.lineTo(_xmouse, _ymouse);}
updateAfterEvent();
};
}
trazo.onMouseUp = function() {
delete this.onMouseMove;
};

Te he puesto en cursiva las sentencias condicionales que utiizan operadores lógicos para controlar el espacio del trazo.

Te ha quedado muy bien, me gusta. Quizá yo haría más pequeña la gota de tinta que coge el lápiz para indetificar el color.

Una sugerencia: Crea un lapiz goma con el color blanco para utilizarlo par borrar segmentos de trazo.

[Emilia Alcaraz Delgado]

Hola Roger,

Muchísimas gracias. El problema era que sólo había añadido el código en un sitio, en la función dibujar. No se me había ocurrido ponerlo en los dos sitios.

Ahora, lo estudiaré más detenidamente.

Gracias de nuevo. Emilia

[Emilia Alcaraz Delgado]

Hola Roger,

Gracias a tu ayuda y a tus sugerencias la activida. ha mejorado mucho.

Aquí tenéis el resultado

Hasta pronto, Emilia

[Amalia Casas]

Emilia, un trabajo fantástico. Enhorabuena!.

[roger]

Te ha quedado estupendo Emilia. Una idea más y que yo tengo pensado hacer también: una opciòn que permita calcar dibujos. Creamos un bloc de dibujo en una capa inferior con dibujos simples.

[Nani]

Hala, qué chulo!