Tutorial Adobe Flash 8.

(Galera) Botones Importadores de Imgenes Externas Jpg,

gif, png, etc. Como ya lo puedes saber no es recomendable colocar imgenes que
posean demasiado peso cuando se quiere hacer una galera en un solo archivo fla. Lo
que se recomienda hacer en este caso, primero hacer imgenes pequeas y luego
insertarlas en botones para despus agregar un pequeo Cdigo Action Script. Agrandes
rasgos el tutorial trata de cmo hacer una galera con imgenes externas (las imgenes
de la galera tienen que estar en la misma carpeta que el archivo swf), la galera en
que yo trabaje fue sobre el Sorprendente Hombre Araa 2. J Goog luck! J
Comenzamos?.
1-. Comenzar por hacer un documento (ctrl. + J) en el cual se va trabajaras.
a)-. Las dimensiones del documento son 300 * 360 pxeles de ancho y alto.
b)-. Colocar como velocidad de fotogramas 40 fps.
Nota el color de fondo a usar no importar (#FFFFFF) ya que al final del tutorial se
incorporara un rectngulo en una capa y esta funcionara como color de fondo.

2-. Esta pelcula consta de varios smbolos (ctrl + F8), sin embargo, dichos smbolo los
estars incorporando uno a uno. Este es el primero de ellos.
a)-. Al primer smbolo nombrarlo imag-1
b)-. Seleccionar la en la opcin Tipo Clip de pelcula.

3-. Ubicado en el smbolo creado Importar (ctrl. + R) una imagen, las dimensiones de
la imagen a importar debern de ser de 50.0 * 50.0 pxeles.
a)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

4-. Crear un smbolo nuevo (ctrl. + F8), nombrarlo imag-2.

a)-. Seleccionar la en la opcin Tipo Clip de pelcula.

5)-. Nuevamente importar (ctrl. + R) una imagen diferente a la primera (recuerda que
es una galera).
a)-. Una vez importada la imagen colocarla en coordenadas X = 0.0 y Y = 0.0.
Nota crear uno a uno tres smbolos ms (ctrl. + F8) y nombrarlos imag-3, imag-4 e
imag-5. En cada uno de los smbolos creados tambin importar (ctrl. + R) una a una las
imgenes que le corresponde a cada uno de los smbolos.

6-. Crear otro smbolo (ctrl. + F8), y nombrarlos animacin de botn.

a)-. Seleccionar la en la opcin Tipo Clip de pelcula.

7-. Despus de haber creado e importado las imgenes, crear una pequea animacin
de Forma la cual nos servir para dar un toque diferente a los botones que se crearan
en pasos siguientes.
a)-. La animacin consta de 11 fotogramas, en el fotograma # 1 y # 11 dibujar un
rectngulo (R) sin borde y color de relleno #FFFFFF y Alfa 0%.
b)-. Cada uno de los rectngulos tiene de dimensiones
c)-. Los rectngulos estn colocados en coordenadas X = 0.0 y Y = 0.0.

8-. Insertar un rectngulo en el fotograma # 6 sin borde y color de relleno #003300.

a)-. Las dimensiones del rectngulo son 50.0 * 50.0 pxeles.
b)-. Al igual que las formas anteriores esta tambin esta colocada en coordenadas X =
0.0 y Y = 0.0.

9-. Para finalizar con esta fcil animacin seleccionar el fotograma # 11 y luego abrir la
barra de Acciones fotograma para insertar un stop();.

10-. Insertar un nuevo smbolo (ctrl. + F8).

a)-. Dar por nombre botn 1.
b)-. Seleccionar la en la opcin Tipo Botn.

11-. En este smbolo realizaras un botn de dos estados pero con la imagen del smbolo
imag-1.
a)-. Arrastrar desde la biblioteca el smbolo imag-1 y colocar lo en el estado de Reposo
en la lnea de tiempo.
b)-. En la barra de Propiedades seleccionar Color Alfa y disminuirlo al 50%.
c)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

12-. Insertar un fotograma clave (F6) en el esta de Sobre, luego seleccionar en la barra
de Propiedades Color Ninguno.
a)-. Automticamente la imagen queda insertada en coordenadas X = 0.0 y Y = 0.0.

13-. Insertar una segunda capa y ocultar la Capa 1.

a)-. Insertar un fotograma clave vaco (F7) en el estado Sobre de esta Capa 2, en el
fotograma insertado colocar desde la biblioteca el smbolo animacin de botn.
b)-. Colocar el smbolo en coordenadas X = 0.0 y Y = 0.0.
Nota crear 5 smbolos (ctrl. + F8) ms con la propiedad de Botn y a cada uno de ello
nombrarlos botn 2, botn 3, botn 4, botn 5. Repetir los pasos 11, 12 y 13 para cada
uno de los botones, claro que cada uno de los botones tiene su smbolo correspondiente.

14-. Regresar a la Escena y arrastrar desde la biblioteca uno a uno los botones y
colocarlos en la parte inferior del documento.
El botn 1 colocarlo en coordenadas X = 5.0 y Y = 305.0.
El botn 2 colocarlo en coordenadas X = 65.0 y Y = 305.0.
El botn 3 colocarlo en coordenadas X = 125.0 y Y = 305.0.
El botn 4 colocarlo en coordenadas X = 185.0 y Y = 305.0.
El botn 5 colocarlo en coordenadas X = 245.0 y Y = 305.0.

15-. Seleccionar la primer imagen despus abrir la barra de Acciones botn, e insertar
el action script siguiente.
on (press) {
unloadMovie("_root.draggable");
loadMovieNum("arana-1.gif", 1);
}

16-. Seleccionar la segunda imagen y nuevamente insertar el script solamente que a

este cdigo se le cambiara el en la parte en donde va el nombre por el nombre de la
segunda imagen a importar desde una carpeta externa.
on (press) {
unloadMovie("_root.draggable");
loadMovieNum("arana-2.gif", 1);
}
Nota hacer lo mismo con cada una de las tres siguientes imgenes solamente sustituir
arana-2.gif por arana-3.gif, arana-4.gif y arana-5.gif

17-. Insertar una segunda capa en la escena y dibujar en esta un rectngulo sin borde y
usar como color de relleno un degradado.
a)-. Las dimensiones del rectngulo son 300.0 * 360.0 de ancho y alto.
b)-. Colocar el objeto dibujado en coordenadas X = 0.0 y Y = 0.0.
Con este paso doy por concluido este tutorial. Ya vez que trabajar con el programa Flash
no es tan complicado como algunos dicen, adems de que posee infinidad de funciones
las cuales son muy tiles para las Web a desarrollar. J Well done!! J

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. Recordar que tienes que
hacer imgenes (de dimensiones 300.0 * 300.0 pxeles) en Photoshop o cualquier otro

programita que domines para recortar imgenes y adems que el programa pueda
guardar como .gif, jpg, png. Las imgenes tienen que estar en la misma carpeta que el
archivo swf. J Hasta pronto J