DISEÑO MULTIMEDIA II

TUTOR:TUTOR:CUSTODIO GARCÍA ARROYOCUSTODIO GARCÍA ARROYOE-Mail: E-Mail: cusgarcia@gmail.com

Cel: 311 6950179Cel: 311 6950179

FUNDACIÓN UNIVERSITARIA DEL ÁREA ANDINAFUNDACIÓN UNIVERSITARIA DEL ÁREA ANDINAESPECIALIZACIÓN EN INFORMÁTICA Y TELEMATICAESPECIALIZACIÓN EN INFORMÁTICA Y TELEMATICA

Flash es una herramienta de edición con la que los diseñadores y desarrolladores pueden crear presentaciones, aplicaciones y otro tipo de contenido que permite la interacción del usuario. Los proyectos de Flash pueden abarcar desde simples animaciones hasta contenido de vídeo, presentaciones complejas, aplicaciones y cualquier otra utilidad relacionada. En general, los fragmentos independientes de contenido creados con Flash se denominan aplicaciones, aunque se trate solamente de una animación básica. Se pueden crear aplicaciones de Flash con una amplia variedad de contenido multimedia que incluye imágenes, sonido, vídeo y efectos especiales.

Barra de Menús.Como en cualquier otro programa, en la parte superior de la pantalla se desarrolla la Barra de Menús:

•ARCHIVO: Junto con el menú de Edición, es un menú común en cualquier programa. Nos permite manejar el flujo de trabajo con los diferentes archivos. Desde menú abriremos los documentos de trabajo, los guardaremos y los publicaremos.•EDICIÓN: Al igual que en otros programas, desde este menú podremos realizar acciones de gestión y desplazamiento (Copiar, Cortar, Pegar...).•VER: Se facilita el trabajo en la creación de una película Flash desde el punto de vista de cómo ver el área de trabajo. Incluye las opciones de ayuda al dibujo, como son las Reglas o la Cuadrícula. •INSERTAR: hace referencia a todos los componentes que se pueden ir incluyendo en una película Flash; desde los símbolos, los fotogramas con diferentes cualidades o las escenas de que se compone la película final (es uno de los más usados). •MODIFICAR: Desde este menú podremos alterar cualquier componente de la película... incluso la película en sí misma (es uno de los más usados). •TEXTO: Nos permitirá controlar los diversos atributos aplicados al texto (no lo usaremos mucho). •COMANDOS: Este nuevo menú administra la ejecución de acciones preprogramadas llamadas comandos. (En este curso no lo usaremos). •CONTROL: Rige la reproducción de la animación. Más que este menú usaremos la barra de herramientas de mismo nombre que veremos más adelante. •VENTANA: Este menú gobierna la visualización y organización de toda la interfaz del programa. Desde aquí puedes visualizar y ocultar cualquier panel o barra de herramientas que desees. •AYUDA: Como cualquier otro por grama flash incluye un menú de ayuda.Al contrario de lo que ocurre en otros programas, la ayuda de Flash es realmente una ayuda muy útil cuando estamos perdidos o queremos introducirnos en el conocimiento de alguna parcela del programa.

1. El primer grupo nos ofrece las diferentes herramientas con que contamos para crear y modificar cualquier dibujo en el área de trabajo.

En este caso se ve activada la herramienta de Selección y Movimiento (esquina superior izquierda).

2. Éstas son las herramientas de ayuda para la visualización del área de trabajo

3. Éste es el controlador de color de Flash. Dividido en el color de Contorno y de Relleno.Muy similar al de otros programas vectoriales como Freehand.

4. Al final del panel aparecerán las opciones de la herramienta que tengamos activada.En este caso las opciones de la herramienta de Selección y Movimiento.

Panel y barras de herramientasUna de las partes más importantes de Flash es el panel de Herramientas (Ventana>Herramientas).Dentro de este Panel las herramientas se organizan por grupos:

•BARRA DE EDICIÓN En Flash 8 la Barra de Edición está localizada justo encima de la Línea de tiempo:

Nos da información sobre el zoom al que estamos viendo la escena y nos servirá también para recibir información de la escena en la que estamos y los elementos que tenemos en juego en ese momento.

La barra de Herramientas Principal contiene iconos que nos permiten aplicar los comandos utilizados más a menudo, como por ejemplo Guardar, Copiar, Pegar, etc.

Esta barra de herramientas se define por los botones de Play, Rebobinar, Hacia delante, Hacia atrás, Stop, etc. con los que podremos trabajar con la vista preliminar de películas Flash .

•BARRA PRINCIPAL

BARRA DEL CONTROLADOR

Panel de Línea de TiempoEste es un panel crucial en el trabajo con flash. Nos ofrece la posibilidad de gestionar la estructura y longitud de nuestras películas, de nuestras animaciones en el tiempo.

Desde este panel podremos organizar las escenas de nuestra película, la longitud de cada una de ellas y su contenido.

En fin... va a actuar como una mesa de edición de vídeo.

El panel PropiedadesUno de los paneles más importantes cuando se trabajan con gráficos en Flash es el panel Propiedades.

Desde este panel tenemos la posibilidad de modificar la propiedad de cualquier herramienta que esté activada o cualquier objeto que tengamos seleccionado en el escenario.Por lo tanto, el aspecto de este panel variará dependiendo de lo que tengamos seleccionado, ofreciéndonos sus propiedades para variarlas.

En la imagen, nos ofrece las propiedades de una herramienta que tenemos activada: la herramienta Óvalo.

Menú derecho de paneles

Como hemos visto, los paneles de Herramientas, Línea de tiempo y Propiedades son los más importantes y a los que más recurriremos. Por eso, Flash los coloca en lugares prominentes de la pantalla.

Pero no solo de estos paneles vive Flash... el menú de paneles ocupa la parte derecha de la pantalla y está diseñado para contener los paneles más utilizados por el usuario. Su uso es muy cómodo gracias a que se puede ocultar y visualizar todo el menú con solo pulsar en el botón situado en medio de la barra que lo separa del resto de la pantalla.

Escenario

El Escenario, situado en la parte central del programa, es el área de trabajo en forma rectangular donde se produce la película. Se puede trabajar tanto dentro como fuera de él, teniendo en cuenta que la visualización del resultado de lo que estamos haciendo y que publicaremos, se limita al interior de ese rectángulo o escenario.

Debemos pensar en el área de trabajo como en un teatro: Los espectadores solo van a ver lo que esté a la vista en el escenario... pero nosotros podemos tener cualquier otra cosa entre bastidores (fuera del escenario, pero dentro del área de trabajo).

Visualización del escenario

En la barra de Edición encontramos el menú desplegable de ZOOM:

Las películas flashArchivos .fla y .swfEn el proceso de trabajo con Flash se ven involucrados diferentes tipos de archivos, pero explicar aquí todos ellos puede resultar un poco confuso. Nos centraremos principalmente en dos de ellos:

•.Fla: Archivo de trabajo Este archivo es el que necesitamos para trabajar, dibujar, animar, hacer modificaciones... en la película. Es la extensión con la que se guarda el archivo cuando estamos trabajando. Así, podemos abrirlo, editarlo y trabajar con él, y restaurar con él los demás tipos de archivo. No es el archivo que se publica en Internet.

•.Swf: archivo resultante•Se caracteriza porque sólo es la visualización resultante de la película. No nos permitirá modificarla.

Por eso tiene un tamaño muy reducido; motivo por el que Flash ha alcanzado tanta popularidad en la creación de animaciones dirigidas para Internet.•

Es el archivo que genera la película optimizada preparada para ser reproducida, y puede ser visto por cualquier persona que cuente con un Navegador de Internet y el plug-in Reproductor Flash (o Flash Player). El público no puede editar este tipo de archivo, sólo puede verlo.

En resumen, el archivo .FLA es el ORIGEN y el archivo .SWF es el RESULTADO.

Teniendo el .fla de una película podemos hacer con ella lo que deseemos.

Cuando se edita contenido en Flash, se trabaja en un archivo de documento de Flash. Estos documentos tienen la extensión de archivo .fla (FLA) y se componen de cuatro partes principales:

El escenario El escenario es donde se muestran los gráficos, vídeos, botones y demásobjetos durante la reproducción.

La línea de tiempo La línea de tiempo es donde el usuario indica a Flash cuándo desea que se muestren los gráficos y otros elementos del proyecto. También se utiliza para especificar el orden de capas de los gráficos en el escenario.

Cuando se edita contenido en Flash, se trabaja en un archivo de documento de Flash. Estos documentos tienen la extensión de archivo .fla (FLA) y se componen de cuatro partes principales:

El panel Biblioteca El panel Biblioteca es donde Flash muestra una lista de los elementos multimedia del documento.

ActionScript ActionScript es el código que permite añadir interactividad a los elementos multimedia del documento.

Aplicaciones que se pueden crear con FlashAplicaciones que se pueden crear con Flash

Animaciones: Incluyen anuncios publicitarios, tarjetas de felicitación en línea, dibujos animados, etc. Muchos otros tipos de aplicaciones de Flash también incluyen elementos de animación.

Juegos: Numerosos juegos se crean con Flash. Los juegos normalmente combinan las capacidades de animación de Flash con las capacidades lógicas de ActionScript.

Interfaces de usuario: Un gran número de diseñadores de sitios Web utilizan Flash para diseñar interfaces de usuario. Estas interfaces incluyen tanto sencillas barras de navegación como diseños mucho más complejos.

Áreas de mensajes flexibles: Se trata de áreas de las páginas Web que utilizan los diseñadores para mostrar información que puede variar con el tiempo.

Aplicaciones dinámicas de Internet: Incluyen un amplio abanico de aplicaciones que proporcionan una elaborada interfaz de usuario para mostrar y manipular datos almacenados de forma remota a través deInternet. Una aplicación dinámica de Internet podría ser una aplicación de calendario, una aplicación de búsqueda de precios, un catálogo de compra, una aplicación de educación y pruebas, o bien cualquier otra aplicación que presente datos remotos con una completa interfaz desde el punto de vista gráfico.

Pasos básicos para crear una aplicación de Flash:Pasos básicos para crear una aplicación de Flash:1. Decida las tareas básicas que realizará la aplicación.

2. Cree e importe elementos multimedia como imágenes, vídeo, sonido, texto, etc.

3. Organice los elementos multimedia en el escenario y en la línea de tiempo para definir cuándo y cómo aparecerán en la aplicación.

4. Aplique efectos especiales a elementos multimedia según estime oportuno.

5. Escriba código Action Script para controlar cómo se comportarán los elementos multimedia, incluido cómo responderán los elementos a las interacciones del usuario.

6. Pruebe la aplicación para determinar si funciona como se había previsto y busque cualquier error que se produjera al crearla. La aplicación se debe probar durante todo el proceso de creación.

7. Publique el archivo FLA como archivo SWF para que pueda mostrarse en una página Web y reproducirse con Flash Player.

Creación de un sencillo documento de Flash

Dibujo de un círculo:

1. Seleccione la herramienta Óvalo del panel Herramientas.

2. Seleccione la opción Sin color en el selector de Color de trazo.

3. Elija el color que desee en el selector de Color de relleno. Asegúrese de que el color de relleno contrasta bien con el color delescenario.

4. Con la herramienta Óvalo seleccionada, utilice la función de arrastre con la tecla Mayús presionada para dibujar un círculo en el escenario. Al mantener la tecla Mayús presionada, la herramienta Óvalo se convierte en un círculo.

Forma del círculo dibujado en el escenario

Creación de un símbolo:

Para que la nueva ilustración se vuelva un activo reutilizable, es necesario convertir ésta en un símbolo de Flash. Un símbolo es un activo multimedia que se puede reutilizar en cualquier parte del documento de Flash sin necesidad de volver a crearlo.

Para crear un símbolo:1. Haga clic en la herramienta Selección del panel Herramientas.

2. Haga clic en el círculo del escenario para seleccionarlo.

3. Con el círculo aún seleccionado, elija Modificar > Convertir en símbolo.

4. En el cuadro de diálogo Convertir en símbolo, escriba mi círculo en el cuadro de texto Nombre. El comportamiento predeterminado ahora es Clip de película.

5. Haga clic en Aceptar. Aparece un recuadro de delimitación alrededor del círculo. Acaba de crear un activo reutilizable, denominado símbolo, en el documento.

6. El nuevo símbolo aparece en el panel Biblioteca. Si el panel Biblioteca no está abierto, seleccione Ventana > Biblioteca.

Para crear una animación con el círculo:Para crear una animación con el círculo:

1. Arrastre el círculo a la izquierda del área del escenario.

2. Haga clic en el fotograma 20 de la capa 1 en la línea de tiempo.

3. Seleccione Insertar > Línea de tiempo > Fotograma. Flash añade fotogramas al fotograma 20, que permanece seleccionado.

4. Con el fotograma 20 aún seleccionado, elija Insertar > Línea de tiempo > Fotograma clave.

Se añade un fotograma clave al fotograma 20. El fotograma clave es un fotograma en el que se cambia de manera explícita alguna propiedad de un objeto. En este nuevo fotograma clave, cambiará la ubicación del círculo.

5. Con el fotograma 20 aún seleccionado en la línea de tiempo, arrastre el círculo a la derecha del área del escenario.

6. Seleccione el fotograma 1 de la capa 1 en la línea de tiempo.

7. En el inspector de propiedades (ubicado de forma predeterminada en la parte inferior de la ventana de la aplicación Flash), seleccione Movimiento en el menú emergente Animar.

Aparece una flecha entre los fotogramas 1 y 20 de la capa 1 de la línea de tiempo.

8. En la línea de tiempo, arrastre la cabeza lectora roja hacia adelante y hacia atrás desde el fotograma 1 al 20 para previsualizar la animación.

9. Seleccione Archivo > Guardar.

10. Elija una ubicación para el archivo en la unidad de disco duro y asígnele el nombre SimpleFlash.fla.

11. Seleccione Control > Probar película para probar el archivo FLA.

12. Cierre la ventana Probar película.

Con este paso se crea una animación interpolada del círculo que se mueve desde su posición en el primer fotograma clave del fotograma 1 a la nueva posición en el segundo fotograma clave del fotograma 20.

En cierta medida, Flash trabaja como si fuese una película. Una animación es una sucesión de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la impresión de un movimiento. Cada una de estas imágenes fijas es llamada también fotograma. Los fotogramas son representados bajo forma de rectángulos en la parte derecha del escenario.

En estos rectángulos podemos alojar tres tipos diferentes de imágenes: •Imágenes clave Se trata de las imágenes que nosotros mismos dibujaremos •Imágenes fijas Son las imágenes claves copiadas en los fotogramas siguientes al de la primera imagen clave de manera a producir un efecto de objeto estático. •Imágenes de interpolación Se trata de imágenes calculadas por Flash que permiten la transición gradual entre dos imágenes claves. Este tipo de imágenes muy útiles ya que se generan automáticamente y proporcionan un efecto suave de movimiento o transformación.

Las Capas y los Fotogramas

Por otra parte, una animación esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos. Así, una animación Flash esta compuesta de una superposición de capas en cada una de las cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos permiten trabajar la animación en distintos planos independientes. Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias. Un uso inteligente de las capas es la base para crear animaciones de calidad.

Las Capas y los Fotogramas