Comunidad de diseño web y desarrollo en internet online

Crear scrollbar más efecto de easing

Muchas veces al visitar otros sitios y al usar un scroll de estos sitios, uno ve el efecto de easing en el scroll y nos da una sensación a suavidad muy buena, es agradable que las cosas "scrolleen" con ese suavizado tan particular, bueno asi que me puse mano a la obra para poder tener el mio, pero quise hacerlo de tal manera de que lo pueda reutilizar SIEMPRE, que ejecute una función determinada en cualquier nivel de mi película.

Para lograrlo a esta función debemos de pasarle un par de parámetros, veamos...

Primero vamos a hacer un include de un ActionScript (este archivo es necesario para que funcione el scroll porque tiene todo el código necesario), se lo pueden bajar de aquí y ponen ese archivo en la misma carpeta del .FLA.
Hacemos por única vez un INCLUDE en nuestro fla en el _ROOT

#include "scroll_easyn.as"

Luego en nuestro fla cada vez que quisieramos generar éste scroll solo vamos a convocar a una función que se encuentra dentro del archivo que incluimos ... de ésta manera:

_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado);

Bueno la función requiere un par de parámetros:

nivel: Es en donde vamos a generar el scroll por ejemplo: "_root.", _root.mcCont, etc.

clip: Este parametro es la ruta del CLIP CONTENEDOR, o sea el nombre de instancia del clip en donde dentro del que tenemos nuestro contenido que queremos scrollar. (Es importante que en nivel, y clip quede algo como por ejemplo: Nivel: "_root.mc" Clip: "_root.mc.contenedor")

anchoScroll: Es un valor numérico en el cual le seteamos el ancho que va a tener la barrita de scroll, si el valor es menor a 3, el valor va a ser por default 3.

Suavizado (Opcional) Valor numérico en donde seteamos la velocidad del suavizado cuando frenamos el scroll, si obviamos éste parámetro el valor por default es 10.

Bueno eso es todo pueden ver una prueba, acá de como funciona.
Los sources se los pueden descargar desde aquí.

Entonces cada vez que quisieramos usar el scroll solo escribimos ésto:

var nivel = _root.mc
var clip = _root.mc.contenedor
var anchoScroll= 8
var suavizado = 3
_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado );

O bien directamente:

_root.generarScrollEasyn(_root.mc, _root.mc.contenedor, 8, 3);

El scroll funciona tanto para texto, enmascarado con "SETMASK" o bien para texto e imágenes.

Saludos y espero que les sirva
dQ (Digital Designer)

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

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

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