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

19 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. Blog Capsula-Project - » Tutorial Flash: Galería de imágenes en Flash en Abril 21, 2008 7:56 pm

    […] el blog.educamas.es he encontrado esta tutorial para crear una galeria de imagenes con […]

  3. 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

  4. Alejandro en Septiembre 6, 2008 9:10 pm

    Hola intente hacer la galeria de fotos y no me salió, Arroja una serie de errores avanza pero no retrocede me podés enviar el script te loa agradezco d antemano
    gracias

  5. QKRacha en Noviembre 16, 2008 8:34 pm

    A mi me valio.

    Que bueno lo de ver las imagenes asi, la de posibilidades que me da esto jejejejje.

    decid que si a alguien no se le ve nada puede ser por no poner el moviclip el nombre de instancia.

    Un saludo

  6. Juan Fernando en Noviembre 27, 2008 3:24 am

    Pues este codogo esta mal: En el punto 7 hay un error, y además el código no es “onpress” sino “onRelease”. Yo busque en otro web y me apareció este codigo que si anda un poco, solo que no parece tener un límite de imagenes……..

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

    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”

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

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

    atras_btn.onRelease=function(){
    nimagen–
    numero_txt.text=nimagen
    cargar_mc.loadMovie(fotos[nimagen])
    }

    adelante_btn.onRelease=function(){
    nimagen++
    numero_txt.text=nimagen
    cargar_mc.loadMovie(fotos[nimagen])
    }

  7. Kepler en Diciembre 1, 2008 5:38 am

    holas no se si me puedas enviar el fla de este tutorial no me funciono los pasos q indicaste me envia errores de compilacion, mi, gracias, bye

  8. MATIAS en Diciembre 1, 2008 7:14 pm

    no me anda :S

  9. horate en Enero 22, 2009 5:06 pm

    seria interesante si pudieras dejar un lugar donde descargar el archivo y ademas poder verlo aplicado

  10. Maider en Febrero 20, 2009 5:56 pm

    Hola me gustaría poner esta galería dentro de mi web mostrando cada vez un trabajo distinto.
    Como hay que poner todo el código en el primer fotograma. No se como haría para llamar a las distintas galerías.Cada apartado del portafolio seriá una galeria.¿Se puede hacer?
    Gracias de antemano

  11. dina en Abril 9, 2009 3:52 am

    me marca este error y es la ruta para cargar la foto
    Error al abrir la URL ‘file:///galeria/fotos/foto_1.jpg’

    me podrías ayudar

    gracias

  12. jolu en Mayo 26, 2009 6:32 pm

    Saludos.

    Estoy diseñando una galería de swfs con carga dinámica. El acceso a los swfs es doble:
    mediante miniaturas, por un lado, y mediante botones anterior y siguente, por otra.
    El problema es que funcionan… pero por separado, no interactivamente.
    Otro de los problemas es que al pulsar las flechas de anterior/siguiente, y al cambiar de una a otra, no obedece del todo (p.e pulso siguiente, ok, luego pulso anterior, y primero me muestra la siguiente, vuelvo a pulsar y ya si me muestra la anterior…)
    En cuanto al código que he usado:

    //boton anterior//

    on(release)
    {contenedor.loadMovie(”./pintura/imagenes_2009/2009_” + contador + “.swf”);
    btn_anterior.onRelease = function ()
    {contador = contador -1;
    if(contador 20)
    contador = 1;
    }
    }

    //Fotograma clave vacío nº2/ capa acciones//

    contenedor.loadMovie(”./pintura/imagenes_2009/2009_1.swf”);

    var contador = 1;
    var total = 20;

  13. yozhua en Junio 2, 2009 2:40 am

    mira tu codigo es bueno pero tiene errores
    pero esta bueno ehh!!!!! y me ayudo bastante
    gracias por todo

  14. Criscert en Agosto 30, 2009 12:48 am

    Gracias por el curso de la galería de fotos me sirvio de mucho pero una duda despues de crear mi galeria de fotos cuando se llegue a la última foto como puedo hacer para que regrese a la primera foto nuevamente proque me sale un error

  15. J£ü§ en Octubre 4, 2009 7:21 am

    En el boton de adelantar colocas:

    if (nimagen>fotos.length-1){
    nimagen=1;
    }

    y en el de atrasar colocas:

    if (nimagen

  16. Federico en Octubre 20, 2009 10:02 pm

    Hola esta muy bueno la galeria, pero no me sale, no se como poner los botones, todo va en el mismo fotograma?.. alguien tiene el codigo ya echo que me lo mande?.. porfa saludos a todos

  17. johanna en Octubre 29, 2009 7:08 pm

    Gracias por el tuto estaba bueno!!

    el problema es que no me avanza , pero si me da atras imagenes…

    AYUDA PORFA

  18. sanmy en Noviembre 10, 2009 10:43 pm

    Hola a todos necesito algun link o pagina de algun tuto para realizar galerias de fotos dinamiks que se vean tridimensionales en flash ayudenme— Porfis

  19. Daniel en Diciembre 3, 2009 3:35 am

    Aca tienen un video que les puede ser muy util. Yo estoy creando galerias con este tutorial.

    http://www.youtube.com/watch?v=vO580XIidFY&feature=player_embedded

Nombre: (obligatorio)

Email: (obligatorio)

Web:

Comentario: