Página inicial  

trans_770 trans_160

Unidad 24. Animaciones avanzadas (VIII)


API de dibujo. Creando dibujos con ActionScript

 

En este apartado aprenderemos a manejar el API de dibujo de Flash.

Su uso es muy claro y sencillo, bastará con que comprendas unas cuantas instrucciones.

Antes de empezar a dibujar deberás tener un clip donde hacerlo, para ello nos crearemos un clip vacío utilizando la función createEmptyMovieClip():

this.createEmptyMovieClip("miClip", this.getNextHighestDepth());

Como puedes ver, le pasamos dos parámetros, el primero será el nombre de instancia al cual nos referiremos para modificar las propiedades del clip.

El segundo parámetro indica el nivel de profundidad del clip. Hemos utilizado la función getNextHighestDepth() para averiguar cuál es el nivel superior en este clip y así posicionar nuestro dibujo en la parte superior (así no lo tapará ningún otro objeto).



Una vez creado el clip podemos pasar a dibujar sobre él.

Hacerlo es muy fácil, sólo deberás inicializar el proceso de dibujo escribiendo:

miClip.beginFill(color, alfa);

Donde color indicará el color de relleno que se le aplicará al dibujo. Deberá estar en hexadecimal, por ejemplo: 0x000000.

El parámetro alfa indicará la transparencia del relleno.



Luego nos valdremos de un par de funciones:

miClip.moveTo(x, y);

Esto hace que el punto de dibujo se coloque en las coordenadas especificadas. Podemos empezar a pintar a partir de la coordenada (100, 100), por ejemplo.

Luego nos quedará solamente dibujar líneas en el espacio que contendrán el relleno de nuestro dibujo. Utiliza la instrucción lineTo():

miClip.lineTo(x, y);

Esto hará que el punto de dibujo se desplace hasta la posición (x, y), desde donde se creará el siguiente trazo de dibujo.

miClip.beginFill(0xFF0000);

	miClip.moveTo(10, 10);

	miClip.lineTo(10, 100);

	miClip.lineTo(100, 100);

	miClip.lineTo(100, 10);

	miClip.lineTo(10, 10);

miClip.endFill();

Terminamos la instrucción con endFill().

Este ejemplo dibujaría un cuadrado en la posición (10, 10). Sencillo, ¿verdad?



Podemos establecer el tipo de línea que rodeará al dibujo escribiendo lo siguiente:

miClip.lineStyle(grosor, color, alfa, trazos, escala, extremos, uniones, limiteEsquinas);

Nota: Esta instrucción deberá estar colocada antes de utilizar la función beginFill(), quedaría de esta forma:

miClip.lineStyle(1, 0x000000, 100);

miClip.beginFill(0xFF0000);

	miClip.moveTo(10, 10);

	miClip.lineTo(10, 100);

	miClip.lineTo(100, 100);

	miClip.lineTo(100, 10);

	miClip.lineTo(10, 10);

miClip.endFill();

Ahora explicaremos en detalle los parámetros de esta instrucción:

  • grosor: un número de 0 a 255 que indicará el grosor del borde.


  • color: en hexadecimal, el color del borde.


  • alfa: nivel de transparencia del borde, de 0 a 100.


  • trazos: valor booleano, hará que los anclajes de las líneas y curvas se realicen de forma exacta. De este modo los trazos se dibujarán a píxeles exactos en cualquier grosor (así no se verán líneas imprecisas).


  • escala: especifica cómo se tendrá que efectuar la escala del borde. Sus valores pueden ser "normal", que toma el modelo predeterminado; "none", que obliga a no cambiar nunca la escala del borde; "vertical", que no cambiará la escala si el objeto sólo cambia su escala vertical; y "horizontal", que no cambiará la escala si el objeto sólo cambia su escala horizontal.


  • extremos: define cómo se dibujarán los extremos de los bordes,

    Bordes


  • uniones: establece el tipo de uniones que se establecerán en el borde,

    Uniones


  • limiteEsquinas: un número entre 1 y 255, indica la distancia de la esquina al trazo real,

    Esquinas


  Ejercicios del Tema 24

  Prueba evaluativa del Tema 24.



 


     


© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.