Temario  

1. Botones 2. ActionScript para reproducción de películas 

                                        

1. Botones  Flash nos permite crear botones para permitir una interactividad entre nuestras películas o aplicaciones y el usuario, estos botones se pueden hacer de muchas maneras, en este tutorial veremos como se hacen los botones, por medio de una serie de pasos que propone Flash.   Primero que todo debemos hacer una nueva aplicación de Flash. ActionScript 2.0, en ella vamos a dibujar un rectángulo con las esquinas redondas. Para hacer el rectángulo, presionamos la tecla “r” o seleccionamos el la barra de herramientas la opción “rectángulo”   

  para poner las esquinas redondas, buscamos en la barra de propiedades, los campos que nos permiten editar las esquinas de rectángulo.  

  

Podemos editar los campos de texto por medio de la flecha o por medio de texto, vamos a dejar las esquinas en 7 (cuando cambia el 1º campo de texto, cambian el resto de los valores) y ahora si dibujamos el rectángulo en el escenario. 

 La configuración de la línea del rectángulo es de 2 puntos, esto es para que se vea constante el trazo, ahora vamos a cambiar los colores del botón para que se vea un poco mas moderno, así que con la herramienta “cubo de pintura”, seleccionamos una degradación entre los colores blanco y gris y en la paleta de colores seleccionamos en el tipo de degradación la opción “Lineal”. 

 Con la herramienta “transformación de degradado”, podemos hacer los cambios necesarios para que el color quede bien ubicado.  Después de tener listo el diseño de nuestro botón, pasamos al texto que va a contener, el texto lo encontramos en la barra de herramientas con el icono de una “T” o con la tecla T, para escribir texto, simplemente arrastramos el puntero sobre el espacio donde quiero que aparezca el texto y listo, podemos escribir lo que queramos. 

  La barra de propiedades cambia cuando tenemos usamos texto, para mostrarnos las propiedades del mismo, con la barra de propiedades podemos cambiar el tipo de fuente, el tamaño de la letra, si el texto esta en negrilla, o en Italia, el direccionamiento del texto, etc.  Vamos a dejar el texto en letra Arial 12 y en negrilla, el color del texto lo vamos a dejar como #000066 y reducimos el tamaño del rectángulo para que el texto no se pierda dentro de la imagen. 

 Listo, ya tenemos el diseño de nuestro botón, ahora vamos a añadirle animaciones para determinados eventos.  

Nota: Los eventos son situaciones que suceden dentro de la programación y nos permiten añadir funcionalidad a los mismos, en Flash es muy común usar eventos relacionados con el Mouse, o el teclado, por ejemplo, cuando el Mouse pasa por encima de un objeto, cuando se presiona determinada tecla o cuando pasa determinado tiempo.  

Para convertir nuestro grafico en un botón lo seleccionamos arrastrando el Mouse por sobre toda la imagen, clic derecho convertir en símbolo o podemos presionar la tecla F8 

(solo en Windows) 

 Seleccionamos la opción Botón y en el nombre del objeto ponemos “botoncito_btn”, el sufijo “_btn” nos ayuda a organizar el código y a que el entorno de flash nos proporcione mas ayudas a la hora de programar. Presionamos Aceptar y ahora nos aparece una línea de tiempo diferente, cuando el botón es un objeto de Flash, presionamos doble clic para que aparezca una línea de tiempo diferente.  

  La nueva línea de tiempo, tiene 4 fotogramas que tienen una función especifica. 

Reposo: Cuando nada pasa con el botón y esta quieto en determinado lugar del escenario. Sobre: Cuando el Mouse pasa por encima del botón. Presionado: Cuando presionamos clic sobre el botón. Zona Activa: es la zona de acción del objeto, dependiendo de esta zona, se ejecuta la funcionalidad y las acciones del botón.  

Los fotogramas de esta línea de tiempo, nos permiten agregarle animaciones a cada uno de los estados del botón, para lograr más interactividad en nuestras películas y en nuestras aplicaciones.  Para hacer las animaciones de los botones, simplemente insertamos fotogramas claves y cambiamos las propiedades que queramos del botón. 

  Podemos añadirles animaciones a los botones para que crezcan o reduzcan su tamaño. El fotograma de zona Activa, sirve para definir en que parte del botón, se van a efectuar las acciones, la zona activa de un botón puede estar lejos del mismo; tampoco importa la forma de la zona activa ya que esta no se va a ver. 

 Cuando presionamos Cmd.+Enter ó ctrl.+Enter el botón va a tener una animación cuando el Mouse pasa por encima, y cuando es presionado, además depende de la forma y la posición de la zona activa, el funcionamiento del botón y de sus animaciones.     2. ActionScript para reproducción de películas  ActionScript 2.0 (de ahora en adelante AS2), es un lenguaje de programación orientado a objetos y a eventos, por medio del cual podemos añadirle funcionalidad a nuestras películas de Flash y con el que podemos crear RIAs (Rich Internet Applications [Aplicaciones ricas en interactividad]).  AS2 también sirve para manipular las opciones de reproducción de nuestras películas de Flash, permitiéndonos usar botones para devolvernos en las películas, cargar Escenas, ir a un fotograma específico o detener las películas dependiendo de determinados eventos.  

Vamos a tomar una película sencilla de Flash para adicionarle código y ver como utilizar las funciones de reproducción de AS2, para ello vamos a hacer un nuevo archivo de Flash ActionScript 2.0 y vamos a crear una interpolación de movimiento.  

  Luego creamos otra capa llamada AS, que es la que va a tener el código AS2 que necesitamos para la reproducción de la película.  

  Seleccionamos el último fotograma (40) y presionamos clic derecho, insertar fotograma clave. Cuando tengamos listo nuestro fotograma presionamos la tecla F9 o clic derecho sobre el fotograma y seleccionamos la opción “acciones”.  

  Debe aparecer un nuevo panel llamado Acciones que cuenta con un editor de texto para que escribamos nuestro código AS2. 

  En la parte izquierda del panel, hay una biblioteca de funciones y métodos que sirven para no tener que programar de manera manual, sin embargo es mejor y rinde mas si escribimos el código nosotros mismos.  En el panel de acciones, vamos a escribir la palabra reservada “stop();” (las palabras reservadas, son palabras que utiliza el lenguaje de programación y que no debemos usar nosotros, ya que tienen funciones especificas en el lenguaje). 

  La palabra “stop” debe ir seguida de una apertura y cierre de paréntesis, esto indica que es una función. La función stop(); sirva para detener la película cuando lleguemos a ese fotograma. Utilizamos punto y coma “;”, para indicar el final de una línea de código.  

Nota: la manera de saber su un fotograma tiene código es por medio del 

indicador que aparece sobre el punto del fotograma .  

Las principales funciones de reproducción para Flash, son:  

! stop(): detiene el avance de la película. ! gotoAndPlay(): permite ir a determinado fotograma o escena, el parámetro 

se debe pasar dentro de los paréntesis. Ejemplo: gotoAndPlay(1), esto nos retorna al fotograma 1. 

! gotoAndStop(): nos lleva a determinado fotograma y detiene la película, así el fotograma al que vamos a llegar no tenga la palabra stop(); en el código. 

 Vamos a hacer un ejemplo sencillo de reproducción, para lo cual debemos usar el botón que diseñamos en el ejercicio anterior, primero debemos crear una nueva capa que va a contener a nuestro botón, para poder reutilizar elementos, Flash nos permite compartir bibliotecas entre proyectos, es decir, podemos obtener los objetos de un proyecto de Flash y reutilizarlo en otro nuevo. Para ello, debemos ir al panel Biblioteca (cmd+L ó ctrl.+L ó ventana, biblioteca), ya ubicados en la biblioteca buscamos un combo que nos permite navegar por las otras bibliotecas.  

  Seleccionamos la biblioteca del proyecto anterior y ahora la biblioteca cambia sus objetos, ahora tenemos que arrastrar el objeto “botoncito_btn” al escenario, en la última capa que creamos y en el último fotograma de la escena 1. 

      Vamos a añadirle programación al botón para que este nos lleve al comienzo de la película. Para eso, debemos seleccionar el objeto y buscar en la barra de Propiedades, el 

campo de texto que dice “<nombre de instancia>”, en ese campo, vamos a poner el nombre nuestro botón, por medio del cual lo vamos a reconocer desde código.   

  

Nota: El sufijo “_btn” ayuda a Flash a reconocer que estamos usando un botón.  Ahora vamos a la capa AS, en el fotograma donde pusimos el código “stop();” y abrimos el panel de acciones, en el vamos a escribir este código:  

  Para añadirle funcionalidad a un botón debemos seleccionar un evento al que le debemos poner el código, en este caso vamos a programar el evento “press” este evento se ejecuta cuando presionamos clic sobre un objeto, la escritura de las palabras claves debe ser estricta, para que el compilador de flash reconozca el código.  En flash debemos decir que el evento de un objeto es igual a una función (…onPress = function(){}), para poder ejecutar el código que queremos. Dentro de la función pedimos que se ejecute el método “gotoAndPlay(1);” esto hará que cuando presionemos el botón, la película se empiece a reproducir de nuevo desde el fotograma 1, sin embargo podemos poner el fotograma que queramos.   

Tarea:  * Investigar acerca de variables en flash. * ¿Qué tipos de datos usa AS2? * ¿Qué es un “Listener”?