Guía de Ejercicios de Macromedia Flash 8

Macromedia Flash 8

2008

Guía Ejercicios

Guía de Ejercicios de Macromedia Flash 8

The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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 Guía Ejercicios

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

Macromedia Flash 8

2008

Guía Ejercicios

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

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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

Macromedia Flash 8

2008

Guía Ejercicios

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

Macromedia Flash 8

2008

Guía Ejercicios

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.

Pasos:


1

Macromedia Flash 8

2008

Guía Ejercicios

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). 3) Abrimos el Panel Propiedades y seleccionamos los fotogramas del 1 al 4. 4) En la opción Sinc seleccionamos Flujo. The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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.


1

2008


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

Macromedia Flash 8

2008

Guía Ejercicios

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. 6) Hacemos clic en el Menú Modificar → Desagrupar


1

Macromedia Flash 8

2008

Guía Ejercicios

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. Actividad 7 The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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 2) Mediante la Herramienta Texto marcada en la barra de herramientas con una A escribe el 3.


1

Macromedia Flash 8

2008

Guía Ejercicios

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.

Actividad 8 Botones


1

Macromedia Flash 8

2008

Guía Ejercicios

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

Macromedia Flash 8

2008

Guía Ejercicios

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.


1

Macromedia Flash 8

2008

Guía Ejercicios

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

Macromedia Flash 8

2008

Guía Ejercicios

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.


1

Macromedia Flash 8

2008

Guía Ejercicios

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.

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 1) Hazlo con Archivo → Nuevo. 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.


1

Macromedia Flash 8

2008

Guía Ejercicios

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) 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. The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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. 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 1) Hazlo con Archivo → Nuevo. 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. The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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

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); } The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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.

Actividad 12 Deberás reproducir el siguiente formulario Flash


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

2008


Botón de opción 2: nombre de instancia: publicidad_rdo data=publicidad groupName=encontrar label= Publicidad selected=false Botón de opción 3: 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. 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).


1

2008


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


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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); } else { otros_txt.text = ""; otros_txt.editable = false; } } 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.


1

Macromedia Flash 8

2008

Guía Ejercicios

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); Selection.setFocus(nombre_txt); 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; }

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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; } // 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; } The Fourth R ® Inc.

1

2008


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 = ""; mail_txt.text = ""; producto_cmb.selectedIndex = 0; buscadores_rdo.selected = true; otros_txt.text = ""; otros_txt.editable = false; 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"); Selection.setFocus(nombre_txt); } enviar_btn.addEventListener("click", escuchadorEnvia);


1

Macromedia Flash 8

2008

Guía Ejercicios

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:


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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; _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 The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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); // 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)


1

Macromedia Flash 8

2008

Guía Ejercicios

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)

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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)

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

Macromedia Flash 8

2008

Guía Ejercicios

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 num1. Aquí aparecerá la primera cifra a sumar.


1

Macromedia Flash 8

2008

Guía Ejercicios

2. Campo de texto, de tipo Dinámico. En el apartado Var (variable), pondremos como nombre de variable 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. 5. Campo de texto, de tipo Dinámico. En el apartado Var (variable), pondremos como nombre de variable intentos.


1

Macromedia Flash 8

2008

Guía Ejercicios

Este campo almacenará las veces que pulsamos el botón para comprobar el resultado, es decir, el número de intentos. 6. Campo de texto, de tipo Dinámico. En el apartado Var (variable), pondremos como nombre de variable aciertos. Este campo almacenará las veces que hemos acertado la operación. 7. Campo de texto, de tipo Dinámico. En el apartado Var (variable), pondremos como nombre de variable 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); rdo = ""; } crea_operacion(); //


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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.

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. The Fourth R ® Inc.

1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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(); s2.attachSound("sonido2"); // s3 = new Sound(); s3.attachSound("sonido3"); // var sonido_actual = "s1"; var tiempo_actual = 1; var ejecutando = 0; // tiempo.restrict = "0-9";


1

Macromedia Flash 8

2008

Guía Ejercicios

// 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. 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";


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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


1

Macromedia Flash 8

2008

Guía Ejercicios

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: on (press) { if (vol>=10) { vol = Number(vol)-10; eval(sonido_actual).setVolume(vol); } } 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) {


1

Macromedia Flash 8

2008

Guía Ejercicios

vol = Number(vol)+10; eval(sonido_actual).setVolume(vol); } } 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); eval(sonido_actual).setVolume(vol); 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.


1

Macromedia Flash 8

2008

Guía Ejercicios

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); } } 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.


1

Guía de Ejercicios de Macromedia Flash 8

Recommend Documents