hacer un scrollbar con actionscript3.ppt

Hacer un scrollbar Hacer un scrollbar con ActionScript 3.0con ActionScript 3.0

Hacer un scrollbar con AS Hacer un scrollbar con AS 3.03.0

1. Abre un archivo Flash (Actionscript 1. Abre un archivo Flash (Actionscript 3.0) nuevo3.0) nuevo


2. Cambia el nombre de la capa a 2. Cambia el nombre de la capa a contenidoscontenidos, y añade una capa , y añade una capa superior y renómbrala como superior y renómbrala como ASAS..


3. Selecciona la capa 3. Selecciona la capa contenidocontenido y y agrega una caja de texto de agrega una caja de texto de cualquier dimensión al escenario. cualquier dimensión al escenario. Observa que sea texto dinámico, y si Observa que sea texto dinámico, y si usas CS5 o superior, que sea usas CS5 o superior, que sea clásicoclásico. Nombra la instancia como . Nombra la instancia como texto_txt.texto_txt.


4. Crea un rectángulo de la altura del 4. Crea un rectángulo de la altura del texto y un ancho de 20 pixeles. Usa texto y un ancho de 20 pixeles. Usa de preferencia un color obscuro sin de preferencia un color obscuro sin controno. Hacerlo MovieClip y colocar controno. Hacerlo MovieClip y colocar el punto de registro en la esquina el punto de registro en la esquina superior izquierda. Nómbralo como superior izquierda. Nómbralo como mcBarra mcBarra y nombra la instancia como y nombra la instancia como barra_mcbarra_mc. La altura de la barra debe . La altura de la barra debe coincidir con el texto.coincidir con el texto.


5. Crea un pequeño cuadro de 20x20 5. Crea un pequeño cuadro de 20x20 de un color contrastante a la barra, de un color contrastante a la barra, sin contorno. Conviértelo en sin contorno. Conviértelo en MovieClip, con el punto de registro en MovieClip, con el punto de registro en la esquina superior izquierda. Nombra la esquina superior izquierda. Nombra el MovieClip como el MovieClip como mcCuadromcCuadro y a la y a la instancia como instancia como cuadro_mccuadro_mc. Coloque . Coloque el punto de registro del cuadro sobre el punto de registro del cuadro sobre el punto de registro de la barra.el punto de registro de la barra.


6. Seleccione el fotograma de la capa 6. Seleccione el fotograma de la capa ASAS y abra el panel de acciones. y abra el panel de acciones. Cree una variable llamada Cree una variable llamada textotexto y y asígnele un texto lo suficientemente asígnele un texto lo suficientemente grande para que sea necesario el grande para que sea necesario el scrollscroll. Puede entrar a una página de . Puede entrar a una página de lorem ipsumlorem ipsum o un texto semejamte. o un texto semejamte.Asigne la variable texto a la aja de Asigne la variable texto a la aja de texto y active la opción de texto y active la opción de wordwrapwordwrap..


7. Salve la película como scrollbar.fla y 7. Salve la película como scrollbar.fla y ejecútela, deberá tener algo ejecútela, deberá tener algo semejante a la siguiente pantalla:semejante a la siguiente pantalla:


8. Ahora necesitamos “deslizar” el cuadro 8. Ahora necesitamos “deslizar” el cuadro en la barra. Para ello necesitamos en la barra. Para ello necesitamos calcular ciertas coordenadas de altura calcular ciertas coordenadas de altura máxima y minima.máxima y minima.

La altura mínima será la posición actual La altura mínima será la posición actual del del cuadro_mccuadro_mc (la coordenada (la coordenada yy).).

Cree una variable llamada Cree una variable llamada minmin con este con este valor.valor.


9. Necesitamos calcular la posición 9. Necesitamos calcular la posición máxima en la que se puede mover el máxima en la que se puede mover el cuadro. Esta será la altura mínima + cuadro. Esta será la altura mínima + la altura de la barra – la altura del la altura de la barra – la altura del cuadro:cuadro:

var max:Number = min + var max:Number = min + barra_mc.height - cuadro_mc.height;barra_mc.height - cuadro_mc.height;


10. Necesitaremos la longitud por la 10. Necesitaremos la longitud por la cual se puede mover el cuadro de cual se puede mover el cuadro de control, la cual la podemos calcular control, la cual la podemos calcular fácilmente restando la altura mínima fácilmente restando la altura mínima a la altura máxima.a la altura máxima.


11. Necesitamos hacer una bandera 11. Necesitamos hacer una bandera que nos indique si el usuario está que nos indique si el usuario está arrastrando lel cuadro. Para ello arrastrando lel cuadro. Para ello capture en el panel de acciones una capture en el panel de acciones una variable llamada variable llamada banderabandera y asigne y asigne un valor de falso.un valor de falso.


12. Necesitamos crear un objeto 12. Necesitamos crear un objeto rectanglerectangle para indicarle a AS 3.0 el para indicarle a AS 3.0 el área por donde va a deslizarse el área por donde va a deslizarse el cuadro. Para ello debemos cuadro. Para ello debemos proporcionarle la posición inicial (en proporcionarle la posición inicial (en coordenadas tipo x,y), el ancho del coordenadas tipo x,y), el ancho del rectángulo y su altura. El ancho se este rectángulo y su altura. El ancho se este rectángulo hipotético será cero, es rectángulo hipotético será cero, es decir, sólo subirá y bajará sin moverse a decir, sólo subirá y bajará sin moverse a la derecha o izquierda.la derecha o izquierda.


13. Añadimos un 13. Añadimos un listenerlistener para poder para poder deslizar el cuadro y su respectiva deslizar el cuadro y su respectiva función de función de listenerlistener..

cuadro_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDesliza);cuadro_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDesliza);

////

function onDesliza(e:MouseEvent):void {function onDesliza(e:MouseEvent):void {

}}


14. Hagamos el 14. Hagamos el lístener lístener para que se para que se deje de arrastrar el cuadro cuando deje de arrastrar el cuadro cuando alcemos el apuntador del ratón en alcemos el apuntador del ratón en cualquier parte del escenario. Es por cualquier parte del escenario. Es por eso que lo detectaremos el evento eso que lo detectaremos el evento con la propiedad con la propiedad stagestage y no con el y no con el objeto objeto cuadro_txtcuadro_txt..


15. Codificamos la función que hace que 15. Codificamos la función que hace que se deslice el cuadro. Necesitamos el se deslice el cuadro. Necesitamos el método método startDragstartDrag. El primer parámetro . El primer parámetro es falso para que el objeto no se adapte es falso para que el objeto no se adapte a nuestro cursor del ratón, si no, se a nuestro cursor del ratón, si no, se movería de su lugar. El segundo movería de su lugar. El segundo parámetro es el rectángulo que ya parámetro es el rectángulo que ya habíamos definido. Encendemos nuestra habíamos definido. Encendemos nuestra bandera de que el objeto se esta bandera de que el objeto se esta deslizando.deslizando.


Guarde el archivo y ejecute la Guarde el archivo y ejecute la película. Pulse sobre el cuadro y película. Pulse sobre el cuadro y deslícelo hacia arriba y hacia abajo. deslícelo hacia arriba y hacia abajo. Observará que el cuadro se mueve, Observará que el cuadro se mueve, pero al subir el botón sostenido del pero al subir el botón sostenido del ratón, el cuadro sigue moviéndose.ratón, el cuadro sigue moviéndose.


16. Codifiquemos la función para que 16. Codifiquemos la función para que el cuadrito se deje de mover. Para el cuadrito se deje de mover. Para ello vamos a utilizar un método que ello vamos a utilizar un método que se llama se llama stopDragstopDrag. .


Guarde y ejecute nuevamente la Guarde y ejecute nuevamente la película. Observará que ahora el película. Observará que ahora el cuadro sube y baja correctamente. cuadro sube y baja correctamente.

Ahora necesitamos que se mueva el Ahora necesitamos que se mueva el texto.texto.


17. Añada un evento ENTER_FRAME, 17. Añada un evento ENTER_FRAME, para detectar cuando se está para detectar cuando se está moviendo el cuadro y poder a la vez moviendo el cuadro y poder a la vez mover el texto.mover el texto.


18. Codifiquemos la función que 18. Codifiquemos la función que mueve el texto. Para ello mueve el texto. Para ello necesitamos el porcentaje en el que necesitamos el porcentaje en el que se encuentra el cuadro dentro de la se encuentra el cuadro dentro de la barra. Este porcentaje se lo barra. Este porcentaje se lo indicaremos a una propiedad del indicaremos a una propiedad del texto texto scrollVscrollV. La altura “scrolleable” . La altura “scrolleable” nos la indicará el texto en la nos la indicará el texto en la propiedad propiedad maxScrollV.maxScrollV.


Ejecute la película y mueva el Ejecute la película y mueva el cuadro, deberá poder mover el texto.cuadro, deberá poder mover el texto.

Bibliografía: El manual de Bibliografía: El manual de ActionScript 3.0 de Adobe, el clásico ActionScript 3.0 de Adobe, el clásico ejemplo de un scrollbar.ejemplo de un scrollbar.

hacer un scrollbar con actionscript3.ppt

Documents

Transcript of hacer un scrollbar con actionscript3.ppt