Hacer un scrollbar con action script 3

7,268 views

Published on

Hacer un sencillo scrollbar personalizado de un texto con ActionScript 3.0. Es un ejemplo clásico

2 Comments
0 Likes
Statistics
Notes
  • solucionado...metí mouseEvent en onMueve en vez de Event
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Muy buenas, la verdad es que sigo el proceso bastante bien, pero cuando tengo todo terminado y ejecuto la película, me aparece el error TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::Event@3f3e3101 to flash.events.MouseEvent.

    a qué se puede deber???....muchas gracias
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
7,268
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
78
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Hacer un scrollbar con action script 3

  1. 1. Hacer un scrollbar con ActionScript 3.0
  2. 2. Hacer un scrollbar con AS 3.0 <ul><li>1. Abre un archivo Flash (Actionscript 3.0) nuevo </li></ul>
  3. 3. Hacer un scrollbar con AS 3.0 <ul><li>2. Cambia el nombre de la capa a contenidos , y añade una capa superior y renómbrala como AS . </li></ul>
  4. 4. Hacer un scrollbar con AS 3.0 <ul><li>3. Selecciona la capa contenido y agrega una caja de texto de cualquier dimensión al escenario. Observa que sea texto dinámico, y si usas CS5 o superior, que sea clásico . Nombra la instancia como texto_txt. </li></ul>
  5. 5. Hacer un scrollbar con AS 3.0
  6. 6. Hacer un scrollbar con AS 3.0 <ul><li>4. Crea un rectángulo de la altura del texto y un ancho de 20 pixeles. Usa de preferencia un color obscuro sin controno. Hacerlo MovieClip y colocar el punto de registro en la esquina superior izquierda. Nómbralo como mcBarra y nombra la instancia como barra_mc . La altura de la barra debe coincidir con el texto. </li></ul>
  7. 7. Hacer un scrollbar con AS 3.0
  8. 8. Hacer un scrollbar con AS 3.0 <ul><li>5. Crea un pequeño cuadro de 20x20 de un color contrastante a la barra, sin contorno. Conviértelo en MovieClip, con el punto de registro en la esquina superior izquierda. Nombra el MovieClip como mcCuadro y a la instancia como cuadro_mc . Coloque el punto de registro del cuadro sobre el punto de registro de la barra. </li></ul>
  9. 9. Hacer un scrollbar con AS 3.0
  10. 10. Hacer un scrollbar con AS 3.0 <ul><li>6. Seleccione el fotograma de la capa AS y abra el panel de acciones. </li></ul><ul><li>Cree una variable llamada texto y asígnele un texto lo suficientemente grande para que sea necesario el scroll . Puede entrar a una página de lorem ipsum o un texto semejamte. </li></ul><ul><li>Asigne la variable texto a la aja de texto y active la opción de wordwrap . </li></ul>
  11. 11. Hacer un scrollbar con AS 3.0
  12. 12. Hacer un scrollbar con AS 3.0 <ul><li>7. Salve la película como scrollbar.fla y ejecútela, deberá tener algo semejante a la siguiente pantalla: </li></ul>
  13. 13. Hacer un scrollbar con AS 3.0
  14. 14. Hacer un scrollbar con AS 3.0 <ul><li>8. Ahora necesitamos “deslizar” el cuadro en la barra. Para ello necesitamos calcular ciertas coordenadas de altura máxima y minima. </li></ul><ul><li>La altura mínima será la posición actual del cuadro_mc (la coordenada y ). </li></ul><ul><li>Cree una variable llamada min con este valor. </li></ul>
  15. 15. Hacer un scrollbar con AS 3.0
  16. 16. Hacer un scrollbar con AS 3.0
  17. 17. Hacer un scrollbar con AS 3.0 <ul><li>9. Necesitamos calcular la posición máxima en la que se puede mover el cuadro. Esta será la altura mínima + la altura de la barra – la altura del cuadro: </li></ul><ul><li>var max:Number = min + barra_mc.height - cuadro_mc.height; </li></ul>
  18. 18. Hacer un scrollbar con AS 3.0
  19. 19. Hacer un scrollbar con AS 3.0
  20. 20. Hacer un scrollbar con AS 3.0 <ul><li>10. Necesitaremos la longitud por la cual se puede mover el cuadro de control, la cual la podemos calcular fácilmente restando la altura mínima a la altura máxima. </li></ul>
  21. 21. Hacer un scrollbar con AS 3.0
  22. 22. Hacer un scrollbar con AS 3.0 <ul><li>11. Necesitamos hacer una bandera que nos indique si el usuario está arrastrando lel cuadro. Para ello capture en el panel de acciones una variable llamada bandera y asigne un valor de falso. </li></ul>
  23. 23. Hacer un scrollbar con AS 3.0
  24. 24. Hacer un scrollbar con AS 3.0 <ul><li>12. Necesitamos crear un objeto rectangle para indicarle a AS 3.0 el área por donde va a deslizarse el cuadro. Para ello debemos proporcionarle la posición inicial (en coordenadas tipo x,y), el ancho del rectángulo y su altura. El ancho se este rectángulo hipotético será cero, es decir, sólo subirá y bajará sin moverse a la derecha o izquierda. </li></ul>
  25. 25. Hacer un scrollbar con AS 3.0
  26. 26. Hacer un scrollbar con AS 3.0 <ul><li>13. Añadimos un listener para poder deslizar el cuadro y su respectiva función de listener . </li></ul><ul><li>cuadro_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDesliza); </li></ul><ul><li>// </li></ul><ul><li>function onDesliza(e:MouseEvent):void { </li></ul><ul><li>} </li></ul>
  27. 27. Hacer un scrollbar con AS 3.0 <ul><li>14. Hagamos el lístener para que se deje de arrastrar el cuadro cuando alcemos el apuntador del ratón en cualquier parte del escenario. Es por eso que lo detectaremos el evento con la propiedad stage y no con el objeto cuadro_txt . </li></ul>
  28. 28. Hacer un scrollbar con AS 3.0
  29. 29. Hacer un scrollbar con AS 3.0 <ul><li>15. Codificamos la función que hace que se deslice el cuadro. Necesitamos el método startDrag . El primer parámetro es falso para que el objeto no se adapte a nuestro cursor del ratón, si no, se movería de su lugar. El segundo parámetro es el rectángulo que ya habíamos definido. Encendemos nuestra bandera de que el objeto se esta deslizando. </li></ul>
  30. 30. Hacer un scrollbar con AS 3.0
  31. 31. Hacer un scrollbar con AS 3.0 <ul><li>Guarde el archivo y ejecute la película. Pulse sobre el cuadro y deslícelo hacia arriba y hacia abajo. Observará que el cuadro se mueve, pero al subir el botón sostenido del ratón, el cuadro sigue moviéndose. </li></ul>
  32. 32. Hacer un scrollbar con AS 3.0 <ul><li>16. Codifiquemos la función para que el cuadrito se deje de mover. Para ello vamos a utilizar un método que se llama stopDrag . </li></ul>
  33. 33. Hacer un scrollbar con AS 3.0
  34. 34. Hacer un scrollbar con AS 3.0 <ul><li>Guarde y ejecute nuevamente la película. Observará que ahora el cuadro sube y baja correctamente. </li></ul><ul><li>Ahora necesitamos que se mueva el texto. </li></ul>
  35. 35. Hacer un scrollbar con AS 3.0 <ul><li>17. Añada un evento ENTER_FRAME, para detectar cuando se está moviendo el cuadro y poder a la vez mover el texto. </li></ul>
  36. 36. Hacer un scrollbar con AS 3.0
  37. 37. Hacer un scrollbar con AS 3.0 <ul><li>18. Codifiquemos la función que mueve el texto. Para ello necesitamos el porcentaje en el que se encuentra el cuadro dentro de la barra. Este porcentaje se lo indicaremos a una propiedad del texto scrollV . La altura “scrolleable” nos la indicará el texto en la propiedad maxScrollV. </li></ul>
  38. 38. Hacer un scrollbar con AS 3.0
  39. 39. Hacer un scrollbar con AS 3.0 <ul><li>Ejecute la película y mueva el cuadro, deberá poder mover el texto. </li></ul><ul><li>Bibliografía: El manual de ActionScript 3.0 de Adobe, el clásico ejemplo de un scrollbar. </li></ul>

×