Para el efecto de deslizamento de esta película, he utilizado la clase 'mc_tween2.as' de Fernando Zeh, puedes descargarla en: MC Tween
Para dar un efecto de desplazamiento suave a los contenidos del sitio, utilizamos la clase mc_tween2.as, puedes utilizar cualquier otra clase como por ejemplo las de Laco o simplemente trabajar con las propiedades del objeto (en este caso _y) directamente, mas abajo, veremos como. Lo primero que escribimos en nuestro fla es el #include a la clase.
-
#include "mc_tween2.as"
Como habras podido observar en el ejemplo, tanto la barra de scroll como los contenidos de la película adaptan su posición y tamaño a los del navegador del navegador. Para manejar los eventos producidos por el cambio de tamaño del escenario en nuestra película, utilizamos el método Stage.onResize
-
Stage.align = "TL";
-
Stage.scaleMode = "noScale";
Es recomendable declarar las variables que se van a utilizardurante el proceso al principio del código (por claridad).
-
var izq;
-
var sup;
-
var der;
-
var inf;
-
var porcentaje;
-
var y;
Las variables que declaro a continuación, permiten que pueda hacer referencia a un objeto desde cualquier parte del código omitiendo la ruta y tambien me ahorra escribir algunas palabras extra.
-
var scrollBar_mc = scrollBar_mc;
-
var drag_mc = scrollBar_mc.drag_mc;
-
var bar_mc = scrollBar_mc.bar_mc;
El cálculo que se aplica en la función drag() es muy sencillo:
1. Se calcula el porcentaje de la posición del botón de arrastre en base a la altura del escenario.
2. Se aplica el porcentaje calculado anteriormente a la película que contiene lo datos.
Por ejemplo. Cuando el botón de arrastre está en _y = 0 el porcentaje es = 0, por tanto, la pelicula contenedora (la que drageamos) tambien lo estará¡. Siempre hay que tener en cuenta, que cuando se hace scroll hacia arriba, hay que añadir la altura del botón de arrastre 'drag_mc' a los cálculos del porcentaje, si n lo hicieramos así, el scroll no llegaría hasta el final.
-
function drag () {
-
if (drag_mc._y> Stage.height / 2) {
-
porcentaje = Math.round (((drag_mc._y + drag_mc._height) / Stage.height) * 100);
-
} else {
-
porcentaje = Math.round ((drag_mc._y / Stage.height) * 100);
-
}
-
y = Math.round ((porcentaje / 100) * (holder_mc._height - Stage.height));
-
holder_mc.ySlideTo (-y, 2, "easeOutQuart");
-
updateAfterEvent ();
-
}
Cada vez que cambia el tamaño del navegador, hay que recalcular tamaños y posiciones, de manera que los objetos se ajusten, la barra de scroll siempre a la derecha, los contenidos centrados, etc.
Una de las comprobaciones que realiza esta función, es la de observar si es necesario activar el scroll; si la película tiene una atura inferior a la altura del navegador, la repuesta es no, pero cabe la posibilidad de que el usuario modifique el tamaño de la ventana del navegador, la función se encargará de activar el scroll.
-
function stageResize () {
-
bar_mc._x = drag_mc._x = Stage.width - bar_mc._width;
-
bar_mc._height = Stage.height;
-
drag_mc._height = (Stage.height / 100) * 25;
-
izq = Stage.width - drag_mc._width;
-
sup = 0;
-
der = Stage.width - drag_mc._width;
-
inf = Stage.height - (drag_mc._height);
-
holder_mc._x = (Stage.width - holder_mc._width) / 2;
-
// -- Se comprueba si es necesario activar scroll
-
if (holder_mc._height <Stage.height) {
-
scrollBar_mc._visible = false;
-
} else {
-
scrollBar_mc._visible = true;
-
}
-
}
Necesitamos un listener que envie notificación de los cambios sufridos por el navegador a la función 'stageResize()'.
-
myListener = new Object ();
-
myListener.onResize = stageResize;
-
Stage.addListener (myListener);
Cuando se empieza a ejecutar la película, se llama a la función stageResize ya que se desconoce el estado del navegador en ese momento, es posible que flash necesite adapatar la película a las condiciones del navegador que pueden estar impuestas por la resolución de pantalla o el tamaño del navegador.
-
stageResize ();
Eventos de botón aplicados al botón de arrastre. Se ha utizadola función setInterval() para llamar a la función stageResize(), de esta manera se consigue un flujo de informacion continuo. Cuando se deja el arrastre, se desactiva setInterval().
-
drag_mc.onRollOver = function () {
-
this.colorTransformTo (-100, 256, -100, 256, -100, 256, 100, 0, 0.2, "linear");
-
};
-
drag_mc.onRollOut = function () {
-
this.colorTransformTo (100, 0, 100, 0, 100, 0, 100, 0, 0.2, "linear");
-
};
-
// --
-
drag_mc.onPress = function () {
-
idInterval = setInterval (drag, 1);
-
this.startDrag (false, izq, sup, der, inf);
-
};
-
drag_mc.onRelease = drag_mc.onReleaseOutside = function () {
-
clearInterval (idInterval);
-
stopDrag ();
-
};
Por último, se ha añadido funcionalidad al scroll de la rueda del Mouse. Se controla que la barra de arrastre no supere los límites superior e inferior de la película. Para determinar el sentido del deslizamiento de la rueda, me he servido del parámetro delta, este devuelve un valor negativo cuando se sube (hacer rodar la ruweda hacia abajo) y positivo cuando se baja(hacer rodar la rueda hacia arriba).
-
mouseListener = new Object ();
-
mouseListener.onMouseWheel = function (delta) {
-
if (!scrollBar_mc._visible) {
-
return;
-
}
-
if (drag_mc._y <= sup && delta> 0 || drag_mc._y>= inf && delta <0) {
-
return;
-
} else {
-
drag_mc._y -= delta * 10;
-
drag ();
-
}
-
};
-
Mouse.addListener (mouseListener);
Nota
Si por algún motivo, no deseas utilizar la clase mc_tween, puedes substitutir la línea
-
holder_mc.ySlideTo (-y, 2, "easeOutQuart");
Por
-
holder_mc._y = -y
Descarga Browserscroll Files.zip
Browserscroll Files.zip se ha descargado 1,374 veces.
Loading ...
Hola:
El codigo está genial, como sería para una vez el scroll bajado subiera de manera automatica? alguién sabe comor??
Chenkiu
Muy bueno el codigo y el scroll se ve estupendo. Ve pero tengo una pregunta como hago para crear un scroll asi para una ventana de texto
me podrías colaborar en eso please.
muchas gracias
Dani, para subir el scroll tienes que poner en 0 la posicion _y de drag_mc y de holder_mc. Yo lo hago así: (con las clases de Laco)
drag_mc.tween("_y", 0, 1, "easeOutQuad");
holder_mc.tween("_y", 0, 1, "easeOutQuad");
Toni, tengo una duda, al usar las clases de Laco en vez de las de Zeh Fernando resulta que todo funciona igual excepto el movimiento al arrastrar el scroll, que no se mueve mientras arrastras como en tu ejemplo, si no cuando dejas de arrastrar.
Cambié esta linea:
holder_mc.ySlideTo (-y, 2, "easeOutQuart");
por esta otra:
holder_mc.tween("_y", -y, 1, "easeOutSine");
¿Alguna idea de qué estoy haciendo mal?
Ojalá pudieras contestarme, si no lo pregunto por el foro.
Genial el ejemplo, como siempre
Un saludo
Hola handepora,
no sé que puede ser, acabo de probar con la clase de laco y el mismo método que tu y funciona bien.
¿Que versión de laco tweens utilizas?
Si quieres te envio un ejemplo.
saludos
Hola Toni, muchisimas gracias por contestar tan rápido.
Te agradecería que me enviaras el ejemplo para ver si me funciona.
Tengo la versión 1.2.0 y también tengo instalado el fuse kit, no se si tendrá algo que ver.
Un saludo
gracias handepora!! me va de lujo!!
Hola, mi pregunta es que pasa cuando el "Alto" es variado; www.pierinc.com, en este sitio dependiendo del "Alto" de lo que muestras en el stage aparece o se alarga el scroll bar..
Hola Gonzalo,
el funcionamiento del scroll es el siguiente:
Si lo que contiene es más corto que la altura del navegador, no se muestra.
Si lo que muestra es mas largo que la altura del navegador se muestra el scroll.
Dale un vistazo a esto tambien:
http://www.after-hours.org/2007/03/08/scroll-component/
Saludos
A ver, tengo un problemilla, el script va de lujo, es justo lo que estaba buscando, pero tengo un problema, al abrirse la pagina esta en la home y el texto es poco, con lo cual el scroll no esta, pero al entrar en una seccion, el texto aumenta, pero es scroll no sale porque ha detectado el tamaño del stage en el frame anterior, como puedo hacer para que rellame a la funcion y el scroll se adapte bien??
Un ejemplo
http://www.adhemas.com/
Toni, yo no quiero usar la clase mc_tween, reemplazo la linea como explicás al final del tuto pero el scroll, si bien se desliza, no hace bajar el contendio de la página. Tengo que borrar o agregar algo más?
Saludos y gracias!!
Hola Aldo, tienes que substituir:
por
Saludos
como puedo hacer que el scroll sea controlable por la rueda del raton, he probado con on mousewheel pero no he conseguido asignarlo..?
Hola Domot,
el ejemplo ya funciona con la rueda del ratón:
http://www.after-hours.org/blog/2005/actionscript/browserScroll/
¿Utilizas PC o Mac?
saludos
Mac, y no hay manera.
Pero tienes razon lo he probado en pc y funciona a la perfeccion.
Si sabes de alguna manera de que funcione con el mac tambien ya estara redondo
En efecto, con Mac hay ese problema. He encontrado un enlace que te puede ser útil:
http://blog.pixelbreaker.com/2006/11/08/flash/swfmacmousewheel/
saludos
muy bueno saludos