Guía de Ejercicios de Macromedia Flash 8
Transcript of 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
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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á
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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).
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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:
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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:
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
6) Hacemos clic en el Menú Modificar → Desagrupar
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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...
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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();
}
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
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.
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
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.
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
Actividad 12
Deberás reproducir el siguiente formulario Flash
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.*;
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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);
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
}
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.
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;
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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;
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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 = "";
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
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);
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");
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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;
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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);
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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)
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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)
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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).
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
num1.
Aquí aparecerá la primera cifra a sumar.
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
5.
Campo de texto, de tipo Dinámico.
En el apartado Var (variable), pondremos como nombre de variable
intentos.
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);
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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().
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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)
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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...
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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();
s2.attachSound("sonido2");
//
s3 = new Sound();
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
s3.attachSound("sonido3");
//
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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:
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
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)
{
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);
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
2008
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.
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);
}
}
The Fourth R ® Inc.
1
Macromedia Flash 8 Guía Ejercicios
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.
The Fourth R ® Inc.