Comunidad de diseño web y desarrollo en internet

Cómo crear un ScrollBar con Easing en Flash

Si bien este es un tip ya hecho, por lo general para hacer este efecto se emplean clases y/o prototypos que lo hacen bastante engorroso para alguien que recién se inicia, por lo que pensé en hacer uno muy simple y con un resultado elegante.
lo que vamos a hacer es un scroll como este:



Para ello vamos a crear tres MovieClips instanciados como: "dragger", "txt", y "mascara", ahora vamos con el código:

Primero declaramos y seteamos algunas variables

Código :

var posy:Number = 5;
//variables que van a limitar el movimiento del drag
izquierda = dragger._x;
superior = 0;
derecha = dragger._x;
inferior = mascara._height - dragger._height;


Luego iniciamos el drag

Código :

dragger.onPress = function(){   
   //le asignamos las variables
   startDrag(this,false,izquierda,superior,derecha,inferior);
}

terminamos el drag

Código :

dragger.onRelease = dragger.onReleaseOutside = function(){
   stopDrag();
}


Un poquito de efecto rollOver rollOut

Código :

dragger.onRollOver = function(){
   this._alpha = 75;
}
dragger.onRollOut = dragger.onReleaseOutside = function(){
   this._alpha = 100;
}


Ahora vamos con el clip "txt" que como es solo un MovieClip puede tener imágenes, animaciones, otros Clips, etc..
primero añadimos la mascara al texto o clip

Código :

txt.setMask(mascara);

despues vamos con el easing

Código :

txt.onEnterFrame = function(){
   scrolled = (this._height - (mascara._height /1.3)) / (mascara._height - dragger._height);
   
   //nueva posicion en y 
   posy =- dragger._y * scrolled;
   
   //cambia la velocidad de 6 o mayor, para un scrol mas lento; y menor, para uno mas rápido
   this._y -= (this._y - posy) /6;
}

la variable scrolled básicamente se fija cuanto del texto ha sido "scroleado" a través de la mascara y limita el movimiento del dragger en relación a esta información, de esta manera puedes cambiar el tamaño de tu texto o clip y la variable se actualizara a si misma

descargar *fla

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate