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,

 

Me ha surgido un problema, al canviar el color. La escritura sale por encima del pincel. Alguna sugerencia ????

 

Gracias, Emilia

[roger]

Emilia crea un duplicado del pincel con un nivel por ecima de los trazos. Por ejmplo 10000.

[Emilia Alcaraz Delgado]

Hola Roger,

 

Bien, bien no he entendido lo que hay que hacer con la creación del nivel (podrías explicarlo ???), pero buscando por Internet he encontrado la solución, añadoendo el código:

this.swapDepths(_root.getNextHighestDepth());

 

Muchas gracias, Emilia

 

[Nani]

Con ayuda de un  tutorial y parte de mi imaginación, he creado esto.

[Emilia Alcaraz Delgado]

Hola Nani,

 

Felicidades ! A mi me está costando  mucho trobar la manera que no se borre la linea, cuando se presiona el botón de otro color.

A ver si me podéis ayudar ???

Muchas gracias, Emilia

 

 

[Nani]

Emilia, es que creo que hay varias maneras de hacerlo.

El primer ejercicio que mandé es diferente al segundo, por lo tanto, si tú lo has hecho de tu cabeza, es normal que no sepas. Yo no sé cómo se hace, sólo tuneo el ejercicio.

Pero me parece que el segundo modo es mejor que el primero. Si mandas el fla., te lo miro si se parece al mío.

[Emilia Alcaraz Delgado]

Hola Nani,

 

Aquí tienes el fla.

 

Muchas gracias, Emilia

[Nani]

Emilia, tu código y el mío son iguales en mi primer ejemplo.

El segundo código está hecho todo en el fotograma 1 de la escena principal. No sé si ahí estará el quid.

Te pego el segundo código. Mira si es por eso.

lineThickness = 0;
selectedColor = "0x000000";
_root.onMouseDown = startDrawing;
_root.onMouseUp = stopDrawing;
function startDrawing() {
if (_xmouse<455) {
_root.lineStyle(lineThickness, selectedColor);
_root.moveTo(_root._xmouse, _root._ymouse);
_root.onMouseMove = drawLine;
}
}
function drawLine() {
_root.lineTo(this._xmouse, this._ymouse);
}
function stopDrawing() {
delete this.onMouseMove;
}
line0.onPress = function() {
lineThickness = 0;
};
line3.onPress = function() {
lineThickness = 3;
};
line6.onPress = function() {
lineThickness = 6;
};
colorRed.onPress = function() {
selectedColor = "0xFF0000";
};
colorGreen.onPress = function() {
selectedColor = "0x00FF00";
};

[Emilia Alcaraz Delgado]

Hola Nani,

 

Gracias, Ahora lo pruebo.

[Nani]

Siento no poder pasarte el .fla, pero como sabes, tengo el CS5.

[roger]

 

Muy bien. Parece que ya lo vais dominando.

Os propongo hacer variaciones creativas del trazo. Un ejemplo:

Adjunto el flash

 

[Emilia Alcaraz Delgado]

Hola a tod@s,

 

Hoy por hoy me siento incapaz de realizar esta maravilla.

 

A ver si os animáis !

 

Hasta pronto, Emilia