Sep

12

Tutorial Flash: Galería de imágenes en Flash

publicado en Flash |

Uno de los proyectos más sencillos que podemos realizar es el de una galería de imágenes. Esta galería funcionará de forma independiente como archivo swf de Flash, o podremos incluirla en cualquier proyecto Web.

Lo primero que debemos hacer es almacenar las imágenes que van a ir cargándose en una carpeta (nombre de la carpeta: fotos). Las imágenes deben tener el nombre foto_01, foto_2,… vamos a suponer que son jpg.

A continuación vamos a diseñar el entorno de la galería. Podremos hacerlo de múltiples maneras pero debe llevar los siguientes elementos: un rectángulo para el contador numérico de las imágenes, un área rectangular que hará de proyector, un botón para ir hacia delante, otro para ir hacia atrás y otro para aceptar.

Dibujamos como más nos guste estos cinco objetos a los cuales vamos a proporcionar las propiedades adecuadas. Los convertimos en símbolos.

Seleccionamos el rectángulo que hará de contador (el pequeño) y le asignamos el tipo Introducción de texto y le proporcionamos el nombre numero_txt. Queda preparado para introducir y mostrar texto. Conviene usar los sufijos para identificar correctamente cada tipo de objeto (_mc, _txt y _btn).

A continuación seleccionamos el rectángulo que hará las veces de proyector de las imágenes (el grande), le indicamos el tipo Clip de película y el nombre cargar_mc.

Seleccionamos el objeto que hará de botón “hacia delante”, le asignamos el tipo Botón y el nombre adelante_btn. Hacemos lo mismo con el botón “hacia atrás”, pero su nombre será atras_btn.

Hacemos lo propio con el botón para aceptar.

A continuación, procedemos a programar los objetos. Como siempre, resulta aconsejable introducir el código ActionScript en el primer fotograma de la película:

1.- Necesitamos una variable que almacene los números que vayamos a exribir en el contador de fotografías: Declaramos una variable nimagen del tipo Number, cuyo valor inicial sea 1.

2.- Necesitamos una variable que almacene los nombres de las imágenes y poder así llamarlas desde ahí: declaramos un Array llamado fotos.

var nimagen:Number=1
var fotos:Array= new Array()

3.- Rellenamos el array con los nombres de las imágenes, que se encuentra en la carpeta “fotos”.

fotos[1]=”fotos/foto_01.jpg”
fotos[2]=”fotos/foto_02.jpg”
fotos[3]=”fotos/foto_03.jpg”
fotos[4]=”fotos/foto_04.jpg”
fotos[5]=”fotos/foto_05.jpg”
fotos[6]=”fotos/foto_06.jpg”
fotos[7]=”fotos/foto_07.jpg”
fotos[8]=”fotos/foto_08.jpg”
fotos[9]=”fotos/foto_09.jpg”
fotos[10]=”fotos/foto_10.jpg”

4.- Al comenzar la película swf, en el contador de imágenes debe aparecer siempre la número 1 (nimagen vale por defecto 1) y, en el rectángulo proyector la imagen correspondiente con el número que indique el contador.

numero_txt.text=nimagen
cargar_mc.loadMovie(fotos[nimagen])

5.- Al pulsar el botón “aceptar” se debe mostrar la foto correspondiente en el proyector, y en el contador el número de la misma:

enter_btn.onPress=function(){
 nimagen=Number(numero_txt.text)
 cargar_mc.loadMovie(fotos[nimagen])
}

6.- Programamos el botón “atrás”. Al pulsarlo. el valor de la variable nimagen debe descender, mostrase el número de la nueva foto en el contador y cargar la imagen correspondiente en el proyector:
atras_btn.onPress=function(){

  nimagen–
  numero_txt.text=nimagen
  cargar_mc.loadMovie(fotos[nimagen])
}

7.- Programamos el botón “adelante” exactamente igual sólo que el valor de nimagen deberá aumentar:
atras_btn.onPress=function(){

  nimagen++
  numero_txt.text=nimagen
  cargar_mc.loadMovie(fotos[nimagen])
}

Por claridad en el código conviene siempre separar cada bloque por los correspondientes comentarios.

Para que el código funcione correctamente conviene que el archivo flash se aguarde al mismo nivel que la carpeta “fotos”, ya que el código hace referencia a la ruta relativa correspondiente: foto/foto_0…jpg.

Publicamos la película y podremos observar cómo los botones adelante y atrás permiten navegar por las fotos guardadas en la carpeta, que se mostrarán en el rectángulo proyector. El número de cada fotografía también aparecerá en el contador.

También funcionará si anotamos directamente el número en el contador y presionamos el botón aceptar. El programa mostrará esa imagen.

Productos formativos relacionados con Flash 8:
Curso de Flash 8
Manual de Flash 8
Prácticas y ejercicios Flash 8


Comentarios

2 Comentarios

  1. videos de risa en Abril 8, 2008 12:09 pm

    ¿Se podría hacer esta galería, pero de forma que midiese el ancho x alto de la foto, en caso necesario la redujese y la centrase?

    Gracias por el tuto!!!

  2. cyberdesign en Junio 16, 2008 7:02 pm

    hola, pss io le intente y no me salio :S
    el action script es para mi un imposible

Nombre: (obligatorio)

Email: (obligatorio)

Web:

Comentario: