Tema: Scroll easing más suave
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/03/2010, 05:46
Ric_78
 
Fecha de Ingreso: marzo-2010
Mensajes: 3
Antigüedad: 14 años, 1 mes
Puntos: 0
Scroll easing más suave
Hola a tod@s!!

Es mi primer post aqui y espero que no el último ya sea para aprender o echar una mano en la medida de lo posible.

Hace unos días que también estuve posteando en otros foros tratando de encontrar solución (sin respuesta aún) a lo siguiente:

Tengo un scroll de este tipo:
http://www.mijostudio.com/scroll/scroll.swf

Hecho a partir de un magnífico scroll (a mi parecer) que encontré buscando tutoriales por la web. Está modificado para que pueda moverse con la rueda del ratón y lleva, dentro del contenido un botón para, a modo de comprobación, ver como se actualiza cuando aparece nuevo texto de golpe.

Solo hay un problemilla, el famoso easing. No sé en que se diferencia exactamente en el código (no soy experto en AS) con otros modos de desaceleración con easing que he visto. Pero por mucho que trate de modificar la variable velocidad no obtengo el resultado que quiero: un easing más fino, más suave o mejor dicho que "provoque" una desaceleración/aceleración más progresiva y lenta (como píxel a píxel).

Aquí os dejo el código por si queréis echarle un vistazo:

Código actionscript: 
Ver original
  1. function scrollUpdate() {
  2.     var contenido = this._parent.contenido;
  3.     if (contenido._height<this.bg._height) {
  4.         this._visible = false;
  5.     } else {
  6.         this._visible = true;
  7.     }
  8.     var pxls_cont = contenido._height-this.bg._height;
  9.     var pxls_scroll = this.bg._height-this.barra._height;
  10.     var alfa = pxls_cont/pxls_scroll;
  11.     var vel = 2;
  12.     var desty = -this.barra._y*alfa+this.hxini;
  13.     desty = Math.floor(desty);
  14.     contenido._y = Math.floor((contenido._y*vel+desty)/(vel+1));
  15. }
  16. function startScroll() {
  17.     yfin = this._parent.bg._height-this._height;
  18.     this.startDrag("", this._x, 0, this._x, yfin);
  19. }
  20. function stopScroll() {
  21.     this.stopDrag();
  22. }
  23. function moveScroll(dir) {
  24.     if (dir == "stop") {
  25.         delete controlador["onEnterFrame"];
  26.     } else {
  27.         var barra = this.barra;
  28.         var vel = 4;
  29.         if (dir == "arriba") {
  30.             var lim = 0;
  31.             vel = vel*-1;
  32.         } else {
  33.             var lim = this.bg._height-barra._height;
  34.         }
  35.     }
  36.     controlador.onEnterFrame = function() {
  37.         if (dir == "abajo") {
  38.             if (barra._y+vel<lim) {
  39.                 barra._y = barra._y+vel;
  40.             } else {
  41.                 barra._y = lim;
  42.             }
  43.         } else if (barra._y+vel>lim) {
  44.             barra._y = barra._y+vel;
  45.         } else {
  46.             barra._y = lim;
  47.         }
  48.     };
  49. } 
  50.  
  51. var wheel:Object = new Object();
  52. wheel.onMouseWheel = function(incressment):Void  { 
  53.    barra._y -= incressment*5; 
  54.    if (barra._y>190) { 
  55.       barra._y = 190; 
  56.    } 
  57.    if (barra._y<0) { 
  58.       barra._y = 0; 
  59.    } 
  60. }; 
  61. Mouse.addListener(wheel);
  62.  
  63. this.hxini = this._parent.contenido._y;
  64. this.onEnterFrame = scrollUpdate;
  65. this.barra.onPress = startScroll;
  66. this.barra.onRelease = stopScroll;
  67. this.barra.onReleaseOutside = stopScroll;
  68. this.createEmptyMovieClip("controlador", 100);
  69. sup.onPress = function() {
  70.     moveScroll("arriba");
  71. };
  72. sup.onRelease = inf.onRelease=function () {
  73.     moveScroll("stop");
  74. };
  75. inf.onPress = function() {
  76.     moveScroll("abajo");
  77. };
  78. inf.onRelease = function() {
  79.     moveScroll("stop");
  80. };
  81. barra.useHandCursor = false;
  82. sup.useHandCursor = false;
  83. inf.useHandCursor = false;
Muchísimas gracias por la paciencia!

Saludos!!