Home » AS2 »Avanzado »Class »Tutoriales » Currently Reading:

Sistema de transiciones entre fotos

febrero 12, 2007 AS2, Avanzado, Class, Tutoriales 28 Comments
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:

  1. import mx.utils.Delegate;
  2. //
  3. class img.ImgTransition
  4. {
  5.     private var ruta:MovieClip;
  6.     private var clip:MovieClip;
  7.     private var foto:String;
  8.     private var foto_up:MovieClip;
  9.     private var foto_down:MovieClip;
  10.     private var mascara:MovieClip;
  11.     private var intervalo:Number;
  12.     private var ejecucion:Boolean;
  13.     //----------------------------
  14.     public function ImgTransition(qRuta:MovieClip, qFoto:String, qX, qY)
  15.     {
  16.         ruta = qRuta;
  17.         clip = ruta.createEmptyMovieClip("ImgTransition", ruta.getNextHighestDepth());
  18.         foto_down = clip.createEmptyMovieClip("foto_down", clip.getNextHighestDepth());
  19.         foto_up = clip.createEmptyMovieClip("foto_up", clip.getNextHighestDepth());
  20.         mascara = clip.createEmptyMovieClip("mascara", clip.getNextHighestDepth());
  21.         foto_up.createEmptyMovieClip("mc", 1);
  22.         foto_down.createEmptyMovieClip("mc", 1);
  23.         mascara.createEmptyMovieClip("mc", 1);
  24.         foto = qFoto;
  25.         loadMovie(qFoto, foto_up.mc);
  26.         loadMovie(qFoto, foto_down.mc);
  27.         clip._x = qX;
  28.         clip._y = qY;
  29.         ejecucion = false;
  30.         //
  31.     }
  32.     //----------------------------
  33.     public function transition(qFoto:String, qMascara:String, qDuracion:Number):Void
  34.     {
  35.         if (!ejecucion)
  36.         {
  37.             if (qFoto != foto)
  38.             {
  39.                 foto = qFoto;
  40.                 //
  41.                 var precarga:MovieClipLoader = new MovieClipLoader();
  42.                 var listener:Object = new Object();
  43.                 listener.onLoadInit = Delegate.create(this, xnLoadInit1);
  44.                 precarga.addListener(listener);
  45.                 precarga.loadClip(qFoto, foto_up.mc);
  46.                 mascara.swf = qMascara;
  47.                 mascara.duracion = qDuracion;
  48.                 foto_up._visible = false;
  49.             }
  50.         }
  51.     }
  52.     private function xnLoadInit1()
  53.     {
  54.         var precarga2:MovieClipLoader = new MovieClipLoader();
  55.         var listener2:Object = new Object();
  56.         listener2.onLoadInit = Delegate.create(this, xnLoadInit2);
  57.         precarga2.addListener(listener2);
  58.         precarga2.loadClip(mascara.swf, mascara.mc);
  59.     }
  60.     private function xnLoadInit2()
  61.     {
  62.         foto_up.setMask(mascara);
  63.         foto_up._visible = true;
  64.         intervalo = setInterval(this, "endTransition", mascara.duracion * 1000);
  65.         ejecucion = true;
  66.     }
  67.     //----------------------------
  68.     private function endTransition():Void
  69.     {
  70.         loadMovie(foto, foto_down.mc);
  71.         foto_up.setMask(null);
  72.         unloadMovie(mascara.mc);
  73.         clearInterval(intervalo);
  74.         ejecucion = false;
  75.     }
  76.     //----------------------------
  77. }

Su uso en el .fla es este:

  1. import img.ImgTransition;
  2. var foto:ImgTransition = new ImgTransition(this, "foto1.jpg", 10, 10);
  3. //
  4. bot1.onRelease = function()
  5. {
  6.     foto.transition("foto1.jpg", "mascara1.swf", 5);
  7. };
  8. bot2.onRelease = function()
  9. {
  10.     foto.transition("foto2.jpg", "mascara2.swf", 3);
  11. };
  12. bot3.onRelease = function()
  13. {
  14.     foto.transition("foto3.jpg", "mascara3.swf", 2);
  15. };
  16. bot4.onRelease = function()
  17. {
  18.     foto.transition("foto4.jpg", "mascara4.swf", 3);
  19. };
  20. bot5.onRelease = function()
  21. {
  22.     foto.transition("foto5.jpg", "mascara5.swf", 2);
  23. };

*UPDATE: Archivos

Compártelo:

Sistema de transiciones entre fotos
Visto 25.335 veces

Currently there are "28 comments" on this Article:

  1. jordi dice:

    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!

  2. admin dice:

    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 fla
    import 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 fla
    import ImgTransition
    //en el .as
    class ImgTransition {...}

  3. josue dice:

    uff muy sencillo.. ahora solo falta aprenderse el script.. muchas gracias

  4. tato dice:

    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.

  5. tato dice:

    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.

  6. jimmy pazos dice:

    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

  7. admin dice:

    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 😉

  8. Mitcheal dice:

    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

  9. admin dice:

    @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.

  10. Raymundo dice:

    me aparece ese error porq:

    1046: No se encontró el tipo o no es una constante en tiempo de compilación: MovieClip.

  11. Paco dice:

    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

  12. Raymundo dice:

    ya solucione eso, me gustaria ver si podrias poner el codigo para q el cambio fuera automatico

  13. zguillez dice:

    @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.

  14. zguillez dice:

    @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.

  15. nombre dice:

    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

  16. julio dice:

    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 !!

  17. admin dice:

    @Julio
    Arreglé el enlace al ejemplo:

    http://www.codigoactionscript.org/files/ImgTransition/ImgTransition.zip

    A ver si te sirve para ver el funcionamiento.

  18. victor diaz dice:

    en el archivo fla imgTransition, ¿se supone que cada boton lleva independiente el código bot.onRelease=function() ?

  19. admin dice:

    @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..

  20. victor diaz dice:

    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…

  21. victor diaz dice:

    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);

  22. victor diaz dice:

    ¿podría conseguir el archivo .fla (el del enlace no se puede abrir) para ver elfuncionamiento?
    gracias

  23. admin dice:

    @victor diaz:
    aqui lo tienes http://www.codigoactionscript.org/files/ImgTransition/ImgTransition.zip
    Necesitarás Flash CS4 para abrirlo

  24. Omi dice:

    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

  25. charletis dice:

    Hola, me podrían facilitar el código con el setInterval integrado? No soy capaz de hacerlo funcionar para que cambie automáticamente. Gracias

  26. Gabriel dice:

    muy buen recurso, me fue de mucha ayuda, gracias

  27. victor diaz dice:

    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.

  28. jakiras dice:

    buen dia, alguien me puede ayudar ocn lo del set interval?

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com