Presentaciones Educativas con Adobe Flash

ActionScript.
El lenguaje de creacin de scripts ActionScript te permite aadir interactividad compleja, control de reproduccin y visualizacin de datos a tu aplicacin. Puedes aadir ActionScript en el entorno de creacin mediante el panel Acciones, la ventana Script o con un editor externo. ActionScript tiene sus propias reglas sintcticas, palabras clave reservadas y permite utilizar variables para almacenar y recuperar informacin. ActionScript incluye una extensa biblioteca de clases incorporadas que te permite crear objetos y realizar una gran cantidad de tareas tiles. No es necesario entender todos los elementos de ActionScript para empezar a crear scripts; si partes de un objetivo claro, podrs empezar a crear scripts con acciones sencillas.

Versiones de ActionScript
Flash incluye ms de una versin de ActionScript para satisfacer las necesidades de los distintos tipos de desarrolladores y hardware de reproduccin. ActionScript 3.0 se ejecuta extremadamente rpido. Esta versin requiere algo ms de familiaridad con los conceptos de la programacin orientada a objetos que otras versiones de ActionScript. ActionScript 3.0 es totalmente compatible con la especificacin ECMAScript, ofrece mejor procesamiento XML, un modelo de eventos mejorado y una arquitectura renovada para el trabajo con elementos en pantalla. Los archivos FLA que utiliza ActionScript 3.0 no pueden incluir versiones anteriores de ActionScript. ActionScript 2.0 resulta ms fcil de aprender que ActionScript 3.0. Aunque Flash Player ejecuta el cdigo compilado de ActionScript 2.0 ms lentamente que el cdigo compilado de ActionScript 3.0, ActionScript 2.0 sigue siendo til para numerosos tipos de proyectos que no requieren muchos recursos informticos; por ejemplo, un contenido ms orientado hacia el diseo. ActionScript 2.0 tambin se basa en la especificacin ECMAScript, pero no es totalmente compatible. ActionScript 1.0 es la forma ms simple de ActionScript, y todava se utiliza en algunas versiones de Flash Lite Player. ActionScript 1.0 y 2.0 pueden coexistir en el mismo archivo FLA. ActionScript de Flash Lite 2.x es un subconjunto de ActionScript 2.0 que se admite en Flash Lite 2.x que se ejecuta en telfonos y dispositivos mviles. ActionScript de Flash Lite 1.x es un subconjunto de ActionScript 1.0 que se admite en Flash Lite 1.x que se ejecuta en telfonos y dispositivos mviles.

Formas de trabajar con ActionScript.

50

Presentaciones Educativas con Adobe Flash

Hay varias maneras de trabajar con ActionScript. El modo Asistente de script te permite aadir ActionScript a tu archivo FLA sin tener que escribir el cdigo. Se seleccionan las acciones y el software presenta una interfaz de usuario para introducir los parmetros que se requieren para cada una de ellas. Debes tener algunas nociones sobre qu funciones debes utilizar para realizar tareas especficas, pero no tienes que aprender sintaxis. Muchos diseadores y usuarios que no son programadores utilizan este modo. Los comportamientos tambin te permiten aadir cdigo al archivo sin tener que escribirlo. Los comportamientos son scripts predefinidos para tareas comunes. Puedes aadir un comportamiento y, a continuacin, configurarlo en el panel Comportamientos. Los comportamientos slo estn disponibles para ActionScript 2.0 y versiones anteriores. Escribir tu propio ActionScript te ofrece la mayor flexibilidad y control sobre su documento, pero requiere que ests familiarizado con el lenguaje de ActionScript. Los componentes son clips de pelculas creados previamente que le ayudan a implementar rpidamente complejas funcionalidades. Un componente puede ser un control simple de la interfaz de usuario, como una casilla de verificacin, o bien un control complejo, como un panel de desplazamiento. Puede personalizar la funcionalidad y el aspecto del componente, y puede descargar componentes creados por otros desarrolladores. Para la mayora de los componentes deber escribir su propio cdigo ActionScript para activar o controlar un componente. Para ms informacin, consulte Componentes ActionScript 3.0 en Utilizacin de componentes ActionScript 3.0 o Componentes en Utilizacin de componentes ActionScript 2.0.

Cmo escribir ActionScript

Cuando escribes cdigo ActionScript en el entorno de edicin, utilizas el panel Acciones. El panel Acciones contiene un editor de cdigo completo que incluye sugerencias y consejos para el cdigo, coloreado y aplicacin de formato del cdigo, resaltado de sintaxis, revisin de sintaxis, depuracin, nmeros de lnea, ajuste de texto y compatibilidad con Unicode. Utiliza el panel Acciones para escribir scripts que son parte de tu documento Flash (es decir, scripts que estn incorporados en el archivo FLA). El panel Acciones incluye funciones como la caja de herramientas Acciones, que te proporcionan acceso rpido a los principales elementos del lenguaje ActionScript, y el modo Asistente de script, en el que se te solicitan los elementos necesarios para crear scripts.

Informacin general sobre el panel Acciones

51

Presentaciones Educativas con Adobe Flash

Para crear scripts incorporados en un archivo FLA, se introduce cdigo ActionScript directamente en el panel Acciones. El panel Acciones contiene tres paneles: la caja de herramientas Acciones, que agrupa los elementos de ActionScript por categora; el navegador de scripts, que permite moverte rpidamente entre los scripts del documento Flash; y el panel Script, que es donde se escribe el cdigo ActionScript.

Insertar un cdigo de Action Script.

Para insertar un elemento de ActionScript en el panel Script, da doble clic en l o arrstralo directamente al panel Script.

Herramientas del panel Acciones.

Las barras de herramientas del panel Acciones y la ventana Script te permiten acceder a las funciones de ayuda para el cdigo que te ayudan a simplificar y agilizar la codificacin en ActionScript. Aadir un nuevo elemento al script Muestra los elementos de lenguaje tambin presentes en la caja de

herramientas Acciones. Seleccione un elemento para aadirlo al script. Buscar Busca y sustituye texto en el script. Te ayuda a la hora de establecer una ruta de destino absoluta o relativa para una

Insertar ruta de destino accin del script.

52

Presentaciones Educativas con Adobe Flash

Revisar sintaxis: Comprueba los errores de sintaxis existentes en el script actual. Los errores de sintaxis se

muestran en el panel Salida. Formato automtico: legibilidad. Mostrar consejos sobre cdigos: Si ha desactivado los consejos automticos sobre cdigos, puede Aplica formato al script para lograr una sintaxis de cdigo correcta y mejorar la

utilizar este comando con el fin de mostrar manualmente un consejo para la lnea de cdigo en la que est trabajando. Opciones de depuracin: Establece y quita puntos de corte de forma que, al depurar, pueda avanzar lnea

por lnea por el script. Las opciones de depuracin solamente se pueden utilizar para los archivos ActionScript files, archivos que no sean de comunicacin de ActionScript o archivos JavaScript de Flash. Contraer entre llaves: Contrae el cdigo que aparece entre las llaves o parntesis que contienen

actualmente el punto de insercin.

Contraer seleccin: Expandir todo:

Contrae el bloque de cdigo seleccionado actualmente.

Expande todo el cdigo contrado en el script actual. Aade marcadores de comentarios al principio y al final de bloque de

Aplicar comentario en bloque: cdigo seleccionado. Aplicar comentario de lnea:

Aade un marcador de comentario de una sola lnea en el punto de

insercin, o al principio de cada lnea de cdigo en una seleccin mltiple. Quitar comentario: seleccin actual. Eliminar los marcadores de comentarios de la lnea actual o de todas las lneas de la

Mostrar/ocultar caja de herramientas:

Muestra u oculta la caja de herramientas Acciones.

Asistente de script:

En el modo de asistente de script se muestra una interfaz de usuario para la

introduccin de los elementos necesarios para crear scripts. Ayuda: Muestra la informacin de referencia para el elemento de ActionScript seleccionado en el panel 53

Presentaciones Educativas con Adobe Flash

Script. Men Panel: Contiene los comandos y preferencias que se aplican al panel Acciones. Por ejemplo,

puedes establecer los nmeros de lnea y el ajuste de texto, acceder a las preferencias de ActionScript e importar o exportar scripts.

Uso de Action Script

Para analizar el uso de Action Script, realiza lo siguiente: Primero define y crea los smbolos que requieres para tu animacin Documento en blanco de 800 x 600 px, fondo blanco y 12 fps. Utiliza cuatro capas, las cuales denominars: fondo, contenido, botones y acciones. Un grfico de 800 x 600 px, el cual utilizars como fondo de tu animacin. Crea una textura de relleno y color de tu preferencia, para el ejemplo utilizo un degradado en tonos grises y blancos. Tres botones. Define el tamao para cada botn en 80 x 35 px, la forma del botn que sea un rectngulo, el color de relleno y la lnea quedan a tu criterio. A un botn agrgale el texto Presentacin, a otro el texto Justificacin y al tercero el texto Propsito. El nombre para cada uno de estos botones puede ser btn_proposito, btn_justificacion y btn_presentacion. El procedimiento para crear los smbolos de botn ya lo conoces. Para agregar texto a un botn, solo tienes que agregar una capa y colocar el texto que requieras. Define el tipo, tamao y color de la fuente que consideres adecuado. Recuerda modificar el diseo de la figura que representa el botn para cada uno de los estados. El estado del botn tambin influye en el texto que agregues, as que puedes cambiar el diseo que tiene el texto en cada estado si as lo deseas. En el ejemplo que se realiza, la fuente que utilizo para el estado de Reposo es de un tipo Arial, color de la fuente en azul, tamao de la fuente 12 normal, para el estado Sobre modifico la fuente a negrita y para el estado presionado cambio el color de la fuente a blanco. Tres grficos, en los cules agregars la informacin que corresponda al propsito, presentacin y justificacin. La informacin que le corresponde a cada uno de estos apartados, la puedes tomar de la documentacin del curso o simplemente colocar la informacin que desees.

54

Presentaciones Educativas con Adobe Flash

Una vez creados estos elementos, la biblioteca de tu archivo debe de incluir tres botones, cuatro grficos, uno con el diseo del fondo de tu animacin y tres ms que contienen la informacin correspondiente a la presentacin, justificacin y propsito. Tambin cuentas con cuatro capas, la primera capa corresponde a fondo, la segunda a contenidos, la tercera a botones y la cuarta a acciones ordenadas de la parte inferior a la superior. En cada una de las capas irs colocando los smbolos a los que hace mencin cada capa. Los nombres asignados a cada una de las capas y smbolos, son al libre albedro, con el fin de organizar los elementos que componen la animacin que ests creando y de identificar fcilmente cada uno de ellos, para que cuando tengas que modificar alguno, lo identifiques de una manera sencilla y puedas hacer los cambios necesarios. Ahora colocars en el escenario cada uno de los smbolos que acabas de crear. Empieza por colocar el smbolo de fondo. Para ello da clic en el fotograma 1 de la capa fondo. Arrastra de la biblioteca el smbolo al escenario, cntralo horizontal y verticalmente. Como el smbolo del fondo es de la misma medida del escenario, debe encajar perfectamente en l. Con el siguiente procedimiento, lo que realizars es utilizar un fotograma para colocar el smbolo que contiene la informacin de presentacin, otro para el de justificacin y otro para los propsitos. Es decir, teniendo seleccionada la capa contenidos en el fotograma 1 colocars el smbolo que contiene de presentacin, en el fotograma 2 el smbolo con la informacin de la justificacin y en el fotograma 3 el smbolo con la informacin del propsito. Da clic en el fotograma 1 de la capa contenidos, arrastra de la biblioteca al escenario el smbolo txt_presentacion y colcalo en el rea que desees del escenario. Da clic en el fotograma 2 de la misma capa (contenidos) e inserta un fotograma clave, puedes utilizar las opciones del men insertar o la tecla F6. Recuerda que cuando realizas este procedimiento, copias lo que tienes en el fotograma anterior. Ahora cambia el smbolo txt_presentacion por el de txt_justificacion. Del escenario selecciona el smbolo txt_presentacion ahora en el panel de propiedades da clic en el botn intercambiar, de la ventana que se 55

Presentaciones Educativas con Adobe Flash

despliega selecciona el elemento por el cual lo quieres intercambiar, en este caso es el smbolo txt_justificacion.

Ahora da clic en el fotograma 3 de la capa contenidos e inserta un fotograma clave. Intercambia el smbolo txt_justificacion por el de txt_proposito. Realiza el procedimiento anterior para intercambiar smbolos. Ahora tienes 3 fotogramas en la capa contenidos, en el fotograma 1 est el smbolo con la informacin de la presentacin, en el fotograma 2 el smbolo con la informacin de la justificacin y en el fotograma 3 el smbolo con la informacin del propsito. Guarda tu archivo en la carpeta de ejercicios con el nombre integracin. Prueba tu pelcula (Ctrl + Enter). Observa cmo avanza o se reproduce tu pelcula, mostrando la informacin de los tres fotogramas de la capa contenidos sin detenerse, esto se debe a que necesitas incorporar algo de cdigo Action Script para indicarle algunas acciones a tu pelcula, pero antes de eso terminars de agregar los smbolos a tu pelcula. Selecciona el fotograma 1 de la capa botones. Ahora de la biblioteca arrastra cada uno de los botones al escenario, puedes colocarlos en la posicin que t 56

Presentaciones Educativas con Adobe Flash

desees, para este ejercicio los colocar en la parte izquierda superior del escenario, colocando primero el botn de propsito, luego el de justificacin y finalmente el de propsito.

Como puedes observar en el fotograma 1 de la capa botones estn colocados los tres smbolos de los botones. El uso que dars a cada uno de ellos, es que al agregar el cdigo, te lleve al fotograma donde est la informacin a la que hace mencin el botn. Es decir, si presionas o das clic en el botn presentacin, te lleve al fotograma 1, que es donde est la informacin de la presentacin, si das clic en el botn justificacin te lleve al fotograma 2, donde colocaste la informacin de la justificacin y si presionas el botn propsito te lleve al fotograma 3 donde est colocada la informacin del propsito. Ahora agregars el cdigo a los botones, para que realicen la accin que necesitas en esta animacin, antes cercirate de que el panel de acciones est activado, de lo contrario actvalo de la siguiente manera: selecciona el men ventana despus da clic en la opcin acciones o utiliza la tecla F9 para activar el panel. Para deshabilitar el panel de acciones puedes realizar el mismo procedimiento. Una vez activado el panel de acciones, verifica que en el filtro que muestra los elementos de la caja de herramientas de acciones estn activadas las opciones para el cdigo ActionScript 1.0 & 2.0. Que es el cdigo que utilizaremos para este curso. 57

Presentaciones Educativas con Adobe Flash

Ahora puedes empezar a agregar el cdigo. El primer cdigo que insertars en la animacin ser en el fotograma uno de la capa acciones, y ser un stop, para indicarle que la pelcula se detenga en este fotograma, as que selecciona el fotograma uno de la capa acciones. En el panel de acciones selecciona el grupo Funciones globales. Ahora da clic en Control de la lnea de tiempo De las opciones que te muestra da doble clic en stop. Automticamente pasa el cdigo al rea de edicin de cdigo. Prueba tu pelcula. Como puedes observar al agregar esta instruccin tu pelcula se detiene en el fotograma 1, que es donde lo insertaste. Guarda tu archivo. Ahora agregars cdigo de Action script a cada uno de los botones. Realiza los siguientes pasos. Del escenario, selecciona el smbolo btn_presentacin. En panel de Acciones selecciona el grupo Funciones globales. Ahora en Control de clip de pelcula. Doble clic en el cdigo on. De las opciones que te muestra selecciona la opcin release. Que quiere decir esta instruccin, que cada vez que des clic en el botn y lo sueltes o dejes de dar clic en l realice una accin. El cdigo hasta aqu debe de ser el siguiente: on (release) { ..} Agrega el cdigo que falta. Primero ubica el cursor dentro de los corchetes que abri la opcin on. 58

Presentaciones Educativas con Adobe Flash

selecciona el grupo Funciones globales, luego Control de lnea de tiempo y finalmente da doble clic en la instruccin gotoAndStop.

Dentro del parntesis coloca el nmero del fotograma al cual deseas que vaya y a la vez se detenga la pelcula. En este caso como la informacin de la presentacin est en el fotograma uno, coloca el nmero 1. El cdigo completo queda de la siguiente manera: on (release) {gotoAndStop(1);}. La lgica de este cdigo es la siguiente: cada vez que liberes el botn ve al fotograma 1 y detente. Prueba tu pelcula. Guarda tu archivo. Slo haz agregado el cdigo al botn Presentacin, falta que le adiciones cdigo a los botones de Justificacin y Propsito. El cdigo para cada botn es muy similar, lo que tienes que cambiar es el fotograma al cual quieres que vaya y se detenga la pelcula cada vez que liberes el botn. Para agregar el cdigo con las instrucciones a los botones restantes realiza el procedimiento que acabas de seguir para el botn Propsito Del escenario, selecciona el smbolo btn_justificacion o btn_proposito. Dependiendo del proceso en el que vayas. En panel de Acciones selecciona el grupo Funciones globales. Ahora en Control de clip de pelcula. Doble clic en el cdigo on. De las opciones que te muestra selecciona la opcin release. Ubica el cursor dentro de los corchetes que abri la opcin on. selecciona el grupo Funciones globales, luego Control de lnea de tiempo y finalmente da doble clic en la instruccin gotoAndStop. Dentro del parntesis coloca el nmero del fotograma al cual deseas que vaya y a la vez se detenga la pelcula. Para el botn Justificacin el cdigo queda: on (release) {gotoAndStop(2); } Para el botn Propsito el cdigo queda: on (release) {gotoAndStop(3); }

59

Presentaciones Educativas con Adobe Flash

Prueba tu pelcula, da clic en el botn Justificacin o Propsito

Al dar clic en cualquiera de estos dos botones, te lleva al fotograma 2 o 3, pero han desaparecido los botones de navegacin y tambin el fondo que tenas en el fotograma nmero 1. Para que toda tu pelcula tenga el mismo diseo debes copiar el contenido del fotograma 1 a la totalidad de los fotogramas que usas en tu pelcula, en este ejercicio son 3, pero claro la cantidad de fotogramas a utilizar pueden variar de acuerdo a lo que quieras desarrollar. Para que todos los fotogramas tengan el mismo fondo, ubcate en el fotograma 3 de la capa fondo e inserta un fotograma. Men Insertar Lnea de tiempo Fotograma o presiona la tecla F5. Para que los botones se muestren en todos los fotogramas, selecciona el fotograma 3 de la capa botones e inserta un fotograma. Presiona la tecla F5. De esta manera, has integrado todos los elementos que aprendiste durante el curso, smbolos, animaciones, Action script, etc. Guarda tu archivo. Prueba tu pelcula.

60

Presentaciones Educativas con Adobe Flash

Una vez que realizaste el ltimo procedimiento, de insertar los fotogramas a las capas de fondo y botones en todos los fotogramas de tu animacin hay un fondo y cuentan con los botones de navegacin, que al dar clic en ellos te muestran la informacin a la que hacen referencia. En esta animacin solo creaste y agregaste algunos smbolos, pero tambin puedes agregar clips de pelcula, pero recuerda no agregar animaciones que distraigan al usuario.

Prctica.
Elige un tema, que al utilizar lo aprendido en este curso, puedas desarrollar tu animacin educativa.

61