Comunidad de diseño web y desarrollo en internet online

Transición (animación, desvanecimiento...) entre secciones.

Citar            
MensajeEscrito el 13 Ago 2008 11:21 am
Hola,

Supongo que habrá miles de manera. Pero estoy buscando una forma limpia de crear una "animación" entre sección y sección. Cuando tengo 2 sección no tengo problema, pero cuando paso a tener 3, ya empieza a complicarse la cosa.

Que truco usais?

Saludos,

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2008 11:28 am
Depende de como estén estructuradas tus secciones, que método estás utilizando para leer la sección?
Depende de como lo estés haciendo un cambio entre ellas sería más o menos complicado.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 13 Ago 2008 11:54 am
La estructura que uso habitualmente, es llamando las secciones por loadmovie(). Lo que hecho hasta es lo siguiente:

Cada seccion tiene esta funcion:

Código ActionScript :

function cerrarcontenido() {
    this.onEnterFrame = function (){      
        if (this._currentframe != 1){
            this.prevFrame();
        }
      else{
            this.stop();
            delete this["onEnterFrame"];
        }
    };
}


Y cuando desde el index, se pasaba a otra seccion, cerraba la seccion actual recorriendo la misma animacion de dicha secccion pero al revés.

Otro truco para un estructura de secciones llamandose por loadmovie()?
O desde une estructura en la misma linea de tiempo?

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2008 06:39 pm
Entonces parece ser que los loadMovie los estás haciendo en la raiz de esta manera:

Código :

_root.loadMovie("miseccion.swf");


Si es así entonces retomando tu misma función, una vez que el movie regrese hacia atras que te lea el movie correspondiente, por ejemplo tengo abierto un swf externo y quiero llamar a "peli.swf" el que está abierto se debe de animar hacia atras y después abrir a "peli.swf", bueno solamente pásale que swf tiene que llamar como parámetro, algo así:

Código :

function cerrarcontenido(swf:String):Void {
   
   this.onEnterFrame = function():Void {
      
      if (this._currentframe != 1) {
         
         this.prevFrame();
         
      } else {
         
         this.stop();
         
         delete this.onEnterFrame;
         
         this.loadMovie(swf);
      }
   };
}


Ahora llamo a la función diciéndole que me abra "peli.swf"

Código :

cerrarcontenido("peli.swf");


Pues el que está abierto se animará hacia atrás y después leerá a "peli.swf".

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 13 Ago 2008 07:45 pm
Que crack! La versión mejorada de la function que usaba, es genial! Mejorada en sentido, de que no tengo que añadir una function para unloadmovie el clip que rebobina, ni tampoco se superponen (en diferentes profundidades).

Una cosa, con esta version hago lo siguiente, enlazo la seccion así:

Código ActionScript :

on (release){
   _root.cerrarcontenido("seccion1.swf");
}


Pero como indico la raiz en la que quiero que se cargue? Anteriormente, yo enlazaba una seccion así:

Código ActionScript :

on (release){
   _root.contenido.createEmptyMovieClip("contenido_mc01", 1);
   _root.contenido.contenido_mc01._y = 0;
   _root.contenido.contenido_mc01._x = 0;
   _root.contenido.contenido_mc01.loadMovie ("seccion1.swf");
}


En lo anterior podia eligir el contenedor y la raiz de la seccion. Ahora como sería?

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2008 08:11 pm
Si utilizas un contenedor para leer tus movies externos, entonces pásalo como parametro también:

Código :

//---Crear el contenedor de leer los SWF

var contenido:MovieClip = _root.createEmptyMovieClip("contenido", 1);  
contenido._y = 0;  
contenido._x = 0;

//---Crear la función de cargar y descargar

function cerrarcontenido(swf:String, contenedor:MovieClip):Void {
   
   contenedor.onEnterFrame = function():Void {
      
      if (contenedor._currentframe != 1) {
         
         contenedor.prevFrame();
         
      } else {
         
         contenedor.stop();
         
         delete contenedor.onEnterFrame;
         
         contenedor.loadMovie(swf);
      }
   };
}


Y en el botón

Código :

on (release){
   
   _root.cerrarcontenido("seccion1.swf", contenido);
   
}

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 14 Ago 2008 08:04 am
Más o menos entiendo el paso que sigue las funciones y tal, pero no hace nada, no quiero afirmar que el codigo este mal quizas soy yo que lo he estructurado mal.

En el primer frame cargo lo siguiente:

Código ActionScript :

var contenedor:MovieClip = _root.createEmptyMovieClip("contenido", 10);
contenido._y = 0;  
contenido._x = 0;

function cerrarcontenido(swf:String, contenedor:MovieClip):Void {
contenedor.onEnterFrame = function():Void {
   if (contenedor._currentframe != 1) {
     contenedor.prevFrame();
   } else {
     contenedor.stop();
     delete contenedor.onEnterFrame;
     contenedor.loadMovie(swf);
   }
};
}


y enlazo las secciones así:

Código ActionScript :

on (release){
    _root.cerrarcontenido("seccion1.swf", contenido);
}


Y claro, esto lo hago en un archivo que se llama index.swf en el que creo 2 botones <seccion1> y <seccion2>, y creo tambien 2 secciones <seccion1.swf> y <seccion2.swf>.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Ago 2008 01:16 pm
El problema es que en el código que llama a la función no se hace refrencia a donde se encuentra la variable contenido

Código :

on (release){  
     _root.cerrarcontenido("seccion1.swf", _root.contenido);  
}


Mejor no programes encima del botón, si no todo lo que le digas el lo buscará dentro de él en sí. Es mejor que le pongas un nombre de instancia al botón (por ejemplo "boton") y en el primer frame pongas todo esto:

Código :

//---Crear el contenedor de leer los SWF
var cont:MovieClip = _root.createEmptyMovieClip("contenido", 1);
cont._y = 0;
cont._x = 0;

//---Crear la función de cargar y descargar
function cerrarcontenido(swf:String, contenedor:MovieClip):Void {

   contenedor.onEnterFrame = function():Void  {

      if (contenedor._currentframe != 1) {

         contenedor.prevFrame();

      } else {

         contenedor.stop();

         delete contenedor.onEnterFrame;

         contenedor.loadMovie(swf);


      }
   };

}

//---Acción del botón
this.boton.onPress = function():Void{

    cerrarcontenido("seccion1.swf", cont);
 
}

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 15 Ago 2008 09:10 am
He copiado el código tal y como lo haz puesto, pero no funciona, he probado poner un trace("probando") el texto "probando" sale, pero la acción cerrarcontenido("index01.swf", cont); no.

Que puede fallar?

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Ago 2008 01:07 pm
El problema es que la función supone que ya hay un movie leído dentro de cont, puedes hacer dos cosas, o después de crear el movie contenedor leer dentro de él el contenido por default que debe aparecer:

Código ActionScript :

var cont:MovieClip = _root.createEmptyMovieClip("contenido", 1);
cont._y = 0;
cont._x = 0;

cont.loadMovie("seccion1.swf");


O lo más sencillo que es cambiar la condición de la función:

en vez de:

Código ActionScript :

if (contenedor._currentframe != 1) {

}


Poner:

Código ActionScript :

if (contenedor._currentframe > 1) {

}


El problema es que en un movie creado por AS la propiedad de _currentframe es 0, por lo tanto siempre estaba tratando de ejecutar prevFrame() y nunca iba a ser 1 el _currentframe.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 15 Ago 2008 04:31 pm
Perfecto, va perfecto. Muchísima gracias por la aclaración de la última function. Un gran favor que me haz hecho.

Saludos y otra vez gracias !

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Ago 2008 11:50 am
Hola de nuevo, saco de nuevo el tema porque he añadido una precarga a los swf, pero la precarga es externa (he usado ese tutorial). La function cerrarcontenido() y el la precarga externa también me funcionan, pero no a la vez, tengo que usar una funcion u otra.

Si intento que se desvanesca las secciones y que se precargue desde el index, hago lo siguiente:

Código ActionScript :

_root.btn01.onRelease = function() {
   precargador_mcl.loadClip("m_servicios.swf", cont);
   cerrarcontenido("m_inicio.swf", cont);
};


Lo que he añadido del código anterior ha sido el de la precarga, que es el siguiente:

Código ActionScript :

//DECLARACIÓN DE VARIABLES
var precargador_mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();

//CREADOR DEL LISTENER
//Las funciones de los MovieClips son tres esenciales;
/*    onLoadStart (Ejecutada cuando inicia la precarga)
      onLoadProgress (Ejecutada cada vez que avanza la descarga)
     onLoadComplete (Ejecutada cuando la precarga termina)
*/

//Función onLoadStart, asignada al objeto Listener que luego agregaremos a
//nuestro MovieClipLoader El parametro "target_mc" es una referencia al 
//MovieClip de destino
listener.onLoadStart = function(target_mc) {
   //trace("Iniciando");
   //Colocamos la barra de precarga en el escenario con el nombre "barra_mc"
   _root.attachMovie("barra", "barra_mc", _root.getNextHighestDepth());
   //Ubicamos la barra en la mitad del escenario
   _root.barra_mc._y = 0;
   _root.barra_mc._x = 0;
   _root.barra_mc.barra_cien._width = (Stage.width/90);
   //Y nuestra barra esta lista para moverse en el evento onLoadProgress
};

//Función onLoadProgress, es la función clave, tiene tres parametros
//target_mc, quees igual que el anterior, loadedBytes, que nos dice la 
//cantidad de bytes cargados y totalBytes que nos dice la cantidad total
//de bytes de la pelicula en proceso de descarga
listener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
   //trace("En progreso");
   //Declaramos la variable de calculo de porcentaje
   var porcentaje:Number;
   //Calculamos el porcentaje con las variables que le llegan por parametro a la función
   porcentaje = Math.round((loadedBytes*100)/totalBytes);
   //Vamos al frame del porcentaje en nuestra barra de carga
   _root.barra_mc.barra_cien.barra_pro.gotoAndStop(porcentaje);
   _root.barra_mc.text_info.text = porcentaje+"%";
   //Ahora escondemos el objeto de la precarga y lo frenamos
   target_mc._visible=false;
   target_mc.stop();
};

//Función onLoadComplete
listener.onLoadComplete = function(target_mc) {
   //trace("ya");
   //Como ya cargo completo, entonces quitamos la barra
   _root.barra_mc.removeMovieClip();
   //Y mostramos el objeto
   target_mc._visible=true;
   target_mc.play();
};

//ASIGNACIÓN DEL LISTENER AL MOVIECLIPLOADER
//Ahora, todas las funciones que declaramos seran asignadas a
//nuestro MovieClipLoader "precargador_mcl"
precargador_mcl.addListener(listener);



Supongo que la solución sería "fusionar" las 2 funciones, pero para esto estoy muy limitado, alguién sabría?

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Ago 2008 01:44 pm
En este momento estás creando el movieClipLoader y el objeto listener en el timeline, lo mejor es que los insertes dentro de tu función cerrar contenido como variables locales y el vez de loadMovie utilizas entonces movieClipLoader.loadClip, y así de este modo queda igual que antes, cuando presiones el botón la película se animará hacia atrás y después utilizará movieClipLoader.loadClip para leer tu SWF externo.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 19 Ago 2008 03:50 pm
algo así?

Código ActionScript :

//---Crear el contenedor de leer los SWF
var precargador_mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
var contenedor:MovieClip = _root.createEmptyMovieClip("contenedor", 1);
contenedor._y = 0;
contenedor._x = 0;
 
//---Crear la función de cargar y descargar
function cerrarcontenido(swf:String, contenedor:MovieClip):Void {
    contenedor.onEnterFrame = function():Void  {
       if (contenedor._currentframe > 1) {
          contenedor.prevFrame(); 
       } else {
          contenedor.stop();
          delete contenedor.onEnterFrame;
          contenedor.loadClip(swf);
       }
    };
}

//---Acción del botón
this.boton1.onPress = function():Void{
     cerrarcontenido("index01.swf", contenedor);
}
this.boton2.onPress = function():Void{
    precargador_mcl.loadClip("index01.swf", contenedor);
}

//---Precarga
listener.onLoadStart = function(target_mc) {
   _root.attachMovie("barra", "barra_mc", _root.getNextHighestDepth());
   _root.barra_mc._y = Stage.height/2;
   _root.barra_mc._x = Stage.width/2;
};

listener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
   var porcentaje:Number;
   porcentaje = Math.round((loadedBytes*100)/totalBytes);
   _root.barra_mc.gotoAndStop(porcentaje);
   target_mc._visible=false;
   target_mc.stop();
};

listener.onLoadComplete = function(target_mc) {
   _root.barra_mc.removeMovieClip();
   target_mc._visible=true;
   target_mc.play();
};

precargador_mcl.addListener(listener);


El boton1 no funciona, pero el boton2, si.

Por mrxispas

36 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Ago 2008 04:16 pm
No no era a esto a lo que me refería, loadClip necesita 2 parámetros no 1 y es un método de movieClipLoader no de movieClip, no declaraste las variables locales dentro de la función como te había dicho. Mejor te lo escribo.

Código ActionScript :

//---Crear el contenedor de leer los SWF
var cont:MovieClip = _root.createEmptyMovieClip("contenido", 1);
cont._y = 0;
cont._x = 0;

//---Crear la función de cargar y descargar 
function cerrarcontenido(swf:String, contenedor:MovieClip):Void {

   var myLoader:MovieClipLoader = new MovieClipLoader();

   var listener:Object = new Object();

   var barra:MovieClip;

   //---Cuando se empiece a cargar el movie situar la barra

   listener.onLoadStart = function(target:MovieClip):Void  {

      target.stop();
      barra = _root.attachMovie("barra", "barra", _root.getNextHighestDepth());
      
      barra._x = (Stage.width - barra._width) / 2;
      barra._y = (Stage.height -barra._height) / 2
      barra._xscale = 0;
      
   };

   //---Mientras se carga

   listener.onLoadProgress = function(target:MovieClip, loadedBytes:Number, totalBytes:Number):Void  {

      var pCent:Number = Math.round(loadedBytes/totalBytes*100);

      barra._xscale = pCent;

   };

   //---Cuando el movie se haya leido

   listener.onLoadInit = function(target:MovieClip):Void  {

      barra.removeMovieClip();

      target.play();

   };
   
   myLoader.addListener(listener);

   //---Llevar la animación a la inversa
   contenedor.onEnterFrame = function():Void  {

      if (contenedor._currentframe>1) {

         contenedor.prevFrame();

      } else {

         contenedor.stop();

         delete contenedor.onEnterFrame;

         myLoader.loadClip(swf, contenedor);

      }
   };

}
//---Acción del botón 
this.boton.onPress = function():Void  {

   cerrarcontenido("seccion1.swf", cont);

};
//---Acción del botón 
this.boton1.onPress = function():Void  {

   cerrarcontenido("seccion2.swf", cont);

};

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 19 Ago 2008 04:27 pm
Gracias por explicármelo escribiendo, soy incapaz (aún :p) de modificar el código libremente.

Funciona de perla, muchísimas gracias, again y again. Saludos!

Por mrxispas

36 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.