Tutorial Flash - Galeria de fotos con efecto de transicion
simple By tigladd_matt047
Hacer Click en las flechas para ver el Ejemplo en accion
Nivel de conocimiento previo: Medio/Bajo
Este es mi primer tutorial y nace principalmente por un tema q surgio en el foro. Por cualquier duda avisarme para q lo corriga ya q no tengo experiencia en esto. Bueno.. vamos al hecho...
En este tutorial voi a usar el flash cs3 professional en español. Para empezar conviene tener en alguna carpeta los archivos de foto q se desan usar y seria recomendable bajarles un poco la calidad para no hacer tan pesado el swf a la hora de cargarse (mas si va a ser una aplicacion para internet). En este caso se van a usar las fotos dentro del swf y no externamente, q seria otra posibilidad.. pero en este caso se necesitaria mucho mas action script i con el metodo este solo basta saber algunos codigos...
Abrimos flash i creamos un nuevo documente. Vamos a las propiedades del documento haciendo click derecho en el fondo y ponemos en velocidad de fotogramas = 25 fps (fotogramas por segundo). Esto es para crear un movimiento mas "suave".
El paso siguente es crear tres capas: Botones, Fotos y Fondo. Estas van a ser las capas principales de nuestro visor de fotos... Luego se pueden agregar otras para "decorar" el archivo...
Ahora voi a dividir el tutorial en dos secciones principales: Capa BOTONES y Capa FOTOS.
Capa FOTOS
Lo que se debe hacer en esta capa es bastante simple pero son varias cosas. Primero se deben crear fotogramas clave segun la cantidad de fotos que se deseen agregar a la presentacion. Para agregar un fotograma clave se debe seleccionar la capa FOTOS i hacer click derecho en su linea correspondiende e ir a la opcion "Insertar fotograma clave vacio". En mi caso voy a usar solo 4 fotos.
Ahora nos posicionamos sobre cada uno de los fotogramas clave vacios i exportamos cada una de las fotos. De esta forma, cuando se valla clickeando en cada fotograma clave se va a ver una foto diferente. Luego se va a agregar el primer codigo actionscript. Para eso se selecciona el primero de los fotogramas (EL FOTOGRAMA, NO LA FOTO) y se presiona F9 para abrir la "consola". Ahi vamos a escribir: stop();. de esta forma se va a detener la cabea lectora en ese fotograma.
Lo mismo se debe hacer con los fotogramas restantes. Se podra observar como arriva del punto de c/ fotograma aparece una "a" cursiva indicando que ese fotograma va a ejecutar un codigo.
El paso siguiente va a ser agregar el efecto a la foto paara que se funda desde el blanco. Se hace de la siguiente forma (yo lo voy a explicar con una sola foto y el procedimiento debe ser el mismo para c/u). Se selecciona la foto i se la convierte en un clip de pelicula (F8).
Se le hace doble click para entrar dentro del clip de pelicula. Dentro del mismo se la vuelve a convertir, pero esta vez en un "Grafico". Sin entrar dentro de este ultimo se presiona Ctrl+F3 para abrir la ventana propiedades. Alli se despliega la opcion de color i se selecciona "Avanazdo".
Luego se hace click en el nuevo boton que aparece con el nombre de Configuracion... y se colocan los siguientes valores:
Quedara una imagen blanca y eso es lo que estamos buscando. Ahora en la linea de tiempo creamos un fotograma clave en el frame 15 ( "CLAVE", NO "CLAVE VACIO" ) i volvemos todas las propiedades q cambiamos antes a 0. Se debera volver a ver la imagen. Faltan solo dos cosas: primero se debe hacer click derecho en el primer fotograma i seleccionar "Crear interpolariacion de movimiento" ( Todos los fotogramas deberan ponerse violetaceos i con una flecha acia el 15) i luego aplicar el script "stop();" en el fotograma clave que esta en el 15.
Listo esto es lo que se debe hacer en cada foto. Si van moviendo la cabea lectora van a ver como va apareciendo la foto de una forma muy vistosa. Dictarlo es muy largo pero hacerlo es muy sencillo;) ahora se puede pasar a la parte 2.
Capa BOTONES
En esta capa habra solamente tres fotogramas clave con diferentes acciones cada uno... lo primero es crear los botones i convertirlos presionando la tecla F8.
Ahora deberiamos tener dos flechas convertidas en botones. Luego se puede modificar el boton para que varie su estado segun el mouse este sobre él o no, o haciendo click. Lo siguiente son los fotogramas clave que se van a crear de la siguiente forma: Un fotograma clave inicial, Un segundo fotograma clave, fotogramas comunes segun la cantidad de fotos y un ultimo fotograma clave que corresponde a donde iria la ultima foto. En mi caso me queda: Fotograma clave, Fotograma clave, Fotograma comun, Fotograma clave. pero si se usaran seis fotos seria: Fotograma clave, Fotograma clave, Fotograma comun, Fotograma comun, Fotograma comun, Fotograma clave. Creo que se entiende.
Este orden es muy importante ya que va a ser la clave para que funcione bien el codigo de deplasamiento entre las fotos...
Ahora la base de esto va a ser siempre la misma: se selecciona en boton dentro de un fotograma clave i se le agrega un codigo AL BOTON!... voy a hacerlo rapido:
Fotograma 1: Boton atras:
on (release) {
gotoAndStop(NUMERO DEL ULTIMO FOTOGRAMA - EN MI CASO "4");
}
Boton siguiente:
on (release) {
nextFrame();
}
Fotograma 2: Boton atras:
on (release) {
prevFrame();
}
Boton siguiente:
on (release) {
nextFrame();
}
Ultimo Fotograma: Boton atras:
on (release) {
prevFrame();
}
Boton siguiente:
on (release) {
gotoAndStop(1);
}
Una ve aplicados estos codigos EN LOS BOTONES (NO EN LOS FOTOGRAMAs) ya estamos listos para presionar Ctrl+Enter y ver como quedo nuestra pelicula.
Bueno, hasta aca llega este primer aporte para el foro... Se que tal vez esta hecho mui explicito con algunas cosas pero kise que alguien que no tenga muchos conocimientos en flash tambien pueda usarlo... Faltaria pulirlo muchisimo mas pero ustedes deberan ir tocando i variando los valores o modificando los fondos para hacerlo un poko mas "lindo" a la vista.
Arriba hay un ejemplo de como deberia quedar. La unica diferencia es que le hice algo en el fondo para que no quedara tan vacio.
Espero que hayan entendido todo i que les resulte util...
