Diseño multimedia > Actividad de aplicación 15

Actividad de aplicación 15: Gaudí

Ver resultado final
El propósito de esta actividad es diseñar un proyector *.EXE desde el cual se pueda acceder a la información contenida en archivos con distintos formatos: *.DOC, *.PDF, *.HTML y *.EXE (otros proyectores Flash). El conjunto resultante de carpetas y ficheros forma un sistema multimedia con posibilidad de estampación en CDROM. Con motivo de la reciente celebración del 150 aniversario de Gaudí, el tema elegido ha sido la biografía y obras de este excepcional arquitecto catalán. Como se trata de un ejecutable *.EXE, al pulsar en Ver resultado final , se muestra un cuadro de diálogo al cual debes responder pulsando en el botón Abrir.
  1

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 los siguientes archivos que necesitarás importar a tu película Flash durante su diseño: la imagen de Gaudí (gaudi.jpg), del templo de la Sagrada Familia (sagradafamilia.jpg) y del dragón del Parque Güell (drac.jpg). También puedes encontrar el texto de introducción de la presentación (gaudi.txt).

aplica15imp.ZIP
  2

Extrae a otra carpeta de tu equipo el contenido del siguiente ZIP. Contiene los archivos que invocará tu proyector durante su ejecución. Éstos son:

  • GaudiBiografía.doc.
  • GaudiObras.exe
  • GaudiNaturaleza.pdf
  • SagradaFamilia.html
  • Gaudi2002.exe

Recuerda que el proyector *.EXE final deberá situarse en el interior de esta carpeta.
aplica15rec.ZIP
3 Abre un documento nuevo en Flash y selecciona Modificar > Documento para definir el tamaño del escenario: 490 x 360 pixeles.
4 Selecciona Archivo > Importar > Importar a escenario para traer al documento las imágenes gaudi.jpg, sagradafamilia.jpg y drac.jpg desde la carpeta donde has guardado estos archivos tras descomprimir el ZIP del paso 1. Idéntico procedimiento para importar el audio desde el archivo catala.mp3. Si abres la biblioteca del documento actual mediante Ventana > Biblioteca podrás ver en ella estos elementos importados. Activa la herramienta Flecha para pinchar y situar las imágenes en su lugar correspondiente.
5 Utiliza el panel Ventana > Paneles de diseño > Transformar para reducir el tamaño de la imagen de Gaudí y del dragón. Haz clic en la imagen y a continuación introduce el valor 60-65% tanto en anchura como en altura en este panel.
6 Clic en la herramienta Rectángulo y en el Inspector de propiedades selecciona como características del trazo: color #008CA7 (azul), grosor 8 pixeles y estilo punteado. Elige Ninguno como color de relleno. Pincha y arrastra sobre el escenario para crear el marco que rodea la presentación.
7 Activa la herramienta Texto y en el Inspector de propiedades define sus propiedades: Arial Black, 24 puntos, negrita y color negro. Pincha sobre el escenario y escribe "Antoni Gaudi (1852-1926)". Pincha y arrastra para seleccionar los años y reducir su tamaño hasta 12 puntos en el Inspector de propiedades. Pincha y arrastra para seleccionar letra a letra y cambiar su color en este panel.
8 Minimiza Flash y abre el archivo gaudi.txt con el Bloc de Notas de Windows. Selecciona el párrafo de introducción : "Arquitecto catalán máximo ..." y cópialo pulsando la combinación de teclas <Ctrl>+<C>. Regresa a Flash, selecciona Texto en el cuadro de herramientas, define las propiedades del texto en el Inspector (Tahoma o Trebuchet), 13 puntos y color (#008CA7) para, a continuación, pinchar y arrastrar sobre el escenario para crear un cuadro de texto de anchura fija. Pulsa <Ctrl>+<V> para pegar el texto en el interior de este cuadro.
9 Clic sobre el fotograma 1 de la línea de tiempo. En el Inspector de propiedades selecciona el sonido catala en la lista desplegable Sonido. Define Evento como Sinc. (Sincronización). Este sonido se reproducirá al inicio de la presentación.
10 A continuación vamos a crear los botones que permiten la interacción del usuario. Elige Insertar > Nuevo símbolo. En el cuadro de diálogo Crear un nuevo símbolo introduce como nombre but_biografia y como comportamiento Botón. Entrarás en el modo de edición de símbolo. Como has elegido diseñar un botón, se muestran los 4 fotogramas clave propios de este tipo de símbolo. En el fotograma Reposo vamos a situar un cuadro de texto : "Biografía" con las caraterísticas: Tahoma o Trebuchet, 14 puntos, negrita y color negro.
  11 Clic derecho sobre el fotograma Sobre y elige Insertar fotograma clave. Sitúate en ese fotograma haciendo clic sobre él, activa la herramienta Flecha y pulsa sobre el cuadro de texto. En el Inspector de propiedades cambia el color original de la fuente. Elige, por ejemplo, amarillo-anaranjado: #FFCC00. Clic derecho sobre el fotograma Presionado y elige Insertar fotograma . No añadimos fotograma clave porque su aspecto no cambiará respecto al fotograma anterior.
  12 Clic derecho sobre el fotograma Zona activa y selecciona Insertar fotograma clave. Haz clic sobre este fotograma, elige la herramienta rectángulo y pincha-arrastra para dibujar un rectángulo con trazo y relleno sobre el cuadro de texto. No importa el color porque este fotograma es invisible. No obstante es imprescindible para que el botón funcione correctamente entre los huecos de las letras que forman el estado Reposo. Abandona el modo de edición de símbolo, pulsando en el botón Escena 1 o bien el botón atrás situado en la base izquierda de la línea de tiempo. Desde la biblioteca del documento ( Ventana > Biblioteca) arrastra al escenario este nuevo botón.
13 Clic sobre el botón y elige Ventanta > Paneles de desarrollo > Acciones. En el panel  Acciones - Botón introduce el código: on (release) { getURL("GaudiBiografia.doc", "_blank");}. Cierra el panel de Acciones.
14

Repite los pasos 10-13 para crear los botones but_arquitectura y but_sagrada y asignarles, una vez situados en el escenario, sus respectivas acciones getURL.

Nombre del símbolo Etiqueta Acción
but_biografia Biografía on (release) { getURL("GaudiBiografia.doc", "_blank");}
but_arquitectura Gaudí y la naturaleza orgánica on (release)  { getURL("GaudiNaturaleza.pdf", "_blank");}
but_sagrada La Sagrada Familia on (release)  { getURL("SagradaFamilia.htm", "_blank");}
but_imagenes Imágenes de su obra on (release)  { fscommand("exec", "GaudiObras.exe");}
but_gaudi2002 Gaudí 2002 on (release) { fscommand("exec", "Gaudi2002.exe");}
but_salir Salir on (release)  { fscommand("quit");}
15 Repite los pasos 10-12 para crear los botones but_imagenes, but_gaudi2002 y but_salir con las etiquetas Imágenes de su obra, Gaudí 2002 y Salir respectivamente. Sitúa el botón but_imagenes en el escenario, haz clic sobre él y pulsa la tecla <F9> para mostrar el panel Acciones-Botón.  Teclea el código: on (release){ fscommand("exec", "GaudiObras.exe");} .Para el botón but_gaudi2002 será: on (release){ fscommand("exec", "Gaudi2002.exe");}
16 Para el botón but_salir el código de script asociado será: on (release){ fscommand("quit");} .De esta forma al pulsar y soltar este botón se cerrará el proyector. Recuerda que el comando fscommand sólo funciona en el proyector *.EXE de Flash. Carece de utilidad cuando la película se va a visualizar a través del navegador. Pincha y arrastra con la herramienta Flecha el botón Salir hasta la esquina superior derecha.
17 Activa la herramienta Flecha y selecciona el grupo de botones definiendo, mediante pinchar y arrastrar, un área del escenario que los contenga a todos. Utiliza el panel Ventana > Paneles de diseño > Alinear para alinear y distribuir estos botones en el escenario. Pincha sobre un botón para moverlo con mayor precisión con ayuda de las teclas de flechas.
18 Clic derecho sobre el fotograma nº1 y selecciona Ventana > Paneles de desarrollo > Acciones. En el cuadro de diálogo Acciones - Fotograma , introduce el código: fscommand("fullscreen", "true"); Cuando la cabeza lectora lea este fotograma, la película se mostrará a pantalla completa.
19 Guarda este archivo *.FLA usando Archivo > Guardar como ... Navega por el sistema de carpetas de tu disco duro para guardar este archivo en la misma carpeta que los archivos *.DOC, *.HTML, *.PDF y *.EXE que has descomprimido en el paso 2. Nombra el documento como Gaudi.fla. A continuación selecciona Archivo > Configuración de Publicación . En la solapa Formatos , activa la casilla Proyector Windows (*.exe) y pulsa el botón Publicar. Clic en el botón Aceptar. Con esta operación se creará la aplicación multimedia Gaudi.exe. Cierra Flash mediante Archivo > Salir.
20 Utiliza el Explorador de Windows para situarte en la carpeta donde has guardado todos los archivos de esta aplicación multimedia (incluído el ejecutable Gaudi.exe). Recuerda que los ejecutables invocados por una orden fscommand deben estar situados en una carpeta con este mismo nombre al mismo nivel que el proyector invocante. Haz clic derecho y selecciona Nuevo > Carpeta . Escribe como nombre fscommand y pulsa <enter> para confirmar. Arrastra hasta ella los archivos *.EXE : Gaudi2002.exe y GaudiObras.exe. Haz doble clic sobre el proyector Gaudi.exe y comprueba el correcto funcionamiento del sistema multimedia.
 Nota: Extrae el contenido del ZIP Multimedia final a una carpeta de tu disco duro. En el interior de la carpeta elegida, se creará otra con el nombre Gaudi. Utiliza el Explorador de Windows para situarte en su interior y comprobar la correcta ubicación de los distintos archivos para que el sistema funcione. Abre el archivo aplica15.fla contenido en el ZIP Diseño FLA resuelto para consultar los detalles de diseño descritos en esta página.
 
Multimedia final    Diseño FLA resuelto
  

Diseño multimedia > Actividad de aplicación 15