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.

 

[Emilia Alcaraz Delgado]

Hola a tod@s,

 

He hecho mi primera figura, pero no se me ocurre cómo dejarla estática. Una sugerencia ??

 

Muchas gracias, Emilia

 

[Nani]

Pues ya has avanzado más que yo, que no sé cómo hacer para que se mueva un poco más, jejeje.

[roger]

Emilia no se qué te ha podido pasar.

Dejo aquí el código para dibujar un cuadrado:

createEmptyMovieClip("linea1",10);

linea1._x = 100;

linea1._y = 100;

linea1.lineStyle(7, 0x000000, 100);

linea1.moveTo(0,0);

linea1.lineTo(0, 100);

linea1.lineTo(100, 100)

linea1.lineTo(100, 0);

linea1.lineTo(0, 0);

 

Estaría bien practicar para crear diferentes figuras. Seria una forma de comprender también el eje de corrdenadas del escenario.

 

[Nani]

Creo que yo lo compliqué aún más. Yo creé 4 líneas y 4 niveles de profudidad, aunque las coordenadas iban en esa tónica. Luego  aproveché un código de temporizador y me hizo eso.

[Emilia Alcaraz Delgado]

Hola,

 

Yo copie todo el código cuatro veces, pero cambiando las coordenadas. También me compliqué la vida.

 

Hasta pronto, Emilia

[Alfredo Rodrigálvarez]

Si creo un clip que se llame cuadrado ¿Le puedo aplicar funciones de clip, como?:

onClipEvent(enterFrame) {
_root.cuadrado._rotation=_root.cuadrado._rotation+45;
}

Si quiero rotarlo, por ejemplo.

Adjunto mi trabajillo.

 

 

[Emilia Alcaraz Delgado]

Hola Alfredo,

 

Un trabajo de experto !!! Felicidades.

 

Hasta pronto, Emilia

[Nani]

Yo sigo probando, cada vez me voy enterando mejor de las coordenadas. Lo del temporizador, sigo sin entenderlo.

[Emilia Alcaraz Delgado]

Hola Nani,

 

En este ejercicio te has lucido !!! Para que luego digas....

 

Una abrazo, Emilia

[Nani]

Gracias, jeje, podría mandar el .fla, pero está en cs5, si quieres, pego el código. De todas maneras no sé muy bien para lo que sirve el temporizador, ni por qué hace lo que hace.

[Alfredo Rodrigálvarez]

Muy bien Nani, está muy currado.

Un saludo.

Alfredo

[roger]

CONTINUACIÓN DEL TUTORIAL 26

 

3.- CREACIÓN DE FUNCIONES PARA DIBUJAR FIGURAS

En este ejercicio vamos a crear nuetras propias funciones con el objetivo  de crear dinámicamente diferentes figuras geometricas de forma fácil. Es como si crearamos nuestras propias acciones para extender la potencia del lenguaje de programación.

 

Para ello vamos a crear una función con parámetros que utilizará la nueva acción que hemos aprendido createEmptyMovieClip() y la utilizaremos para generar dinámicamente figuras. 

 

Vamos  a crear una función que se capaz de crear cuadrados. Dentro del paréntesis pondremos las caracterísiticas que deseemos. Por ejemplo: cuadrado(3,300,1,10,120,100,"0x9900FF"). Esto dibujará un cuadrado llamado 3 de lado 300 con un grosor de 1 pixel, una rotación de 10 grados en las coordenadas (120,100) y con color fusia.

 

 

Como se puede observar en la captura de la  imagen anterior la función tiene unos parámetros dentro de los paréntesis. Estos parámetros son variables y su contenido será válido allí donde estén ubicadas.

En la línea 1 definimos la función. La variable n la utilizamos para dos cosas: para completar el nombre del cuadrado (cuadrado1, cuadrado2...) y para darle a cada figura un nivel de profundidad diferente. Esto lo podemos obervar en la línea 3 en el valor que tiene la últma n. 

La forma de la figura se crea entre las líneas 5 y 13 donde se ponen las variables de los parámetros de la función.

Y para finalizar en las lineas 17,18 y 19 ya creamos los cuadrados con las carácterísticas que queremos.

 

Acabamos de crear nuestra  nueva función del lenguaje actionscript llamda cuadrado.

 

Actividad para crear:

 

1.- Crear una función de este tipo para crear otro tipo de figura: triángulo, rombo, estrella...

2.- Compartirla aquí pegando el código para que nuestros compañeros la puedan utilizar.

 

Cómo no se neceistia ningún dibujo ni imagen sólo habrá que pegar y enganchar el código en flash y funcionará. La idea es ponder tener una serie de funciones que entre todos podemo crear colaborativamente.

 

Resultado del ejercició de este tutorial: