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

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

La imagen del barco se importa desde el archivo exodo.jpg. Elige Archivo > Importar > Importar a Biblioteca. En este cuadro de diálogo navegar hasta situarse en la carpeta del disco duro Oriente. Seleccionar como Tipo, los archivos de extensión JPEG. Clic en el archivo exodo y más tarde en Abrir.

Mediante Ventana > Biblioteca puedes comprobar que en la biblioteca del documento actual aparece un mapa de bits que contiene esta imagen importada.

Arrastra desde la Biblioteca al Escenario este mapa de bits .

Para ajustar su tamaño, selecciona la herramienta Transformación libre y el modificador Escalar. Pincha y arrastra sobre la esquina inferior izquierda de la imagen para reducir un poco su tamaño hasta alcanzar unas dimensiones de 300 x 195 pixeles aproximadamente. (Ver los valores X e Y del Inspector de Propiedades). Ajusta la posición del mapa de bits a la esquina superior izquierda del escenario.

Minimiza la ventana de Macromedia Flash MX 2004 y haz doble clic sobre el archivo intro.txt de la carpeta Oriente. 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 de la fotografía. Has creado un cuadro de texto de anchura fija.

En el Inspector de Propiedades de este cuadro de texto, define: Tipo de fuente: Tahoma; Tamaño: 11 puntos; Color de la fuente: #333399 (azul). Clic sobre el selector de color para que se despliegue la paleta. Clic sobre la casilla que contiene el valor numérico y teclea este código de color precedido del símbolo “#”. En ocasiones es necesario trabajar con los valores hexadecimales de los colores para asegurarse la misma tonalidad en distintos objetos de un mismo escenario.

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

Inserta debajo otro cuadro de texto “Fuente: El Pais Digital” . Puedes utilizar como color de la fuente “#FFCC33” (amarillo/naranja) y de Tamaño: 9 puntos.

Ahora vamos a crear los botones del interfaz. Cada botón va a ser un cuadro de texto. El texto variará de color: negro (reposo) y amarillo/naranja (sobre). Al pulsar (estado presionado) el bloque se desplazará ligeramente hacia la derecha y hacia abajo simulando la pulsación.

Insertar > Nuevo símbolo. Teclea butcrono como nombre del símbolo y selecciona el Comportamiento de Botón. Clic en Aceptar.

Selecciona la herramienta Texto. En el Inspector de propiedades selecciona la fuente Tahoma, el tamaño de 14 puntos y el color negro. Haz clic sobre el escenario y teclea la etiqueta “Cronología”.

Selecciona la herramienta Flecha. Clic sobre este cuadro de texto. En Ventana > Paneles de diseño > Información aparece el panel Información. Clic sobre el selector esquina en la parrilla de selectores. (Ver figura). Teclea el valor 0 en las casillas X e Y para centrar el cuadro de texto respecto a su esquina superior izquierda.

Clic derecho sobre el fotograma Sobre en la línea de tiempo y selecciona Insertar Fotograma Clave en este menú contextual.

Con la herramienta Flecha activada, haz clic sobre el cuadro de texto. En el Inspector de Propiedades cambiar el color del mismo. Puedes desplegar la paleta de colores e introducir en la casilla el valor “FFCC33”.

Clic derecho sobre el fotograma Presionado en la línea de tiempo y selecciona Insertar Fotograma Clave en este menú contextual.

Con la herramienta Flecha activada, haz clic sobre el cuadro de texto. En el Inspector de Propiedades introduce el valor 2 en las casillas X e Y. De esta forma simulamos la pulsación desplazando el cuadro de texto ligeramente a la derecha y abajo.

Clic derecho sobre el fotograma Zona activa en la línea de tiempo y selecciona Insertar Fotograma Clave.

Selecciona la herramienta Rectángulo. No importa el color de trazo y de relleno definidos porque la zona activa no es visible. Pincha y arrastra para definir un rectángulo encima del cuadro de texto. Éste área será la zona sensible al ratón. No conviene dejar como zona activa el cuadro de texto porque entre los huecos que ofrecen las letras el botón no sería activo.

Clic en el botón Atrás (flecha) situado en la esquina inferior izquierda de la línea de tiempo o bien Edición > Editar documento para abandonar el modo de edición de símbolos y regresar a la película.

Repetir la secuencia de pasos 12-21 para crear los siguientes botones:  

Para visualizar la biblioteca de símbolos selecciona Ventana > Biblioteca. Selecciona la herramienta Flecha. Arrastra los botones creados para situarlos uno debajo de otro en la parte derecha del escenario. Ver ilustración anterior.

Selecciona la herramienta Línea y dibuja en color negro una línea de grosor 3 pixeles por encima y por debajo de esta botonera. Sitúa el botón Salir -> por debajo de la línea inferior un poco separado del resto.

Elige la herramienta Flecha. Pincha y arrastra para seleccionar ambas líneas y todos los botones de la botonera.

Utiliza Ventana > Paneles de diseño > Alinear para visualizar el panel Alineamiento. En Alineamiento selecciona la opción Alinear borde izquierdo. En Distribuir selecciona la opción Distribuir verticalmente respecto al centro. En este caso evita pulsar el botón En escenario. Cierra este panel.

Vamos a asignar una acción a cada botón. Vamos a comenzar por la instancia del botón Butcrono situada en el escenario. Selecciona este botón y despliega el panel Acciones mediante Ventana > Paneles de desarrollo > Acciones.

En la parte derecha de este panel, teclea el script :

on (release) {

    getURL("crono.htm");

}

Clic sobre el fotograma nº1  para seleccionarlo y pulsa la tecla <F9> para mostrar el panel Acciones - Fotograma.

Introduce el script: fscommand("fullscreen","true");

Usando Archivo > Guardar, guarda este archivo FLA en la carpeta Oriente. 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 OrienteMedio.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. Clic en el botón Aceptar.

Cierra Flash usando Archivo > Salir.

Utilizando el Explorador de Windows, sitúate en la carpeta Oriente de tu disco duro y observarás que aparecen los distintos archivos de publicación de Flash. No obstante todavía nos falta situar en la carpeta fscommand los ejecutables EXE que invoca nuestro proyector para que los encuentre.

Crea una subcarpeta dentro de la carpeta Oriente con el nombre fscommand: Clic derecho, selecciona Nuevo > Carpeta. Escribe como nombre fscommand  y pulsa <enter> para confirmar.

Arrastra a ella los EXE: israel.exe e inti.exe.

Doble clic sobre el proyector orientemedio.exe y comprueba su funcionamiento.

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