Galeria XML con Flash

En el blog de notas deben escribir las siguientes etiquetas, teniendo en cuenta que la ruta y el nombre debe coincidir con la de las imágenes propias > a continuación deben guardar el archivo con el nombre imagenes.xml

Este código debe ir en el primer fotograma de la película flash.

// -- posición donde se cargará la primera imagen

x = 3;y = 3;

// -- ancho y alto de la imagen más 5 pixeles de espacio

ancho = 105;

alto = 80;

// -- numero de columnas

num_columnas = 3;

// -- creo un nuevo objeto XML

miXML = new XML();

// -- ignorar espacios

miXML.ignoreWhite = true;
// -- proceso si la carga tuvo éxito

miXML.onLoad = function(succes) {

if (succes) {

// -- por cada nodo hijo del nodo principal...

for (var i = 0; i

// -- delaro una variable que recoje el atributo // -- del nodo (nombre de la imagen)
galeria = this.firstChild.childNodes[i].attributes.id; // -- creo un clip de película vacio _root.createEmptyMovieClip("diapo"+i, i+100); // -- cargo la imáen el clip vacio
item = _root["diapo"+i]; item.loadMovie(galeria); // -- indico posición x - y item._x = x; item._y = y; // -- incremento el valor de x para la siguiente imágen
x += ancho; // -- incremento en 1 el número de columnas columna += 1; // -- ruptura de control, control de número de columnas if (columna == num_columnas) { columna = 0; x -= (ancho*num_columnas); y += alto; } } }};// -- cargar XML//miXML.load("imagenes.xml");miXML.load("imagenes.xml");

Pintar un Dibujo en Flash

Inicialmente les pedi que convirtieran los rellenos en clips de pelicula, pero es mas sencillo el código si los usan como botones.

Este es el ejemplo:



En el escenario debemos dibujar lo siguiente en capas separadas.

a. la imagen de muestra
b. La imagen vectorizada con relleno blanco
c. La paleta de colores a utilizar
d. Un bote de pintura

A continuación:

1. Debemos seleccionar cada relleno blanco de la imagen a pintar y convertirlo en boton con nombre de instancia (ejm: cabello)

2. Crear un boton transparente y arrastrarlo sobre cada opción de la paleta de colores.

3. convertir el bote en clip de pelicula con instancia bote y en su interior, convertir el relleno de la pintura regandose en clip de pelicula con instancia pintura.(esto es si desea que el bote asuma el color seleccionado.

4. En el primer fotograma de la escena colocamos el siguiente código

this.onLoad=function(){
//ocultamos el cursor
Mouse.hide();
//color es una variable que me indica el color inicial
color=0xFF0000;
//mc almacena el clip de pelicula al que se le cambiara el color
mc=bote.pintar;
}
//funcion continua
this.onEnterFrame=function(){

//creamos un objeto color que afecte al movie clip almacenado en "mc"
miColor = new Color(mc);
//cambiamos el color con el método SET RGB al almacenado en la variable color
miColor.setRGB(color);
//el bote se ubica en la posición del mouse
bote._x=_xmouse;
bote._y=_ymouse;
}

5. Colocar el siguiente código a cada botón de la paleta, asignando a la variable color el RGB correspondiente.(ejm: 0xff0000 = rojo, 0xffffff = blanco)

on(release){
mc=bote.pintar;
color=0xffffff;
}
6. Colocar el siguiente código a cada botón de relleno del dibujo, enviandole a la variable mc el propio nombre de instancia.

on(release){
_root.mc=cabello;
}

Deben realizar esto con las imagenes elaboradas por ustedes, reviso los ejercicios en la próxima clase.

Dibujando con ActionScript

/***********************************************
Ejecricio 01 Dibujando con ActionScript
Usamos los métodos moveTo() y lineTo
************************************************/

_root.createEmptyMovieClip("triangulo_mc",1);
with (_root.triangulo_mc){
lineStyle (5,0x0000ff,100);
moveTo (200,200);
lineTo(300,300 );
lineTo (100,300);
lineTo (200,200);
}

/******************************************************
Dibujando con ActionScript
Ejercicio 02. Manipulando el dibujo creado
****************************************************/

_root.createEmptyMovieClip("triangulo_mc",1);
with (_root.triangulo_mc){
lineStyle (5,0x0000ff,100);
moveTo (200,200);
lineTo(300,300 );
lineTo (100,300);
lineTo (200,200);

}

/******************************************************
Duplicamos el triangulo 40 veces y variamos sus coordenadas
****************************************************/

for(i=0; i<40; mi_mc =" _root[" _x =" i" _alpha =" 80;" style="color: rgb(204, 0, 0); font-weight: bold;">
Dibujando con ActionScript
Ejercicio 03. Relleno
****************************************************/

_root.createEmptyMovieClip("triangulo_mc",1);
with (_root.triangulo_mc){
lineStyle (5,0x0000ff,100);
beginFill(0x0000FF,50);
moveTo (200,200);
lineTo(300,300 );
lineTo(100,300);
lineTo (200,200);
endFill();

}

/******************************************************
Dibujando con ActionScript
Ejercicio 04 Relleno de una figura cerrada
****************************************************/

_root.createEmptyMovieClip("triangulo_mc",1);
with (_root.triangulo_mc){
lineStyle (5,0x0000ff,100);
beginFill(0x0000FF,50);
moveTo (200,200);
lineTo(300,300 );
lineTo(100,300);
lineTo (200,200);
endFill();

}

/******************************************************
Dibujando con ActionScript
Ejercicio 05. Relleno con degradado
Método: beginGradientFill()
****************************************************/

_root.createEmptyMovieClip("triangulo",1 );
with (_root.triangulo ){
colores =[ 0x00FF00,0x0000FF ];
alfas =[ 100,100 ];
ratios =[ 0,255];
matriz ={a:200,b:0,c:0,d:0,e:200,f:0,g:200,h:200,i:1 };
beginGradientFill("linear",colores,alfas,ratios,matriz );
moveTo (200,200);
lineTo(300,300 );
lineTo(100,300);
lineTo (200,200);
endFill();

}

/**************************************************
Ejemplo 06 Dibujando con ActionScript
Degradado de colores
Método: beginGradientFill()
***************************************************/

_root.createEmptyMovieClip("cuadro",1 );
with (_root.cuadro){
colores = [0x00FF00,0x0000FF];
alfas = [100,100];
ratios = [0,255];
matriz ={matrixType:"box", x:0, y:0, w:0, h:0, r:0};
beginGradientFill("linear",colores,alfas,ratios,matriz );
lineStyle(2,0x009900,100);
moveTo(000,000);
lineTo(600,000);
lineTo(600,400);
lineTo(000,400);
lineTo(000,000);
endFill();

}

/**************************************************
Ejemplo 7 Dibujando con ActionScript
Una cueva sencilla
Método: curveTo()
***************************************************/

_root.createEmptyMovieClip("curva",1 );
with (_root.curva){
lineStyle(0,0x000000,100 );
moveTo(300,300 );
curveTo(400,300,400,200 );

}

//Punto en 300, 300, punto de origen
//Punto color azul
_root.lineStyle(5,0x0000FF);
_root.moveTo(300,300);
_root.lineTo(300.15,300.15);

//Punto en 400, 300 punto de control,
//primeros dos parámetros
//punto color rojo

_root.lineStyle(5,0xFF0000);
_root.moveTo(400,300);
_root.lineTo(400.15,300.15);

//Punto en 400, 200, puntos finales o de anclaje
//Punto color verde

_root.lineStyle(5,0x00FF00);
_root.moveTo(400,200);
_root.lineTo(400.15,200.15);

/*****************************************************
Ejemplo 8 de dibujo
Ocho líneas curvas para hacer un círculo
*******************************************************/

_root.lineStyle(2,"0x000000",100);
var x = 200;
// definir x en el punto central del círculo
var y = 200;
// definir y en el punto central del círculo
var radius = 50;
// el radio es la mitad del ancho, así que 100/2 = 50.
var theta = (45/180)*Math.PI;
// cada segmento es de 45 grados, por lo tanto convertir a radianes.
var ctrlRadius = radius/Math.cos(theta/2);
// esto obtiene el radio del punto de control _root.lineStyle(1);
// definir lineStyle
_root.moveTo(x+radius, y);
//se inicia el círculo en el extremo derecho.
var angle = 0; // comenzar el dibujo en el ángulo 0;
// este bucle dibuja el círculo en 8 segmentos
for (var i = 0; i<8; i++) { // incrementar los ángulos angle += theta; angleMid = angle-(theta/2); // calcular el punto de control cx = x+Math.cos(angleMid)*(ctrlRadius); cy = y+Math.sin(angleMid)*(ctrlRadius); // calcular el punto final px = x+Math.cos(angle)*radius; py = y+Math.sin(angle)*radius; // dibujar el segmento de círculo _root.curveTo(cx, cy, px, py); }

/**************************************************
Ejemplo 9 Dibujando con ActionScript
Un cículo con degradado de color
Método: beginGradientFill() y curveTo()
***************************************************/

_root.createEmptyMovieClip("circulo",1 );
with (_root.circulo){
colores =[ 0x00FF00,0x0000FF ];
alfas =[ 100,100 ];
ratios =[ 0,255];
matriz ={matrixType:"box", x:50, y:50, w:600, h:400, r:(135/180)*3.1416};
beginGradientFill("linear",colores,alfas,ratios,matriz );
lineStyle(0,0x000000,100 );
moveTo(500,500 );
curveTo(600,500,600,400 );
curveTo(600,300,500,300 );
curveTo(400,300,400,400 );
curveTo(400,500,500,500 );

endFill();

}