Tutoriales en la Web

Galeria de fotos en Swishmax

Posteado el 23. Apr, 2010 por Webi in Swishmax

Aquí dejamos este tutorial a petición de Paatril.

Con relación a como hacer un llamado de un archivo swf en swish puedes ver este tutorial

Y aquí dejamos la respuesta a tu siguiente duda para hacer algo como esto:

PASO 1
Creamos un documento nuevo de Swishmax

Galeria de fotos en Swishmax

PASO 2
Vamos a la ventana Properties y luego a la botón Movie properties y colocamos los valores que se ven en la imagen.

Galeria de fotos en Swishmax

PASO 3
Con la herramienta Rectangle Tool vamos a crear un cuadro con un gradiente lineal, el cual cubrirá todo nuestro documento.

Galeria de fotos en Swishmax

PASO 4
En nuestra carpeta raíz vamos a ordenar nuestras imágenes en carpetas, tenemos que crea dos imágenes una miniatura y la imagen grande.

Galeria de fotos en Swishmax

PASO 5
Regresamos a nuestro documento de Swishmax y vamos al menú Insert – Movie Clip y lo movemos a la esquina superior izquierda de nuestro documento.

Galeria de fotos en Swishmax

PASO 6
Luego vamos a la ventana Properties y le colocamos el nombre de fotos a nuestro movie clip.

Galeria de fotos en Swishmax

PASO 7
Ahora insertamos 4 movie clips más en la parte inferior en fila para las miniaturas y les colocamos el nombre de miniatura1, miniatura2, miniatura3 y miniatura4

Galeria de fotos en Swishmax

PASO 8
Vamos a nuestra Scene_1 y a la ventana Script y agregamos el siguiente código:

Code block

onFrame (1) {
fotos.loadMovie("imagenes-grandes/foto1.jpg");
miniatura1.loadMovie("miniaturas/miniatura1.jpg");
miniatura2.loadMovie("miniaturas/miniatura2.jpg");
miniatura3.loadMovie("miniaturas/miniatura3.jpg");
miniatura4.loadMovie("miniaturas/miniatura4.jpg");
}

Si nos fijamos en la línea 2 dice fotos (nombre del movie clip que creamos anteriormente) entre los paréntesis esta la ruta de la imagen grande (“imagenes-grandes/foto1.jpg”) aquí es muy importante colocar los nombres exactos de las carpetas e imágenes, en las líneas siguientes llamamos externamente a las miniaturas en sus respectivos movie clips.

Galeria de fotos en Swishmax

PASO 9
Con la herramienta Rectangle tool vamos a dibujar un cuadro de color negro con una opacidad de 50%, con un tamaño igual al de las miniaturas de nuestras imágenes.

Galeria de fotos en Swishmax

PASO 10
Vamos a la ventana Outline y damos click derecho sobre el cuadro y vamos a Convert – Convert to Buttom

Galeria de fotos en Swishmax

PASO 11
Ahora en la ventana Properties nombramos al botón foto1 y marcamos la opción Has separate over state.

Galeria de fotos en Swishmax

PASO 12
Desplegamos nuestro botón y en el grupo Over State le colocamos a nuestro cuadro una opacidad de 0%.

Galeria de fotos en Swishmax

PASO 13
Duplicamos el botón 3 veces más y colocamos 1 por cada miniatura que vamos a cargar.

Galeria de fotos en Swishmax

PASO 14
Ahora seleccionamos el botón 1 y vamos a la ventana Script y colocamos el siguiente código.

Code block

on (press) {
fotos.loadMovie("imagenes-grandes/foto1.jpg");
}

Si nos damos cuenta en la línea 2 dice fotos (nombre del movie clip que llama a las fotos grandes), entre paréntesis esta la ruta de la imagen grande.

Galeria de fotos en Swishmax

PASO 15
En el botón 2 colocamos el siguiente código.

Code block

on (press) {
fotos.loadMovie("imagenes-grandes/foto2.jpg");
}

En le botón 3 este codigo

Code block

on (press) {
fotos.loadMovie("imagenes-grandes/foto3.jpg");
}

En el botón 4 este codigo

Code block

on (press) {
fotos.loadMovie("imagenes-grandes/foto4.jpg");
}

Si se dan cuenta son exactamente iguales lo que varia es el nombre de la foto que va a llamar, asegúrense que la foto que están llamando coincida con la miniatura.

Galeria de fotos en Swishmax

PASO 16
Con la herramienta Text Tool escribimos la palabra cargando en medio de nuestro documento.

Galeria de fotos en Swishmax

PASO 17
Ahora vamos a la ventana Outline y movemos nuestro texto por debajo de todos nuestros elementos excepto el del fondo, esto nos dará la impresión que tenemos un cargador incluido para cuando haga el llamado de las fotos.

Galeria de fotos en Swishmax

PASO 18
Listo ya tenemos nuestra galería terminada.

Descarga el editable de Galeria de fotos en Swishmax

Articulos relacionados:

Tags: Swishmax