Guía de Ejercicios de Macromedia Flash 8

1

Macromedia Flash 8 Guía Ejercicios

2008

Guía de Ejercicios de Macromedia Flash 8

The Fourth R ® Inc.

1


2008

Ninguna parte de este manual puede ser reproducido o transmitido en cualquier forma o por ningún medio, cualquiera que sea, sin el permiso escrito de Fourth R Inc.

©Copyright The Fourth R. The Fourth R es una marca registrada de The Fourth R Inc.

Cualquier otra marca o nombre de producto mencionado en esta publicación es una marca comercial o marca comercial registrada de su poseedor respectivo.


1


2008

Macromedia Flash 8

Professional


1


2008

MACROMEDIA FLASH 8

Es una aplicación orientada a crear aplicaciones y contenidos dinámicos

para Internet, es decir, utilidades interactivas y multimedia con una amplia

posibilidad de animación. El resultado de las películas Flash, aparte de tener

una gran calidad visual, está asegurado en la mayoría de plataformas con la

amplia distribución de su reproductor, Macromedia Flash Player.

Por este motivo se puede decir que es una herramienta muy compatible

cuyas aplicaciones abarcan cada vez un espectro más amplio, desde

animaciones publicitarias on-line, presentaciones de proyectos, webs

interactivos, hasta creación de juegos.

En esta guía nos basamos en la versión más novedosa del programa:

Flash 8. Nos dedicamos a profundizar en sus posibilidades para la animación,

junto con sus opciones de importar archivos multimedia (nuevas opciones de

inclusión de vídeo).

También experimentamos las posibilidades básicas de interactividad del

lenguaje Actionscript para su uso cotidiano. Al no profundizar en este campo

del programa no es necesario un conocimiento previo en programación.


1


2008


1


2008

VISIÓN GENERAL

Objetivo

El alumno al finalizar será capaz de realizar películas flash de uso cotidiano en

el diseño web: banners, presentaciones animadas, películas interactivas, etc.

Además de incluir utilidades multimedia como sonido y vídeo.

Las posibilidades de Flash son extraordinarias, cada nueva versión ha

mejorado a la anterior, y el actual Flash 8 no ha sido menos. Aunque su uso

más frecuente es el de crear animaciones (a lo largo de esta guía veremos lo

sencillo que puede resultar) sus usos son muchos más.

Requisitos:

Programa Macromedia Flash 8 (o su versión de prueba) junto con su

reproductor Flash Player 8

Para asegurar el éxito de la guía, recomendamos tomar primero el curso

de The Fourth R Flash 8: Introductorio y avanzado o que tenga el

conocimiento equivalente.

Objetivos y actividades a realizar.

Cada ejercicio se presentará de lo mas común y fácil a lo mas complicado y

difícil, presentaremos problemas desde trabajar solo con fotogramas, hasta

llegar a la programación de Actionscript


1


2008

Actividad 1

Animación Flash

Comenzando

Una de las características principales de Flash 8 es su sencillez, esta sencillez

en su utilización permite crear animaciones de un modo efectivo y rápido.

Pongámonos en situación, supongamos que queremos crear una animación en

la que una pelota realice un movimiento de "bote", es decir, que baje y suba.

Puede parecer un trabajo de horas, pero nada más lejos de la realidad.

Veamos cómo Flash nos lo pone fácil.

Realizando la Animación

En este apartado no pretendemos enseñar cómo crear una animación Flash, el

objetivo es que entendamos cómo crea Flash las animaciones y de que modo

nos facilita el trabajo.

A primera vista, lo lógico parece ser dibujar la pelota en cada instante del

movimiento, de modo que cuantos más instantes dibujemos, más real parecerá


1


2008

el movimiento. Pues bien, con Flash bastará con crear 3 fotogramas: en el

primero dibujaremos la pelota en el instante inicial (arriba del todo), en el

segundo se dibujará la pelota en el momento de tocar el suelo y en el tercero la

pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta

crearlo, pues bastará con copiar el primero). Por tanto, vemos que el trabajo

más largo (dibujar los objetos) ya está hecho.

Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo

que transcurre entre los instantes en los que la pelota está arriba y abajo) y por

último se le indica a Flash que cree una animación de movimiento entre estos

fotogramas.


1


2008

Actividad 2

Bandera Olímpica

1. Dibuje 5 aros.

2. Cámbieles los colores. Por ejemplo, los colores de la bandera olímpica

(Azul, negro, rojo, amarillo y verde)

3. Únalos de modo que parezcan los aros olímpicos.

Pasos:

1) Seleccionamos la Herramienta Óvalo.

2) Trazamos 5 óvalos, para que sean perfectamente circulares,

mantenemos pulsada la tecla Shift.

3) Una vez estén dibujados, seleccionamos el relleno de cada óvalo y

pulsamos la tecla Suprimir para eliminarlo. (Igualmente podíamos haber

seleccionado el color "ninguno" y posteriormente creado los

óvalos que hubieran aparecido sin color de fondo)

4) Ahora seleccionamos los bordes de cada aro y le damos el color que

queramos seleccionándolo en el Panel Mezclador de Colores.

5) Ahora mueva cada aro hasta la posición deseada. Para mover un objeto,

seleccione la Herramienta Selección, haga clic en el aro que quiera

mover y arrástrelo.


1


2008

Resultado


1


2008

Actividad 3

1. Dibuje un óvalo

2. Convierta su color de relleno degradado de verde oscuro a verde claro

(por ejemplo).

3. Cree el aro que le rodea.

4. Una los 2 objetos para que parezca el planeta Saturno

Pasos:

1) Seleccionamos la Herramienta Óvalo.

2) Creamos un óvalo

3) Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla

Suprimir.

4) Seleccionamos el Relleno del óvalo y abrimos el Panel Relleno.

5) Seleccionamos la opción Degradado Radial.

6) Pulsamos en y seleccionamos los colores que deseemos, (podemos

añadir tantos colores como queramos y probar su efecto).

7) Dibujamos el anillo de Saturno, por ejemplo creando otro óvalo con la

forma adecuada.

8) Tenemos que cambiar la forma de uno de los 2 para que tenga la forma

deseada. Por ejemplo, borramos parte del planeta como en la imagen.

9) Solapamos los 2 objetos dibujados, de modo que formen el dibujo que

queramos.

Resultado


1


2008

Actividad 4

Sonidos

Importar Sonidos

1. Cree una película con 1 fotograma.

2. Localice un sonido en su disco duro.

3. Impórtelo a su película.

4. Compruebe que está disponible en la Biblioteca.

Insertar Sonidos

1. Partiendo del ejercicio anterior, inserte el sonido importado en el

fotograma 1.

2. Compruebe que funciona (que el sonido puede escucharse). Para ello,

pulse CTRL+ ENTER (Esta combinación de teclas le permite "probar" la

película).

Trabajar con Sonidos

1. Consiga que el sonido deje de escucharse al llegar la película al

fotograma 5.

2. Consiga que vuelva a escucharse en el fotograma 10.


1


2008

Pasos:

Importar sonidos:

1) Creamos la película mediante Archivo → Nuevo (por defecto tendremos

un único fotograma).

2) Seleccionamos Importar → Importar a Biblioteca, que se encuentra en el

Menú Archivo.

3) Se abrirá la clásica ventana de Windows para buscar un archivo.

Buscamos un archivo válido de sonido y pulsamos Abrir.

4) El sonido ya está insertado. Hacemos clic en el Panel Biblioteca

(Ventana → Biblioteca) y comprobamos que se encuentra allí.

5) Si no se encuentra allí, revisaremos los pasos dados, pues algo no

hemos hecho bien.

Insertar Sonido

Seleccionamos el fotograma en el que queramos insertar el sonido.

Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta

el escenario (hasta el fotograma actual).

Pulsamos CTRL + ENTER y el sonido deberá escucharse.

Trabajar con Sonidos

1) Alargamos el fotograma actual hasta el número 4 (insertando fotogramas

normales desde el Menú Insertar → Línea de Tiempo → Fotograma).

2) Insertamos un nuevo fotograma en la línea de tiempo. En la posición 5

(desde el Menú Insertar → Línea de Tiempo → Fotograma Clave).


1


2008

3) Abrimos el Panel Propiedades y seleccionamos los fotogramas del 1 al

4.

4) En la opción Sinc seleccionamos Flujo.

5) Acabamos de conseguir que el sonido sólo se reproduzca cuando esté

en los fotogramas indicados.

6) Ahora prolongamos la duración del fotograma 5 hasta que ocupe 5

fotogramas más (insertando fotogramas normales).

7) Insertamos un nuevo Fotograma Clave en la posición 10.

8) Insertamos el sonido en el fotograma 10 del mismo modo que en el

ejercicio 2.

9) Debe quedar parecido al gráfico:


1


2008

Actividad 5

Objetos

Rellenos y Bordes

1. Cree dos rectángulos con el interior de color verde y el borde negro.

2. En uno de ellos elimine el Relleno.

3. En el otro, elimine el borde.

Selecciones

1. Dibuje 5 óvalos. Deles el color de relleno y borde que quiera (elija un

relleno que no sea transparente )

2. Seleccione 3 de ellos usando la tecla SHIFT.

3. Seleccione 3 de ellos usando la Herramienta Selección (Flecha).

4. Seleccione 3 únicamente los bordes de 3 de ellos.

Alinear Objetos

1. Dibuje 4 objetos (círculos, rectángulos...).

2. Coloque uno en cada esquina usando el Panel Alinear.

Grupos

1. Agrupe los 4 objetos del ejercicio anterior en un único grupo.

2. Cambie su posición (colóquelos, por ejemplo, en el centro de la

película).

3. Desagrúpelos.

Pasos:


1


2008

Rellenos y Bordes

Se nos pide crear 2 rectángulos y eliminar el relleno de uno de ellos y el borde

del otro. Procedemos del siguiente modo:

1) Seleccionamos los colores en el Panel Muestras de Color o en el Panel

Mezclador de Colores, hacemos clic en la Herramienta Rectángulo y

dibujamos 2 rectángulos.

2) Hacemos clic en el interior del primer rectángulo y pulsamos la tecla

Suprimir (Supr).

3) Hacemos doble clic en el borde del otro rectángulo y volvemos a pulsar

la tecla Suprimir.

Los 2 rectángulos originales

Rectángulo sin Relleno y Rectángulo sin Borde

Selecciones

1) El primer apartado nos pide crear 5 óvalos y seleccionar 3 de ellos con

la tecla SHIFT.

2) Seleccionamos los colores que queramos en el Panel Muestras de Color

o en el Panel Mezclador de colores, hacemos clic en la Herramienta

Óvalo y dibujamos 5 óvalos.


1


2008

3) Hacemos doble clic en el relleno del primer círculo (doble clic para

seleccionar tanto el Relleno como el borde).

4) Ahora pulsamos la tecla SHIFT y sin soltarla, hacemos doble clic en

otros 2 círculos cualesquiera.

5) Ahora hacemos lo mismo usando la Herramienta Selección (Flecha),

como pide el segundo apartado.

6) Hacemos clic en una zona del escenario que nos permita capturar 3

círculos.

7) Arrastramos el ratón hasta crear un área que envuelva completamente a

3 de los 5 círculos.

8) Si quedara alguna parte del círculo fuera de la selección, basta con usar

la tecla SHIFT para añadirlo a la selección actual.

9) Ahora se nos pide seleccionar únicamente los bordes de 3 de ellos.

10) Hacemos clic en el borde del primer óvalo (si hiciéramos 2 clic se

seleccionarían todos los bordes del mismo color que estén en contacto

con el borde sobre el que hacemos clic).

11) Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2

óvalos más.

Nota: Si en vez de óvalos hubieran sido rectángulos, hubiera hecho falta hacer

2 clic en el borde de cada rectángulo para que éste quede totalmente

seleccionado. Compruébelo usted mismo.

Alinear Objeto

1) Se nos pide dibujar 4 objetos y colocarlos en las esquinas.

2) Dibujamos los 4 objetos pedidos, por ejemplo, 4 rectángulos.

3) Abrimos el Panel Alinear. desde el menú Ventana → Alinear.


1


2008

4) Hacemos clic en "En Escenario" para que las distribuciones de los

objetos se hagan en función del tamaño del fotograma.

5) Seleccionamos el primer objeto y hacemos clic en para alinear el

objeto en el extremo izquierdo de la película.

6) Hacemos clic en para situarlo en el borde superior de la película.

Como el objeto está en el extremo superior izquierdo, está en la esquina

superior izquierda.

7) Para alinear el segundo objeto en la esquina superior derecha hacemos

clic en y .

8) Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic

en y .

9) Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic

en y .

Grupos

1) Primera parte del ejercicio nos pide Agrupar un conjunto de elementos

(que ya tenemos).

2) Los seleccionamos todos del modo que prefiramos.

3) Hacemos clic en el Menú Modificar → Agrupar

4) La segunda parte del ejercicio nos pide Desagrupar el conjunto de

elementos que acabamos de agrupar.

5) Seleccionamos el Grupo haciendo clic en él.


1


2008

6) Hacemos clic en el Menú Modificar → Desagrupar


1


2008

Actividad 6

Símbolos

Crear Símbolo

1. Crea una película con 1 fotograma.

2. Dibuja un círculo perfecto.

3. Conviértelo a símbolo de tipo Clip.

4. Comprueba que está disponible en la Biblioteca.

Insertar Instancia

1. Crea una nueva película.

2. Inserta el Gráfico de un botón cualquiera de las Bibliotecas comunes de

Flash 8.

3. Modifica su tamaño.

4. Vuelve a realizar el paso 2 y comprueba que el botón se inserta en su

tamaño original.

Duplicar Instancia

1. Sobre el ejercicio anterior, duplica la instancia del botón que has

cambiado de tamaño.

2. Comprueba que se ha duplicado en la Biblioteca.

Pasos:

Crear Símbolo


1


2008

1) Crea una película con 1 fotograma con Archivo → Nuevo.

2) Para que el círculo no salga ovalado, selecciona la herramienta óvalo y

mientras lo dibujas, mantén pulsada la tecla Shift.

3) Accede a Insertar → Nuevo Símbolo... o bien pulsa F8.

4) Accede a Ventana → Biblioteca y busca el nombre que le diste al

crearlo.

Insertar Instancia

1) Selecciona la opción Archivo → Nuevo.

2) Ve a Ventana → Bibliotecas Comunes → Botones y selecciona un

botón cualquiera (para expandir las carpetas, haz clic con el botón

derecho sobre una de ellas y selecciona "Expandir Carpeta"). Arrastra el

botón elegido hasta el escenario

3) Selecciona el símbolo, luego la herramienta y arrastra alguno de los

puntos que aparecerán alrededor del botón.

4) Debes ver que has modificado sólo una instancia del símbolo, y no el

símbolo en sí.

Duplicar Instancia

1) Haz clic con el botón derecho sobre la instancia que quieras duplicar y

selecciona "Duplicar Instancia". Dale un nombre al duplicado (también

puedes duplicar una instancia desde el panel Intercambiar Símbolo).

2) Accede a Ventana → Biblioteca y busca el nombre que le diste al

duplicarlo.


1


2008

Actividad 7

Clips de Película

Crear un Clip a modo de Cuenta Atrás

1. Crea una película con sólo 1 fotograma.

2. Escribe un número cualquiera, por ejemplo un 3.

3. Conviértelo a símbolo de tipo Clip.

4. Crea una animación fotograma a fotograma en la que se vea una cuenta

atrás hasta el cero.

5. Comprueba que pese a tener la película original un frame y el clip cinco,

la animación se ve completamente.

6. Guárdalo como cuenta.fla

Crear un clip vacío y editarlo después

1. Crea una nueva película.

2. Crea un nuevo símbolo de tipo Movie Clip vacío.

3. Sal a la línea de tiempos principal.

4. Vuelve a editar el símbolo.

Exportar una película con protección

1. Partimos del Clip del ejercicio 1, ábrelo.

2. Exporta la película swf de forma que nadie la pueda importar después.

Pasos:

Crear un Clip a modo de Cuenta Atrás

1) Crea una película con 1 fotograma con Archivo → Nuevo


1


2008

2) Mediante la Herramienta Texto marcada en la barra de herramientas

con una A escribe el 3.

3) Accede a Insertar → Nuevo Símbolo... o bien pulsa F8.

4) Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4.

Luego borra el 3 que aparecerá en ellos y escribe un 2, un 1 y un 0 en

su lugar.

5) Puedes reproducir la película con Control + Enter.

6) Menú Archivo → Guardar Como...

Crear un clip vacío y editarlo después

1) Archivo → Nuevo

2) Accede a Insertar → Nuevo Símbolo o bien pulsa Control + F8

3) Pulsa en el icono de la escena principal, en este caso será Escena 1,

que está encima de la línea de tiempos.

4) Abre la Biblioteca del documento mediante Ventana →

Biblioteca, pulsa con el botón derecho sobre el nombre del clip y

selecciona la opción Editar del menú emergente

Exportar una película con protección

1) Abre mediante Archivo → Nuevo

2) Exporta con Archivo → Exportar → Exportar Película, selecciona el

tipo de archivo SWF y dale un nombre. En la ventana que aparece

marca la opción Proteger frente a Importación, y en el campo

Contraseña escribe la clave que quieras.


1


2008

Actividad 8

Botones

1. Crear un Botón en forma Cuadrada.

2. Abre un documento nuevo

3. En el primer fotograma dibuja un objeto con forma cuadrada y escribe

"STOP" sobre él.

4. Conviértelo a símbolo de tipo Botón

5. Crea distintas apariencias para distintos estados

6. Guárdalo como stop.fla

Ajustar el Área Activa

1. Crea una nueva película

2. Escribe el texto: "VámOnoS" respetando las mayúsculas y minúsculas

como se muestran

3. Conviértelo a Botón

4. Haz que sólo funcione al pasar por la "O" central

Botón con Sonido

1. Partimos del Botón del ejercicio 1. Ábrelo

2. Haz que emita un sonido de la Biblioteca Común de Sonidos al pasar el

ratón por encima de él

3. Haz que emita otro sonido de la Biblioteca Común de Sonidos distinto al

pulsarlo

Detener una Película

1. Abre un nuevo documento.

2. En el primer fotograma inserta algún símbolo que se comporte como clip

de película y que contenta una animación de más de 1 fotograma


1


2008

3. Ahora inserta en el clip el botón del ejercicio 1 de manera que se vea a

lo largo de toda su reproducción

4. Haz que se detenga el Clip al pulsar el Botón.

Pasos:

Crear un Botón en forma de Píldora

1) Hazlo con Archivo → Nuevo.

2) Para dibujar la forma cuadrada utiliza la herramienta rectángulo.

3) Mediante Insertar → Nuevo Símbolo... o bien pulsando F8

4) Crea fotogramas clave en todos los fotogramas mediante F6 y

modifícalos para crear el efecto

5) Archivo → Guardar Como... y llámalo stop.

Ajustar el Área Activa

1) Hazlo también con Archivo → Nuevo

2) Mediante la Herramienta Texto marcada en la barra de Herramientas

con una A y escribe el texto: VámOnoS.

3) Haz clic en la Herramienta Selección y selecciona el texto que acabas

de crear.

4) Mediante Modificar → Convertir en Símbolo... o bien pulsando F8

5) Selecciona el fotograma Zona Activa, dibuja un óvalo de tal forma que

tape por completo la "O" y tenga el mismo tamaño y forma. Luego borra

el texto.

Botón con Sonido

1) Mediante Archivo → Nuevo.

2) Selecciona el fotograma Sobre accede a Ventana → Biblioteca y

arrastra uno de los sonidos al escenario de que dispongas al escenario,

sino dispones de ninguno, impórtalo desde tu disco duro...


1


2008

3) Selecciona el fotograma Presionado, accede a Ventana → Biblioteca y

arrastra uno de los sonidos al escenario de que dispongas al escenario,

sino dispones de ninguno, impórtalo desde tu disco duro...

Detener una Película

1) Hazlo con Archivo → Nuevo

2) Crea un clip de película animado o importa uno como se vió en el tema

anterior. Déjalo en el escritorio.

3) Hacemos doble clic sobre el clip insertado para editarlo, crea una nueva

capa, y en el primer fotograma de esta capa insertaremos el botón. Para

ello accedemos a Archivo → Importar → Abrir Biblioteca Externa y

seleccionamos "stop.fla" para abrir la biblioteca del archivo. Una vez

hecho, arrastramos el botón al escenario.

4) Hacemos clic con el botón derecho sobre el botón y elegimos la opción

Acciones o bien directamente abrimos el Panel Acciones y

seleccionamos el botón. En la parte izquierda del Panel Acciones

hacemos doble clic en Funciones Globales → Control de la línea de

tiempo, (si es que no estaban abiertos ya) y luego hacemos doble clic

sobre la acción Stop. Por último editamos nuestra área de trabajo para

que el código quede así:

on(release) {

stop();

}


1


2008

Ejercicios 9

Animación por Forma

Babosa arrastrándose

1. Abre un documento nuevo

2. En el primer fotograma dibuja una especie de babosa.

3. Haz que cambie de forma y vaya de un lado a otro del escenario, dando

la sensación de que está reptando.

4. Guárdalo como "babosa.fla".

Cambio de Forma y Tamaño

1. Abre el archivo "babosa.fla"

2. Cambia el movimiento de forma para que a mitad del trayecto de la

impresión de que se está acercando a nosotros.

3. Cambia el color de la babosa cuando está más cerca de nosotros.

Cambiar la Forma de un Texto

1. Escribe en distintas capas las letras de tu nombre.

2. Crea una animación de forma que pase de una letra a la siguiente.

3. Cambia los colores y el tamaño de cada letra.


1


2008

Consejos de Forma

1. Dibuja una Flecha.

2. Crea una animación de forma de manera que al final, la flecha quede

con el mismo aspecto pero apuntando en dirección contraria.

3. Hazlo de manera que parezca que se apoya en la punta y se abate

como la bisagra de una puerta.

Tiene que quedarte algo así.

Pasos

Animación por Forma

Babosa arrastrándose


2) Utiliza la Herramienta Lápiz.

3) Pulsa con el botón derecho sobre el primer fotograma y elige la opción

Propiedades (o bien abre el panel propiedades y sitúate en el primer

fotograma). En el desplegable Animar del Panel Propiedades selecciona

la opción Forma.

4) Ve ahora al fotograma 20 y pulsa F6. En ese mismo fotograma, arrastra

la babosa al otro lado del escenario y mediante la Herramienta de

Subselección modifica su forma.

5) Guárdalo con Archivo → Guardar Como y llámalo babosa.fla.

Cambio de Forma y Tamaño


1


2008

1) Abre el archivo con Archivo → Abrir.

2) Selecciona el fotograma 10. Mueve el objeto hasta la parte inferior del

escenario y aumenta su tamaño. La parte inferior siempre da sensación

de proximidad.

3) Selecciona la Herramienta Cubo de Pintura, elige un nuevo color y

pincha sobre el relleno anterior.

Cambiar la Forma de un Texto

1) Crea mediante F6 un fotograma clave en el introduce en el centro del

escenario una letra de tu nombre.

2) Selecciona la letra creada y activa la opción Modificar → Separar.

3) Pulsa con el botón derecho sobre el primer fotograma y elige la opción

Propiedades (o bien abre el panel propiedades y sitúate en el primer

fotograma). En el desplegable Animar del Panel Propiedades selecciona

la opción Forma.

4) Ve cinco fotogramas en adelante y pulsa F6. Borra la letra y escribe la

siguiente.

5) Repite el paso 2 hasta que hayas escrito todas las letras.

6) Hazlo mediante el Cubo de Pintura y la Herramienta Transformación

libre (para Escalar).

Consejos de Forma

1) Utiliza la Herramienta Lápiz.

2) Pulsa con el botón derecho sobre el fotograma que contiene la flecha y

elige la opción Propiedades (o bien abre el panel propiedades y sitúate

en el fotograma que contiene la flecha). En el desplegable Animar del

Panel Propiedades selecciona la opción Forma.

3) Ve al fotograma 20 y pulsa F6.

4) Invierte la imagen del fotograma 20 para que adopte su posición final

mediante Modificar → Transformar → Voltear Horizontalmente y

colócalo de manera que su punta y la de la flecha original coincidan.


1


2008

5) Si ejecutáramos la animación ahora no conseguiríamos el efecto

deseado.

6) En el fotograma 1, activa la opción Modificar → Forma → Añadir Pista

de forma para añadir una nueva pista de forma. Colócalo en una de las

esquinas de la flecha y ve al fotograma 20 para colocar la pista creada

en la esquina que se corresponda con la anterior.

Ejercicio 10

Efectos sobre Animaciones

Efecto Rotación

1. Abre un documento nuevo.

2. Dibuja una rueda y haz que se desplace de un lado al otro del escenario.

3. Haz que ruede mientras hace el desplazamiento.

4. Guárdalo como "rueda.fla".

Efecto Aceleración

1. Abre el archivo "rueda.fla"

2. Haz que vaya frenando en su movimiento hasta pararse.

Orientar según el Trazo

1. Abre el archivo "babosa.fla" que creamos en el tema anterior.


1


2008

2. Dibuja una guía con forma de montañas para que sea recorrida por

nuestra babosa.

3. Puesto que así parecerá que la babosa esté volando, haz que se

arrastre por el borde de la montaña.

Efecto Alpha

1. Escribe tu nombre.

2. En una nueva capa escribe tu apellido.

3. Haz que el nombre vaya desapareciendo y que ANTES de que lo haga

aparezca poco a poco el apellido por detrás suyo.

Pasos

Efectos sobre Animaciones

Efecto Rotación


2) Haz clic con el botón derecho sobre el primer fotograma y selecciona

Crear Interpolación de Movimiento. Pulsa F6 en el fotograma 20 y pon

la rueda en el otro extremo del escenario.

3) Haz clic con el botón derecho sobre el Fotograma 1 y elige la opción del

submenú Propiedades (si no está activada ya). En la ventana que

aparece selecciona el valor Horario de la opción de Rotación para girar

hacia la derecha y dar la sensación de avance. Introduce el valor 1 de

número de vueltas.

4) Archivo → Guardar Como.

Efecto Aceleración

1) Archivo → Abrir.

2) Haz clic de nuevo con el botón derecho sobre el Fotograma 1 y elige la

opción del submenú Propiedades (si no está activada ya). En la


1


2008

ventana que aparece selecciona el valor 100 de la opción de Aceleración

(Fuera).

Orientar según el Trazo

1) Archivo → Abrir.

2) Crea una nueva capa Guía mediante el botón azul correspondiente

situado bajo los nombres de las capas. Dibuja con la Herramienta Lápiz

un par de montículos.

3) Coloca como al principio y al final de la guía respectivamente.

4) Ahora haz clic con el botón derecho sobre el Fotograma 1 y elige la

opción del submenú Propiedades (si no está activada ya). En la

ventana de propiedades de Fotograma que aparece marca la casilla

Orientar según trazado.

Efecto Alfa

1) Utiliza la Herramienta Texto y escribe en el primer fotograma tu nombre.

2) Créalo con el botón blanco situado al lado del icono de Crear Guía de

Movimiento.

3) Crea una interpolación de movimiento de 15 fotogramas para el nombre.

Selecciona el objeto y conviértelo a símbolo. Haz clic ahora con el botón

izquierdo sobre el texto (que ahora es un símbolo) y selecciona el último

fotograma de la interpolación y elige del desplegable del panel Color la

opción Alfa y en la casilla contigua pon el valor 0.

4) Mueve el fotograma que tiene el apellido hasta el fotograma 12 y haz lo

mismo que en el caso anterior pero dándole el valor Alfa de 0 al primer

fotograma en vez de al último.

Ejercicio 11


1


2008

Puntero personalizado

Como el código de cambiar el cursor es muy sencillo. Para crear un puntero

personalizado:

1.- Crear un clip de película para utilizarlo como ratón y colocar una instancia

del objeto en el escenario.

2.- Seleccionar el clip de película.

3.- Seleccionar Ventana > Paneles de desarrollo > Acciones para abrir el panel

Acciones en el caso de que no aparezca en pantalla.

En este panel, escribir lo siguiente:

onClipEvent (load) {

Mouse.hide();

startDrag(this, true);

}

onClipEvent(mouseMove){

updateAfterEvent();

}

El primer controlador onClipEvent() oculta el ratón (por defecto) cuando el clip

de película aparece por primera vez en el escenario. Al mismo tiempo,

comienza a arrastrar el objeto que queremos utilizar como ratón (startDrag) y lo

centra en lo que sería nuestro ratón (true).

La función updateAfterEvent actualiza la pantalla inmediatamente después de

que se haya producido el evento especificado, en lugar de cuando se dibuja el

fotograma siguiente, que es lo que suele ocurrir.


1


2008

Actividad 12

Deberás reproducir el siguiente formulario Flash


1


2008

Tambíen deberás establecer el orden de tabulación de los objetos y el botón

por defecto.

Además, deberás darle funcionalidad al botón Reset y Enviar. El primero

limipando los datos del formulario y el segundo recogiendolos validándolos y

enviandolos a un archivo php.

El validador del email deberá comprobar que la dirección esta correctamente

escrita (para ello utiliza función indexOf y lastIndexOf).

Ejercicio

Formulario

1. Abre el programa Flash 8.

2. Crea un nuevo documento haciendo clic en Archivo → Nuevo.

3. Selecciona Documento de Flash en el diálogo que se abrirá y pulsa

Aceptar.

4. Se abrirá un documento en blanco. Lo guardaremos para darle un

nombre y poder guardar nuestros progresos de vez en cuando. Para ello

haz clic en Archivo → Guardar. Dale un nombre, selecciona una carpeta

y pulsa Guardar.

Ahora podrás guardar el documento siempre que quieras pulsando Ctrl +

G o haciendo clic en Archivo → Guardar.

5. Primero insertaremos los elementos de formulario que vamos a utilizar,

para ello antes tendremos que abrir el Panel Componentes desde

Ventana → Componentes.

6. Haz clic sobre el elemento User Inteface y arrastra a la Biblioteca los

siguientes elementos: Alert, Button, CheckBox, ComboBox, Label,

RadioButton y TextInput.


1


2008

7. Ahora que ya tenemos los elementos que necesitaremos vamos a crear

instancias de ellos en el Escenario. Arrastra un elemento TextInput al

Escenario.

8. En el Panel Parámetros (junto a Propiedades) modificaremos el campo

text a Nombre:. Le daremos el nombre de instancia nombre_txt.

9. Arrastramos otro TextInput al Escenario, en el Panel Parámetros

modificamos el campo text a Apellidos: y le damos el nombre de

instancia apellidos_txt.

10.Arrastramos otro TextInput al Escenario, en el Panel Parámetros

modificamos el campo text a E-mail: y le damos el nombre de instancia

mail_txt.

11.Arrastramos un elemento ComboBox al Escenario, en el Panel

Parámetros modificamos el campo data y añadimos la siguiente lista de

elementos:

word 2003

excel2003

access2003

powerp2003

outlook2003

12.En el campo labels introduciremos la siguiente lista de elementos:

Microsoft Word 2003

Microsoft Excel 2003

Microsoft Access 2003

Microsoft PowerPoint 2003

Microsoft Outlook 2003


1


2008

13.Le damos el nombre de instancia producto_cmb.

14.Arrastramos de la Biblioteca tres componentes RadioButton al

Escenario, en el Panel Parámetros les daremos los siguientes valores:

Botón de opción 1:

nombre de instancia: buscadores_rdo

data=buscadores

groupName=encontrar

label= Buscadores

selected=true


nombre de instancia: publicidad_rdo

data=publicidad

groupName=encontrar

label= Publicidad

selected=false


nombre de instancia: otros_rdo

data=

groupName=encontrar

label= Otros:

selected=false

15.Arrastramos un componente TextInput que situaremos a la derecha del

botón de opción Otros, en el Panel Parámetros le cambiaremos el

campo editable a false y le daremos el nombre de instancia otros_txt.

16.Arrastramos un componente CheckBox al Escenario, en el Panel

Parámetros cambia el campo label a Desea recibir información de

nuestras novedades, y el campo selected a true.


1


2008

17.Dale el nombre de instancia info_chk.

18.Arrastra dos componentes Button al Escenario, en el Panel Parámetros

dale a uno el valor Reset en label y el nombre de instancia reset_btn. Al

otro llámale enviar_btn y modifica el campo label a Enviar.

19.Ya tenemos todos los objetos de formulario en la película. Selecciona la

herramienta Transformación Libre y modifica los anchos de aquellos

elementos que, o bien no se puedan leer completamente, o necesiten

más espacio (como los campos apellidos, email y productos).

20.Ahora introduciremos las etiquetas de texto que acompañarán a los

objetos de formulario. Arrastra tantos componentes Label al Escenario

como necesites y cambia su contenido desde el campo text en el Panel

Parámetros.

21.Una vez tengas el formulario entero haz clic sobre la herramienta

Selección y emplaza los objetos de manera correcta.

22.Ahora pasaremos a crear las acciones. Para ello creamos una nueva

capa haciendo clic en el botón Insertar capa en la línea de tiempos y

la llamamos acciones.

23.Seleccionamos el fotograma 1 de la capa acciones y abrimos el Panel

Acciones (Ventana → Acciones).

24.Al principio del todo escribimos:

stop();

System.useCodepage = true;

import mx.controls.*;


1


2008

Paramos la animación en la primera línea, no necesitamos que haga nada más

porque no existen más fotogramas. Si no lo hiciésemos estaría

reproduciéndose todo el rato el fotograma 1 una vez detrás de otra.

Con la segunda línea hacemos que Flash utilice la página de códigos

tradicional del sistema operativo en el que se ejecuta el reproductor para que

los acentos y eñes que escribamos se envíen correctamente al archivo php que

enviará el formulario por mail.

Importamos los controles de formulario con la línea 3 para poder utilizarlos

correctamente y seguimos.

25.Ahora escribe lo siguiente:

nombre_txt.tabIndex = 1;

apellidos_txt.tabIndex = 2;

mail_txt.tabIndex = 3;

producto_cmb.tabIndex = 4;

buscadores_rdo.tabIndex = 5;

publicidad_rdo.tabIndex = 6;

otros_rdo.tabIndex = 7;

otros_txt.tabIndex = 8;

info_chk.tabIndex = 9;

reset_btn.tabIndex = 10;

enviar_btn.tabIndex = 11;

focusManager.defaultPushButton = enviar_btn;

Selection.setFocus(nombre_txt);

Esto hará que se establezca el orden de tabulación. Las dos últimas


1


2008

líneas establecen el botón Enviar como el botón por defecto y colocan el

foco en el campo Nombre.

26.Seguimos con:

var escuchadorLimpiar:Object = new Object();

escuchadorLimpiar.click = function(evt:Object) {

nombre_txt.text = "";

apellidos_txt.text = "";

mail_txt.text = "";

producto_cmb.selectedIndex = 0;

buscadores_rdo.selected = true;

otros_txt.text = "";

otros_txt.editable = false;

info_chk.selected = true;

}

reset_btn.addEventListener("click", escuchadorLimpiar);

Para limpiar los campos cuando se pulse el botón Reset. Hemos creado

un escuchador asociado al botón reset_btn. Dentro del evento click

inicializamos todos los campos a sus estados iniciales.

27.Después escribimos:

var escuchadorOtros:Object = new Object();

escuchadorOtros.click = function(evt:Object) {

if (otros_rdo.selected) {

otros_txt.editable = true;

Selection.setFocus(otros_txt);


1


2008

}

else {



}

}

encontrar.addEventListener("click", escuchadorOtros);

Aquí hemos configurado un escuchador para el conjunto de botones de

opción encontrar.

Cuando se hace clic en alguno de ellos se evaluará si el botón otros_rdo

se encuentra seleccionado. En caso afirmativo se permite la edición del

campo otros_txt y se pasa el foco allí. En caso negativo se vacía el

contenido de otros_txt y se deniega la edición de la caja de texto.

28.Ahora escribe la parte de envío:

var escuchadorEnvia:Object = new Object();

escuchadorEnvia.click = function(evt:Object) {

// si el nombre está en blanco salta un aviso

if (nombre_txt.text.length == 0) {

Alert.show("Introduzca su nombre", "Error", Alert.OK);


return false;

}

// si los apellidos están en blanco salta un aviso

if (apellidos_txt.text.length == 0) {

Alert.show("Introduzca sus apellidos", "Error", Alert.OK);

Selection.setFocus(apellidos_txt);

return false;


1


2008

}

// función para validar el mail

function esMail(mail:String) {

// indexOf devuelve la primera posición de la cadena indicada en el

string, la primera posición es 0

// lastIndexOf devuelve la última posición de la cadena indicada en el

string

if (mail.indexOf("@") > 0 && mail.indexOf("@") == mail.lastIndexOf("@"))

{

// si la @ se encuentra al menos en posición 1 y no hay dos @

if (mail.lastIndexOf(".") > mail.indexOf("@") + 1 && mail.lastIndexOf(".") <

mail.length - 2) {

// si el último . se encuentra después de la @ + 1 y después de éste hay

al menos dos caracteres

return true;

}

else {

return false;

}

}

else {

return false;

}

}

// si el email no es válido salta un aviso

if (!esMail(mail_txt.text)) {

Alert.show("Introduzca un correo electrónico válido", "Error", Alert.OK);

Selection.setFocus(mail_txt);

return false;


1


2008

}

// si el mensaje está en blanco salta un aviso

if (otros_rdo.selected && otros_txt.text.length == 0) {

Alert.show("Indique dónde nos encontró", "Error", Alert.OK);

Selection.setFocus(otros_txt);

return false;

}

// si ha llegado hasta aquí, pasamos a enviar

var envio:LoadVars = new LoadVars();

// rellenamos las variables

envio.nombre = nombre_txt.text;

envio.apellidos = apellidos_txt.text;

envio.email = mail_txt.text;

envio.producto = producto_cmb.selectedItem.data;

envio.nombre = nombre_txt.text;

if (buscadores_rdo.selected) {

envio.encontrar = buscadores_rdo.data;

}

else if (publicidad_rdo.selected) {

envio.encontrar = publicidad_rdo.data;

}

else if (otros_rdo.selected) {

envio.encontrar = otros_txt.text;

}

envio.masinfo = info_chk.selected;

// definimos el onLoad de envio

envio.onLoad = function(exito:Boolean) {

if (exito) {

nombre_txt.text = "";

apellidos_txt.text = "";


1


2008

mail_txt.text = "";

producto_cmb.selectedIndex = 0;

buscadores_rdo.selected = true;



info_chk.selected = true;

}

else {

Alert.show("Ha habido un error en el envío", "Error");

}

}

// enviamos las variables al archivo PHP

envio.sendAndLoad("enviar_mail.php", envio, "POST");


}

enviar_btn.addEventListener("click", escuchadorEnvia);

Hemos configurado un escuchador para el botón Enviar. Cuando se

hace clic en él se ejecuta todo este código.

Presta especial atención a la validación del email.

29.El archivo enviar_mail.php podría tener esta estructura:

<?php

header("Cache-Control: no-cache, must-revalidate");


1


2008

$mensaje = $_POST['nombre'] . " " . $_POST['apellidos'] . " ";

$mensaje .= "(" . $_POST['email'] . ")\r\n\n";

$mensaje .= "Quiere información sobre: " . $_POST['producto'] . "\r\n\n";

$mensaje .= "Conoció la web a través de " . $_POST['encontrar']. "\r\n\

n";

$mensaje .= ($_POST['masinfo'] ? "Sí" : "No") . " quiere más información.\r\

n";

$cabeceras = "From: [email protected]" . "\r\n" . "Reply-To:

[email protected]" . "\r\n";

mail('[email protected]', 'Formulario', $mensaje, $cabeceras);

echo ("exito=true");

abandonado

?>

Actividad 13

Efecto de Lupa

El archivo fla consta de una capa donde se debe colocar la imagen de tamaño

normal, que es la que se ve en el escenario. El punto de registro lo he puesto


1


2008

en la esquina superior izquierda.

Otra capa (encima) con un movie clip, creado de la siguiente manera.

1. Se crea un círculo y se le quito el contorno, queda sólo el relleno. Lo

convierto a movieclip y le doy un nombre de instancia. Casagrande_mc.

2. Se edita el MC. El relleno está en la capa 1. Agrego otra capa (Capa 2) y

en ella coloco la misma imagen de la escena principal y le aumento su

escala X y Y en 200%. Debe estar en el centro del MC. Convierto

también esta imagen en Mc y le doy un nombre de instancia. Yo le puse

lacasota_mc.

3. En la línea de tiempo cambio el orden de las capas, colocando la Capa 1

encima de la Capa2. Ahora puedes ver el relleno del círculo en la Capa

1.

4. La Capa 1 donde está el relleno, la convierto en Máscara.

5. Agrego una tercera capa encima de la máscara. La Capa 3 debe estar

encima de las otras dos.

Dibujo el aspecto que tendrá la mira. En mi caso, solo dibuje dos líneas

dentro del círculo que lo dividen en cuatro sectores y le hice unos lados

redondeados. En esta capa (y si quieres en otras más arriba) dibujas la

forma que quieres para tu mira o lupa. Puedes hacer otro MC, etc.

6. Ahora escribimos las acciones.

Selecciona el MC que creaste en el punto 2 (lacasota_mc) y abre el panel de

acciones, ahí escribes lo siguiente:

onClipEvent (enterFrame) {

/*casagrande_mc es el nombre de instancia del clip que creaste en el

punto 1.*/

xmove = _root.casagrande_mc._x;

ymove = _root.casagrande_mc._y;


1


2008

_x = (250 - xmove) * 2;

_y = (225 - ymove) * 2;

}

Otra forma es escribiendo el código en una capa del nivel principal y hacer

referencia de puntos en vez de colocar simplemente _x y _y. Este código

podrías escribirlo debajo y después de la llave de cierre del código del Punto 7.

Quedaría así:

_root.onEnterFrame = function () {

xmove = _root.casagrande_mc._x;

ymove = _root.casagrande_mc._y;

/*para indicarle a lacasota_mc que cambie su

posición X Y según se mueva el ratón en la escena

principal */

this.casagrande_mc.lacasota_mc._x = (250 - xmove) * 2;

this.casagrande_mc.lacasota_mc._y = (225 - ymove) * 2;

}

El valor 250 y 225 depende del tamaño del gráfico de tamaño normal que

utilices.

Según el dibujo que tengas, va a ser más o menos la mitad del ancho de tu

imagen. En mi ejemplo la casa

de tamaño normal mide 499.9 (500) de ancho por 302.7 (300) de alto. Lo que

hay que tomar en cuenta, es que que el valor, permita que la imagen grande a

través de la lupa, se vea cerca de la imagen

normal.

Regresa a la escena principal (primer nivel)

Si quieres agrega otra capa para escribir el siguiente código

_root.onLoad = function () {

casagrande_mc.startDrag(true);


1


2008

// repito que casagrande_mc es el MC creado en Punto 1

Mouse.hide();

}

Eso es todo. Este es un efecto bastante sencillo pero te dará las pautas para

crear diseños donde necesites un efecto lupa, que según tu conveniencia

pueden ser más sofisticados y llamativos que este simple ejemplito.

Ejercicio 14

Cómo hacer un efecto de brillo en Flash

Voy a utilizar una foto de una tornamesa a la que queremos darle un brillo a un

lado (sería preferible que bloquees esta capa)

De ahí creamos en una nueva capa un gráfico que sea la parte a la que quieres

dar brillo que nos servirá de máscara (digámosle a este gráfico: mask)


1


2008

Generemos un gráfico en una nueva capa y le damos un degradado lineal que

se disminuya a ambos lados, en donde le damos un valor alpha = 0.

Creamos un keyframe en el frame 20 y movemos de lugar el brillo hasta donde

queremos que llegue y le damos un efecto shape (si es un grafico suelto) o

motion (si es un símbolo o lo has agrupado)


1


2008

Ahora ponemos esta capa entre la segunda capa que creamos y la tornamesa

y hacemos click derecho encima de la capa que contiene el segundo gráfico

que creamos (al que lo llamamos mask). Seleccionamos mask o máscara

(según el idioma de tu flash).


1


2008

Y ya está listo. Ya hemos creado el brillo de una manera fácil.

Ejercicio 15

Operaciones Básicas “Suma”

Lo primero que haremos es crear y colocar los diferentes elementos que

vamos a necesitar, en nuestra pantalla. Como en otras ocasiones, dividiremos

en capas los elementos para tenerlos ordenados. Como son pocos, en este

caso, tendremos una capa para los botones y textos, una capa para las

acciones y otra para los fondos.

En la capa de objetos, crearemos los textos:

Arriba del todo, pondremos un campo de texto estático con la frase

"Operaciones matemáticas (SUMAR)" o la que deseemos.

1. Campo de texto, de tipo Dinámico.

En el apartado Var (variable), pondremos como nombre de variable


1


2008

num1.

Aquí aparecerá la primera cifra a sumar.

2. Campo de texto, de tipo Dinámico.


num2.

Aquí aparecerá el segundo valor.

En medio de los dos campos, pondremos un signo + (cambiándolo si hacemos

restas o multiplicaciones...)

3. Campo de texto, de tipo Introducción de texto.

Este campo de texto, nos servirá para introducir nuestro cálculo. En la casilla

de Instancia (izquierda), pondremos como nombre, respuesta. De esta manera

podremos controlar el campo de texto.

En la parte derecha, en la casilla Var, pondremos rdo. y en la parte derecha e

inferior dónde pone Número máximo de caracteres, pondremos 8. Con esto,

limitamos el número de letras que caben en el campo a 8.

4. Botón. Al pulsar el botón, validaremos el resultado. El botón puede ser

cualquiera que tengamos en la biblioteca o cualquier objeto que

insertemos en flash, convirtiéndolo a objeto botón.


1


2008

5.

Campo de texto, de tipo Dinámico.


intentos.

Este campo almacenará las veces que pulsamos el botón para

comprobar el resultado, es decir, el número de intentos.

6.



aciertos.

Este campo almacenará las veces que hemos acertado la operación.

7.



fallos.

Este campo almacenará las veces que hemos fallado la operación.

Acciones

En la capa de acciones, escribiremos el siguiente código (copiar y pegar):

stop();

var limite = 1000;

aciertos=0;

fallos=0;

intentos=0;

respuesta.restrict = "0-9";

//

function crea_operacion() {

num1 = Math.round(Math.random()*limite);

num2 = Math.round(Math.random()*limite);


1


2008

rdo = "";

}

crea_operacion();

//

function comprueba_resultado() {

intentos = intentos+1;

if ((num1+num2) == rdo) {

aciertos = aciertos+1;

crea_operacion();

} else {

fallos = fallos+1;

}

}

La primera variable (var limite=1000), define cuántos dígitos queremos calcular.

De esta manera, mostrará cifras de máximo tres dígitos. Si deseamos cifras

más pequeñas, tendremos que reducir esta variable. Si ponemos limite=100,

mostrará cálculos de dos dígitos, y si ponemos 10, nos pedirá sumas de 1

dígito.

La tres siguientes variables (aciertos, fallos e intentos) son las

correspondientes a los campos de texto con el mismo nombre de variable. De

esta manera, ponemos el valor inicial a 0.

La función de la línea 6 (respuesta.restrict="0-9";) hace que el campo respuesta

(dónde escribimos el resultado de la operación), sólo admita números. De esta

manera evitamos que por error alguien quiera escribir letras en el campo.

La primera función crea_operacion, crea los valores num1 y num2 (las dos

casillas a sumar). Estos valores los crea aleatoriamente. Para ello utilizamos la

función Math.random(), que crea un número entre 0 y 1, lo multiplicamos por el

límite, en este caso 1000 y luego lo redondeamos con Math.round().


1


2008

Por ejemplo La función random me da el valor 0.257579310797155. Este valor

lo multiplicamos por 1000 y tenemos 257.579310797155. Si redondeamos, nos

devolverá el valor 258.

Hay una función en flash, llamada random(), sin Math., que hace un número

aleatorio con límite lo que pongamos entre paréntesis. Por ejemplo random(6)

nos dará números del 0 al 5. Pero esta función está obsoleta y es probable que

desaparezca en el futuro.

La segunda función comprueba_resultados, verifica si lo hemos hecho

correctamente. Lo primero que hace es aumentar el número de intentos

(intentos=intentos+1). Luego tiene un condicional (IF). Comprueba si la suma

de num1 y num2 (num1+num2) es igual (==) al resultado (el campo de texto

del resultado, tiene como valor de variable rdo). Si es así, el número de

aciertos se incrementa en 1, y creamos una nueva operación que nos genera

nuevos números.

Si no es así (no hemos calculado bien), el número de fallos se incrementa en 1

y volvemos a intentarlo con los mismos números.

Por úitimo, en el botón pondremos el siguiente código

on (press) {

comprueba_resultado();

}

Al presionar el botón, comprobaremos que la operación es correcta.

Y ya está...

Con esto y un poco de imaginación podemos hacer hasta una

calculadora.


1


2008

Si sustituimos num1+num2 por num1*num2, tendremos una multiplicación. Si

sustituimos num1+num2 por num1-num2, tendremos una resta.

En el caso de división hay que tener más cuidado, ya que hay que calcular el

valor resultante y el resto... para calcular la división se utiliza / y para calcular el

resto de la división el signo ^.

Si queremos hacer operaciones fijas con un número (por ejemplo, la tabla del

3), siempre pondremos un valor fijo. Por ejemplo: num2 = 3;. Si ponemos esto

en lugar del código que hay, las operaciones que hará serán siempre un valor

multiplicado por 3.s

Actividad 16

Reproductor de sonido

Lo primero que haremos es crear y colocar los diferentes elementos que

vamos a necesitar, en nuestra pantalla. Como en otras ocasiones, dividiremos

en capas los elementos para tenerlos ordenados. Como son pocos, en este

caso, tendremos una capa para los botones y textos, una capa para las

acciones y otra para los fondos.


1


2008

En la capa objetos, insertaremos los elementos necesarios.

Explico brevemente cada grupo siguiendo la imagen superior, (las líneas

verdes no aparecen en el archivo flash), y más adelante indicaremos las

funciones de cada botón.

1. Tres botones. Cada uno de ellos cargará un sonido. Aunque podríamos

hacer que el sonido se cargase con una sóla función, para facilitar la

compresión, he duplicado los códigos en los tres botones.

2. Dos botones. Play/Stop. Controlan la reproducción del sonido actual.

3. Volumen. Dos botones, uno para aumentar y otro para reducir. Un

campo de texto de tipo Dinámico con nombre de variable Var: vol.

4. Tiempo. Una campo de texto de Introducción, con nombre de variable

Var: tiempo_v, para poder indicar un segundo concreto del sonido y un

botón para ir a ese segundo concreto.

5. Dos campos de texto de tipo Dinámico, con nombres de variable Var:

duración y total. En el campo duración almacenaremos los segundos

que lleva el sonido y en el campo total, los segundos totales.

6. Dos botones, para desviar el sonido hacia el altavoz izquierdo o

derecho.

Importando Audios

Flash permite importar los siguientes formatos de audio:

WAV (sólo en Windows)

AIFF (sólo en Macintosh)

MP3 (Windows o Macintosh)

Si tienes QuickTime 4 o posterior instalado en tu sistema podrás importar los

siguientes formatos:

AIFF (Windows o Macintosh)

Sound Designer II (sólo en Macintosh)


1


2008

Películas QuickTime sólo sonido (Windows o Macintosh)

Sun AU (Windows o Macintosh)

Sonidos System 7 (sólo en Macintosh)

WAV (Windows o Macintosh)

Para importar un sonido, seleccionaremos el menú Archivo, la opción

Importar/Importar a biblioteca. Al hacerlo, nos mostrará una ventana de sistema

en la cual podremos seleccionar el archivo. Una vez seleccionado, este archivo

se coloca en la biblioteca.

Cuando tenemos todos los archivos de audio ubicados en la bibloteca, tenemos

que vincularlos a un objeto . Mediante este proceso, lo que hacemos es

identificar los sonidos de biblioteca como objetos que vamos a utilizar. Estos

objetos de audio se cargarán con nuestra película, en el primero fotograma, y

estarán presentes para que los llamemos cuando queramos.

Para vincular un sonido a un objeto (identificarlo), seleccionamos el sonido en

la ventana biblioteca y con el botón derecho (windows) o pulsando en el sonido

+ Manzana (macintosh), nos aparecerá un menú con opciones de biblioteca,

entre las cuales escogeremos Vinculación...


1


2008

Cuando vinculamos un objeto de biblioteca, aparece una ventana dónde

debemos indicar el nombre del objeto (casilla identificador) y marcar las

opciones Exportar para ActionScript y Exportar en primer fotograma. Con

esto, el sonido, con nombre sonido1, por ejemplo, estará disponible para

utilizarlo desde el primer fotograma de nuestra película.

Haremos esta operación con los tres sonidos que hemos importado: los

vincularemos y los denominaremos sonido1, sonido2, sonido3

respectivamente.

Insertamos la programación

Con todos los elementos (botones y textos) colocados en su sitio y los archivos

de audio importados y vinculados, ya podemos comenzar a programar la

interacción.

En el fotograma 1, de la capa Acciones, insertaremos el siguiente código:

s1 = new Sound();

s1.attachSound("sonido1");

//

s2 = new Sound();


//

s3 = new Sound();


1


2008


//

var sonido_actual = "s1";

var tiempo_actual = 1;

var ejecutando = 0;

//

tiempo.restrict = "0-9";

//

this.onEnterFrame = function() {

if (ejecutando == 1) {

total = Math.floor(eval(sonido_actual).duration/1000);

duracion = Math.floor(eval(sonido_actual).position/1000);

}

}

Los tres primeros párrafos se utilizan para asociar los objetos de biblioteca a

objetos dinámicos de flash.

La estructura es:

nombre objeto_dinámico=new Sound();

objeto_dinámico.attachSound("objeto de biblioteca");

Luego definimos tres variables, sonido_actual, tiempo_actual y ejecutando.

var sonido_actual = "s1";

var tiempo_actual = 1;

var ejecutando = 0;

Sonido_actual almacenará el valor del audio que esté sonando en ese

momento (s1, s2 o s3). Al comenzar, indicamos que el sonido_actual es s1.


1


2008

Tiempo_actual almacena el tiempo transcurrido hasta este momento, en el

audio. Lo inicializamos a 1, para evitar un error en la división que veremos más

adelante.

Ejecutando, almacenará dos valores, 1 o 0. 1 significará que hay un sonido

reproduciéndose, 0 significará que no hay ningún sonido reproduciéndose.

La siguiente línea:

tiempo.restrict = "0-9";

Limita los caracteres que podemos introducir en la casilla de tiempo. Con la

función restrict, limitamos dicha casilla a caracteres numéricos, bloqueando la

inserción de otros caracteres.

Por último, está la función que controla el tiempo que lleva reproduciéndose el

audio:

this.onEnterFrame = function() {

if (ejecutando == 1) {

total = Math.floor(eval(sonido_actual).duration/1000);

duracion = Math.floor(eval(sonido_actual).position/1000);

}

}

Esta función se ejecuta continuamente, y controla un valor, ejecutando. Si

ejecutando tiene valor 1, un sonido se está reproduciendo. Si esto es así,

hacemos que las casillas de texto total y duración reciban valores.

total, calcula la duración del audio que está sonando. Para ello, coge el

valor .duration, que nos devuelve el tiempo total en milisegundos de un sonido.


1


2008

duracion, calcula el tiempo transcurrido del audio que se está reproduciendo.

Para ello, coge el valor .position, que nos devuelve el tiempo transcurrido en

milisegundos de un sonido.

1. Acciones de los tres botones que cargan audios (Ver imagen

superior)

on (press) {

stopAllSounds();

sonido_actual="s1";

s1.start();

s1.setVolume(vol);

ejecutando=1;

}

Este es el código del botón 1, el resto de botones son iguales, pero cambia el

s1 por s2 o por s3, según el sonido a reproducir.

StopAllSounds(); Para todos los sonidos actuales. De esta manera evitamos

que haya un efecto eco. Es una solución "drastica" y poco eficiente en

programación. Lo lógico sería conocer cuales sonidos se están reproduciendo y

parar dichos sonidos.

sonido_actual="s1"; de esta manera sabemos cual es el sonido que hemos

seleccionado.

s1.start(); comenzamos a reproducir el sonido.

s1.setVolume(vol); Colocamos el volumen del sonido al valor que se haya

introducido en la casilla vol.

ejecutando=1; Indicamos a nuestra aplicación, que hay un sonido

ejecutándose.


1


2008

2. Play | Stop (Ver imagen superior)

on (press) {

stopAllSounds();

eval(sonido_actual).start(duracion);

eval(sonido_actual).setVolume(vol);

ejecutando=1;

}

El botón de play, controla el sonido que está reproduciendose actualmente

eval(sonido_actual) y lo comienza en el valor de duracion, un valor que como

hemos visto antes, almacenará el tiempo transcurrido hasta el momento.

De esta manera si paramos una reproducción, podremos volver a retomarla en

el segundo que la dejamos.

Stop

on (press) {

eval(sonido_actual).stop();

ejecutando=0;

}

El botón de stop, para el sonido actual eval(sonido_actual).stop() y define la

variable de reproducción a 0, de manera que el sistema sabe que no hay

ningún sonido ejecutándose.

3. Volumen (Ver imagen superior)

El grupo de volumen, tiene dos botoens, para aumentar el volumen y para

reducirlo.

El botón para reducir de volumen:


1


2008

on (press) {

if (vol>=10)

{

vol = Number(vol)-10;


}

}

Comprueba que nuestro volumen sea mayor o igual a 10. Si cumple esta

propiedad, resta 10 a vol. y establece el volumen del sonido .setVolume al valor

que ha calculado (después de restarle 10)

El botón para aumentar de volumen:

on (press) {

if (vol<=90)

{

vol = Number(vol)+10;


}

}

Comprueba que nuestro volumen es menor o igual a 90. Si cumple esta

propiedad, suma 10 a vol. y establece el volumen del sonido .setVolume al

valor que ha calculado (después de sumarle 10)

4. Tiempo (Ver imagen superior)

El grupo de tiempo, tiene un campo de texto llamado tiempo_v dónde podemos

insertar el valor que queramos y un botón con la siguiente acción.

on (press) {

stopAllSounds();

eval(sonido_actual).start(tiempo_v);


1


2008


ejecutando = 1;

}

Para todos los sonidos, empieza el sonido actual en el tiempo definido en

tiempo_v, coloca el volumen según lo que esté escrito en la casilla vol y le

indica al sistema que hay un sonido ejecutándose.

5. Variables (Ver imagen superior)

Dos campos de texto que almacenan los segundos totales del sonido actual y

la cantidad de segundos reproducidos, según la función de fotograma

6. Altavoces (Ver imagen superior)

Con estos botones, controlamos los altavoces. Un botón nos desvia el audio al

altavóz derecho y otro al altavóz izquierdo.

Izquierdo.

on (press) {

if (eval(sonido_actual).getPan()>-100)

{

eval(sonido_actual).setPan(eval(sonido_actual).getPan()-10);

}

}

Derecho

on (press) {

if (eval(sonido_actual).getPan()<100)

{

eval(sonido_actual).setPan(eval(sonido_actual).getPan()+10);

}

}


1


2008

La función .setPan define dónde se desvía el audio.

Un pan de -100 significa que todo el audio se escucha con el altavoz izquierdo

y un pan de 100 significa que se escucha por el derecho. Un pan de 0, indica

que el sonido se reproduce por igual por ambos altavoces.


Guía de Ejercicios de Macromedia Flash 8

Documents

Transcript of Guía de Ejercicios de Macromedia Flash 8