Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Anunciar en SoloPhotoshop

Galerí­a Imágenes Externas | Solo Photoshop

Tutorial Flash Galería de Imágenes

 

Tutorial por elQuique

ElQuique nos enseña a programar una Galería de imágenes Externas con Flash.

Tutorial por: elQuique de ForoCreativo.net Bueno, un poco para solucionar las dudas expuestas por salus en el post http://www.forocreativo.net/foro/ftopic9231.html&highlight= me he decidido a hacer este mini tutorial básico.

Bien, primero he creado un documento flash con las siguientes propiedades.

Luego de esto selecciono los colores de borde y relleno para realizar un rectángulo con las herramientas como se indica en la imagen.

Y hago el rectángulo que formará parte de mi botón.

con doble click sobre el rectángulo selecciono el borde y relleno del mismo y presiono botón derecho y Convert to Symbol

de manera que ese rectángulo lo transformemos en un botón, con el nombre btnAnterior como indica la imagen

Una vez convertido a símbolo, con doble click sobre el mismo ingreso a ese objeto, en la barra superior se ve como la imagen

y con la herramienta de texto escribo "<< Anterior", y lo centro al medio del rectángulo

presionando en la barra superior sobre "Scene 1" regreso a la escena principal

en este punto le di ubicación a mi botón en la parte inferior izquierda con las propiedades como indica la imagen y también le di un nombre de instancia "anterior_btn" (que usaremos mas adelante)

el botón siguiente es igual al de anterior para ello en la librería del documento (window, library o CTR L) hacemos botón derecho duplicate como indica la imagen

y le damos el nombre "btnSiguiente" como indica la imagen

a este botón le damos ubicación en la parte inferior derecha y el nombre de instancia "siguiente_btn" como indica la imagen

de esta forma tenemos listo los elementos gráficos de este mini tutorial, jeje sabido es mi limitada capacidad gráfica de programador por tanto vayamos rapido a la programación que permitirá mostrar las fotos...

Bien, lo siguiente es organizar un poco el documento, para esto (1) agregaremos un nuevo layer, el anterior es el layer 1 que contiene los elementos gráficos hasta ahora realizados (2), luego en este layer agregaremos las acciones de programación Action Script (3), por ello al layer 1 le pondremos el nombre "Visor", dandole doble click en el nombre actual, y al layer 2 le daremos el nombre "Acciones" también con doble click (4)

ubicandonos ahora en el Frame 1 del layer Acciones (3 img anterior) vamos a realizar la programación del sitio, para esto tenemos que ir a la ventana de acciones con la tecla F9 y escribiremos este código:

 

contador = 1;
_root.createEmptyMovieClip("contenedorfoto", 1);
_root.contenedorfoto._x = 0;
_root.contenedorfoto._y = 0;
_root.contenedorfoto.loadMovie("foto" + contador + ".jpg");
stop();

anterior = function () {
contador = contador - 1;
_root.contenedorfoto.loadMovie("foto" + contador + ".jpg");
};

siguiente = function () {
contador = contador + 1;
_root.contenedorfoto.loadMovie("foto" + contador + ".jpg");
};

anterior_btn.onRelease = anterior;
siguiente_btn.onRelease = siguiente;

 

explicare ahora por parte el código y la idea general

contador = 1; // permitirá la imagen actual que estamos mostrando, para este tutorial las imagenes se llamaran "foto1.jpg", "foto2.jpg", "foto3.jpg", etc

_root.createEmptyMovieClip("contenedorfoto", 1); // crea dinámicamente un movieclip para contener la foto, este MC (movieclip) se llamara "contenedorfoto", este nombre es importante para referenciarlo mas a delante en la programación

_root.contenedorfoto._x = 0; // ubicamos el MC recien creado en la parte superior izquierda por tanto posición 0,0 de nuestro documento (el documento principal en la programación se le llama "_root", esa es la palabra clave con que Action Script se refiere al documento principal

_root.contenedorfoto._y = 0;

_root.contenedorfoto.loadMovie("foto" + contador + ".jpg"); // en este punto vamos a cargar en nuestro MC contenedorfoto una imagen cuyo nombre sera "foto" + contador + ".jpg", si recordamos que contador vale 1 tenemos "foto" + 1 + ".jpg" por tanto se cargara la imagen "foto1.jpg"

stop(); // detiene la ejecución del swf ya que se hizo todo lo que debe hacer cuando inicia

Lo siguiente son las declaraciones de las acciones que deben ejecutarse cuando se presiona el botón anterior o siguiente

anterior = function () { // declaramos la función anterior

contador = contador - 1; // como se debe mostrar la imagen anterior debe restar 1 al contador o sea que si estábamos en foto2.jpg volverá a foto1.jpg

_root.contenedorfoto.loadMovie("foto" + contador + ".jpg"); // igual que como hacíamos anteriormente cargaremos la imagen correspondiente al contador

};

siguiente = function () { // declaramos la función siguiente
contador = contador + 1; // como debemos mostrar la sigueinte imagen aumentamos el contador, por tanto si estamos en foto1.jpg pasara a foto2.jpg

_root.contenedorfoto.loadMovie("foto" + contador + ".jpg"); // cargamos la imagen de la misma forma

};


Luego de definida estas dos funciones de carga de imagen que hasta ahora estan aisladas debemos decirle al flash cuando deben ejecutarse para esto haremos lo siguiente

anterior_btn.onRelease = anterior; // esto indica que el objeto "anterior_btn" cuando se presiona debe ejecutar la funciona llamada "anterior", así es como se diría esa línea en español, como entiende esto flash, bien, "anterior_btn" es el nombre que le dimos a la instancia del botón anterior en los primeros pasos de nuestro dibujo en la figura 9, y "onRelease" es una palabra clave de Action Script que define la acción a realizarse cuando se presiona un objeto, por ultimo "anterior" es la función que llama al presionar

siguiente_btn.onRelease = siguiente; // de la misma forma que declaramos la acción del botón anterior declaramos la del botón siguiente

Listo fin de la aplicación, espero me explicara bien y a las ordenes ante cualquier duda, la aplicación esta funcionando en:

Ver funcionamiento

y el zip con fotos, swf y fla se baja de:

Descargar solución

Comentarios de Galerí­a Imágenes Externas | Solo Photoshop

↑ Tutorial

  • Marca Xti

    Marca Xti

    2005-12-28 21:31

    Interesante M
  • dsalomon

    dsalomon

    2006-01-14 19:31

    muy largo no? M
  • aNToFeRo

    aNToFeRo

    2006-01-17 22:31

    mmmmm está genial...lo malo es q al terminar las fotos sigue contando los espacios como si hubiera foto. Si se sigue pulsando "siguiente" 4 veces (x ejemplo)tienes q retroceder otras tantas para volver a la última foto....no sé si me explico...alguien me podrí­a dar solución a eso?¿ graciasM
  • AJReybin

    AJReybin

    2006-01-23 21:31

    ARIELM
  • carlos mckay

    carlos mckay

    2006-01-28 17:31

    lo pondre en practicaM
  • Dolphin07

    Dolphin07

    2006-06-15 11:19

    ESTA CHIDO EL TUTORIAL, ME AGRADA MUCHO, PERO NO BAJA EL ARCHIVO ZIP. ME GUSTARIA QUE SI ALGUIEN PUDIERA, AYUDARME A INTERACTUAR CON LA LINEA DE TIEMPO, YA QUE SI EN UN KEYFRAME ME VOY AL 20 COMO PUEDO REGRESAR AL 15 DE LA 2 CAPA, SI ALGUIEN ME PUEDE AYUDAR SE LOS AGRADECERIA.M
  • skipy_dgd

    skipy_dgd

    2006-10-06 15:34

    esta muuuy interesante y ademas es justo lo q necesito en este momento para un trabajo q estoy haciendo......lo pondre en practica para ver q sale......... bye:. PD:despues te digo si pude o noM
  • poetasesino

    poetasesino

    2006-10-21 11:07

    mm....estaria bien!M
  • Rivx

    Rivx

    2006-12-19 18:39

    Lo rato de poner en práctica, pero no me pesca. :8)M
  • spencer_graphics

    spencer_graphics

    2007-03-10 23:33

    ES MUY BUENO, AUNQUE LAS IMAGENES TIENES QUE SER DE UN TAMAÑO ESPECIFICO HABER SI ALGUIEN ME AYUDA, LO INSERTE EN UNA PAGINA WWW PERO A LAS IMAGENES TAPAN TODO ( NECESITO DEFINIR DEFINIR PARA TODAS IMAGENES UN TAMAÑO) Y QUE SE ADAPTE A UN VISOR SI SALIRSE DE ESTE, GRACIAS POR EL CODIGO M
  • MR-MAN

    MR-MAN

    2007-06-16 14:21

    vean esto: http://mrmansite.googlepages.com/ aca esta mas explicado, por si les interesa.M
  • tolva

    tolva

    2007-09-09 11:43

    Como hago para que las imagenes desaparezcan luego de ejecutada la galeria, cuando hago click en los otros vinculos de mi presentación se quedan la fotografías para el resto de la presentación y me caga tooooodoooooo y no encuentro manera de retirarla, si alguien me ayuda pleaseM

↑ Tutorial