Sistema de transiciones entre fotos
Esta clase, permite generar de forma fácil un sistema de transiciones de fotografias. Este es un ejemplo:
Su funcionamiento es muy simple. La clase genera dos MovieClips contenedores en los que coloca la fotografía actual y la fotografía posterior, y carga también un SWF que contiene la animación de la mascara. Esta mascara la aplica al MovieClip contenedor haciendo así es efecto de transición de una foto a la otra.
Este sistema nos permite generar las animaciones de transición como archivos SWF externos e independientes, pudiendo tener una libreria de transiciones y eligiendo la que queramos para cada transición de fotos.
Un ejemplo de animación de transición sería este:
La clase:
- import mx.utils.Delegate;
- //
- class img.ImgTransition
- {
- private var ruta:MovieClip;
- private var clip:MovieClip;
- private var foto:String;
- private var foto_up:MovieClip;
- private var foto_down:MovieClip;
- private var mascara:MovieClip;
- private var intervalo:Number;
- private var ejecucion:Boolean;
- //----------------------------
- public function ImgTransition(qRuta:MovieClip, qFoto:String, qX, qY)
- {
- ruta = qRuta;
- clip = ruta.createEmptyMovieClip("ImgTransition", ruta.getNextHighestDepth());
- foto_down = clip.createEmptyMovieClip("foto_down", clip.getNextHighestDepth());
- foto_up = clip.createEmptyMovieClip("foto_up", clip.getNextHighestDepth());
- mascara = clip.createEmptyMovieClip("mascara", clip.getNextHighestDepth());
- foto_up.createEmptyMovieClip("mc", 1);
- foto_down.createEmptyMovieClip("mc", 1);
- mascara.createEmptyMovieClip("mc", 1);
- foto = qFoto;
- loadMovie(qFoto, foto_up.mc);
- loadMovie(qFoto, foto_down.mc);
- clip._x = qX;
- clip._y = qY;
- ejecucion = false;
- //
- }
- //----------------------------
- public function transition(qFoto:String, qMascara:String, qDuracion:Number):Void
- {
- if (!ejecucion)
- {
- if (qFoto != foto)
- {
- foto = qFoto;
- //
- var precarga:MovieClipLoader = new MovieClipLoader();
- var listener:Object = new Object();
- listener.onLoadInit = Delegate.create(this, xnLoadInit1);
- precarga.addListener(listener);
- precarga.loadClip(qFoto, foto_up.mc);
- mascara.swf = qMascara;
- mascara.duracion = qDuracion;
- foto_up._visible = false;
- }
- }
- }
- private function xnLoadInit1()
- {
- var precarga2:MovieClipLoader = new MovieClipLoader();
- var listener2:Object = new Object();
- listener2.onLoadInit = Delegate.create(this, xnLoadInit2);
- precarga2.addListener(listener2);
- precarga2.loadClip(mascara.swf, mascara.mc);
- }
- private function xnLoadInit2()
- {
- foto_up.setMask(mascara);
- foto_up._visible = true;
- intervalo = setInterval(this, "endTransition", mascara.duracion * 1000);
- ejecucion = true;
- }
- //----------------------------
- private function endTransition():Void
- {
- loadMovie(foto, foto_down.mc);
- foto_up.setMask(null);
- unloadMovie(mascara.mc);
- clearInterval(intervalo);
- ejecucion = false;
- }
- //----------------------------
- }
Su uso en el .fla es este:
- import img.ImgTransition;
- var foto:ImgTransition = new ImgTransition(this, "foto1.jpg", 10, 10);
- //
- bot1.onRelease = function()
- {
- foto.transition("foto1.jpg", "mascara1.swf", 5);
- };
- bot2.onRelease = function()
- {
- foto.transition("foto2.jpg", "mascara2.swf", 3);
- };
- bot3.onRelease = function()
- {
- foto.transition("foto3.jpg", "mascara3.swf", 2);
- };
- bot4.onRelease = function()
- {
- foto.transition("foto4.jpg", "mascara4.swf", 3);
- };
- bot5.onRelease = function()
- {
- foto.transition("foto5.jpg", "mascara5.swf", 2);
- };
*UPDATE: Archivos
Compártelo:
Visto 29.314 veces
Está muy chulo pero a mi me da un error al cargar la clase:
**Error** Escena=Escena 1, capa=as, fotograma=1:LÃnea 2: No se pudo cargar la clase o interfaz ‘img.ImgTransition’.
Saben cúal es el problema?
Gracias!
Como dice el error, no te está cargando correctamente la clase.
El código de la clase ha de estar en un archivo que se llame ImgTransition.as dentro de una carpeta que se llame img junto a tu archivo .fla
//en el flaimport img.ImgTransition
//en el .as
class img.ImgTransition {...}
Si quieres cambiar el nombre de la carpeto o simplemente poner el .as al mismo nivel del .fla, cambia las rutas:
//en el flaimport ImgTransition
//en el .as
class ImgTransition {...}
uff muy sencillo.. ahora solo falta aprenderse el script.. muchas gracias
Esta bueno esto, pero no me funciona, llevo rato dándole vueltas. Me carga la primera foto, pero las instancias botones no hacen nada, solo utilizo una mascara y nombre las fotos como 1,2,3… la clase esta en una carpeta img. Es por alguna razon que utilizo el flash 8?? y la clase se importa de otra manera??? o es por delegate???
Gracias por vuestra ayuda un saludo.
una horas más tarde y después de comer me respondo a mi mismo: “Pon atención cuando estudies los códigos….melón!!!”
gracias ya lo conseguÃ. Ahora a crear librerÃas de transiciones.
Hola me gustarÃa saber si hay un ejemplo como este pero que no haya necesidad de hacer click en los botones, sino que pase de foto en foto,de forma automatica.
saludos
Hacer eso no serÃa difÃcil, lo único que tendrÃas que hacer es crear un setInterval() que cada cierto tiempo te cambiase la foto 😉
hola quisiera saber como lograr esos efectos pero sin tener q tener las fotos afuera no se si me dejo entender?
a lo q me refiero es q las fotos esten dentro del swf ImgTransition lo q pasa es q ya tengo una galeria q tiene precarga y ademas q no quiero q las fotos se guarden en temporales de los usuarios
gracias
@Mitchael, para hacer eso tendrÃas que cambiar bastante cosa de la clase (por no decir que habrÃa que reescribirla del todo)
De entrada tendrias que cambiar los loadMovie (linea 25 y 26 del código) por attachMovie, y eliminar todo el funcionamiento del MovieClipLoader ya que con attachMovie no necesitas controlar la precarga de las fotos.
me aparece ese error porq:
1046: No se encontró el tipo o no es una constante en tiempo de compilación: MovieClip.
Gracias de antemano por la ayuda que aportáis. Tengo un problema: He terminado una aplicación web con varias llamadas entre ficheros swf hechas con loadmovie, y quiero eliminar la pantalla en blanco que aparece antes de visualizar el swf llamado. Quiero que permanezca la pantalla del swf que llama hasta que el swf llamado se ha cargado por completo. ¿Podéis ayudarme?
Gracias de nuevo
ya solucione eso, me gustaria ver si podrias poner el codigo para q el cambio fuera automatico
@Paco:
Para hacer eso has de cargar los archivos externos con loadClip() de la clase MovieclipLoader, no con loadMovie()
Aqui tienes un ejemplo del uso de MovieclipLoader.
@Raymundo:
Para hacerlo automático simplemente coloca el código que hay dentro del onRelease() y colocalo dentro de una función, y através de un setInterval haz una llamada a esa función cada cierto tiempo, y listo.
tengo un problema con mascaras y nadie en nigun foro me supo contestar. es el siguiente. yo quiero importar un grafico con transparencia (lo que sea! swf o png no me importa) y que ese grafico usarlo como mascara.
los png me los toma como cuadrados (no me toma la transparencia).
no se que hacer probe de todo.
estuve viendo la propiedad cacheAsBitmap=true;
es booleanpero no se bien como funciona. gracias te agradeceria mucho si me podes ayudar
Hola he realizado el ejemplo y me salen estos 3 errores en la clase ImgTransition, que no entiendo porque, ya que veo todo bien instanciado.
Línea 14: 1046: No se encontró el tipo o no es una constante en tiempo de compilación: MovieClip. —- public function ImgTransition(qRuta:MovieClip, qFoto:String, qX, qY)
Línea 33: 1046: No se encontró el tipo o no es una constante en tiempo de compilación: Void. —- public function transition(qFoto:String, qMascara:String, qDuracion:Number):Void
Línea 68: 1046: No se encontró el tipo o no es una constante en tiempo de compilación: Void. —- private function endTransition():Void
Me puede alguien echar una mano ? 😉
Gracias !!
@Julio
Arreglé el enlace al ejemplo:
http://www.codigoactionscript.org/files/ImgTransition/ImgTransition.zip
A ver si te sirve para ver el funcionamiento.
en el archivo fla imgTransition, ¿se supone que cada boton lleva independiente el código bot.onRelease=function() ?
@victor diaz:
Si, cada botón ha de llamar a la función transition() independientemente, para pasarle los parámetros de foto, transición y tiempo que toquen..
He creado un archivo fla de un solo fotograma en el que he añadido el codigo:
import img.ImgTransition;
var foto:ImgTransition = new ImgTransition(this, “foto1.jpg”, 10, 10);
pero me da error al cargarlo y ya he revisado el nombre que he asignado a los archivos .fla y .as. No se donde puede estar el fallo…
Conseguí cargar la clase pero el metodo ‘delegate’ no lo reconoce,
No hay ningún método que lleve por nombre ‘Delegate’.
listener.onLoadInit = Delegate.create(this, xnLoadInit1);
¿podría conseguir el archivo .fla (el del enlace no se puede abrir) para ver elfuncionamiento?
gracias
@victor diaz:
aqui lo tienes http://www.codigoactionscript.org/files/ImgTransition/ImgTransition.zip
Necesitarás Flash CS4 para abrirlo
Hola, me gustaría saber si pueden ayudarme, no se como colocar el setInterval para que las transiciones sean automáticas y no mediante la acción de un botón, gracias
Hola, me podrían facilitar el código con el setInterval integrado? No soy capaz de hacerlo funcionar para que cambie automáticamente. Gracias
muy buen recurso, me fue de mucha ayuda, gracias
Hola,
¿es posible hacer esto mismo pero de forma que cada botón cargue su transición en un espacio de la escena diferente en coordenadas al de los otros botones?
gracias.
buen dia, alguien me puede ayudar ocn lo del set interval?