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;

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

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

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

txt.setMask(mascara);

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;
}

muy buen aporte

solo añade al para el stop tambien el evento dragout si no continua scroll
Por: FeNtO

Muy bueno, solo añade lo que ya comentó FeNtO.
Por: Carloz.Yanez

bien, esto pensaba hacerlo tutorial, pero F tarda mucho, mucho en publicarlos
Por: penHolder

pregunta pregunta a que se refieren con movieclips instanciados?
Por: ayukawa

Es el nombre que se le asigna a los Movie Clip.. Es caracteristico ya que permite identificarlos en Action Script, y no puede haber dos Movie Clip con el mismo nombre de instancia, si no se genera un error.
Por: R4f43l

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: penHolder

sencillisimo!! muy buen tip
Por: evcorreu_blog

Para resolver el problema planteado sobre el onReleaseOutside, me he permitido hacer un par de modificaciones menores al código de nuestro estimado Duke Uthyr Ian Hölder:

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 Holder Duke Uthyr Ian Hölder por tan buen y sencillo tip.
Por: The Fricky!

Herr C. Von Frick :

oh, gracias por vuestro aporte estimado Herr C. Von Frick, no habia percatadome del error
Por: penHolder

porke cuando cambio el texto, y este sería más largo, el scrool me baja demasiado? como evito ke no baje tanto hasta ke se pierda todo?
Por: evans_blog

Muy bueno el scroll, gran aporte. Lo mejor es que uno puede cambiar el tamaño del clip "txt" y sigue funcionando....genial!! andaba buscando un tutorial de scroll personalizao y este me viene de maravilla. Saludos.
Por: Cesar_blog

quise decir "personalizado" jeje
Por: Cesar_blog

Me gusta ese SCROLL, muy bueno
Por: nestoreha_blog

[b]ok[</b]
Por: jaja_blog

¿Cómo puedo hacer para que el scroll se desplace en una barra horizontal, de izquierda a derecha?

Gracias!
Por: ninotchka_blog

Me baje el FLA estaba con AS1
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: Otaku RzO

ninotchka_blog :

cambias "_y" por "_x" y ya
Por: penHolder

Otaku RzO :

ok, Z ya me lo hizo notar en publico, no tienes porq seguir metiendo el dedo en la herida...
Por: penHolder

Hola!! gracias me ha servido mucho... estoy usando una columna delgada asi es que necesito que el easing no deje el texto moviendose ese tiempo, necesito que sea mas rapido, o incluso sin easing pero soy nueva y no he logrado quitarselo... que puedo hacer?
Por: mayra_blog

Muy bueno el tip. Lindo en vertical. Pero en horizontal? Lo probé cambiando los "y" por "x" y los "height" por "width" y no funciona. El DRAGGER sigue moviendose de manera vertical.

Tengo mi MC txt en el eje x135 e y173. No entiendoooo... por qué no funciona? gracias.
Por: Emiliano_blog

mayra :

en esta linea:

Código :

//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;

osea q mientras mas grande sea el valor, mas lento hara la interpolacion
---------------------------------------------------------------------------------------------------------------

Emiliano :

no solo debes cambiar la propiedades, tb debes cambiar lo valores de las variables q limitan el dragg:

Código :

 
//variables que van a limitar el movimiento del drag
izquierda = mascara._width - dragger._width;
superior = dragger._y
derecha = 0;
inferior = dragger._y

Por: penHolder

penHolder gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias! gracias!

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: Emiliano_blog

Igual quice hacerlo horizontalmente, pero tuve que cambiar muchas cosas, ya que como esta no me sirvio:

Código :

//variables que van a limitar el movimiento del drag
izquierda = 164.2;
superior = dragger._y;
derecha =  380;
inferior = dragger._y;

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: Andromeda_Erick_blog

TXT se me va a la izquierda no logro que comience desde donde debe por queeeeé?
Por: Emiliano_blog

Muchas gracias! con este script me has salvado! muchas gracias!
Por: Felipe_blog

hola gracias por la info que me diste en el foro, en vedrad esta muy bueno el tip!

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: Felix_blog

Solo para responder a aquellos a quienes se les presentó el problema de que el txt se movía de su posición original y al usar el scroll no se veía completo este (el txt).

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: Cris_blog

Hola, lo primero muchisimas gracias por este tip.

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: Edu_blog

Muy buen aporte!
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: Platypuz_blog

Mejorado con control de rueda de raton y posibilidad de ir directamente a cualquier parte del scroll.

Ejemplo:

http://www.tablerovirtual.com/ejemplos/EjemploScroller.fla
Por: JJV _blog

Para que detecte la rueda añadir:


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_blog

Para que se pueda ir directamente a cualquier parte del scroll hay que cambiar la barra lateral. La he puesto como Movie Clip en vez de simple grafico (La he llamado Barra Lateral).
En el codigo de ese MovieClip, detectar el click del raton y actualizar la posicion del dragger.
Se ve mejor en el ejemplo...
Por: JJV _blog

Hola,

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: ELB_blog

Que habría que cambiar, si en vez de cargar el texto a través de un clip de pelicula, lo quiero cargar a través de loadVars.

Gracias y saludos.
Por: bamer_blog

Muchisimas Gracias!!! Sencillo de entender, y de implementar dentro de otro flash!!! Mil Gracias!!!
Por: Ramon_blog

hola amigos yo hago este aporte!!!
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: Highlord_blog

hola, recien comienzo con scroll en flash, y si bien el aporte me parece bueno, no entiendo cual es el primer paso a realizar, el segundo, y asi sucesivamente. me refiero a lo siguiente: donde pego el primero tramo de texto que aparece y lo mismo con los demas.
esa es mi consulta, muchas gracias y saludos.
Por: ariel_blog

ariel_blog :

descarga el fla y todas tu preguntas seran contestadas
Por: penHolder

hola el scroll esta muy bien, pero por cuestiones de usabilidad quiero agregarle los botones de arriba y abajo para el scroll, como puedo agregarlos y enfocarle la programacion pertinente q acompañaria este codigo, gracias
Por: daniel_blog

muy bueno, algo así estaba buscando, que no me confundiera tanto, solo una pregunta, ¿que código es el que va en la BarraLateral de JJV_blog?, busqué en el ejemplo y no encuentro el AS que va en el clip BarraLateral.

y otra cosa ¿como hacer para que se mueva con el MouseWheel pero cuando posicione el mouse sobre la mascara?
Por: el_chejin

tambien encontré un errorcillo pero no se como solucionarlo, cuando se da click sobre la barra el dragger se corre, pero no queda centrado, sino que queda de donde se dió click para abajo, y si se le da click hasta abajo, el dragger aparece fuera de la barra, para tratar de solucionarlo al tamaño de la barra le quite el tamaño del dragger, y me funciona, pero solo al darle click fuera de los limites del nuevo tamaño no funciona el action.
Por: el_chejin

Bueno aver si alguien sabe lo que le pasa al mio. cuando pruebo la pelicula el texto se me baja solo, despues se cada quieto y ya lo subo y lo bajo. Y el segundo problema es que aparece el dragger donde yo lo pongo pero cuando hago click se baja a la mitad (y desde ahi es como si fuera el tope de arriba) por lo que cuando bajo se sale de la peli.

Ayuda please. Yo sigo comparando con el fla
Por: guillerkrax

Hola,
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: Alex-blog

lo del dragger creo que ya esta solucionado pero no se porque el texto se baja solo hasta la mitad.
Por: guillerkrax

Alex-blog a mi solo se me ocurre esto dentro de tu boton

on(press){
myBar.stop
}
Por: guillerkrax