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.

 

[roger]

Emilia es más fácil de lo que piensas. Solamente debes poner un random de color en la función de estilo de línea y una variable que se va incrementando en el parámetro grosor.

[Nani]

No es parecido a otro que hicimos cuando las duplicaciones???

[Emilia Alcaraz Delgado]

Hola Roger,

 

Muchas gracias por las pistas. Han sido definitivas !!!

 

Aquí tenéis mi lápiz de colores:

 

[Nani]

Bueno, a mí no me ha salido así, exactamente, pero hay que levantar el lápiz y pulsar otra vez para que vaya cambiando el color y aumentando el tamaño.

Menos da una piedra, jeje.

[Alfredo Rodrigálvarez]

Apoyándome en las líneas de Nani, a la que le doy las gracias he realizado mi aplicación.

Os dejo los ficheros.

 

[Nani]

Gracias Alfredo, eso de cambiar el color del lápiz es lo que no era capaz de sacar.

[Alfredo Rodrigálvarez]

Adjunto el ultimo trabajillo, sacando de aquí y de allá.

 

[roger]

CONTINUACIÓN DEL TUTORIAL

6..- PROGRAMA PARA DIBUJAR TRAZOS

 

[Emilia Alcaraz Delgado]

Hola Roger,

 

Si de lo que se trata es de copiar el código, como hemos ido haciendo hasta ahora, a mi no me ha funcionado y lo he revisado un montón de veces.

 

A ver si alguien lo prueba y le sale.

 

Gracias, por todo. Emilia

[roger]

 

¿Emilia qué error te da?

[Nani]

Roger, no sé si es esto lo que nos pides.

[roger]

 

Hola de nuevo,

 

Una vez que ya dominamos la API de flash para dibujar trazos, os propongo ahora una actividad donde el programa permita dibujar líneas rectas. Podéis conseguirlo a partir de la modificación del código que publique correspondiente al apartado 6 del tutorial.

 

La idea sería hacer una actividad que consiste en relacionar con una flecha dos objetos, imágenes, palabras...

Para crear el código  os doy unas orientaciones:

 

Programar que cuando se presione el ratón se almacene en variables las coordenadas del ratón para determinar el punto de origen de la línea.3

Programar  que cuando se suelte el ratón  se dibuje la línea teniendo en cuenta los valores de inicio que han sido almacenados en las variables.

 

Os dejo un ejemplo de actividad aquí: