Ejemplos de diseño web y multimedia > Diseño de una presentación multimedia

Clic en Modificar > Documento para definir como tamaño del escenario: 550 px de Anchura por 400 px de Altura. Definir el color negro como fondo del escenario. Clic en el botón Aceptar.

Vamos a importar las imágenes a la Biblioteca del documento actual. Elige Archivo > Importar > Importar a Biblioteca. En casilla Buscar en, localiza y abre la carpeta Fauna situada en Curso Flash. Selecciona como Tipo, los archivos de extensión JPEG. Aparecen las cuatro imágenes a importar. Clic en la primera, pulsa la tecla <Mayus> y sin soltarla clic en la última. Has seleccionado todos los archivos. Clic en el botón Abrir.

Ahora vamos a importar los sonidos. Selecciona Archivo > Importar > Importar a Biblioteca. Selecciona como Tipo los archivos de extensión WAV. Aparecen los cuatro sonidos. Selecciónalos todos con el procedimiento anterior. Clic en el botón Abrir.

Mediante Ventana > Biblioteca puedes comprobar que en la biblioteca del documento actual aparecen los mapas de bits y sonidos importados. La información que contienen los TXT será pegada en el interior de bloques de texto.

Abre la biblioteca común Curso mediante Ventana > Otros paneles > Bibliotecas comunes > Curso. Pincha y arrastra hasta la librería del documento actual, el botón sonido botón almacenado en la carpeta Botones. A partir de ese botón vamos a crear 4 botones, cada uno de los cuales reproducirá la voz del animal cuando el cliente pulse sobre él.

Clic derecho sobre el nombre del botón sonido botón en la Biblioteca actual. Selecciona la opción Duplicar. Teclea como nombre del nuevo botón: butlobo. Repite esta operación para crear butasturcon, butoso y buturogallo.

Clic derecho sobre el nombre del botón butlobo en la ventana de la Biblioteca actual y selecciona Edición.

Una vez situado en el modo de edición de símbolos, Insertar > Línea de tiempo > Capa. Doble clic sobre el nombre de la capa para cambiarlo: Sonido.

En el fotograma Presionado de esta nueva capa, clic derecho y selecciona Insertar Fotograma Clave. Pincha y arrastra desde la Biblioteca actual a este fotograma, el sonido sonilobo.

Clic en el nombre Escena 1 o bien en la flecha atrás situados en la base de la línea de tiempo para abandonar la edición de este símbolo.

Repite los pasos 7-10 sobre los botones butasturcon, butoso y buturogallo para incorporarles los sonidos soniasturcon, sonioso, y soniurogallo, respectivamente.

Ahora vamos a definir las capas de la presentación. Haz doble clic sobre el nombre de la capa y define su nuevo nombre: Diapos.

Inserta una nueva capa encima. Su nombre será: Botonera. Haciendo doble clic sobre su nombre se puede cambiar. Esta capa contendrá el título principal y la botonera.

Selecciona la herramienta Texto. En el Inspector de Propiedades define como fuente Arial, como tamaño 18 puntos, color azulito y efecto negrita. Clic sobre el escenario y teclea “FAUNA ASTURIANA”.

Elige la herramienta Flecha para pinchar y situar este título principal en la esquina superior izquierda.

Ventana > Otros paneles > Bibliotecas comunes > Curso  para abrir esta biblioteca común. Dentro de la carpeta Botones, abre la carpeta Playback. Vete arrastrando hasta la esquina superior derecha del escenario y situando de izquierda a derecha los siguientes botones: playback-rewind, playback-step back, playback-step forward, playback-go to end y playback – stop. De esta forma hemos creado la botonera que nos dará control sobre la proyección de diapositivas.

Selecciona la herramienta Flecha y selecciona todos los botones. Ventana > Paneles de diseño > Alinear para visualizar el panel de Alineamiento. Clic en los botones Alinear borde superior y Distribuir horizontalmente respecto al centro.

Clic en la capa Diapos. Vamos a crear la primera diapositiva.

Pincha y arrastra desde la Biblioteca, el mapa de bits fotolobo para situarlo en la izquierda del escenario.

Selecciona la herramienta Texto. En el Inspector de Propiedades define como fuente Arial, como tamaño 16 puntos, color de la fuente: amarillo-naranja (“#FFCC33”) y efecto negrita. Clic sobre el escenario y teclea “1. EL LOBO”.

Elige la herramienta Flecha para pinchar y situar este título secundario al lado de la esquina superior derecha de la fotografía. Para ajustar con precisión la posición, usa las teclas de flechas.

Minimiza la ventana de Macromedia Flash MX 2004 y haz doble clic sobre el archivo txtlobo.txt de la carpeta Fauna. Al tratarse de un archivo de texto, arrancará la aplicación Bloc de Notas de Windows mostrando el contenido de este archivo. Selecciona todo el texto mediante pinchar y arrastrar y cópialo mediante Edición > Copiar desde Bloc de Notas. Cierra la ventana del editor de textos y restaura la ventana de Flash.

Selecciona la herramienta Texto. A continuación pincha y arrastra sobre el escenario en el espacio inmediatamente debajo del título secundario y al lado derecho de la fotografía. Has creado un cuadro de texto de anchura fija.

En el Inspector de Propiedades de este cuadro de texto, definir: Tipo de fuente: Arial; Tamaño: 14 puntos; Color de la fuente blanco y efecto Negrita.

Observa que el cursor parpadea en el cuadro de texto del escenario. Si esto no ocurre repite el paso 23. En lugar de teclear la información de este cuadro la vamos a pegar desde el portapapeles mediante: Edición > Pegar.

Activa la herramienta Flecha y pincha y arrastra este cuadro para situarlo correctamente en el escenario en relación con el título y la fotografía

Pincha y arrastra una instancia del símbolo butlobo para situarlo debajo de este cuadro de texto.

Clic derecho en el fotograma nº2 en la capa Diapos y selecciona Insertar fotograma Clave. Ahora nos encontramos en el fotograma nº2. Vamos a cambiar su contenido para mostrar la información del siguiente animal: el oso. Haz clic en cualquier parte del escenario para deseleccionar el contenido del escenario.

Clic derecho sobre la imagen del lobo, elige Intercambiar mapa de bits, selecciona fotooso.jpg y acepta.

Clic derecho sobre el botón de sonido, elige Intercambiar símbolo, selecciona butoso y acepta.

Doble clic sobre el título de la diapositiva y sustitúyelo por “2. EL OSO”. Acepta.

Minimiza la ventana de Flash y abre mediante doble clic el archivo de texto txtoso.txt. Arrastra para seleccionar su contenido y copialo al portapapeles mediante Edición > Copiar . Cierra el Bloc de Notas y regresa a Flash.

Doble clic sobre el texto del fotograma nº2, arrastra para seleccionarlo todo y elige Edición > Pegar. El contenido inicial es sustituido por el almacenado en el portapapeles.

Elige la herramienta Flecha y sitúa adecuadamente los bloques de este fotograma.

Clic derecho sobre el fotograma nº2 de la capa Botonera y selecciona Insertar fotograma.

Repite los pasos 28-35 para crear los fotogramas nº3 y nº4 con los siguientes datos:

• Fotograma nº3. Título secundario: “3. EL ASTURCÓN”. Mapa de bits: fotoasturcon. Archivo de texto con información: txtasturcon.txt. Botón con sonido: butasturcon.

• Fotograma nº4. Título secundario: “4. EL UROGALLO.”. Mapa de bits: fotourogallo. Archivo de texto con información: txturogallo.txt. Botón con sonido: buturogallo

A continuación vamos a asignar acciones de navegación a cada botón de la consola. Con la herramienta Flecha activada, selecciona el primer botón. En este caso el botón playback-rewind.

Muestra el panel Acciones - Botón utilizando Ventana > Paneles de diseño > Acciones .

Introduce el código de script, tratando de respetar los signos de puntuación, las llaves y paréntesis así como las minúsculas/mayúsculas:

on (release){

    gotoAndStop(1);

}

La acción gotoAndStop(<número_de_fotograma>) envía (goto) la cabeza lectora al fotograma cuyo número se indica y se detiene allí (stop). Con ello se regresará a la primera diapositiva siempre que se pulse en este botón.

Sin cerrar el panel Acciones, realiza clic sobre el botón playback – step back. Ahora introduce el siguiente código:

on (release) {
   prevFrame();
}

La acción PrevFrame(); envía la cabeza lectora al fotograma anterior para detenerse allí.

Clic sobre el botón playback - step forward. Introduce el código de ActionScript:

on (release) {
   nextFrame();
}

La acción nextFrame(); mueve la cabeza lectora al siguiente fotograma para detenerse allí.

Clic sobre el botón playback - go to end.  Teclea el siguiente código:

on (release){

   gotoAndStop(4);

}

La acción gotoAndStop(); envía la cabeza lectora al fotograma cuyo número se indica. En este caso al pulsar en este botón se alcanzará siempre la última diapositiva: nº4.

Clic sobre el botón playback – stop. Debes introducir el siguiente código:

on (release){

   fscommand("quit");

}

La acción fscommand("quit"); cierra el proyector. Esto ocurrirá cuando se pulse en este botón. Recuerda que esto sólo funciona si la película se visualiza a través del proyector .EXE. Debes sustituirlo por getURL("javascript:window.close()"); si la película se visualizará a través del navegador web. En este caso el ejercicio consiste en crear un proyector de diapositivas para ejecutar en el disco duro local. Por este motivo utilizaremos la acción fscommand.

Sólo resta indicar a Flash que cuando comience a reproducir el primer fotograma, se detenga para mostrar la diapositiva. Clic sobre el fotograma 1 de la capa botonera. Si el panel Acciones - Fotograma no está visible entonces elige Ventana > Paneles de desarrollo > Acciones. Teclea el código:

stop();

Usando Archivo > Guardar, guarda este archivo FLA en tu carpeta favorita. De esta forma ya le indicas a Flash dónde guardar el resto de archivos de publicación. Puedes utilizar como nombre de este archivo Fauna.fla

En el cuadro de diálogo que se despliega mediante Archivo > Configuración de Publicación, activa la casilla Proyector Windows (.exe) y haz clic en el botón Publicar.

Cierra la aplicación Flash.

Utilizando el Explorador de Windows, localiza el proyector EXE en tu disco duro y observarás que aparecen los distintos archivos de publicación de Flash. Doble clic sobre el proyector fauna.exe y comprueba su funcionamiento. Advierte que esta presentación se puede visualizar también desde el navegador a través de la página fauna.html que se ha creado.

Ejemplos de diseño web y multimedia >  Diseño de una presentación multimedia