Unidad 2.

El entorno de Flash CS4 (I)

2.1. La interfaz de Flash CS4
Flash CS4 cuenta con un entorno o interfaz de trabajo renovada de lo ms manejable e intuitiva. Adems, tiene la ventaja de que es similar a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS4 por primera vez:

A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS4 en castellano. Podeis descargar esta versin de forma gratuita desde la web de Adobe. 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 mens. Todos se irn viendo a lo largo de este curso aunque no aparezcan en esta imagen, que slo pretende mostrar las partes principales de la interfaz de Flash. Veamos cules son:

2.2. La Barra de Mens

La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene algunas particularidades. Veamos los principales Submens a los que se puede acceder: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo, imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde donde se pueden modificar las caractersticas de la publicacin. Tambin permite configurar la impresin de las pginas, imprimirlas... Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; tambin permite personalizar algunas de las opciones ms comunes del programa. Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puede seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden configurar sus opciones. Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas, acciones, escenas... Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...). Texto: Sus contenidos afectan a la edicin de texto. Ms 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 edicin) que hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o ejecutar los que ya tengamos. Control: Desde aqu se modifican las propiedades de reproduccin de la

pelcula. Reproducir, Rebobinar, Probar Pelcula.... Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te ayudaran a encontrar errores de progrmacin en ActionScrit, entre ellos se

encuentran Entrar,Pasar, Salir, Continuar... Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos directos a todos los paneles y tambin 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...

Ejercicio paso a paso: Utilizar la cuadrcula

Objetivo
Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no saldr en la pelcula) y que nos servir como gua para poder dibujar objetos de forma exacta y precisa.

Ejercicio paso a paso.

1. Pulsa en el men Archivo. 2. Selecciona la opcin Nuevo. 3. Elige Archivo de Flash (ActionScript 3.0). 4. Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una pelcula ya empezada, sltate los 2 primeros pasos. 5. Selecciona la opcin Mostrar cuadrcula del men Ver. 6. Se desplegar un submen como el de la figura.

7. Selecciona

la

opcin Mostrar

Cuadrcula para

hacerlo

visible. 8. Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula a tu gusto (tamao, color de fondo...) 9. Selecciona la opcin Ajustes Ajustar a Cuadrcula del men Ver para que los objetos que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlos de un modo fcil.

2.3. La Lnea de Tiempo

La Lnea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando rectngulos) 2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada fotograma, cunto dura o cundo aparecer en la pelcula. Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen). A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en laLnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo. Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas que existen visita nuestra Pgina 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. An as, veamos a grandes rasgos qu son las capas.

Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas). Los objetos que estn 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 mltiples capas adems, da lugar a pelculas bien ordenadas y de fcil manejo (es conveniente colocar los el cdigo 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 continuacin veremos las diferentes partes que conforman el rea de trabajo empezaremos con la ms importante: el Escenario. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula 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 botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre Propiedades del documento: Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de busqueda rellenando los campos de Ttulo y Descripcin. Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px (pxeles) y el mximo de 2880 x 2880 px. Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado (tamao 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 pelcula.

Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. Unidades de Regla: Unidad que se emplear para medir las cantidades. Transformar en predeterminado: Este botn, propio de la nueva versin de Flash, 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 podrn ser alteradas desde este panel cuando se desee.

Ejercicio paso a paso: Cambiar las dimensiones de la pelcula

Objetivo.
Practicar cmo se pueden cambiar algunos atributos fundamentales de las pelculas.

Ejercicio paso a paso.

1. Haz clic con el botn derecho sobre el fondo de la pelcula. 2. Selecciona Propiedades del Documento. 3. En Unidades de Reglas selecciona Centimetros. 4. A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22.46 y en Altura 16.84. 5. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen aproximadamente a las estndar 640 x 480 px.

2.6. Las Vistas o Zooms

La Herramienta Zoom

se emplea para acercar o alejar la vista de un objeto,

permitiendo abarcar ms 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 Submens existentes en el Men Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean correctamente.

Zooms
El efecto Zoom consiste en acercar o alejar la "mirada" de un determinado lugar. En realidad, lo que se hace es aumentar o reducir el tamao de un objeto, de modo que parece que nos hayamos acercado o alejado de l. Es muy til para poder ver con ms detalle ciertos puntos de la animacin (grficos principalmente) y para poder retocar algunas partes que no son visibles desde lejos.

Igualmente, resulta til ver la animacin desde lejos para tener una visin global de ella.Vemos cmo trabaja Flash con los Zooms.

Panel Zoom

Se puede acceder a todas las funciones de los Zooms desde el Men Ver. En cualquier caso, Flash incluye un submen de acceso rpido para dichos comandos. Veamos en qu consisten: Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir, amplia el tamao del fotograma hasta ocupar todo el rea de Trabajo. si hay objetos fuera del rea de Trabajo, no se vern. Mostrar Todo: Muestra en el rea de Trabajo todos los objetos que haya en la pelcula, adaptando el tamao del fotograma al espacio necesario para que quepan. Si todos los objetos estn en la parte izquierda de un fotograma, la parte derecha no se ver. Como podemos ver, ambas selecciones son tiles, pero tienen sus desventajas. Para darnos libertad total, Flash nos permite elegir el tamao del Escenario. 25%, 50%...: Muestra el fotograma con el tamao que indiquemos en % teniendo en cuenta que el 100% es el tamao de referencia. Es decir, el 100% es el tamao original de la pelcula (ocupa lo que se ver al publicar la pelcula), todo lo dems depende de cunto sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% ser justo la mitad de esta cantidad y el 200% ser el doble de 640 x 480 px.

2.7. Los Paneles

Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que haga referencia a las acciones, ir en el Panel Acciones). Su misin es simplificar y facilitar el uso de los comandos.

Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de trabajo. Pudindose expandir o minimizar con un clic de ratn. Si no estn 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 algn momento el entorno se vuelve un poco catico puedas recuperar tu configuracin elegida desde el men Ventana. Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo elemento de men Espacio de trabajo en cualquier momento. Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos a nombrarlos y a resumir las funciones de la mayora de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til. Panel Color: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones). Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy til para alineaciones exactas. Panel Escena: Modifica los atributos de las escenas que usemos.

Escenas
Escenas
Una Escena no es ms que una porcin de la Lnea de Tiempo, con todo lo que sta incluya (capas, fotogramas...). Su finalidad principal es la de organizar la pelcula, de modo que las partes de la pelcula que no tengan relacin entre s o no estn una a continuacin de la otra (seguida en la lnea de tiempo). De este modo, separando una pelcula en 3 escenas, conseguimos tener 3 lneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 pelculas diferentes se tratara. No debemos olvidar que aunque en apariencia sean pelculas distintas, la Lnea de Tiempo es la misma y que al acabar la primera escena se reproducir la segunda y as sucesivamente... Las Escenas se pueden aadir, eliminar, editar... desde el Men Escena al que se accede desde Ventanas Escena. Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula. Panel Comportamientos: Permiten asignar a determinados objetos una serie de caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a otros objetos de forma rpida 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 caractersticas y muchas utilidades (calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras pelculas. Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlo de vista nunca. Panel Explorador de Pelculas: Nos permite acceder a todo el contenido de nuestra pelcula de forma fcil y rpida

Ejercicio paso a paso: Accediendo a Paneles

Objetivo
Abrir los Panel de Muestras y seleccionar una muestra de color.

Ejercicio paso a paso.

1. 1 Pulsa en el men Ventana. 2. 2 Selecciona la opcin Muestras, si ya tuviera una seal junto al nombre del Panel, significa que ya est abierto. Sino, haz clic sobre l. 3. 3 Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor, ste tomar la forma de la herramienta cuentagotas (que serva para seleccionar un color). 4. 4 Todo lo que dibujemos de ahora en adelante, ser de color verde (podemos usar este mecanismo para cambiar el color de relleno o el color del trazo)

Ejercicios unidad 2: El entorno de Flash CS4

Ejercicio 1: Crear una Pelcula a nuestro gusto
Crea una pelcula que tenga las siguientes propiedades: 1. Un tamao de 300 x 100 px 2. Un color de fondo rojo 3. Un Velocidad de los Fotogramas de 14 fps

Ejercicio 2: Estructurar una Pelcula

1. Abre una nueva pelcula

2. Crea 2 Escenas y llmalas Escena 1 y Escena 2 3. Crea 2 capas en cada una. 4. Llmalas E1_1, E1_2 y E2_1, E2_2

Ejercicio 3: Creando Fotogramas

1. Crea en una pelcula nueva 3 fotogramas clave 2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto

Ejercicio 4: Identificando Fotogramas

1. Dada la siguiente pelcula

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 CS4 5. Vuelve a abrirlo. Qu notas?