Presentaciones Profesionales en Flash

(1)

P

r

e

s

e

n

t

a

c

i

o

n

e

s

P

r

o

f

e

s

i

o

n

a

l

e

s

e

n

F

l

a

s

h

M

a

n

u

a

l

d

e

l

P

a

r

t

i

c

i

p

a

n

t

e

C

o

r

d

i

n

a

c

i

ó

n

d

e

I

n

f

o

r

m

á

t

i

c

a

(2)

IMSS | Módulo I 2 Explicación de la interfaz

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.

(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.

(4)

Tabla de contenido

Módulo I Explicación de la interfaz ... 8

1.1 Interfaz de Flash ... 9 1.1.1 Barra de Título: ... 10 1.1.2 Barra de Menú:... 10 1.1.3 Caja de Herramientas: ... 11 1.1.5 Panel de capas: ... 14 1.1.6 Panel de Propiedades: ... 14 1.1.7 Zona de Paneles:... 14

1.2 Configuración del Documento ... 15

1.2.1 Dimensiones ... 15

1.2.2 Color de fondo ... 15

1.2.3 Numero de fotogramas por segundo ... 16

1.2.4 Unidades de medida ... 16

1.3 Crear, Guardar, Cerrar, Publicar y Visualizar ... 17

1.3.1 crear nuevos documentos... 17

1.3.2 Guardar Documento ... 17

1.3.4 Cerrar documento ... 18

1.3.5 Publicar ... 18

1.3.6 Visualización de la película ... 19

Módulo II Manejo de Línea de Tiempo y Capas ... 19

2.1 Presentación con texto ... 21

2.1.1 Explicación de la Línea de Tiempo ... 21

2.1.2 Inserción de fotogramas ... 21

2.1.3 Inserción de capas ... 21

2.1.4 cambiar el nombre a la capa ... 22

2.1.5 Inserción de texto ... 22

(5)

2.2 Presentación con dibujos en Flash ... 25

2.2.1 Dibujar un Círculo ... 25

2.2.2 Dibujar cuadrado ... 26

2.2.3 Dibujar una estrella ... 26

2.2.4 Dibujar figuras sin contorno ... 27

2.2.5 Propiedades de figuras ... 28

2.2.6 Dibujar líneas ... 30

2.2.7 Ejercicio 2 ... 32

2.3 Presentación con Imágenes ... 33

2.3.1 Importar imágenes a la biblioteca ... 33

2.3.2 Insertar la imagen en el escenario... 34

2.3.3 Ejercicio 3 ... 36

Módulo III Símbolos ... 38

3.1 Gráficos ... 39

3.1.2 Insertar una imagen en un gráfico... 39

3.2 Clip de Película ... 40

3.2.1 insertar un símbolo clip de película ... 42

3.2.2 creación de una animación dentro de un clip de película ... 42

3.3 Botones ... 43

3.3.1 creación de símbolos de botón ... 44

3.3.2 inserción de sonido en un botón ... 46

Módulo IV Animaciones ... 47

4.1 Animaciones... 49

4.1.1 Animación fotograma por fotograma ... 49

4.1.2 Animación por interpolación de movimiento ... 50

4.1.3 Animación por forma ... 51

4.1.4 Animación por alfa... 53

4.1.5 Animación por brillo ... 55

4.1.6 Animación por tinta ... 58

(6)

4.1.8 Animación con máscara ... 63

Módulo V Introducción a Action Script ... 67

5.1 Características generales del Action Script ... 68

5.2 Panel Acciones ... 69 5.3 Operadores ... 69 5.3.1 Operadores Aritméticos ... 70 5.3.2 Operadores de Asignación ... 70 5.3.3 Operadores de Comparación ... 71 5.3.4 Otros Operadores ... 72 5.4 Detener “Stop” ... 73 5.5 Ir a la siguiente escena ... 75 5.6 gotoAndPay() ... 77 5.7 gotoAndStop ... 78 5.8 getURL ... 79

Módulo VI Creación de Presentación con Menú Interactivo ... 80

6.1 Presentación con Menú Interactivo ... 81

6.1.1 Introducción ... 81

6.1.2 Menú Interactivo ... 86

Notas finales ... 90

(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.

(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:

(9)

IMSS | Módulo I 9 Explicación de la interfaz 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:

(10)

Detallemos la ventana diciendo como está compuesta.

1.1.1 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.

1.1.2 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

(11)

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.

1.1.3 Caja de Herramientas: Desde aquí podrá seleccionar la herramienta que desee utilizar.

Sub selección Lazo Texto Cuadro Pincel Transformación relleno Cubo de pintura Selección Línea Pluma Ovalo Lápiz Transformación libre Bote de pintura Cuenta gotas Borrador

(12)

(13)

1.1.4 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.

Mano Zoom

Color trazo

Blanco y Negro, Sin color e Intercambiar

Color relleno

Ajustar a objetos

Suavizar Enderezar

(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.

1.1.6 Panel de Propiedades: Este panel irá cambiando con respecto al objeto que esté seleccionado.

1.1.7 Zona de Paneles: En esta zona se muestran los paneles activos un ejemplo de ello es la biblioteca o bien el panel de colores.

Mostrar/Ocultar capas Bloquear/Desbloquear Capas Mostrar/Ocultar Contornos Insertar Capa Insertar capa Guía Insertar carpeta capas Eliminar Capa

(15)

IMSS | Módulo I 15 Explicación de la interfaz 1.2 Configuración del Documento

Podemos hacer la configuración del documento y en esta podemos modificar las siguientes propiedades:

1.2.1 Dimensiones

Clic en el menú modificar Clic en documento

Poner el alto y ancho Clic en el botón aceptar

1.2.2 Color de fondo

Clic en color de fondo Clic en el color deseado Clic en el botón aceptar

(16)

1.2.3 Numero de fotogramas por segundo

Aumentar o disminuir el número de fotogramas

Clic en el botón aceptar

1.2.4 Unidades de medida

Cambiar las unidades de medida Clic en el botón aceptar

(17)

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.

1.3.1 crear nuevos documentos

Clic en menú archivo Clic en nuevo

Seleccionar documento en flash Clic en el botón aceptar

1.3.2 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

(18)

1.3.4 Cerrar documento

Clic en el menú archivo Clic en cerrar

1.3.5 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.

(19)

IMSS | Módulo II 19 Manejo de Línea de Tiempo y Capas

Clic en publicar

1.3.6 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.

(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.

(21)

IMSS | Módulo II 21 Manejo de Línea de Tiempo y Capas 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.

2.1.1 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.

2.1.2 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 Forma de Inserción

Fotograma en Blanco F7

Fotograma clave F6

Arrastrar Fotograma 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.

2.1.3 Inserción de capas

(22)

2.1.4 cambiar el nombre a la capa

Doble clic sobre la capa Teclear el nuevo nombre Dar enter

2.1.5 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

2.1.6 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

(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

(24)

(25)

IMSS | Módulo II 25 Manejo de Línea de Tiempo y Capas 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.

2.2.1 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.

(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

2.2.3 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

(27)

Seleccionar el estilo: estrella y el número de lados Clic en el botón Aceptar.

Dibujar la estrella

2.2.4 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

(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

(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

(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.

(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.

(32)

Con ayuda del instructor realizar el siguiente ejercicio

¿Que hacer?

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.

(33)

IMSS | Módulo II 33 Manejo de Línea de Tiempo y Capas 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.

2.3.1 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

(34)

Buscar y seleccionar la imagen Clic en el botón abrir

Y listo el resultado será el siguiente:

2.3.2 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:

(35)

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.

(36)

Con esto terminamos de ver el apartado para imágenes , ahora bien hagamos nuestro ejercicio para que reforcemos nuestros conocimientos.

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 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.

(37)

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

(38)

IMSS | Módulo III 38 Símbolos

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.

(39)

IMSS | Módulo III 39 Símbolos 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.

3.1.2 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)

(40)

De esta forma nuestro símbolo gráfico está listo para usarse cuando y las veces que sea necesario.

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

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.

(41)

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.

(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.

3.2.1 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

3.2.2 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.

(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.

(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.

3.3.1 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

(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.

(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:

3.3.2 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.

(47)

IMSS | Módulo IV 47 Animaciones

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

(48)

Animación brillo Animación tinta

Animación con capa guía Animación con máscara

(49)

IMSS | Módulo IV 49 Animaciones 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.

4.1.1 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:

(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.

(51)

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.

4.1.3 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)

(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:

(53)

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%

(54)

Regresar a la escena 1 y arrastrar el mc_alfa a la escena Dar ctrl + enter

(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%

(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

(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

(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

4.1.7 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:

(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.

(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

(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

(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)

(67)

IMSS | Módulo V 67 Introducción a Action Script

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 2004.

(68)

IMSS | Módulo V 68 Introducción a Action Script 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.

(69)

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:

(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 8.

5.3.1 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 = 0.

5.3.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 = 2 + 3. 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.

(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 ( 3 + 4 ). Por tanto, la expresión x += y es equivalente a hacer: x = x + y.

5.3.3 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".

(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 4.

5.3.4 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.

(73)

IMSS | Módulo V 73 Introducción a Action Script 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: Stop();

No tiene Parámetros Ejemplo:

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

(74)

(75)

IMSS | Módulo V 75 Introducción a Action Script 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) {

nextScene(); }

Ejemplo:

En este ejemplo programaremos un botón para que nos lleve a la siguiente escena, veamos como realizarlo:

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 e insertar una imagen

(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: