Actividad de aplicación

Actividad de aplicación 16: El arte hispano-musulmán

Aquí se sugiere el procedimiento para crear una aplicación que muestre una secuencia de diapositivas. Cada diapositiva tiene una estructura similar: título, fotografía, texto y un enlace para ampliar información. Asimismo se implementa una botonera para que el usuario pueda controlar el visionado. En este caso el tema elegido es una muestra de la arquitectura del arte hispano-musulmán. Como se trata de un proyector *.EXE, al pulsar en Ver resultado final , se muestra el cuadro de diálogo Descarga de archivos. Haz clic en el botón Abrir para iniciarlo.

Extrae a una carpeta de tu disco duro el contenido del archivo ZIP que se adjunta a continuación. Como resultado de esa extracción encontrarás seis archivos: el texto artehispanomusulman.txt, el audio Arabian_-Sarbah-1534_hifi. mp3 y las imágenes alhambra.jpg, giralda.jpg, medina.jpg y mezquita.jpg

aplica16ini.ZIP

Sitúate en un documento nuevo de Flash. Clic en Modificar > Documento para definir como tamaño del escenario: 480 px de Anchura por 400 px de Altura. Define el color negro como fondo del escenario.

Vamos a importar los recursos necesarios a la Biblioteca del documento actual. Elige Archivo > Importar > Importar a Biblioteca. En el cuadro de diálogo Importar , en la casilla Buscar en , navega para localizar la carpeta donde has situado los recursos que has extraído en el paso 1. Selecciona como Tipo los archivos de extensión *.JPEG . Se muestran las 4 imágenes. Clic sobre el archivo que contiene la primera imagen, pulsa la tecla <mayus> y sin soltarla haz clic en la última imagen. Se han seleccionado las 4 imágenes. Pulsa el botón Abrir para concluir la importación. Repite esta operación pero ahora elige como Tipo los archivos de extensión *.MP3 para importar el sonido Arabian_-Sarbah-1534_hifi. mp3.

Ahora vamos a definir las capas de la presentación. Doble clic sobre el nombre de Capa 1 para definir su nuevo nombre: Diapos. Inserta una nueva capa encima pulsando en el botón Insertar capa situado en la base izquierda de la línea de tiempo. Doble clic sobre su nombre para redefinirlo: Botonera. En esta capa colocaremos el título principal y la botonera. Idem para la crear la capa Sonido.

Haz clic sobre el primer fotograma de la capa Sonido. En el Inspector de propiedades del fotograma seleccionado, despliega la lista Sonido y elige el único sonido disponible: Arabian_-Sarbah-1534_hifi. En Sincronización define Inicio y en la lista desplegable adjunta elige Reproducir indefinidamente. De esta forma el sonido se reproducirá cuando la cabeza lectora se coloque en el primer fotograma, se mantendrá sonando de forma continua y no se iniciará su reproducción de nuevo si ya está sonando en ese momento.

Clic sobre el fotograma 1 en la capa Botonera y selecciona Ventana > Paneles de desarrollo > Acciones. En el cuadro Acciones - Fotograma teclea la acción: stop(); .De esta forma al iniciarse la reproducción de la película, ésta se detendrá en el primer fotograma.

Activa la herramienta Texto y en el Inspector de propiedades define: Arial, 18 puntos, negrita y color blanco. Clic sobre el escenario y teclea "EL ARTE HISPANO-MUSULMÁN". Elige la herramienta Flecha para pinchar y situar este título principal en la esquina superior izquierda.

Abre la biblioteca común Curso mediante Ventanas > Otros paneles > Bibliotecas comunes > Curso. Doble clic para abrir la carpeta botones y dentro de ella la subcarpeta 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, pincha y arrastra sobre el escenario para definir un área que contenga a todos los botones. De esta forma éstos se seleccionan simultáneamente. 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. Asegúrate de que el botón En escen. de este panel no está activado.

Clic en el primer fotograma de la capa Diapos. Pincha y arrastra desde la Biblioteca, el mapa de bits mezquita para situarlo en la izquierda del escenario. Utiliza el panel Ventana > Paneles de diseño > Transformar para escalar la fotografía a un 55% en anchura y altura. Con la herramienta Texto define las siguientes propiedades en el Inspector: Arial, 16, negrita y color anaranjado (#FFCC00). Sitúa un cuadro de texto en el escenario con "La Mezquita de Córdoba". Sitúa otro con el texto "1/4" en el flanco izquierdo de la botonera para indicar el número de la dispositiva. En este caso el tamaño de la fuente más pequeño, por ejemplo, 12 puntos.

En el Inspector de propiedades elige otra fuente: Tahoma o Trebuchet, 12 puntos, negrita y color anaranjado para crear un cuadro de texto con un enlace a una URL externa. Pincha y escribe " +++ Más información +++". Activa la herramienta Flecha y seleccionar este cuadro de texto. En la casilla Enlace situada en el Inspector de propiedades de este cuadro de texto, introduce la dirección URL a visitar. Por ejemplo: "http://www.google.com/search?q=mezquita+córdoba". En la lista desplegable Destino elige la opción _blank. De esta forma al pulsar sobre este texto, se mostrará la primera página de una búsqueda en el Google con estos términos. Activa la herramienta Flecha para pinchar y situar este cuadro en la parte inferior derecha del escenario. Haz clic en cualquier parte vacía del escenario para deseleccionar este cuadro de texto.

Si observas el ejemplo, el texto que acompaña a la fotografía de cada diapositiva se divide en 2 cuadros de texto: uno situado debajo de la fotografía y otro, mayor en altura, en la columna derecha. Vuelve a activar la herramienta Texto y define en el Inspector de propiedades las siguientes características: Arial, 12 puntos y color blanco. Minimiza Flash y abre con el Bloc de Notas de Windows el archivo de texto extraído en el paso 1: artehispanomusulman.txt. Desde esta aplicación selecciona el primer párrafo: "Fue construida por el emir ... ... por un campanario". Copia su contenido utilizando Edición > Copiar. Regresa a Flash, pincha y arrastra para definir el primer cuadro de texto de anchura fija debajo de la fotografía. Cuando el cursor parpadea en el cuadro de texto, pulsa la combinación de teclas <Ctrl>+<V> para pegar su contenido. Activa la herramienta Flecha y pincha y arrastra este cuadro para situarlo debajo de la fotografía. Repite este paso para crear el cuadro de texto con el segundo párrafo.

Vamos a crear la segunda diapositiva. Clic derecho en el fotograma 2 de la capa Diapos y selecciona Insertar Fotograma Clave. Ahora nos encontramos en el fotograma nº2. Vamos a cambiar su contenido par mostrar la información del monumento siguiente. Haz clic en cualquier parte del escenario para deselecciona el contenido del escenario.

Clic derecho sobre la imagen de la mezquita, selecciona Intercambiar mapa de bits y selecciona medina. Doble clic sobre el título de la diapositiva y sustitúyelo por "El Palacio de Medina-Al-Zahara". Doble clic sobre el indicador de nº de diapositiva y sustituye "1/4" por "2/4". Clic sobre el cuadro "+++Más información" y sustituye el enlace en el Inspector de propiedades por éste: "http://www.google.com/search?q=palacio+medina+zahara".

Minimiza Flash y regresa al texto en el Bloc de Notas. Selecciona desde aquí el primer párrafo correspondiente al Palacio de Medina: "Construído en las ... ... las riquezas de sus salones" y copialo mediante Edición > Copiar. Regresa a Flash, haz doble clic sobre el primer cuadro, arrastra para seleccionar todo su contenido y elige Edición > Pegar. El contenido inicial es sustituido por el nuevo. Repite esta operación con el segundo cuadro de texto de la diapositiva.

Repite los pasos 13-14-15 para crear la 3ª y 4ª diapositiva con la información textual y gráfica de "La Alhambra de Granada" y "La Giralda de Sevilla".

Clic derecho sobre el fotograma 4 en la capa Botonera y elige Insertar Fotograma. Idem en la capa Sonido.

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. Accede al panel Acciones utilizando Ventana > Paneles de desarrollo > Acciones. Introduce en el panel el siguiente código: on(release){ gotoAndStop(1);}. Los scripts que deben asociarse a cada botón se recogen en la siguiente tabla.

Botón	Tipo
playback-rewind	on(release){ gotoAndStop(1);}
playback-step back	on(release){ prevFrame();}
playback - step forward	on(release){ nextFrame();}
playback - go to end	on(release){ gotoAndStop(4);}

Clic sobre el botón playback - stop. En el panel de Acciones introduce el código: on(release){ fscommand("quit");} .Al pulsar este botón se cerrará el proyector.

Archivo > Guardar para grabar este archivo *.FLA en tu carpeta favorita. Puedes utilizar como nombre artehismu.fla. A continuación, elige Archivo > Configuración de publicación y en la solapa Archivos activa la casilla Proyector Windows (.exe). Pulsa el botón Publicar. Cierra la aplicación Flash.

Utilizando el Explorador de Windows, localiza el proyector *.EXE en esa carpeta favorita. Observa que también aparecen los distintos archivos de publicación de Flash. Doble clic sobre el proyector artehismu.exe y observa su funcionamiento. Esta presentación también se puede visualizar a través del navegador haciendo clic en el archivo artehismu.html . Recuerda que el archivo *.SWF debe estar presente al lado del *.HTML para que esto sea posible.

Actividad resuelta

Ejemplos de diseño web y multimedia > Actividad de aplicación 16