Cómo crear una galería en Flash usando fotogramas

¿Has querido hacer una galería pero no te ha salido correctamente porque posee demasiado código ActionScript? Pues no te preocupes, aquí estamos para ayudarte, con esta galería, los problemas con tanto código serán solucionados, pero una cosa si dejo clara, no va a ser como una galería que se mantenga en un solo fotograma.

Esta galería va a usar fotogramas como plantilla para las fotos. Voy a hacer los mas simple, ameno y fácil posible este tip.

Aunque no os preocupéis si creéis que queda fea, al finalizar, veremos como aumentar su diseño con un tip de un compañero de Cristalab (susurro:Zguillez y veréis que quedará bonita, y sencilla. ¿Qué os parece si empezamos ya?

¿Cuántos fotogramas?

Pues muy simple, debes de poner tantos fotogramas como imágenes vaya a contener tu galería. Yo en este tip voy a hacerla con 5 imágenes, pero da igual que sigáis el tip ustedes haciendo 6 o 10 o 20, a partir de la 5 ya veréis que tenéis todo lo que necesitáis para continuar sin problemas.

Venga, pues manos a la obra, seleccionamos 5 fotogramas y los convertimos en fotogramas claves.



Antes de pasar al siguiente paso, recordad, debéis de poner en todos los fotogramas lo siguiente:

Código :

stop () ;

Recordad, pulsad F9 y escribid, ya está.

Los botones

Como toda galería (bueno, no todas, ya que hay circulares y demás tipos que no tienen botones) necesitaremos unos botones con los que pasar a la siguiente imagen o si nos apetece, ir a la anterior.

Para ello vamos a crear unos sencillos botones (solo crearlos una vez, preferiblemente en el primer fotograma) que vamos a colocar en todos los fotogramas con los que vamos a trabajar, pero hay excepciones, en el primer fotograma no debemos poner el botón de anterior imagen ya que no hay anteriores imágenes, y en el último fotograma no debemos de poner el botón de siguiente, ya que no hay mas imágenes.



Ahora, esos botones que hemos creado los botones solamente una vez (como ya dije anteriormente), vamos a convertirlos en símbolos de tipo botón y vamos a llamar al de anterior imagen, pues simplemente anterior, y el de siguiente imagen, pues siguiente imagen.

Ahora dejamos esos iconos ahí, y todavía no los repartimos por los demás fotogramas, recordad esto, todavía no los repartáis.

gotoAndStop en los botones

Bueno, ya tenemos los botones, ahora vamos a darle su poder. En el de siguiente debemos de colocar esto:

Código :

on (release) {
gotoAndStop (2) ;
}

Y en el de anterior colocaríamos lo mismo pero le cambiamos el número. Veamos, imaginemos que estamos en el fotograma 4, en el código del botón de siguiente tendría que haber esto:

Código :

on (release) {
gotoAndStop (5) ;
}

Y en el de anterior esto:

Código :

on (release) {
gotoAndStop (3) ;
}

Por lo que con esto se debería de comprender que el número ese que está dentro del paréntesis, es el fotograma al que nos va a desplazar nuestro botón, estad atentos a esto no vayáis a equivocaros, que os confunde todo.

Una vez que tengamos los botones esos con el código, vamos a copiarlos y a distribuirlos por todos los fotogramas (recordad lo anteriormente dicho sobre el primer y el último fotograma). Una vez distribuidos, le cambiamos el número del paréntesis por el fotograma correcto al que debe de cambiar (recordad el ejemplo anterior.

Incluyendo imágenes

Ahora solo falta colocar las imágenes, en esto vamos a intentar hacerlo un poco mas bonito (aunque es opcional, por lo que si no lo quieres hacer, sáltate este párrafo y continua en el segundo), creemos un rectángulo sin color de relleno, y con un trazo de 3.00. Le ponemos las medidas que queramos y lo convertimos en un Símbolo de tipo Gráfico al que llamaremos cuadro. Ese cuadro lo colocamos en todos los fotogramas y ya está, tenemos un marco para las imágenes.

Ahora, vamos a Archivo >> Importar >> Importar a Biblioteca y seleccionamos las imágenes. Todas esas imágenes se encuentran ahora en nuestra biblioteca. Cuando queramos incluir una imagen en un fotograma, simplemente arrastramos la imagen que queremos de la biblioteca a la escena y ya está.

Dándole efectos de transición a los fotogramas

Bueno, esto es el fin de esta parte básica del tutorial, pero como os comentaba al principio, os iba a dejar un tip de Zguillez para que podáis hacer que cuando se cambie de fotograma con los botones, pues hagan algún que otro efecto. Mirad, el tip es este: Como crear transiciones entre fotogramas en Flash. Seguro que si se lo implementáis quedará bastante bien. Pero este no es el tip, ya que el objetivo de esto es una galería sencilla, y con eso ya se haría mas complicada.

Ejemplo - Resultado

Como podéis apreciar, está un poco rara y fea, pero eso depende de ustedes. Ojala les salgan mejor que a mi. Super sencilla, ¿verdad? Imposible hacerla mas sencilla. Espero que haberos ayudado y que os sea útil.

Saludos, Distriker

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.