Scrollbars: Un míto urbano

Tal parece que poder desarrollar en flash un scrollbar es un míto urbano. llevo un par de semanas tratando de diseñar uno a mi gusto y a mi manera. He navegado por infinidad de tutoriales y foros alcanzando resultados que no se acercan a la idea final que yo busco. Algunos tienen un actionscript complicadísimo y un diseño muy cuadrado, algunos otros tienen funcionalidades muy limitadas y diseños típicos. Le agradecería a alguien si pudiera guiarme en este proceso para no tener que poner un componente que baje de Adobe que no está tan mal, pero me gustaría lograr lo que tengo en mente. Quiero hacer una caja de texto con scroll. Mi scroll quiero que sea una línea muy delgada sobre la cual esta una pequeña foto de forma irregular (no cuadrada) de un maíz, al desplazar el maíz sobre la línea, quiero que el texto haga el scroll dependiendo de como la desplase. Creo que eso se puede lograr con desplasamientos de ._x y ._y. Lo que no se es como relacionar la línea con el texto ni el actionscript necesario para el tema. Alguien podría porfavor ayudarme con esto? Gracias por sus aportaciones.

Para nada es un mito urbano, un scroll no es más nada que calculo de porcientos, depende del texto que tengas en pantalla y el que falta debes sacar una relación de porcientos, la cual aplicarás a la posición en las "_y" de la barra de scroll (en este cazo tu mazorca de maiz).

Básicamente lo que debes hacer no es cambiar la posición en las "_y" de tu texto, sino trabajar con su propiedad "scroll" y "maxscroll".

El chini, gracias por tu respuesta. A todos, estoy tratando de hacer lo siguiente:

1. Cree un archivo de texto que se llama text.txt y lo voy a guardar en el mismo archivo en el que tengo mi .swf de la película que vaya a crear para que así lo pueda ejecutar.

2. Creeun mc nuevo que llamé textbox mc, en ese clip está una caja de texto dinámico, multilínea. A ese nombre de instancia le puse "textbox" en el escenario principal. . Ahí he puesto el código siguiente en el fotograma que se encuentra dentro del mc y que contiene la caja de texto, ambos sobre el primer fotograma en diferentes capas.

[/code]
[/as]

on (press) {

startDrag (this,true,
_root.path._x,_root.path._y100._root.path._x,
_root.path._y);

}

on (release) {

stopDrag();

}

onClipEvent (load) {

setProperty (this,_x,int(_x));

setProperty (this,_x,
_root.slider._x);

setProperty (this,_y,
_root.slider._y);

onClipEvent (enterFrame) {

a= new Object();

a.y=this._y;
a.x=this._x;

_root.path.globalToLocal(a);

b=
int(a.y/(100/_root.text.textbox.maxscroll));

}

onClipEvent (load) {

loadVariables ("text.txt","");

}

onClipEvent (enterFrame) {

textbox.scroll = _root.slider.b;

}




[//as]

[/code]

2. Cree una barra de 100 pixeles y la llame "slide" y tiene en el último fotograma del mc slide (con el punto de registro del mc en la parte superior) el código siguiente:

Código :

[as/]

OnClipEvent (load) {

   setProperty (this, _x, int(_x));
      
            }

[//as]

Después tengo una foto de un maíz y ese es un mc que se llama "slider". slider en el escenario principal es un mc y tiene el nombre de instancia slider en el escenario principal. En el slider MC está un botón que funcionará como barra de arrastre del texto. Ahí debería de poder de poner el código:

Código :

[as/]

on (press) {
   startDrag (this, false, _root.path._x, _root.path._y+100, _root.path._x, _root.path._y);
}

on (release)  {
   stopdrag O;
}

[//as]

1° problema, no poder poner código a un botón o al mc que llame slider le puedo poner ningun código al contener un botón. Lo puse solo como botón/mc y tampoco le puedo poner código. Alguien puede ayudarme con esto? Me atoré en este punto. A ver si pueden opinar por ahi gente. gracias por sus sugerencias

Lo que estás haciendo es mover en las "_y" un MovieClip que contiene un texto dinámico, eso no es lo que te he recomendado, te he recomendado que hagas que tu texto sea un texto scrolleable, lo pones al tamaño que desees y después cambies su propiedad "scroll", luego sacando porcientos entre esta propiedad y la propiedad "maxscroll" entonces trata de posicionar la barra y a viceversa, depende de la posición de la barra trata de darle propiedad "scroll" al texto. Lo más importante es que intentes hacerlo y sobre todo leer en la ayuda de flash estos métodos, cuando tengas algo que por lo menos se mueva (aunque no te funcione correcto) entonces postea otra vez.

Después de leer sobre scroll y maxscroll finalmente pude crear un texto scrolleable. Tengo un texto que se mueve al dar click a uno de los dos botones que tengo. Todo funciona bien. Ahora lo que quiero hacer es poner una barra que desplase el texto al ser arrastrada. Quiero que al mover esa barra y soltarla tenga easing. Alguien me puede orientar sobre el actionscript que necesito para eso? El que tengo ahora es el siguiente

Código :

[as]

his.createTextField("scroll_txt", this.getNextHighestDepth(), 10, 10, 160, 20);
this.createTextField("my_txt", this.getNextHighestDepth(), 10, 30, 320, 240);
my_txt.multiline = true;
my_txt.wordWrap = true;
for (var i = 0; i<10; i++) {
    my_txt.text += "Aqui hay texto"
        + "Aqui tambien";
}
scrollUp_btn.onRelease = function() {
    my_txt.scroll--;
    scroll_txt.text = my_txt.scroll+" of "+my_txt.maxscroll;
};
scrollDown_btn.onRelease = function() {
    my_txt.scroll++;
    scroll_txt.text = my_txt.scroll+" of "+my_txt.maxscroll;
};

[/as]

También estoy tratando de que el texto que voy a tener dentro de la caja de texto sea un archivo externo en caso de que se tenga que modificar la información. Como puedo importar ese archivo? Gracias por las sugerencias.

Si deseas que tenga un easing, entonces paso atrás, no se puede hacer variando la propiedad scroll.
Por qué no intentas hecharle un ojo a este tutorial

Hola, bueno, estaba leiendo este post y pues yo cree un componente que nombre CustomScrollBar, si quieres te paso una copia, es muy facil de usar, carga los botones, el fondo y la barra de la ScrollBar dinamicamente, y para unirle con un textfield solo es cuestion de indicarle cual caja de texto sera scrolleada, puede que sea lo que necesitas.

Gracias LongeVie, lo que pasa es que estoy tratando de crear una barra de scroll que deslize una imágen mientras hace scroll a un texto dinámico, todo esto con el efecto de easing. No lo he podido lograr, he visto muchos tutoriales, pero en casi todos siempre hay algo que no me deja terminarlo. Por ahora estoy analizando el tutorial que me pone arriba elchini, ya lo había visto pero lo estoy tratando de hacer otra vez para ver si al lograrlo puedo partir de ese punto y lograr lo que quiero. Si me lo mandas para ojearlo es bienvenido también, a lo mejor ese lo puedo cambiar.

No logro conseguir hacer este scroll del tutorial, ya lo había intentado antes. Esto es lo que hago.

Abro un documento .fla y otro .as y le hago un include. Eso lo pongo en el primer fotograma de la línea principal del documento y esta así:

Código :

_root.#include "scroll_easyn.as";

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

Tengo un mc principal que se llama así "mc" y dentro de ese mc tengo uno que se llama "contenedor" y que tiene el texto y las imágenes que yo quiera poner. En el documento .as coloque el código completo que publico dQ en su tutorial que arriba aparece. Saben que estoy haciendo mal? Según yo lo he seguido al pie, no se que este haciendo mal. Agradecería su guía.

El include debes ponerlo al igual que dice en el tutorial:

Sin _root y sin punto y coma

Código ActionScript :

#include "scroll_easyn.as"

Elchini, lo había intentado antes así como lo pone. Fue error mio ponerlo con el _root, solo estaba probando opciones antes. De todos modos me marca el error:
Scene= Scene 1, layer= Layer 1, frame=1, Line=1 Malformed #include directive

Elchini, lo había intentado antes así como lo pone. Fue error mio ponerlo con el _root, solo estaba probando opciones antes. De todos modos me marca el error:
Scene= Scene 1, layer= Layer 1, frame=1, Line=1 Malformed #include directive

El proceso que llevo hasta ahora en detalle es el siguiente:

1. Cree un documento lamado "scroll_seis" y en la misma carpeta cree otro llamado "scroll_easyn.as".
2. En el documento "scroll_seis" he colocado en el primer fotograma el siguiente código:

Código :

[as]

#include "scroll_easyn.as";

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

[/as]

3. En el mismo documento he creado un mc llamado "mc" que dentro contiene otro llamado "contenedor". En el mc "contenedor" tengo una caja de texto dinámico scrolleable".

4. En el documento "scroll_easyn.as" he puesto el siguiente código:

Código :

[as]
generarScrollEasyn = function (nivel, clip, anchoScroll, suavizado) {
   if (clip != undefined) {
      var anchoScroll = anchoScroll;
      var div = suavizado;
      if (div != undefined) {
         if (div<1) {
            div = 1;
         } else {
            div = suavizado;
         }
      } else {
         div = 10;
      }
      var ruta = nivel;
      var altoScroll = Math.floor(ruta.mcMask._height);
      var mask_top = clip._y;
      var mask_height = ruta.mcMask._height;
      var mc_heigth = clip._height;
      if (mc_heigth<mask_height or mc_heigth == mask_height) {
         // el campo de texo es ma corto que el largo de la mascara
      } else {
         ruta.attachMovie("mcContScroll", "mcContScroll", _root.mcCont);
         ruta.mcContScroll.attachMovie("fondo", "fondo", ruta.mcContScroll);
         with (ruta.mcContScroll) {
            ruta.mcContScroll._x = clip._x+clip._width+5;
            fondo._height = altoScroll;
            attachMovie("barrita", "barra", 1);
            barra._height = 50;
            barra.inicioY = barra._y;
            barra.finalY = barra._y+ruta.mcMask._height-barra._height;
            barra.inicioX = barra.finalX=barra._x;
            var scroll_top = barra._y;
            var scroll_buttom = Math.floor(ruta.mcMask._height-barra._height-3);
            if (anchoScroll>3) {
               fondo._width = anchoScroll;
               barra._width = anchoScroll;
            } else {
               fondo._width = 3;
               barra._width = 3;
            }
            barra.onPress = function() {
               this.gotoAndStop(2);
               this.startDrag(0, this.inicioX, this.inicioY, this.finalX, this.finalY);
               mouse_drag = true;
               this._alpha = 100;
               this.onEnterFrame = function() {
                  var mcAlto = clip._height;
                  if (mcAlto<mask_height) {
                     return;
                  }
                  if (mouse_drag) {
                     var mk = ruta.mcMask;
                     if (mot<(-1)*(clip._height-mk._height)) {
                        mot = Math.round((clip._height-mk._height))*-1;
                     }
                     var pos = Math.floor(mask_top-(mcAlto-mask_height)*(barra._y-scroll_top)/(scroll_buttom-scroll_top));
                     var posY = pos-clip._y;
                     clip._y -= Math.round((int(mot)-posY)/div);
                  }
               };
            };
            barra.rollOut = function() {
               this._alpha = 100;
               this.gotoAndStop(1);
            };
            barra.onRollOver = function() {
               this._alpha = 100;
               this.gotoAndStop(2);
            };
            barra.onRelease = function() {
               this.stopDrag();
               this.gotoAndStop(1);
               //mouse_drag = false;
               //delete this.onEnterFrame;
            };
            barra.onReleaseOutside = barra.onRelease;
         }
      }
   } else {
      trace(nivel);
      nivel.createTextField("my_txt", 1, 100, 100, 300, 100);
      nivel.my_txt.multiline = true;
      nivel.my_txt.wordWrap = true;
      var my_fmt:TextFormat = new TextFormat();
      my_fmt.color = 0xFF0000;
      my_fmt.underline = true;
      my_fmt.font = "Verdana";
      my_fmt.size = 10;
      nivel.my_txt.htmlText = "No se ha podido detectar el CLIP CONTENEDOR";
      nivel.my_txt.setTextFormat(my_fmt);
      nivel.my_txt._x = nivel._x;
      nivel.my_txt._y = nivel._y;
   }
};

[/as]

5. He revisado con cuidado que todas mis instancias tengan nombre y los documentos están guardados y como comentaba en la misma carpeta. Al publicar aparece el siguiente error:
Scene= Scene 1, layer= Layer 1, frame=1, Line=1 Malformed #include directive #include "scroll_easyn.as";

Agradecería si alguien me puede hacer notar que es lo que estoy haciendo mal.

var posy = 5;
izquierda = barra._x;
superior = 0;
derecha = barra._x;
inferior = mascara._height - barra._height;
barra.onPress = function ()
{
startDrag (this, false, izquierda, superior, derecha, inferior);
};
barra.onRelease = barra.onReleaseOutside = function ()
{
stopDrag ();
};
barra.onRollOver = function ()
{
this._alpha = 75;
};
barra.onRollOut = barra.onReleaseOutside = function ()
{
this._alpha = 100;
};
txt.setMask(mascara);
txt.onEnterFrame = function ()
{
scrolled = (this._height - mascara._height / 1.300000E+000) / (mascara._height - barra._height);
posy = -barra._y * scrolled;
this._y = this._y - (this._y - posy) / 6;
};

Creamos un campo de texto dinamico llamandolo texto_txt por ejemplo, lo convertimos en movie clip llamandolo txt (tambien por ejemplo ), a su lado ponemos una scroll bar dibujada por nosotros, llamando a la barra que se desplaza al agarrarla con el mouse: barra.
creamos un movieclip llamado mascara, este del tamaño que queramos que sea el campo que muestre la scroll, lo colocamos encima del moviclip txt y la scroll a su derecha o izquierda, segun se quiera (lo logico es a la derecha), al fotograma en el que esta todo esto le añadimos las acciones que he puesto arriba.
A mi me funciona, espero que a ti tambien.

Y ESO EN DONDE VA SEGUN TU Nio?

Alguien apiadese de mi y ayudeme a poner un fondo negro que contenga una caja de texto de fondo negro y que desplase el texto al arrastrar una imágen sobre la línea del scroll. Lo he intentado antes, he leído varios tutoriales, he llegado a algunos resultados simples. Yo quiero un scroll con una imágen que al arrastrar esa imágen arrastre el texto con efecto de easing. Alguien me puede decir como lograrlo? Gracias por leer mi post

FlashFlashFLash escribió:

Bueno aunque no entiendo mucho de Flash... os dejo un ejemplo para que lo entendais mejor

http://usuarios.lycos.es/halo3fans/ejemploscrollbarbyNi0.rar

FlashFlashFLash, fíjate en el include que postee y en el tuyo (no lleva ; al final)

...o intenta una opcion mas "basica"
http://www.cristalab.com/foros/t44339_como-crear-un-scrollbar-con-easing-en-flash.html

*hacia el final del hilo hay una version del codigo mas acabada

Gracias por la ayuda a todos , me ha sido muy útil. Creo que es hora de cerrar el caso y seguir hacia adelante.

Yo creo que no tienes idea de lo que haces... y solo copias as's que ves por ahi esperando que alguno funcione...
a fin de cuentas no tiene nada que veer que quieras poner un maiz, una sandia o un huevo... algo tiene que actuar como scrollbar y lo que quieras que sea es lo de menos...

on (press) {

startDrag (this,true,
_root.path._x,_root.path._y100._root.path._x,
_root.path._y);

}

on (release) {

stopDrag();

}

onClipEvent (load) {

setProperty (this,_x,int(_x));

setProperty (this,_x,
_root.slider._x);

setProperty (this,_y,
_root.slider._y);

onClipEvent (enterFrame) {

a= new Object();

a.y=this._y;
a.x=this._x;

_root.path.globalToLocal(a);

b=
int(a.y/(100/_root.text.textbox.maxscroll));

}

onClipEvent (load) {

loadVariables ("text.txt","");

}

onClipEvent (enterFrame) {

textbox.scroll = _root.slider.b;

}