La lógica del Text Scroll( al menos en este tutorial
) es la siguiente: tenemos texto que se mueve detrás
de una máscara gracias a unos botones; cómo
es esto?.
La función de las máscara es permitir ver los
que se encuentra el área que esta abarca ( hará
la función de una especie de pantalla ), la parte del
texto que se ve es la que se encuentra detrás de esta
área; con los botones subimos y/o bajamos el texto
para poder ver la otra parte del texto, osea subimos el texto
para que quede en el área de la máscara y así
poder verlo, al mismo tiempo que escondemos la otra parte
del texto que se "sale" de la máscara.
En este tutorial haremos un movieclip que contenga todo lo
que es el scroll ( texto, máscara, acciones y botones),
esto por comodidad a la hora de acomodarlo en el escenario
principal pueda ponerse en un frame
sin mayor problema.
<---"radiografía"
del scroll
Paso 1. Necesitamos un texto algo amplio para poder hacer
el scroll ( de lo contrario no tendría sentido ), crea un
nuevo símbolo ( CTRL F8 ) ponle nombre y como behavior
movie clip ( para poder moverlo ocupamos que sea movieclip) , pega
o digita el texto asegurándote de alinearlo en la posición
(0,0) con respecto a la esquina superior izquierda ( figura 1)
figura1.
forma de alinear la movieclip con el texto.
Paso 2. Crea un nuevo símbolo movieclip
( este será el contenedor de todo el scroll ) le puedes poner
como nombre main_scroll o scroll_principal; en un layer
nuevo pon una instancia del texto, a la instancia ponle nombre "txt"
y ponle nombre al layer para diferenciarlo;alínealo también
en la posición (0,0)
Paso 3.En un layer nuevo has la máscara,
generalmente un cuadro de color sólido ( por costumbre usaré
rojo ) del tamaño que creas apropiado y alínealo sobre
el texto (posición (0,0))., al layer nombre mask, doble click
en el icono en forma de hoja doblada ()y
comportamiento: mask.
Paso 4.Ocupamos 3 botones el botón de
la barra scroll, que es un botón dentro de un movieclip que
se arrastra así mismo (haciendo drag), un botón que
indique hacia arriba y otro hacia abajo( estos dos últimos
pueden ser los mismos ). Nuevo símbolo, botón como
comportamiento. Al botón principal ponle el nombre btn_scroll
para no perdernos al hacerle referencia.
Paso 5.Para poder hacer que el botón
haga drag debemos meterlo dentro de un movieclip, crea otro símbolo,
como comportamiento movieclip y como nombre scroll, coloca una instancia
del btn_scroll alineado (0,0) pero esta vez con respecto al centro
del botón. Por ahora no pongamos las acciones.
Coloca una instancia de los botones arriba y abajo en la movieclip
principal (main_scroll), así como una instancia de scroll(
la movie clip con el botón drag) ponle nombre a la instancia
scrollbar (figura 2)
figura
2 nombre de la instancia del símbolo scroll
acomoda los botones junto a la máscara en otro
layer, empezando de la posición y=0 y siguiendo hacia abajo
como se ve en el swf. (figura 3).
figura3.
botones acomodados junto a la máscara.
Paso 6.Ahora que los tenemos acomodados podemos
ponerle acciones al botón que está dentro de la movieclip
scroll, primero revisa la posición x ( 300 en mi caso ),así
como prueba que posición y podemos ponerle antes de que quede
encima del botón hacia arriba y lo mismo con el botón
de abajo ( en el ejemplo sería la posición mínima
= 31 y la posición máxima 94 ).
Apuntados los datos hacemos doble click en scroll
y nos vamos a editarlo; una vez en el escenario del símbolo
movieclip hacemos click en el la instancia del botón, en
la pestaña acciones ocupamos los siguiente: 1.Cuando presionen
el botón que este haga drag, pero que no siga al puntero
del ratón por todo el escenario, sino que lo haga en un espacio
determinado; click en el + de acciones seleccionamos on press start
drag , en target ocupamos que le haga target a él mismo y
como el se llama scrollbar en el otro escenario ( el de la movieclip
"main_scroll" (donde está el texto, la máscara,
los botones y él mismo)) así que en target le ponemos
../scrollbar y constrain to rectangle. LEFT y RIGHT se refieren
a la posición x pon la misma en los dos campos, TOP se refiere
a la posición mínima y BOTTOM a la posición
máxima del scroll.
2.Cuando suelten el botón ( on Release) sólo ocupamos
la acción stop drag.
Si lo hiciste bien te debe quedar más o menos
así.
figura
4. Acciones del botón en la movieclip scroll
Ya tenemos la mayor parte ahora falta la maña.(
el pequeño truco). ya probamos el scrollbar y no cae encima
de los botones, hasta aquí todo bien, pero, cómo hacemos
que el scrollbar mueva el texto?.
Pues hay una forma : calcular la posición y del scrollbar
y de ahí mover el texto.
El texto debe moverse hasta que que la última
línea del mismo entre a la máscara (fig5)
figura5:Movimiento
del texto nota. la máscara no se mueve.
Afortunadamente hay una relación lógica que es la
siguiente si la altura del texto es "x" y la de la máscara
es "y" entonces la diferencia de x-y me dirá la
altura que debe tener el texto para que su última línea
haya entrado cómodamente en la máscara.
Lo que quiere decir que si el texto empezó en la posición
0 del eje "y" ( que el eje x no nos interesa debido a
que el texto se moverá de arriba a bajo no hacia los lados
) y debe subir 242 pixeles; el texto debe terminar en la posición
-242 ( negativo sube, positivo baja).
Ahora bien el scrollbar también tiene posición mínima
y máxima la diferencia también debe servirnos para
algo. En el ejemplo de figura 3 la posición mínima
del scrollbar era 31 y la máxima 94 lo que nos dice que se
moverá 63 pixeles ( este es positivo ya que mientras el scrollbar
baja el texto sube).
Al dividir los dos montos texto/scrollbar obtendremos una relación
(242/63=3.84 en este caso), pero que significa? Significa que por
cada pixel que se mueva el scrollbar el texto deberá moverse
3.84 pixeles (fig 6)
figura6.Cálculos
para el texto y el scroll
367-125=242
94-31=63
242/63=3.84
Paso 7.En las acciones de los frames ocupamos que nos hagan
los siguiente :
Que revisen la posicióny del scrollbar ( en este caso
recuerda que el scrollbar no empieza en la posición y =
0, sino que está en y = 31, por lo que para usar una referencia
real debemos restarle esos 31 pixeles).
Sacar el cálculo de esa posición multiplicado
por la relación ( 3.84 en éste caso)
Que mueva el texto.
Nuevo layer, nombre acciones en el primer keyframe
pon esto en acciones.
Set Variable: "scroll_ypos" = (scrollbar:_y)-31
Set Variable: "relacion" = "-3.846"
Set Variable: "mover" = scroll_ypos*relacion
Set Property ("txt", Y Position) = mover
En el frame2 sólo pon que se devuelva al cuadro 1 y play
para que se quede revisando la posición del scrollbar.( se
quede haciendo loop en el cuadro 1)
Go to and Play (1)
Paso 8. Los botones de arriba/abajo para no complicarnos
más sólo les vamos a poner la acción de subir
o bajar al scrollbar unos 5 pixeles; osea con el botón movemos
el scrollbar, el scrip revisa la posición del scrolbarl y
mueve el texto, fácil verdad?, pues no es tan fácil
: imagínate que el scrollbar este a un pixel del botón
y nosotros le digamos que se mueva 5?, el scrollbar caería
sobre el botón cierto?.
Para evitar esto hacemos los siguiente:
Revisamos la posición del scrollbar y le sumamos o restamos
los 5 pixeles
Si la cantidad es menor a la posición limite no hay problema,
se la asignamos al scrollbar.
Si es mayor a la posición límite le asignamos
la posición límite al scrollbar y listo.
O sea cuando voy bajando la cantidad límite permitida en
este caso es 94, si el scrollbar está en 91, hago el cálculo:
91 +5=96 (más cinco porque voy bajando/sumando pixeles)
como la cantidad sobrepasa los 94 permitidos no le digo que lo
ponga en 96(que fue el resultado), más bien le digo entonces
que lo mueva hasta 94.
Para arriba: si voy por 32 y le resto 5 daría 27 pero le
digo que lo ponga en 31.
Aquí está el código:
botón arriba.( restando pixeles)
On (Release)
Set Variable: "new_pos" = scrollbar:_y-5
If (new_pos >= 31)
Set Property ("scrollbar", Y Position) =
new_pos
Else
Set Property ("scrollbar", Y Position) =
"31"
End If
End On
botón abajo.(sumando pixeles)
On (Release)
Set Variable: "new_pos" = scrollbar:_y+5
If (new_pos <= 94)
Set Property ("scrollbar", Y Position)
= new_pos
Else
Set Property ("scrollbar", Y Position)
= "94"
End If
End On.
Al principio te podrán confundir tantos cálculos
pero después los verás lógicos y no tendrás
problemas.
Bonus:¿Cómo hacer que el scrollbar baje/suba
con sólo poner el puntero del mouse sobre los botones de
subir/bajar?
Ocupamos hacer varias modificaciones en los botones y en la movieclip. 1.Corta los botones ( Ctrl+X), haz un nuevo layer, nombre
botones, seleccionas el primer frame y los Pegas pero usando "Pegar
en el Lugar" (Ctrl+Shift+V) esto para que los pongas exactamente
donde los cortaste pero en el nuevo layer.
2.Cambiar la acción de los botones de Release a Rollover.
Botón subir
On (Roll Over)
Set Variable: "new_pos" = scrollbar:_y-5
If (new_pos >= 31)
Set Property ("scrollbar", Y Position) =
new_pos
Else
Set Property ("scrollbar", Y Position) =
"31"
End If
End On
Botón bajar
On (Roll Over)
Set Variable: "new_pos" = scrollbar:_y+5
If (new_pos <= 94)
Set Property ("scrollbar", Y Position) =
new_pos
Else Set Property ("scrollbar", Y Position) = "94"
End If
End On.
esta acción hará que lo que buscamos pero sólo
una vez, debido a que la función RollOver funciona sólo
cuando el puntero del mouse esté sobre el botón, y
como no movemos el mouse no seguimos activando la acción,(
osea para activar la acción varias veces tendríamos
que poner el puntero encima del botón, quitarlo, ponerlo
encima otra vez y seguir haciendo esto); pero, ¿Qué
pasa si en lugar que quitar el mouse de los botones quitamos los
botónes del mouse?, es decir si ponemos los botónes
sólo en el cuadro uno, y en el cuadro dos ponermos un keyframe
vacío: pues ciertamente funcionaría, ya que al poner
el puntero en el frame1 sobre el botón haría la acción,
cuando la movie pase por el frame2 no habrían botones y por
lo tanto no habría acción tampoco; pero como la movie
vuelve a pasar por el frame 1 de nuevo activa la acción otra
vez y así sigue.
Ciertamente la sólución funciona pero como los botones
están en frame y en el otro no parecería que los botones
parpadean.(figura 7)
Figura7,
los botones en un nuevo layer,con la acción RollOver pero
en un sólo cuadro.
La solución es copiarlos pegarlos en un nuevo
layer pero en el frame2 (layer botones 1, primer frame botones,
segundo frame keyframe vacío; layer botones 2, primer frame
keyframe vacío segundo frame botones). figura 8
Figura
8 detalle de los layers para los botones.
3.en el cuadro dos del layer acciones tenemos
el goto and play (1) lo que hacia que la movie se quedara haciéndo
loop en el primer frame, pero ahora necesitamos que haga loop en
los dos cuadros, para lo que simplemente podemos hacer dos cosas
Poner un keyframe vacío en el segundo frame( la animación
del texto no se verá fluida, irá como dando brincos
y más despacio.
Copiar la acción del frame 1 al frame 2 ( la animación
se verá fluida, más rápida por lo que es
aconsejable bajar el monto que sumamos o restamos ( el monto que
el texto va a bajar o subir anteriormente 5) a 2 o 3 pixeles
nov11,2000 me agrega el Scrollbar press and hold en el
zip.
oct 21,2000 se cambia el nombre de instancia del scroll
a scrollbar para evitar confusiones,conflictos de versiones
FL4 y FL5, se pone "radiografía" del scroll
set 20,2000 se agrega el Bonus para hacer el scroll con
acciones RollOver en los Botones.