Flash CS4. Otro portafolio de fotografía.
Descargar código fuente (archivo Fla y clases) >>
Descargar código fuente Proyecto ActionScript completo >>
Me tropecé con esta página y me gustó la forma de mostrar los catálogos de imágenes:
TODO:
1. Que la interfaz se oculte tras un tiempo de inactividad.
Muy bueno, la verda que este Blog tiene mucha altura! de lo mejor en Flash/Flex en español, te felicito!
Lo unico q le falto a este ejemplo es la descripcion/ubicacion de cada una de las fotografias, impresionantes edificios!
Gracias.
Hola, Marcos:
Abajo, a la derecha sale una descripción de cada sección/Galería (la misma que aparece en la ventana explicativa de cada galería). Estaba un poco perezoso y no escribí nada concreto ;), además de repetir varias veces las mismas imágenes.
Este tipo de portafolio viene muy bien si tienes fotografías agrupadas en muchísimas categorías. Perfectamente podrías introducir 10 secciones con 20 galerías cada una, lo que daría un total de 200 galerías, cada una con sus correspondientes fotografías.
Un saludo.
P.D.:Lo que sí, puede dar un aspecto de tira de postales de kiosko turístico.
Hola Luis,
Si para muchas galerias es ideal.
En este sitio se lo utilizo de una manera muy similar http://www.erwinolaf.com/
Saludos!
La verdad que se ve impresionante. Hace ya un tiempo vi la web de Werkstette y me encantó. Yo en estos momentos estoy rehaciendo mi portfolio personal en AS3 y me molaría mucho incorporar este tipo de navegación.
Mi problema es que no estoy muy versado en clases y paquetes y hay ciertas cosas que se me escapan como por ejemplo el hecho de que en uno de los dos ejemplos para bajar aparece la opción de redimensionar las imagenes y en el otro no y cosas por el estilo. Cual es la diferencia entre los ellos?, como puedo dejar por defecto que las imagenes ocupen el 100% de la pagina?.
No sé si es mucho pedir pero si conoceis de algun tutorial que se extienda con este tipo de codigo lo agradecería mucho. Me mlaría hacer algo minimalista y sencillo con mi nueva version del portfolio y ando explorando diferentes opciones.
Perdón por la ignorancia y felicidades por el blog, es uno de los que cae cada día.
Roberto.
Hola, Roberto:
Lo de las diferentes versiones para el proyecto AS y Flash CS4 tiene una explicación muy simple: “soy mu’ perro”.
Generalmente (el 99% de las veces) utilizo Flex Builder para desarrollar el ejemplo y, como la mayoría que os pasáis por aquí buscáis cosas para utilizar con Flash Professional, hago una versión Flash CS4 rápidamente. Si posteriormente hago algún cambio “se me olvida” actualizar la versión CS4.
Pero si te ocurre lo de este ejemplo, y te has descargado las dos versiones, es rápido solucionarlo:
1. Copia las clases que hay en la carpeta “src” del proyecto AS a la carpeta donde tengas el proyecto Fla.
2. Copia la carpeta “libs” del proyecto AS a la carpeta “libs” del proyecto Fla.
Así, tendrás actualizada la versión CS4. Y si pillo un hueco, actualizo el archivo rar con el código fuente O:)
Por cierto, aprovecho para indicar que si hay algún ejemplo cuyo código fuente es un proyecto AS, es muy fácil utilizarlo desde Flash CS4:
1. Te creas un Fla y le das como Clase Documento el documento index.as (la clase principal del proyecto).
2. Copias la carpeta “libs” a la carpeta donde has creado el documento Fla y en el panel Propiedades/ Editar perfil / Configuración…/ Ruta de biblioteca añades la anterior carpeta “libs”.
3. Cuando compiles la primera vez, posiblemente te aparezca un mensaje que te sugiere añadir la biblioteca flex.swc. Dale a aceptar.
Un saludo.
Hola otra vez.
Muchas gracias por la respuesta y la explicación Luís. Jaja, el perrerismo es un deporte nacional, es algo de lo que uno se ha de enorgullercer y más si lo que haces lo haces por la face. Se agradece que compartas tus experimentos por aqui, de verdad.
Probaré lo que dices e intentaré sacarle jugo a este archivo a ver que saco de provecho para una posible galería para mi portfolio. No sé, si se te/os ocurre/n algun lugar/libro/pdf/web/loquesea donde se explique un poco el proceso de montar una galería parecida a esta o como lidiar con el stage para conseguir este tipo de páginas full browser se agradecería mucho.
Salu2 y gracias again.
Roberto.
Hola, Roberto:
Hacer un swf a fullframe no es excesivamente complicado. Básicamente deberías hacer:
1. Definir el stage como NO_SCALE:
stage.scaleMode = StageScaleMode.NO_SCALE.
2. Añadir un listener para el evento RESIZE:
stage.addEventListener(Event.RESIZE, resizeHandler);
3. En la función resizeHandler debes distribuir los elementos del stage en sus posiciones correspondientes, y esto lo debes hacer TÚ, Flash Player no se ocupa de reubicar nada cuando cambia el tamaño del stage. Por ejemplo, si tienes un menú que quieres que siempre salga en la parte inferior del navegador, en esta función deberías tener un código similar a este:
menu.y = stage.stageHeight
o por ejemplo, si quieres que un movieClip aparezca siempre en el centro:
movie.x = 0.5*stage.stageWidth;
movie.y = 0.5*stage.stageHeight;
Así con todo.
Creo entender que utilizas Flash Professional, porque una opción muy rápida para este tipo de aplicaciones es Flex Builder. En un proyecto Flex te puedes crear rápidamente, y sin escribir apenas código, un layout (una distribución de tus elementos: menú, botón de avance/retroceso, galería de imágenes) a fullframe y Flex se encarga de mantenerlo todo en su correcta ubicación.
Un saludo.
Genial el blog y los ejemplos. Bravo!!!
Yepa!.
Gracias por las lienas de código Luis. Preciaamente ayer me puse a experimentar con el stage y he conseguido hacer un layout bastante digno con varios mc que flotan y se reposicionan al reducir/ampliar el browser usando Tweener. Ahora lo que me pasa es que estoy teniendo problemas a la hora de conseguir que los mc´s que van dentro de esos mc´s dinámicos funcionen…en fin.
Estás en lo cierto, utilizo Fl CS4 Pro y la verdad que no he tocado mucho Flex, más que nada por el palo que me da tener que aprender a usar otro soft cuando aún estoy en pañales con Flash. No sé si mi movimiento es inteligente o demasiado precavido. Me aconsejarías pasarme a Flex aunque no domine del todo AS3 yel OOP?. La verdad que eso de hacer más, escribiendo menos suena muy bien jeje.
De todas formas, he notado que tu código se diferencia un poco del que yo he usado ya que si tu bien usas la expresión:
movie.x = 0.5stage.stageWidth;
Yo ,por mi parte, utilicé variables para alojar los distintos valores pero vamos, que más o menos hice:
movie.x = stage.stageWidth/2; o en su defecto tambien hubiera podido ser movie.x = stage.stageWidth*0.5;
Otra cosa que estoy maquinando con este ejemplo es tratar de darle un efecto panning a las fotos (siempre a pantalla completa) usando tweener al estilo de esta web ——————>
http://www.dolphinsonline.gr/
Encontré incluso una clase gratuita, te la dejo por aqui por si te pudiese servir de algo más que a mi———————–>
http://gfxcomplex.com/uncategorized/free-as3-panning-fullscreen-image-class/
Gracias de nuevo por tu tiempo y ayuda.
Salutens.
Roberto.
Hola, Roberto:
No eran variables, es que creo que al publicar se perdieron los caracteres de multiplicar
Ya está corregido. Así, que utilizamos lo mismo. En el código del ejemplo sí estará bien escrito.
En el enlace que comentas DolphinsOnline el efecto se puede hacer bastante rápido: tienes que capturar las coordenadas del mouse (mouseX y mouseY) y en el método controlador el evento ENTER_FRAME, colocar un código del tipo:
imagen.x -= velocidad*(mouseX - imagen.x);
imagen.y -= velocidad*(mouseY - imagen.y);
el signo que aparece delante del igual lo puedes cambiar en función de si quieres que la imagen se acerque/aleje poco a poco al cursor. Y tienes que tantear el valor que das a velocidad, ya que es lo que condiciona lo rápido/lento que la imagen se acercará a la posición del mouse.
En este blog puedes encontrar algún ejemplo de este tipo de efecto en el menú de selección de vídeos:
http://www.coconnut.com/blog/2009/05/10/flex-3-flash-cs4-galeria-de-videos/
Si te fijas, el menú inferior se acerca a la posición en la que tú tengas el ratón.
Y en este ejemplo, en concreto, también lo utilizo para mover el submenú de imágenes que aparecen.
Un saludo.
Hola de nuevo Luis.
Gracias mil por el consejo. De todas formas no sé si me entendiste bien en cuanto al ejemplo de dolphins. Yo hacía referencia al efecto de panning que se aprecia tanto en la pagina “home” (donde se ve el portatil con el logo de plástico encima” o bien en los trabajos de la sección work una vez clickas sobre alguna miniatura y la foto pasa a pantalla completa.
Digo esto porque el tipo de ejemplo que me das lo entiendo más como añadir una sensación de perspectiva tal y como se aprecia en la sección works pero con las miniaturas de los proyectos que, imagino, esta hecho con papervisión.
Disculpa si el que esta equivocado soy yo.
Salu2.
Hola, Roberto:
Básicamente es eso, lo mismo despista que sea un menú lo que muevo en lugar de una imagen, y sólo lo hago en horizontal. A ver si este finde pillo un hueco y hago un ejemplillo con una imagen. Lo que sí puede liar un poco el código es detectar los bordes del stage para que no se salga la imagen.
Un saludo
Ey Luis.
Disculpa pues, es que a veces con esto del ActionScript voy muy perdido. La verdad que así en frio no me imagino la forma de conseguir el efecto, ya que no comprendo el concepto de que una imagen que está definida a un tamaño en concreto (por ejemplo 1280×1024) pueda moverse más allá de esos margenes a consecuencia de un gesto de raton sin que aparezca cortada en los mismos…madre mía, vaya frase más rara.
En fin, no sé, la verdad que si te currases ese ejemplo te lo agradecería mucho tío, estoy muy interesado en aprender esa técnica como imaginarás por mi berborrea jaja.
Un saludo grande y gracias again.
Roberto
…echale un vistazo al post “Flash CS4. Pan Gallery”, y en especial al método “loop” de la clase LoaderImage.as o Menu3D.as. La expresión anterior se complica un poco porque tengo que tener en cuenta el tamaño del stage, pero básicamente es la misma expresión anterior.
http://www.coconnut.com/blog/2009/10/03/flash-cs4-pan-gallery/
[...] via [coconnut] [...]
Hola!
Antes que nada darte las gracias por tu blog es de gran ayuda para los que empezamos en esto del flash y flex .
La verdad que soy bastante novata como vas a comprobar, ma ha gustado mucho este tipo de galeria y me gustaria poder adaptarla a un diseño especifico , que tendré que realizar, he intentado hacer pruebas con el fla , pero en cuanto modifico algo, la galeria deja de funcionar.
Que es lo que hago mal.
Muchas gracias
Un saludo
Hola, ali:
Si no conoces mucho ActionScript3 y quieres modificala “SIN TOCAR EL CÓDIGO”, puedes hacer lo siguiente:
1. En la biblioteca del Fla tienes todos los skins de los botones. Puedes modificarlos a voluntad personalizándolos para tu caso concreto. Eso sí, NO CAMBIES EL NOMBRE de estos símbolos, ya que el código los instancia (los crea) a partir del nombre que tienen actualmente.
2. En la carpeta “assets/image” encontrarás un pequeño png que es el que rellena el fondo del swf (el que hace el efecto de superficie bandeada, al estilo de las superficies plásticas de muchos dispositivos). Lo mismo, si no vas a modificar el código NO CAMBIES EL NOMBRE de este png, aunque podrías cambiarlo por otra imagen de tipo mosaico que quieras utilizar como fondo del swf.
3. La parte más delicada: editar el archivo xml que encontrarás en la carpeta “bin/xml”. Tiene las siguientes etiquetas:
- “section” donde se especifica el nombre de la galería (el nombre que aparece en los botones inferiores)
- “gallery” donde se especifican las imágenes que van a formar cada galería.
Ten cuidado al editar el xml, y asegurate de cerrar bien todas las etiquetas.
Un saludo.
gracias!!
Ya he realizado cambios haciendo pruebas y van saliendo.
Siguiente paso es aprender as.
Un saludo
ali
Realmente buena, sencilla y practica, lo mejor que he visto hasta ahora..
hola esta galeria es muy buena.
Pero tenia un par de dudas que no he sabido solventar.
Actualmente tengo un menu realizado como este que siempre esta en el top de la web, aparte de eso tengo otros objetos que se ajustan automaticamente cuando cambias el tamaño de la ventana.
Ahora viene la duda: mi problema es que no se poner un fondo(fotografia) que se ajuste al tamaño del navegador (se queda del mismo tamaño auque cambies la resolucion del navegador).
Hola, ruben:
En este ejemplo las imágenes pueden mostrarse de cuatro formas (tamaño original, encuadradas dentro de la interfaz, encuadradas dentro del stage, ocupando todo el stage) y quizá ha quedado demasiado complejo. Échale un vistazo al ejemplo:
Flash CS4. Pan Gallery Follow >>
Las imágenes en este caso siempre se rescalan para que ocupen todo el stage.
Un saludo.
Con la de veces que habia visto ese articulo y no se me habia ocurrido que era lo que necesitaba jjjaja.
muchisimas gracias por contestarme tan rapido.
voy a mirar el codigo y ya os comentare.
saludos.
hola de nuevo Luis.
despues de estar investigando un poco el codigo del ejemplo que me indicaste he mirado que es lo que me hacia falta pero no lo he encontrado.(soy muy garrulo)
el codigo que uso para posicionar los objetos es este :
//————————————————————
import caurina.transitions.*;
function aliniar(event:Event):void {
Tweener.addTween(menu_mc, {x:stage.stageWidth / 2, y: menu_mc.height / 2, time:0.2});
removeEventListener(Event.ENTER_FRAME, aliniar);
}
stage.addEventListener(Event.ENTER_FRAME, aliniar);
stage.addEventListener(Event.RESIZE, aliniar);
//————————————————————
lo que necesito es que una imagen (vertical) se auto ajuste al alto del navegador. como en (http://www.carlopignatelli.com/es/src/home.html) y como en este ejemplo seleccionando la 3ª opcion, que cuando cambias el tamaño del navegador se ajusta la imagen pero el menu sigue del mismo tamaño.
el tema es que no estoy muy acostumbrado a trabajar con *.as externos y acostumbro a poner el codigo en linea del tiempo (se que esta mal).
como podria hacerlo?
ya siento ser tan pesao pero llevo investigando unos dias y no se donde puede estar el fallo.
saludos y muchas gracias
Hola, Ruben:
Échale un vistazo a la clase “LoaderImage”, que encontrarás en:
com.site.controls.gallery.LoaderImage
de este ejemplo. Y más concretamente al método “updateSize”. Verás que es un switch que dependiendo del tipo de representación que has elegido (tamaño original, encuadradas dentro de la interfaz, encuadradas dentro del stage, ocupando todo el stage) hace el rescalado de la imagen. En tu caso sería el caso 3.
Este método se llama cada vez que cambia el tamaño del escenario (stage) en el método controlador del evento Event.RESIZE (al que tu llamas aliniar). Deberías eliminar:
stage.addEventListener(Event.ENTER_FRAME, aliniar);
de tu código, ya que la llamada al método “aliniar” se va a hacer cada ENTER_FRAME ( si tu película está a 24 fps, se ejecutará 24 veces por segundo, nada conveniente, con una vez vale
Si lo has añadido porque no se actualiza la imagen hasta que cambias el tamaño del navegador, mejor llama TU a este método cuando hagas el addChild; así se rescalará la imagen al tamaño del stage.
Volviendo a este ejemplo del blog:
stage.stageWidth;
stage.stageHeight;
son el ancho y alto del escenario (las dimensiones que le debes dar a tu imagen), y en este caso concreto, la imagen se llama bmpForeground, por eso la rescalo con el valor:
scale = stage.stageWidth/bmpForeground.width;
o
_scale = stage.stageHeight/bmpForeground.height;
dependiendo que sea más alta que larga o viceversa.
Un saludo, y espero no haberlo liado aún más
hola de nuevo a ver creo que lo he entendido mas o menos.
efectivamente esta linea(stage.addEventListener(Event.ENTER_FRAME, aliniar);) la tenia puesta porque ya no sabia que hacer.
creo que el codigo quedaria asi :
//————————————————————————–
import caurina.transitions.*;
var _scale:Number;
function aliniar(event:Event):void {
Tweener.addTween(menu_mc, {x:stage.stageWidth / 2, y: menu_mc.height / 2, time:0.2});
if (stage.stageWidth/stage.stageHeight<foto_mc.width/foto_mc.height) {
_scale=stage.stageWidth/foto_mc.width;
} else {
_scale=stage.stageHeight/foto_mc.height;
}
foto_mc.scaleX=foto_mc.scaleY=_scale;
removeEventListener(Event.ENTER_FRAME, aliniar);
}
stage.addEventListener(Event.RESIZE, aliniar);
//——————————————————————–
creo que asi estaria bien.
pero mi duda viene cuando tu usas scale(variable que tiene el valor de stage.stageHeight/bmpForeground.height)
pero ala hora de usarlo no si se va a funcionar dado que :
foto_mc.scaleX=foto_mc.scaleY=_scale;
es igual a :
foto_mc.scaleX=_scale;
foto_mc.scaleY=_scale;
entoces por esa regla siempre saldran las fotos cuadradas no?¿
ya puedes disculpar mi ignorancia pero no puedo pobrarlo.
saludos y que dios te pague con muchos hijos lo que haces .
RESUELTO MUCHISIMAS GRACIAS AL FIN HE PODIDO PROBARLO.
(me ha costado 2 horas conseguir un portatil con flash, el mio ha petao)
asi es como he dejado el codigo.
//———————————————————————-
import caurina.transitions.*;
var _scale:Number;
var ancho_f:Number;
var alto_f:Number;
ancho_f = foto_mc.width;//guardo el ancho de la imagen
alto_f = foto_mc.height;//guardo el alto de la imagen
stage.align=StageAlign.TOP_LEFT;
Tweener.addTween(menu_mc,{x:stage.stageWidth/2,y:0,time:1});
function aliniar(event:Event):void {
Tweener.addTween(menu_mc,{x:stage.stageWidth/2,y:0,time:1});
Tweener.addTween(foto_mc, {x:stage.stageWidth / 2, y:stage.stageHeight / 2});
if (stage.stageWidth/stage.stageHeight < ancho_f/alto_f) {
_scale=stage.stageWidth/ancho_f;
} else {
_scale=stage.stageHeight/alto_f;
}
foto_mc.scaleX=foto_mc.scaleY=_scale;
}
stage.addEventListener(Event.RESIZE,aliniar);
//———————————————————
tienes una direccion de correo a la que pueda escribir?
muchisimas gracias por todo y FELIZ NAVIDAD.
Hola Amigos, la gallery esta diez puntos
querìa hacer una pregunta, es posdible modificar la ruta en el xml para que tome las imagenes con path absoluta ej: http://www.pagina.com/imagen.jpg?, pueden indicarme como se hace??, no lo logro 
gracias.
Hola, Juan Carlos:
Imagino que se genera un error de seguridad al intentar cargar las imágenes de otro dominio. Échale un vistazo a la política de seguridad de Flash Player, y especialmente a la configuración del archivo de política cross-domain.xml:
Permiso de carga de datos de varios dominios
Un saludo.
Un saludo.