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
Por FeNtO el 20 de Agosto de 2007
solo añade al para el stop tambien el evento dragout si no continua scroll
Por ayukawa el 22 de Agosto de 2007
ayukawa :
claro, como dice R4f43l, en el panel de propiedades, tienes una opcion q dice "nombre de instancia", ahi nombras a tu clip como te venga en gana, para despues manipularlos desde la linea de tiempo sin tener q asignar acciones en el panel de acciones de cada elemento, y obtener una programacion mas ordenada
Por evcorreu el 28 de Agosto de 2007
El problema está en el hecho de que sobreescribes dos vecer el envento onReleaseOutside:
Primero aquí
Código :
dragger.onRelease = dragger.onReleaseOutside = function(){ stopDrag(); }...y luego aquí:
Código :
dragger.onRollOut = dragger.onReleaseOutside = function(){ this._alpha = 100; }por lo que cuando haces onRelease() y luego onReleaseOutside() funciona perfecto, pero al hacerlo después del onRollOver ya no funciona el stopDrag().
Mi propuesta:
Código :
dragger.onRelease = function(){ stopDrag(); } dragger.onRollOut = function(){ this._alpha = 100; } //He eliminado el onReleaseOutside en ambos eventos. //Y lo coloco como un evento aparte que llama a los otros dos (ahorrando código y haciéndolo más usable) dragger.onReleaseOutside = function(){ this.onRollOut(); this.onRelease(); }Como sea que entiendo que este es un tip para quienes se inician en Flash, creo que sería mejor hacer la corrección en el post original y eliminar este para evitar confusiones.
Por otro lado, te felicito
Pen HolderDuke Uthyr Ian Hölder por tan buen y sencillo tip.Herr C. Von Frick :
Pen HolderDuke Uthyr Ian Hölder por tan buen y sencillo tip.oh, gracias por vuestro aporte estimado Herr C. Von Frick, no habia percatadome del error
Por evans el 21 de Septiembre de 2007
Por Cesar el 30 de Octubre de 2007
Por Cesar el 30 de Octubre de 2007
Por nestoreha el 06 de Noviembre de 2007
Por jaja el 06 de Noviembre de 2007
Por ninotchka el 14 de Noviembre de 2007
Gracias!
y me loqueo esta linea con =- , existe ese operador
posy =- dragger._y * scrolled;
Pienso q sería mas claro seria así:
posy = -dragger._y * scrolled;
ninotchka_blog :
Gracias!
cambias "_y" por "_x" y ya
Otaku RzO :
y me loqueo esta linea con =- , existe ese operador
posy =- dragger._y * scrolled;
Pienso q sería mas claro seria así:
posy = -dragger._y * scrolled;
Por mayra el 24 de Noviembre de 2007
Por Emiliano el 24 de Noviembre de 2007
Tengo mi MC txt en el eje x135 e y173. No entiendoooo... por qué no funciona? gracias.
mayra :
en esta linea:
Código :
osea q mientras mas grande sea el valor, mas lento hara la interpolacion
---------------------------------------------------------------------------------------------------------------
Emiliano :
Tengo mi MC txt en el eje x135 e y173. No entiendoooo... por qué no funciona? gracias.
no solo debes cambiar la propiedades, tb debes cambiar lo valores de las variables q limitan el dragg:
Código :
Por Emiliano el 25 de Noviembre de 2007
Funciona hermoso. Pero tengo un problema y creo que es con el calculo que hace en SCROLLED. El MC txt se va a la izquierda, y el DRAGGER se sigue de largo.
http://www.calle3.com.ar/scroll/boceto.jpg
En qué tengo que meter mano para que funcione correctamente? Gracias miles.
Por Andromeda_Erick el 28 de Noviembre de 2007
Código :
Esto para que el dragger no se me fuera del limite que yo tenia... se me iba hacia la izq. y se salia de mi marco para el dragger.... tambien, no pasaba de cierto limite a la derecha.
Con esas modificaciones, me inicia donde lo necito y termina en mi punto final [se mueve de izq a der (no se nada de codigo, asi que todo puede este malo)]
Ahora, el clip TXT apenas paso el archivo fla a swf se me mueve de der. a izq llegando el ultimo boton casi que al centro... como evitar que se pase todo... se supone tiene que empezar de derecha a izq. sin moverse.
Gracias!
Por Emiliano el 29 de Noviembre de 2007
Por Felipe el 01 de Diciembre de 2007
Por Felix el 16 de Diciembre de 2007
eso si una consulta.. cuando carga el mc este automaticamente lo scrolea unas 20 lineas mas arriba... y no me muestra toda la informacion... es extraño..
gracias!
Por Cris el 19 de Diciembre de 2007
A mí tmb me pasó, pero borré ese clip y lo volví a crear poniendo el registro del mismo en la esquina superior izquierda, este lo especificas en la ventana dnd asignas nombre de símbolo y comportamiento... tmb, el contenido del txt, lo bajé un poco, es decir, no lo dejé exactamente dnd debe empezar, sino unos 50 pixeles más abajo... mmm... masomenos... con eso, ya me funcionó bien... mil gracias por este aporte!!!..
Por Edu el 18 de Enero de 2008
tengo un problema, y es que resulta, que el contenido que quiero que haga el scroll horizontal, proviene de un archivo XML.
En concreto son una batería de imágenes, y al iniciar el swf, la primera imagen, se corta por la izq.
Supongo que el error está en el cálculo scrolled, porque el drag comienza justo 30 px a la derecha, que es lo que ocupa mi drag, y creo que dragger._width lo desplaza hacia ese lado.
Aun así, le he restado a esa ecuacion los 30 pixeles de los que hablo.... pero ni aun asi.
espero haberme explicado bien.
Muchisimas gracias a todas vuestras aportaciones, porque me ha salido casi a la primera.... menos esto claro
Por Platypuz el 24 de Enero de 2008
Tengo una consulta,inclui un scroll en una pagina cuyo texto es bastante extenso, y el scroll corta los ultimos parrafos de este.
Como hago para q mi texto salga completo? q valores debo modificar y asi me permita ingresar mas texto..
De antemano muchas gracias x la ayuda.
Ahi esta el codigo del scroll:
scrolling = function (easing) {
var moveSpeed:Number = 5;
var easingSpeed:Number = 10;
var scrollHeight:Number = scrollbg._height;
// amount of scroll
var scrollable:Number = contentMain._height-maskedView._height;
var initContentPos:Number = contentMain._y;
// the drag positions that are possible for the dragger
var left:Number = scrollbg._x;
var top:Number = scrollbg._y;
var right:Number = scrollbg._x;
var bottom:Number = scrollbg._height-dragger._height scrollbg._y;
// checking if the content is even scrollable
if (scrollable<0) {
dragger._visible = false;
btnUp.enabled = false;
btnUp._alpha = 50;
btnDown._alpha = 50;
scrollbg._alpha = 50;
btnDown.enabled = false;
return;
}
// current position updater
function updateContentPos() {
var percent_scrolled:Number = (dragger._y-btnUp._height)/(scrollHeight-dragger._height);
// instead of setting the _y property directly, we simple set newY
// that way we can adjust how we handle the new Y coordinate we'd like to move to
contentMain.newY = Math.round(initContentPos-(percent_scrolled*scrollable));
}
// position to move to
contentMain.onEnterFrame = function() {
if (!easing || easing == undefined) {
this._y = this.newY;
} else {
this._y = Math.round((this.newY-this._y)/easingSpeed);
}
};
dragger.onPress = function() {
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
updateContentPos();
};
};
dragger.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnUp.onPress = function() {
this.onEnterFrame = function() {
dragger._y = Math.max(top, dragger._y-moveSpeed);
updateContentPos();
};
};
btnUp.onDragOut = function() {
delete this.onEnterFrame;
};
btnUp.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onPress = function() {
this.onEnterFrame = function() {
dragger._y = Math.min(bottom, dragger._y moveSpeed);
updateContentPos();
};
};
btnDown.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onDragOut = function() {
delete this.onEnterFrame;
};
// user offset to update
updateContentPos();
//checking where the mouse was
areaJump = function () {
var maxHeight = 120;
var mouse = _ymouse;
var maxMouse = 179;
var minMouse = 20;
var mouseLimits = maxMouse-minMouse;
var mousePer = (mouse)/maxMouse;
var posY = mousePer*mouseLimits;
moveDragger(posY);
};
//moving the dragger and content
function moveDragger(where) {
dragger._y = where;
updateContentPos();
}
scrollbg.onRollOver = function() {
this.useHandCursor = false
}
scrollbg.onRelease = function() {
areaJump();
};
};
// turn easing to true or false
scrolling(true);
// set a dynamic mask
contentMain.setMask(maskedView);
Por JJV el 27 de Enero de 2008
Ejemplo:
http://www.tablerovirtual.com/ejemplos/EjemploScroller.fla
Por JJV el 27 de Enero de 2008
this.onMouseWheel = function(incre) {
dragger._y -= incre*6;
if (dragger._y>inferior)
{
dragger._y=inferior;
}
if (dragger._y<superior)
{
dragger._y=superior;
}
};
Mouse.addListener(this);
Por JJV el 27 de Enero de 2008
En el codigo de ese MovieClip, detectar el click del raton y actualizar la posicion del dragger.
Se ve mejor en el ejemplo...
Por ELB el 19 de Febrero de 2008
Hice el tutorial, pero en horizontal. Todo (en cuanto el diseño): GENIAL.
El problema, es que lo estoy usando como menu con botones. Los botones, al ser pulsados, no me llevan donde quiero!. ¿Como puedo hacer para que funcione?, hay que añadir algo al codigo?.
Gracias!
Por bamer el 21 de Febrero de 2008
Gracias y saludos.
Por Ramon el 06 de Marzo de 2008
Por Highlord el 12 de Marzo de 2008
subi este ejemplo a rapidshare para que se lo bajen y editen a su gusto es un scroll con texto que puede cambiar de tamaño a disposicion de los usuarios.
http://rapidshare.com/files/98848804/Scroll_y_selecci_n_tama_o_texto.zip.html
espero que esten familiarizados con rapidshare y se lo puedan descargar, tienen que ir donde dice free y luego de esperar una cuenta regresiva, colocar el codigo que les aparecera para que empiece la descarga.
Saludos!!!
Por ariel el 21 de Marzo de 2008
esa es mi consulta, muchas gracias y saludos.
ariel_blog :
esa es mi consulta, muchas gracias y saludos.
descarga el fla y todas tu preguntas seran contestadas
Por daniel el 27 de Marzo de 2008
y otra cosa ¿como hacer para que se mueva con el MouseWheel pero cuando posicione el mouse sobre la mascara?
Por guillerkrax el 30 de Abril de 2008
Ayuda please. Yo sigo comparando con el fla
Por Alex el 02 de Mayo de 2008
Yo tengo una barra con imagenes que pasan de un lado a otro de la web, y quiero que cuando pongas el raton encima de la barra esta solamente se pare, ¿Que codigos tengo que poner?
La barra se llama, "myBar".
Espero que podais ayudarme, muchas gracias,
Saludos.
Por guillerkrax el 05 de Mayo de 2008
Por guillerkrax el 05 de Mayo de 2008
on(press){
myBar.stop
}
Por control z el 25 de Mayo de 2008
El script modificado por mi es un poco tosco ya que no tengo todavía mucha experiencia a la hora de depurar y optimizar actionscrip,seguramente habrá maneras más sencillas para hacer esto mismo, pero espero que les sirva de ayuda a los que tengan tan poca experiencia como yo y por supuesto corrigan lo que consideren conveniente.
Tambien he anñadido el script para la rueda del ratón de JJVBlog.
Bueno una vez más gracias a todos los que aportan cosas como esta ya que poquito apoquito voy apendiendo un poco más every days. Yo espero con este modesto aporte empezar a devolver un poco de lo que he aprendido
Aquí les dejo el script:
//----------------------------------
//scrip de scroll con easin de PenHolder(www.cristalab.com)
//con algunas modificaciones de contrlZ
//-------------------------------------------------------------------------------
//En este caso he hecho que la barra vertical debajo
//del dragger se adapte a la altura de la mascara y la he
//convertido en clip de pelicucal con el nombre
//de instancia bar, es importante que el clip bar quede debajo
//del clip dragger
//colocamos el clip barra
//posicion x de clip bar = posicion x de clip mascara
// + ancho del clip mascara +ancho del clip bar
bar._x=(mascara._x+mascara._width)+bar._width;
//posicion y del clip bar = posicion y del clip mascara
bar._y=mascara._y;
//altura del clip bar = altura del clip mascara
bar._height=mascara._height;
//pongo el clip bar con un alpha al 50%
bar._alpha=50;
//colocamos el draguer en funcion de como hemos
//colocado el clip bar en sus posiciones x e y
dragger._x=bar._x;
dragger._y=bar._y;
//adapto el ancho del dragger al ancho
//del clip bar para que casen uno encima del otro
dragger._width=bar._width;
//colocamos los botones para subir y bajar
//le asigno la misma posición x que el clip bar
up._x=bar._x;
//lo coloco encima del clip bar enn la posicion y
up._y=bar._y-up._height;
//hago lo mismo con el boton para bajar
down._x=bar._x+down._width;
down._y=(bar._y+bar._height)+down._height;
//-------------------------------------------------
//scrol con easin por penHolder
//declaramos variables
var posy:Number = 5;
//variables q van a limitar el movimiento del drag
izquierda = dragger._x;
superior = 0;
derecha = dragger._x;
inferior = mascara._height - dragger._height;
//-------------------------------------------------------------------------------
//iniciamos el drag
dragger.onPress = function(){
//le asignamos las variables
startDrag(this,false,izquierda,superior,derecha,inferior);
this._alpha=50;
}
//terminamos el drag
dragger.onRelease = dragger.onReleaseOutside = function(){
stopDrag();
this._alpha=100;
}
//-----------------------------------------------------------------------------
//acciones para el clip bar para que cuando clike sobre ella
//el clip dragger se desplace a esa posición y por ende
//se desplaze el clip txt
bar.onPress=function(){
trace(_ymouse);
//si la posicion del mouse al clikar es menor o igual
// que la posicion y del clip bar + el alto del clip dragger
if(_ymouse<=(this._y+dragger._height)){
//la posicion del clip dragger es = a la posicion y del clip bar
dragger._y=this._y;
}
else{
//si no es asi la posicion y del clip dragger es =
//a la posicion y del mouse al clikar - la altura del clip dragger
//así el clip dragger no se saldrá ni por encima ni por debajo
//del clip bar
dragger._y=_ymouse-dragger._height;
}
}
//------------------------------------------------------------------------------
//acciones para subir y bajar
up.onPress=function(){
this.onEnterFrame=function(){
//si la posicion del dragger en y es >= que la posicion y del clip bar
//desplazo el dragger hacia arriba
if(dragger._y>=bar._y){
dragger._y -=5;
}else{
// si no elimino el onEnterFrame
delete this.onEnterFrame;
}
}
}
down.onPress=function(){
this.onEnterFrame=function(){
//si la posicion y del clip dragger es <= que la altura del clip bar
//- la altura del clip dragger muevo el clip dragger hacia abajo
if(dragger._y<=bar._height-dragger._height){
dragger._y +=5;
}else{
//si no borro el onEnterFrame
delete this.onEnterFrame;
}
}
}
//al soltar el boton elimino el on EnterFrame
down.onRelease=function(){
delete this.onEnterFrame;
}
up.onRelease=function(){
delete this.onEnterFrame;
}
//seteamos la mascara al texto o clip
txt.setMask(mascara);
//aca el codigo para el easing
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;
}
//--------------------------------
//para que detecte la rueda del raton por JJVBLOG
this.onMouseWheel = function(incre) {
dragger._y -= incre*6;
if (dragger._y>inferior)
{
dragger._y=inferior;
}
if (dragger._y<superior)
{
dragger._y=superior;
}
};
Mouse.addListener(this);
//----------------------------------
Por Dani el 27 de Mayo de 2008
Por cecilia el 01 de Julio de 2008
Por ger251 el 25 de Julio de 2008
Se pueden hacer las dos cosas verdad???
Gracias
Código :
import mx.transitions.Tween; import mx.transitions.easing.*; //------------------------------------------------------------------------------- var posy:Number = 5; var left:Number = dragger._x; var top:Number = 0; var right:Number = dragger._x; var bottom:Number = mascara._height-dragger._height; var scrolled:Number; var friction:Number = 1.5; var fade:Tween; var movin:Tween; var wheel:Object = new Object(); // dragger.onPress = function() { // startDrag(this, false, left, top, right, bottom); }; dragger.onRelease = function() { // stopDrag(); }; dragger.onRollOver = function() { // this.useHandCursor = false; fade = new Tween(this, "_alpha", Strong.easeOut, 100, 50, 1, true); }; dragger.onRollOut = function() { // fade.yoyo(); }; dragger.onReleaseOutside = function() { // this.onRollOut(); this.onRelease(); }; // txt.setMask(mascara); // function movement():Void { // txt.onEnterFrame = function() { // scrolled = (this._height-(mascara._height/1.3))/(mascara._height-dragger._height); posy = -dragger._y*scrolled; // movin = new Tween(this, "_y", Strong.easeOut, this._y, posy, friction, true); }; } movement(); // wheel.onMouseWheel = function(incressment):Void { // dragger._y -= incressment*6; if (dragger._y>bottom) { dragger._y = bottom; } if (dragger._y<top) { dragger._y = top; } }; Mouse.addListener(wheel);Por trigo0 el 17 de Agosto de 2008
Felicitaciones y muchas gracias por la ayuda
Por CarlosCharlie el 04 de Septiembre de 2008
Por Cassas el 10 de Septiembre de 2008
Lo hico con loadvars pero me sale esto:
onData=%5Btype%20Function%5D
Sin el scroll me trae el texto perfecto y sube y baja al hacer el barrido de texto o con el boton de scroll del mouse que debo hacer para que se vea el texto y tenga un sroll personalizado?
Por andresmaxit el 14 de Septiembre de 2008
Espero que se entienda.
Desde ya, muchas gracias!
Por martin el 17 de Septiembre de 2008
Alguien sabe como hacer eso???????
Gracias!
Por Electrotoon el 22 de Septiembre de 2008
He adaptado el código (el que figura como código mejorado + scrollwheel) pero sucede una cosa: cuando exporto la película sólo con el scroll, sin más elementos funciona ok, pero cuando lo hago acompañado de otros elementos interactivos que tiene la escena, el easing va a una velocidad lentísima, casi se congela. No sé a qué puede ser debido, tenéis alguna idea?
Gracias, un saludo:
Imer-blog :
es porq no se detiene el EnterFrame, prueba modificando la funcion movement:
Código :
function movement():Void { // txt.onEnterFrame = function() { // scrolled = (this._height-(mascara._height/1.3))/(mascara._height-dragger._height); posy = -dragger._y*scrolled; // movin = new Tween(this, "_y", Strong.easeOut, this._y, posy, friction, true); }; if (posy == Math.round(txt._y)) { delete txt.onEnterFrame } }Por TioASS el 23 de Octubre de 2008
mi maiL: tioass@hotmail.com
Mil gracias!
Por andres el 02 de Noviembre de 2008
saludos
Andres
Por Scroll, añadir un s el 23 de Diciembre de 2008
Gracias!!
Por Poner el stop para q el 24 de Diciembre de 2008
}
//terminamos el drag
dragger.onRelease = dragger.onReleaseOutside = function(){
stopDrag();
}
//cambiamos el alpha al poser el cursor
dragger.onRollOver = function(){
this._alpha = 75;
stopDrag()
}
//y la restauramos al quitarlo
dragger.onRollOut = dragger.onReleaseOutside = function(){
this._alpha = 100;
stopDrag()
}
Por David Castillo el 09 de Enero de 2009
Por hAZ el 19 de Enero de 2009
Por hAZ el 19 de Enero de 2009
Por luiggi el 28 de Enero de 2009
Abrazos desde Guayaquil..
Código :
dw_mc.onPress = function( Void ) { this.onEnterFrame = function( Void ) { dragger._y = Math.min( inferior, dragger._y + 5 ); }; }; dw_mc.onRelease = function( Void ) { delete this.onEnterFrame; }; up_mc.onPress = function( Void ) { this.onEnterFrame = function( Void ) { dragger._y = Math.max( superior, dragger._y - 5 ); }; }; up_mc.onRelease = function( Void ) { delete this.onEnterFrame; };boton up_mc direccion hacia arriba
boton dw_mc direccion hacia abajo
Suerte.
Por veronika_8a el 07 de Febrero de 2009
Por Damian el 31 de Marzo de 2009
Hasta me hacen llorar de la alegria
gracias penHolder por este Tip, estoy hechando mano de ello y la verdad es que se agradece el aporte
He estado probando el scroll y funciona correctamente. Únicamente encuentro la función .onMouseWheel que no termina de funcionar. Estoy trasteando con el código pero no termino de dar con ello.
(el código original es tal cual viene insertado aquí)
alguien sabe dónde puede estar el error?¿?
Saludos y Gracias!!
Por Mendieta el 30 de Abril de 2009
GRACIAS
Por dgraphicmx el 13 de Mayo de 2009
dgraphicmx@yahoo.com.mx
Por Roxana el 24 de Junio de 2009
Por ncabargas el 20 de Octubre de 2009
ya que al poner ese codigo en vez del original si bien funciona el scroll del mouse deja de funcionar esta indicacion de boton.
Saludos??
Código :
import mx.transitions.Tween; import mx.transitions.easing.*; //------------------------------------------------------------------------------- var posy:Number = 5; var left:Number = dragger._x; var top:Number = 0; var right:Number = dragger._x; var bottom:Number = mascara._height-dragger._height; var scrolled:Number; var friction:Number = 1.5; var fade:Tween; var movin:Tween; var wheel:Object = new Object(); //------------------------------------------------------------------------------- dragger.onPress = function() { // startDrag(this, false, left, top, right, bottom); }; dragger.onRelease = function() { // stopDrag(); }; dragger.onRollOver = function() { // this.useHandCursor = false; fade = new Tween(this, "_alpha", Strong.easeOut, 100, 50, 1, true); }; dragger.onRollOut = function() { // fade.yoyo(); }; dragger.onReleaseOutside = function() { // this.onRollOut(); this.onRelease(); }; //------------------------------------------------------------------------------- txt.setMask(mascara); //------------------------------------------------------------------------------- function movement():Void { // txt.onEnterFrame = function() { // scrolled = (this._height-(mascara._height/1.3))/(mascara._height-dragger._height); posy = -dragger._y*scrolled; // movin = new Tween(this, "_y", Strong.easeOut, this._y, posy, friction, true); }; } movement(); //------------------------------------------------------------------------------- wheel.onMouseWheel = function(incressment):Void { // dragger._y -= incressment*6; if (dragger._y>bottom) { dragger._y = bottom; } if (dragger._y<top) { dragger._y = top; } }; Mouse.addListener(wheel);Por nicolas el 21 de Octubre de 2009
Pero tengo la misma pregunta que ncabargas, usando el codigo optimizado (última versión) al pasar por arriba del scroll no se reconoce como botón, por lo que en buscadores como safari que no reconoce el scroll del mouse es muy dificil determinar que es un item "movil". hay alguna manera de hacer que se reconozca como boton o sea que al pasar por arriba aparezca la mano? trate de poner un boton invisible bajo el scroll pero tampoco lo reconoce.
Muchas gracias ....
Por david arriaga el 10 de Noviembre de 2009
Por francisco el 23 de Diciembre de 2009
Muchas gracias
Por CheeseBurger el 28 de Enero de 2010
Lo unico si, es que no puedo lograr la siguiente etapa que quiero lograr. Necesito que la imagen que se "scrolea" se mueva mientras uno no esta "scroleando", se entiende? Mientras la ventana este inactiva, quiero que la imagen se mueva sola, pero al empesar a hacerle scroll que se detenga. No se como detener el movieclip, ademas que queda mal ubicado (queda muy a la izquierda) y queda con un espacio generado por el movimiento. El scroll no se adapta al porte del movieclip D:
Por jorge diaz el 12 de Febrero de 2010
gracias
Por johnrestrepo el 19 de Febrero de 2010
gracias y felicitaciones por el tutorial!
Por Cristina el 21 de Febrero de 2010
Por haydee el 22 de Febrero de 2010
Por lk el 02 de Marzo de 2010
Por Laura el 06 de Marzo de 2010
el efecto que muestra con el scroll está genial, aunque tengo algunas dudas
el movie clip txt es donde va el texto?, es decir creo una caja de texto multinea dinámico, le agrego texto, lo convierto en movie clip y le asigno como nombre de instancia txt?
y mi otra duda es, el movie clip con nombre de instancia mascara, cómo debo generarlo, es la barra larga gris claro de tu ejemplo?
De antemano muchas gracias y felicitaciones
Por Lucas el 22 de Marzo de 2010
Porque para que funcione el scroll de la rueda, si o si hay que clickear por lo menos una vez!
Por robin_blood el 08 de Junio de 2010
Estoy usando el código final corregido, pero veo un poco lento el easing para lo que yo necesito.¿Cómo puedo acelerar el scroll?
Gracias!
Por Roberto Tapia el 13 de Julio de 2010
Por Marcelo el 21 de Julio de 2010
Imperdible aporte para los que recién nos iniciamos!!!!
Por JinGT el 13 de Noviembre de 2010
es pero les sirva
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Rectangle;
//-------------------------------------------------------------------------------
//declaramos variables
var posy:Number = 5;
//variables q van a limitar el movimiento del drag
izquierda = dragger.x;
superior = 0;
derecha = 0;
inferior = mascara.height - dragger.height;
//-------------------------------------------------------------------------------
//iniciamos el drag
dragger.addEventListener(MouseEvent.MOUSE_DOWN,
function(){
//le asignamos las variables
var rect:Rectangle=new Rectangle(izquierda,superior,derecha,inferior);
dragger.startDrag(false,rect);//false,izquierda,superior,derecha,inferior);
});
//terminamos el drag
dragger.addEventListener(MouseEvent.MOUSE_OUT,
function(){
this.alpha = 100;
//dragger.stopDrag();
});
//cambiamos el alpha al poser el cursor
dragger.addEventListener(MouseEvent.MOUSE_OVER ,
function(){
this.alpha = 75;
});
//y la restauramos al quitarlo
dragger.addEventListener(MouseEvent.MOUSE_UP ,
function(){
this.alpha = 100;
dragger.stopDrag();
});
//-----------------------------------------------------------------------------
//this.addEventListener(MouseEvent.MOUSE_MOVE ,
//function(){
// trace(dragger.draw)
// trace("Mueve");
//});
//seteamos la mascara al texto o clip
//txt.setMask(mascara);
txt.mask=mascara
//aca el codigo para el easing
txt.addEventListener(Event.ENTER_FRAME,EventEnterFrame);
function EventEnterFrame(e:Event){
// esta variable basicamente se fija cuanto del texto ha sido "scroleado"
// a travez de la mascara y limita el movimiento del dragger en relacion a
// esta informacion, de esta manera puedes cambiar el tamaño de tu texto o clip
// y la variable se actualizara a si misma
var scrolled:Number = (txt.height - (mascara.height /1.5)) / (mascara.height - dragger.height);
trace("(mascara.height /1.3) " + (mascara.height /1.3))
trace("this.height " + this)
trace("(this.height - (mascara.height /1.3)) " + (this.height - (mascara.height /1.3)) )
trace("(mascara.height - dragger.height) " + (mascara.height - dragger.height))
trace("Siii " + scrolled )
//nueva posicion en y
posy =- dragger.y * scrolled;
trace("Siii2 " + posy )
//cambia la velocidad de 6 o mayor, para un scrol mas lento; y menor, para uno mas rápido
txt.y -= (txt.y - posy) /6;
}
Por JinGT el 13 de Noviembre de 2010
use el stage enves de this en la funcion MOUSE_UP
reemplase esta funcion
//y la restauramos al quitarlo
this.addEventListener(MouseEvent.MOUSE_UP ,
function(){
this.alpha = 100;
dragger.stopDrag();
});
por esta otra solo cambia el stage por this es todo, saludos que lo disfruten
//y la restauramos al quitarlo
stage.addEventListener(MouseEvent.MOUSE_UP ,
function(){
this.alpha = 100;
dragger.stopDrag();
});
Por maria el 02 de Diciembre de 2010
Por antonio el 04 de Diciembre de 2010
Por manuel el 10 de Febrero de 2011
Por patologico el 28 de Abril de 2011
Por dgraphicmx el 24 de Junio de 2011
si alguien sabe como solucionarlo le dejo mi correo. gracias.
contacto@danielhosoya.com
Por Gabriela el 30 de Junio de 2011
Por Django el 24 de Julio de 2011
Por franco el 27 de Julio de 2011
Por Aldo el 12 de Octubre de 2011
good job!!!
Por logosa el 15 de Noviembre de 2011
MIL GRACIAS A SU CREADOR!!!!!!!!