Académique Documents
Professionnel Documents
Culture Documents
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 diseos vistosos para la web, y grficos interactivos. Los motivos que han convertido a Flash en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash Pro CS5. Desde la web de Adobe te puedes descargar una versin de evaluacin de Flash Professional CS5 vlida para 30 das. Esta versin 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 relacin con Adobe.
Las posibilidades de Flash son extraordinarias, con cada nueva versin se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Aunque su uso ms frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos los diseadores web deberan saber utilizar Flash. Durante mucho tiempo, Flash consigui hacer posible lo que ms se echa en falta en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no esttico. Con Flash podremos crear de modo fcil y rpido desde animaciones simples para lograr algunos efectos visuales, hasta eplicaciones complejas, como juegos . Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de programacin Flash. A cada versin se mejora y ofrece un abanico de posibilidades cada vez mayor, por lo que adems de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un modo real. Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginacin, pero esto no es suficiente para ser el preferido por los diseadores profesionales... Entonces qu es?
Adobe suele integrar todos sus productos en una suite nica en la que prima, sobre todo, la compatibilidad entre ellos. As la compaa se desmarca del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo ao tras ao, 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 ms potentes de dibujo, como Illustrator, para crear nuestros grficos, y despus animarlos con Flash. Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin: 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 carcter y prrafo. Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de pelcula. El texto pude fluir entre varios contenedores asociados.
El panel Fragmentos de cdigo. Este panel nos permite insertar rpidamente el cdigo ActionScript 3 de las acciones ms comunes. Adems, podemos emplearlo para almacenar nuestro propio cdigo, y as poder reutilizarlo cmodamente.
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 vdeo. Los puntos de referencia nos permiten navegar por el vdeo o reaccionar a eventos. Ahora, podemos aadirlos directamente desde el inspector de Propiedades o mediante ActionScript, sin necesidad de recodificar el vdeo.
Adems, se ha mejorado el componente reproductor de vdeo, que nos permite verlo en tiempo real, y nos ofrece una mayor coleccin de estilos.
Mejora de la herramienta huesos. Se han aadido propiedades de "muelle" a la herramienta de cinemtica inversa (IK). Con esto, se consiguen resultados mucho ms giles y realistas.
El tiempo de carga. Mientras que una pgina HTML puede ocuparnos 10-20 KB como media, una animacin Flash ocupa mucho ms. Evidentemente depende del contenido que tenga, pero suelen superar los100 KB con facilidad, y si adems incorpora sonidos es fcil que la cifra se dispare. Al ocupar ms espacio, el tiempo que tardan estar visible el contenido Flash es mayor y no todos los visitantes estn dispuestos a esperar... simplemente, se irn a otra pgina. Los buscadores. Son capaces de indexar el contenido de nuestra pgina, el texto, pero no el contenido del Flash, ya que no lo pueden leer, lo que afectar negativamente al posicionamiento de la pgina. Y hoy en da 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 diseo 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, impedirn la visualizacin del Flash. Este plugin lo suelen incorporar la mayora de navegadores, es gratuito y se puede instalar desde aqu de forma muy
intuitiva, pero siempre habr usuarios que prefieran salir de nuestra pgina si tienen que instalar "algo raro". Compatibilidad con distintos dispositivos. Cada vez es ms frecuente acceder a la web con telfonos mviles, SmartPhones y Tablets, y algunos de ellos no soportan Flash (como los Android anteriores a la versin 2.2). Flash es una tecnologa propietaria de Adobe, por lo que su futuro depende de lo que esta compaa quiera hacer con l. Otro aspecto a tener en cuenta es la usabilidad de las pginas Flash, a veces se cae en la tentacin de dar demasiada importancia al diseo y olvidarse de que la pgina debe ser fcil de usar, aunque es ms un error de diseo que del propio Flash. Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de las carencias de las pginas 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 tambin aporta ventajas:
La web se vuelve muy vistosa y atractiva, adems de aadirle ms 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 prctica, el desarrollo con Flash se vuelve rpido. Flash permite comportamientos que de otra forma no podramos lograr. Compatibilidad con navegadores. Uno de los principales problemas en el diseo 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 pgina web puede ser cuestionable, aunque depende de muchas cosas. An as, no hemos de olvidar que Flash tiene muchsimas aplicaciones ms (hecho que ha provocado que otras compaas traten de sacar a la venta "clnicos" del Flash). Por ejemplo, se puede usar Flash para la creacin de DVDs interactivos (como los que incluyen las revistas de informtica, entre otras), la creacin de banners publicitarios o lo que ms est de moda ahora: la creacin de dibujos animados (os sorprendera saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Adems, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseos de interiores y trabajar con imgenes vectoriales en general. No dejis de aprender a manejar el programa con ms futuro... (al menos en cuanto a diseo web) Aqu tenis algunas pginas 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 navegacin 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.
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 animacin de movimiento entre estos fotogramas. Fcil verdad? En esta versin de Flash an se ha facilitado ms la realizacin de animaciones de movimiento como veremos en el tema correspondiente.
Observa cmo ha quedado: Podis poner a prueba vuestros conocimientos realizando la:
A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS5 en castellano. Podeis descargar esta versin de forma gratuita desde la web de Adobe. Estar disponible hasta que se lance la siguiente evrsin. 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.
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... Veamos un ejemplo prctico del uso de mens, realiza el Ejercicio utilizar la cuadrcula
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 la Lnea 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.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. Unidades de Regla: Unidad que se emplear para medir las cantidades. 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. Para cambiar este nmero, arrastra con el cursor hacia la derecha o izquierda. Transformar en predeterminado: Este botn 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. Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso Cambiar las dimensiones de la pelcula
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. Para saber ms acerca de los Zooms pgina Bsica .
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. Si an no sabes lo que son las Escenas, te lo explicamos en nuestro tema bsico . 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
Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles
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
Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuerdas para qu sirve cada uno?
Ejercicio 5: Paneles
1. 2. 3. 4. 5. Abre el Panel Color. Abre el Panel Acciones. Abre el Panel Alinear. Cierra el Programa Flash CS5 Vuelve a abrirlo. Qu notas?
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento. 2. Pulsamos sobre la pestaa Unidades de Regla y seleccionamos Pxeles (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 botn derecho y pulsamos sobre Propiedades del Documento 2. Pulsamos sobre la pestaa Color de fondo, el puntero se convertir en un "cuentagotas". 3. Seleccionamos el color pedido. El apartado 3 nos propone aumentar la velocidad de reproduccin de la pelcula 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento. 2. En Veloc. Fotogramas escribe 14 fps. El resultado debe ser un rectngulo rojo con las medidas propuestas.
Ahora falta crear el nmero de capas pedido. 1. Seleccionamos la Escena E1 en el Panel Escena 2. Creamos otra capa ms, pulsando el signo en la lnea 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 debera quedar as:
Y as las Capas:
Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales 1. Seleccionamos el fotograma 1 y hacemos clic en el men Insertar Lnea de Tiempo y seleccionamos Fotograma. 2. Ahora el fotograma 2 ser un fotograma normal y el 3 y el 4 sern 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:
Fijmonos en que no estn 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.
1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan una animacin de Movimiento. (probablemente contendrn 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 duracin 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 pelcula se vern como fotogramas en blanco (o con el color de fondo que hayamos seleccionado). 4. Los fotogramas del 16 en adelante son fotogramas vacos y no se vern en la pelcula.
Ejercicio 5: Paneles
1. 2. 3. 4. 5. Abrimos el Men Ventana. Hacemos clic en Color. Se abrir el Panel correspondiente. Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear. Cerramos el programa y lo volvemos a abrir. Observamos que los Paneles siguen donde los dejamos. Flash adapta su entorno a nuestras preferencias.
Herramienta Seleccin (flecha): . Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un slo clic), zonas a nuestra eleccin... 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 vern en el tema siguiente. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea 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 crculos o elipses de manera rpida y sencilla. Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear valo.
Herramienta Lpiz: Es la primera herramienta de dibujo propiamente dicho. Permite dibujar lneas 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 lpiz, pero por defecto su trazo es ms 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 anlogo a la Herramienta Pincel. Pero su funcin es la de eliminar todo aquello que "dibuje".
dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que aparece es este: para seleccionar Poligono.
Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando. Herramienta Subseleccin: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados con dicha herramienta. Herramienta Bote de Tinta: Se emplea para cambiar rpidamente 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 misin es "capturar" colores para que posteriormente podamos utilizarlos. Para ver cmo funciona, consulta este videotutorial:
El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que ms nos gusten. Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se encuentran junto a los iconos de las herramientas de Lpiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre el color que est junto al lpiz 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 ms nos gusta. Tambin permite introducir el cdigo del color segn el estndar.
En vez de este selector rpido, 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:
Slido: 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 pelcula (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.
El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de que disponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems, 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 rpidamente cada vez que trabajemos con nuestra pelcula. Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con dicha pelcula. Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso Colorear un valo
Ejercicio 2: Saturno
1. Dibuja un valo 2. 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
6. Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona la Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo. 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 opcin Relleno. 5. Seleccionamos la opcin Degradado Radial. 6. Pulsamos en y seleccionamos los colores que deseemos, (podemos aadir 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 seleccionndola 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 despus, arrastra sobre el anillo la otra parte del planeta.
En la barra de Herramientas encontramos la herramienta Texto permitir escribir texto en nuestros proyectos.
Los caracteres del texto no est introducidos directamente en el documento, si no que estn confinados en un contenedor de texto. En Flash podemos introducir dos tipos de contenedores: Texto de puntos. El tamao del contenedor depende del texto introducido, creciendo y decreciendo con l. Texto de rea. Podemos definir su tamao, 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 tamao del rea. En cualquier caso, siempre podemos convertir un Texto de puntos en rea simplemente cambiando su tamao, estirando de los controles de transformacin que se muestran alrededor.
Observars que las imgenes 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 ms opciones. La de la derecha tiene establecido el motor Texto clsico, y aparecen menos opciones, las que venamos encontrando en la anterior versin del programa. Si quieres saber cmo utilizar el texto clsico, 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, debers de emplear el motor clsico. Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras ms especficas las veremos ms adelante, cuando vayamos a emplearlas: Podemos elegir cmo se comporta el texto: Si es Seleccionable, y el usuario lo podr seleccionar y copiar en el portapapeles, Slo lectura, lo que impedir que lo pueda seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.
Adems, podemos establecer la orientacin del texto, en Horizontal (por defecto) o Vertical. Posicin y Tamao: Dado que Flash trata los textos como objetos, stos tambin 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 tipografas 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. Tambin se muestran los valores del ancho (AN) y alto (AL) del texto. Carcter. En esta seccin encontramos las opciones tpicas del texto: Familia: Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseo. Estilo: Nos permiten la combinacin de los dos estilos de texto habituales: texto normal (Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).
Tamao: El tamao de la tipografa empelada. Interlineado: Nos permite controlar la separacin entre las lneas de texto dentro de un mismo prrafo. Color: Como al resto de elementos, podemos dar color al texto.
Espaciado: Determina el espaciado adicional entre caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.
Ajuste automtico: Activar esta casilla provoca que la separacin entre caracteres se
realice de modo automtico. 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 ms 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. Slo deberamos de utilizar esta opcin para las familias de fuentes ms comunes. Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberamos de incorporar la fuente, como veremos ms adelante. No debemos de emplearla en textos animados. Suavizado para animacin, es la mejor opcin cuando pretendemos animar texto, ya que se obtienen animaciones ms fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberamos 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, superndice y subndice.
Carcter avanzado: Vnculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests 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 ...
Adems, en esta seccin podemos especificar cmo se comporta el texto Por ejemplo, que se muestre en maysculas, los saltos, etc...
Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos (entre otras). A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: prrafo. Las lneas se distribuyen a la derecha y a la izquierda del punto medio del
A la derecha: Todas las lneas empezarn 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 lmites. Las diferentes opciones se refieren a la ltima lnea del texto, que suele ser ms corta que el resto. El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los sangrados de prrafo y el espacio interlineal.
Para practicar estas propiedades te aconsejamos realizar Ejercicio Propiedades del texto.
La propiedad Comportamiento se refiere a como se ampla un contenedor de Texto al introducir texto. Caracteres mx.: Nos permite limitar el nmero mximo de caracteres que se pueden introducir en la caja de texto. Alineacin: nos permite establecer la alineacin horizontal del texto en el contenedor. Sus valores pueden ser Superior, Centrar, Inferior o Justificar.
Columnas nos permite dividir fcilmente un texto de rea en el nmero de columnas indicado. En este caso, tambin podremos regular el espacio entre ellas (medianil).
. El relleno (padding) permite crear una separacin entre los bordes del contenedor y el texto. Adems, podemos asignar un color de relleno y borde al contenedor.
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 smbolo . 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 Seleccin 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 continuacin. El cursor cambiar a cursor de , dndonos 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.
En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamao). 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 sealada con un asterisco (*).
De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos.
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 tambin hemos hecho que el contenido de todos cambie segn lo que se escriba en el primero. Para recoger informacin de los usuarios, normalmente emplearemos componentes de formulario, que son controles especficos para esta funcin. Pero a esto le dedicaremos un tema completo ms adelante. Pero cmo recogemos la informacin introducida en el cuadro de texto? Aunque an 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.
Utilizar sonidos externos. Podemos insertar en una pelcula de Flash sonidos que tengamos en formato digital: grabados por nosotros mismos, descargados de internet, etc...Pero para que est disponible en nuestra pelcula y podamos usarlo, antes debemos de importarlo. Realmente debemos de importar a flash cualquier archivo externo que queramos usar: sonidos, grficos, e incluso con otras pelculas Flash. Importar por tanto, no es ms que decirle a Flash que aada un determinado archivo a nuestra pelcula, para que podamos usarlo cuando queramos. En realidad, lo aade a nuestra Biblioteca, que es el Panel en el que estn todos los objetos que participan en la pelcula (este panel se ver ms adelante). As pues si queremos manejar un sonido en nuestra pelcula, 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 dilogo de Importar a biblioteca. All debers 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 pelcula. Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar. El sonido estar listo para usarlo donde quieras, podrs 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 travs 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 ms que arrastrarlos desde este panel.
Veamos las partes que tiene este panel. Nombre: En este desplegable nos aparecern los sonidos que tenemos importados en la Biblioteca. Deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (en el siguiente punto veremos cmo insertarla). Si no queremos reproducir sonido, seleccionamos Ninguno.
Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensacin 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 aadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algn programa creado especficamente para este propsito antes de importarlo. En el punto Editar Sonidos se tratar en ms profundidad estos efectos.
Sinc: Esta opcin 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 opcin por defecto y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en el que est situado. Tambin se puede sincronizar el sonido con botones y los dems tipos de smbolos. 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 opcin sincroniza el sonido con el o los objetos con los que est asociado, por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de que la pelcula 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 reaccin muy negativa en los que pueden estar viendo nuestra pelcula). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una pelcula. En esta situacin, es muy recomendable que el sonido y las imgenes estn sincronizadas.
Repetir: Determina el nmero de veces que se reproducir el sonido segn lo indiques de la derecha. Tambin 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 opcin Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el tamao de la pelcula.
Al aadir un sonido directamente sobre la lnea 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 msica a la pelcula. Lo mejor ser crear una nueva capa para cada sonido. As lo controlaremos fcilmente. Creamos un fotograma clave en el momento en que queremos que comience a reproducirse el sonido, y lo arrastramos de la biblioteca al escenario. Tambin podemos elegirlo directamente desde el panel de Propiedades.
Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la seccin de Sonido. Seleccionamos los efectos deseados, y las veces que lo queremos Repetir. En el men Sinc. seleccionamos la opcin de sincronizacin 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 reproduccin del sonido a partir de ah, marcamos Inicio. Si queremos iniciar el sonido en un fotograma ms 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 ms 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 sera utilizar la opcin Flujo.
Al seleccionar esta opcin, el sonido se reproducir hasta que se acabe o llegue a un fotograma clave, siguiendo la pelcula. Slo es aconsejable esta opcin si realmente la necesitamos.
Canal Izquierdo: El sonido tan slo se escuchar por el altavoz izquierdo. Canal Derecho: El sonido tan slo 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 opcin nos permite "editar" el sonido de un modo rpido y sencillo. Desde este editor podemos decidir qu volumen tendr nuestro sonido y en qu altavoz. Podemos crear los efectos anteriores ajustndolos a nuestro gusto y podemos crear efectos ms complejos a nuestra medida.
Esta es la apariencia del cuadro de dilogo Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una lnea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las lneas 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 mximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldra a un Aumento Progresivo en el canal derecho).
Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav ms de lo que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios ejemplos... Ejemplo: Contamos con una pelcula con un nico frame que est vaco. Esta pelcula, 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 prcticamente idntica). Ahora insertamos el sonido .wav en la pelcula original y la exportamos (esto se trata en el ltimo tema). Resultado: Una pelcula con sonido (pelcula 1) que ocupa 37KB. Insertamos despus el sonido .mp3 en la pelcula original. Resultado: Una pelcula con sonido (pelcula 2) que ocupa 145 KB Conclusin: La pelcula 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 compresin de audio que logra Flash es muy grande). Como contrapartida, podra apreciarse prdida de calidad en el sonido que se escucha en la pelcula 1. Esta prdida ser importante segn el tipo de sonido que sea. Si es una voz, por ejemplo, deberamos insertar .mp3 ya que necesariamente deber escucharse bien, si es msica de fondo, es probable que aunque se pierda calidad, el resultado final sea aceptable y sea conveniente quedarnos con la pelcula de menor tamao. Lo mejor es probar ambas versiones y evaluar el resultado. Puedes ver varias pruebas en estas pelculas: Msica de Fondo Pelcula con sonido (msica) en formato .wav. Tamao Total: 37 KB. Calidad: Buena Sonido "Voz" Pelcula con sonido (voz) en formato .wav. Tamao Total: 9 KB. Calidad: Regular Pelcula con sonido (msica) en formato .mp3. Tamao Total: 145 KB. Calidad: Buena
Pelcula con sonido (voz) en .mp3. Tamao Total: 67KB. Calidad: Buena
En el primer caso sera recomendable quedarse con la pelcula ms pequea, ya que ambos sonidos son buenos. En el segundo caso, la segunda pelcula sera ms apropiada, ya que aunque tenga mayor tamao, la calidad del sonido merece la pena.
Por ltimo, comentar que Flash no puede importar sonidos en formato MIDI (.mid). An as, si estamos empeados en que en nuestra animacin 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 dinmico (sin que ocupen espacio), esto se tratar en el Tema 17 "Action Script".
2. Seleccionamos Importar Importar a Biblioteca, que se encuentra en el Men Archivo. 3. Se abrir la clsica 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. Despus 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 nmero 4 (insertando fotogramas normales desde el Men Insertar Lnea de Tiempo Fotograma).
10. Insertamos un nuevo fotograma en la lnea de tiempo. En la posicin 5 (desde el Men Insertar Lnea de Tiempo Fotograma Clave). 11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4. 12. En la opcin Sinc seleccionamos Flujo. 13. Acabamos de conseguir que el sonido slo se reproduzca cuando est en los fotogramas indicados. 14. Insertamos un nuevo Fotograma Clave en la posicin 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 opcin Sinc seleccionamos Inicio Debe quedar parecido al grfico:
Independientemente de si estamos trabajando en una animacin, en una pgina web, en un catlogo 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 pelcula y sea visible, de modo que podamos trabajar con l, por ejemplo, cualquier imagen que creemos o importemos, un botn, un dibujo creado por nosotros mismos etc... Los objetos de dibujo as considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada lnea que separa el objeto del exterior, del escenario. Puede existir o no, segn 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 Lpiz, Lnea 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 ms que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia tambin 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 estn seleccionadas.
Objeto con el RELLENO seleccionado Veamos cmo 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 lneas) de un mismo color que estn en contacto: Hacer doble clic sobre una de las lneas que tenga el color que pretendamos seleccionar. Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o en el grupo. Estos tipos de objetos mostrarn un borde de color azul (por defecto, depende de la capa) al estar seleccionados. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Maysculas) mientras seleccionamos los objetos que queramos. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Seleccin (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, slo quedar seleccionada la parte del objeto que est dentro del rea que hemos delimitado. Si quisiramos incluir dicho objeto, bastara con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Este modo de seleccionar objetos permite seleccionar muchos objetos rpidamente, adems de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas...
Adems de la Herramienta Seleccionar, tambin podemos usar la Herramienta Lazo, ms til an 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 Lnea de Tiempo: Si seleccionamos un determinado fotograma en la lnea de tiempo, se seleccionan automticamente todos los objetos que estn en dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del fotograma. Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el men Edicin Seleccionar Todo.
Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cmo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposicin el Panel Alinear. Este Panel lo podemos encontrar en el Men Ventana Alinear. As funciona:
El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapi en la opcin Alinear en escenario. Esta opcin nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario. Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es seleccionar En Escenario, para que los objetos se coloquen segn los lmites de la pelcula, en el centro del fotograma etc...
Alineamiento: Sita los objetos en una determinada posicin 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 quisiramos situar un objeto en la esquina inferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente.
Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro horizontal y verticalmente.
Distribuir: Sita los objetos en el escenario en funcin de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botn de la izquierda. Cada uno de los 2 cuadrados se situar en un extremo de la pelcula (uno arriba y otro abajo).
Coincidir Tamao: Hace coincidir los tamaos de los objetos. Si est activo Alinear en escenario estirar los objetos hasta que coincidan con el ancho y el largo de la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opcin Alinear en escenario no est activada, al hacer clic en el primer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a tener la anchura del cuadrado ms ancho. Si Alinear en escenario hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.
Espacio:
Para ver ejemplos de uso de estos comandos, podis ver la animacin situada arriba al principio del captulo.
Adems de controlar la posicin de los objetos desde el Panel Alineamiento, tambin podemos hacerlo, de un modo ms exacto (ms matemtico) desde otro panel, el Panel Informacin. A este Panel se puede acceder desde el Men Ventana Informacin. 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 nmero que represente el tamao de nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace referencia a la anchura y AL: a la altura. Situacin del objeto: Desde aqu controlamos la posicin 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 tambin van en funcin de las medidas elegidas para la pelcula. Estas medidas se toman desde la esquina superior izquierda de la pantalla (X=0 e Y=0). Color Actual: Indica el color actual en funcin de la cantidad de Rojo (R), Verde (V), Azul (A) y transparencia Alfa (A) que contenga. Este indicador puede ser engaoso, el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratn. Por tanto, podemos tener seleccionado un objeto (haciendo clic en l) y ver en el Panel Informacin su tamao y su posicin, pero al desplazar el ratn, 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. Posicin del Cursor: Indica la posicin del cursor. Es til por si queremos que suceda algo en la pelcula al pasar el cursor justo por una posicin determinada o para situar partes del objeto en lugares especficos.
Un grupo no es ms 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 despus 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 dems. Adems, aparece el rectngulo azul (por defecto) que rodea al grupo, definindolo 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, ahorrndonos 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 tamao de los coches. Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo de aumentar unos ms que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamao del grupo, de modo que aumenten todos de tamao a la vez y en la misma proporcin. De igual modo, podemos mover al grupo de posicin, hacer que gire... Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningn caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Men Modificar Desagrupar. Adems, 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 Edicin 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 lgico, los cambios realizados afectarn al grupo adems de al elemento en cuestin.
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 Seleccin (Flecha). 4. Selecciona 3 nicamente los bordes de 3 de ellos.
Ejercicio 4: Grupos
1. Agrupa los 4 objetos del ejercicio anterior en un nico grupo. 2. Cambia su posicin (colcalos, por ejemplo, en el centro de la pelcula). 3. Desagrpalos.
1. Seleccionamos los colores en el Panel Muestras o en el Panel Color, hacemos clic en la Herramienta Rectngulo y dibujamos 2 rectngulos.
Los 2 rectngulos originales 2. Hacemos clic en el interior del primer rectngulo y pulsamos la tecla suprimir Supr. 3. Hacemos doble clic en el borde del otro rectngulo y volvemos a pulsar la tecla suprimir Supr.
Rectngulo sin Relleno y Rectngulo sin Borde Otra opcin podra haber sido crear un nico rectngulo con borde. Hacer clic sobre su relleno para seleccionarlo, y arrastrarlo para "sacarlo" el rectngulo.
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 rectngulo) y dibujamos 5 valos. 2. Hacemos doble clic en el relleno del primer crculo (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 crculos cualesquiera. Ahora hacemos lo mismo usando la Herramienta Seleccin (Flecha), como pide el segundo apartado. 1. Hacemos clic en una zona del escenario que nos permita capturar 3 crculos. 2. Arrastramos el ratn hasta crear un rea que envuelva completamente a 3 de los 5 crculos. 3. Si quedara alguna parte del crculo fuera de la seleccin, basta con usar la tecla SHIFT para aadirlo a la seleccin actual. Ahora se nos pide seleccionar nicamente los bordes de 3 de ellos.
1. Hacemos clic en el borde del primer valo (si hiciramos 2 clics se seleccionaran todos los bordes del mismo color que estn en contacto con el borde sobre el que hacemos clic). 2. Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 valos ms. Nota: Si en vez de valos hubieran sido rectngulos, hubiera hecho falta hacer 2 clics en el borde de cada rectngulo para que este quede totalmente seleccionado. Comprubalo tu mismo.
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
Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de una animacin, deberemos quitarlo de la capa en la que se produce dicha animacin. Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera en la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, con lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos en 2 capas, como ya hemos hecho. Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos interese). Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos una capa para los elementos de audio, crearemos capas para otros elementos, como el cdigo ActionScript.
La vista estndar de una capa es la que muestra la imagen. Veamos para qu sirven los distintos botones y cmo 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 vern los distintos tipos de capas). Crear carpeta capas. Borrar Capa : Nos sirve para crear carpetas, que nos ayudarn a organizar nuestras : 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 ms de menor importancia.
Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. Tambin puedes bloquearla u ocultarla. Pero haremos especial hincapi en la opcin Tipo cuyas opciones, Gua y Mscara, veremos ms adelante en el curso.
Mostrar / Ocultar Capas : Este botn permite ver u ocultar todas las capas de la pelcula. Es muy til cuando tenemos muchas capas y slo queremos ver una de ellas ya que permite ocultar todas a la vez, para despus mostrar slo 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 edicin 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 botn nos muestra/oculta los contenidos de todas las capas como si slo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fcil y podremos ver en qu capa est cada uno de ellos. Tambin 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 opcin, lo mismo sucede con el botn Bloquear capas. En la
columna Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarn completos y no slo 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 opcin. Adems, 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 podis ver cmo queda un objeto en funcin de tener activada o no la opcin contorno:
Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas con otras. Lo primero y principal es la Lnea de tiempo, todas las capas de una misma escena comparten la misma lnea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se vern al mismo tiempo en la pelcula superpuestos unos sobre otros. y qu objeto est delante de los dems? Pues este criterio viene dado por la colocacin de las Capas en la pelcula. Los objetos que se mostrarn delante de todos los dems sern aquellos que se encuentren en la capa situada ms arriba. Es decir, si nos fijamos en el ejemplo anterior: El portero aparece delante de la portera, porque la capa "Portero" est situada encima de la capa "Portera", como puede apreciarse en la imagen. Si quisiramos cambiar esta distribucin, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posicin deseada. Veremos como los objetos se colocan delante o detrs de los de la capa seleccionada segn 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. Tambin se puede Copiar el fotograma y luego pegarlo en la capa de destino.
Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...
Capas Gua / : Son capas especiales de contenido especfico. 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 misin es representar la trayectoria de un objeto animado, su contenido suele ser una lnea (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 lnea curva. La segunda capa la hemos definido como Capa Gua, para que al realizar la animacin de movimiento (esto lo veremos en un tema posterior) su contenido no se vea en la pelcula, sino que sirva de recorrido para la bola azul. Es importante recordar que el contenido de las Capas Gua no se ver en la pelcula final. Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro siguiendo esa ruta.
Capas guiadas (Guided Layers) : Definir una capa como gua no tiene sentido hasta que definamos tambin una capa guiada. Esto es, una capa que quedar afectada por la gua definida en la Capa gua. Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien no se ver en la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las dems 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 gua. Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada capa gua le corresponden una serie de capas guiadas. Al asociar una capa gua con una capa guiada, el icono que representa a la capa gua cambia, indicndonos que est realizando correctamente su labor. En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamente asociadas entre s. (La capa llamada inferior es, evidentemente, la capa con Gua)
El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de las Animaciones Capas Mscara : 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 slo dejan que se vea la parte de stas que tapan los objetos situados en las capas mscara (son como filtros). Al igual que las capas gua, los objetos existentes en este tipo de capas tampoco se ven en la pelcula final. S se vern los objetos de su correspondiente capa enmascarada a los que estn "tapando". Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores, ya que son las capas que estn bajo las mscaras y a las que afectan. Al igual que las capas gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la capa Mscara est sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en la pelcula final (pero slo lo que tape la capa mscara). El valo rojo est situado en la capa Mscara y no se ver en la pelcula, pero slo se ver lo que l "tape", que es lo que se ve en la imagen de la derecha. As se emplean las mscaras...
1. Abre el archivo capas.fla que encontrars en la carpeta ejercicios del curso. 2. Modifica el orden de las capas para que se muestre como el siguiente dibujo:
5. Arrstrala hasta tenerla en la posicin 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%.
5. Selecciona la capa Planeta y dibuja un crculo (puedes aplicarle un relleno degradado y quitarle el borde). 6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un degradado con varias paradas (profundizaremos en los degradados ms adelante). 7. Selecciona el crculo que har de aro, y con la herramienta Transformacin 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 Mscara y con la herramienta pincel pinta sobre el Escenario para tapar la forma ovalada de los aros de modo que slo pintes lo que quieras que se muestre. Es decir, bastara con no pintar la parte que quedara detrs del planeta. Aqu puedes ver un ejemplo de cmo quedara:
El planeta est en gris, los aros en rojo y la mscara en verde. 10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionndolo todo (clic en la esquina superior izquierda y sin soltar hasta la esquina inferior derecha) y seleccionando la herramienta Transformacin libre para rotar el dibujo en su totalidad unos grados hacia la izquierda. 11. Para probar el efecto de la mscara pulsa las teclas Ctrl + Enter en tu teclado.
La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de los primeros pasos para crear una animacin, como veremos ms adelante.
El procedimiento es el siguiente: 1. Seleccionamos el o los objetos que queramos convertir en un smbolo. Lo ms habitual es partir de una forma. 2. Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo Smbolo, desde el men contextual eligiendo Convertir en smbolo, 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 smbolo que vamos a crear, y que nos permitir identificarlo en la biblioteca, lo que se har imprescindible cuando tengamos muchos smbolos.
4. Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico. Sus caractersticas y las diferencias entre ellos las veremos en temas posteriores. Lo ms habitual es Clips de pelcula para los objetos que queremos mostrar en el escenario, y Botn si queremos que acte como tal. 5. Bastar con pulsar Aceptar para tener nuestro smbolo creado.
En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las pelculas que hemos creado. Todas ellas las tenemos a nuestra disposicin para utilizar los smbolos 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 smbolos: botones, clips o grficos.
Para acceder a la biblioteca de smbolos de la pelcula que estamos creando, de nuevo vamos a la Barra de Mens, Ventana Biblioteca. En esta biblioteca aparecern todos los smbolos que hemos creado hasta el momento. Podemos comprobar como el nuevo smbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha aadido a nuestra biblioteca accediendo a ella como acabamos de indicar. Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un icono que representa el tipo de smbolo que representan: Clip Botn Grfico
Como hemos comentado anteriormente, cuando creamos un smbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una pelcula, ste se
convierte en una instancia del smbolo. Por tanto, podemos crear muchas instancias de un smbolo, pero a una instancia solo le corresponder un smbolo. Aunque parece que sean lo mismo, la importancia de esta distincin es que cuando utilicemos un smbolo que hayamos creado previamente en una pelcula y lo modifiquemos, solo alteraremos sa instancia, mientras que el objeto seguir intacto, tal y como era en el momento de su creacin, de manera que podremos volverlo a utilizar en otro momento. En cambio, si modificamos el smbolo de la biblioteca, alteraremos todas sus instancias. A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es un smbolo.
Para entender mejor este concepto te aconsejamos realizar Ejercicio Modificar una instancia.
As, este panel, que como hemos visto resulta sumamente til, no nos permite modificar la estructura bsica de la instancia, pero s otras propiedades, esto es, podremos hacer que la instancia tenga ms brillo, pero no transformar una estrella en un crculo). Esos cambios debemos de hacerlos directamente sobre el smbolo. Aunque s podremos crear un smbolo a partir de una instancia, lo que desvincular la instancia del smbolo original.
Nombre y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la pelcula, y veremos ms 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 smbolo es de un vistazo rpido.
Tipo de la instancia. Por defecto se nos muestra el tipo al que perteneca el smbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es Botn). Smbolo de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el smbolo raz del que proviene la instancia que estamos modificando. Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos ahorrar mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar el smbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que la instancia tomar el aspecto del nuevo smbolo. Puede parecer simple, pero durante el desarrollo de un trabajo profesional rpidamente surge la necesidad de probar situaciones y los diseos grficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto. Gracias a esta opcin podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo smbolo hereda las propiedades del antiguo smbolo, incluido el nombre de instancia, las acciones que le afectarn, efectos grficos etc...) cuando llegue el momento. En la imagen se puede observar el panel Intercambiar Smbolo.
Este panel adems, incorpora el botn Duplicar Smbolo cuya funcionalidad es la que nos podemos imaginar. Es muy til cuando queremos hacer pruebas con un smbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.
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 grfico de la derecha se puede observar la pestaa Estilo: del Panel Propiedades. Hay varios tipos de efectos. Si el smbolo se acaba de crear o si no tiene efecto asignado aparecer en la pestaa Ninguno. En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.
A continuacin 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.
Tinta. Esta opcin permite cambiar el color de la instancia, pero puesto que, como dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaa Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiar el color de toda la instancia como si la estuviramos tiendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaa 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 cuestin. Tambin se puede modificar mediante valor directo o con la barra deslizante y es muy til para animaciones de aparicin y desaparicin 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 travs de la instancia.
Efecto Alfa del 65 % sobre el pez naranja Avanzado. Aqu podemos aplicar todos los efectos anteriores al mismo tiempo de manera ms 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 translcido 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 smbolo, pero que el smbolo original sigue intacto.
3. Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botn situado bajo l se vea.
Grfico esttico a) Estticos: estos grficos se mantienen sin cambios cuando pasa el tiempo. Estos grficos son los tpicos en los fondos y en los objetos que no desempean ninguna funcin especial. Su tamao y por tanto, el tiempo de carga de este tipo de grficos, aunque siempre depender de la resolucin, de sus dimensiones y de la forma en la que estn creados *, ser en general reducido.
Animacin b) Animaciones: este tipo de grfico vara su forma, posicin u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar varios grficos ms adems del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamao de esta clase de grficos, para las mismas dimensiones y forma de creacin, ser mucho mayor que uno esttico. Por esto, aunque las animaciones dan a nuestra web un aspecto ms 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 tamao excesivamente grande. 2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones tpicas de Flash, cuyo tamao no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atencin de lo que realmente importa, su contenido. (*) Los tipos de grfico anteriores pueden ser, a su vez de dos tipos, segn la forma en la que estn creados: Grfico Vectorial o Mapa de Bits. Para saber ms acerca de estos dos tipos de grfico, chale un vistazo a nuestro tema bsico .
Selecciona el objeto, haz clic derecho sobre el o haz clic en el men modificar y selecciona Convertir en Smbolo, lo convertimos en un smbolo como ya habamos visto y dndole el nombre GrficoAnimado y seleccionando el Tipo Grfico:
Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quiz no sera la ms apropiada la mayora de las veces, pero nos servir muy bien para este ejemplo. Para ello selecciona nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un men, en el que seleccionaremos la opcin Edicin para modificar el grfico y acceder a su lnea de tiempo. Comprueba que ests en la lnea de tiempos del grfico (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 - Grfico Animado" y, por tanto estamos dentro del grfico (y la lnea de tiempos que vemos es la del grfico, y no la de la pelcula principal)
Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos. Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo mismo en los dos siguientes frames. Tu lnea de tiempos debera tener este aspecto:
Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".
Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar la pelcula. Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est en las caractersticas de los grficos que habamos explicado: la lnea de tiempos del grfico va ligada a la de la pelcula. En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su animacin; slo ha reproducido un frame, el primero. Cmo podemos solucionarlo? Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6. Ahora tenemos 5 fotogramas en la pelcula principal. Pulsa de nuevo Control + Intro. El resultado podra ser ste:
Se abrir el cuadro de dilogo de Importar, all debers seleccionar el formato de imagen que quieres importar seleccionndolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Seleccinalo haciendo clic sobre l y pulsa el botn Abrir. La imagen se incluir en el escenario y estar lista para trabajar con ella. Aqu tienes una muestra de cmo hacerlo.
Pulsamos Abrir, y ya tenemos nuestro archivo vectorial. Este archivo s lo podremos modificar internamente ya que Flash es capaz de hacer grficos de este tipo. Concretamente, Illustrator pertenece tambin a Adobe, igual que Flash, con lo que la compatibilidad en este caso es total. Si quieres saber ms sobre compatibilidad de archivos en Flash visita este avanzado.
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 cmo te aconsejamos realizar el Ejercicio Exportar un objeto como mapa de bits.
Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra pelcula como un grfico (un smbolo, un fotograma...). Pero si lo que tenemos ya es una pelcula completa, y queremos generar una imagen a partir de ella, lo haremos publicndola. Al publicar, generamos un archivo partiendo de la pelcula creada. Lo habitual, y que veremos ms adelante, es publicar la pelcula como un archivo Flash (swf). Pero tambin podemos hacerlo como imgenes. Para ello, tenemos que acceder a la Configuracin de publicacin, en el men Archivo.
Se abrir un dilogo, 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 aadir una pestaa. Desde cada una, podemos cambiar las opciones de cada tipo de imagen.
Cuando lo tengamos, basta con pulsar el botn Publicar. En la misma carpeta donde est el archivo Flash (.fla) se crearan las imgenes.
Entre las opciones concretas del GIF, hay dos que afectan a la animacin: En Reproduccin, podemos marcar Esttica (por defecto) o Animacin. Debemos de elegir esta ltima para que el gif sea animado. Si es grfico es animado, podemos seleccionar cuntas veces se repite dicha animacin. Entre Reproducir indefinidamente en bucle, o Repetir un nmero determinado de veces.
Otra opcin muy interesante es Transparente, en la que decidimos cmo se exporta el escenario. Si como un color opaco o transparente. Abajo vemos el GIF Animado que resulta de exportar nuestro grfico Flash.
5. Maraca la opcin re reproduccin Animada. 6. Asegrate de que est marcada la opcin Repetir indefinidamente. 7. Selecciona la casilla Transparente para que el fondo de la pelcula quede transparente. El resto de las opciones puedes dejarlas como estn. 8. Pulsa el botn Publicar y lo tendrs listo. 9. Ahora, podrs encontrar el GIF en la carpeta de ejercicios, o en la carpeta donde tengas el archivo exportar.fla.
Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen su propia lnea de tiempo. Sin embargo, y a diferencia de los Grficos (como veremos a continuacin), esta lnea temporal no est ligada a la lnea de tiempo del documento que lo contiene, de tal forma que su ejecucin es independiente, y en un fotograma de la pelcula principal se puede estar reproduciendo repetidamente un clip. Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico, clip o botn, as como cualquier objeto creado con Flash, ya que un clip es realmente una pelcula. Otra de las ventajas de los Clips la encontramos cuando realizamos pelculas de gran complejidad y tamao, en la que intervienen un nmero muy elevado de fotogramas, debido a que en la vista general del documento, nosotros slo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitir tener una mejor visin de cmo se desarrolla nuestra animacin, y una lnea de tiempo ms clara y "limpia" Los Clips son una de las herramientas que dan mayor potencia a Flash CS5, permitindonos crear pelculas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear mltiples movimientos independientes entre s y crear conexiones entre los diferentes Clips de un documento. Todas aquellas cosas que no podamos hacer con un smbolo de tipo Grfico, lo podemos hacer con un Clip, adems de poder realizar tambin todo aquello que nos permita dicho smbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animacin debido a su gran flexibilidad, dejando los grficos slo para imgenes estticas.
Como hicimos con los grficos, vamos a ver como la lnea de tiempo de un clip no est ligada a la lnea de tiempo del documento que lo contiene y, a la vez, veremos la
diferencia entre los clips y los smbolos Grficos, que supone una de las razones de la mayor utilizacin de los primeros en lo que se refiere a la creacin de animaciones. Para ello abriremos una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript 3). Despus importaremos una imagen cualquiera o bien crearemos una. La convertimos en Smbolo (botn derecho, Convertir en smbolo...) y seleccionamos en Tipo "Clip de Pelcula" Arrastramos al escenario (si no est ya all) nuestro clip de pelcula. Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos pelculas, cada una con su lnea de tiempo. Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los smbolos de tipo Grfico. Observa la lnea de tiempo de la pelcula principal y comprueba que slo tiene un fotograma.
Editemos el Clip que insertamos en el documento, haciendo doble clic sobre l y examinemos su lnea de tiempos. Aparecer un nico MovieClip. Podemos realizar algo similar a lo realizado con los grficos. Si cresemos una animacin de movimiento, como veremos ms adelante, podra quedarnos as:
Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula nueva que lo contiene. Si el smbolo fuera un grfico ya hemos visto que al reproducir la pelcula no ocurrira nada, porque slo se reproducira el primer fotograma de su lnea 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 reproducindose aunque la lnea de tiempo principal haya acabado.
Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo hayamos comentado antes, se puede crear un smbolo 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 grficos, 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 vaco. Por esto, es interesante aprender cmo crear un smbolo, en este caso un clip, de la nada para despus modificarlo. Para insertar un clip vaco haz clic en Insertar Nuevo smbolo y se abrir el cuadro de dilogo de Crear un nuevo smbolo. All debers darle un Nombre para identificarlo ms tarde en la Biblioteca y seleccionar la opcin Clip de Pelcula en el desplegable Tipo. A partir de este momento tendremos un nuevo clip (vaco) al cual podremos acceder desde nuestra Biblioteca (men Ventana Biblioteca), si hacemos clic derecho sobre l y seleccionamos Edicin, podremos editarlo y trabajar con l. Observa cmo hacerlo Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de pelcula y veremos el potencial real de este tipo de smbolos.
Como para todos los smbolos 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 pelcula debemos abrir primero la biblioteca en la que est contenido. Hemos visto en el tema de Smbolos, tenemos dos tipos de bibliotecas: las que estn asociadas a documentos u otras pelculas y las que nos proporciona Flash CS5. Pues bien, no slo podemos utilizar smbolos 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 exportacin mediante biblioteca se hace automticamente 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 smbolos de biblioteca y pulsar Abrir.
Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos, botones y clips del documento en cuestin. Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a su vez todos los smbolos que contenga, incluidos los clips.
Existe otra forma mucho ms cmoda: si tenemos dos documentos abiertos, podemos arrastrar los elementos directamente de un escenario a otro.
Para ver cmo exportar e importar una pelcula completa como un slo movie clip y poder usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros usos de los Movie Clips .
2. Exporta con Archivo Exportar Exportar Pelcula, selecciona el tipo de archivo SWF y dale un nombre. En la ventana que aparece marca la opcin Proteger frente a Importacin, y en el campo Contrasea escribe la clave que quieras.