Usando el método getBounds
actionScript avanzado, After-hours | Enero 22nd, 2004Versión para imprimir
Este fla te resultará bastante útil para hacer scrolls con imágenes o textos, resumiéndolo de una manera sencilla, lo que he hecho, es crear un clip de pelí cula que contiene la imágen o el texto hara hacer el scroll, he usado el método getBounds para definir el área donde se permite el scroll y hitTest para comprobar si el cursor se encuentra sobre la zona scrollable; también he creado un clip de pelí cula que enmascara la animación, de modo que permita texto dinámico.
Los elementos necesarios para la realización del fla son:
1. un clip de pelí cula contenedor ‘mc_miclip’ donde attachamos las imágenes o textos.
2. un clip de pelí cula para controlar la zona scrollable ‘mc_zona’
3. un clip de pelí cula para enmascarar la animación ‘mc_mascara’ y he utilizado la API de dibujo de flash para crear la máscara.
// – defino la zona scrollable de la pantalla clipBounds = mc_zona.getBounds(_root);// – defino máximo desplazamiento superior top = clipBounds.yMin+(mc_zona._height-mc_miclip._height);
// – defino máximo desplazamiento inferior bottom = clipBounds.yMin;
// – la división entre la zona superior e inferior medio = mc_zona._height/2;
// – cuantos pí xels se mueven velocidad = 5;
// – un clip de pelí cula ‘mascara’ this.createEmptyMovieClip(“mascara”, 1000); mc_miclip.setMask(mascara); with (mascara) { lineStyle(1, 0xff0000, 100); moveTo(clipbounds.xMin, clipBounds.yMin); beginFill(0xff0000, 100); lineTo(clipbounds.xMax, clipBounds.yMin); lineTo(clipbounds.xMax, clipBounds.yMax); lineTo(clipbounds.xMin, clipBounds.yMax); lineTo(clipbounds.xMin, clipBounds.yMin); endFill; }
// – proceso this.onEnterFrame = function() {
// – si el cursor está dentro de la zona scrollable if (mc_zona.hitTest(_root._xmouse, _root._ymouse)) { // – subir if (_root._ymouse>clipBounds.yMin+medio) { if (mc_miclip._y>top) { mc_miclip._y -= velocidad; } } // – bajar if (_root._ymouse<clipBounds.yMin+medio) { if (mc_miclip._y<bottom) { mc_miclip._y += velocidad; } } } };
Arhivo fuente (fla) aquí .
Xavi gracias por el dibujo, está genial!
Enero 23rd, 2004 at 11:59 am
Estupendo Script
Mi humilde aportación serí a modificar la función para hacer la velocidad variable y que la imagen se ajustase con precisión a la zona scrollable.
this.onEnterFrame = function() {
// – si el cursor está dentro de la zona scrollable
if (mc_zona.hitTest(_root._xmouse, _root._ymouse)) {
velocidad_relativa = (((velocidad*2)*(_root._ymouse-clipBounds.yMin))/(clipBounds.yMax-clipBounds.yMin))-(velocidad);
if (velocidad_relativa0 && mc_miclip._y+velocidad_relativa>clipBounds.yMin) {
velocidad_relativa = clipBounds.yMin-mc_miclip._y;
}
mc_miclip._y += velocidad_relativa;
}
};
Saludos.
Enero 23rd, 2004 at 12:20 pm
Lo siento pero estoy intentando pegar el código de nuevo y ni siquiera al previsualizarlo se ve bien. Por lo visto casca en un signo -menor que-.
si alguien sabe a que es debido podré solventarlo y volver a subir el codigo.
Saludos.
Enero 23rd, 2004 at 12:21 pm
Hola Sergio, en principio hice algo parecido, pero en este tipo de scroll no se aprecia el fx , más bien le da un efecto de retardo.
Yo suelo usar esta fórmula(que es + ó -):
mc_miclip._y = (fin3+velocidad*mc_miclip._y)/velocidad+1;
saludos
Enero 23rd, 2004 at 12:44 pm
Yo sin embargo no tengo ninguna sensación de retardo. quizás es por la máquina que la actualizé hace poco y va que es una gloria.
El efecto de velocidad variable se acusa con un valor de velocidad mas alto que el del script. Súbelo por ejemplo a 10.
Pero si no puedo pegar el code completo, malamente se puede comprobar. No sé por que peta. Ya en el Preview se come varias lí neas.
Mi idea era conseguir que en un punto determinado el clip dejara de moverse para poder apreciar cualquier detalle que tuviese, de lo contrario no hace mas que moverse para arriba y para abajo.
Saludos
Enero 23rd, 2004 at 1:26 pm
Pues si, tienes razón, el efecto si funciona, ahora solo faltarí a controlar que el scroll no vaya + allá de el mí nimo y máximo establecido.
Me lo miraré, me gusta como queda.
Saludos
Por cierto, es raro que te pete.
Enero 23rd, 2004 at 2:26 pm
Hola Tonilopez
Ya se porque petaba.
Los signos menorque y mayor que los identificaba como partes de tags y claro, se desarmaba todo.
Aqui tienes el code.
this.onEnterFrame = function() {
// – si el cursor está dentro de la zona scrollable
if (mc_zona.hitTest(_root._xmouse, _root._ymouse)) {
velocidad_relativa = (((velocidad*2)*(_root._ymouse-clipBounds.yMin))/(clipBounds.yMax-clipBounds.yMin))-(velocidad);
if (velocidad_relativa<0 && (mc_miclip._y+mc_miclip._height)+velocidad_relativa<clipBounds.yMax)
{
velocidad_relativa = -((mc_miclip._y+mc_miclip._height)-clipBounds.yMax);
}
if (velocidad_relativa>0 && mc_miclip._y+velocidad_relativa>clipBounds.yMin)
{
velocidad_relativa = clipBounds.yMin-mc_miclip._y;
}
mc_miclip._y += velocidad_relativa;
}
};
Saludos
Agosto 4th, 2004 at 4:56 pm
Antes que nada felicitaciones por la web, en este ejemplo no he podido comprender el tema de la mascara, ¿porqué si pego los mismos fotogramas de tu fla a otro fla, deja de funcionar el efecto?
¿En donde está ‘mc_mascara’?
Agosto 4th, 2004 at 7:34 pm
Hola Gabriel,
Imagino que trabajas con flash MX 2004, este fla se creó par MX: Puedes hacer que funcione siguiendo estos pasos:
1. Archivo configuración de publicación
2. Selecciona la pestaña SWF
3. Versión : Flash Player 6
4. Versión de action Script: 1.0
El clip de pelicula ‘mascara’ se crea dinámicamente:
this.createEmptyMovieClip("mascara", 1000);
mc_miclip.setMask(mascara);
with (mascara) {
lineStyle(1, 0xff0000, 100);
moveTo(clipbounds.xMin, clipBounds.yMin);
beginFill(0xff0000, 100);
lineTo(clipbounds.xMax, clipBounds.yMin);
lineTo(clipbounds.xMax, clipBounds.yMax);
lineTo(clipbounds.xMin, clipBounds.yMax);
lineTo(clipbounds.xMin, clipBounds.yMin);
endFill;
}
Saludos
Febrero 15th, 2005 at 4:33 pm
uffffffffffffffffffffff….ayer estaba super embalado por que no podia hacer que un menu tipo galeria de imagenes, casi que no lo hago estoy en el centro y mas tarde lo publico para ver si ustedes me pueden ayudar a optimizarlo por que yo no se nada de actionscript me ha dado muy duro. Pero hay voy entendiendo le doy mil gracias al creador de este sitio por que ayer me pase desde las 6:00 p.m hasta las 8:05 am trabajando sobre el interactivo que estoy haciendo. Pero la pieza clave fue el codigo que copie de esta pagina………….thanks
Febrero 15th, 2005 at 4:39 pm
esta bueno muy bueno, se pueden vincular las variables para el eje en _y tambien?
no afecta el movimiento en _x?