BOTONES E INTERACTIVIDAD

Adems de poder realizar simples animaciones, Flash nos permite agregar botones a nuestras pelculas de forma que al pulsar con el ratn sobre ellos se ejecutase una accin determinada. Esto hace que podamos dotar las pelculas de cierta interactividad, la cual se ve aumentado por el hecho de que tambin podemos establecer una comunicacin entre los distintos clips de pelcula que tenemos en el escenario; por ejemplo podramos hacer que al terminar un clip se inicie otro. ActionScript es el lenguaje de programacin de scripts de Flash y es la herramienta que nos permite realizar todo lo anterior. En este trabajo no pretendemos abarcar todo lo que podramos hacer con ActionScript pero realizaremos dos ejemplos que expliquen cmo crear botones y como programar ciertas acciones para dotar a nuestra animacin de un poco de interactividad. Antes de comenzar con los ejemplos veamos que es un botn. Un botn en Flash no es ms que un smbolo con una lnea del tiempo propia un tanto especial. En la lnea del tiempo tiene cuatro fotogramas; en le primero de ellos especificamos la imagen que tiene el botn cuando est en reposo, en el segundo la imagen para cuando el ratn est situado sobre el botn, en el tercero la imagen para el botn presionado y en el cuarto hay que especificar la zona del botn que desencadena la interaccin. Para facilitar esto los fotogramas ya estn etiquetados. Veamos ahora los ejemplos:

Ejemplo 1: En este ejemplo veremos como crear un botn, como modificar su aspecto segn su estado y cmo utilizaramos ActionScript para especificar acciones para el botn que acten sobre un cuadro de texto dinmico.

1. En un documento nuevo dibujamos un crculo de color verde con la herramienta valo. 2. Con la herramienta flecha seleccionamos el valo haciendo doble clic. 3. Convertimos el valo en smbolo pulsando F8 (o Insertar convertir en smbolo). En el cuadro de dilogo convertir en smbolo le ponemos de nombre botn, seleccionamos la casilla botn y pulsamos aceptar.

4. Hacemos doble clic en el botn para entrar en el modo de edicin de smbolos. Si nos fijamos en la lnea del tiempo vemos que ha cambiado, mostrando ahora los fotogramas correspondientes a los estados del botn. 5. Seleccionamos el ovalo haciendo doble clic con la herramienta flecha. Pulsamos F8 para convertirlo en smbolo pero esta activamos la casilla Clip de pelcula en lugar de Botn. 6. En la lnea del tiempo nos situamos sobre el fotograma sobre e insertamos un fotograma clave. Hacemos lo mismo con el fotograma presionado. 7. Cambiamos color de relleno del valo en cada fotograma con la herramienta bote de tinta de forma que cada fotograma tenga un color distinto. 8. Nos situamos en el fotograma sobre. 9. Pulsamos doble clic en el valo con la herramienta flecha para seleccionarlo. 10. Lo convertimos en smbolo (F8) igual que antes pero esta vez seleccionando la casilla Clip de pelcula en lugar de botn. 11. Doble clic en el valo para editarlo. La lnea del tiempo ha vuelto a cambiar. 12. Seleccionamos el fotograma 4 e insertamos un fotograma clave (F6). 13. Pulsamos Ventana Transformar para que aparezca la ventana de transformacin. En ella escalamos al 120% fijndonos en que la casilla restringir est marcada.

14. Seleccionamos el fotograma 7 e insertamos un fotograma clave 15. Escalamos al 80%.

16. Nos situamos en un fotograma entre el 1 y el 4 y seleccionamos forma en el men animar del inspector de propiedades. Realizamos tambin la misma operacin situndonos en un fotograma entre el 4 y el 7. Si todo ha ido bien aparecern, en la lnea del tiempo, flechas continuas entre dichos fotogramas. 17. Pulsamos en escena1 para volver al escenario principal.

18. Con la herramienta texto creamos un campo de texto junto al botn. En l escribimos REPOSO.

19. Con el cuadro de texto seleccionado especificamos sus propiedades en el inspector de propiedades. Seleccionamos texto dinmico, lnea nica y fuente _sans, le asignamos un color de letra, alineacin, etc En el campo Var escribimos Texto.

20. Ahora toca programar el script. Seleccionamos el botn y expandimos el panel Acciones. (Si el panel no est visible Ventana Acciones) 21. Vamos a Acciones Variables y hacemos doble clic en setVariables.

22. En variable escribimos Texto y en valor escribimos PRESIONADO. 23. Pulsamos en la lnea que pone on (release) { ; vemos que aparecen distintas casillas arriba. Activamos slo Presionar.

24. Nos situamos en la ltima lnea y volvemos hacer doble clic en setVariables. Esta vez en valor escribimos SOBRE. Las casillas que activamos esta vez es Situar sobe objeto y liberar. 25. Doble clic en setVariables por ltima vez. La misma variable, en valor escribimos REPOSO, y activamos las casillasliberar Afuera y situar fuera de objeto. 26. Hemos terminado. Podemos probar la pelcula con Control Probar Pelcula

Juega con el resultado final!!!

Ejemplo 2: En este ejemplo partimos de la animacin ya realizada. Abrimos el archivo FLA y nos encontramos con algo parecido a esto:

La mariposa que observamos es una instancia de un smbolo. Si la seleccionamos podemos ver en el inspector de propiedades que se le ha asignado el nombre mariposa. Si hacemos doble clic en ella entramos en el modo de edicin del smbolo y podemos ver que est compuesta por otra instancia de clip de pelcula, a la que se le ha llamado AnimacinMariposa. Lo que haremos en este ejemplo ser aadir un panel con botones que nos permitan navegar por la animacin; es decir: stop, play, siguiente imagen y anterior imagen.

1. Creamos una nueva capa y la llamamos Botones. Bloqueamos todas las dems. 2. Dibujamos un panel gris en la esquina inferior izquierda del escenario. Utilizamos para ello la herramienta rectngulo. 3. Dibujamos utilizando la herramienta lnea un tringulo que ser el botn de play. Lo dibujamos con lneas blancas y luego lo rellenamos de blanco con el bote de tinta. 4. Seleccionamos el triangulo haciendo doble clic con la herramienta flecha y lo convertimos en smbolo pulsando F8. En el cuadro de dilogo Convertir en smbolo le asignamos el nombre BotonPlay y marcamos Botn en el modo de comportamiento.

5. Doble clic sobre el botn para editarlo. 6. Insertamos fotogramas clave en los fotogramas sobre y presionado. 7. Nos situamos sobre el fotograma sobre y seleccionamos el botn haciendo doble clic con la herramienta flecha. 8. En inspector de propiedades cambiamos el color del trazo a negro y la altura a 2. 9. Nos situamos ahora sobre el fotograma presionado, y seleccionamos el tringulo con doble clic con la herramienta flecha. Aqu cambiamos el color de relleno a negro. 10. Ya tenemos el botn de play listo. De la misma forma creamos otros 3 botones.

11. Seleccionamos ahora los 4 botones a la vez. Pulsamos Ventana alinear. En la ventana que aparece pulsamos en Alinear verticalmente con respecto al centro, Distribuir horizontalmente con respecto al centro y Hacer coincidir anchura y altura. 12. Seleccionamos el botn de stop y expandimos el panel de acciones. Pulsamos en acciones control de pelcula y doble clic en stop. Aparece lo siguiente:

13. Pulsamos ahora en Objetos Pelcula MovieClip Mtodos y doble clic en stop. En el cuadro de texto Objeto escribimos mariposa.AnimacionMariposa 14. Minimizamos el panel de acciones, seleccionamos el botn play y repetimos los dos pasos anteriores pero haciendo siempre doble clic en play en lugar de hacerlo en stop. 15. Realizamos la misma operacin con los botones siguiente y anterior pero teniendo en cuenta que ahora hay que hacer doble clic en nextFrame y en prevFrame respectivamente. 16. Ya hemos terminado el ejemplo. Control Probar pelcula
http://sabia.tic.udc.es/gc/Contenidos%20adicionales/trabajos/Tutoriales/Tutorial%20Flash/Boton es%20e%20interactividad/Botones%20e%20interactividad.htm textpropiedad
text:String [read-write]

Versin del lenguaje: ActionScript 3.0 Versin del reproductor: Flash Player 9

Una cadena que es el texto actual del campo de texto. Las lneas se separan mediante el carcter de retorno de carro ('\r', ASCII 13). La propiedad contiene texto sin formato en el campo de texto, sin etiquetas HTML.

Para obtener el texto en formato HTML, utilice la propiedad htmlText.

Implementacin
public function get text():String public function set text(value:String):void

Vase tambin
flash.text.TextField.htmlText

Ejemplo En el siguiente ejemplo, se crea un objeto TextField llamado tf1 y se asigna una cadena con formato HTML a su propiedad text. Si se realiza un seguimiento de la propiedad htmlText, el resultado es la cadena con formato HTML y con etiquetas adicionales (como <P> y <FONT>) aadidas automticamente por Flash Player. Si se realiza un seguimiento del valor de la propiedad text, se muestra la cadena sin formato y sin etiquetas HTML.

Para realizar la comparacin, se llevan a cabo los mismos pasos en otro objeto TextField llamado tf2 con una novedad: se asigna un objeto StyleSheet a la propiedad de tf2 styleSheet antes de definir la propiedad htmlText. En este caso, cuando se realice el seguimiento de la propiedad htmlText, slo incluir el texto HTML exacto asignado en un principio a la propiedad htmlText, demostrando as que Flash Player no ha aadido ninguna etiqueta.
package { import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.TextField; public class TextField_text extends Sprite { public function TextField_text() { var tf1:TextField = createTextField(10, 10, 400, 22); tf1.htmlText = "<b>Lorem ipsum dolor sit amet.</b>"; // htmlText: <P ALIGN="LEFT"><FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0"><b>Lorem ipsum dolor sit amet.</b></FONT></P> trace("htmlText: " + tf1.htmlText); // text: Lorem ipsum dolor sit amet. trace("text: " + tf1.text); var tf2:TextField = createTextField(10, 50, 400, 22); tf2.styleSheet = new StyleSheet(); tf2.htmlText = "<b>Lorem ipsum dolor sit amet.</b>"; // htmlText: <b>Lorem ipsum dolor sit amet.</b> trace("htmlText: " + tf2.htmlText);

// text: Lorem ipsum dolor sit amet. trace("text: " + tf2.text); } private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField { var result:TextField = new TextField(); result.x = x; result.y = y; result.width = width; result.height = height; addChild(result); return result; } } }

http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/flash/text/TextField.html