Unidad 1. Introducción a Flash Professional CS5 (I)

1.1. ¿Qué es Flash?

Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores.

Flash fue creado con el objeto de realizar animaciones y diseños vistosos para la web, y gráficos interactivos.

Los motivos que han convertido a Flash en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash Pro CS5.

Desde la web de Adobe te puedes descargar una versión de evaluación de Flash Professional CS5 válida para 30 días. Esta versión estará disponible hasta que salga la siguiente.

Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash y Adobe. aulaClic no tiene ninguna relación con Adobe.

1.2. ¿Por qué usar Flash CS5?

Las posibilidades de Flash son extraordinarias, con cada nueva versión se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo.

Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar Flash.

Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático. Con Flash podremos crear de modo fácil y rápido desde animaciones simples para lograr algunos efectos visuales, hasta eplicaciones complejas, como juegos .

Además sus desarrolladores están apostando muy fuerte por ActionScript, el lenguaje de programación Flash. A cada versión se mejora y ofrece un abanico de posibilidades cada vez mayor, por lo que además de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un modo real.

Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el preferido por los diseñadores profesionales... ¿Entonces qué es?

1.3. Novedades de Flash CS5

Adobe suele integrar todos sus productos en una suite única en la que prima, sobre todo, la compatibilidad entre ellos. Así la compañía se desmarca del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo año tras año, que son capaces de interactuar entre ellas y nos ofrecen la posibilidad de reutilizar proyectos creados con un programa en otro. De hecho, podemos usar herramientas más potentes de dibujo, como Illustrator, para crear nuestros gráficos, y después animarlos con Flash.

Vamos a ver las opciones más destacadas que encontramos en esta última versión:

Motor de texto Text Layout Framework.

Flash CS5 ha cambiado profundamente el motor de texto que emplea. En nuevo motor TLF, incluye bastantes mejoras, entre las que podemos destacar las siguientes:

Nuevos estilos de carácter y párrafo. Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de

película. El texto pude fluir entre varios contenedores asociados.

 

El panel Fragmentos de código.

Este panel nos permite insertar rápidamente el código ActionScript 3 de las acciones más comunes.

Además, podemos emplearlo para almacenar nuestro propio código, y así poder reutilizarlo cómodamente.

Empaquetado de aplicaciones para iPhone.

Flash CS5 nos permite convertir nuestras aplicaciones i juegos creados con el programa, en aplicaciones compatibles con iPhone.

 

Mejoras del vídeo.

Los puntos de referencia nos permiten navegar por el vídeo o reaccionar a eventos. Ahora, podemos añadirlos directamente desde el inspector de Propiedades o mediante ActionScript, sin necesidad de recodificar el vídeo.

Además, se ha mejorado el componente reproductor de vídeo, que nos permite verlo en tiempo real, y nos ofrece una mayor colección de estilos.

 

Mejora de la herramienta huesos.

Se han añadido propiedades de "muelle" a la herramienta de cinemática inversa (IK). Con esto, se consiguen resultados mucho más ágiles y realistas.

1.4. Flash, ventajas y desventajas

El principal uso de Flash se da en el mundo de la web. Desde la creación de pequeños botones o banners publicitarios, hasta webs totalmente basadas en esta tecnología, Internet está repleta de animaciones Flash.

Como todo, Flash presenta tanto ventajas como inconvenientes:

El tiempo de carga. Mientras que una página HTML puede ocuparnos 10-20 KB como media, una animación Flash ocupa mucho más. Evidentemente depende del contenido que tenga, pero suelen superar los100 KB con facilidad, y si además incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tardan estar visible el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar... simplemente, se irán a otra página.

Los buscadores. Son capaces de indexar el contenido de nuestra página, el texto, pero no el contenido del Flash, ya que no lo pueden leer, lo que afectará negativamente al posicionamiento de la página. Y hoy en día es crucial para una web encontrarse bien posicionada. No obstante, los buscadores trabajan para solucionar este problema, pero de momento al mejor forma de solucionarlo es crear un diseño paralelo sin Flash, lo que aumenta el trabajo.

Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlos instalados, o de que un navegador tenga los scripts deshabilitados por seguridad, impedirán la visualización del Flash. Este plugin lo suelen incorporar la mayoría de navegadores, es gratuito y se puede instalar desde aquí de forma muy

intuitiva, pero siempre habrá usuarios que prefieran salir de nuestra página si tienen que instalar "algo raro".

Compatibilidad con distintos dispositivos. Cada vez es más frecuente acceder a la web con teléfonos móviles, SmartPhones y Tablets, y algunos de ellos no soportan Flash (como los Android anteriores a la versión 2.2).

Flash es una tecnología propietaria de Adobe, por lo que su futuro depende de lo que esta compañía quiera hacer con él.

Otro aspecto a tener en cuenta es la usabilidad de las páginas Flash, a veces se cae en la tentación de dar demasiada importancia al diseño y olvidarse de que la página debe ser fácil de usar, aunque es más un error de diseño que del propio Flash.

Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de las carencias de las páginas tradicionales que nos obligaban a usar Flash. Por lo que su uso deja de tener tanto sentido. De hecho, Flash CS5 incluye una herramienta para exportar contenidos Flash a HTML5.

Por supuesto su fuerte uso en la web se debe a que también aporta ventajas:

La web se vuelve muy vistosa y atractiva, además de añadirle más interactividad. El aspecto visual es muy importante para la web, ya que al visitante, sobre todo al principio, "le entra por los ojos".

Con un poco de práctica, el desarrollo con Flash se vuelve rápido. Flash permite comportamientos que de otra forma no podríamos lograr. Compatibilidad con navegadores. Uno de los principales problemas en el diseño

web es que el resultado no tiene por qué verse igual en todos los navegadores. Con Flash, nos aseguramos de que lo que hemos creado es exactamente lo que se verá.

Por tanto, se hace necesario cuando lo que se necesita es que el usuario pueda interactuar completamente con el contenido.

 

Resumiendo, insertar o no contenido Flash en una página web puede ser cuestionable, aunque depende de muchas cosas. Aún así, no hemos de olvidar que Flash tiene muchísimas aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la venta "clónicos" del Flash). Por ejemplo, se puede usar Flash para la creación de DVDs interactivos (como los que incluyen las revistas de informática, entre otras), la creación de banners publicitarios o lo que más está de moda ahora: la creación de dibujos animados (os sorprendería saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Además, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseños de interiores y trabajar con imágenes vectoriales en general. No dejéis de aprender a manejar el programa con más futuro... (al menos en cuanto a diseño web)

Aquí tenéis algunas páginas interesantes hechas con FLASH NRG y fwa, o con entradas muy llamativas http://www.derbauer.de/,

Nuestro consejo es emplear Flash únicamente en lo imprescindible en nuestra web dejando el contenido principal de la web y los elementos de navegación como HTML, que la web pueda funcionar si un usuario no puede ver los elementos en Flash y no se

pierda nada realmente importante, a no ser que se trate de una web en la que su valor sea justamente su contenido interactivo o visual en Flash.

1.5. Mi primera animación Flash

Una de las características principales de Flash es su sencillez, esta sencillez en su utilización permite crear animaciones de un modo efectivo y rápido.

Pongámonos en situación, supongamos que queremos crear una animación en la que una pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas, pero nada más lejos de la realidad.

Veamos cómo Flash nos lo pone fácil.

En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá más adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que modo nos facilita el trabajo.

A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de modo que cuantos más instantes dibujemos, más real parecerá el movimiento. Pues bien, con Flash bastará con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujará la pelota en el momento de tocar el suelo y en el tercero la pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta crearlo, pues bastará con copiar el primero). Por tanto, vemos que el trabajo más largo (dibujar los objetos) ya está hecho.

Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo que transcurre entre los instantes en los que la pelota está arriba y abajo) y por último se le indica a Flash que cree una animación de movimiento entre estos fotogramas. Fácil ¿verdad?

En esta versión de Flash aún se ha facilitado más la realización de animaciones de movimiento como veremos en el tema correspondiente.

Observa cómo ha quedado:

Podéis poner a prueba vuestros conocimientos realizando la:

Unidad 2. El entorno de Flash CS5 (I)

2.1. La interfaz de Flash Pro CS5

Flash CS5 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene la ventaja de que es casi idéntica a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por primera vez:

A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash CS5 en castellano. Podeis descargar esta versión de forma gratuita desde la web de Adobe. Estará disponible hasta que se lance la siguiente evrsión.

En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa Flash. Flash recordará nuestras preferencias y abrirá el programa tal y como lo dejamos la última vez que lo utilizamos.

En esta imagen faltan algunos menús. Todos se irán viendo a lo largo de este curso aunque no aparezcan en esta imagen, que sólo pretende mostrar las partes principales de la interfaz de Flash. Veamos cuáles son.

2.2. La barra de Menús

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas...

Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.

Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas...

Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena ...).

Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad.

Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos.

Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película....

Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarñan a encontrar errores de progrmación en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar...

Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a todos los paneles y también la posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc.

Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...

Veamos un ejemplo práctico del uso de menús, realiza el Ejercicio utilizar la cuadrícula

2.3. La Línea de tiempo

La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)

2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película.

Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen).

A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo.

Para saber más acerca de la Línea de Tiempo y de los distintos tipos de fotogramas que

existen visita nuestra Página Avanzada .

2.4. Las capas

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas.

Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se verá en la unidad referente a Capas.

2.5. El Escenario

A continuación veremos las diferentes partes que conforman el Área de trabajo empezaremos con la más importante: el Escenario.

Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento:

Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de busqueda rellenando los campos de Título y Descripción.

Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.

Unidades de Regla: Unidad que se empleará para medir las cantidades.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.

Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Para cambiar este número, arrastra con el cursor hacia la derecha o izquierda.

Transformar en predeterminado: Este botón permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee.

Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso Cambiar las dimensiones de la película

2.6. Las Vistas o Zooms

La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar más o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.

Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente.

Para saber más acerca de los Zooms página Básica .

2.7. Los Paneles

Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel Acciones). Su misión es simplificar y facilitar el uso de los comandos.

Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de trabajo. Pudiéndose expandir o minimizar con un clic de ratón.

Si no están visibles en el lateral derecho, puedes visualizarlos desplegando el menú Ventana y haciendo clic sobre el nombre del panel que quieras mostrar.

Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias disposiciones de paneles, para que si en algún momento el entorno se vuelve un poco caótico puedas recuperar tu configuración elegida desde el menú Ventana.

Para ello deberás acceder a la opción Ventana → Espacio de trabajo → Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora sólo bastará darle un nombre a la disposición y será accesible desde el mismo elemento de menú Espacio de trabajo en cualquier momento.

Todos los paneles se estudiarán en profundidad a lo largo del curso. Aún así, vamos a nombrarlos y a resumir las funciones de la mayoría de ellos.

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil. Panel Color: Mediante este panel creamos los colores que más nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico.

(Incluidas nuestras creaciones). Panel Información: Muestra el tamaño y las coordenadas de los objetos

seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas. Panel Escena: Modifica los atributos de las escenas que usemos. Si aún no sabes lo que son las Escenas, te lo explicamos en nuestro tema básico

. Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a

nuestra película. Panel Comportamientos: Permiten asignar a determinados objetos una serie de

características (comportamientos) que después podrán almacenarse para aplicarse a otros objetos de forma rápida y eficaz.

Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios, scrolls etc...)

Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras películas.

Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel.

Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamaño etc... Es fundamental, no debeis perderlo de vista nunca.

Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película de forma fácil y rápida

Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles

Ejercicios unidad 2: El entorno de Flash CS5

Ejercicio 1: Crear una película a nuestro gusto

Crea una película que tenga las siguientes propiedades:

1. Un tamaño de 300 x 100 px2. Un color de fondo rojo3. Un Velocidad de los Fotogramas de 14 fps

Ejercicio 2: Estructurar una película

1. Abre una nueva película2. Crea 2 Escenas y llámalas Escena 1 y Escena 23. Crea 2 capas en cada una.4. Llámalas E1_1, E1_2 y E2_1, E2_2

Ejercicio 3: Creando fotogramas

1. Crea en una película nueva 3 fotogramas clave2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto

Ejercicio 4: Identificando fotogramas

1. Dada la siguiente película

Identifica todos los tipos de fotogramas existentes y a qué tipo pertenecen. ¿Recuerdas para qué sirve cada uno?

Ejercicio 5: Paneles

1. Abre el Panel Color.2. Abre el Panel Acciones.3. Abre el Panel Alinear.4. Cierra el Programa Flash CS5 5. Vuelve a abrirlo. ¿Qué notas?

AYUDA PARA LOS EJERCICIOS ANTERIORES

Ejercicio 1: Crear una Pelicula a nuestro gusto

El apartado 1 nos propone cambiar las dimensiones del Escenario:

1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.

2. Pulsamos sobre la pestaña Unidades de Regla y seleccionamos Píxeles (px)3. Introducimos las medidas pedidas (300 x 100) en Dimensiones.

El apartado 2 nos propone cambiar el color de fondo del Escenario:

1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento

2. Pulsamos sobre la pestaña Color de fondo, el puntero se convertirá en un "cuentagotas".

3. Seleccionamos el color pedido.

El apartado 3 nos propone aumentar la velocidad de reproducción de la película

1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.

2. En Veloc. Fotogramas escribe 14 fps.

El resultado debe ser un rectángulo rojo con las medidas propuestas.

Ejercicio 2: Estructurar una Película

Vamos a crear la película pedida y a estructurarla tal y como piden

1. Abrimos una nueva Película desde el menú Archivo → Nuevo2. Accedemos al Panel Escena desde Ventana → Otros Paneles → Escena3. Creamos una nueva Escena pulsando sobre el signo .4. Les cambiamos los nombres haciendo doble clic en sus nombres actuales

Ahora falta crear el número de capas pedido.

1. Seleccionamos la Escena E1 en el Panel Escena2. Creamos otra capa más, pulsando el signo en la línea de tiempo. 3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres

actuales (por defecto Capa 1 y Capa 2)

Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2 al 3.

El Panel Escena debería quedar así:

Y así las Capas:

 

Ejercicio 3: Creando Fotogramas

Vamos a crear los fotogramas pedidos:

1. Abrimos una nueva película2. Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe3. Vamos al menú Insertar y seleccionamos Fotograma Clave4. Hacemos clic sobre el fotograma 3 y seleccionamos Insertar → Línea de Tiempo

→ Fotograma Clave

Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales

1. Seleccionamos el fotograma 1 y hacemos clic en el menú Insertar → Línea de Tiempo y seleccionamos Fotograma.

2. Ahora el fotograma 2 será un fotograma normal y el 3 y el 4 serán Fotogramas Clave. Seleccionamos el fotograma 3 y repetimos el proceso anterior.

3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto será lo que obtengamos:

Fijémonos en que no están los puntos negros en los Fotogramas Clave ni los cuadrados blancos en lo fotogramas normales.

Esto se debe a que no hay nada dibujado en dichos fotogramas.

si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:

Ejercicio 4: Identificando Fotogramas

Vamos a identificar los diferentes tipos de fotogramas:

1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan una animación de Movimiento. (probablemente contendrán al mismo objeto pero cambiado de lugar). El tercero es un Fotogramas Clave normal.

2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son fotogramas normales. Simplemente determinan la duración de los Keyframes a los que van asociados.

3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor. Existen y en la película se verán como fotogramas en blanco (o con el color de fondo que hayamos seleccionado).

4. Los fotogramas del 16 en adelante son fotogramas vacíos y no se verán en la película.

Ejercicio 5: Paneles

1. Abrimos el Menú Ventana.2. Hacemos clic en Color. Se abrirá el Panel correspondiente.3. Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear.4. Cerramos el programa y lo volvemos a abrir.5. Observamos que los Paneles siguen donde los dejamos. Flash adapta su entorno

a nuestras preferencias.

Unidad 3. Dibujar y colorear (I)

3.1. El dibujo en Flash CS5

Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash).

No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en este ámbito es casi tan grande como la de éstos programas. Vamos a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido.

3.2. La barra de Herramientas. Herramientas básicas

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas más importantes:

Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... Su uso adecuado puede ahorrarnos tiempo en el trabajo.

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente.

Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

Herramienta de forma: Permite dibujar formas predefinidas como las que aparecen en la imagen, la última herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo:

La herramienta Óvalo permite dibujar círculos o elipses de manera rápida y sencilla.

Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear Óvalo.

Herramienta Lápiz: Es la primera herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

Herramienta Pincel: Su funcionalidad es parecida a la del lápiz, pero por defecto su trazo es más grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar su herramientas.

Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas.

Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Pincel. Pero su función es la de eliminar todo aquello que "dibuje".

3.3. La barra de Herramientas. Herramientas avanzadas

Herramienta Lazo:

Su función es complementaria a la de la herramienta Selección, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones:

. Esto es la herramienta Varita Mágica, tan popular en otros programas de

dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que

aparece es este: para seleccionar Poligono.

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

Herramienta Subselección: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)

Herramienta Cuentagotas: Su misión es "capturar" colores para que posteriormente podamos utilizarlos. Para ver cómo funciona, consulta este videotutorial:

3.4. La barra de Herramientas. Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente sino que además debemos hacer clic en la línea o en el objeto que has dibujado.

Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este:

Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensación de estar "unidos".

Suavizar: Convierte los trazos rectos en líneas menos rígidas.

Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos.

3.5. El panel Color

El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten.

Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre el color que está junto al

lápiz y si queremos modificar un relleno, haremos clic en el color que está

junto al bote de pintura . Al hacerlo aparecerá un panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el estándar.

En vez de este selector rápido, podemos usar el panel Color, que encontraremos entre los paneles.

Así mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la herramienta Bote de Pintura).

Se pueden crear diferentes tipos de relleno:

Sólido: Consiste en un relleno formado por un solo color. Degradado Lineal: Es un tipo especial de relleno, de modo que un color se

degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro Degradado Radial: Es igual que el anterior, pero los degradados tiene forma

circular. Relleno de mapa de Bits: Permite colocar como relleno alguna imagen existente

en la película (O ajena a ella si antes se "importa")

Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio paso a paso Crear transparencias.

3.6. El panel Muestras

El Panel Muestras sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del panel Color). Una vez esté agregado el color, pasará a estar disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película.

Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película.

Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso Colorear un óvalo

Ejercicios unidad 3: Dibujar y colorear

Ejercicio 1: Bandera Olímpica

1. Dibuja 5 aros.2. Cámbiale los colores. Por ejemplo, los colores de la bandera olímpica (azul,

negro, rojo, amarillo y verde)3. Únelos de modo que parezcan los aros olímpicos.

Ejercicio 2: Saturno

1. Dibuja un óvalo2. Convierte su color de relleno un degradado de verde oscuro a verde claro (por

ejemplo).3. Crea el aro que le rodea.4. Une los 2 objetos para que parezca el planeta Saturno

Ayuda ejercicios unidad 3: Dibujar y colorear

Ejercicio 1: Los Aros Olímpicos

Vamos a dibujar los aros olímpicos.

Como siempre, partiremos de un nuevo documento Action Script 3.0, a través del menú Archivo → Nuevo.

1. Seleccionamos la Herramienta Óvalo.2. Trazamos un óvalo, y para que sea perfectamente circular, mantenemos pulsada

la tecla Shift.3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con

la herramienta Selección, copiarlos desde el menú Edición → Copiar y pegarlos desde el mismo menú.

4. Una vez estén dibujados, seleccionamos el relleno de cada óvalo y pulsamos la tecla Suprimir para eliminarlo. (Igualmente podíamos haber seleccionado el

color "ninguno" y posteriormente creado los óvalos que hubieran aparecido sin color de fondo)

5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionándolo en el Panel Color.

6. Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona la Herramienta Selección, haz clic en el aro que quieras mover y arrástralo. Para movimientos precisos, puedes utilizar las teclas con flechas.

Ejercicio 2: Saturno

Vamos a dibujar un planeta parecido a Saturno

1. Seleccionamos la Herramienta Óvalo.2. Creamos un óvalo circular, que hará de planeta.3. Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla

Suprimir.4. Seleccionamos el relleno del óvalo y abrimos la opción Relleno.5. Seleccionamos la opción Degradado Radial.

6. Pulsamos en y seleccionamos los colores que deseemos, (podemos añadir tantos colores como queramos y probar su efecto).

7. Dibujamos el anillo del planeta, por ejemplo creando otro óvalo con la forma adecuada. No lo dibujes sobre el planeta.

8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por ejemplo, borramos parte del planeta seleccionándola de forma rectangular y pulsando la tecla Suprimir tal y como vimos en el paso 3.

9. Separa los dos hemisferios del planeta.10. Pon el anillo sobre el hemisferio inferior, y después, arrastra sobre el anillo la

otra parte del planeta.

Unidad 4. Textos (I)

4.1. El texto en Flash

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML etc...

Actualmente Flash utiliza dos motores para trabajar con texto: el motor clásico, heredado de las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motor incluido en Flash CS5. Este último, es el utilizado por defecto en Flash.

Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor de texto TLF.

4.2. Insertar texto

En la barra de Herramientas encontramos la herramienta Texto , que es la que nos permitirá escribir texto en nuestros proyectos.

Los caracteres del texto no está introducidos directamente en el documento, si no que están confinados en un contenedor de texto. En Flash podemos introducir dos tipos de contenedores:

Texto de puntos.El tamaño del contenedor depende del texto introducido, creciendo y decreciendo con él.

Texto de área.Podemos definir su tamaño, independientemente del texto que contenga.

Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y comenzar a escribir. En cambio, si queremos introducir un Texto de área, tenemos que hacer clic y arrastrar para definir el tamaño del área. En cualquier caso, siempre podemos convertir un Texto de puntos en área simplemente cambiando su tamaño, estirando de los controles de transformación que se muestran alrededor.

4.3. Propiedades de los textos

El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el panel muestra una gran cantidad de opciones, agrupadas en categorías.

Observarás que las imágenes anteriores muestran distintas opciones para el texto. Esto se debe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permite muchas más opciones. La de la derecha tiene establecido el motor Texto clásico, y aparecen menos opciones, las que veníamos encontrando en la anterior versión del programa.

Si quieres saber cómo utilizar el texto clásico, puede seguir este avanzado .

Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y FlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores, deberás de emplear el motor clásico.

Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras más específicas las veremos más adelante, cuando vayamos a emplearlas:

Podemos elegir cómo se comporta el texto: Si es Seleccionable, y el usuario lo podrá seleccionar y copiar en el portapapeles, Sólo lectura, lo que impedirá que lo pueda seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.

Además, podemos establecer la orientación del texto, en Horizontal (por defecto) o Vertical.

Posición y Tamaño: Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte muy importante y deben respetarse.

En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina superior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superior izquierda de la escena. También se muestran los valores del ancho (AN) y alto (AL) del texto.

Carácter. En esta sección encontramos las opciones típicas del texto:

Familia: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseño.

Estilo: Nos permiten la combinación de los dos estilos de texto habituales: texto normal (Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).

Tamaño: El tamaño de la tipografía empelada.

Interlineado: Nos permite controlar la separación entre las líneas de texto dentro de un mismo párrafo.

Color: Como al resto de elementos, podemos dar color al texto.

Espaciado: Determina el espaciado adicional entre caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Ajuste automático: Activar esta casilla provoca que la separación entre caracteres se

realice de modo automático.

Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro texto. Encontramos estas opciones:

o Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el equipo, lo que hace más liviano el archivo SWF al no tener que incluirlas. Aunque nos exponemos a que la fuente no esté instalada, por lo que se empleará otra. Sólo deberíamos de utilizar esta opción para las familias de fuentes más comunes.

o Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberíamos de incorporar la fuente, como veremos más adelante. No debemos de emplearla en textos animados.

o Suavizado para animación, es la mejor opción cuando pretendemos animar texto, ya que se obtienen animaciones más fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberíamos de incorporar la fuente.

Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para rotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superíndice y subíndice.

 

Carácter avanzado:

Vínculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés escribiendo en ese momento.

Destino: Determina si la URL a la que el texto hace referencia se cargará en la misma ventana del navegador, en una nueva ...

Además, en esta sección podemos especificar cómo se comporta el texto Por ejemplo, que se muestre en mayúsculas, los saltos, etc...

Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).

A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del párrafo.

A la derecha: Todas las líneas empezarán tan a la derecha como sea posible dentro del recuadro de texto que hayamos definido).

Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites. Las diferentes opciones se refieren a la última línea del texto, que suele ser más corta que el resto.

El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo y el espacio interlineal.

Para practicar estas propiedades te aconsejamos realizar Ejercicio Propiedades del texto.

4.4. Propiedades de los contenedores de texto

En el panel de propiedades, podemos encontrar algunas opciones que afectan a los contenedores de texto, en la categoría de opciones Contenedor y flujo.

La propiedad Comportamiento se refiere a como se amplía un contenedor de Texto al introducir texto.

Caracteres máx.: Nos permite limitar el número máximo de caracteres que se pueden introducir en la caja de texto.

Alineación: nos permite establecer la alineación horizontal del texto en el contenedor. Sus valores pueden ser Superior, Centrar, Inferior o Justificar.

Columnas nos permite dividir fácilmente un texto de área en el número de columnas indicado. En este caso, también podremos regular el espacio entre ellas (medianil).

.

El relleno (padding) permite crear una separación entre los bordes del contenedor y el texto.

Además, podemos asignar un color de relleno y borde al contenedor.

4.5. Flujo de texto entre contenedores

Al escribir, podemos crear textos de áreas con un texto fijo, y colocarlo en un lugar del documento. Pero pensemos en un tríptico, por ejemplo. En este caso lo ideal sería tener un texto de área centrado en cada página, y que cuando el texto no nos cabe en uno, pase al siguiente. Esto lo conseguimos enlazando los distintos textos de área.

Los textos de área tienen un cuadradito en su comienzo, llamado puerto de entrada, y otro al final, llamado puerto de salida.

Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco. Pero cuando el texto desborda al elemento, el puerto de salida muestra el símbolo . Cuando dos elementos de texto aparecen enlazados, el que va primero muestra una flecha hacia afuera en el puerto de salida, que está unido al puerto de entrada del siguiente elemento, que muestra una flecha hacia adentro.

Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, y hacemos clic con la herramienta Selección en uno de sus puertos, en el de entrada si queremos que el nuevo objeto vaya delante, o en el de salida si el nuevo objeto irá a continuación. El cursor cambiará a cursor de , dándonos dos opciones:

Hacer clic en el en otro área de texto para enlazarlo. Trazar un nuevo elemento de texto, igual que con la herramienta Texto. Si esto

lo hacemos en un puerto ya enlazado, el nuevo elemento de texto se colocará entre los elementos que estaban enlazados.

Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que mueve todo el texto al puerto de origen.

 

Para practicar lo que hemos visto, te aconsejamos realizar el ejercicio paso a paso Crear un flujo de texto.

4.6. Incorporar fuentes

Al crear un archivo de flash con texto, si en Suavizado no hemos elegido fuentes de dispositivo, tenemos que tener presente que si hemos elegido una fuente que no está disponible en el sistema que se reproduce la película, se sustituirá por otra fuente disponible. Esto es un problema, ya que puede alterar bastante nuestro diseño.

Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto. Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentes del sistema.

Para incorporar una fuente en la película usamos el botón Incorporar que aparece en el panel de Propiedades.

Se abrirá el siguiente cuadro de diálogo:

En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamaño).

El nombre que le demos se mostrará en la Biblioteca y estará lista para utilizarse.

Cuando creemos un campo de texto, seleccionamos nuestra fuente, que aparecerá señalada con un asterisco (*).

De esta forma nos aseguramos que nuestro proyecto se verá tal cual lo creamos.

4.7. Introducir texto

Aunque el uso más común y principal de los contenedores de texto es mostrarlo, también podemos emplearlos como un cuadro de entada de texto.

Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.

En el siguiente ejemplo, tenemos tres cuadros de texto: el de arriba es editable, el del medio solo seleccionable y el de abajo solo se puede leer. Y también hemos hecho que el contenido de todos cambie según lo que se escriba en el primero.

Para recoger información de los usuarios, normalmente emplearemos componentes de formulario, que son controles específicos para esta función. Pero a esto le dedicaremos un tema completo más adelante.

Pero ¿cómo recogemos la información introducida en el cuadro de texto? Aunque aún no lo hemos explicado, el texto es un objeto. Y como tal, tiene una propiedad que nos permite leer su contenido mediante ActionScript. Cuando comencemos a trabajar con ActionScript veremos que esto, es una tarea muy sencilla.

Ejercicio 1: Crear textos

1. Crea una película con 1 fotograma. 2. Crea un objeto de texto para lectura que diga: Bienvenido a mi página web.3. Utiliza la fuente Verdana a un tamaño de 45.

Unidad 5. Sonidos en Flash (I)

5.1. El sonido en Flash

¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin sonido?

Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3) en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la página sin llegar a escucharla.

Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las páginas web es un poco más fácil, ¿qué aporta Flash?

Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff, .mp3, etc...) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película.

Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animación). En definitiva, Flash nos lo vuelve a poner fácil.

Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodías. Es preferible que sea el usuario quien las active a través de un botón, o si es necesario que se reproduzcan automáticamente, tener un control fácilmente localizable para silenciarlo.

5.2. Importar sonidos

Utilizar sonidos externos. Podemos insertar en una película de Flash sonidos que tengamos en formato digital: grabados por nosotros mismos, descargados de internet, etc...Pero para que esté disponible en nuestra película y podamos usarlo, antes debemos de importarlo.

Realmente debemos de importar a flash cualquier archivo externo que queramos usar: sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película (este panel se verá más adelante).

Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente.

Una vez esté importado, podremos usarlo con total libertad.

Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.

Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido.

Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar.

El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca).

 

Utilizar los sonidos incorporados. Flash ya incluye una serie de sonidos incorporados que podemos importar a nuestro proyecto. Se trata principalmente de sonidos como

disparos, risas, sonidos animales, etc. Los podemos encontrar a través del menú Ventana → Bibliotecas comunes → Sonidos. Se abrirá un panel como el siguiente:

Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos más que arrastrarlos desde este panel.

5.3. Propiedades de los sonidos

En Flash CS5, al igual que en versiones anteriores, todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aquí tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningún sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie.

Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en seleccionar el fotograma en el que queremos reproducir el sonido, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:

Veamos las partes que tiene este panel.

Nombre: En este desplegable nos aparecerán los sonidos que tenemos importados en la Biblioteca. Deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarla). Si no queremos reproducir sonido, seleccionamos Ninguno.

Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensación de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si deseamos añadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algún programa creado específicamente para este propósito antes de importarlo.

En el punto Editar Sonidos se tratará en más profundidad estos efectos.

Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro sonido, estas son las opciones que tenemos:

Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto y provoca que el sonido se empiece a reproducir al pasar la película por el fotograma en el que está situado. También se puede sincronizar el sonido con botones y los demás tipos de símbolos. El sonido se repetirá completamente, y si lo ejecutamos varias veces, se reproducirá de nuevo, aunque no hubiese acabado, provocando que el sonido se solape.

Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya se está reproduciendo, no se reproduce de nuevo.

Detener: Detiene el sonido seleccionado. Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté

asociado, por tanto, si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de que la película se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reacción muy negativa en los que pueden estar viendo nuestra película).Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una película. En esta situación, es muy recomendable que el sonido y las imágenes estén sincronizadas.

Repetir: Determina el número de veces que se reproducirá el sonido según lo indiques de la derecha. También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bucle hasta llegar al siguiente fotograma clave.

No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y los fotogramas que las contengan) se dupliquen también, aumentando considerablemente el tamaño de la película.

5.4. Insertar sonido en línea de tiempo

Al añadir un sonido directamente sobre la línea de tiempo, lo asociamos a un fotograma. Por tanto, el sonido se comenzará a reproducir en ese fotograma, y continuará hasta que sea detenido. Esto es útil, por ejemplo, para agregar música a la película.

Lo mejor será crear una nueva capa para cada sonido. Así lo controlaremos fácilmente. Creamos un fotograma clave en el momento en que queremos que comience a reproducirse el sonido, y lo arrastramos de la biblioteca al escenario. También podemos elegirlo directamente desde el panel de Propiedades.

Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la sección de Sonido.

Seleccionamos los efectos deseados, y las veces que lo queremos Repetir.

En el menú Sinc. seleccionamos la opción de sincronización deseada. Por ejemplo, si queremos que cada vez que se pase por ahí, se lance un sonido breve, porque por ejemplo se mueve un objeto, seleccionaremos evento. En cambio, si queremos iniciar la reproducción del sonido a partir de ahí, marcamos Inicio. Si queremos iniciar el sonido en un fotograma más adelante, seleccionamos Detenido, y lo iniciamos creando un fotograma clave, seleccionado el mismo sonido.

Así representa Flash los sonidos insertados en Fotogramas

Por defecto, Flash entiende que queremos reproducir el sonido completo, si no ¿por qué importarlo todo cuando genera un archivo más grande? Por supuesto, podemos hacer que el sonido se detenga en un fotograma determinado. Para ello, creamos un fotograma clave, y con el mismo sonido seleccionado, elegimos Detener en el desplegable Sinc.

Otra sería utilizar la opción Flujo.

Al seleccionar esta opción, el sonido se reproducirá hasta que se acabe o llegue a un fotograma clave, siguiendo la película. Sólo es aconsejable esta opción si realmente la necesitamos.

5.5. Sonidos en botones

Es muy común insertar un breve sonido al pulsar un botón, así el usuario percibe que ese botón "hace algo".

Como veremos más adelante, los botones tienen su propia línea de tiempo, con sus distintos estados. Por eso, no tenemos más que insertar los sonidos para cada estado.

Lo que sí debemos de tener en cuenta, es en usar la opción de Sincronización Evento, para que se reproduzca el sonido en su totalidad.

5.6. Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos realizar. Disponemos de estos efectos del panel Propiedades:

Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo. Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho. Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en

el altavoz izquierdo para luego pasar al derecho. Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en

el altavoz derecho para luego pasar al izquierdo. Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente. Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente. Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y

sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida.

Esta es la apariencia del cuadro de diálogo Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto.

Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen.

En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen está al máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho).

5.7. ¿Mp3 o Wav?

Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier tipo de sonido, aunque los más empelados son MP3 y WAV. Si no sabes las diferencias

entre estos tipos de archivos, puedes consultar nuestro tema básico .

Por tanto, cuando queramos añadir un sonido a nuestra película, deberemos decantarnos por uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya esté en uno de ellos, pero no debemos olvidar que existen multitud de programas que convierten un sonido con extensión .mp3 a uno .wav y viceversa, por lo que no debe ser inconveniente el formato que tenga el sonido en un principio.

La pregunta surge en seguida ¿Cuál es mejor?

Esta pregunta es más importante de lo que parece, ya que si decidimos que nuestra película tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamaño de la película y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los sonidos ocupen más de la mitad del espacio total y muchas veces no valdrá la pena insertarlos...

Una vez decididos a insertar el sonido, la lógica nos dice que insertemos el sonido que ocupe un espacio menor en el disco duro, ya que este espacio es el que ocupará en nuestra película. Esto es una aproximación, ya que Flash comprime todo aquello que insertamos en nuestras películas.

Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos .wav (10 veces menos o más), por lo que parece recomendable insertar .mp3 en lugar de .wav, ahora bien ¿Puede Flash comprimir un sonido ya comprimido? Es decir, si un sonido .wav ha sido comprimido y ahora tiene extensión .mp3, ¿podrá Flash volver a comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos en nuestras películas, pero si el sonido resulta estar ya comprimido, no podrá volver a comprimirlo (en realidad si que consigue comprimirlo, pero el sonido final es el mismo que el inicial).

Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav más de lo que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios ejemplos...

Ejemplo:

Contamos con una película con un único frame que está vacío. Esta película, una vez lista para ser vista (.swf) ocupa 1KB.

Tenemos 1 sonido .wav que ocupa 1596 KB

Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismo sonido en formato .mp3, ocupa 145 KB. (La calidad de sonido es prácticamente idéntica).

Ahora insertamos el sonido .wav en la película original y la exportamos (esto se trata en el último tema).

Resultado: Una película con sonido (película 1) que ocupa 37KB.

Insertamos después el sonido .mp3 en la película original.

Resultado: Una película con sonido (película 2) que ocupa 145 KB

Conclusión: La película con un sonido .wav ocupa casi 5 veces menos que la que tiene el mismo sonido en .mp3, por tanto parece recomendable insertar sonidos .wav (la compresión de audio que logra Flash es muy grande). Como contrapartida, podría apreciarse pérdida de calidad en el sonido que se escucha en la película 1. Esta pérdida será importante según el tipo de sonido que sea. Si es una voz, por ejemplo, deberíamos insertar .mp3 ya que necesariamente deberá escucharse bien, si es música de fondo, es probable que aunque se pierda calidad, el resultado final sea aceptable y sea conveniente quedarnos con la película de menor tamaño. Lo mejor es probar ambas versiones y evaluar el resultado.

Puedes ver varias pruebas en estas películas:

Música de Fondo

Película con sonido (música) en formato .wav.Tamaño Total: 37 KB. Calidad: Buena

Película con sonido (música) en formato .mp3.Tamaño Total: 145 KB.Calidad: Buena

Sonido "Voz"

Película con sonido (voz) en formato .wav. Tamaño Total: 9 KB. Calidad: Regular

Película con sonido (voz) en .mp3.Tamaño Total: 67KB. Calidad: Buena

En el primer caso sería recomendable quedarse con la película más pequeña, ya que ambos sonidos son buenos. En el segundo caso, la segunda película sería más apropiada, ya que aunque tenga mayor tamaño, la calidad del sonido merece la pena.

 

Por último, comentar que Flash no puede importar sonidos en formato MIDI (.mid). Aún así, si estamos empeñados en que en nuestra animación el sonido sea un MIDI y no queremos o podemos conseguir un programa que convierta el sonido MIDI a WAV o MP3 existe una forma de hacerlo consistente en el uso combinado de Flash y Javascript. Igualmente, como se comentó en el Tema 1, Flash CS5 permite cargar sonidos de un modo dinámico (sin que ocupen espacio), esto se tratará en el Tema 17 "Action Script".

Ejercicios unidad 5: Sonidos en Flash

Ejercicio 1: Importar Sonidos

1. Crea una película con 1 fotograma. 2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.3. Impórtalo a tu película.4. Comprueba que está disponible en la Biblioteca.5. Inserta el sonido importado en el fotograma 1.6. Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa

CTRL+ ENTER (Esta combinación de teclas te permite "probar" la película). 7. Consigue que el sonido deje de escucharse al llegar la película al fotograma 5.8. Consigue que vuelva a escucharse en el fotograma 10, y se reproduzca todo el

sonido.

Ejercicio 2: Editar Sonidos

1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco a poco vaya aumentando de volumen.

2. Modifica el sonido de modo que al final del mismo, parezca que el sonido pasa de un altavoz al otro.

Ayuda ejercicios unidad 5: Sonidos en Flash

1. Creamos la película mediante Archivo → Nuevo, eligiendo archivo ActionScript 3 (por defecto tendremos un único fotograma).

2. Seleccionamos Importar → Importar a Biblioteca, que se encuentra en el Menú Archivo.

3. Se abrirá la clásica ventana de Windows para buscar un archivo. Buscamos el archivo de sonido y pulsamos Abrir.

4. El sonido ya está insertado. Hacemos clic en el Panel Biblioteca (Ventana → Biblioteca) y comprobamos que se encuentra allí.

5. Si no se encuentra allí, revisaremos los pasos dados, pues algo no hemos hecho bien.

6. Creamos una nueva capa y la seleccionamos.7. Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el

escenario (hasta el fotograma actual).8. Pulsamos Enter y el sonido deberá escucharse.9. Alargamos el fotograma actual hasta el número 4 (insertando fotogramas

normales desde el Menú Insertar → Línea de Tiempo → Fotograma).

10. Insertamos un nuevo fotograma en la línea de tiempo. En la posición 5 (desde el Menú Insertar → Línea de Tiempo → Fotograma Clave).

11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4. 12. En la opción Sinc seleccionamos Flujo.13. Acabamos de conseguir que el sonido sólo se reproduzca cuando esté en los

fotogramas indicados.14. Insertamos un nuevo Fotograma Clave en la posición 10.15. Con el fotograma 10 seleccionado, vamos al panel Propiedades, y en las

opciones de Sonido, elegimos el Nombre del archivo que estamos utilizando. 16. En la opción Sinc seleccionamos Inicio

Debe quedar parecido al gráfico:

Ejercicio 2: Editar Sonidos

1. Utilizando el archivo anterior, nos situamos en el último fotograma, donde se reproduce todo el sonido.

2. Seleccionamos Aumento Progresivo dentro de la pestaña Efecto que se encuentra en el Panel Sonidos.

3. Seleccionamos Personalizar dentro de la pestaña Efecto que se encuentra en el Panel Sonidos.

4. Nos dirigimos al final del sonido y hacemos clic en el canal que queramos modificar (el izquierdo está en la parte superior y el derecho en la inferior). Aparecerá un recuadro blanco, lo situamos en su parte más baja para quitarle el sonido y en su parte más alta para dárselo. Jugamos con los volúmenes de ambos canales hasta obtener el efecto deseado. Podemos ir probando cómo queda pulsando el Play que acompaña este Panel.

Unidad 5. Ejercicio: Trabajar con Sonidos

Objetivo.

Insertar un sonido que reproduzca desde el fotograma 5 al 15.

Ejercicio paso a paso.

1. Creamos la película mediante Archivo → Nuevo, eligiendo ActionScript 3 (por defecto tendremos un único fotograma).

2. Creamos una nueva capa (icono Nueva capa de la línea de tiempo) y la seleccionamos.

3. Insertamos un nuevo fotograma clave en la línea de tiempo en el fotograma 5 y 15 (desde el Menú Insertar → Línea de Tiempo → Fotograma Clave, o pulsando F6).

4. Seleccionamos Archivo → Importar → Importar a Biblioteca, que se encuentra en el Menú Archivo.

5. Se abrirá la clásica ventana de Windows para buscar un archivo. Buscamos el archivo sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.

6. El sonido ya está insertado. Hacemos clic en el Panel Biblioteca (Ventana → Biblioteca) y comprobamos que se encuentra allí.

7. Seleccionamos el fotograma 5 (donde queremos insertar el sonido).8. Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el

escenario.9. Ve al panel de Propiedades, y la opción Sinc. selecciona Evento. 10. Prueba la película (tecla Intro) y comprobarás que el sonido se reproduce hasta

al final. Pulsa varias veces Intro y comprobarás que el sonido se reproduce varias veces solapándose.

11. En el despegable Sinc de las Propiedades, cambia el valor a Flujo. Repite el paso anterior y comprueba que el sonido se para al llegar al último fotograma.

12. En el despegable Sinc de las Propiedades, cambia el valor a Iniciar. Repite el paso anterior y comprueba que el sonido no se vuelve a iniciar si aún no ha acabado, aunque se reproduce hasta el final.

13. Selecciona el fotograma clave 15.14. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos

utilizando.15. En la opción Sinc selecciona Detener.16. Prueba la película y comprobarás que ahora se detiene al llegar la fotograma 15.

Unidad 6. Trabajar con objetos (I)

6.1. Los objetos en Flash ¿Qué son?

En los primeros temas vimos las herramientas para dibujar elementos en nuestra película, obteniendo formas. En este tema profundizaremos en cómo trabajar con estas formas u objetos, para ajustarlos a nuestras necesidades.

 

Independientemente de si estamos trabajando en una animación, en una página web, en un catálogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos. A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra película y sea visible, de modo que podamos trabajar con él, por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...

Los objetos de dibujo así considerados tienen 2 partes fundamentales:

El Borde: Consiste en una delgada línea que separa el objeto del exterior, del escenario. Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).

El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad sí que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o el Cubo de Pintura.

6.2. Seleccionar

Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las

partes de un objeto seleccionadas toman una apariencia con textura (entramado de puntos blancos) para indicar que están seleccionadas.

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

Veamos cómo seleccionar las diferentes partes de un objeto:

Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar.

Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.

Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.

Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el grupo. Estos tipos de objetos mostrarán un borde de color azul (por defecto, depende de la capa) al estar seleccionados.

Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Mayúsculas) mientras seleccionamos los objetos que queramos.

Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Selección (flecha). Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el área que contenga los objetos que queremos seleccionar. Si esta área corta una forma, sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. Si quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar.

Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas...

Además de la Herramienta Seleccionar, también podemos usar la Herramienta Lazo, más útil aún si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque ser rectangulares.

Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma. Esto es útil para modificar de un modo rápido todos los elementos del fotograma.

Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en el menú Edición → Seleccionar Todo.

6.3. Colocando objetos. Panel Alinear

Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cómo colocarlos en el Escenario.

Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alinear. Este Panel lo podemos encontrar en el Menú Ventana → Alinear. Así funciona:

El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapié en la opción Alinear en escenario. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario.

Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escenario, para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc...

Conozcamos un poco mejor el Panel Alinear y sus posibilidades:

Alineamiento: Sitúa los objetos en una determinada posición del fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisiéramos situar un objeto en la esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.

Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro horizontal y verticalmente.

Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).

Coincidir Tamaño: Hace coincidir los tamaños de los objetos. Si está activo Alinear en escenario estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción Alinear en escenario no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Si Alinear en escenario hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.

Espacio: Espacia los objetos de un modo uniforme.

Para ver ejemplos de uso de estos comandos, podéis ver la animación situada arriba al principio del capítulo.

Unidad 6. Ejercicio: Alinear objetos

Objetivo

Crear un texto cualquiera y asignarle las propiedades que más nos interesen.

Ejercicio paso a paso

1. Abre un archivo nuevo.2. Dibuja 4 rectángulos de diferentes colores situados en diferentes puntos del

escenario.3. Haz clic en la herramienta Selección.4. Vamos a seleccionar todos los elementos que se encuentran en el escenario, para

ello hacemos clic en la esquina superior izquierda y sin soltar el botón del ratón arrastramos hasta la esquina inferior derecha y soltamos (asegúrate de que todos los elementos se encuentran en el área de selección).

5. Abrimos el panel de Alineación, esta vez lo haremos pulsando la combinación de teclas CTRL + K (aunque también podrías abrirlo desde el menú Ventana).

6. Marca la opción Alinear en escenario.

7. Alineamos todos los objetos a la derecha del escenario haciendo clic en .Observa como todos los objetos se han movido para tener su borde derecho pegado al borde derecho del escenario.

8. Alineamos todos los objeto (aún seleccionados) a la izquierda del escenario

haciendo clic en .Fíjate que los objetos ahora se han movido al lado contrario. Alineándose su borde izquierdo con el borde izquierdo del escenario.

6.4. Panel Información

Además de controlar la posición de los objetos desde el Panel Alineamiento, también podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el Panel Información.

A este Panel se puede acceder desde el Menú Ventana → Información. Las posibilidades de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos de las distribuciones de objetos que crea Flash, debemos acudir a él.

Medidas del Objeto: Aquí introduciremos un número que represente el tamaño de nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace referencia a la anchura y AL: a la altura.

Situación del objeto: Desde aquí controlamos la posición del objeto en el escenario. La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Las medidas también van en función de las medidas elegidas para la película. Estas medidas se toman desde la esquina superior izquierda de la pantalla (X=0 e Y=0).

Color Actual: Indica el color actual en función de la cantidad de Rojo (R), Verde (V), Azul (A) y transparencia Alfa (A) que contenga.

Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratón. Por tanto, podemos tener seleccionado un objeto (haciendo clic en él) y ver en el Panel Información su tamaño y su posición, pero al desplazar el ratón, el valor del color cambiará y ya no indicará el color del objeto seleccionado, sino el del objeto por el que pase el cursor. Tened esto en cuenta para no cometer errores o perder tiempo innecesario.

Posición del Cursor: Indica la posición del cursor. Es útil por si queremos que suceda algo en la película al pasar el cursor justo por una posición determinada o para situar partes del objeto en lugares específicos.

6.5. Los grupos

Un grupo no es más que un conjunto de objetos. Si bien no cualquier conjunto de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que así lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de un grupo y después hacer clic en el Menú Modificar → Agrupar (Ctrl + G).

Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo, definiéndolo como tal.

Crear grupos es muy útil, ya que nos permite, como ya hemos dicho, tratar al conjunto de objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrándonos la labor de hacerlo de objeto en objeto.

Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches. Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamaño de los coches. Podemos aumentar el tamaño de los coches de uno en uno, corriendo el riesgo de aumentar unos más que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamaño del grupo, de modo que aumenten todos de tamaño a la vez y en la misma proporción. De igual modo, podemos mover al grupo de posición, hacer que gire...

Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Menú Modificar → Desagrupar.

Además, Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Menú Edición → Editar Seleccionado, o directamente hacemos doble clic sobre el grupo con la herramienta Seleccionar. Podremos editar los objetos que componen el grupo por separado teniendo en cuenta que, como es lógico, los cambios realizados afectarán al grupo además de al elemento en cuestión.

Ejercicios unidad 6: Trabajar con objetos

Ejercicio 1: Rellenos y Bordes

1. Crea dos rectángulos con el interior de color verde y el borde negro.2. En uno de ellos elimina el Relleno (rectángulo de la izquierda en la imagen).3. En el otro, elimina el borde (rectángulo de la derecha en la imagen).

Ejercicio 2: Selecciones

1. Dibuja 5 óvalos. Dales el color de relleno y borde que quieras (elige un relleno

que no sea transparente ) 2. Selecciona 3 de ellos usando la tecla SHIFT.3. Selecciona 3 de ellos usando la Herramienta Selección (Flecha).4. Selecciona 3 únicamente los bordes de 3 de ellos.

Ejercicio 3: Alinear objetos

1. Dibuja 4 objetos (círculos, rectángulos...).2. Coloca uno en cada esquina usando el Panel Alinear.

Ejercicio 4: Grupos

1. Agrupa los 4 objetos del ejercicio anterior en un único grupo.2. Cambia su posición (colócalos, por ejemplo, en el centro de la película).3. Desagrúpalos.

Ayuda ejercicios unidad 6: Trabajar con objetos

Ejercicio 1: Rellenos y Bordes

Se nos pide crear 2 rectángulos y eliminar el relleno de uno de ellos y el borde del otro. Procedemos del siguiente modo:

1. Seleccionamos los colores en el Panel Muestras o en el Panel Color, hacemos clic en la Herramienta Rectángulo y dibujamos 2 rectángulos.

Los 2 rectángulos originales

2. Hacemos clic en el interior del primer rectángulo y pulsamos la tecla suprimir Supr.

3. Hacemos doble clic en el borde del otro rectángulo y volvemos a pulsar la tecla suprimir Supr.

Rectángulo sin Relleno y Rectángulo sin Borde

Otra opción podría haber sido crear un único rectángulo con borde. Hacer clic sobre su relleno para seleccionarlo, y arrastrarlo para "sacarlo" el rectángulo.

Ejercicio 2: Selecciones

El primer apartado nos pide crear 5 óvalos y seleccionar 3 de ellos con la tecla SHIFT.

1. Seleccionamos los colores que queramos en el Panel Muestras o en el Panel Color, hacemos clic en la Herramienta Óvalo (que aparece agrupada con la herramienta rectángulo) y dibujamos 5 óvalos.

2. Hacemos doble clic en el relleno del primer círculo (doble clic para seleccionar tanto el Relleno como el borde).

3. Ahora pulsamos la tecla SHIFT y sin soltarla, hacemos doble clic en otros 2 círculos cualesquiera.

Ahora hacemos lo mismo usando la Herramienta Selección (Flecha), como pide el segundo apartado.

1. Hacemos clic en una zona del escenario que nos permita capturar 3 círculos.2. Arrastramos el ratón hasta crear un área que envuelva completamente a 3 de los

5 círculos.3. Si quedara alguna parte del círculo fuera de la selección, basta con usar la tecla

SHIFT para añadirlo a la selección actual.

Ahora se nos pide seleccionar únicamente los bordes de 3 de ellos.

1. Hacemos clic en el borde del primer óvalo (si hiciéramos 2 clics se seleccionarían todos los bordes del mismo color que estén en contacto con el borde sobre el que hacemos clic).

2. Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 óvalos más.

Nota: Si en vez de óvalos hubieran sido rectángulos, hubiera hecho falta hacer 2 clics en el borde de cada rectángulo para que este quede totalmente seleccionado. Compruébalo tu mismo.

Ejercicio 3: Alinear Objetos

Se nos pide dibujar 4 objetos y colocarlos en las esquinas.

1. Dibujamos los 4 objetos pedidos, por ejemplo, 4 rectángulos.2. Abrimos el Panel Alinear. desde el menú Ventana → Alinear.3. Hacemos clic en Alinear en escenario para que las distribuciones de los objetos

se hagan en función del tamaño del fotograma.

4. Seleccionamos el primer objeto y hacemos clic en para alinear el objeto en el extremos izquierdo de la película.

5. Hacemos clic en para situarlo en el borde superior de la película. Como el objeto está en el extremo superior izquierdo, está en la esquina superior izquierda.

6. Para alinear el segundo objeto en la esquina superior derecha hacemos clic en

y .

7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en

y .

8. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en y

.

Ejercicio 4: Grupos

La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que ya tenemos).

1. Los seleccionamos todos del modo que prefiramos.2. Hacemos clic en el Menú Modificar → Agrupar

La segunda parte del ejercicio nos pide Desagrupar el conjunto de elementos que acabamos de agrupar.

1. Seleccionamos el Grupo haciendo clic en él.2. Hacemos clic en el Menú Modificar → Desagrupar

Unidad 7. Las capas (I)

7.1. ¿Qué es una capa?

Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan una hoja semitransparente (láminas de acetato) con dibujos sobre otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos?

Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash, y la mayoría de programas de dibujo o retoque, como Photoshop. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con independencia del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempo y por tanto, sus distintos fotogramas se reproducirán simultáneamente.

Clarifiquemos esto con un ejemplo:

Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante están vacíos).

Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portería con el portero, para después (durante los fotogramas del 5 al 10) mostrar la portería sin portero.

De este modo la portería es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada.

Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada animación distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarán parte de la animación. Si queremos que un objeto no forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha animación.

Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería estuviera en la misma capa que el portero, entonces ambos objetos se moverían hacia dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es separar los objetos en 2 capas, como ya hemos hecho.

Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos interese).

Otro motivo es para organizar mejor nuestro contenido. Igual que creábamos una capa para los elementos de audio, crearemos capas para otros elementos, como el código ActionScript.

7.2. Trabajar con capas

La vista estándar de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo usarlos.

Nueva capa : Como su nombre indica, sirve para Insertar una nueva capa en la escena actual. Crea capas normales (en el siguiente punto se verán los distintos tipos de capas).

Crear carpeta : Nos sirve para crear carpetas, que nos ayudarán a organizar nuestras capas.

Borrar Capa : Borra la capa seleccionada.

Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.

Propiedades de Capa: Si hacemos doble clic sobre el icono junto al nombre de la capa, podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna más de menor importancia.

Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. También puedes bloquearla u ocultarla.

Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara, veremos más adelante en el curso.

7.3. Trabajar con capas. Opciones avanzadas

Mostrar / Ocultar Capas : Este botón permite ver u ocultar todas las capas de la película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez, para después mostrar sólo la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas"

Bloquear Capas : Bloquea la edición de todas las capas, de modo que no podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa concreta, procederemos como en el punto anterior, clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas".

Bloquear una capa es muy útil cuando tenemos varios objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su capa podremos trabajar con la seguridad de no modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos con mayor facilidad el objeto que queramos.

Mostrar/Ocultar capas como contornos : Este botón nos muestra/oculta los contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos.

También se puede activar o desactivar para cada capa de un modo similar a los anteriores botones.

Veamos como se muestran estas opciones activadas y desactivadas.

En la primera imagen la capa actual no tiene ninguno de los botones activados, podemos observar que en la columna Mostrar Capas aparece un punto. Este punto significa que no está activada esta opción, lo mismo sucede con el botón Bloquear capas. En la

columna Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarán completos y no sólo sus contornos.

En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas, lo que indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna "bloquear capas", lo que simboliza que la capa está bloqueada. Y en la columna "Mostrar capas como contornos" NO aparece relleno. La capa se está mostrando en este modo y no podremos ver los rellenos hasta deseleccionar esta opción.

Además, el color de los contornos será diferente para cada capa, de modo que podamos distinguirlas mejor. El color del contorno, coincidirá con el indicado en cada capa. En este ejemplo podéis ver cómo queda un objeto en función de tener activada o no la opción contorno:

7.4. Reorganizar las capas

Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas con otras. Lo primero y principal es la Línea de tiempo, todas las capas de una misma escena comparten la misma línea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se verán al mismo tiempo en la película superpuestos unos sobre otros. ¿y qué objeto está delante de los demás? Pues este criterio viene dado por la colocación de las Capas en la película. Los objetos que se mostrarán delante de todos los demás serán aquellos que se encuentren en la capa situada más arriba.

Es decir, si nos fijamos en el ejemplo anterior:

El portero aparece delante de la portería, porque la capa "Portero" está situada encima de la capa "Portería", como puede apreciarse en la imagen. Si quisiéramos cambiar esta distribución, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posición deseada.

Veremos como los objetos se colocan delante o detrás de los de la capa seleccionada según su capa se encuentre por encima o por debajo de la nuestra.

Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos.

Aprende a hacerlo realizando el ejercicio paso a paso Mover objetos entre capas.

Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. También se puede Copiar el fotograma y luego pegarlo en la capa de destino.

7.5. Tipos de capas

Como habréis podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botón derecho del ratón sobre el icono de una capa cualquiera, existen varios tipos de capas.

Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las más usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...

Capas animación movimiento : Son las capas que contienen una animación por interpolación de movimiento.

Capas Guía / : Son capas especiales de contenido específico. Se emplean en las animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misión es representar la trayectoria de un objeto animado, su contenido suele ser una línea (recta, curva o con cualquier forma).

En esta imagen podemos ver el contenido de 2 capas. La primera de ellas contiene la bola azul y la segunda contiene la línea curva. La segunda capa la hemos definido como Capa Guía, para que al realizar la animación de movimiento (esto lo veremos en un tema posterior) su contenido no se vea en la película, sino que sirva de recorrido para la bola azul.

Es importante recordar que el contenido de las Capas Guía no se verá en la película final. Su efecto hará que la pelota azul se desplace de un extremo de la línea al otro siguiendo esa ruta.

Capas guiadas (Guided Layers) : Definir una capa como guía no tiene sentido hasta que definamos también una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa guía.

Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien no se verá en la película (por ser una capa guía) tampoco provocará ningún efecto en las demás capas. En la imagen anterior, la bola azul se deberá encontrar en una capa Guiada, de lo contrario no seguirá la ruta marcada por la capa guía.

Las capas guía y las capas guiadas se relacionan entre sí de un modo evidente. A cada capa guía le corresponden una serie de capas guiadas.

Al asociar una capa guía con una capa guiada, el icono que representa a la capa guía cambia, indicándonos que está realizando correctamente su labor.

En la imagen podemos ver un ejemplo de capa guía y capa guiada correctamente asociadas entre sí. (La capa llamada inferior es, evidentemente, la capa con Guía)

El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las Animaciones

Capas Máscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizará en temas posteriores.

Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara (son como filtros). Al igual que las capas guía, los objetos existentes en este tipo de capas tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa enmascarada a los que estén "tapando".

Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores, ya que son las capas que están bajo las máscaras y a las que afectan. Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.

Sus objetos sí que son visibles en la película final, pero sólo cuando algún objeto de la capa Máscara está sobre ellos.

Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectángulos azules forman parte de la Capa Enmascarada y por tanto se verán en la película final (pero sólo lo que tape la capa máscara). El óvalo rojo está situado en la capa Máscara y no se verá en la película, pero sólo se verá lo que él "tape", que es lo que se ve en la imagen de la derecha. Así se emplean las máscaras...

Podéis poner a prueba vuestros conocimientos realizando:

Ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas

1. Abre el archivo capas.fla que encontrarás en la carpeta ejercicios del curso.2. Modifica el orden de las capas para que se muestre como el siguiente dibujo:

Ejercicio 2: Planeta Saturno (II)

1. Abre un archivo nuevo e intenta reproducir el planeta Saturno (como hicimos en los primeros temas).

2. En este caso deberás utilizar capas de tipo Máscara.

Ayuda ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas

1. Abre el archivo capas.fla que encontrarás en la carpeta de ejercicios.2. Haz clic en la capa Texto para seleccionarla.3. Arrástrala hasta tenerla en la posición superior (por encima de la capa Forma2).4. Haz clic en la capa Forma que ahora se encuentra en la parte inferior para

seleccionarla.

5. Arrástrala hasta tenerla en la posición superior (ahora por encima de la capa Texto).

Observa que la capa Texto es visible porque la pintura de relleno de la capa Forma tiene el valor alfa al 50%.

Ejercicio 2: Planeta Saturno (II)

Como siempre, partimos de un nuevo archivo ActionScript 3.

1. Crea tres capas utilizando el botón que encontrarás en la línea de tiempo.2. Haz doble clic sobre el nombre de la capa que se encuentre más abajo. Cámbialo

por Planeta.3. Haz doble clic sobre el símbolo de la que se encuentra en la parte superior.

Llámala Máscara y dale el tipo Máscara.4. Finalmente haz doble clic sobre el símbolo de la capa que se encuentra en

medio. Llámala Aros y dale el tipo con Máscara.En estos momentos deberás tener algo como esto:

5. Selecciona la capa Planeta y dibuja un círculo (puedes aplicarle un relleno degradado y quitarle el borde).

6. Selecciona la capa Aros y dibuja un círculo perfecto, rellenándolo con un degradado con varias paradas (profundizaremos en los degradados más adelante).

7. Selecciona el círculo que hará de aro, y con la herramienta Transformación libre (debajo de las flechas), dale la forma deseada.

8. Utiliza el panel Alinear para centrar el planeta y el aro vertical y horizontalmente, y queden perfectamente alineados.

9. Ahora selecciona la capa Máscara y con la herramienta pincel pinta sobre el Escenario para tapar la forma ovalada de los aros de modo que sólo pintes lo que quieras que se muestre. Es decir, bastaría con no pintar la parte que quedaría detrás del planeta.Aquí puedes ver un ejemplo de cómo quedaría:

El planeta está en gris, los aros en rojo y la máscara en verde.

10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionándolo todo (clic en la esquina superior izquierda y sin soltar hasta la esquina inferior derecha) y seleccionando la herramienta Transformación libre para rotar el dibujo en su totalidad unos grados hacia la izquierda.

11. Para probar el efecto de la máscara pulsa las teclas Ctrl + Enter en tu teclado.

Unidad 8. Símbolos (I)

8.1. Qué son los símbolos

Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5.

Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (instancias), ya sea en la misma o en otra película. Los símbolos nos resultarán fundamentales a la hora de crear nuestras animaciones.

8.2. Cómo crear un símbolo

La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más adelante.

El procedimiento es el siguiente:

1. Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual es partir de una forma.

2. Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo Símbolo, desde el menú contextual eligiendo Convertir en símbolo, o directamente con las teclas Ctrl + F8 o F8.

3. Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que se hará imprescindible cuando tengamos muchos símbolos.

4. Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las diferencias entre ellos las veremos en temas posteriores. Lo más habitual es Clips de película para los objetos que queremos mostrar en el escenario, y Botón si queremos que actúe como tal.

5. Bastará con pulsar Aceptar para tener nuestro símbolo creado.

 

Para practicar estas operaciones te aconsejamos realizar Ejercicio Crear un símbolo.

8.3. Las Bibliotecas

En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen.

Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a al menú Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.

Para acceder a la biblioteca de símbolos de la película que estamos creando, de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento.

Podemos comprobar como el nuevo símbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip     Botón     Gráfico

8.4. Diferencia entre símbolo e instancia

Como hemos comentado anteriormente, cuando creamos un símbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una película, éste se

convierte en una instancia del símbolo.

Por tanto, podemos crear muchas instancias de un símbolo, pero a una instancia solo le corresponderá un símbolo.

Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando utilicemos un símbolo que hayamos creado previamente en una película y lo modifiquemos, solo alteraremos ésa instancia, mientras que el objeto seguirá intacto, tal y como era en el momento de su creación, de manera que podremos volverlo a utilizar en otro momento. En cambio, si modificamos el símbolo de la biblioteca, alteraremos todas sus instancias.

A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es un símbolo.

 

Para entender mejor este concepto te aconsejamos realizar Ejercicio Modificar una instancia.

8.5. Modificar una instancia

Hemos visto en el ejercicio anterior que podemos modificar una instancia de un símbolo sin modificar el símbolo original en cuestión. Sin embargo, al no tratarse de un gráfico vectorial (veremos que significa esto más adelante), no podemos modificar las instancias con las herramientas de dibujo de Flash CS5, pero sí mediante el Panel de Propiedades, que permite la manipulación "externa" de la instancia.

    Así, este panel, que como hemos visto resulta sumamente útil, no nos permite modificar la estructura básica de la instancia, pero sí otras propiedades, esto es, podremos hacer que la instancia tenga más brillo, pero no transformar una estrella en un círculo).

Esos cambios debemos de hacerlos directamente sobre el símbolo. Aunque sí podremos crear un símbolo a partir de una instancia, lo que desvinculará la instancia del símbolo original.

8.6. Panel propiedades de instancia

Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar la instancia que queramos modificar y posteriormente abrir el panel Propiedades.

Si seleccionamos un objeto Flash que no se trate de un símbolo, el Panel Propiedades mostrará las propiedades del objeto en cuestión, pero no las características propias de los símbolos (cambios de color, intercambios etc...)

En el momento que seleccionemos un símbolo aparecerán una serie de propiedades y opciones que comentamos a continuación:

Nombre y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la película, y veremos más adelante que resulta imprescindible para acceder mediante ActionScript. El nombre, se introduce en el recuadro donde pone por defecto <Nombre de instancia>, y debe de ser único. El icono asociado nos permite saber qué tipo de símbolo es de un vistazo rápido.

Tipo de la instancia. Por defecto se nos muestra el tipo al que pertenecía el símbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es Botón).

Símbolo de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el símbolo raíz del que proviene la instancia que estamos modificando.

Intercambiar: Esta opción merece especial atención, pues es muy útil y nos ahorrará mucho trabajo cuando sea necesaria emplearla. Su función consiste en cambiar el símbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que la instancia tomará el aspecto del nuevo símbolo. Puede parecer simple, pero durante el desarrollo de un trabajo profesional rápidamente surge la necesidad de probar situaciones y los diseños gráficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto.

Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo, incluido el nombre de instancia, las acciones que le afectarán, efectos gráficos etc...) cuando llegue el momento. En la imagen se puede observar el panel Intercambiar Símbolo.

Este panel además, incorpora el botón Duplicar Símbolo cuya funcionalidad es la que nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un símbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.

8.7. Efectos sobre instancias

Para acceder a los efectos aplicables sobre una instancia determinada, debemos acudir nuevamente al Panel Propiedades, desde aquí podremos acceder a todos los efectos que Flash nos proporciona. En el gráfico de la derecha se puede observar la pestaña Estilo: del Panel Propiedades.

Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene efecto asignado aparecerá en la pestaña Ninguno.

En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.

 

A continuación mostraremos los tipos de efectos. Para ello partiremos de la siguiente imagen original:

Brillo. Se puede modificar su valor desde -100% al 100%, esto es, completamente oscuro (negro) y completamente brillante (blanco). Puedes mover la barra deslizante o introducir su valor directamente en la casilla.

Efecto Brillo del 50 %

Tinta. Esta opción permite cambiar el color de la instancia, pero puesto que, como dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaña Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiará el color de toda la instancia como si la estuviéramos tiñendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaña que aparece a la derecha.

Efecto Tinta del 50 % con el color verde (0 255 0)

Alfa. Representa el grado de visibilidad o transparencia  que se tendrá de la instancia en cuestión. También se puede modificar mediante valor directo o con la barra deslizante y es muy útil para animaciones de aparición y desaparición de objetos. Si aplicamos un efecto alpha sobre una instancia que está encima de otro objeto, el objeto que antes estaba tapado se podrá ver a través de la instancia.

Efecto Alfa del 65 % sobre el pez naranja

Avanzado. Aquí podemos aplicar todos los efectos anteriores al mismo tiempo de manera más precisa, con la ventaja de que podemos ponerle un poco de cada uno, dando lugar a efectos de gran vistosidad.

Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la cantidad de verde a la vez que hemos multiplicado la cantidad de azul por 111, obteniendo el tinte rosa translúcido que se observa.

A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo el resultado sobre el propio escenario.

Es importante recalcar, que en los efectos anteriores estamos modificando instancias de un símbolo, pero que el símbolo original sigue intacto.

 

Ejercicios unidad 8: Símbolos

Ejercicio 1: Crear Símbolo

1. Crea una película con 1 fotograma. 2. Dibuja un círculo perfecto. 3. Conviértelo a símbolo de tipo Clip de película.4. Comprueba que está disponible en la Biblioteca.

Ejercicio 2: Insertar Instancia

1. Crea una nueva película.2. Inserta el Gráfico de un botón cualquiera de las Bibliotecas comunes de Flash

CS5.3. Modifica su tamaño.4. Vuelve a realizar el paso 2 y comprueba que el botón se inserta en su tamaño

original.

Ejercicio 3: Duplicar Instancia

1. Sobre el ejercicio anterior, duplica la instancia del botón que has cambiado de tamaño.

2. Desde esa instancia, suplica el símbolo.3. Comprueba que se ha duplicado en la Biblioteca.

Ejercicio 4: Efectos sobre Instancias

1. Teniendo el botón ampliado del ejercicio 2 en el escenario, inserta el duplicado que hemos creado de tal forma que se superpongan parcialmente.

2. Dale al botón que está tapando al otro un efecto Alfa del 40%.3. Comprueba que ahora podemos ver los dos claramente.

Ayuda ejercicios unidad 8: Símbolos

Ejercicio 1: Crear Símbolo

1. Crea una película con 1 fotograma con Archivo → Nuevo, eligiendo archivo ActionScript 3.

2. Para que el círculo no salga ovalado, selecciona la herramienta óvalo y mientras lo dibujas, mantén pulsada la tecla Shift.

3. Accede a Insertar → Nuevo Símbolo... o bien pulsa F8. 4. Accede a Ventana → Biblioteca y busca el nombre que le diste al crearlo.

Ejercicio 2: Insertar Instancia

1. Selecciona la opción Archivo → Nuevo, eligiendo archivo ActionScript 3.2. Ve a Ventana → Bibliotecas Comunes → Botones y selecciona un botón

cualquiera (para expandir las carpetas, haz clic con el botón derecho sobre una de ellas y selecciona "Expandir Carpeta"). Arrastra el botón elegido hasta el escenario

3. Selecciona el símbolo, luego la herramienta Transformación libre y arrastra alguno de los puntos que aparecerán alrededor del botón.

4. Debes ver que has modificado sólo una instancia del símbolo, y no el símbolo en sí.

Ejercicio 3: Duplicar Instancia

1. Selecciona la instancia a duplicar, y en el menú Edición elige Duplicar. Aparecerá una copia en el escenario.

2. Haz clic con el botón derecho sobre la instancia que quieras duplicar y selecciona Duplicar Símbolo.

3. Accede a Ventana → Biblioteca y busca el nombre que le diste al duplicarlo.

Ejercicio 4: Efectos sobre Instancias

1. Ve a Ventana → Biblioteca para abrir la Biblioteca y busca el nombre del duplicado. Arrástralo al escenario.

2. Abre el Panel Propiedades y selecciona en la pestaña Color Alfa e introduce en la casilla donde pone 100% un 40%

3. Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botón situado bajo él se vea.

Unidad 9. Gráficos (I)

9.1. ¿Qué es un gráfico?

Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones sencillas.

En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir, la animación se reproducirá siempre y cuando la película original también se esté reproduciendo. Esto  hace que, pese a tener su propia línea de tiempo, no puedan contener sonidos, controles  ni otros símbolos gráficos.

Así pues, normalmente utilizaremos los gráficos para imágenes estáticas o para cuando nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de la película esté en marcha, ya que para los casos que hemos comentado anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.

9.2. Tipos de gráficos

Los gráficos pueden ser:

Gráfico estático

a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá de la resolución, de sus dimensiones y de la forma en la que estén creados *, será en general reducido.

Animación

b) Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que uno estático.

Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular tienen dos inconvenientes:

1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a tener un tamaño excesivamente grande.

2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones típicas de Flash, cuyo tamaño no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atención de lo que realmente importa, su contenido.

(*) Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en la que estén creados: Gráfico Vectorial o Mapa de Bits. Para saber más acerca de estos

dos tipos de gráfico, échale un vistazo a nuestro tema básico .

9.3. Creando un gráfico y comprobando sus propiedades

Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva película Flash (Archivo→ Nuevo, archivo ActionScript 3).

Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico. Dibujemos, por ejemplo, un óvalo en cualquier lugar del área de trabajo con la

herramienta Óvalo de la barra de herramientas de dibujo y démosle un color de relleno que será lo que después animemos (Selecciona el fondo del óvalo y dale el color

azul mediante la herramienta Relleno de color. ).

Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas?

Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y selecciona Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto y dándole el nombre GráficoAnimado y seleccionando el Tipo Gráfico:

Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un menú, en el que seleccionaremos la opción Edición para modificar el gráfico y acceder a su línea de tiempo. Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en qué nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Gráfico Animado" y, por tanto estamos dentro del gráfico (y la línea de tiempos que vemos es la del gráfico, y no la de la película principal)

Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2, 3 y 4 y pulsando F6 cuando los seleccionemos.

Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en los dos siguientes frames.

Tu línea de tiempos debería tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera".

Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la película.

¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico va ligada a la de la película.

En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del gráfico tenía 4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo ha reproducido un frame, el primero.

¿Cómo podemos solucionarlo?

Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora tenemos 5 fotogramas en la película principal.

Pulsa de nuevo Control + Intro.

El resultado podría ser éste:

Guarda este archivo porque lo completaremos más adelante.

9.4. Introducir un Mapa de bits 

Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más espectaculares en otro programa más apropiado que Flash para el manejo de Bitmaps: Photoshop, Fireworks, GIMP, etc...

Flash CS5 permite importar mapas de bits de otros programas, cuando han sido guardados en formatos gráficos GIF, JPG, TIFF y muchos más. También nos permite modificarlos en cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qué es un bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un símbolo más.

Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo → Importar → Importar a escenario.

Se abrirá el cuadro de diálogo de Importar, allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir.

La imagen se incluirá en el escenario y estará lista para trabajar con ella.

Aquí tienes una muestra de cómo hacerlo.

9.5. Introducir un archivo vectorial

Al igual que los mapas de bits, hay otros programas que trabajan con gráficos vectoriales como también hace Flash CS5.

Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o Illustrator, podemos hacerlo de manera muy sencilla.

Simplemente accedemos al menú Archivo → Importar → Importar a escenario. A continuación, seleccionamos el tipo de archivo correspondiente al gráfico vectorial que queramos importar. Por ejemplo AI de Illustrator.

Pulsamos Abrir, y ya tenemos nuestro archivo vectorial.

Este archivo sí lo podremos modificar internamente ya que Flash es capaz de hacer gráficos de este tipo.

Concretamente, Illustrator pertenece también a Adobe, igual que Flash, con lo que la compatibilidad en este caso es total.

Si quieres saber más sobre compatibilidad de archivos en Flash visita este avanzado.

9.6. Exportar un objeto Flash como mapa de bits

La interfaz de dibujo de Flash, como hemos visto, resulta muy cómoda en determinadas ocasiones para realizar dibujos. Así podría interesarnos utilizar Flash CS5 para crear un dibujo y después utilizarlo en otros programas o para cualquier otro uso.

Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash como un bitmap. Eso sí, debemos tener en cuenta, como vimos en el tema básico, que la mayoría  de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos no debería contener animación ya que ésta no se guardará.

Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al menú Archivo → Exportar → Exportar Imagen... Luego introducimos en el campo Nombre el nombre que queremos que tenga nuestro nuevo bitmap.

Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar.

Ahora ya podemos usar nuestro objeto Flash como un bitmap.

Para entender mejor cómo te aconsejamos realizar el Ejercicio Exportar un objeto como mapa de bits.

9.7. Publicar como un mapa de bits

Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra película como un gráfico (un símbolo, un fotograma...).

Pero si lo que tenemos ya es una película completa, y queremos generar una imagen a partir de ella, lo haremos publicándola. Al publicar, generamos un archivo partiendo de la película creada.

Lo habitual, y que veremos más adelante, es publicar la película como un archivo Flash (swf). Pero también podemos hacerlo como imágenes.

Para ello, tenemos que acceder a la Configuración de publicación, en el menú Archivo.

Se abrirá un diálogo, en el que lo primero que elegimos es el formato en que lo queremos publicar, y el nombre de archivo que se le dará.

Por cada formato seleccionado, se añadirá una pestaña. Desde cada una, podemos cambiar las opciones de cada tipo de imagen.

Cuando lo tengamos, basta con pulsar el botón Publicar. En la misma carpeta donde está el archivo Flash (.fla) se crearan las imágenes.

9.8. Crear un GIF animado con Flash

Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y guardarla como un GIF animado. Los fotogramas de la película se convertirán en fotogramas del GIF.

Para lograrlo, tenemos que publicar la película como GIF, lo cual configuramos desde la Configuración de publicación, en el menú Archivo.

Entre los formatos disponibles, marcamos Imagen GIF.

Y configuramos algunos parámetros pulsando en su pestaña:

Entre las opciones concretas del GIF, hay dos que afectan a la animación:

En Reproducción, podemos marcar Estática (por defecto) o Animación. Debemos de elegir esta última para que el gif sea animado.

Si es gráfico es animado, podemos seleccionar cuántas veces se repite dicha animación. Entre Reproducir indefinidamente en bucle, o Repetir un número determinado de veces.

 

Otra opción muy interesante es Transparente, en la que decidimos cómo se exporta el escenario. Si como un color opaco o transparente.

Abajo vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.

Ejercicios unidad 9: Gráficos

Ejercicio 1: Exportar a Gráfico animado

1. Abre el archivo exportar.fla que se encuentra en la carpeta de ejercicios del curso.

2. Crea un archivo GIF transparente para que muestre la animación.3. Deberá quedarte algo así:

Observa que esta animación se trata de una imagen, no de un archivo Flash.

Ayuda ejercicios unidad 9: Gráficos

Ejercicio 1: Exportar a Gráfico animado

1. Abre el archivo exportar.fla de la carpeta ejercicios.2. Abre el menú Archivo finalmente Configuración de publicación. Se abrirá un

cuadro de diálogo.3. Entre todas las opciones de publicación, marca únicamente imagen GIF.4. Pulsa en la pestaña GIF. Se mostrarán sus opciones:

5. Maraca la opción re reproducción Animada. 6. Asegúrate de que está marcada la opción Repetir indefinidamente.7. Selecciona la casilla Transparente para que el fondo de la película quede

transparente. El resto de las opciones puedes dejarlas como están.8. Pulsa el botón Publicar y lo tendrás listo.9. Ahora, podrás encontrar el GIF en la carpeta de ejercicios, o en la carpeta donde

tengas el archivo exportar.fla.

Unidad 10. Clips de Película (I)

10.1. ¿Qué es un clip de película?

Un Clip de Película, simplemente Clip o MovieClip es una película en sí misma, como cualquiera de las que podamos haber creado hasta el momento en este curso. Normalmente nos referimos a ellas como clips cuando las incluimos en otra película, formando un símbolo. Por tanto, cualquier clip siempre podrá estar compuesto por otros clips insertados en él, que a su vez estén formados por otros, etc.

Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos a continuación), esta línea temporal no está ligada a la línea de tiempo del documento que lo contiene, de tal forma que su ejecución es independiente, y en un fotograma de la película principal se puede estar reproduciendo repetidamente un clip.

Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así como cualquier objeto creado con Flash, ya que  un clip es realmente una película.

Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a que en la vista general del documento, nosotros sólo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación, y una línea de tiempo más clara y "limpia"

Los Clips son una de las herramientas que dan mayor potencia a Flash CS5, permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los diferentes Clips de un documento.

Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo podemos hacer con un Clip, además de poder realizar también todo aquello que nos permitía dicho símbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animación debido a su gran flexibilidad, dejando los gráficos sólo para imágenes estáticas.

10.2. Comprobar las propiedades de un Clip

Como hicimos con los gráficos, vamos a ver como la línea de tiempo de un clip no está ligada a la línea de tiempo del documento que lo contiene y, a la vez, veremos la

diferencia entre los clips y los símbolos Gráficos, que supone una de las razones de la mayor utilización de los primeros en lo que se refiere a la creación de animaciones.

Para ello abriremos una nueva película Flash (Archivo → Nuevo, archivo ActionScript 3). Después importaremos una imagen cualquiera o bien crearemos una. La convertimos en Símbolo (botón derecho, Convertir en símbolo...) y seleccionamos en Tipo "Clip de Película"

Arrastramos al escenario (si no está ya allí) nuestro clip de película.

Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos películas, cada una con su línea de tiempo.

 Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los símbolos de tipo Gráfico.

Observa la línea de tiempo de la película principal y comprueba que sólo tiene un fotograma.

Editemos el Clip que insertamos en el documento, haciendo doble clic sobre él y examinemos su línea de tiempos. Aparecerá un único MovieClip. Podemos realizar algo similar a lo realizado con los gráficos. Si creásemos una animación de movimiento, como veremos más adelante, podría quedarnos así:

  Como vemos, la duración del clip que hemos insertado es mucho mayor que la película nueva que lo contiene. Si el símbolo fuera un gráfico ya hemos visto que al reproducir la película no ocurriría nada, porque sólo se reproduciría el primer fotograma de su línea de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el primer fotograma, y como la liena de tiempo es independiente, sigue reproduciéndose aunque la línea de tiempo principal haya acabado.

10.3. Crear un nuevo Clip

Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo hayamos comentado antes, se puede crear un símbolo Flash de la nada, igual que creamos un nuevo archivo, de forma que se quede en la biblioteca y podamos editarlo cuando nos convenga. Esto puede ser interesante en los clips, ya que a diferencia de los gráficos, su finalidad suele ser el movimiento y, en animaciones complejas, en ocasiones se les asignan acciones especiales en las cuales puede que no sea necesario crearlo en ese momento o convenga dejar el clip vacío.

Por esto, es interesante aprender cómo crear un símbolo, en este caso un clip, de la nada para después modificarlo.

Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro de diálogo de Crear un nuevo símbolo.

Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y seleccionar la opción Clip de Película en el desplegable Tipo.

A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder desde nuestra Biblioteca (menú Ventana → Biblioteca), si hacemos clic derecho sobre él y seleccionamos Edición, podremos editarlo y trabajar con él.

Observa cómo hacerlo

Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de película y veremos el potencial real de este tipo de símbolos.

10.4. Importar y exportar MovieClips de la Biblioteca

Como para todos los símbolos los Clips se almacenan en la biblioteca del documento cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. Para importar clips de otra película debemos abrir primero la biblioteca en la que está contenido.

Hemos visto en el tema de Símbolos, tenemos dos tipos de bibliotecas: las que están asociadas a documentos u otras películas y las que nos proporciona Flash CS5. Pues bien, no sólo podemos utilizar símbolos del mismo documento en el que estamos sino que podemos importarlos de otros documentos de nuestro disco duro, lo que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la exportación mediante biblioteca se hace automáticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser reutilizados.

     Para importar un Clip de un archivo del disco duro debemos ir al menú Archivo → Importar → Abrir biblioteca externa..., seleccionar el Archivo Flash (.fla) del que queremos importar sus símbolos de biblioteca y pulsar Abrir.

Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos, botones y clips del documento en cuestión.

Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarán a su vez todos los símbolos que contenga, incluidos los clips.

 

Existe otra forma mucho más cómoda: si tenemos dos documentos abiertos, podemos arrastrar los elementos directamente de un escenario a otro.

 

Para ver cómo exportar e importar una película completa como un sólo movie clip y poder usar esto para el desarrollo en programas como Swish, revisa nuestro tema

avanzado: Otros usos de los Movie Clips .

Ejercicios unidad 10: Clips de Película

Ejercicio 1: Crear un Clip a modo de Cuenta Atrás

1. Crea una película con sólo 1 fotograma.2. Escribe un número cualquiera, por ejemplo un 3. 3. Conviértelo a símbolo de tipo Clip.4. Crea una animación fotograma a fotograma en la que se vea una cuenta atrás

hasta el cero.5. Comprueba que pese a tener la película original un frame y el clip cinco, la

animación se ve completamente.6. Guárdalo como cuenta.fla

Ejercicio 2: Crear un clip vacío y editarlo después

1. Crea una nueva película.2. Crea un nuevo símbolo de tipo Movie Clip vacío. 3. Sal a la línea de tiempo principal.4. Vuelve a editar el símbolo.

Ejercicio 3: Exportar una película con protección

1. Partimos del Clip del ejercicio 1, ábrelo.2. Exporta la película swf de forma que nadie la pueda importar después.

Ayuda ejercicios unidad 10: Clips de Película

Ejercicio 1: Crear un Clip a modo de Cuenta Atrás

1. Crea una película con 1 fotograma con Archivo → Nuevo, eligiendo un archivo ActionScript 3.

2. Accede a Insertar → Nuevo Símbolo... o bien pulsa las teclas Control + F8. 3. Mediante la Herramienta Texto marcada en la barra de herramientas con una T

escribe el 3.4. Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego

borra el 3 que aparecerá en ellos y escribe un 2, un 1 y un 0 en su lugar.5. Puedes reproducir la película con Control + Enter. 6. Elige menú Archivo → Guardar Como... y dale el nombre cuenta.fla.

Ejercicio 2: Crear vacío y editarlo después

1. Crea un nuevo archivo ActionScript 3, desde el menú Archivo → Nuevo.2. Accede a Insertar → Nuevo Símbolo o bien pulsa Control + F8 3. Pulsa en el icono de la escena principal, en este caso será Escena 1, que está

cerca de la línea de tiempo..4. Abre la Biblioteca del documento mediante Ventana → Biblioteca, pulsa con el

botón derecho sobre el nombre del clip y selecciona la opción Editar del menú emergente.

Ejercicio 3: Exportar una película con protección

1. Abre mediante Archivo → Abrir y selecciona el archivo cuenta.fla.

2. Exporta con Archivo → Exportar → Exportar Película, selecciona el tipo de archivo SWF y dale un nombre. En la ventana que aparece marca la opción Proteger frente a Importación, y en el campo Contraseña escribe la clave que quieras.