Scroll flash con botones (con topes)

Hola a todos otra vez,

Tengo un scroll flash (as2), que funciona muy bien. Lo estoy usando en la web: www.masscultura.com

Es el scroll que está a la derecha de la revista, con un botón arriba y abajo para elegir la revista que quieres ver. Quiero añadir a los botones una función más. Como es un código que no está desarrollado por mi, me gustaría que me ayude un experto.

Quiero conseguir hacer que, si pulso el botón de abajo y llegue a la primera foto de publicación de la revista, el botón desaparezca, quedando sólo el de arriba lógicamente y lo mismo en viceversa.

Dejo el código:

Código :

import caurina.transitions.Tweener;

// Setup buttons

this.bBackward._alpha = 70;
this.bBackward.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.bBackward.onRollOut = this.bBackward.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.bBackward.onRelease = function() {
   this._parent.scrollList(-1);
};

this.bForward._alpha = 70;
this.bForward.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.bForward.onRollOut = this.bForward.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.bForward.onRelease = function() {
   this._parent.scrollList(+1);
};

// Setup data
this.currentPosition = 0;
this.maxPosition = 7;

// Moving functions
this.scrollList = function(p_offset:Number): Void {
   this.gotoPosition(this.currentPosition + p_offset);
};

this.gotoPosition = function(p_position:Number): Void {
   // Goes to a certain position
   p_position = p_position < 0 ? 0 : p_position > this.maxPosition ? this.maxPosition : p_position;
   if (p_position != this.currentPosition) {
      this.currentPosition = p_position;
      Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:0.6, transition:"easeoutback"});
   }
};

this.stop();

Gracias a todos! Espero puedan echarme un cable!.
Kolobo

esto debe funcionar, suponiendo que tus botones que envian al incio y al final se llaman inicio_mc y final_mc respectivamente, quedria esto:

Código :

//Tu funcion modificada
this.gotoPosition = function(p_position:Number, animacion:Boolean): Void {
   // Limitar pero usando Math
   p_position = Math.min( Math.max( p_position, this.maxPosition ), 0 );
   if ( p_position != this.currentPosition ) 
   {
      this.currentPosition = p_position;
      if( animacion != false )
      {
         Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:0.6, transition:"easeoutback"});
      }
      else
      {
         //Esta linea no usa animacion
         this.itemList._y = 27 - (this.currentPosition * 248);
         //Esta linea es con amiacion pero dura 3 segundos
         //Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:3, transition:"easeoutback"});
      }
   }
};

this.inicio_mc._alpha = 70;
this.inicio_mc.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.inicio_mc.onRollOut = this.inicio_mc.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.inicio_mc.onRelease = function() {
   this._parent.gotoPosition( 0, false );
};

this.final_mc._alpha = 70;
this.final_mc.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.final_mc.onRollOut = this.final_mc.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.final_mc.onRelease = function() {
   this._parent.gotoPosition( this.maxPosition, false );
};

ups! esta linea esta mal:

//p_position = Math.min( Math.max( p_position, this.maxPosition ), 0 );
p_position = Math.max( Math.min( p_position, this.maxPosition ), 0 );

Que rapidez! Gracias LongeVie, lo probaré.

y para hacer desaparecer los clip, seria esta la modificacion:

Código :

this.gotoPosition = function(p_position:Number, animacion:Boolean): Void {
   // Limitar pero usando Math
   p_position = Math.max( Math.min( p_position, this.maxPosition ), 0 );
   if ( p_position != this.currentPosition ) 
   {
      this.currentPosition = p_position;
     if( this.currentPosition == 0 )
     {
        this.bBackward.enabled = false;
        Tweener.addTween(this.bBackward, {_alpha:0, time:0.6});
     }
     
     if( this.currentPosition == this.maxPosition )
     {
        this.bForward.enabled = false;
        Tweener.addTween(this.bForward, {_alpha:0, time:0.6});
     }
     
     if( this.currentPosition > 0 && !this.bBackward.enabled )
     {
        this.bBackward.enabled = true;
        Tweener.addTween(this.bBackward, {_alpha:70, time:0.6});     
     }
     
     if( this.currentPosition < this.maxPosition && !this.bForward.enabled )
     {
        this.bForward.enabled = true;
        Tweener.addTween(this.bForward, {_alpha:70, time:0.6});
     }
     
      if( animacion != false )
      {
         Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:0.6, transition:"easeoutback"});
      }
      else
      {
         //Esta linea no usa animacion
         this.itemList._y = 27 - (this.currentPosition * 248);
         //Esta linea es con amiacion pero dura 3 segundos
         //Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:3, transition:"easeoutback"});
      }
   }
};

LongeVie, no me funciona, tal vez podrías ser más exacto con el código o no sé...
He intentado muchas formas y no hace nada, se queda congelado.

Si te sirve de pista, el boton es un Mc (mc_botones), es decir que es un mismo boton para ir hacia arriba y hacia abajo, pero luego en la escena le pongo dif. nombre de instancia al mismo Mc: bBackward y bForward
mc_botones no tiene efectos, sólo es un fotograma.

Porcierto el código que me diste lo pegué asi, no hace nada, sólo el efecto de alpha:

Código :

import caurina.transitions.Tweener;


//Tu funcion modificada
this.gotoPosition = function(p_position:Number, animacion:Boolean): Void {
   // Limitar pero usando Math
   p_position = Math.max( Math.min( p_position, this.maxPosition ), 0 );
   if ( p_position != this.currentPosition ) 
   {
      this.currentPosition = p_position;
      if( animacion != false )
      {
         Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:0.6, transition:"easeoutback"});
      }
      else
      {
         //Esta linea no usa animacion
         this.itemList._y = 27 - (this.currentPosition * 248);
         //Esta linea es con amiacion pero dura 3 segundos
         //Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:3, transition:"easeoutback"});
      }
   }
};

this.bForward._alpha = 70;
this.bForward.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.bForward.onRollOut = this.bForward.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.bForward.onRelease = function() {
   this._parent.gotoPosition( 0, false );
};

this.bBackward._alpha = 70;
this.bBackward.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.bBackward.onRollOut = this.bBackward.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.bBackward.onRelease = function() {
   this._parent.gotoPosition( this.maxPosition, false );
};
this.stop();

Gracias por tu tiempo!

Ok, bueno, lo que puse ahi es para tener 4 botones, arriba, abajo, primero, ultimo. si en tu caso no quieres poner los botones primero y ultimo, ps no pongas la parte del codigo que habla de primero_mc y ultimo_mc, retomando tu caso y lo que pediste de que, si es el primer item, no se vea el boton arriba y si es el ultimo item, no se vea el boton abajo, quedaria esto:

Código :

import caurina.transitions.Tweener;

// Setup buttons

this.bBackward._alpha = 70;
this.bBackward.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.bBackward.onRollOut = this.bBackward.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.bBackward.onRelease = function() {
   this._parent.scrollList(-1);
};

this.bForward._alpha = 70;
this.bForward.onRollOver = function() {
   Tweener.addTween(this, {_alpha:100, time:0.6});
};
this.bForward.onRollOut = this.bForward.onReleaseOutside = function() {
   Tweener.addTween(this, {_alpha:70, time:0.6});
};
this.bForward.onRelease = function() {
   this._parent.scrollList(+1);
};

// Setup data
this.currentPosition = 0;
this.maxPosition = 7;

// Moving functions
this.scrollList = function(p_offset:Number): Void {
   this.gotoPosition(this.currentPosition + p_offset);
};

this.gotoPosition = function(p_position:Number): Void {
   // Limitar pero usando Math
   p_position = Math.max( Math.min( p_position, this.maxPosition ), 0 );
   if ( p_position != this.currentPosition ) 
   {
      this.currentPosition = p_position;
     if( this.currentPosition == 0 )
     {
        this.bBackward.enabled = false;
        Tweener.addTween(this.bBackward, {_alpha:0, time:0.6});
     }
     
     if( this.currentPosition == this.maxPosition )
     {
        this.bForward.enabled = false;
        Tweener.addTween(this.bForward, {_alpha:0, time:0.6});
     }
     
     if( this.currentPosition > 0 && !this.bBackward.enabled )
     {
        this.bBackward.enabled = true;
        Tweener.addTween(this.bBackward, {_alpha:70, time:0.6});     
     }
     
     if( this.currentPosition < this.maxPosition && !this.bForward.enabled )
     {
        this.bForward.enabled = true;
        Tweener.addTween(this.bForward, {_alpha:70, time:0.6});
     }
     Tweener.addTween(this.itemList, {_y:27 - (this.currentPosition * 248), time:0.6, transition:"easeoutback"});
   }
};

this.stop();

Porfavor informame sobre los resultados.

LongVie, calidad!!

Pero el único detalle que falta lo puedes ver entrando en la web.

Creo que el valor inicial, para que no aparezca el boton de arriba, sólo le hace caso cuando muevo los items hacia abajo y luego vuelvo a subirlos, y me interesa que no se vea cuando se carga, ya que está ya en la última foto. Es decir que cuando cargue la película pues que no se vea el botón de arriba hasta que pulse el de abajo.

Más: El fla, es una columna grande de fotos una bajo la otra, cuando publico una revista nueva, la primera foto es la última, y el boton de arriba (bBackward) hace que suba para ver la primeras fotos, como puedes apreciar.

Ya falta poco.

Te agradezco el código de antes, me servirá para probar si decido cambiar.

kolobo escribió:

Je, no entendi muy bien esa parte, pero bueno, lo que haria seria crear una funcion de refresh, que se ejecute cuando sea necesario, por ejemplo, para incializar los valores o cuando se modifique las posiciones de otra forma, ya sea agregar revistas dinamicamente, etc.

bueno esta seria la funcion basandonos en las variables currentPosition y maxPosition son valores correctos estabelcidos dentro de un rango valido:

Código :

this.refrescar = function( Void ):Void
{
   this.bBackward.enabled = this.currentPosition > 0;
   this.bForward.enabled = this.currentPosition < this.maxPosition;
   this.bBackward._alpha = ( this.bBackward.enabled )? 70 : 0 ;
   this.bForward._alpha = ( this.bForward.enabled )? 70 : 0 ;
}
this.refrescar();

Bastara con poner esto al final de todo el codigo que teniamos para arreglar el problema del valor incial.



Ps. Uso la propiedad _alpha en lugar de _visible para tener compatibilidad con la Tween.

Perfecto!!

Mil gracias LongeVie!! Eres increíblemente bueno!!

Ya lo pongo en la web!

Si alguien quiere el fla que me diga. se lo mando en un zip. También funciona en vertical, fácil de modificar.

Saluldos y suerte con todo!

Que padre que ya tengas el problema resuelto, siempre es bueno ayudar.

Hasta el siguiente Post, ciao!

*errata

Si alguien quiere el fla que me diga. se lo mando en un zip. También funciona en scroll HORIZONTAL, fácil de modificar.

Saluldos y suerte con todo![/quote]
[email protected] (dejo el correo)

Hola,

He usado ya la manera de hacer que se mueva el scroll a partir de un mismo Mc instanciandolo con bForward y bBackward. Necesito ahora hacerlo con dos Mc diferentes, el mismo sistema que el de antes pero con dos botones diferentes.

Dejo el codigo:

Código :

//preload
_lockroot = true;

//movimientos
import caurina.transitions.Tweener;

// Botones arriba abajo
this.bBackward._alpha = 70;
this.bBackward.onRollOver = function() {
Tweener.addTween(this, {_alpha:100, time:0.6});
};

this.bBackward.onRollOut = this.bBackward.onReleaseOutside = function() {
Tweener.addTween(this, {_alpha:70, time:0.6});
};

this.bBackward.onRelease = function() {
this._parent.scrollList(-6);
};

this.bForward._alpha = 70;
this.bForward.onRollOver = function() {
Tweener.addTween(this, {_alpha:100, time:0.6});
};

this.bForward.onRollOut = this.bForward.onReleaseOutside = function() {
Tweener.addTween(this, {_alpha:70, time:0.6});
};

this.bForward.onRelease = function() {
this._parent.scrollList(+6);
};

//posicionamiento
this.currentPosition = 0;
this.maxPosition = 5;

//Movimientos del boton
this.scrollList = function(p_offset:Number): Void {
this.gotoPosition(this.currentPosition + p_offset);
};

this.gotoPosition = function(p_position:Number): Void {
// Limitar pero usando Math
p_position = Math.max( Math.min( p_position, this.maxPosition ), 0 );
if ( p_position != this.currentPosition ) 
{
this.currentPosition = p_position;
if( this.currentPosition == 0 )
{
this.bBackward.enabled = false;
Tweener.addTween(this.bBackward, {_alpha:0, time:0.6});
}
     
if( this.currentPosition == this.maxPosition )
{
this.bForward.enabled = false;
Tweener.addTween(this.bForward, {_alpha:0, time:0.6});
}
     
if( this.currentPosition > 0 && !this.bBackward.enabled )
{
this.bBackward.enabled = true;
Tweener.addTween(this.bBackward, {_alpha:70, time:0.6});     
}
     
if( this.currentPosition < this.maxPosition && !this.bForward.enabled )
{
this.bForward.enabled = true;
Tweener.addTween(this.bForward, {_alpha:70, time:0.6});
}
Tweener.addTween(this.itemList, {_y:0 - (this.currentPosition * 560), time:2, transition:"easeinoutquad"});
}
};

this.stop();
this.refrescar = function( Void ):Void
{
   this.bBackward.enabled = this.currentPosition > 0;
   this.bForward.enabled = this.currentPosition < this.maxPosition;
   this.bBackward._alpha = ( this.bBackward.enabled )? 70 : 0 ;
   this.bForward._alpha = ( this.bForward.enabled )? 70 : 0 ;
}
this.refrescar();

Gracias!

Hola, que quieres hacer que?, jejeje, el sistema actual tiene una "tira de imagenes" que se mueven hacia arriba y hacia abajo, si llega a tope desaparece el boton indicado, probado, funciona, ahora que es lo que necesitas?

a) que con los mismos 2 botones se muevan 2 tiras de imagenes diferentes
b) que con 2 botones diferentes se mueva la misma tira de imagenes.

La b) que con dos botones diferentes muevas la misma tira de imagenes, que haga lo mismo que ahora pero bForward y bBackward sean distintos, para el mismo scroll, sólo eso.

mmm, bueno, pero entonces lo que tambien tenemos que ver es que si por ejemplo con el segundo boton se llego al tope, los dos botones desaparezcan no es asi? porque en caso contrario bastaria con simplemente duplicar codigo.

Si el tema es que si llega al tope se va un boton y muestra otro.
Lo quiero poner uno justo encima del otro, como un selector.

1)Le doy a bforward, 2)desvanecimiento, 3) me baja el scroll hasta el tope, 4) donde estaba el bforward pues aparece bbackward y lo que pasa si le doy a este boton es lo mismo a la inversa.

ok, dejame ver si entendi, a lo mejor no necesitas otros 2 botones mas.

presionamos la flecha de abajo hasta llegar al fondo, normalmente la flecha desaparece y entonces uno tiene que ir a presionar la flecha que va hacia arriba, entonces aparce la flecha de abajo y asi nuevamente hasta que se llega al tope, ahora lo que tu quieres es que presionamos la flecha de abajo hasta llegar al fondo, entonces la flecha hacia abajo desaparece y en su lugar aparece una nueva flecha hacia arriba, entonces se ven dos flechas hacia arriba??

Aver, lo tienes en www.masscultura.com, hay un scroll a mano derecha, ese como ves solo hay un botón al principio pero al pulsar hacia abajo apracece el de arriba y cuando llegas al final desaparece el de abajo y lo mismo para cuando subes. En realidad no son dos (MC_boton) distintos, es uno, pero como son triángulos pues sirven tanto para izq, como para derc, como para arriba y abajo, lo que si son distintos son los nombres de instancias.

Bueno yo lo que quiero es hacer uno cuadrado y otro circular como lo hago, estuviste explicandome como era... Yo te digo de verdad que no se como es. Si tu me dices que duplicando se consigue pues bien, si no pues me dices si no puedes y me busco la vida por otro lado.

Venga Gracias otra vez!!

dibujar un cuadrado y uno circular? esto se esta poniendo raro.