Presentaciones Profesionales en Flash

Transcripción

1 Coordinación de Informática Presentaciones Profesionales en Flash Manual del Participante

2 PRESENTACIÓN El Instituto Mexicano del Seguro Social conjuntamente con el Sindicato Nacional de Trabajadores del Seguro Social, comprometidos con la calidad en la superación y actualización del personal, impulsan la Capacitación en materia de Informática, Humanística, Promocional y de programas institucionales que se vinculen a la solución de los problemas en la operación, favoreciendo el otorgamiento de servicios de calidad. En ese contexto la coordinación de informática del Centro Nacional de Capacitación y Calidad comprometida con su modelo educativo se propone el desarrollo de materiales didácticos para el apoyo y mejor aprovechamiento de los participantes. A continuación se presenta el Material de Apoyo Didáctico del Participante Presentaciones Profesionales en Flash, el cual fue desarrollado bajo estrictas normas pedagógicas y didácticas esto con el firme propósito de cumplir su objetivo, el apoyo al participante. IMSS Módulo I 2

3 Este material de apoyo didáctico para el participante está estructurado de la siguiente forma para su mejor comprensión: MÓDULO I INTERFAZ DE FLASH: En este módulo se verán las partes (barras, paneles y herramientas) que componen la ventana de Flash8, también se verá como crear guardar y cerrar documentos de Flash. MÓDULO II MANEJO DE LÍNEA DE TIEMPO Y CAPAS: En este módulo veremos que es la línea de tiempo como esta compuesta y como se maneja, de igual forma veremos como de crean, se eliminan y utilizan las capas, veremos como introducir textos, dibujos creados en Flash y como insertar imágenes. MODULO III SÍMBOLOS: En este módulo veremos los diferentes tipos de símbolos que se emplean en Flash y como se utilizarán dentro de nuestra película, distinguiremos las principales propiedades de cada uno de ellos. MODULO IV ANIMACIONES: En este módulo aprenderemos a crear animaciones profesionales para dar un mejor formato a nuestra presentación. Veremos animaciones tales como alfa, brillo, tinta, transformación por forma entre otras no menos importantes e impactantes. MODULO V INTRODUCCIÓN ACTION SCRIPT: En este módulo se verá el lenguaje de programación de Flash en forma básica, para que de esta manera usted pueda hacer un menú interactivo con el cual se pueda vincular a las demás pantallas de nuestra presentación. MODULO VI CREACIÓN DE PRESENTACIÓN CON MENÚ INTERACTIVO: En este módulo se creara el menú interactivo y se programarán los botones para que nos lleven a otros lugares de nuestra presentación. IMSS Módulo I 3

4 Tabla de contenido Módulo I Explicación de la interfaz Interfaz de Flash Barra de Título: Barra de Menú: Caja de Herramientas: Panel de capas: Panel de Propiedades: Zona de Paneles: Configuración del Documento Dimensiones Color de fondo Numero de fotogramas por segundo Unidades de medida Crear, Guardar, Cerrar, Publicar y Visualizar crear nuevos documentos Guardar Documento Cerrar documento Publicar Visualización de la película Módulo II Manejo de Línea de Tiempo y Capas Presentación con texto Explicación de la Línea de Tiempo Inserción de fotogramas Inserción de capas cambiar el nombre a la capa Inserción de texto Propiedades de texto IMSS Módulo I 4

5 2.1.7 Ejercicio Presentación con dibujos en Flash Dibujar un Círculo Dibujar cuadrado Dibujar una estrella Dibujar figuras sin contorno Propiedades de figuras Dibujar líneas Ejercicio Presentación con Imágenes Importar imágenes a la biblioteca Insertar la imagen en el escenario Ejercicio Módulo III Símbolos Gráficos Insertar una imagen en un gráfico Clip de Película insertar un símbolo clip de película creación de una animación dentro de un clip de película Botones creación de símbolos de botón inserción de sonido en un botón Módulo IV Animaciones Animaciones Animación fotograma por fotograma Animación por interpolación de movimiento Animación por forma Animación por alfa Animación por brillo Animación por tinta Animación con capa guía IMSS Módulo I 5

6 4.1.8 Animación con máscara Módulo V Introducción a Action Script Características generales del Action Script Panel Acciones Operadores Operadores Aritméticos Operadores de Asignación Operadores de Comparación Otros Operadores Detener Stop Ir a la siguiente escena gotoandpay() gotoandstop geturl Módulo VI Creación de Presentación con Menú Interactivo Presentación con Menú Interactivo Introducción Menú Interactivo Notas finales Bibliografía IMSS Módulo I 6

7 Presentaciones Profesionales en Flash Objetivo General: Al concluir el curso el participante empleará las herramientas básicas de Flash 8 para realizar presentaciones de alto impacto en su ámbito laboral y personal. Dirigido A: Personal IMSS SNTSS que tengan dentro de sus labores la creación de presentaciones ya sea para campañas publicitarias o bien presentaciones ejecutivas. Perfil de Ingreso: El participante deberá contar con los cursos Introducción al Uso y Operación de las Microcomputadoras, Windows XP, además de tener conocimientos básicos de diseño y manejo de imágenes. IMSS Módulo I 7

8 Módulo I Explicación de la interfaz Objetivo: Al finalizar el modulo I el participante reconocerá las partes que componen la interfaz de Macromedia Flash, de esta forma el participante aplicará de forma correcta estas herramientas. Introducción: En la actualidad las herramientas que nos ofrecen para hacer presentaciones profesionales son variadas vamos desde el tradicional Power Point de Microsoft hasta la herramienta que en este manual se va a utilizar Macromedia Flash. Al igual que en todo el software Flash cuenta con versiones una de las mas recientes es la 8, cabe mencionar que ahora salió a la venta la nueva versión Flash CS3, la cual ya es de la familia de adobe. Flash es una potente herramienta con la cual podemos crear animaciones de alto impacto, ya sea para la creación de páginas Web o bien para presentaciones tipo Power Point y ahí no termina la cosa podemos hacer los tan famosos demo reals que utilizan los diseñadores para campañas publicitarias, lo único que nos pondrá una barrera será nuestra imaginación. Como se comentaba con anterioridad al ser Flash una potente herramienta esta cuenta con su propio lenguaje de programación Action Script, lo cual nos permite hacer desarrollos potentes que sobrepasan las simples animaciones uno de estos podría ser una sencilla calculadora animada. Sin más preámbulos entremos de lleno a la explicación de la interfaz de Macromedia Flash 8: IMSS Módulo I 8

9 1.1 Interfaz de Flash Al iniciar Flash se muestra la siguiente pantalla en la cual podremos escoger el tipo de proyecto que se va a desarrollar, para el desenvolvimiento de este manual utilizaremos la opción Documento de Flash. Una vez que se ha escogido la opción de documento de Flash se muestra la siguiente pantalla: IMSS Módulo I 9

10 Detallemos la ventana diciendo como está compuesta Barra de Título: en esta barra se nos muestra en primer lugar el icono de aplicación seguido del nombre del programa y nombre del archivo y por último los botones de control, que nos sirven para: minimizar, restaurar y cerrar la aplicación Barra de Menú: tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas... Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa. Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones. Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas... Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en IMSS Módulo I 10

11 mapas vectoriales (este tema se tratará más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena). Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos. Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película. Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a TODOS los Paneles. Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc Caja de Herramientas: Desde aquí podrá seleccionar la herramienta que desee utilizar. Selección Línea Pluma Ovalo Lápiz Transformación libre Bote de pintura Cuenta gotas Sub selección Lazo Texto Cuadro Pincel Transformación relleno Cubo de pintura Borrador IMSS Módulo I 11

12 IMSS Módulo I 12

13 Mano Zoom Color trazo Color relleno Blanco y Negro, Sin color e Intercambiar Ajustar a objetos Suavizar Enderezar Panel Línea de Tiempo: En este panel podrá manipular los tiempos de duración de una animación así como el número de fotograma en que uno está posicionado. Línea de tiempo IMSS Módulo I 13

14 1.1.5 Panel de capas: En este panel podrás tener control sobre el número de capas que van a contener los símbolos y la misma escena. Bloquear/Desbloquear Capas Mostrar/Ocultar Contornos Mostrar/Ocultar capas Insertar capa Insertar Guía Capa Insertar carpeta capas Eliminar Capa Panel de Propiedades: Este panel irá cambiando con respecto al objeto que esté seleccionado Zona de Paneles: En esta zona se muestran los paneles activos un ejemplo de ello es la biblioteca o bien el panel de colores. IMSS Módulo I 14

15 1.2 Configuración del Documento Podemos hacer la configuración del documento y en esta podemos modificar las siguientes propiedades: Dimensiones Clic en el menú modificar Clic en documento Poner el alto y ancho Clic en el botón aceptar Color de fondo Clic en el menú modificar Clic en documento Clic en color de fondo Clic en el color deseado Clic en el botón aceptar IMSS Módulo I 15

16 1.2.3 Numero de fotogramas por segundo Clic en el menú modificar Clic en documento Aumentar o disminuir el número de fotogramas Clic en el botón aceptar Unidades de medida Clic en el menú modificar Clic en documento Cambiar las unidades de medida Clic en el botón aceptar NOTA: Las unidades de medida por defecto son los pixeles, y la velocidad es de 12 fps IMSS Módulo I 16

17 1.3 Crear, Guardar, Cerrar, Publicar y Visualizar Veremos como crear nuevos documentos, como guardarlos, como publicarlos y como abrir documentos existentes, es necesario saber que a los archivos creados en Flash se les va a llamar películas crear nuevos documentos Clic en menú archivo Clic en nuevo Seleccionar documento en flash Clic en el botón aceptar Guardar Documento Clic en el menú archivo Clic en guardar como Seleccionar el lugar destino Teclear el nuevo nombre Clic en el botón aceptar IMSS Módulo I 17

18 1.3.4 Cerrar documento Clic en el menú archivo Clic en cerrar Publicar Cuando se publica un documento de Flash se crean tres archivos el.fla el.swf y el.html, el primero de estos es el archivo editable, el segundo es el archivo ejecutable y el último crea código HTML y se muestra en el navegador. IMSS Módulo I 18

19 Clic en el menú archivo Clic en publicar Visualización de la película Para la visualización de la película solo hay que aplicar la siguiente combinación de teclas y automáticamente se mostrara la animación en una pantalla aparte. Ctrl + enter En esta pantalla se mostrará la animación. Módulo II Manejo de Línea de Tiempo y Capas IMSS Módulo II 19 Manejo

20 Objetivo: Al finalizar el módulo el participante operará la línea de tiempo, capas y manejará las herramientas de texto, trazos e imágenes. Introducción: Cuando empezamos a trabajar en flash necesitamos conocer el manejo de la línea de tiempo y como está compuesta esta (frames). Veremos como introducir texto y que este se mantenga durante un determinado tiempo, para que posteriormente cambie al segundo texto y así sucesivamente, de esta forma se crea una presentación digamos plana sin animaciones. Es importante mencionar el uso de las capas el cual nos servirá para tener un mayor orden dentro de nuestra película y de esta forma nos facilitará las modificaciones en caso de ser necesarias. Crearemos una capa por cada uno de los textos que vamos a introducir y daremos algunos formatos como el tipo de fuente, el color, la alineación entre otros. Es de suma importancia mencionar que la velocidad que tiene por defecto Flash es de 12 fotogramas (frames) por segundo lo cual quiere decir que por cada 12 fotogramas en los que esté el texto, dibujo o imagen transcurrirá un segundo, como se vio en el módulo anterior nosotros podemos cambiar el número de fotogramas. IMSS Módulo II 20 Manejo

21 2.1 Presentación con texto A continuación veremos como crear una presentación con texto y las propiedades del mismo, así como el manejo de la línea de tiempo y capas Explicación de la Línea de Tiempo Esta es la línea de tiempo y del lado izquierdo vemos el panel de capas, en la línea de tiempo vemos unos pequeños recuadros los cuales se llamas fotogramas y son de suma importancia para determinar la duración de nuestra animación Inserción de fotogramas Cuando nosotros decidimos copiar, insertar un fotograma en blanco o bien un fotograma clave se realiza lo siguiente: Tipo de Fotograma Fotograma en Blanco Fotograma clave Arrastrar Fotograma Forma de Inserción F7 F6 F5 Fotograma en blanco: se utiliza cuando se necesita insertar un nuevo texto imagen o dibujo en x fotograma. Fotograma clave: se utiliza cuando se desea crear una animación Copiar o arrastrar fotogramas: se utiliza cuando se desea que solo se muestre un fotograma y no se vaya a crear alguna animación Inserción de capas Clic en el botón insertar capa IMSS Módulo II 21 Manejo

22 2.1.4 cambiar el nombre a la capa Doble clic sobre la capa Teclear el nuevo nombre Dar enter Inserción de texto Colocados en la escena 1 Seleccionar la herramienta texto Ir al documento dar clic sostenido y dibujar una caja de texto Introducir el texto deseado Propiedades de texto Podemos cambiar las propiedades del texto al igual que en Word, su color, su tipo, su tamaño, negritas, itálicas y alineación así como el alto, ancho y coordenadas, las cuales se ven sobre un plano cartesiano ejes X y Y, esto es su posicionamiento dentro de el documento. Seleccionar el texto Ir al panel de propiedades Modificar las propiedades deseadas IMSS Módulo II 22 Manejo

23 2.1.7 Ejercicio 1 Con ayuda del instructor realizar el siguiente ejercicio Que hacer? Crear un nuevo documento Crear 5 capas, cambiarle el nombre a cada una de ellas por el que se le indique. En la capa 1 dibujar un cuadro de texto que diga bienvenidos arrastrar el fotograma para que se muestre durante tres segundos. En la capa 2 ir al fotograma 37 e insertar un fotograma en blanco, dibujar un cuadro de texto que diga al y que se muestre durante dos segundos. En la capa 3 ir al fotograma 62 insertar un fotograma en blanco, dibujar una caja de texto que diga Curso y hacer que se muestre durante tres segundos. En la capa 4 ir al fotograma 99, insertar un fotograma en blanco, dibujar una caja de texto que diga de y que se muestre durante dos segundos. En la capa 5 ir al fotograma 124, insertar un fotograma en blanco, dibujar una caja de texto que diga Presentaciones Profesionales en Flash y que se muestre durante 4 segundos. Guardar el documento con el nombre de: ejercicio1 Reproducir la película IMSS Módulo II 23 Manejo

24 IMSS Módulo II 24 Manejo

25 2.2 Presentación con dibujos en Flash Al igual que en el punto anterior aquí se va a trabajar una pequeña presentación con dibujos creados en Flash, por lo tanto, ya no es necesario repetir la forma en la cual se insertarán los fotogramas y las capas, por lo tanto solo se verá como dibujar algunas de las formas básicas en flash Dibujar un Círculo Veamos como dibujar un círculo en flash, cabe mencionar que cuando nosotros seleccionamos la herramienta de óvalo automáticamente se activan dos propiedades que son el color de relleno y el color de contorno. Realicemos los siguientes pasos: Seleccionar la herramienta de óvalo Dibujar un óvalo en el lienzo Tomemos en cuenta que al dibujar el círculo se crean dos figuras ya que una de ellas es el contorno y la otra es el relleno por lo tanto, cuando tengamos que mover el óvalo habrá que seleccionar las dos figuras, ya que de lo contrario solo se moverá alguna de ellas. IMSS Módulo II 25 Manejo

26 2.2.2 Dibujar cuadrado Al igual que al dibujar un círculo el cuadrado tiene las propiedades de color de contorno y color de relleno, por lo cual al ser dibujado se crean dos figuras una es el contorno y la otra el relleno. Veamos como dibujar nuestro cuadrado. Seleccionar la herramienta rectángulo Dibujar un rectángulo o un cuadrado en nuestro lienzo Dibujar una estrella Para dibujar una estrella es un poco más elaborado pero nada del otro mundo solo hay que decidir de cuantos picos se desea dibujar nuestra estrella y listo veamos como hacerlo: Clic sostenido en la herramienta rectángulo Clic en polígono Ir al panel de propiedades y dar clic en opciones IMSS Módulo II 26 Manejo

27 Seleccionar el estilo: estrella y el número de lados Clic en el botón Aceptar. Dibujar la estrella Dibujar figuras sin contorno Cuando queremos dibujar alguna figura sin contorno solo basta con desactivar el color de contorno y seguir dibujando esto hace que solo quede una figura que es el color de relleno. Veamos como hacerlo en el siguiente ejemplo; cabe mencionar que para cualquier figura será lo mismo. Seleccionar la herramienta óvalo Quitar el color de contorno que se encuentra en la caja de herramientas. Dibujar la figura IMSS Módulo II 27 Manejo

28 2.2.5 Propiedades de figuras Las propiedades de las figuras dibujadas en flash son muy parecidas las más comunes son el alto y el ancho, así como las coordenadas de la misma (x,y), sin dejar a un lado el color que se le pudiese asignar después de dibujada la figura, el color de la misma puede ser sólido o bien degradado en forma lineal o radial Seleccionar la herramienta óvalo Dibujar un óvalo (sin contorno) Ir al panel propiedades y cambiar an y alt (modificar las medidas) Para poder modificar las coordenadas y que nuestra figura quede posicionada en donde deseamos podemos cambiar los valores en el eje de las x y en el eje de las y ; hagamos lo siguiente Seleccionar la figura (esto con la herramienta selección) Ir al panel propiedades y modificar las coordenadas IMSS Módulo II 28 Manejo

29 Veamos como dibujar un círculo con color de fon do degradado en forma radial. Seleccionar la herramienta círculo Quitar el color de contorno Ir al panel color Seleccionar el tipo radial Definir la combinación de colores Dibujar el círculo IMSS Módulo II 29 Manejo

30 2.2.6 Dibujar líneas Podemos dibujar líneas rectas o bien curvas, se tienen entre las herramientas una que se llama lápiz la cual nos sirve para hacer trazos a mano alzada, veamos varios ejemplos de cómo dibujar líneas. IMSS Módulo II 30 Manejo

31 Empecemos con una línea recta. Seleccionar la herramienta línea Seleccionar el color y grosor de la línea (panel propiedades) Dibujar la línea en el lienzo Sigamos con una línea curva Seleccionar la herramienta línea Seleccionar el color y grosor Dibujar la línea Colocar el puntero en el centro de la línea y dar clic sostenido y arrastrar. IMSS Módulo II 31 Manejo

32 2.2.7 Ejercicio 2 Con ayuda del instructor realizar el siguiente ejercicio Que hacer? Crear un nuevo documento Crear 5 capas nombrando a cada una de ellas de la siguiente forma: Capa 1: Círculo Capa 2: Cuadrado Capa 3: Estrella Capa 4: Línea Capa 1: Cara En la capa 1 dibujar un círculo sin contorno y con un degradado radial, el primer color va a ser blanco y el segundo va a ser verde, hacer que dure 3 segundos. En la capa 2 insertar un fotograma en blanco en el fotograma 37 dibujar un cuadrado sin contorno y color de relleno azul y que sea sólido hacer que dure 3 segundos. En la capa 3 insertar un fotograma en blanco en el fotograma 74 dibujar una estrella de 5 picos sin contorno y color de relleno degradado radial donde: el primer color sea morado y el segundo azul, hacer que se muestre durante 2 segundos. En la capa 4 insertar un fotograma en blanco en el fotograma 99 dibujar tres líneas con un grosor de 5 ptos cada una hacer que se muestren durante 2 segundos. En la capa 5 insertar un fotograma en blanco en el fotograma 123 en esta capa vamos a dibujar varia figuras la primera será un círculo grande de an: 152 y alt: 152 y color amarillo, después dibujar dos círculos que van a ser los ojos sin contorno y de color rojo de an: 27 y alt: 27 posteriormente dibujar una línea y curvearla para que sea la boca de 4 y de color rojo hacer que se vea durante 3 segundos. Guardar el archivo con el nombre ejercicio2 IMSS Módulo II 32 Manejo

33 Visualizar la película. 2.3 Presentación con Imágenes Para poder hacer una presentación con imágenes es necesario importar dichas a flash, el lugar donde se van a guardar es en la biblioteca, pero hay que mencionar que al importar una imagen a nuestra biblioteca automáticamente la convierte en un mapa de bits. Motivo por el cual si nosotros deseamos animar la imagen será necesario crear un símbolo gráfico y arrastrar el mapa de bits dentro de él. Como se mencionó con anterioridad la imagen se guarda en la biblioteca como mapa de bits sin importar el formato que esta tenga en un principio. Mostraremos una imagen importada en la biblioteca. De esta forma nosotros podremos utilizar la imagen cuantas veces sea necesario y podremos visualizar y tener un pleno control sobre las imágenes importadas a nuestra biblioteca Importar imágenes a la biblioteca Para importar una imagen a nuestra biblioteca solo hay que realizar los siguientes pasos: Clic en el menú archivo Posicionarse sobre importar Clic en importar a la biblioteca IMSS Módulo II 33 Manejo

34 Buscar y seleccionar la imagen Clic en el botón abrir Y listo el resultado será el siguiente: Insertar la imagen en el escenario Una vez importada la imagen a la biblioteca lo siguiente será utilizarla y de que forma haremos esto: lo único es llevarla al escenario y listo se podrá utilizar, para ello haremos lo siguiente: IMSS Módulo II 34 Manejo

35 Seleccionar la imagen de la biblioteca (clic sostenido) Arrastrar al lienzo y soltar Esto nos insertará la imagen con su tamaño original y quedará de la siguiente forma: Cabe mencionar que al igual que las figuras dibujadas en flash las imágenes que se importan a la biblioteca tienen las propiedades de alto, ancho y sus coordenadas, las cuales para ser modificadas hay que ir al panel de propiedades y darle los nuevos valores. IMSS Módulo II 35 Manejo

36 Con esto terminamos de ver el apartado para imágenes, ahora bien hagamos nuestro ejercicio para que reforcemos nuestros conocimientos Ejercicio 3 Ahora bien con lo realizado en los ejercicios anteriores usted será capaz de realizar este pequeño ejercicio, siga las instrucciones que se dan a continuación: Que hacer? Crear un nuevo documento Crear 11 capas, cambiarle el nombre a cada una de ellas por: Capa1=ima1, capa2=ima2 y así sucesivamente. Importar a la biblioteca las imágenes que se encuentran en la carpeta bbs. Posteriormente realizar los siguientes pasos: En la capa 1 arrastrar la imagen1 y hacer que se muestre durante dos segundos. IMSS Módulo II 36 Manejo

37 En la capa 2 ir al fotograma 25 e insertar un fotograma en blanco, arrastrar la imagen 2 y hacer que se muestre durante dos segundos. Repetir los pasos hasta terminar en la capa 11. Guardar el documento con el nombre de: ejercicio 3 Reproducir la película IMSS Módulo II 37 Manejo

38 Módulo III Símbolos Objetivo: Al finalizar el módulo el participante distinguirá entre los diferentes tipos de símbolos que se pueden insertar en flash y la forma de utilizar los mismos. Introducción: En un principio sabremos la forma de inserción delos símbolos los cuales son: Gráfico Clip de película Botones Cuando nosotros queremos crear animaciones con imágenes lo primero que habría que hacer es convertirlo a un símbolo gráfico para que posteriormente lo ingresemos a un clip de película. Cabe mencionar que los botones pueden contener animaciones y a su vez sonidos y deben de estar programados para que nos lleven a un lugar en específico. Es muy importante el saber el funcionamiento de cada uno de los símbolos ya que son parte medular en las animaciones que crearemos en flash. Los tres tipos de símbolos al ser creados se quedan guardados en nuestra biblioteca y lo que tendremos que hacer es arrastrarlos al escenario cada vez que estos sean requeridos. Cada símbolo posee una Línea de tiempo y un Escenario únicos, completo con capas. Al crear un símbolo, debe elegir cómo se va a comportar el símbolo, en función cómo se utilizará en la película. IMSS Módulo III 38

39 3.1 Gráficos Cuando hablamos de los símbolos gráficos es necesario identificar primeramente su icono y posteriormente saber que, un símbolo gráfico va ser un contenedor de una imagen importada a nuestra biblioteca, de esta forma usted podrá dar animación a dicha imagen. Utilice símbolos gráficos para las imágenes estáticas y para crear piezas de animación reutilizables ligadas a la Línea de tiempo de la película principal. Estos símbolos están sincronizados con la Línea de tiempo de la película principal. Los controles y sonidos interactivos no funcionan en la secuencia de animación de un símbolo gráfico Insertar una imagen en un gráfico Como ya se había visto con anterioridad, al importar una imagen a la biblioteca esta se queda como mapa de bits; ahora veamos como insertar un mapa de bits dentro de un símbolo gráfico, realicemos los siguientes pasos: Importar la imagen a la biblioteca Clic en el menú insertar Clic en nuevo símbolo Seleccionar el tipo de símbolo (gráfico) Ponerle el nombre al símbolo Clic en el botón aceptar Arrastrar el mapa de bits al escenario del símbolo Ponerle coordenadas (0,0) IMSS Módulo III 39

40 De esta forma nuestro símbolo gráfico está listo para usarse cuando y las veces que sea necesario. NOTA: Es recomendable anteponerle al nombre del gráfico el prefijo GR para que de esta forma se pueda distinguir mejor que se trata de un símbolo gráfico, claro además de su ícono. 3.2 Clip de Película Utilice símbolos de clip de película para crear piezas de animación reutilizables. Los clips de películas tienen sus propias líneas de tiempo de varios fotogramas que se reproducen de independientemente de la Línea de tiempo de la película principal; piense en ellos como en mini-películas dentro de una película principal que pueden contener controles, sonidos e incluso otras instancias de clip de película interactivos. También pueden IMSS Módulo III 40

41 colocarse instancias de clip de película dentro de la Línea de tiempo de un símbolo de botón para crear botones animados, además un clip de película puede contener otros clips de película dentro de su línea de tiempo. IMSS Módulo III 41

42 Puede asignar parámetros de clip (variables con valores) a un clip de película para crear un clip "inteligente". Puede agregar acciones de clip y construir scripts para el clip inteligente para crear elementos de interfaz, como botones de radio, menús desplegables o información sobre herramientas, que respondan a los clics de ratón y a otros eventos. Para efectos prácticos veamos una sencilla animación dentro de un símbolo clip de película, esta animación será fotograma por fotograma. Cabe mencionar que como se vio al principio de este manual la velocidad de reproducción de una película en flash es de 12fps insertar un símbolo clip de película Clic en el menú insertar Clic en nuevo símbolo Clic en clip de película Ponerle el nombre Clic en el botón aceptar creación de una animación dentro de un clip de película Una vez que se haya creado el símbolo clip de película se mostrara en la barra de título el siguiente icono que nos indica que es un clip de película y que además se esta posicionado dentro de el motivo por el cual empezaremos a realizar nuestra animación. IMSS Módulo III 42

43 En la capa 1 fotograma 1 dibujar un círculo sin contorno de color rojo y copiar el fotograma clave (F6) hasta llegar al fotograma 13, posteriormente colocarnos en el fotograma 2 y dar suprimir, luego en el fotograma4, 6, 8, 10, 12, y listo la animación ya esta creada; solo falta regresar a la escena 1 y arrastrar el clip de película al escenario y dar ctrl + enter. 3.3 Botones Utilice símbolos de botón para crear botones interactivos en la película que respondan a los clics y desplazamientos del ratón, o demás acciones. Defínalos gráficos asociados con varios estados del botón y, a continuación, asigne acciones a una instancia del botón. Los botones son realmente clips de película interactivos de cuatro fotogramas. Cuando se selecciona el comportamiento del botón para un símbolo, Flash crea una Línea de tiempo con cuatro fotogramas. Los tres primeros fotogramas muestran los tres posibles estados del botón; el cuarto fotograma define el área activa del botón. La Línea de tiempo no se reproduce realmente; simplemente reacciona a los movimientos y acciones del puntero saltando al fotograma correspondiente. IMSS Módulo III 43

44 Para que un botón sea interactivo en una película, coloque una instancia del símbolo del botón en el Escenario y asigne acciones a la instancia. Las acciones deben asignarse a la instancia del botón en la película y no a los fotogramas en la Línea de tiempo del botón. Cada fotograma de la Línea de tiempo de un símbolo de botón tiene una función específica: El primer fotograma es el estado Reposo, representa el botón siempre que el puntero no esté sobre él. El segundo fotograma es el estado Sobre, representa el aspecto del botón cuando el puntero se encuentra sobre el mismo. El tercer fotograma es el estado Presionado, representa el aspecto del botón cuando se hace clic sobre el mismo. El cuarto fotograma es el estado Zona activa, define el área que responderá al clic del ratón. Esta área es invisible en la película. Los botones son símbolos que van programados, los cuales nos pueden llevar a algún determinado lugar como una dirección URL o bien algún lugar dentro de la escena o en su defecto a otra escena; para ello necesitamos programarlos, en el módulo de action script se verá la forma de hacerlo, por el momento nos dedicaremos a la creación de los botones creación de símbolos de botón Para crear un botón realice los siguientes pasos: Clic en el menú insertar Clic en nuevo símbolo Clic en botón Ponerle el nombre Clic en el botón aceptar IMSS Módulo III 44

45 Una vez creado el botón tendremos que hacer lo siguiente: haremos una capa fondo y otra capa texto, en la primera crearemos un recuadro de un color en su primer estado (reposo), en el estado sobre copiaremos el fotograma clave y le cambiaremos el color a dicho recuadro, haciendo lo mismo en el estado presionado, posteriormente crearemos un texto en el estado reposo en la capa llamada texto, copiaremos el fotograma clave en los demás estados. Esta es la forma en la cual se visualiza el símbolo botón antes de crear las capas, figuras y texto. Nótese los tres estados y que solo el primer estado tiene un fotograma en blanco. IMSS Módulo III 45

46 Ahora veamos la forma en la cual se vera una vez que se haya creado el botón, ponga atención en los fotogramas de los estados. Ahora bien cabe mencionar que a un botón se le puede agregar sonido y animaciones veamos la forma de hacerlo: inserción de sonido en un botón Para esta acción utilizaremos el ejemplo anterior el del botón entrar para ahorrar un poco de tiempo. Una vez creado el botón hagamos lo siguiente: Abrir el símbolo botón dando doble clic sobre su icono en la biblioteca. Insertemos una nueva capa, nombrémosla como sonido Importar el sonido a la biblioteca En la capa sonido en el fotograma del estado sobre insertar un fotograma en blanco Arrastrar el sonido de la biblioteca a cualquier parte de la escena Listo veamos el resultado. IMSS Módulo III 46

47 Módulo IV Animaciones Objetivo: Al finalizar el módulo el participante creará animaciones para dar un mejor formato a su presentación. Introducción: Cuando hablamos a cerca de las animaciones creadas en flash podemos poner como único limitante nuestra propia creatividad ya que estas animaciones se pueden combinar varias para crear una de alto impacto. Es necesario mencionar que estas animaciones no solamente se pueden usar en una presentación sino que también se crean animaciones para las páginas Web, esto las hace más atractivas para sus visitantes. Hay varios tipos de animaciones en flash unas de las más importantes son las siguientes y las estaremos desarrollando en este manual. Animación fotograma por fotograma Animación con interpolación de movimiento Animación por forma Animación alfa IMSS Módulo IV 47

48 Animación brillo Animación tinta Animación con capa guía Animación con máscara IMSS Módulo IV 48

49 4.1 Animaciones Ahora bien veamos como crear cada una de las animaciones antes mencionadas, esto se hará mediante prácticas sencillas para cada una y al finalizar el módulo usted hará su propia animación combinando dos o más de las animaciones, eso dependerá de nuestra creatividad Animación fotograma por fotograma En este apartado se verá como crear una animación fotograma por fotograma la cual será una estrella que dará el efecto parpadeante es decir, de destellos. Crearemos un clip de película y posteriormente seguiremos las instrucciones abajo mencionadas. En la capa 1 fotograma 1 dibujar una estrella sin contorno de color azul degradado y copiar el fotograma clave (F6) hasta llegar al fotograma 13, posteriormente colocarnos en el fotograma 2 y dar suprimir, luego en el fotograma4, 6, 8, 10, 12, y listo la animación ya esta creada; solo falta regresar a la escena 1 y arrastrar el clip de película al escenario y dar ctrl + enter. Así se vería la línea de tiempo: Y así se vería la escena i en si capa uno en el primer fotograma: IMSS Módulo IV 49

50 4.1.2 Animación por interpolación de movimiento Ahora crearemos una animación con interpolación de movimiento, la cual será una pelota que rebota contra el piso, pero cabe mencionar que estos rebotes serán en forma diagonal. Cabe mencionar que cuando creamos una animación con interpolación ya sea de movimiento o de forma se necesita definir los estados que va a ocupar el objeto un ejemplo podría ser estado inicial estado 1 estado 2 y el estado n (Vo, V1, V2, Vn,.Vf) Crear un símbolo clip de película, realizar lo siguiente: En la capa 1 dibujar un círculo sin contorno de 41.0 de diámetro y coordenadas (30,30) Ir al fotograma 12 y copiar el fotograma el fotograma clave (F6) Regresar al fotograma 1 y dar clic derecho sobre el y clic en crear interpolación de movimiento. La línea de tiempo se vera de la siguiente forma: IMSS Módulo IV 50

51 Ahora ir al fotograma 12 y seleccionar el circulo dando clic sobre el con la herramienta de selección. Cambiarle las coordenadas por (157,170) Ir al fotograma 24 y copiar el fotograma clave (F6) Regresar al fotograma 12 y crear la interpolación de movimiento Ir al fotograma 24 Seleccionar el círculo y ponerle las coordenadas (266,30). La línea de tiempo quedará de la siguiente forma y notemos que en el fotograma 1 es el Vo, el fotograma 12 es el V1 y el fotograma 24 sería el último estado Vf con una trayectoria de desplazamiento diagonal. Repetir los pasos anteriores dependiendo del número de rebotes que desee uno que de la pelota, es necesario recordar el numero de fotogramas por segundo esto para saber cuanto tiempo va a tardar en rebotar la pelota en este ejemplo se tarda 1 segundo por rebote Animación por forma Cuando creamos una animación por forma lo que vamos a hacer es que un texto o bien una imagen se transforme a otra, veamos un ejemplo muy sencillo, solo será la transformación de un texto el cual se va a mostrar por unos segundos y posteriormente cambiara a otro de igual forma este se mostrará por uno segundos. Hagamos lo siguiente: Crear un clip de película Crear un texto que diga Bienvenido al curso Hacer que se muestre durante dos segundos (fotograma 24 F6) Ir al fotograma 36 e insertar un fotograma en blanco (F7) IMSS Módulo IV 51

52 Dibujar un texto que diga Presentaciones profesionales en flash Hacer que se muestre durante dos segundos Regresar al fotograma 24 Seleccionar el texto dando clic derecho sobre él Clic en separar Nuevamente dar clic derecho sobre el texto Clic en separar Ir al fotograma 36 y dar clic derecho sobre el texto Clic en separar Nuevamente dar clic derecho sobre el texto Clic en separar Regresar al fotograma 24 Ir al panel de propiedades y en el apartado de animación seleccionar la que dice forma. Regresar a la escena 1 y arrastrar el clip de película. Veamos como queda la línea de tiempo: IMSS Módulo IV 52

53 4.1.4 Animación por alfa En este tipo de animaciones lo que se hace es que una imagen, texto o bien un dibujo creado en flash aparezca o desaparezca, es decir que su tonalidad vaya disminuyendo hasta que quede en cero, lo cual va a dar el efecto de desaparición de nuestro objeto, veamos como crear esta sencilla animación. Insertar un símbolo clip de película Importar a la biblioteca la imagen Crear un símbolo grafico y arrastrar el mapa de bits con coordenadas (0,0). Regresar al símbolo clip de película Arrastrar el símbolo grafico dentro del clip de película con coordenadas (0,0). Copiar el fotograma clave en el fotograma 24 Regresar al fotograma 1 dar clic derecho y crear la interpolación de movimiento. El fotograma 1 será mi estado inicial el cual permanecerá visualizado alfa 100% Ir al fotograma 24 seleccionar la imagen Ir al panel propiedades y cambiar el color por alfa y el porcentaje por 0% IMSS Módulo IV 53

54 Regresar a la escena 1 y arrastrar el mc_alfa a la escena Dar ctrl + enter De esta forma queda nuestra línea de tiempo IMSS Módulo IV 54

55 4.1.5 Animación por brillo La animación por brillo es que un objeto (imagen texto o bien una figura) valla cambiando de un color negro es decir una silueta hasta quedar en su color original y posteriormente se le puede dar la animación de desaparecer igual con brillo, ya que esto se manejo como el brillo de un televisor el cual, si se pone en lo mas bajo se ve de color negro y si se pone en lo más alto se ve de color blanco. En este caso se utiliza la medida porcentaje, si queremos que nuestro objeto se vea de color negro lo que tenemos que hacer es poner el brillo hasta -100% y por el contrario si queremos que se vea traslucido lo tendremos que poner en 100%. Realicemos nuestra animación: Crear un símbolo clip de película Importar la imagen a la biblioteca Convertir la imagen en grafico Abrir el clip de película Arrastrar el grafico con coordenadas (0,0) Ir al fotograma 24 y copiar fotograma clave Ir al fotograma 48 y copiar fotograma clave Ir al fotograma 1 clic derecho y crear la interpolación de movimiento seleccionar la imagen. Ir al panel de propiedades y cambiar el color por brillo y porcentaje - 100% IMSS Módulo IV 55

56 Ir al fotograma 24 cambiar el porcentaje de brillo a 0% Ir al fotograma 48 cambiar el porcentaje de brillo a 100% Veamos como queda nuestra línea de tiempo Ir a la escena 1 y arrastrar el clip de película Dar ctrl + enter IMSS Módulo IV 56

57 IMSS Módulo IV 57

58 4.1.6 Animación por tinta En la animación por tinta lo que se hace es que un objeto vaya cambiando de tonalidad es decir de color pero gradualmente sin que la imagen original se muestre solo una silueta y la figura completa aparecerá en el momento que yo lo desee. El efecto de Tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en textos y en botones, por ejemplo haciendo que cambien progresivamente de color al pasarles el ratón por encima o simplemente efectos de cambio de color en presentaciones. El tintar colores supone unos toques alegres y muy vistosos en las presentaciones y si se usan varios efectos, combinados adecuadamente, dota de un ritmo rápido a la animación, como una explosión de color que sorprenda al receptor de la película. Creemos enseguida nuestra animación: Crear un símbolo clip de película Importar la imagen a la biblioteca Convertir la imagen en grafico Abrir el clip de película Arrastrar el grafico con coordenadas (0,0) Ir al fotograma 24 y copiar el fotograma clave Ir al fotograma 48 y copiar el fotograma clave Ir al fotograma 1 crear la interpolación de movimiento Seleccionar la imagen y poner color tinta, escoger el color negro IMSS Módulo IV 58

59 IMSS Módulo IV 59

60 Ir al fotograma 24 crear la interpolación de movimiento Seleccionar la imagen y poner color tinta, escoger el color gris Por último ir al fotograma 48 seleccionar la imagen y poner color tinta escoger cualquier color y en el área de porcentaje poner 0%. Ir a la escena 1 y arrastrar el clip de película Dar ctrl + enter Animación con capa guía Recordemos que cuando creamos una animación por interpolación de movimiento, este desplazamiento lo realiza el objeto en forma recta, si queremos que siga una trayectoria de desplazamiento creada por nosotros, es necesario insertar una capa guía en la cual dibujaremos con la herramienta lápiz una línea curva, para que de esta forma el objeto se guie y cubra esta trayectoria. Veamos como realizarla: IMSS Módulo IV 60

61 Crear un símbolo clip de película Importar la imagen avion a la biblioteca Convertir la imagen en grafico Abrir el clip de película Arrastrar el grafico con coordenadas (0,0) Insertar una capa guía Dibujar con la herramienta lápiz la trayectoria de desplazamiento en el fotograma 1 de la capa guía Ir al fotograma 48 de la capa 1 y copiar el fotograma clave Ir al fotograma 48 de la capa guía y copiar el fotograma (F5) Regresar al fotograma 1 de la capa 1 y crear la interpolación de movimiento Agarrar el centro de la imagen y colocarlo al inicio de la trayectoria en el fotograma 1 Ir al fotograma 48 seleccionar el centro de la imagen y hacer que coincida con el final de la trayectoria de desplazamiento. De esta forma debe de quedar nuestra línea de tiempo IMSS Módulo IV 61

62 IMSS Módulo IV 62

63 4.1.8 Animación con máscara En la animación con máscara lo que se realiza es: una interpolación de movimiento, la cual va a tener un espacio determinado por otro objeto dibujado en flash y pasará por este objeto únicamente mostrando la animación dentro del espacio delimitado. Veamos como crear esta animación. En esta animación modificaremos el tamaño del documento a 800 x 600 Crear un símbolo clip de película Importar la imagen a la biblioteca Convertir la imagen en grafico Abrir el clip de película Arrastrar el grafico con coordenadas (0,0) en la capa 1 y renombrarla como fondo Crear dos capas más A la capa2 ponerle el nombre de línea y dibujar una línea color blanco de 23 pts de grosor y colocarla hasta arriba de la imagen IMSS Módulo IV 63

64 Dar clic derecho sobre la capa 3 y clic en máscara Quitar los candados de las capas para que se puedan modificar Ir al fotograma 1 de la capa máscara Seleccionar la herramienta pluma y dibujar el contorno de la imagen. Ir al fotograma 60 de la capa fondo y copiar el fotograma Ir al fotograma 30 de la capa línea y copiar fotograma clave Ir al fotograma 60 de la capa línea y copiar el fotograma clave Ir al fotograma 60 de la capa 3 y copiar el fotograma Regresar al fotograma 1 de la capa línea y crear la interpolación de movimiento IMSS Módulo IV 64

65 Ir al fotograma 30 de la capa línea y crear otra interpolación de movimiento IMSS Módulo IV 65

66 En el fotograma 30 capa línea seleccionar la línea y colocarla en la parte inferior, donde nuestra imagen termina Regresar a la escena 1 y arrastrar el clip de película con coordenadas (235,18) Dar ctrl + enter IMSS Módulo IV 66

67 Módulo V Introducción a Action Script Objetivo: Al finalizar el módulo el participante conocerá las acciones fundamentales del lenguaje de programación Action script 2.0 para flash. Introducción: El Action Script es el lenguaje de programación que ha utilizado Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash 8. A grandes rasgos, podemos decir que el Action Script nos permitirá realizar con Flash 8 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una película Flash. Absolutamente de todo. Sin embargo, sólo vamos a ver una pequeña introducción a Action Script que servirá para sentar las bases que permitirán empezar a trabajar con Action Script. Enseñar a programar con Action Script requeriría otro curso completo. Profundizar en el conocimiento de este lenguaje queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en Flash 8. Todo lo referente a este capítulo hace referencia a la versión 2 de Action Script, última versión de este lenguaje de programación lanzada por Macromedia e incorporada en Flash MX IMSS Módulo V 67

68 5.1 Características generales del Action Script Como ya hemos comentado, el Action Script es el lenguaje de programación propio de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El Action Script está basado en la especificación ECMA-262, al igual que otros lenguajes como Javascript. El Action Script es, como su nombre indica, un lenguaje de script, esto quiere decir que no hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de fragmentos de código Action Script a los objetos existentes en nuestras películas nos permiten alcanzar nuestros objetivos. El Action Script es un lenguaje de programación orientado a objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc... y aunque, evidentemente, no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores, cada versión se acerca más a un lenguaje de este tipo. Así, la versión 2.0 estrenada en Flash MX 2004 es mucho más potente y mucho más "orientada a objetos" que su anterior versión 1.0 El Action Script presenta muchísimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de Action Script le resultarán muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaña al Flash 8. En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash 8 pone a nuestra disposición una impresionante colección de "funciones" (de momento entenderemos "funciones" como "código Action Script que realiza una función determinada") ya implementadas que realizan lo que buscamos, bastará con colocarlas en el lugar adecuado. IMSS Módulo V 68

69 5.2 Panel Acciones En Flash 8, el Panel Acciones sirve para programar scripts con Action Script. Esto es, que todo lo que introduzcamos en dicho Panel se verá reflejado después en nuestra película. Debemos tener claro desde un principio que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo que el código Action Script introducido afectará tan sólo a aquello a lo que referencia el Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el Panel Acciones hace referencia al Fotograma 1 de la Capa 1. El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada por Flash que nos da acceso de un modo rápido y muy cómodo a todas las acciones, objetos, propiedades etc... que Flash tiene predefinidos. Estos elementos están divididos en carpetas, que contienen a su vez más carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra disposición. Para insertarlos en nuestro script bastará con un doble clic sobre el elemento elegido. 5.3 Operadores Entrando un poco más a fondo en la sintaxis y el manejo del Action Script, vamos a comenzar hablando de los operadores, por ser la parte más elemental de una acción de Action Script (y de muchísimos otros lenguajes de programación). Un operador es un tipo de carácter que realiza una acción especial dentro de una expresión de Action Script. Una expresión no es más que un conjunto de operadores, variables y constantes relacionados entre sí de un cierto modo. Flash 8 sacará un resultado de toda expresión que encuentre en nuestra película. Por ejemplo: IMSS Módulo V 69

70 x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x ' el valor 3 (que es una constante) y = 5 + x ; --> Es una expresión cuyo resultado será asignarle a la variable ' y ' la suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque le hemos asignado este valor antes). Por tanto, el resultado de esta expresión es asignarle a ' y ' el valor 8 (3 + 5). Flash nos permite usar multitud de operadores, vamos a comentar los más comunes. El lector puede acceder a los demás (y a estos) desde el Panel Acciones en la carpeta Operadores. Vamos a clasificar los operadores tal y cómo lo hace Flash Operadores Aritméticos + : Suma. Este operador sirve, como es de esperar, para sumar 2 valores. - : Resta. Realiza la operación esperada de restar 2 valores. * : Multiplicación. Realiza el producto de 2 valores / : División. Es la clásica operación de dividir. Al contrario que en algunos lenguajes de programación, este operador sí que realiza la división completa (incluyendo decimales) % : Operador Resto. Este operador, no muy conocido en matemática, es un clásico de la programación. Devuelve el resto entre 2 números. Ejemplo: 4 % 3 = 1, 4 % 2 = Operadores de Asignación = : Igual. Este es el operador más importante de esta categoría y sin duda, uno de los más usados. Almacena el valor situado en la parte derecha de una expresión en la variable situada en la parte izquierda. Ej: x = Almacena en la variable x el valor de (2 + 3). El resto de operadores de esta categoría son en realidad formas de realizar varias operaciones de una vez, describiremos uno a modo de ejemplo, el resto funcionan exactamente igual. IMSS Módulo V 70

71 += : MásIgual. Este operador asigna a la expresión situada a la izquierda del operador el valor resultante de sumar la expresión situada a la parte derecha con la expresión de la parte izquierda. Ejemplo: (Suponemos que x = 4 e y = 3) entonces, la expresión x += y provocaría que x pasase a valer el resultado de sumar ( ). Por tanto, la expresión x += y es equivalente a hacer: x = x + y Operadores de Comparación == : Probar Igualdad. Este operador sirve para comprobar si 2 expresiones son iguales. Si lo son, el valor de la expresión de comparación es 'true', que significa 'verdadero'. Por motivos semánticos, decir que una expresión es true es equivalente a decir que vale 1. Si no son iguales, devuelve 'false' (falso) o el valor 0. Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy útil para comprobar muchas cosas durante nuestra película y en función de ellas, hacer unas cosas u otras. Pondremos un ejemplo, imaginemos que le pedimos a un usuario que introduzca su edad en un campo de texto de nuestra película flash. A ese campo le llamamos "edad_usuario". Le hacemos pulsar un botón "Continuar" y en ese momento comprobamos su edad, si tiene 20 años, le decimos una cosa, de lo contrario, le decimos otra distinta. Bastaría con hacer algo así: if ( edad_usuario == 20 ) { dar_mensaje_1; } else { dar_mensaje_2; } Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es igual a 20, entonces damos el mensaje 1, sino lo es, damos el mensaje 2. El significado de 'if' y 'else' lo veremos más adelante, de modo que no nos preocupemos por no entender perfectamente el código escrito arriba. También faltaría, lógicamente, crear las funciones "dar_mensaje_1" y "dar_mensaje_2". IMSS Módulo V 71

72 > : Mayor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es mayor que la de la derecha. De lo contrario, devuelve false (0). < : Menor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es menor que la de la derecha. De lo contrario, devuelve false (0). >= : Mayor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es mayor o igual que la de la derecha. De lo contrario, devuelve false (0). <= : Menor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es menor o igual que la de la derecha. De lo contrario, devuelve false (0).!= : Probar Desigualdad. Devuelve como resultado verdadero (1) si la expresión de la izquierda es diferente a la de la derecha. De lo contrario, devuelve false (0). Ejemplo: 3!= 4 provocaría que la expresión total valdría 1 (true o verdadero). Pues 3 es, efectivamente, distinto de Otros Operadores ( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar preferencias en las operaciones (al igual que en las matemáticas). También se usa, como ya vimos, para pasar parámetros a funciones o acciones. (Éstos deben ir entre paréntesis) " " : Comillas. En Action Script, todo lo que va entre comillas, pasa a considerarse una cadena de caracteres, por lo que las funciones y acciones que afectan exclusivamente a las cadenas de caracteres pasan a afectar también al elemento entre comillas. Así por ejemplo, mientras que x representa una variable con un valor determinado, si escribimos "x", estamos escribiendo en realidad el carácter o la letra "x". Por tanto, podremos añadirlo a una palabra, compararlo con otras letras, escribirlo por pantalla etc.. pero ya no será una variable. Bien ahora que hemos dado una pequeña introducción acerca de lo que es Action Script entremos de lleno al código realizando ejemplos muy sencillos. IMSS Módulo V 72

73 5.4 Detener Stop Es necesario mencionar que al utilizar la programación en Action Script podemos usarla dentro de una capa o bien en un objeto como sería un botón. Cuando nosotros programamos o bien colocamos un stop en un fotograma determinado de una capa lo que le indicamos a Flash es que en ese fotograma se detenga sin importar lo que exista mas adelante, es decir, detiene la reproducción de la película. Se puede usar en un fotograma, cuando queramos detenernos en él (porque es un menú, por ejemplo), en un botón, (para que detenga la película) etc. Sintaxis: Ejemplo: Stop(); No tiene Parámetros Para ver este ejemplo necesitaremos abrir el archivo ejercicio_2 Insertar una nueva capa con el nombre acciones Ir al fotograma 123 e insertar un fotograma en blanco Activar el panel acciones Poner el stop, queda de la siguiente forma en el panel acciones: IMSS Módulo V 73

74 Y este icono queda en el fotograma programado: IMSS Módulo V 74

75 5.5 Ir a la siguiente escena Cuando queremos ir a la siguiente escena se necesita programar un botón, la sintaxis será la siguiente Sintaxis: on (press) { } Ejemplo: nextscene(); En este ejemplo programaremos un botón para que nos lleve a la siguiente escena, veamos como realizarlo: Crear un nuevo documento Insertar un símbolo clip de película Creemos una animación de una pelota que se desplaza de un lugar a otro Insertar una nueva capa llamada acciones Ir al último fotograma de la capa acciones e insertar un fotograma en blanco Abrir el panel acciones y poner un stop Regresar al a escena 1 arrastrar el clip de película Insertar una nueva capa llamada botón Crear un símbolo botón que tenga como texto entrar Regresar a la escena1 y en la capa botón arrastrar el símbolo botón en la parte inferior derecha Insertar una nueva escena imagen e insertar una IMSS Módulo V 75

76 Regresar ala escena1 Seleccionar el botón y entrar al panel de acciones y escribir lo siguiente: Insertar una capa con el nombre acciones y abrir el panel de acciones y poner un stop La línea de tiempo de la escena 1 queda de la siguiente forma: Y la línea de tiempo de la segunda escena queda de la siguiente forma: Dar ctrl + enter IMSS Módulo V 76

77 Presionar el botón y ver como nos envía a la segunda escena 5.6 gotoandpay() Cuando decimos que deseamos ir a un fotograma en específico es necesario programar un botón para que este nos lleve a un determinado lugar, esto nos va servir para crear nuestro menú interactivo. Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra película, esto es, para indicar a Flash en todo momento qué fotograma tiene que mostrar, cuándo tiene que parar, dónde seguir etc... Veámoslas y lo entenderemos mejor: gotoandplay / goto: Esta acción será, probablemente la que más se use durante la realización de nuestras películas. La acción que realiza consiste en mover la cabeza lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qué fotograma de nuestra película se está reproduciendo en cada momento. Si, por ejemplo, lo movemos del fotograma 1 al 25, lo que veremos instantáneamente será el fotograma 25 y la película continuará reproduciéndose a partir de ahí. Veamos cual es la sintaxis: Sintaxis: gotoandplay(fotograma): Fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Ejemplo: gotoandplay(25); --> Esta acción lleva la cabeza lectora al fotograma 25 de la escena. Creamos un nuevo documento Creamos un nuevo símbolo clip de película IMSS Módulo V 77

78 Hacer la animación de transformación por forma de un texto y poner un stop Crear un botón que diga fotograma 25 Ir a la escena 1 En la capa 1 arrastrar el símbolo botón Crear una nueva capa Abrir el panel acciones y poner un stop Ir al fotograma 25 e insertar un fotograma en blanco Arrastrar el clip de película Regresar al fotograma 1 de la capa 1 y seleccionar el botón Abrir el panel acciones Teclear el siguiente código: 5.7 gotoandstop Al igual que en el ejemplo anterior este se utiliza cuando deseamos i a un fotograma en específico, pero en este pequeño pedazo de código le estamos indicando que vayqa a x fotograma y que se detenga con esto nos ahorramos el stop. Sintaxis: { } gotoandstop(25); IMSS Módulo V 78

79 Ejemplo: Con el ejemplo anterior hay que trabajar por tanto necesitamos abrirlo, ahora bien una vez abierto este veamos la línea de tiempo y notemos que en el fotograma25 de la capa acciones tenemos un stop, bien eliminemos esta capa. Ir a la capa 1 y seleccionar el símbolo botón Abrir el panel de acciones Y cambiar el código por el siguiente: on (press) { } gotoandstop(25); Listo con esto esta terminado nuestro ejemplo Guárdalo con otro nombre Dar ctrl +enter Y reprogramemos el botón 5.8 geturl En esta ocasión lo que se va a ver es como al programar un botón, este nos va a llevar a una dirección URL es decir, va a abrir el navegador de Internet Explorer en la página que se le haya indicado en nuestro código veamos ahora la sintaxis. Sintaxis: { geturl("dirección URL", "método"); } IMSS Módulo V 79