You are on page 1of 234

Macromedia Flash MX

ndice

ndice
Introduccin 6

Requisitos del sistema

Leccin 1:

Introduccin a Macromedia Flash MX

9 9 9 10 11 11 13 16 17 18 19 20 20 21 22 23 24 24 25 26 27 28 28 29 30

Objetivos Inteface de macromedia flash Qu es Macromedia Flash Animaciones de grabacin y lectura continua Grficos vectoriales Pelculas Interactivas y Multimedia Formatos de archivo Flash Flash en Accin Prcticas adicionales Notas del estudiante Leccin 2: Novedades de Macromedia Flash MX

Objetivos La Interfaz de usuario de Macromedia Herramienta pluma de bezier Creacin de grficos y agregar sonido de sonido Mejor integracin con Macromedia Freehand y Macromedia Fireworks Las bibliotecas de smbolos compartidos El explorador de pelculas Compatibilidad para texto HTML Herramientas de desarrollo de ActionScript Compatibilidad para transferencia de XML Impresin originada en el Web Prcticas adicionales Notas del estudiante

rea nuevas tecnologas caixanova

pgina 1 de 234

Macromedia Flash MX
Leccin 3: La interfaz de usuario de

ndice

Macromedia Flash MX Objetivos La interfaz Flash MX El men principal La barra de herramientas principal o standard (slo en Windows) Ejercicio La barra de herramientas de estado (slo en Windows La barra de herramientas del controlado Ejercicio La barra de herramientas de dibujo Seccin herramientas Seccin ver Seccin colores El escenario La lnea de tiempo Cambio de la ubicacin de la lnea de tiempo Cambios en la apariencia de la lnea de tiempo Fotogramas y cabeza lectora Capas Paneles Disposicin del panel por predeterminado Mtodos abreviados a medida Ejercicio Prcticas adicionales Notas del alumno Leccin 4: Dibujo bsico en Flash MX

31 31 31 32 34 35 35 36 37 38 38 41 41 42 44 45 46 47 48 48 49 52 52 55 56 57 57 57 58 59 60 62 62 63

Objetivos Flujo de trabajo en Flash Modificaciones de las propiedades de pelcula predeterminados Las herramientas de dibujo Flash MX Herramienta lpiz La Herramienta lnea La Herramienta ovalo La Herramienta rectngulo

rea nuevas tecnologas caixanova

pgina 2 de 234

Macromedia Flash MX
La Herramienta pincel Las herramientas pluma y subseleccin Comportamiento de forma simple Modificacin de trazos y rellenos Modificacin de rellenos con la herramienta bote de pintura y panel de relleno El modificador transformar relleno Modificacin de trazos con la herramienta bote de tinta (tintero) y panel de trazo La Herramienta gotero La Herramienta borrador (goma) Aplicacin de transformaciones a forma Escalar y Rotar Prcticas adicionales Notas del estudiante Leccin 5: Ms dibujo, utilizacin de texto,

ndice
65 66 70 71 72 76 77 78 79 81 81 82 83

trabajo con capas e Importacin de grficos Objetivo El proyecto jardinera Utilizacin de reglas y pautas Utilizacin de capas Utilizacin de la herramienta texto Importacin de ilustraciones Conversin de mapas de bits a vectores Tareas adicionales Notas del estudiante Leccin 6: Smbolos, la biblioteca Macromedia Flash y el navegador de Objetivos Qu es un smbolo? Uso de la biblioteca Abrir la biblioteca Usar instancias de smbolos Presentamos el explorador de pelculas Utilizacin del explorador de pelculas Prcticas adicionales Notas del estudiante pelculas

84 84 84 86 88 96 98 100 102 104

105 105 105 111 120 124 125 130 133 134

rea nuevas tecnologas caixanova

pgina 3 de 234

Macromedia Flash MX

ndice

Leccin 7:

Animacin

135 135 135 136 141 143 154 157 159 163 164 165 165 165 166 166 166 167 168 170 175 178 181 183 184 185 185 185 208 210 212 216 220 221

Objetivos Introduccin a la animacin Animacin fotograma a fotograma Construccin de mscaras Interpolacin de movimiento Utilizacin de una gua de movimiento Cmo hacer clips de pelcula Interpolacin de formas Tareas adicionales Notas del estudiante Leccin 8: Utilizacin de sonido

Objetivos Utilizacin de sonidos Tipos de sonidos Sonidos de flujo Sonidos de eventos Importacin de sonidos Adicin de sonidos a la lnea de tiempo Adicin de sonidos a botones Modificacin de sonidos Personalizacin de efectos de sonido Compresin de sonido Tareas adicionales Notas del estudiante Leccin 9: Incorporacin de interactividad Objetivos Una introduccin a ActionScript Utilizacin de cuadros de introduccin de texto Utilizacin de clips inteligentes Construccin de una pre-carga Construccin de un conmutador de msica Tareas adicionales Notas del estudiante

rea nuevas tecnologas caixanova

pgina 4 de 234

Macromedia Flash MX
Leccin 1O: Publicacin y exportacin de sus Pelculas Macromedia Flash Objetivos Optimizacin Configuracin de publicacin Tareas adicionales Notas del estudiante Apndice: recursos adicionales Recusos del flash Recursos del generador

ndice

222 222 223 226 232 233 234 234 234

rea nuevas tecnologas caixanova

pgina 5 de 234

Macromedia Flash MX

ndice

Introduccin Bienvenido al curso de aprendizaje Macromedia Flash MX. Las 10 lecciones que comprende este programa proporcionan aproximadamente 40 horas de material de capacitacin en Macromedia Flash MX. Quizs necesite completar algunas de estas lecciones como tarea para el hogar. Al finalizar cada Leccin existen tareas de Seccin que puede realizar en clase o en su hogar. Se incluye referencia cruzada de plataformas. Cada vez que surgen diferencias entre las plataformas de Microsoft Windows y Macintosh, se hace todo lo posible para incluir las instrucciones para ambas. Cada Leccin comienza con una introduccin y luego presenta ejercicios que se deben seguir paso a paso. En la mayora de las lecciones, los archivos de muestra se utilizan en una y otra Leccin. Si desea comenzar desde la mitad de una Leccin o si tiene dificultades para completar una tarea, puede utilizar los archivos terminados para comenzar el siguiente ejercicio. Los archivos de muestra estn enumerados para facilitar el seguimiento de las versiones. Por ejemplo, si una Leccin utiliza un archivo denominado neptune.fla, el archivo final se llama neptune2.fla. A travs de la mayor parte de este aprendizaje, usted construir un sitio Web para Sobrejardineria.com. En su disco duro de lecciones, se encuentran los archivos fuente que se utilizan para construir la mayor parte de este sitio. El sitio completo, mysite.fla se puede hallar en la carpeta Leccin 10. Tome unos minutos para familiarizarse con este sitio.

rea nuevas tecnologas caixanova

pgina 6 de 234

Macromedia Flash MX

ndice

Requisitos del sistema Creacin MICROSOFT WINDOWS: Procesador Intel Pentium 133 MHz Windows 95/98, NT4, 2000 o posterior 32 MB de RAM de memoria de aplicaciones libre 40 MB de espacio en disco disponible Un monitor de 256 colores con una resolucin de 800x600

MACINTOSH: Power Macintosh con MacOS 8.5 o posterior 32 MB de RAM de memoria de aplicaciones libre 40 MB de espacio en disco disponible Un monitor de 256 colores con una resolucin de 800x600

Reproduccin MICROSOFT WINDOWS: Microsoft Windows 95, 98, Me, NT, 2000 o posterior Netscape 3 o posterior, un navegador habilitado para Java o Microsoft Internet Explorer o posterior Reproductor de Flash para Netscape (que funciona con Netscape 3 o posterior) La edicin Java del reproductor de Flash de Macromedia (es necesario un navegador habilitado para Java) o control ActiveX del reproductor de Flash (funciona con Microsoft Internet Explorer 3 o posterior) MACINTOSH: System 8.1 o posterior Netscape 3 o posterior, un navegador habilitado para Java o Microsoft Internet Explorer o posterior Reproductor de Flash para Netscape (que funciona con Netscape 3 o posterior, Microsoft Internet Explorer 3 o posterior) o la edicin Java del reproductor de Flash de Macromedia (es necesario un navegador

rea nuevas tecnologas caixanova

pgina 7 de 234

Macromedia Flash MX
habilitado para Java) LINUX:

ndice

Linux Redhat 5.1 o 5.2 (con base Pentium solamente) o Linux Slackware 3.5 (con base Pentium solamente) Netscape Navigator 3 o posterior con predeterminados standares de instalacin reproductor de Flash para Netscape (que funciona con Netscape 3 o posterior) SOLARIS: Solaris 2.5 o 2.6 (24 bits de colores, SPARC solamente) Netscape Navigator 3 o posterior con predeterminados estndares de instalacin Reproductor de Flash para Netscape (que funciona con Netscape 3 o posterior)

rea nuevas tecnologas caixanova

pgina 8 de 234

Macromedia Flash MX

Introduccin

Leccin 1: Introduccin a Macromedia Flash MX.


Objetivos Al completar esta seccin, comprender: Lo que es Macromedia Flash. Lo que significa la transferencia de datos desde un disco duro. De que manera Flash utiliza ActionScript para crear interactividad. Que formatos de archivo puede reconocer Flash. Y habr aprendido: Las diferencias entre imgenes vectoriales e imgenes de mapa de bits. Cmo reproducir las pelculas Flash.

En esta leccin podremos familiarizarnos con Flash MX, viendo como manejar los paneles, utilizar las primeras herramientas y crear una nueva pelcula.

Interfaz de Macromedia Flash: Cuando instalamos el primer producto MX, se genera una carpeta llamada Macromedia dentro de la carpeta Programas de nuestro men Inicio. All quedara Flash MX. Ustedes vern que la interfaz de Flash contiene muchsimos paneles. Estos paneles son personalizables, podemos agruparlos y desagruparlos como ms nos convenga. Adems desde el men Ventana tenemos la opcin de visualizar los paneles ms utilizados por los desarrolladores y por los diseadores.

rea nuevas tecnologas caixanova

pgina 9 de 234

Macromedia Flash MX
Los paneles que utilizaremos al comienzo sern: -Propiedades -Herramientas

Introduccin

Qu es Macromedia Flash? Macromedia Flash es la solucin profesional para la creacin de experiencias de gran impacto para la Web. Flash, le permite crear interactivos sitios Web basados en vectores y aplicaciones de escritorio. La familiar Interfaz de usuario de Macromedia le permite crear en poco tiempo y con toda facilidad grficos deslumbrantes, animaciones complejas, controles de navegacin e incluso sitios Web multimedia completos. Puede usar Macromedia Flash para crear aplicaciones avanzadas para el Web usando programacin, formas y conectividad del lado del servidor. Las pelculas Flash son grficos vectoriales compactos que se descargan rpidamente y se ajustan al tamao de la pantalla del espectador. Veamos algunas de las caractersticas mas importantes de Flash MX, esto es, su capacidad de grabacin y lectura continua, el uso de grficos vectoriales y la capacidad multimedia e interactiva.

Flash MX es el producto que nos permite trabajar sobre pelculas. Podemos hacer desde un banner a un sitio completo con este producto. Flash tambin nos permite, si lo deseamos, hacer presentaciones o slo una barra de botones. Tenemos que tener en cuenta que: - El archivo que trabajamos tiene extensin .fla. - El que producimos y colocamos en la web es el .swf. - Y el que tambin colocamos en la web es el .html que necesita el navegador para llamar a la pelcula (.swf).

rea nuevas tecnologas caixanova

pgina 10 de 234

Macromedia Flash MX

Introduccin

Para poder ejecutar el archivo .swf necesitamos el famoso "plug-in". Este es el programa que permite reproducir la pelcula generada con Flash. Dependiendo de la versin con la que fue realizada, necesitar el plugin indicado. El plugin de flash se baja automticamente cuando el sistema ve que no lo tiene instalado. Lo nico que debe hacer el visitante a nuestro sitio es dar el OK ante el requerimiento de bajada. De todas formas, no hay mucho de qu preocuparse, el 98 % de los navegadores ya tienen el plugin instalado.

Animaciones de grabacin y lectura continua Flash Player de Macromedia "graba y lee" las pelculas Flash a medida que se las descarga. Esto significa que la animacin puede comenzar antes de que se complete la descarga. Si la pelcula Flash se prepara de manera correcta, los usuarios podrn ver su sitio en apenas segundos sin tener que esperar a que se termine de descargar toda la pelcula. Podrn ver algo de inmediato, sin tener que hacer clic en el botn Atrs.

Grficos vectoriales Flash admite dos tipos de formatos de imagen: vectoriales y de mapa de bits. Los grficos vectoriales son creados con lneas y curvas y la descripcin de sus propiedades. Los comandos dentro del grafico vectorial le indican a su PC cmo mostrar las lneas y formas, qu colores usar, el ancho de las lneas y as sucesivamente. Quizs ya haya utilizado un programa de dibujo vectorial como Macromedia Freehand para crear estas imgenes. Las imgenes de mapa de bits, son creadas con pxeles. Cuando crea una imagen de mapa de bits, usted marca en el plano la ubicacin y color de cada pxel y el mapa de bits resultante es lo que se ve en pantalla.

rea nuevas tecnologas caixanova

pgina 11 de 234

Macromedia Flash MX

Introduccin

Nota: Con frecuencia se usa el termino "mapa de bits" para referirse a los grficos de mapa de bits. Tambin es el nombre de un tipo de imagen de mapa de bits, el formato Bitmap (BMP - Mapa de bits) de Windows. A lo largo de este curso se usa el trmino en referencia a los grficos de mapa de bits. Cuando se haga referencia al formato mapa de bits de Windows se usar BMP. El tipo de imagen nativa para Flash es el vector, de manera que casi todo lo que se dibuje en Flash ser un grafico vectorial (con algunas excepciones notables como el relleno de mapas de bit). Los grficos vectoriales cuentan con importantes beneficios: son pequeos en lo que se refiere al tamao de archivo y se pueden ajustar perfectamente. Sin embargo, tambin tienen sus limitaciones: los grficos vectoriales muy complejos pueden tener tamaos de archivo demasiado grandes y los vectores no son tan tiles para grficos de calidad fotogrfica. Puede dibujar todos sus grficos vectoriales en Flash mediante las herramientas de dibujo y puede importar los grficos vectoriales desde otras aplicaciones. Los formatos de grficos vectoriales que Flash admite incluyen Macromedia Freehand (FHx), Adobe Illustrator (EPS,Al), AutoCAD DXF (DXF), Enhanced Metafile (EMF), Windows Metafile (WMF) y Flash Player (SWF, SPL). Aun cuando Flash es una herramienta de creacin basada en vectores, tambin se puede usar imgenes de mapa de bits. Las imgenes de mapa de bits no se crean originalmente en Flash, se requiere una aplicacin externa como Fireworks o Photoshop para crear los archivos y luego importarlos a Flash. A diferencia de los grficos vectoriales, las imgenes de mapa de bits no son muy escalables. Las simples suelen ser mayores en tamao de archivo que los grficos vectoriales simples, en tanto que las imgenes de mapa de bits muy complejas, por ejemplo las fotografas, suelen ser ms pequeas que los grficos vectoriales comparables. Los formatos de mapa de bits que admite Flash pueden incluir Bitmap (BMP), Imagen GIF, Imagen JPEG, Imagen PNG, Imagen PICT para Macintosh, Imagen MacPaint (PNT) e Imagen TIFF.

rea nuevas tecnologas caixanova

pgina 12 de 234

Macromedia Flash MX

Introduccin

Uno de los beneficios en el uso de grficos vectoriales en vez de mapas de bits es que se pueden ajustar los grficos vectoriales con toda facilidad sin distorsionar la imagen. Al crecer un mapa de bits, se obtiene la pixelacin de la otra, mientras que cuando se ajusta un grfico vectorial los bordes siguen siendo lisos, como se observa en la Figura 1.1.

Figura 1.1.
Un grfico vectorial ajustado mantiene sus bordes lisos, pero una imagen de mapa de bits ajustado no.

Pelculas interactivas y multimedia Las pelculas Macromedia Flash pueden ser realmente interactivas con el uso de ActionScript, un conjunto de acciones o instrucciones que Flash Player comprende y realiza (ver Figura 1.2.). Con ActionScript, se pueden agregar eventos que se producirn al presionar un botn o pulsar una tecla. Tambin se pueden configurar las acciones para que se produzcan en un determinado momento, por ejemplo, segn se mueva el ratn a travs de la pelcula o se reciben datos.

rea nuevas tecnologas caixanova

pgina 13 de 234

Macromedia Flash MX

Introduccin

Figura 1.2.

Flash ActionScript.

Puede utilizar el ActionScript para llevar a cabo funciones y realizar clculos en una pelcula Flash, lo que le otorga una gran flexibilidad y capacidades interactivas. Muchas acciones requieren poca experiencia en programacin para ser configuradas, pero otras exigen ms familiaridad con los idiomas de programacin y estn pensadas para un desarrollo avanzado. Flash no sirve solo para animacin. Las pelculas Flash pueden ser multimedia. Adems, puede importar archivos de sonido para agregar efectos de sonido y msica a sus pelculas. Flash MX puede importar una variedad de tipos de archivos de sonido, incluyendo WAV, MP3, AIFF y Sun AU. En Flash, los sonidos pueden ser preparados para reproducirse repetidamente, reproducirse independientemente de la lnea de tiempo principal, aumentar y desaparecer progresivamente. Tambin puede sincronizarla con una banda sonora.

Reproductor de Macromedia Flash

rea nuevas tecnologas caixanova

pgina 14 de 234

Macromedia Flash MX

Introduccin

Para verlo en el Web se requiere una cabeza lectora. Flash Player de Macromedia esta muy difundido ya que se distribuye con los exploradores ms modernos y con muchos sistemas operativos. El reproductor es adems un archivo muy pequeo que se puede descargar rpida y fcilmente de la pgina Web de Macromedia.

Figura 1.3.
Se puede convertir una pelcula Flash en un proyector.

rea nuevas tecnologas caixanova

pgina 15 de 234

Macromedia Flash MX

Introduccin

No es necesario instalar Flash Player para ver archivos en su ordenador. Asegrese simplemente que la pelcula Flash haya sido convertida a un proyector, como se muestra en la Figura 1.3, que es una versin ejecutable autnoma de la pelcula. Macromedia Flash incluye Flash Player autnomo a fin de que los creadores puedan ver sus pelculas sin necesidad de usar un navegador para la Web o de crear pelculas de proyector.

Formatos de archivo flash Durante el proceso de desarrollo de sus animaciones Flash para el Web o su ordenador crear en realidad animaciones dentro del ambiente de autora de Macromedia Flash. En ese momento el archivo es un archivo FLA, visualizable solamente en Flash. Cuando est listo para poner su pelcula en el Web, deber publicar (Archivo > Publicar) o exportar (Archivo > Exportar) el archivo como archivo SWF, el formato que se puede ver con Flash Player y Flash Player autnomo. Adems del formato SWF, tambien puede publicar su pelcula como Macromedia Generator Template(SWT), imagen GIF, imagen JPEG, imagen PNG, Proyector para Windows, Proyector para Macintosh, QuickTime Movie o Real Player Movie. Sin embargo, algunos de estos formatos, como los formatos de mapa de bits, no mantienen las capacidades interactivas y de multimedia de la pelcula Flash (no hay sonido, los botones no funcionan, los clip de pelculas no se reproducen como corresponde). Todos estos formatos estn listados en la configuracin de publicacin (Archivo > Configuracin de publicacin). En ocasiones necesitar reproducir su pelcula Flash como un formato del que no se dispone en la configuracin de publicacin. En tal caso, se puede adems exportar la pelcula Flash como FutureSplash Player (SPL), Secuencia

rea nuevas tecnologas caixanova

pgina 16 de 234

Macromedia Flash MX

Introduccin

Adobe Illustrator, Secuencia EPS 3.0, Secuencia JPEG, Secuencia GIF o Secuencia PNG tanto en un ordenador Windows como en una Macintosh al elegir el archivo > Exportar del Men Principal. En Windows tambin se puede exportar la pelcula como un archivo de Windows AVI, archivos de audio WAV, Secuencia EMF, Secuencia WMF, Secuencia DXF y Secuencia de mapa de bits. Al igual que con los formatos encontrados en la configuracin de publicacin, muchos de estos formatos no mantendrn las capacidades interactivas y de multimedia de la pelcula Flash. En la Leccin 10 aprender cmo publicar y exportar sus pelculas Flash.

Flash en accin Ahora que ya sabe un poco ms sobre Flash, dedique un tiempo para explorar su uso en el mundo real. El siguiente ejercicio le mostrara algunos ejemplos excelentes de Flash en la Web. Para ver a Flash en accin: 1. Visite los siguientes sitios Flash: www.caixanova.com www.aaccentia.com www.factoriasvulcano.com www.grupofrinsa.com www.cristinapato.com 2. Observe con que rapidez se cargan muchos de estos sitios. Algunos podrn tardar un poco ms en cargarse, pero observe que cuentan con contenido interesante que lo mantiene ocupado mientras se carga la pelcula. 3. Algunos de estos sitios cuentan con grficos vectoriales y de mapa de bits. Vea si puede encontrar los mapas de bits en los sitios.

rea nuevas tecnologas caixanova

pgina 17 de 234

Macromedia Flash MX

Introduccin

4. A medida que mueva su ratn alrededor del sitio observar que algunas cosas se pueden seleccionar con los botones del ratn. Haga clic en estos tems y vea lo que ocurre. Algunos sitios incluso lo transportaran automticamente a otra pgina o a otra parte de la pelcula en un punto determinado.

Prcticas adicionales Vaya a AACCENTIA (www.aaccentia.com) y encontrar varios sitios Flash. Visite algunos de los sitios que encuentre. Vea si puede darse cuenta de que cada sitio ha sido realmente creado con Flash. Cmo puede darse cuenta? Qu elementos usa el sitio para aprovechar las ventajas de Flash?

rea nuevas tecnologas caixanova

pgina 18 de 234

Macromedia Flash MX

Introduccin

Notas del estudiante

rea nuevas tecnologas caixanova

pgina 19 de 234

Macromedia Flash MX

Novedades

Leccin 2: Novedades de Macromedia Flash MX.


Objetivos Cuando haya completado esta seccin comprender: La Interfaz de usuario de Macromedia. Creacin de grficos y la incorporacin de sonido. La Integracin de Flash MX con otros productos Macromedia. El tablero de control de Macromedia. Las bibliotecas de smbolos compartidos. El Explorador de pelculas. Compatibilidad para texto HTML. Herramientas para desarrollo de ActionScript. Apoyo para transferencia de XML. Impresin originada en la Web.

Si trabaja con versiones anteriores de Macromedia Flash descubrir que Flash MX difiere levemente de lo que estaba acostumbrado. La interfaz de usuario ha sido muy mejorada, las herramientas creativas se ampliaron y ActionScript se convirti en un verdadero idioma. Las nuevas caractersticas de Flash MX abren un mundo totalmente nuevo a la creacin de diseos y el ms alto nivel de interactividad.

rea nuevas tecnologas caixanova

pgina 20 de 234

Macromedia Flash MX

Novedades

La interfaz de usuario de Macromedia Si ha trabajado con Macromedia Freehand, Macromedia Fireworks o Macromedia Dreamweaver, la interfaz Flash MX le resultar muy familiar porque utiliza la Interfaz de usuario de Macromedia. La interfaz le facilita a usted, el diseador, el desplazarse rpidamente entre cualquiera de los productos Macromedia sin interrumpir su ritmo de trabajo. Veamos algunas de las caractersticas claves de la Interfaz de usuario de Macromedia, nuevas para el Flash MX. Cubriremos los elementos de la Interfaz de usuario de Macromedia en detalle en el Captulo 3. Disposicin de la caja de herramientas: La disposicin y agrupacin de las herramientas son ahora consistentes, lo que facilita el desplazamiento de aplicacin a aplicacin. Administracin del panel: Uno de los cambios ms significativos en la interfaz de Flash MX es el mayor uso de paneles para acceder a la informacin, tal como se muestra en la figura 2.1.

Figura 2.1.
De manera predeterminada, el panel Informacin est instalado con los paneles de Transformar, Trazo y Relleno.

Nuevos paneles para trabajar con color, tipos, acciones, mapa de bits, instancias y pelculas enteras, facilitando el acceso a opciones para la modificacin de los muchos elementos en una pelcula Flash. Lo mejor de todo, usted puede crear sus propios conjuntos de paneles y puede organizar la

rea nuevas tecnologas caixanova

pgina 21 de 234

Macromedia Flash MX

Novedades

disposicin de los paneles para que se adapten a su flujo de trabajo. Tambin puede almacenar paneles que usan frecuentemente y guardar dicha disposicin para recuperacin instantnea. Inclusive usted puede trabajar con los paneles de forma independiente, haciendo click en las lneas punteadas que se encuentran junto al titulo y arrastrndolas hasta la posicin de la pantalla deseada. Mtodos abreviados de teclado a medida: Si trabaja con productos de Macromedia y tambin con productos de otros fabricantes, como Adobe Photoshop o Illustrator, le encantar crear sus propios mtodos abreviados para los comandos y funciones de Flash a fin de mejorar el flujo de trabajo. Puede crear y guardar sus propios juegos de mtodos abreviados de teclado o decidirse por usar los juegos estndar de Photoshop o Illustrator.
Figura 2.2.
La herramienta pluma y subseleccionar.

Herramienta pluma. Herramienta subseleccionar.

Herramienta Pluma de Bezier: La herramienta Pluma y el asidero curvo de Bezier le permiten crear rutas precisas. Trabajan de manera muy similar a la herramienta Pluma en Macromedia Freehand o Macromedia Fireworks. La nueva herramienta Pluma y Subseleccionar (ver figura 2.2.) ofrecen diseo punto a punto Bezier de grficos, la manipulacin de punto de Bezier de grficos, creado con la Pluma y las herramientas de dibujo existentes y modos mltiples de Pluma para hacer similar a varias herramientas de Pluma de la industria.

rea nuevas tecnologas caixanova

pgina 22 de 234

Macromedia Flash MX

Novedades

Seleccin de color: Los modelos e interfaces para seleccin de color en Flash MX son idnticos a los encontrados en Macromedia Fireworks. Para los usuarios de Flash, los mayores controles del color, incluyendo el panel Mezclador (ver figura 2.3.), Paneles de Relleno y Trazo, Panel de muestras y los controles de la caja de herramientas de Relleno y Trazo proveen mayor capacidad para pintar grficos. Tambin puede cambiar el color de mltiples objetos al mismo tiempo.

Figura 2.3.
El panel mezclador.

Creacin de grficos y agregar sonido La creacin de grficos en Flash es mucho ms fcil. Las nuevas opciones de resaltar seleccin le facilitan la identificacin de las lneas, rellenos y grupos seleccionados as como el color de los objetos seleccionados. Guas desplazables le ayudan a disponer de los objetos en el Escenario. La compatibilidad para importar archivos de sonido MP3 significa que puede importar sonidos a Flash que ya estn comprimidos. Esto reduce el tiempo requerido para publicar y exportar una pelcula con sonido, porque no se requiere comprimir los sonidos al exportar. El uso de sonidos comprimidos reduce el tamao del archivo de las pelculas terminadas y reduce los requisitos de memoria durante la autora.

rea nuevas tecnologas caixanova

pgina 23 de 234

Macromedia Flash MX

Novedades

Mejor integracin con Macromedia Freehand y Macromedia Fireworks Ahora puede importar archivos de Macromedia Freehand directamente a Flash en formato de grficos editables, manteniendo capas, texto y otros elementos. Con sus sofisticadas herramientas de ilustracin, Macromedia Freehand permite a los diseadores profesionales desarrollar materiales para el Web y de impresin que seran difciles de lograr en Flash. Flash MX admite ahora la importacin directa y la manipulacin de archivos de Freehand de las versiones 7, 8, 9, 10 o MX. Puede importar elementos de Freehand mediante el arrastrar y soltar de Freehand, copiar y pegar o importando todo el documento a travs del dialogo de importacin (Archivo > Importar). La importacin de archivos Freehand a Flash MX es fcil y flexible. Puede elegir aplicar documentos con mltiples pginas a escenas o fotogramas claves de Flash. Tambin puede elegir si desea importar capas de Freehand a capas o fotogramas claves de Flash o usar importacin plana (todos los objetos en un fotograma clave en una sola capa). Rellenos de lentes como la ampliacin y transparencia son convertidos a equivalentes en Flash. Smbolos en la Biblioteca Freehand son importados automticamente a la Biblioteca Flash. La mayor integracin con Macromedia Fireworks le permite iniciar Fireworks con toda facilidad para editar imgenes de mapas de bits importados a Flash. Realice sus cambios en Fireworks y valos aparecer en Flash. Puede adems importar ahora archivos PNG de Macromedia Fireworks y Flash importar todos los elementos editables que pueda, tales como formas vectoriales, texto y guas.

Las bibliotecas de smbolos compartidos A medida que los equipos de diseo de Flash se van agrandando y los

rea nuevas tecnologas caixanova

pgina 24 de 234

Macromedia Flash MX

Novedades

proyectos se vuelven ms complejos, el compartir archivos activos se vuelve cada vez ms importante. Entran las bibliotecas de smbolos compartidos. Con las bibliotecas compartidas puede vincular elementos de bibliotecas como activos externos. Ya no es necesario para las pelculas individuales hacer sus propias bibliotecas internas. En las bibliotecas compartidas puede incluir smbolos fuentes, botones, grficos, clips de pelculas, y sonidos. Lo bueno de las bibliotecas de smbolos compartidos es que los equipos pueden compartir un juego estndar de diseo a travs de mltiples pelculas. Cualquier retoque final a un smbolo se puede realizar en la Biblioteca compartida. Una vez que se publique la biblioteca compartida, cualquier otra pelcula que use, esa librera ser actualizada automticamente. Los smbolos compartidos slo necesitan ser descargados una vez y se los puede volver a usar en cualquier nmero de archivos que se refieran al smbolo compartido. Los tiempos de descarga se reducen dramticamente, mejorando la experiencia visual. Veremos el uso de las Bibliotecas de smbolos compartidos en la Leccin 6.

El explorador de pelculas Si alguna vez hered un proyecto Flash de otro diseador sabe que difcil puede resultar descubrir la estructura del archivo - en especial si ellos usaron ActionScript o smbolos jerarquizados. El Explorador de pelculas que se observa en la Figura 2.4. (Ventana > Explorador de pelculas) cambia todo esto. Con el Explorador de pelculas puede ver fcilmente el contenido completo de la presente pelcula y modificar al panel de propiedades para un elemento seleccionado. El Explorador de pelculas es un rbol jerrquico de todos los elementos

rea nuevas tecnologas caixanova

pgina 25 de 234

Macromedia Flash MX

Novedades

en una pelcula Flash - escena por escena, capa por capa y fotograma por fotograma - incluyendo todos los smbolos y acciones. Despus de que lo haya usado se preguntar como haba logrado sobrevivir sin l. Esta estructura le facilita navegar y editar objetos profundamente jerarquizados.

Figura 2.4.
El Explorador de pelculas.

El Explorador de pelculas permite tambin realizar bsquedas. Est buscando el lugar en el que us una fuente en particular? No hay problema. De hecho, puede cambiar todos los casos de una fuente en su pelcula al usar el Explorador de pelculas. Y por ltimo, ahora puede imprimir la estructura completa de su pelcula o imprimir todos los ActionScript en la pelcula completa. Trabajaremos con el Explorador de pelculas en la Leccin 5.

Compatibilidad para texto html Ahora puede incorporar formatos de texto y vnculos HTML para el diseo y despliegue eficaz de aplicaciones con capacidad para texto. Macromedia Flash MX combina lo mejor de la visualizacin de texto en el navegador grfica y tradicional, para ofrecer una solucin completa de diseo y

rea nuevas tecnologas caixanova

pgina 26 de 234

Macromedia Flash MX

Novedades

envo para experiencias enriquecidas en el Web. Los diseadores cuentan ahora con una eleccin entre mostrar un texto "antialiased" (suavizado) o un texto enriquecido HTML para crear un nuevo calibre en contenido en el Web. Se admiten etiquetas de texto HTML 1.0 primarias. Adems, los archivos con formato HTML pueden ser cargados de manera dinmica durante el tiempo de ejecucin para actualizaciones de contenido de texto inmediatas.

Herramientas de desarrollo de ActionScript ActionScript se ha convertido en un lenguaje totalmente desarrollado en Flash MX, completo con sintaxis tipo JavaScript. Cuando los programadores descubrieron ActionScript en Flash 4, a muchos les gust el concepto pero se sintieron limitados por la interfaz, simple y fcil de usar. El nuevo ActionScript Editor, que se observa en la Figura 2.5. combina lo mejor de ambos mundos tanto los modos Normal como Experto. Los nuevos usuarios pueden usar el modo Normal y desarrollar ActionScript al usar la interactividad de arrastrar y soltar. Los usuarios experimentados pueden introducir ActionScript directamente con la ventaja agregada de estar en condiciones de acceder a una biblioteca de acciones para facilitarlo.
Figura 2.5.ctionScript
Editor.

rea nuevas tecnologas caixanova

pgina 27 de 234

Macromedia Flash MX

Novedades

Ahora se puede exportar a ActionScript en un archivo ASCII, as como editarlo y reimportarlo a un documento Flash o simplemente enviarlo a un archivo script externo mediante la caracterstica #incluir. Tambin es nuevo el depurador que le permite aislar variables para depurar aplicaciones complejas durante el desarrollo. Aprender mucho ms sobre ActionScript en la Leccin 9.

Compatibilidad para transferencia de xml Flash MX aprovecha la compatibilidad para transferencia de XML (lenguaje de marcas extensible), permitindole que transmita informacin XML estructurada para desarrollar aplicaciones ricas en informacin. Los datos XML se pueden cargar y enviar a un servidor o Flash Player puede ahora abrir una conexin de socket XML directamente al servidor para transferencia en tiempo real de y al servidor.

Impresin originada en la web Con Flash MX puede configurar algunos fotogramas de una pelcula para que se imprima dentro del Flash Player. Esto significa que los grficos vectoriales que usted cree se escalarn para imprimirse con alta resolucin. Tambin puede imprimir materiales que no se ven actualmente en una pelcula Flash. Esto se conoce como WYPINWYS -(What You Print Is Not What You See, Lo que imprime no es lo que ve). El contenido a imprimir puede ser descargado por pedido y no necesita ser descargado inicialmente, lo que ofrece una rpida experiencia visual en sitio. Puede ver contenido y aplicaciones adecuadas para la pantalla y producir un diseo adecuado para impresin solamente al usar el Macromedia Flash Player existente. Con Flash MX sus usuarios tienen todo el software necesario para ver e imprimir contenido de gran impacto y elevada calidad.

rea nuevas tecnologas caixanova

pgina 28 de 234

Macromedia Flash MX
Prcticas adicionales

Novedades

Tmese su tiempo para recorrer los paneles que le hemos indicado. Familiarcese con la Interfaz de Flash MX.

rea nuevas tecnologas caixanova

pgina 29 de 234

Macromedia Flash MX

Novedades

Notas del estudiante

rea nuevas tecnologas caixanova

pgina 30 de 234

Macromedia Flash MX

La interfaz de usuario

Leccin 3: La interfaz de usuario de Macromedia Flash MX


Objetivos Al terminar esta seccin habr entendido: Cmo usar el men principal. Cmo usar la barra de herramientas. Cmo trabajar con la Lnea de tiempo. Cmo trabajar con paneles. Y habr aprendido: Sobre la interfaz Flash. Cmo personalizar paneles. Cmo personalizar mtodos abreviados de teclado.

La interfaz de Flash MX Antes de trabajar con Flash MX, necesita familiarizarse con la nueva interfaz (ver Figura 3.1.). Si trabaj con versiones anteriores de Flash le espera una agradable sorpresa. Si ya trabaj con Macromedia FreeHand, Fireworks o Dreamweaver el nuevo ambiente de Flash le resultar muy cmodo y familiar. Los cambios ms importantes son los paneles, los mezcladores de colores y el editor ActionScript. Tmese unos minutos para examinarlo.

rea nuevas tecnologas caixanova

pgina 31 de 234

Macromedia Flash MX

La interfaz de usuario

Figura 3.1.

La interfaz Flash MX en Windows.

El men principal El men principal (ver figura 3.2.) aparece en la parte superior de la ventana de la aplicacin cuando comienza Flash MX.

Figura 3.2.

El Men principal.

Puede tener acceso a la mayora de los comandos que necesita para trabajar eficazmente con Flash MX desde este men. Cada elemento del men

rea nuevas tecnologas caixanova

pgina 32 de 234

Macromedia Flash MX

La interfaz de usuario

tiene un submen asociado de comandos Flash, segn se describe en la siguiente lista: Desde el men Archivo: usted puede crear nuevas pelculas (Nuevo), abrir pelculas existentes (Abrir), abrir otras pelculas como bibliotecas (Abrir como biblioteca, Abrir como biblioteca compartida), importar diseos (Importar) y acceder a la configuracin de publicacin (Configuracin de Publicacin). El men Editar no slo le ofrece las habituales opciones de Copiar, Cortar y Pegar sino tambin opciones especficas de Flash, de gran utilidad como copiar fotogramas y Editar smbolos. Es aqu donde puede personalizar sus mtodos abreviados de teclado o editar sus preferencias. El men Ver le ofrece distintas opciones para cambiar su visin de la pelcula y su contenido. Por ejemplo, puede ver la pelcula rpido para que se reproduzca muy rpido durante la prueba. Tambin se puede usar este men para configurar la cuadrcula y reglas para ubicacin precisa de los objetos en el escenario. Puede agregar capas, guas de movimiento, fotogramas y ms desde el men Insertar. El men Modificar le ofrece opciones para realizar cambios en partes de la pelcula. Tambin puede usar la opcin Documento para cambiar las propiedades de la pelcula en s. No slo puede modificar partes de la pelcula, sino tambin modificar objetos en el escenario mediante el uso de los comandos Alinear, Ordenar y Transformar. Con el men Texto usted puede cambiar la fuente, estilo, alineacin (alinear), seguimiento y ms para cualquier texto en el escenario. El men Control le permite controlar el fondo de la pelcula en el

rea nuevas tecnologas caixanova

pgina 33 de 234

Macromedia Flash MX

La interfaz de usuario

ambiente de edicin Flash. Puede reproducir la pelcula, rebobinarla. Tambin puede usar la opcin prueba de la pelcula para exportar directamente a Flash Player para realizar pruebas. El men Ventana le ofrece opciones para abrir distintas ventanas, incluyendo paneles, el Explorador de pelculas y su biblioteca de pelculas, as como bibliotecas comunes que vienen con Flash. Este men tambin le permite conmutar rpidamente entre las ventanas de pelculas Flash abiertas. El men Ayuda le brinda acceso a distintas formas de asistencia de Flash, incluyendo qu Novedades hay en Flash MX, Uso de Flash, Diccionario de ActionScript, Lecciones y Tutoriales. Es aqu tambin por donde se accede al Administrar extensiones. El men principal no es la nica manera de tener acceso a los comandos Flash. Tambin debe conocer la barra de herramientas (estndar) central (slo en Windows); la barra de herramientas de Estado (slo en Windows) y la barra de herramientas del Controlador.

La barra de herramientas principal o Standard (slo en Windows) La barra de herramientas principal o estndar (ver figura 3.3.) muestra los iconos para mtodos abreviados a algunos de los comandos de uso ms comn en Flash MX. Puede establecer esta barra de herramienta en su ventana de aplicacin o moverla por encima de la ventana. Los iconos del lado izquierdo de la barra le resultarn familiares de otras aplicaciones que ha utilizado. Estas incluyen Pelcula nueva, Abrir, Guardar, Imprimir, presentacin preliminar de la impresin, Cortar, Copiar, Empastar, Deshacer y volver a hacer.

rea nuevas tecnologas caixanova

pgina 34 de 234

Macromedia Flash MX

La interfaz de usuario

Los iconos del lado derecho de la barra de herramientas son especficos para Macromedia Flash. Son Alinear, Rectificar lneas, Rotar y Escalar.

Figura 3.3.

La barra de herramientas principal/estndar.

Ejercicio: En el siguiente ejercicio, aprender a trabajar con la barra de herramientas principal. Estas instrucciones no son para usuarios de Macintosh son slo para aquellos que usan Windows. Para trabajar con la barra de herramientas principal: 1. Abra la barra de herramientas principal y seleccione Ventana > Barras de Herramientas > Principal. 2. Retire la barra de herramientas haciendo clic en la zona gris de la barra de herramientas (no en un icono) y arrastrndola fuera del men principal (visualice una serie de puntos de referencia). 3. Vuelva a instalar la barra de herramientas al hacer clic en la barra azul en la parte superior de la barra de herramientas, desplazando la barra hasta que se encuentre por encima del men principal y luego librela. 4. Cambie la posicin de la barra de herramientas instalada al hacer clic en el lado izquierdo de la zona gris y arrastrndola a la derecha o la izquierda.

La barra de herramientas de estado (slo en Windows) La barra de herramientas de estado, que se muestra en la figura 3.4., aparece en la base de la ventana de aplicacin Flash. La barra de herramientas de estado resulta de especial utilidad si est comenzando a usar Flash. Cuando

rea nuevas tecnologas caixanova

pgina 35 de 234

Macromedia Flash MX

La interfaz de usuario

desplaza su puntero sobre un icono en las barras de herramientas centrales o de dibujo, la barra de herramientas de estado muestra un mensaje describiendo la funcin del icono. No puede retirar esta barra de herramientas.

Figura 3.4.

La barra de herramientas de estado.

Si est usando un ordenador Windows, este ejercicio le mostrar cmo usar la barra de herramientas de estado. Para trabajar con la barra de herramientas de estado: 1. Abra la barra de herramientas de estado y seleccione: Ventana > Barras de Herramientas > Estado. 2. Desplace su puntero sobre los iconos en la barra de herramientas de dibujo y vea cmo cambian los mensajes de la barra de herramientas de estado.

La barra de herramientas del controlador Puede usar la barra de herramientas del Controlador (figura 3.5.) para ver su animacin mientras est trabajando en Flash. Esta barra de herramientas tiene los iconos estndar para Detenerse, Rebobinar, Paso atrs (fotograma por fotograma), Reproducir, Paso adelante (fotograma por fotograma) y avanzar hasta el final. En Windows puede instalar la barra de herramientas del Controlador en la barra de herramientas principal o en la de Dibujo o puede dejarla como barra de herramientas flotante.

rea nuevas tecnologas caixanova

pgina 36 de 234

Macromedia Flash MX

La interfaz de usuario

Figura 3.5.
La barra de herramientas del controlador.

Ejercicio: El siguiente ejercicio le mostrar cmo abrir la barra de herramientas del controlador. Para trabajar con la barra de herramientas del controlador: Abra la barra de herramientas de estado y seleccione:

rea nuevas tecnologas caixanova

pgina 37 de 234

Macromedia Flash MX

La interfaz de usuario

1. Ventana > Barras de Herramientas > Controlador. 2. (Windows) o Window > Controlador (Macintosh). 3. Practique la activacin y desactivacin de la barra de herramientas del controlador en la barra de herramientas principal y en la de dibujo.

La barra de herramientas de dibujo La barra de herramientas de dibujo (ver figura 3.6.) tiene todas las herramientas que necesita para dibujar, pintar, seleccionar o modificar un diseo en Flash. Tmese un momento y pasee por la barra de herramientas con la que trabajar de manera extensiva en las lecciones 4 y 5.

Figura 3.6.
La barra de herramientas de dibujo.

La barra de herramientas de dibujo est dividida en cuatro secciones: la seccin Herramientas, la seccin Ver, la Seccin Colores y la seccin Opciones. La seccin Opciones es sensible al contexto - muestra los modificadores disponibles, si los hay, para la herramienta que acaba de seleccionar. Hablaremos de estos modificadores en la seccin Opciones en la Leccin 4.

Seccin herramientas La seccin herramientas de la barra de herramientas de dibujo que se observa en la figura 3.7. cuenta con todas las herramientas de seleccin y dibujo

rea nuevas tecnologas caixanova

pgina 38 de 234

Macromedia Flash MX

La interfaz de usuario

que necesita para trabajar. Si ya utiliz un programa de dibujo en el pasado, muchas de estas herramientas le resultarn familiares.

Figura 3.7.
La seccin herramientas de la barra de herramientas de dibujo.

Herramienta Flecha (flecha negra): Selecciona cosas en el rea de trabajo. Herramienta de Subseleccin (flecha blanca): Ver y modificar puntos de accin. Herramienta Lnea: Dibuja lneas rectas. Herramienta Lazo: Selecciona formas irregulares. Herramienta Pluma:

rea nuevas tecnologas caixanova

pgina 39 de 234

Macromedia Flash MX
Crea rutas precisas. Herramienta Texto: Crea texto y campos de texto. Herramienta valo:

La interfaz de usuario

Crea valos rellenos y sin rellenar y crculos perfectos. Herramienta Rectngulo: Crea rectngulos rellenos y sin rellenar y cuadrados perfectos. Herramienta Lpiz: Dibuja lneas a mano alzada. Herramienta Pincel: Crea rellenos a mano alzada con la forma del pincel seleccionado. Tintero: Aplica un color y estilo nuevos a una lnea existente. Bote de pintura: Aplica un color y estilo nuevos a un relleno existente. Herramienta Gotero: Selecciona el color y estilo de una lnea existente o la rellena para reutilizar.

rea nuevas tecnologas caixanova

pgina 40 de 234

Macromedia Flash MX
Herramienta Goma: Borra lneas y rellenos.

La interfaz de usuario

Seccin Ver La seccin vista de la barra de herramientas de dibujo que se muestra en la figura 3.8. contiene la herramienta Mano y la herramienta Zoom.

Figura 3.8.
La seccin vista de la barra de herramientas de dibujo.

Herramienta Mano: Desplaza el escenario. Aprender ms sobre el escenario ms adelante en esta Leccin. Herramienta Zoom: Amplia o reduce la pelcula que est creando, pulsando ALT.

Seccin Colores Usted usa los siguientes modificadores en la Seccin colores (ver figura 3.9.) para seleccionar colores para las herramientas Lnea, Lpiz, Pincel y Bote de pintura.

rea nuevas tecnologas caixanova

pgina 41 de 234

Macromedia Flash MX
Figura 3.9.
La seccin colores de la barra de herramientas de dibujo.

La interfaz de usuario

Modificador del Color del trazo: Selecciona los colores para las herramientas Lnea y Lpiz. Modificador del Color del relleno: Selecciona los colores para las herramientas Pincel, Bote de pintura y Texto. Modificador de los colores predeterminados: Configura las herramientas Color de trazo y relleno a sus

configuraciones predeterminadas de negro (trazo) con blanco (relleno).

Sin Modificador del color: Cuando se usan las herramientas valo, Rectngulo o Pluma se puede usar la herramienta Sin color para desconectar el trazo o el relleno. Modificador del Intercambio de colores: Conmuta los colores de trazo y relleno.

El escenario El escenario (ver figura 3.10.) es la zona grande, blanca, rectangular en el

rea nuevas tecnologas caixanova

pgina 42 de 234

Macromedia Flash MX

La interfaz de usuario

centro de la interfaz Flash. Es aqu donde usted crea su pelcula. La zona gris que rodea al escenario es la zona de trabajo. Puede dibujar en el escenario o la zona de trabajo, pero la mayor parte de su accin transcurre en el escenario.

Figura 3.10.

El escenario

Puede modificar varias de las propiedades del escenario al elegir Modificar > Documento del men principal (ver figura 3.11.). Algunos de estos cambios afectarn la apariencia de toda su pelcula y otros son solo con fines de edicin (vea la lista siguiente).

rea nuevas tecnologas caixanova

pgina 43 de 234

Macromedia Flash MX

La interfaz de usuario

Figura 3.11.
El cuadro de dilogo Propiedades del Documento.

Velocidad de fotogramas: Determina la velocidad de la pelcula. Aprender ms sobre esto en las lecciones 4 y 6. Configuracin de las dimensiones: Determina la altura y ancho del escenario. Color de fondo: Determina el color del escenario, que es el mismo a travs de toda la pelcula.

La lnea de tiempo La lnea de tiempo (ver figura 3.12.) es donde usted anima el contenido de su pelcula. Es lo que le permite crear en realidad una animacin al realizar cambios en los contenidos del escenario a lo largo de un perodo de tiempo. Las partes principales de la lnea de tiempo son capas, fotogramas y la cabeza

rea nuevas tecnologas caixanova

pgina 44 de 234

Macromedia Flash MX
lectora.

La interfaz de usuario

Figura 3.12.

La lnea de tiempo con capas, fotogramas y la cabeza lectora.

Las capas contienen el contenido real de su pelcula. Si mira al lado izquierdo de la lnea de tiempo ver los nombres de las capas actuales (por predeterminado, las capas se denominan Capa 1, Capa 2 y as sucesivamente pero pueden cambiar los nombres de las capas). A la derecha de los nombres de las capas se encuentran los fotogramas contenidos en esa capa. Fotogramas en una pelcula Flash representan tiempo. La cabeza lectora le muestra que fotograma est visible en ese momento en el escenario.

Cambio de la ubicacin de la lnea de tiempo Por predeterminado, la lnea de tiempo aparece en la parte superior de la ventana de aplicacin central, por encima del escenario. Para cambiar la posicin de la lnea de tiempo, puede instalarla en la base a cada lado de la ventana de aplicacin central o puede retirar la lnea de tiempo del todo. Tambin puede esconder a la lnea de tiempo. Si esconde la lnea de tiempo, puede volver a visualizarla al seleccionar Ver > Lnea de tiempo del men. Puede redimensionar la lnea de tiempo para cambiar el nmero de capas y fotogramas visibles. Entre la lnea de tiempo y la ventana de su pelcula hay una barra separadora horizontal de color gris. Si desplaza su puntero sobre esa barra, su puntero cambia a dos barras horizontales con una flecha apuntando hacia arriba y otra hacia abajo, como se observa en la figura 3.13.

rea nuevas tecnologas caixanova

pgina 45 de 234

Macromedia Flash MX

La interfaz de usuario

Cuando el puntero cambia a esta forma, puede desplazar el separador hacia arriba o hacia abajo para mostrar o esconder las capas. Cuando no hay ms capas y fotogramas que se puedan mostrar en la lnea de tiempo, puede ver capas y fotogramas adicionales usando las barras de desplazamiento a la derecha y la base de la lnea de tiempo

Figura 3.13. La lnea de tiempo puede ser redimensionada.

Cambios en la apariencia de la lnea de tiempo Puede cambiar el tamao de los fotogramas en la lnea de tiempo y las secuencias de visualizacin de los fotogramas con las clulas coloreadas. Usted tambin puede incluir la exhibicin preliminar como pulgar el contenido de fotogramas en la lnea de tiempo. Estos pulgares son tiles como resea de la animacin, pero ocupan espacio adicional en la pantalla. Practicar el cambio en la apariencia de la lnea de tiempo en el siguiente ejercicio. Para cambiar la apariencia de la lnea de tiempo. 1. En el ngulo superior derecho de lnea de tiempo hay un botn que parece una lnea horizontal con tres tildes verticales (Figura 3.14.). Haga clic en este botn para abrir el men opciones de la lnea de tiempo. 2. Los cinco primeros elementos del men (Diminuto, Pequeo, Normal, Mediano y Grande) controlan el tamao de los fotogramas en la lnea de

rea nuevas tecnologas caixanova

pgina 46 de 234

Macromedia Flash MX

La interfaz de usuario

tiempo. Pruebe cada una de estas configuraciones para encontrar la que resulte ms conveniente para usted. 3. El sexto elemento del men (Corto) acorta la altura de las capas. Pruebe esta configuracin. 4. Los fotogramas coloreados son tiles, en particular cuando est trabajando con animacin. Probablemente no querr cambiar esta configuracin. 5. Elija Exhibicin preliminar. 6. La exhibicin preliminar le permite ver los pulgares del contenido en el fotograma, escalado para adecuar los fotogramas de la lnea de tiempo. 7. Elija Exhibicin preliminar en contexto. 8. La Exhibicin preliminar en contexto le permite ver todo el contenido en un fotograma en la escala adecuada.

Figura 3.14.
El men Opciones de la lnea de tiempo.

Fotogramas y cabeza lectora La cabeza lectora se desplaza a lo largo de la lnea de tiempo para indicar al fotograma que se muestra en ese momento en el escenario. La cabeza lectora de la lnea de tiempo muestra los nmeros de fotograma de la animacin. Para mostrar un fotograma en el escenario, usted desplaza la cabeza lectora al fotograma en la lnea de tiempo.

rea nuevas tecnologas caixanova

pgina 47 de 234

Macromedia Flash MX

La interfaz de usuario

Cuando est trabajando con un gran nmero de fotogramas que no aparecen todos en la lnea de tiempo al mismo tiempo, puede centrar la cabeza lectora en la lnea de tiempo han de ubicar con toda facilidad el fotograma actual. Hgalo haciendo clic sobre el botn Centrar el fotograma, el botn ms a la izquierda (se lo ve como una lnea roja vertical) bajo la ventana de la lnea de tiempo (ver figura 3.15.).
Figura 3.15.
El botn Centrar fotograma.

Capas Cada capa en una pelcula Flash acta como una lmina transparente. Su pelcula Flash final consistir en una pila de capas. El orden de las capas en la lnea de tiempo es importante. La capa en la parte superior de la pila en la lnea de tiempo es la capa ms superior de la pelcula. Los objetos en las capas superiores pueden esconder objetos en las capas ms inferiores. Las capas son tiles en la organizacin de los elementos de su pelcula, porque los objetos en una capa no interfieren con los objetos en otra capa. Puede usar tantas capas como las que necesite para crear su pelcula Flash. Aprender ms sobre las capas en la Leccin 5.

Paneles Una de las mayores diferencias en Flash MX es el mayor uso de los paneles flotantes (descriptos en la siguiente lista) para acceder a la informacin. Puede organizar la disposicin de los paneles para que se adecue a su flujo de trabajo. Puede instalar paneles de uso frecuente y guardar dicha disposicin para recuperarla de inmediato.

rea nuevas tecnologas caixanova

pgina 48 de 234

Macromedia Flash MX
Panel de info:

La interfaz de usuario

Muestra el ancho, altura, posicin de X, posicin de Y y el color RGB de los objetos sobre el escenario. Panel de transformar: Redimensiona numricamente, transforma, rota y desalinea objetos en el escenario. Panel de alinear: Alinea objetos en relacin con otro o con el escenario. Panel mezclador de color: Cambia los colores de trazo o relleno. Panel de muestras de color: Muestra la paleta Web 216 por predeterminado. Puede agregar, reemplazar o borrar colores en este panel. Panel de escena: Agregado y remocin de escenas, cambio en el orden de escenas y modificacin de las propiedades de las escenas. Aprender ms sobre las escenas en la Leccin 9.

Disposicin del panel por predeterminado Los paneles de informacin, mezclador, de caracteres e instancia que se observan en la figura 3.16. se muestran a la derecha de la ventana de aplicacin cuando comienza Flash MX por primera vez. Si desplaza los paneles alrededor de

rea nuevas tecnologas caixanova

pgina 49 de 234

Macromedia Flash MX

La interfaz de usuario

la ventana de aplicacin y luego elige Flash, el cual le recuerda la ubicacin ltima de los paneles y abre con los paneles en dicha posicin.

Figura 3.16.
La disposicin del panel predeterminado.

Puede agrupar paneles juntos en juegos o interrumpirlos en paneles individuales. Incluso, si lo prefiere, puede fusionar todos los paneles en uno solo. Una vez que configur sus paneles de la forma que ms le gusta puede guardar la disposicin como una configuracin de paneles a medida. Para trabajar con paneles: 1. Comencemos con los paneles en su posicin predeterminada. Si movi alguno de los paneles puede reconfigurarlos al seleccionar Ventana > Conjunto de paneles > Disposicin predeterminada.

rea nuevas tecnologas caixanova

pgina 50 de 234

Macromedia Flash MX

La interfaz de usuario

2. Haga clic en la barra de ttulos en la parte superior del panel de informacin y llvela al lado izquierdo de su pantalla. 3. Para separar el panel de informacin de esta configuracin de paneles, haga clic en el tabulado de informacin (puntos alineados de referencia y llvelo fuera de la configuracin de paneles. Haga lo mismo con los otros paneles. Para crear una disposicin de paneles a medida: 1. Reconfigure los paneles a su disposicin predeterminada al elegir Windows > Configuracin de paneles > predeterminado. 2. Cierre todos los grupos de paneles excepto el grupo mezclador. Para cerrar una configuracin de panel, haga clic en X en el ngulo derecho superior en Windows o en el cuadro en el ngulo superior izquierdo en Macintosh. 3. Separe el panel mezclador de color y el panel de muestras y colquelos fuera del escenario sobre el lado derecho de la pantalla. 4. Para guardar esta configuracin de paneles elija: Ventana > Guardar Disposicin de Panel. 5. Teclee Colores como el nombre para esta disposicin de paneles y haga clic en OK. 6. Vuelva a reconfigurar la disposicin del panel en las configuraciones predeterminadas. 7. Ahora cambie la disposicin del panel a la nueva disposicin de color al elegir Ventana > Configuracin de paneles > Colores. Para borrar una disposicin de paneles a medida: 1. Abra la carpeta de configuracin de paneles en la carpeta de aplicacin Flash MX en su unidad de disco. (Controle con su instructor para que le

rea nuevas tecnologas caixanova

pgina 51 de 234

Macromedia Flash MX

La interfaz de usuario

informe sobre la ubicacin de este archivo. Una ruta probable es Archivos de programa/Macromedia/Flash MX/Configuracin de panel). 2. Borre el archivo para la configuracin de panel que desea eliminar (en su caso eso podra ser Colores). La configuracin del panel ya no aparece en el men de configuracin del panel.

Mtodos abreviados a medida Flash MX ofrece un nmero de mtodos abreviados de teclado para acelerar su flujo de trabajo. Si trabaj de manera extensa con otros programas de dibujo o edicin, ya estar acostumbrado a usar estos mtodos abreviados. En Flash MX puede usar los mtodos abreviados estndar de Flash, crear y guardar sus propias configuraciones de mtodos abreviados o usar las configuraciones de Photoshop o Illustrator. El siguiente ejercicio le mostrar cmo realizar sus propios mtodos abreviados de teclado.

Ejercicio Para personalizar los mtodos abreviados de teclado: 1. Elija Edicin > Mtodos abreviados de teclado. El cuadro de dilogo mtodos abreviados de teclado se abre, tal cual se muestra en la figura 3.17.

rea nuevas tecnologas caixanova

pgina 52 de 234

Macromedia Flash MX

La interfaz de usuario

Figura 3.17.

El cuadro de dilogo mtodos abreviados de teclado.

2. El conjunto actual le muestra que mtodos abreviados de teclados est utilizando en este momento. Para conmutar a una de las otras configuraciones estndar de mtodos abreviados, haga clic en la lista desplegable junto a Conjunto actual y elija uno de los siguientes: Flash 5, Fireworks 4, Freehand 10, Illustrator 10, o Photoshop 6. 3. Para crear su propio conjunto a medida de mtodos abreviados de teclado primero debe duplicar uno de los conjuntos existentes. Seleccione el

rea nuevas tecnologas caixanova

pgina 53 de 234

Macromedia Flash MX

La interfaz de usuario

conjunto estndar que desea duplicar y luego haga clic en el botn Duplicar conjunto. Se abre la ventana de duplicacin. 4. Teclee Mis mtodos abreviados. Mis mtodos abreviados sern mostrados como el conjunto actual. 5. Los comandos que puede cambiar se interrumpen en tres conjuntos: Men de comandos de dibujo, herramientas de dibujo y men de comandos probar pelcula. Elija el men de comandos de dibujo. 6. Haga clic en + (Windows) o (Macintosh) junto a modificar. Luego elija Capa. 7. Haga clic en + (Windows) o (Macintosh) junto a mtodos abreviados. El rea de presionar tecla se vuelve activo, con la palabra <vaco> resaltado. Nota: Si ya se asign un mtodo abreviado a Capa, puede seleccionarlo y hacer clic en el botn para eliminarlo. 8. Para asignar una nueva serie de mtodos abreviados simplemente presione las teclas en el teclado que desea usar. Luego presione Control+Alt+I (Windows) o Comando+I (Macintosh.) Esta combinacin de golpes de teclado ya est en uso, de modo que Flash MX le enva el siguiente mensaje de error: Este mtodo abreviado ya fue asignado al comando informacin. 9. Intente una nueva combinacin de teclas. Teclee Control+Alt+I (Windows) o Comando+opcin+] (Macintosh).

rea nuevas tecnologas caixanova

pgina 54 de 234

Macromedia Flash MX

La interfaz de usuario

10. Esta tecla no est en uso. Para activar esta tecla, haga clic en Cambiar. 11. Para eliminar un conjunto de mtodos abreviados, haga clic en Borrar y elija el conjunto que desea eliminar. Luego haga clic en OK, para cerrar el panel de Mtodos Abreviados de Teclado.

Prcticas adicionales Explore la barra de herramientas de dibujo. Cuando coloca su puntero sobre cada icono, el icono del ratn muestra el nombre de la herramienta y el mtodo abreviado de teclado asociado con l. Adems, la barra de estado en la base de la interfaz muestra una corta explicacin sobre cmo usar esta herramienta. Intente modificar los mtodos abreviados de teclado para algunas de las herramientas. Abra sus paneles en Flash MX y adptelos a su medida. Practique instalacin y borrado de los paneles.

rea nuevas tecnologas caixanova

pgina 55 de 234

Macromedia Flash MX

La interfaz de usuario

Notas del alumno

rea nuevas tecnologas caixanova

pgina 56 de 234

Macromedia Flash MX

Dibujo bsico en Flash

Leccin 4: dibujo bsico en Flash MX de Macromedia.


Objetivos Cuando haya completado esta seccin: Comprender las bases del dibujo en Flash de Macromedia. De que manera las formas de Flash interactan entre si. Cmo se aplican transformaciones a las sombras en Flash.

Y Ud. habr aprendido: Cmo usar las herramientas de dibujo de Flash. Cmo modificar propiedades de pelcula. Cmo trabajar con diseos importados.

Flujo de trabajo en Flash Flash provee una variedad de maneras de crear un diseo. Puede usar las herramientas de dibujo de Flash para crear diseos vectoriales o puede importar el trabajo de grfico vectorial de otras aplicaciones. Tambin puede importar mapas de bits a Flash.

rea nuevas tecnologas caixanova

pgina 57 de 234

Macromedia Flash MX

Dibujo bsico en Flash

Modificaciones de las propiedades de pelicula predeterminados

Figura 4.1.
El cuadro de dilogo Propiedades del Documento. Cuando se abre el cuadro de dilogo Documento Propiedades observar de otras

configuraciones que pueden ser cambiadas.

tambin

Cuando comience Flash observar que siempre se abre con una pelcula nueva en blanco. Las configuraciones predeterminadas para una nueva pelcula Flash son un ancho de 550 pxeles, una altura de 400 pxeles y un fondo blanco. Puede modificar estas propiedades a travs del cuadro de dilogo Propiedades de Documento que se observa en la figura 4.1. La configuracin de la velocidad de fotogramas de 12 pfs significa que su pelcula Flash se reproducir a una velocidad de 12 fotogramas por segundo. Una velocidad de fotogramas de 8 a 12 fotogramas por segundo es adecuada para publicar en el Web (esto probablemente no significara mucho para usted hasta que empiece a trabajar en animacin, en la Leccin 7). Tambin puede cambiar la manera en que desea que aparezcan las reglas, con divisiones en pxeles, en pulgadas, en puntos, centmetros o milmetros. Si descubre que constantemente est modificando las configuraciones predeterminadas las puede guardar en un nuevo predeterminado. Por ejemplo, si siempre cambia el tamao de su pantalla a 600 pxeles por 400 pxeles, realice ese cambio en el cuadro de dilogo Propiedades de pelcula y haga click en Guardar predeterminado.

rea nuevas tecnologas caixanova

pgina 58 de 234

Macromedia Flash MX

Dibujo bsico en Flash

La prxima vez que cree una nueva pgina en Flash tendr la nueva altura y ancho. Tambin tiene la opcin de hacer que Flash ajuste las dimensiones de la pelcula para que quede lista para impresin o equilibre la pelcula para que se ajuste a los contenidos. En el ejercicio siguiente aprender cmo modificar las propiedades de Documento. Para modificar las propiedades de documento: 1. Cree una nueva pelcula eligiendo Archivo > Nuevo. Se abre una pelcula nueva, con un fondo blanco y dimensiones de 550 pxeles por 400 pxeles. 2. Elija Modificar > Documento del Men principal. Se abre el cuadro de dilogo Propiedades de la pelcula. 3. Deje la Velocidad de fotogramas en 12 fps, pero modifique las dimensiones de manera que Ancho y Altura sean 6OO cada una. 4. Cambie el color del fondo haciendo click en la fuente de color y seleccione un color de la paleta. 5. Haga click en OK en el cuadro de dilogo de propiedades de pelcula. Usar esta pelcula nueva mientras practica con las herramientas de dibujo.

Las herramientas de dibujo Flash MX En la Leccin 3 le presentamos la barra de herramientas de dibujo (ver figura 4.2.) y ahora es el momento de que empiece a dibujar. Flash cuenta con una variedad de herramientas de dibujo. Cada una es til para un propsito especfico y cuando las use en distintas combinaciones podr crear una infinidad variedad de dibujos. Ahora iniciar el trabajo con las herramientas de

rea nuevas tecnologas caixanova

pgina 59 de 234

Macromedia Flash MX

Dibujo bsico en Flash

dibujo ms sencillas (lpiz, lnea, valo, rectngulo y pincel) antes de dar el gran salto a la pluma y las herramientas de subseleccin.

Figura 4.2.
La barra de herramientas de dibujo.

La herramienta Lpiz La herramienta Lpiz (ver figura 4.3.) es til para dibujar lneas y formas. La forma creada por el lpiz se conoce como trazo. Puede especificar la rectilineidad de las lneas y formas cambiando el modo lpiz en la seccin opciones de la barra de herramientas antes del dibujo. Tambin puede especificar el color de la lnea, su espesor y su estilo abriendo la ventana de trazo. Tendr la oportunidad de jugar con la herramienta Lpiz en el siguiente ejercicio.

rea nuevas tecnologas caixanova

pgina 60 de 234

Macromedia Flash MX
Figura 4.3.
La Herramienta Lpiz.

Dibujo bsico en Flash

Para usar la herramienta Lpiz: Seleccione la herramienta Lpiz de la barra de herramientas de dibujo. Configure el Modo lpiz, que aparece en la seccin opciones de la barra de herramientas, en Nivelar. Rectificar: Dibuja lneas rectas y segmentos de lneas. Alisar: Dibuja lneas curvas lisas. Tinta: Dibuja lneas a mano alzada. 1. Configure en el trazo el Color a negro (#OOOOOO), Espesor a 1, y Estilo a slido en el panel de trazo (Ventana > propiedades) que se ve en la Figura 4.4.

Figura 4.4.

El Panel de propiedades con la opcion Trazo.

2. Desplace a la herramienta Lpiz a travs del escenario para dibujar una lnea. Para limitarse lnea a ngulos de 90 grados, puede sostener presionada la tecla Maysculas mientras realiza el desplazamiento.

rea nuevas tecnologas caixanova

pgina 61 de 234

Macromedia Flash MX
La herramienta Lnea

Dibujo bsico en Flash

La herramienta Lnea (ver figura 4.5.) es til para dibujar lneas rectas. A diferencia de la herramienta Lpiz, la herramienta Lnea crea Ineas rectas nicas. Ms adelante aprender a manipular estas Ineas para hacerlas curvas.
Figura 4.5.
La Herramienta Lnea.

Para dibujar con la herramienta Lnea: Seleccione la herramienta Lnea de la barra de herramientas de dibujo. Configure en el trazo el Color a rojo (#FFOOOO), Espesor a 2, y Estilo a punteado en el panel de trazo (Window > paneles > trazo). Ahora desplace a la herramienta Lnea a travs del escenario para dibujar la lnea. Si sostiene presionada la tecla Maysculas mientras realiza el desplazamiento, puede limitar la lnea a mltiples de 45 grados.

La herramienta valo La herramienta valo (ver figura 4.6.) es til para dibujar valos y crculos. Puede dibujar estas formas con ambos, trazo y relleno, o trazo sin relleno o como relleno sin trazo.

Figura 4.6.
La Herramienta Ovalo.

rea nuevas tecnologas caixanova

pgina 62 de 234

Macromedia Flash MX

Dibujo bsico en Flash

Para dibujar con la herramienta valo: 1. Seleccione la herramienta valo de la barra de herramientas de dibujo. 2. Elija un color para el trazo y relleno, mediante las fuentes de color en la seccin colores de la barra de herramientas. Si desea dibujar al valo sin un trazo o relleno, haga click en el icono No Color directamente por debajo de la fuente de color de relleno. 3. Ahora desplace a la herramienta valo a travs del escenario para crear un valo. Para limitar la forma a un crculo, mantenga presionada Maysculas mientras realiza el desplazamiento.

La herramienta Rectngulo Use la herramienta Rectngulo (ver figura 4.7.) para dibujar rectngulos y cuadrados. Como en el caso de la herramienta valo, las formas dibujadas con la herramienta Rectngulo pueden ser dibujadas con o sin trazos y rellenos. Tambin puede especificar un radio de ngulo para dibujar rectngulos con bordes redondeados.
Figura 4.7.
La Herramienta Rectngulo

rea nuevas tecnologas caixanova

pgina 63 de 234

Macromedia Flash MX
Para dibujar con la herramienta Rectngulo:

Dibujo bsico en Flash

1. Seleccione la herramienta Rectngulo de la barra de herramientas de dibujo. 2. Configure el Color del trazo y Relleno, mediante la fuente de colores en la seccin de colores de la barra de herramientas. 3. Ahora desplace la herramienta Rectngulo a travs del escenario para crear un rectngulo. Mantenga la tecla Maysculas presionada para limitar la forma a un cuadrado. E

Figura 4.8.

El cuadro de dilogo configuracin del rectngulo

4. Desplace la herramienta Rectngulo a travs del escenario. Esta vez su rectngulo tendr esquinas redondeadas. Tambin puede cambiar el radio de esquinas mientras est creando su rectngulo o cuadrado. Para hacerlo, desplace la herramienta Rectngulo a travs del escenario pero no la libere. Mientras presiona el botn del ratn hacia abajo, use las teclas Flecha hacia arriba y hacia abajo para aumentar y disminuir el radio. Nota: Cada rectngulo que desplace tendr ahora el radio que usted configure (no importa cmo lo configur hasta que usted cambie la configuracin del radio de esquinas).

rea nuevas tecnologas caixanova

pgina 64 de 234

Macromedia Flash MX
La herramienta Pincel

Dibujo bsico en Flash

La herramienta Pincel (ver figura 4.9.) es til para "pintar" en Flash. Use esta herramienta como usara un pincel. Los trazos resultantes del pincel no son para nada trazos, en realidad son rellenos. En el siguiente ejercicio experimental con la herramienta Pincel. Trate distintas configuraciones hasta que haya probado todas las opciones disponibles para esta herramienta.

Figura 4.9.
La Herramienta pincel.

Para dibujar con la Herramienta Pincel: 1. Seleccione la herramienta Pincel de la barra de herramientas de dibujo. 2. Seleccione la opcin Pintar normal del Modo pincel de la zona de opciones de la barra de herramientas de dibujo. Pintura normal: Pinta sobre lneas y rellenos en la misma capa. Pintura relleno: Limita la herramienta Pincel as slo pinta rellenos y zonas vacas. Cuando se selecciona este modo las lneas no se pintan.

rea nuevas tecnologas caixanova

pgina 65 de 234

Macromedia Flash MX

Dibujo bsico en Flash

Pintar detrs: Slo pinta reas en blanco del escenario. Lneas y rellenos no se pintan. Seleccin de Pintura: Slo pinta rellenos seleccionados. No pinta lneas seleccionadas. Pintura interior: pinta dentro de los lmites de las lneas en el escenario. Cuando se selecciona este modo y comienza a pintar en una zona rellenada, slo la seccin dentro de las lneas se pinta. Incluso si su pincel salpica fuera de las lneas, la pintura permanece dentro de las lneas. No le hubiera gustado tener uno as en jardn de infantes? 3. Configure el Color del relleno en la seccin de color de la barra de herramientas de dibujo a verde (#OOFFOO). Configure el Tamao del pincel y Forma del pincel en la zona de opciones de la barra de herramientas de dibujo con algo que usted considere. 4. Si tiene una tableta de dibujo tambin puede hacer click en Usar presin para modificar el espesor del pincel con los cambios de presin en la tableta. 5. Ahora desplace la herramienta Pincel a travs del escenario. Presione Maysculas para limitar el trazo del pincel horizontal o verticalmente.

Las herramientas Pluma y Subseleccin Las herramientas Pluma y Subseleccin no son nuevas en Flash MX (ver figuras 4.10. y 4.11.). La herramienta Pluma es una herramienta de dibujo tcnico para crear rutas precisas. Si ya us las herramientas Pluma en Freehand de Macromedia o el llustrator de Adobe descubrir que la herramienta Pluma en Flash trabaja de manera muy similar. Si nunca antes trabaja con una herramienta Pluma, acostumbrarse a ella

rea nuevas tecnologas caixanova

pgina 66 de 234

Macromedia Flash MX

Dibujo bsico en Flash

le requerir un poco de prctica. La herramienta Subseleccin se usa para mostrar y modificar los puntos en las rutas de pluma. Cuando se trabaja con las herramientas Pluma y Subseleccin pasar de una a la otra con mucha frecuencia - aprenda sus mtodos abreviados. El mtodo abreviado de teclado para la herramienta Pluma es P, y el mtodo abreviado para la herramienta Subseleccin es A. Tambin puede mostrar puntos en lneas que importa o crea con otras herramientas de dibujo de Flash tales como el lpiz, pincel, lnea, valo o rectngulo, para ajustar esas lneas.
Figura 4.1O.La Heramienta pluma.

Figura 4.11.La Herramienta subseleccin.

Las lneas dibujadas en el escenario tienen puntos curvos o puntos esquinados. Cuando no se los selecciona, ambos tipos de puntos aparecen como cuadrados rellenos sobre la lnea. Cuando selecciona un punto en esquina aparece como un cuadrado hueco. Cuando selecciona un punto curvo aparece como un crculo hueco con manijas de Bezier adheridas (ver figura 4.12.).
Figura 4.12.
Las manijas de Bezier son fantsticas para la

manipulacin de la forma de una curva.

La apariencia de la herramienta Pluma cambia a medida que usted se desplaza por el escenario. Cuando la herramienta Pluma no est en una ruta

rea nuevas tecnologas caixanova

pgina 67 de 234

Macromedia Flash MX

Dibujo bsico en Flash

tiene una pequea X cerca de ella. Si ubica la herramienta Pluma sobre una ruta pero no sobre un punto, la X cambia a una +. Cuando la herramienta Pluma est sobre un punto curvo la X cambia a un carater. Sobre un punto de esquina, la X cambia a un signo menos. Los siguientes ejercicios le llevarn a travs de los pasos requeridos para usar las herramientas Pluma y Subseleccin. En este primer ejercicio, aprender a dibujar una lnea recta con la herramienta Pluma. Para dibujar una Inea recta con la herramienta Pluma: 1. Seleccione la herramienta Pluma de la barra de herramientas de dibujo. 2. Haga click en el Escenario en el que desea que comience el primer segmento de su lnea. Vuelva a hacer click donde desee que termine el primer segmento de su lnea. Luego haga varios clicks en algunos puntos ms. Cada vez que hace click en el escenario con la herramienta Pluma, Flash contina su lnea. 3. Para dejar de agregar segmentos a su lnea, haga doble click en el ltimo punto o deseleccione la herramienta Pluma al seleccionar otra herramienta de la barra de herramientas de dibujo. Tambin puede hacer Control-click (Ventanas) o Comando-click (Machintosh) para dejar de agregar segmentos. 4. Ahora que ya ha creado una lnea recta, intente crear una curva. El ejercicio siguiente le mostrar cmo. Para dibujar una Inea curva con la Herramienta Pluma: 1. Seleccione la herramienta Pluma de la barra de herramientas de dibujo. 2. Haga click en el Escenario en el que desea que comience la primera curva. Desplcese sobre el escenario al punto en que quiere que termine su primer segmento curvo. Siga desplazndose hasta que tenga la forma

rea nuevas tecnologas caixanova

pgina 68 de 234

Macromedia Flash MX
que desee.

Dibujo bsico en Flash

3. Observar algo nuevo aqu: Cuando crea una curva con la herramienta Pluma obtiene manijas de Bezier. Puede modificar las manijas de Bezier con la herramienta Subseleccin. 4. Vuelva a desplazarse para continuar su curva. Haga esto dos veces ms. Una vez que haya dibujado sus Ineas y curvas con la herramienta Pluma quizs descubra que necesita agregar puntos adicionales. El siguiente ejercicio le explicar como usar las herramientas Subseleccin y Pluma para agregar un punto al trazo. Para agregar un punto a un trazo: 1. Seleccione la herramienta Subseleccin de la barra de herramientas de dibujo. 2. Haga click en el trazo al que desea agregar un punto. 3. Cambie a la herramienta Pluma (P). 4. Desplace la herramienta Pluma sobre el trazo. Cuando el puntero de la herramienta Pluma cambia para mostrar un icono ms (+), haga click en el trazo en el que quiere agregar un punto. Qu pasa si necesita eliminar uno de los puntos que acaba de agregar? El ejercicio siguiente le mostrara cmo hacerlo. Para eliminar un punto de un trazo: 1. Seleccione de nuevo la herramienta Subseleccin. 2. Seleccione el trazo del que desea eliminar un punto. 3. Cambie a la herramienta Pluma (P). Puede eliminar puntos de esquinas haciendo click en ellos una vez. Puede eliminar puntos curvos al hacer click en ellos dos veces. Como alternativa,

rea nuevas tecnologas caixanova

pgina 69 de 234

Macromedia Flash MX

Dibujo bsico en Flash

puede seleccionar cualquier tipo de punto con la herramienta Subseleccin y presione Eliminar. Fcilmente puede convertir un punto curvo en uno de esquina y viceversa. El siguiente ejercicio le explica cmo hacerlo. Para cambiar puntos curvos en puntos de esquina v puntos de esquina en curvos: 1. Use la herramienta Subseleccin para seleccionar la ruta que desea modificar. 2. Cambie a la herramienta Pluma (P). 3. Ubique la herramienta Pluma sobre el punto curvo que desea convertir en punto de esquina. Cuando aparece el icono diamante de la herramienta Pluma (indicando que se encuentra sobre un punto curvo) haga click en el punto una vez. El icono Diamante es reemplazado por el icono Menos para indicar que el punto fue cambiado. Tambin observar que la curva se endereza. 4. Seleccione la herramienta Subseleccin una vez ms y seleccione la ruta que desea modificar. Para convertir un punto de esquina en un punto curvo use la herramienta Subseleccin a Alt-Desplazar (Ventanas) o Opcin-Desplazar (Macintosh) el punto.

Comportamiento de forma simple Ahora que ya pas algn tiempo trabajando con distintas herramientas de dibujo, habr notado algn comportamiento interesante por las formas en el escenario.

rea nuevas tecnologas caixanova

pgina 70 de 234

Macromedia Flash MX

Dibujo bsico en Flash

En primer lugar, los trazos y rellenos son entidades separadas: si usted usa la herramienta Flecha para seleccionar un relleno y desplazarlo, el trazo se queda detrs. Otro comportamiento interesante es que cada vez una forma se superpone a otra, las formas se dividen en segmentos donde quiera que se corten. Existen un par de maneras de prevenir que las formas se corten entre si. Puede seleccionar una forma y agruparla (use Control+G en Windows o Comando+G en una Macintosh, o elija Modificar > Agrupar) o puede desplazar cada forma en una capa distinta. Cubriremos las capas en la Leccin 5.

Modificacin de trazos y rellenos Algunas herramientas de la barra de herramientas de dibujo pueden usarse para modificar formas y rellenos despus de haber sido dibujadas. Estas incluyen las siguientes: Bote de pintura: Aplica rellenos a las formas. Tintero: Aplica atributos de trazo a lneas y esbozos. Gotero: Lleva atributos de una forma o lnea as esos atributos pueden ser aplicados a otras formas o lneas. Borrador o Goma: Borra porciones de un dibujo. Cuando aplica un trazo a una forma, pinta el esbozo de esa forma con el color de trazo que usted especifica. Cuando aplica el mismo trazo a una lnea existente, la lnea cambia a ese color. El relleno de una forma aplica el color de relleno especfico para la forma. Tambin puede hacer cambios a los trazos y rellenos existentes usando la

rea nuevas tecnologas caixanova

pgina 71 de 234

Macromedia Flash MX

Dibujo bsico en Flash

herramienta Flecha para seleccionar el trazo o relleno que desea modificar y luego cambiar las configuraciones en el panel adecuado. Los siguientes paneles pueden ser encontrados en el men Ventana: Paneles mezclador y de muestras: Cambia el color del trazo o relleno seleccionado. Panel de trazo: Modifica el estilo, espesor y color de un trazo seleccionado. Panel de relleno: Modifica el tipo de relleno y color de un relleno seleccionado. Modificacin de rellenos con la herramienta Bote de pintura y Panel de relleno La herramienta Bote de pintura (ver figura 4.13.) es fantstica para el relleno de reas vacas con color. Tambin puede usarla para cambiar el color de un relleno existente. El Bote de pintura puede rellenar reas con colores slios, rellenos de degradados y rellenos de mapas de bits. La herramienta Bote de pintura tiene los siguientes tres modificadores:
Figura 4.13.
La herramienta Bote de pintura.

Tamao de intervalo: Rellena un rea esbozada incluso si no esta totalmente cerrada. Especifique el tamao del intervalo que tendr la forma rellena. Relleno cerrado: El degradado se cierra y relleno del mapa de bits a fin de que el relleno se extienda por todo el escenario. Usar esta herramienta en la seccin Transformacin de Aplicaciones. Relleno de transformacin: Ajusta un degradado o relleno de mapa de bits que

rea nuevas tecnologas caixanova

pgina 72 de 234

Macromedia Flash MX

Dibujo bsico en Flash

aplica. Usar esta herramienta en la seccin Transformacin de Aplicaciones. Ahora que ya conoce un poco ms sobre rellenos, es el momento de comenzar a modificarlos. Los siguientes ejercicios le mostraran como agregar rellenos a esbozos, modificar rellenos existentes, aplicar rellenos de degradado y usar mapas de bits para rellenos.

Figura 4.14.

El Panel de relleno.

Para agregar un relleno o modificar un relleno existente: 1. Seleccione la herramienta Bote de pintura de la barra de herramientas de dibujo. 2. Seleccione un Color de relleno de la seccin Color de la barra de herramientas o del Panel de relleno (Ventana > Propiedades) que se muestra en la figura 4.14. 3. Elija una de las siguientes opciones de tamao de intervalo de la barra de herramientas de dibujo. No cierre los intervalos: Elija esta opcin si desea cerrar los intervalos en el esbozo por usted mismo. Esto impide que Flash rellene en reas fuera del esbozo que esta tratando de rellenar. Cerrar intervalos pequeos, Cerrar Intervalos medianos, Cerrar grandes intervalos: Elija una de estas opciones si desea que Flash cierre automticamente los intervalos. 4. Haga click en el relleno que desea cambiar o haga click dentro del esbozo que desea rellenar.

rea nuevas tecnologas caixanova

pgina 73 de 234

Macromedia Flash MX

Dibujo bsico en Flash

5. Seleccione la herramienta Flecha de la barra de herramientas de dibujo y haga click en el relleno que acaba de agregar o modificar. 6. Abra el panel Muestras de color (Ventana > Muestras de color) y modifique el color de relleno. En cuanto cambie el color de relleno en el panel relleno, el relleno que seleccion cambia. En este momento tendr en alguna parte de su pelcula un relleno aplicado. A menos que ya descubri el relleno de degradado, es muy probable que este relleno sea un color slido. Vamos a darle un toquecito cambindolo a un relleno de degradado, como se demuestra en el ejercicio siguiente: Para usar el relleno degradado: Use la herramienta Flecha para seleccionar un relleno existente, y luego abra el panel Mezclador de colores (Ventana > Mezclador de colores). Cambie el Estilo de relleno a Degradado lineal o Degradado radial. El relleno seleccionado cambiar al degradado lineal ms reciente aplicado o al degradado lineal predeterminado. Puede cambiar los colores en el degradado lineal al seleccionar los punteros de color en la barra de definicin de degradados (ver figura 4.15.). Tambin puede agregar ms colores, hasta un mximo de 8, haciendo click en la barra Definicin de degradado.
Figura 4.15.
La barra de definicin de degradado.

rea nuevas tecnologas caixanova

pgina 74 de 234

Macromedia Flash MX

Dibujo bsico en Flash

El ejercicio siguiente le mostrar como cambiar uno de sus rellenos slidos o de degradado en un relleno de mapas de bit. Este es bastante til para aplicar un mapa de bit en mosaico a una forma. Para usar un relleno de mapa de bits: 1. Antes de poder usar una imagen de mapa de bit para un relleno, necesita importar uno a Flash. Aprender ms sobre la importacin de mapas de bits en la Leccin 5, pero por ahora elija Archivo > Importar del Men principal. Navegue a la carpeta Leccin 5 y abra la carpeta de activos. Seleccione cualquiera de los JPEGs en esa carpeta. Haga click en Abrir (Windows) o Agregar y luego Importar (Macintosh). 2. El JPEG aparecer en el escenario. No necesita mantener el JPEG que est en el escenario - en realidad lo guard en la biblioteca, de la que aprender ms en la Leccin 6. Con el mapa de bits seleccionado, presione Eliminar para eliminarlo del escenario. 3. Abra el panel Relleno (Ventana > Mezclador de colores) y elija Mapa de bits del panel Estilo de relleno. Deber ver la versin diminuta del mapa de bits que acaba de importar asegrese que est seleccionado. 4. Seleccione la herramienta valo y dibuje una serie de valos o crculos a travs del escenario. En vez de estar relleno con un color slido, ahora estn rellenos con el mapa de bits que import.

rea nuevas tecnologas caixanova

pgina 75 de 234

Macromedia Flash MX
El modificador transformar relleno

Dibujo bsico en Flash

El Transformar relleno mostrado en la figura 4.16. es una opcin de la herramienta Bote de pintura. Use este modificador para escalar, rotar, desalnear y volver a centrar mapas de bits y rellenos de degradado. Tambin puede cambiar la altura y ancho de los rellenos usando el modificador Transformar relleno.
Figura 4.16.
El modificador Transformar Relleno.

Para usar el modificador Transformar relleno: 1. Seleccione la herramienta Bote de pintura y elija el modificador Transformar relleno en la seccin opciones de la barra de herramientas de dibujo. 2. Haga click en el relleno de mapa de bits que cre en el ejercicio anterior. Aparece un recuadro de delimitacin alrededor del mapa de bits, tal cual se muestra en la Figura 4.17.
Figura 4.17.
Un recuadro de delimitacin aparece alrededor del mapa de bits.

3. Escale el relleno de mapa de bits desplazando la manija cuadrada en la esquina inferior izquierda a la posicin deseada. Rote el mapa de bits desplazando la manija de rotacin circular en la esquina del recuadro de

rea nuevas tecnologas caixanova

pgina 76 de 234

Macromedia Flash MX
delimitacin.

Dibujo bsico en Flash

4. Mueva el relleno desplazando una de las manijas circulares en la parte superior o un lado del recuadro de delimitacin. 5. Vuelva a centrar el relleno desplazando el punto del centro. 6. Cambie la altura del relleno desplazando la manija cuadrada en la base del recuadro de delimitacin. Para cambiar el ancho, desplace la manija cuadrada sobre el lado izquierdo del recuadro de delimitacin.

Modificacin de trazos con la herramienta Bote de tinta (Tintero) y Panel de trazo La herramienta Bote de tinta (ver figura 4.18.) se parece mucho a la herramienta Bote de pintura, excepto que la usa para lneas y trazos en vez de rellenos. Puede seleccionar la herramienta Bote de tinta, modificar las configuraciones del trazo en el Panel de Trazo (Ventana > Propiedades), y luego hacer click sobre un trazo existente para aplicar los cambios. Tambin puede seleccionar un trazo existente y slo modificar sus configuraciones en el Panel de Trazo.
Figura 4.18.
La herramienta Bote de tinta.

El siguiente ejercicio le mostrar como modificar un trazo existente usando el Bote de tinta y el Panel de trazo: Para modificar un trazo existente: 1. Seleccione la herramienta Bote de tinta de la barra de herramientas de dibujo. 2. Asegrese que el Panel de Trazo est abierto (Ventana > Propiedades). En el panel de trazos puede cambiar la apariencia, espesor y color de

rea nuevas tecnologas caixanova

pgina 77 de 234

Macromedia Flash MX

Dibujo bsico en Flash

cualquier trazo. Este panel tambin tiene una ventana para exhibicin previa manual. Para este ejercicio, modifique las siguientes configuraciones: 3. Cambie el estilo de trazo a punteado o puntos. 4. Cambie el espesor del trazo desplazando el deslizador hacia arriba o abajo. 5. Cambie el color del trazo. 6. Haga click en una forma para esbozarla con los atributos del trazo seleccionado, o aplique esos atributos a un trazo existente. Haga click en una Inea para aplicarle los atributos del trazo. 7. Ahora seleccione el trazo, usando la herramienta Flecha. Haga algunos cambios ms en el trazo en el panel de trazo. Por ejemplo, intente cambiar el Espesor de Inea a 1O o el Color de la Inea a dan (#OOFFFF). Estos cambios se aplicarn automticamente al trazo seleccionado.

La herramienta Gotero Use la herramienta Gotero (ver figura 4.19.) para copiar rellenos y trazos de una forma o Inea y aplicarlo a otras formas o Ineas. El siguiente ejercicio mostrar cmo usar la herramienta Gotero para copias rellenos y atributos de trazo y luego aplicar esos atributos a otros trazos o rellenos, usando las herramientas apropiadas.
Figura 4.19.
La herramienta Gotero.

Para usar la herramienta Gotero: 1. Seleccione la herramienta Gotero de la barra de herramientas de dibujo. 2. Haga click en el trazo o relleno que tiene los atributos que desea copiar.

rea nuevas tecnologas caixanova

pgina 78 de 234

Macromedia Flash MX

Dibujo bsico en Flash

La herramienta reconoce si usted hizo click en un trazo o relleno y cambia segn corresponda. Nota: Cuando hace click en un trazo, la herramienta cambia al Bote de tinta. Cuando hace click en un relleno, la herramienta cambia al Bote de pintura con el modificador Relleno cerrado activo. Esta herramienta tambin trabaja sobre tipografas. Cuando hace click sobre texto a editar, la herramienta cambia a la herramienta de texto. 3. Haga click en el trazo o relleno sobre el que quiere aplicar los atributos copiados. Las propiedades del trazo o relleno copiados se aplican al trazo o relleno en el que hizo click. Que pasa si necesita seleccionar el color de una Inea para usar en un relleno y viceversa? No hay problema. 4. Mantenga presionada su tecla Maysculas cuando hace click en el trazo o relleno del que est copiando los atributos. Esto configura los colores de relleno y de trazo con el color del trazo o relleno seleccionados.

La herramienta Borrador (Goma) La herramienta Borrador (ver figura 4.20.) como bien lo adivina, borra. Es prcticamente lo contrario que la herramienta Pincel e incluso tiene modificadores similares. La herramienta Borrador slo puede borrar formas no agrupadas. El ejercicio siguiente le mostrar cmo usar la herramienta Borrador.

rea nuevas tecnologas caixanova

pgina 79 de 234

Macromedia Flash MX

Dibujo bsico en Flash

Figura 4.2O.
La herramienta Borrador.

Para usar la herramienta Borrador: 1. Seleccione la herramienta Borrador de la barra de herramientas de dibujo. 2. Eleccione uno de los siguientes modos de Borrador (primero pruebe el Borrar normal y luego Borrar rellenos y Borrar lneas): Borrar normal: Borra cualquier relleno o lneas sobre las cuales desplaza la herramienta Borrador. Borrar relleno: Limita la herramienta Borrador as slo borra reas de rellenos vacas, sin borrar lneas que pueden haber sido pasadas por encima. Borrar Ineas: Slo borra lneas. Cualquier relleno que sea pasado por encima no ser afectado. Borrar rellenos seleccionados: Slo borra rellenos seleccionados, no lneas seleccionadas. Borrar dentro: Borra dentro de los lmites de una forma. Cuando se selecciona este modo y comienza su trazo en una zona rellena, slo la seccin dentro de esa rea se borra. Cuando se selecciona este modo las lneas no se borran. 3. Desplace a la herramienta Borrador sobre el rea que desee borrar.

rea nuevas tecnologas caixanova

pgina 80 de 234

Macromedia Flash MX

Dibujo bsico en Flash

4. Haga doble click en la herramienta Borrador en la barra de herramientas de dibujo para borrar rpidamente todo en todas las capas no bloqueadas.

Aplicacin de transformaciones a formas Una vez que haya desplazado algo al escenario, le puede aplicar distintas transformaciones. Puede escalar y rotar formas y lneas, modificar rellenos, cambiar atributos de trazos y rellenos. Ya aprendi como modificar atributos de trazos y rellenos mediante las distintas herramientas de dibujo y paneles, veamos ahora algunas de las otras transformaciones que puede aplicar.

Escalar y Rotar Puede escalar y rotar lneas y rellenos. Al seleccionar una forma y elegir Modificar > Transformar > Escalar, puede desplazar una de las manijas delimitando el relleno o la lnea para hacer el relleno o lnea ms grande o ms pequeo. Al seleccionar Modificar > Transformar > Rotar puede desplazar lneas y rellenos y darlos vuelta en otras direcciones. Puede hacer transformaciones numricas eligiendo Modificar > Transformar > Escalar y Rotar del Men principal para abrir el cuadro de dilogo que se muestra en la figura 4.21.

Figura 4.21.
El cuadro de dilogo Escalar y Rotar.

Puede lograr transformaciones en un sitio abriendo el panel de

rea nuevas tecnologas caixanova

pgina 81 de 234

Macromedia Flash MX

Dibujo bsico en Flash

transformacin que se muestra en la Figura 4.22. Tambin puede aplicar la transformacin a un duplicado de la forma, dejando la forma original intacta, al hacer click en el icono Copiar y aplicar transformacin.

Figura 4.22.
El Panel de transformacin

Prcticas adicionales Ahora que conoce a todas las herramientas de dibujo, tmese su tiempo para jugar con ellas. Trate de dibujar formas diferentes y luego modificarlas, usando las distintas herramientas a su disposicin. Use los paneles que aprendi para aplicar nuevos colores de relleno y trazo a sus dibujos. Use los modificadores de escala y rotacin y/o el panel de

transformacin para aplicar algunas transformaciones a sus dibujos.

rea nuevas tecnologas caixanova

pgina 82 de 234

Macromedia Flash MX
Notas del estudiante

Dibujo bsico en Flash

rea nuevas tecnologas caixanova

pgina 83 de 234

Macromedia Flash MX

Ms dibujo

Leccin 5: Ms dibujo, utilizacin de texto, trabajo con capas e importacion de ilustraciones.


Objetivos Cuando haya completado de leer esta seccin comprender: Cmo utilizar las reglas y las guas para colocar sus ilustraciones. Las capas y su utilidad en Macromedia Flash. Cmo utilizar una capa gua. Y Ud. habr aprendido: Cmo crear y volver formar objetos. Cmo importar y crear ilustraciones en otros programas de dibujo. Cmo convertir un mapa de bits en un grfico vectorial.

El proyecto Jardinera

rea nuevas tecnologas caixanova

pgina 84 de 234

Macromedia Flash MX

Ms dibujo

Ahora que ha recibido una introduccin a todas las herramientas de dibujo, puede comenzar a preparar un verdadero proyecto. De aqu en adelante, aprender cmo desarrollar un sitio Web basado en Flash para jardinera, una empresa real (www.sobrejardineria.com) que se especializa en jardinera y paisajismo. Se sorprender de lo rpido que es producir resultados configurara profesionales su nueva mediante pelcula y Flash. agregar En el siguiente ejercicio las elementos mediante

herramientas de dibujo. Tambin aprender nuevos conceptos a medida que haga el ejercicio. Es hora de comenzar! Para ver lo que va a construir en esta nueva leccin, abra el archivo misitio.fla. Este archivo muestra la pantalla de introduccin al sitio Web Jardinera. Utilizar las herramientas de dibujo para crear el borde blanco y las formas del vector rojo en la parte superior de la pantalla. Adems utilizar la herramienta Texto y trabajar y modificar ilustraciones importadas. Para comenzar el sitio Jardinera: 1. Cierre cualquier otra pelcula que est abierta actualmente y cree una nueva pelcula de Flash eligiendo Archivo > Nuevo del Men Principal. Adems, puede utilizar Control+N (Windows) o Comando+N (Macintosh). 2. Elija Modificar > Documento del Men Principal. Se abre el cuadro de dilogo Propiedades del Documento. 3. En el cuadro de dilogo Propiedades del Documento, cambie las dimensiones de la pelcula a un Ancho de 600 y a una Altura de 4OO. Cambie el Color de fondo a negro (#000000). Haga click en Aceptar para cerrar el cuadro de dilogo. 4. Cree una nueva carpeta denominada misarchivos. Guarde su archivo como Jardineria.fla en la carpeta misarchivos. Nota: La carpeta misarchivos es el lugar en donde guardar todos los archivos que har durante este curso de modo que colquelo en donde lo

rea nuevas tecnologas caixanova

pgina 85 de 234

Macromedia Flash MX

Ms dibujo

pueda encontrar fcilmente. Su instructor le puede ayudar si fuese necesario.

Utilizacin de reglas y pautas Ahora puede comenzar a dibujar. Lo primero que debe configurar son los contornos blancos que aparecen en los bordes de la pelcula que se repiten a 10 pxeles de los bordes. Puede utilizar su herramienta Rectngulo estableciendo el trazo en Blanco y el relleno en Ninguno para dibujar dos rectngulos en el Escenario. Sin embargo no ser muy preciso. Al trabajar en Flash y se preocupa de colocar los elementos en lugar precise en el Escenario, puede utilizar las reglas y las guas arrastrables (vase: Reglas). El nuevo Flash MX es capaz de arrastrar guas desde las reglas hasta el Escenario (vase figura 5.2.).

Figura 5.2.
Utilice las reglas y las guias arrastrables para ayudarlo situar los elementos en los lugares precisos.

Para utilizar las reglas v las guas para dibujar los bordes blancos: 1. Mantenga jardineria.fla abierto y active las reglas eligiendo Ver > Reglas del Men Principal. 2. Arrastre un gua al Escenario haciendo click sobre la regla en la parte superior del rea de trabajo y arrastrndola hacia abajo sin soltar el botn del ratn. Coloque la primera gua a 10 pxeles de la parte superior de la pelcula, utilizando la regla para colocarla

rea nuevas tecnologas caixanova

pgina 86 de 234

Macromedia Flash MX

Ms dibujo

adecuadamente (cada una de las marcas Flash no numeradas representa 10 pxeles). Luego suelte el botn del ratn. 3. Aparece una lnea verde en el Escenario. Esta es su lnea gua. 4. Coloque una segunda gua a 10 pxeles desde la parte inferior de la pelcula, otra gua a 10 pxeles del lado derecho de la pelcula y una cuarta gua a 10 pxeles del lado izquierda de la pelcula. 5. Asegrese que est activada la opcin Ajustar en guas, eligiendo Ver > Guas > Ajustar a guas. Si existe una marca de verificacin al lado de la opcin Ajustar a guas, esto significa que ya ha sido seleccionada. 6. Esto obligar que cualquier objeto cerca de una gua se ajuste a la Inea. 7. Seleccione la herramienta Rectngulo de la barra de herramientas de dibujo. En el Panel de Propiedades (Ventana > Propiedades), establezca el Estilo de trazo en Slido, el Ancho de trazo en 1 y el Color de trazo en Blanco. Desactive el Color de relleno seleccionado el modificador de Color de relleno en la seccin de color en la barra de herramientas de dibujo y haciendo click en Sin color. Asegrese que el Radio de ngulo este configurado en O. 8. Arrastre la herramienta Rectngulo sobre las guas. 9. El rectngulo debera ajustar a las guas automticamente. 10. Para visualizar el rectngulo que acaba de dibujar, desactive las guas eligiendo Ver > Guas > Mostrar guas. 11. Vuelva a activar las guas. Arrastre otro conjunto de cuatro guas al Escenario y dispngalas de acuerdo al borde exterior de la pelcula. Asegrese que la opcin Ajustar en gua (Ver > Guas > Ajustar a guas) an est activada y luego dibuje un segundo rectngulo con las mismas configuraciones que utiliz anteriormente para formar un borde para la pelcula.

rea nuevas tecnologas caixanova

pgina 87 de 234

Macromedia Flash MX

Ms dibujo

Nota: No se olvide activar las guas antes de comenzar y desactvelas al finalizar de modo que pueda visualizar los rectngulos que ha creado. Y ayudese con la herramienta Zoom para observar ms detenidamente su trabajo.

Utilizacin de capas Aqu continuamos con su Leccin. Observe nuevamente el archivo JardineriaL5_final.fla en la carpeta Leccion05. En las esquinas superiores izquierda y derecha se encuentran un conjunto de formas arqueadas que forman el cuadro para jardn. Dibujar estas formas a continuacin. El grfico del jardn se agregar en un ejercicio posterior. Antes de agregar cualquier otra cosa a su pelcula, tomemos un momento para hablar acerca de cmo organizar el contenido de una pelcula de Flash en capas. Tal como se mencion en la Leccin 3, las capas actan como una visualizacin de hojas transparentes. Las capas se "apilan" una sobre otra (vase la figura 5.3.). Se puede apreciar el orden de visualizacin en la lnea de tiempo; la capa superior es la ms alta en el orden de visualizacin y aquella en la parte inferior es la ms baja. Los objetos ubicados en una capa superior pueden ocultar los objetos en las capas ms bajas. Las capas sirven para organizar el contenido de su pelcula, ya que los objetos no agrupados en capas separadas no se segmentan al solaparse. Puede nombrar las capas.

Figura 5.3.
Las capas son "apiladas" una arriba de otra en la Lnea de tiempo.

rea nuevas tecnologas caixanova

pgina 88 de 234

Macromedia Flash MX

Ms dibujo

Cada capa tiene su propia orden de visualizacin. A medida que dibuja una capa, lo ltimo que se dibuja queda en la parte superior. Cuando trabaje con grupos se dar cuenta que los grupos se mantienen en la parte superior del orden de visualizacin, an si dibuja algo despus de agregar el grupo. El siguiente ejercicio le dar la oportunidad de trabajar con herramientas de dibujo un poco ms y aprender cmo agregar y utilizar capas. En este primer ejercicio, agregar un tercer rectngulo en el escenario, colocndolo en una capa separada de modo que no segmente el rectngulo existente. Para dibujar un rectngulo en una capa separada: 1. Elija Modificar > Capa del Men Principal. 2. Se abre el cuadro de dilogo Propiedades de capa. 3. Escriba Contornos en el campo de texto Nombre y haga click en Aceptar. 4. El nombre de la capa cambia a Contornos en la Lnea de tiempo. 5. Agregue una nueva capa a la pelcula, utilizando uno de los siguientes mtodos. a.Desde el Men Principal: Elija Insertar > Capa. b. Desde la Lnea de tiempo: Haga click en el botn Insertar capa. c. Desde el Men contextual: Haga click con el botn derecho del ratn (Windows) o Control- Click (Macintosh) en la capa y elija Insertar capa. d. Colquele el nombre barra de desplazamiento. 6. Seleccione la capa de la barra de desplazamiento, haciendo click sobre l. Un pequeo icono de lpiz aparece al lado del nombre de la capa; de este modo sabr si est seleccionado. Asegrese de verificar si existe ese icono antes de empezar.

rea nuevas tecnologas caixanova

pgina 89 de 234

Macromedia Flash MX

Ms dibujo

7. Dibuje un pequeo rectngulo en el centro del Escenario, utilizando las mismas configuraciones de trazo y relleno utilizado en el ejercicio anterior. 8. Seleccione la herramienta Flecha (V) desde la barra de herramientas de dibujo. Haga doble click en el rectngulo que acaba de dibujar para seleccionarlo.

9. selecciona slo una parte del dibujo, si hace doble click selecciona todo el dibujo.) 10. Abra el panel Informacin eligiendo Ventana > Info. Modifique las siguientes configuraciones en el panel Informacin, presionado Intro o Tabulacin despus de cambiar cada configuracin. Ancho (W): 65O Altura (H): 24 X: -25 Y: 26O 11. Guarde su archivo como Jardineria.fla en la carpeta misarchivos.

Debido a que dibuj el rectngulo en una capa separada, no debera tener problemas de segmentacin. Esto ser muy til en las futuras lecciones, debido a que querr desplazar el rectngulo en la capa de la barra de desplazamiento en forma separada de aquellos en la capa Contornos. Pero tambin podemos utilizar carpetas para nuestras capas. Todas las capas que deseamos agrupar pueden incorporarse a alguna carpeta. Esto nos facilitar el trabajo con todas las capas. Vamos al ejercicio: 1. Agregue una nueva carpeta de capas a la pelcula, utilizando uno de los siguientes mtodos. 2. Desde el Men Principal: Elija Insertar > Carpeta de Capas. 3. Desde la Lnea de tiempo: Haga click en el botn Insertar Carpeta de

rea nuevas tecnologas caixanova

pgina 90 de 234

Macromedia Flash MX
Capas.

Ms dibujo

4. Desde el Men contextual: Haga click con el botn derecho del ratn (Windows) o Control - Click (Macintosh) en la capa y elija Insertar carpeta de capas. Colquele el nombre Contornos. Ahora debemos incluir nuestras dos capas realizadas dentro de la carpeta Contornos. Para ello: 1. Haga click sobre la carpeta Barra de desplazamiento y arrstrela sobre la carpeta Contornos, al soltar ver que queda ubicada mas adentro, con una sangra. Esto significa que qued dentro de la carpeta Contornos. 2. Haga click sobre la capa Contornos y realice la misma operacin que en el punto anterior. No slo puede utilizar capas y carpetas de capas para organizar su contenido, sino que adems puede utilizar capas especiales denominadas capas de guas como elementos de dibujo. Las capas de guas no se exportan en su pelcula de Reproductor de Flash y no aumentan el tamao de su archivo final. Las capas de gua estn representadas en su pelcula mediante un icono de gua al lado izquierdo del nombre de la capa. En el prximo ejercicio, agregar dos capas adicionales. Utilizar las herramientas de dibujo un poco mas para agregar algunas formas vectoriales en una capa. La otra capa ser una capa gua que servir como ayuda de dibujo para las formas que crear.

Para utilizar una capa gua como una ayuda de dibujo: 1. An debera tener abierto Jardinerial.fla. De lo contrario, bralo ahora. Este ejercicio ser ms fcil dehacer sin la distraccin de tener que ver las dems capas. Oculte las dems capas haciendo click en el icono Mostrar/Ocultar todas las capas (el ojito) sobre la capa

rea nuevas tecnologas caixanova

pgina 91 de 234

Macromedia Flash MX
superior.

Ms dibujo

2. Haga click en la carpeta, cree una nueva capa, nombrndola Gua vectorial. Si la capa no ha sido creada en la parte superior del orden de visualizacin, la puede desplazar arrastrndola hasta la parte superior.

Figura 5.4.
Las capas Gua se identifican por un corchete al lado izquierdo del nombre de la capa.

3. La ayuda de dibujo que utilizar es un archivo de imagen denominada curvas.jpg que se encuentra en la carpeta archivoscurso en la carpeta Leccion05. Para importar este archivo, elija Archivo > Importar del Men Principal. Desplcese hasta el archivo y haga click en (Windows) o Agregar y luego Importar (Macintosh). Ajuste la imagen cambindola de tamao hasta hacerla coincidir con las guas y el borde del rectngulo armado en la capa Barra de desplazamiento, como en la figura (vase figura 5.5).

Figura 5.5.

rea nuevas tecnologas caixanova

pgina 92 de 234

Macromedia Flash MX

Ms dibujo

4. Para convertir esta capa en una capa gua, haga click con el botn derecho del ratn (Windows) o Control-click (Macintosh) cerca del nombre de la capa y elija Gua del Men emergente. Una forma de martillo, tal como se indica en la Figura 5.4. aparecer al lado izquierdo del nombre de la capa, indicando que se trata de una capa gua. 5. Cree una cuarta capa y nmbrala Vector rojo. Esta es la capa en donde crear sus formas vectoriales. Si la capa no ha sido creada en la parte superior del orden de visualizacin, la puede desplazar arrastrndola hasta la parte superior. 6. Bloquee la capa Gua vectorial. Puede bloquear una capa haciendo click en el punto negro debajo del icono de candado. Cuando la capa esta bloqueada el punto negro se convierte en un candado. 7. Seleccione la herramienta Rectngulo y utilice el Panel Mezclador de color (Ventana > Mezclador de Color) configuraciones: Configure el Color de trazo en Sin color haciendo click en el cuadro Color de trazo y luego haciendo click en el botn Sin color en la ventana emergente Muestra de colores. Haga click en el cuadro de Color de relleno para abrir la ventana emergente Muestra de colores nuevamente y escriba #FF0000 en el cuadro de texto y haga click en Enter. Configure el Alfa del Color de relleno en 4O/o escribiendo 4O en el cuadro de texto Alfa o arrastrando el deslizador. para modificar las siguientes

8. Asegrese que la capa Vector rojo est seleccionada (recuerde el icono de lpiz) y dibuje un rectngulo en el escenario. Cambie a la herramienta Flecha (V) y haga click en el rectngulo para

rea nuevas tecnologas caixanova

pgina 93 de 234

Macromedia Flash MX

Ms dibujo

seleccionarlo. Utilice el panel Informacin para configurar el Ancho y la Altura en 193 y 253 respectivamente. 9. Mantenga el rectngulo seleccionado y duplique el rectngulo eligiendo Edicin > Duplicar del Men Principal. El nuevo rectngulo quedar seleccionado. Mantenga el rectngulo seleccionado y utilice la herramienta Flecha (V) para desplazar el rectngulo de modo que no quede solapado con el primer rectngulo. Tenga cuidado de no superponer los rectngulos, ya que, al estar en la misma capa, pueden perforarse unos a otros. 10. Repita el paso 8 para crear un tercer rectngulo.

Figura 5.6.
La primer forma vectorial roja adaptada a la imagen de la guia.

A continuacin, cambie la forma de cada uno de estos rectngulos mediante la herramienta Flecha, utilizando la imagen en la capa Gua vectorial como una gua. 11. Cuando termine de crear la primera forma, haga click sobre la forma para seleccionarla. Luego elija Modificar > Agrupar desde el Men Principal para agruparla. Desplace la forma agrupada a un lado del escenario. 12. Seleccione uno de los tres rectngulos y colquelo directamente sobre la imagen de la capa Gua vectorial. Haga click afuera del rectngulo para deseleccionarlo. Para modificar este primer rectngulo, utilice la herramienta Flecha para crear una curva en el lado derecho de este mismo hasta que la curva sea idntica a la curva 1 de la capa gua (vase figura 5.6.). 13. Coloque el segundo rectngulo sobre la imagen en la capa Gua

rea nuevas tecnologas caixanova

pgina 94 de 234

Macromedia Flash MX

Ms dibujo

vectorial y deseleccinelo (Edicin > Deseleccionar todo). Al desplazar la herramienta Flecha sobre la esquina inferior derecha del rectngulo, debera ver como la herramienta se convierte en una flecha con un ngulo debajo de ella. Esto significa que est sobre un punto angular. Cuando aparece el icono del ngulo, haga click sobre la esquina del rectngulo y arrstrela hacia la izquierda hasta que sea idntica a la posicin inferior de la curva 2. Haga lo mismo con la esquina superior del rectngulo. Una vez que tenga los dos puntos finales en su lugar, cambie la forma de la curva. Recuerde, si comete un error, presione Control+Z (Windows) o Comando+Z (Macintosh). Utilice estos comandos para deshacer cualquier error que cometa (tambin puede elegir Edicin > Deshacer escribir). 14. Agrupe (Modificar > Agrupar) la nueva forma y desplcela a un lado del Escenario. 15. Repita los pasos 11-13 para formar el ltimo rectngulo; imitando los puntos en las curvas. 16. Seleccione las tres formas ya sea arrastrando recuadro alrededor de ellos con la herramienta Flecha o haciendo Mayus-click sobre cada forma. Alinee las formas una sobre otra abriendo el panel Alinear (Ventana > Paneles > Alinear). Para alinear los lados izquierdos de las formas haga click en el primer botn del panel Alinear. Para alinear la parte inferior de las formas haga click en el ltimo botn de la primera fila del panel Alinear. 17. Mantenga las tres formas seleccionada y agrpelas (Modificar > Agrupar). 18. Duplique el grupo (Edicin > Duplicar). 19. Seleccione el segundo grupo de formas y elija Modificar > Transformar > Voltear horizontalmente. 20. Oculte las dems capas haciendo doble click en el icono

rea nuevas tecnologas caixanova

pgina 95 de 234

Macromedia Flash MX

Ms dibujo

Mostrar/Ocultar todas las capas sobre la capa superior. Haga click en el primer punto negro en la capa Gua vectorial para ocultarla. 21. Alinee sus nuevas formas con las dos esquinas inferiores del rectngulo blanco interior en la capa Contornos, debajo de la Barra de desplazamiento. Y cmbiele el tamao para que tomen la altura del espacio que le corresponde. 22. Para que las formas se ajusten automticamente a las esquinas arrastre las formas agrupadas desde la esquina que usted desea ajustar (por ejemplo, arrastre la forma superior derecha desde la esquina superior derecha). 23. Deseleccione la capa Gua vectorial y arrastre la capa Vector rojo que se ubica debajo de la barra de desplazamiento y las capas Contornos, para que queden en el nuevo orden de visualizacin. 24. Guarde su archivo como Jardineria2.fla en la carpeta misarchivos.

Utilizacin de la herramienta Texto Puede utilizar la herramienta Texto para configurar el tamao, tipo de letra, estilo, espacio, color y alineacin de su texto. Una de las caractersticas de Flash MX es su capacidad de clasificar el texto como Esttico, Dinmico o Introduccin de texto desde el panel de Propiedades de texto, que se ver posteriormente en la Leccin 9. A continuacin agregar el texto del titulo y el eslogan. Para agregar el texto de ttulo: 1. An debera tener abierto Jardineria2.fla. Seleccione la carpeta Contornos y agregue una nueva capa sobre esta. Nombre esta nueva capa Titulo. 2. Seleccione la capa Ttulo y seleccione la herramienta Texto. 3. Realice los siguientes cambios desde la barra de herramientas de

rea nuevas tecnologas caixanova

pgina 96 de 234

Macromedia Flash MX
propiedades de texto: Cambie la fuente a Arial o Helvetica.

Ms dibujo

Nota: Flash MX ahora le permite ver la fuente de manera dinmica mientras la selecciona. Cambie la Altura de fuente a 36 y el Color de texto (relleno) a Blanco. Cambie el Seguimiento a 1O. (El Seguimiento afla de espacio entre letras.) 4. Haga click en Escenario y teclee SobreJardinera con la primera letra en maysculas.

Figura 5.7.

5. Seleccione el texto que acaba de escribir con la herramienta Flecha y coloque el texto de manera que quede a un lado de las formas vectoriales rojas que acaba de crear. Cambie a la herramienta Alineamiento (Ventana > Alinear) 6. Anule la seleccin del texto que acaba de agregar.

Repita los pasos 2-4 pero cambie la Altura de fuente a 18 y tipee Todo sobre Jardineria y Paisajismo. Coloque en cursiva este texto. Si no anula la seleccin del texto que ya agreg antes de realizar este paso, solamente modificar la configuracin del texto JARDINERIA. 7. Alinee este nuevo texto bajo el texto JARDINERIA hacia la derecha haciendolo coincidir con el titulo anterior.

rea nuevas tecnologas caixanova

pgina 97 de 234

Macromedia Flash MX

Ms dibujo

Si no est seguro de la ubicacin, verifique el archivo en la figura 5.8.

Figura 5.8

8. Guarde su archivo como Jardineria3.fla en la carpeta misarchivos.

Importacin de ilustraciones De ninguna manera est limitado a las ilustraciones que pueda crear en Flash. Utilice su programa de dibujo favorito para crear sus propias ilustraciones o importe ilustraciones ya existentes para usarlas en su pelcula Flash. Flash admite la importacin de diferentes formatos dependiendo de si se ha instalado QuickTime 4 o alguna versin posterior. Incluso sin QuickTime 4, se pueden importar los siguientes formatos tanto en Windows como en un Macintosh: GIF, JPEG, PNG, Adobe Illustrator (EPS, Al - versin 6.0 o anterior), AutoCAD DXF (DXF), Freehand (FH7, FH8, FH9), FutureSplash Player (SPL)y archives Flash Player (SWF). En Windows adems se puede importar archives de Mapa de bits (BMP), Metarchivo mejorado de Windows (EMF) y Metarchivo Windows (WMF). Si se instala QuickTime 4, puede adems importar archives MacPaint (PNTG), Photoshop (PSD), imagen QuickTime (QTIF), pelcula QuickTime (MOV), Silicon Graphics (SAI), TGA (TGF) y TIFF (TIFF). Al importar un grfico vectorial, normalmente ser agrupado. Si este es el caso, an puede manipularlo en Flash. Slo desagrpelo (Modificar >

rea nuevas tecnologas caixanova

pgina 98 de 234

Macromedia Flash MX
Desagrupar) y modifquelo como ms le guste.

Ms dibujo

Al importar un grfico de trama, puede convertirlo a un grfico vectorial mediante el comando Trazar mapa de bits. Vaya a (Modificar > Trazar mapa de bits) y seleccione la configuracin en el Men desplegable. En el siguiente ejercicio vamos a importar un archivo de mapa de bits para acompaar al texto. Para importar una imagen desde Flash: 1. Asegrese que an tiene abierto Jardineria3.fla. 2. Genere una nueva carpeta con el nombre Fotos y coloque una nueva capa con el nombre de primula. 3. Elija Archivo > Importar del Men Principal. Se abre el cuadro de dilogo Importar. 4. Explore hasta encontrar la carpeta archivosCurso en la carpeta Leccion05 y seleccione primula.jpg. Haga click en Abrir (Windows). En Macintosh, haga click en Agregar para agregar el archivo a la lista Importar y haga click en Importar el archivo. 5. Utilice la herramienta Varita Mgica para separar el mapa de bits y recortar el rea blanca de la imagen. Y colquela detrs del texto, ordenando las capas para que respeten esta visualizacion. 6. Guarde el archivo como Jardineria4.fla en la carpeta misarchivos. En el siguiente ejercicio importara una imagen de mapa de bits para su utilizacin debajo de la barra de desplazamiento. Para importar una imagen de mapa de bits: 1. Asegrese de que an tiene abierto Jardineria4.fla. Cree una nueva capa dentro de la carpeta Fotos y nmbrela Copete. 2. Elija Archivo > Importar del Men Principal. Se abre el cuadro de dilogo Importar.

rea nuevas tecnologas caixanova

pgina 99 de 234

Macromedia Flash MX

Ms dibujo

3. Explore dentro de la carpeta Leccion05 y seleccione copete.jpg. 4. Desde Windows, haga click en Abrir. 5. En Macintosh, haga click en Agregar para agregar el archivo a la lista Importar y haga click en Importar para importar el archivo. 6. Use la herramienta Flecha para seleccionar el mapa de bits y arrastrarlo hacia el rea rectangular debajo del rectngulo en la capa de la barra de desplazamiento. Haga click en la herramienta escala en la seccin Opciones de la barra de herramientas para obtener los selectores de ajuste. Ajuste el mapa de bits hasta que encaje en el espacio rectangular de la barra de desplazamiento. 7. Guarde su archivo como Jardineria5.fla en la carpeta misarchivos.

Conversin de mapas de bits a vectores Uno de los problemas de incorporar mapa de bits a Flash es que pueden aumentar el tamao del archivo de manera considerable. Debido a que son preferiblemente grficos de trama que vectoriales, no se pueden editar de la misma manera que un grfico vectorial. Adicionalmente, los mapas de bits no se ajustan bien. Afortunadamente Flash le entrega la capacidad de convertir mapas de bits a grficos vectoriales mediante el comando Trazar mapa de bits (Modificar > Trazar mapa de bits). El cuadro de dilogo de Trazar mapa de bits proporciona una serie de configuraciones que se pueden cambiar cuando se rastrea un mapa de bits. Cada una de estas configuraciones tiene un impacto sobre la calidad de la imagen final (vase figura 5.9.). Umbral de colores: Cuando Flash convierte un mapa de bits a un vector, compara los pxeles adyacentes en el mapa de bits. Si la diferencia en los valores RGB (rojo, verde y azul) de los pxeles adyacentes es menor al umbral de colores, esos pxeles se consideran del mismo color. Por lo tanto, configurar un nmero de umbral bajo resulta en una mayor cantidad de colores y configurar un nmero de

rea nuevas tecnologas caixanova

pgina 100 de 234

Macromedia Flash MX
umbral alto resulta en una menor cantidad de colores.

Ms dibujo

rea mnima: Numero de pxeles circundantes para considerar al asignar un color a un pxel. Ajuste de la curva: Determina la suavidad de la curva que se dibuja. Umbral de esquina: Determina si se mantienen o suavizan los bordes.

Figura 5.9.
El cuadro de dilogo de Trazar el mapa de bits.

Antes de comenzar a convertir cada mapa de bits que vea en un vectorial, debe saber algunas cosas las imgenes complejas no son buenas candidatas para convertirlos en grficos vectoriales a menos que tenga planes de reducir el nmero de colores al aumentar el Umbral de colores. Esto le proporciona un efecto interesante. En el ejercicio a continuacin importar un grfico de mapa de bits y lo convertir en un grfico vectorial mediante el comando Trazar mapa de bits. El grfico vectorial resultante ser diferente del mapa de bits original, resultado que se espera lograr. Para importar un grfico de mapa de bits y convertirlo a un grfico vectorial: 1. Seleccione la carpeta de Fotos en jardineria5.fla. 2. Bloquee cada una de las capas y genere una capa nueva llamada Trazado. 3. Elija Archivo > Importar. Se abre el cuadro de dilogo Importar. 4. Explore dentro de la carpeta Leccion05 y seleccione trazado.gif.

rea nuevas tecnologas caixanova

pgina 101 de 234

Macromedia Flash MX
Desde Windows, haga click en Abrir.

Ms dibujo

En Macintosh, haga click en Agregar para agregar el archivo a la lista Importar y haga click en Importar para importar el archivo.

5. Con el mapa de bits trazado mapa de bits del Men Principal

seleccionado elija Modificar > Trazar

6. El cuadro de dilogo de Trazar mapa de bits debe estar abierto. 7. Configure el Umbral de colores a 4O, rea mnima a 2O, Encaje de curva muy suave y Umbral de esquina a Pocas esquinas. Luego haga click en Aceptar. Una vez completado el rastreo de mapa de bits, este se convertir en un grfico vectorial. Tendr la apariencia de un dibujo ms que de una fotografa. 8. El mapa de bits rastreado debe continuar seleccionado. Si no es as, seleccione el grfico rastreado completo mediante Editar > Seleccionar todo y entonces agrupe estos graficos utilizando la opcion Modificar > Agrupar, del men principal. 9. En el panel Informacin, configure los grficos vectoriales: Ancho (W): 120 Altura (H): 70 X: 26 V:300 No se preocupe si X o Y estn levemente equivocados. 10. Guarde su archivo como Jardineria6.fla en la carpeta misarchivos.

Tareas adicionales Abra un nuevo archivo, utilizando reglas y guas para controlar la ubicacin de objetos en el Escenario. Arrastre uno de manera horizontal y

rea nuevas tecnologas caixanova

pgina 102 de 234

Macromedia Flash MX

Ms dibujo

una gua vertical en el escenario. Asegrese que Ajustar a guas est activado. Dibuje un rectngulo en el Escenario y agrpelo. Intente arrastrar el rectngulo hacia las guas primero por esquina superior izquierda y nuevamente haciendo click en el centro y arrastrar. Observe como el rectngulo encaja con las guas dependiendo de cmo lo arrastra. Cree una nueva capa e importe el archivo primula.jpg. Practique el uso del comando Trazar mapa de bits para convertir el mapa de bits a un grfico vectorial. Intente cambiar todas las configuraciones para observar los diversos efectos que puede obtener.

rea nuevas tecnologas caixanova

pgina 103 de 234

Macromedia Flash MX

Ms dibujo

Notas del estudiante

rea nuevas tecnologas caixanova

pgina 104 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Leccin 6: Smbolos, la biblioteca Macromedia Flash y el explorador de pelculas.


Objetivos Al terminar esta seccin habr entendido: Los smbolos y sus utilidades. Las diferencias entre los tres tipos de smbolos. Cmo utilizar la biblioteca Flash. Que es el Explorador de pelculas y cmo usarlo. Y habr aprendido: Cmo crear y volver a usar smbolos. Cmo importar smbolos de otras bibliotecas. Cmo configurar una biblioteca compartida.

Qu es un smbolo? Es muy comn que mientras est trabajando en Flash necesite volver a usar objetos que ha creado en el Escenario. Cada objeto que vaya creando aumentar el tamao de la pelcula terminada. Y si pudiera volver a usar los objetos? Puede hacerlo con Flash. Puede convertir en smbolo cualquier objeto que necesite usar ms de una vez. Los smbolos estn en la Biblioteca Flash. Puede arrastrar varias copias de un smbolo desde la biblioteca hasta el Escenario. Cada una de las copias de un smbolo en el Escenario es una instancia del smbolo. Puede agregar mltiples instancias de smbolos a su pelcula, sin que aumente considerablemente el tamao del producto final. Flash slo necesita registrar las propiedades de la nueva instancia. La descripcin de la instancia

rea nuevas tecnologas caixanova

pgina 105 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

ya existe en la biblioteca. Cuando cambia una instancia, en la biblioteca, se actualizan todas las instancias en el Escenario. Las instancias de smbolos pueden tener colores, tamaos y comportamientos diferentes, u otras caractersticas ms. Existen tres tipos de smbolos en Flash: grficos, botones y clips de pelculas. La clave para trabajar con xito en Flash, es entender las diferencias entre estos smbolos. Los smbolos grficos se usan para imgenes estticas y animaciones simples. Los smbolos grficos operan de manera sincronizada con la Lnea de Tiempo de la pelcula principal. Qu significa esto? Cada fotograma de un smbolo grfico debe corresponder a un fotograma en la Lnea de Tiempo. Esto significa que si su Lnea de Tiempo principal tiene 10 fotogramas y su smbolo grafico tiene 15 fotogramas, slo se reproducirn los primeros 10 fotogramas del smbolo grfico. Si su smbolo grfico tiene menos fotogramas que la Lnea de Tiempo principal, el smbolo grfico regresar al principio y reproducir todos los fotogramas que pueda antes que la Lnea de Tiempo se acabe. Los controles y los sonidos interactivos no funcionarn en una secuencia de animacin de smbolo grfico. Los clips de pelculas son ms flexibles que los smbolos grficos. Se reproducen de manera independiente de la Lnea de Tiempo principal. De hecho, un clip de pelculas es como una pelcula dentro de otra. Puede poner acciones, sonidos y botones dentro de clips de pelculas. Los clips de pelculas tambin se pueden asignar a instancias de pelculas, con el fin de referirse a ellos en ActionScript. Los smbolos de botones se usan para crear botones. La Lnea de Tiempo para un botn es un poco diferente de la Lnea de Tiempo regular de Flash. Un botn tiene cuatro estados: Reposo, Sobre, Presionado y Zona Activa. Cada uno est definido dentro de un fotograma del mismo nombre.

rea nuevas tecnologas caixanova

pgina 106 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Cuando aparece en la pantalla el botn se presenta en Reposo. El botn Sobre aparece cuando mueve el cursor por sobre el botn en el Escenario. Cuando hace click en un botn, aparece en estado Presionado. El estado Zona Activa no es visible en su pelcula, pero este define el rea activa de un botn. El rea activa puede ser mayor o menor que el botn visible e incluso puede tener una forma diferente. Los smbolos de botn pueden tener smbolos grficos, clips de pelculas y sonidos en los primeros tres fotogramas. En el siguiente ejercicio, transformar algunos de los grficos que ha creado en la Leccin 5 en smbolos. Para convertir un grfico que ya existe en un smbolo: 1. Abra jardineria6.fla de su carpeta misarchivos (el ltimo archivo con el que trabaj en la Leccin 5). 2. Seleccione la capa Vector Rojo y asegrese que est desbloqueada. Use la herramienta Flecha para seleccionar la forma vectorial agrupada de arriba. Transforme el grupo que seleccion en un smbolo, eligiendo Insertar > Convertir a smbolo (F8) del Men principal. 3. Se abre el cuadro de dialogo Propiedades de smbolo (vase figura 6.1).
Figura 6.1.
El cuadro de en dilogo Convertir smbolo.

rea nuevas tecnologas caixanova

pgina 107 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

4. Escriba Vector rojo en el bloque de texto Nombre del cuadro de dilogo Convertir en smbolo. Luego establezca el Comportamiento en Grfico y haga click en Aceptar. 5. En este momento debera haber una instancia del nuevo vector rojo en el Escenario, que reemplace el grfico agrupado que seleccion para convertir en smbolo. Sabr si es un smbolo grfico porque aparece una pequea + en el centro. 6. Oculte todas las capas salvo la capa Fotos. Para hacer esto de manera rpida, haga click en Mostrar/Ocultar todas las capas (el ojo abierto sobre la pila de capas) y luego haga click en la X de la capa Fotos para que no siga oculta. 7. Con la herramienta Flecha, seleccione el grfico Primula agrupado que cre en la Leccin 5. Elija Insertar > Convertir a smbolo (F8) del Men principal. Cuando se abre el cuadro de dilogo Propiedades de smbolo, configure su nombre como Grfico primula y otrguele un comportamiento grfico. Luego haga click en Aceptar. 8. Utilice la herramienta Flecha para seleccionar el mapa de bits copete.gif que import en la Leccin 5 y convirtalo a smbolo grfico con el nombre de Copete. 9. Oculte la capa Fotos y luego deje la capa de la barra de desplazamiento sin bloquear y sin ocultar. Use la herramienta de Flecha para hacer doble click sobre el rectngulo blanco de la capa de la barra de desplazamiento para seleccionarla. Convirtala en un smbolo grfico con el nombre Barra de desplazamiento. 10. Deje la capa de Ttulo sin bloquear y sin ocultar. Haga click sobre el texto Sobrejardinera para seleccionarlo. Haga Mayus-Click en el texto Todo sobre Jardinera y Paisajismo para seleccionarlo. Convierta todo el texto seleccionado a smbolos grficos con el nombre Jardinera titulos. 11. Guarde su archivo como jardineria7.fla en la carpeta misarchivos.

rea nuevas tecnologas caixanova

pgina 108 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

12. No es necesario que ya tenga algo en el Escenario para crear un smbolo. Puede crear un nuevo smbolo y luego introducir el arte a este. En el prximo ejercicio crear un nuevo smbolo. Un botn con el que volver a trabajar en la Leccin 7. Para crear un smbolo nuevo: 1. Asegrese que sigue en jardineria7.fla y elija Insertar > nuevo smbolo. Adems, puede utilizar alt+F8 (Windows) o Comando+F8 (Macintosh). Se abre el cuadro de dilogo Crear un nuevo smbolo. 2. Nombre el nuevo smbolo Boton flor al nuevo smbolo y entrguele comportamiento de Botn. Luego haga click en Aceptar. Flash cambia automticamente al modo de edicin de smbolos (vase Figura 6.2).

Figura 6.2.
El botn Lnea de Tiempo est en modo de edicion de smbolo de boton.

3. Seleccione la herramienta valo para crear un valo con las configuraciones: Color de trazo: #F10909 Color de relleno: Sin color Ancho (W): 37 Altura (H): 25

siguientes

4. Luego seleccione el contorno del valo que acaba de dibujar y use el panel Alinear para centrarlo en el Escenario en forma tanto horizontal como vertical.

rea nuevas tecnologas caixanova

pgina 109 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

5. Seleccione la herramienta Bote de pintura. En el panel de propiedades, seleccione el degradado rojo brillante y negro. Este degradado es una combinacin predeterminada. 6. Haga click dentro del valo, con el cursor hacia arriba a la derecha del punto del central. Esto da el efecto de la luz que entra a la escena desde la parte superior derecha. a) El botn se vera mejor si tuviera un cierto efecto. Puede crear este efecto si agrega otro degradado a la nueva capa. Cambie el nombre a la primera capa a Capa Base. Agregue una capa nueva sobre la capa Base y pngale Degradado Superior. b) Seleccione el contorno y el relleno en la capa Base y elija Edicion > Copiar del Men principal, o como estamos acostumbrados a copiar: Ctrol+C c) Seleccione la capa Degradado superior. Desde el Men principal, elija Edicion > Pegar in situ. Esta opcin nos permite copiar y pegar en el mismo lugar donde estaba colocado el objeto en otra capa. d) Nos sirve en muchas ocasiones para poder sacar un objeto de una capa y colocarlo en otra. e) Seleccione el relleno o el valo en la capa Degradado Superior. Seleccione el degradado verde en el Panel de muestras o en el Panel de propiedades para aplicar el degradado al valo. f) Ahora debe estar viendo su botn en estado hacia Reposo. An no es muy emocionante, pero agregar algunos estados adicionales, incluyendo uno animado, en la Leccin 7. Vuelva a seleccionar el fotograma colocado en la capa base y cmbielo de tamao con la herramienta de escalar del panel de herramientas. 7. Regrese a la pelcula principal con alguno de los siguientes pasos: Elija Edicion > Editar documento del Men principal. Presione Control+E (Windows) o Comando+E (Macintosh).

rea nuevas tecnologas caixanova

pgina 110 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Haga click en el rtulo Escena 1 de la esquina superior izquierda de la Lnea de Tiempo (vase la figura 6.3).

Figura 6.3.
Haga click en el rotulo Escena 1 para regresar a la Lnea de Tiempo principal.

8. Guarde su archivo como jardineria8.fla.

Uso de la biblioteca Todos los smbolos que acaba de crear y cualquier mapa de bits o sonidos se almacenan en la biblioteca de la pelcula (vase Figura 6.4.). Puede llevar cualquier instancia de la biblioteca al Escenario.

Figura 6.4.
La ventana Biblioteca.

rea nuevas tecnologas caixanova

pgina 111 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Al costado derecho de la ventana de la biblioteca encontrar tres botones: Orden de clasificacin: Estado ancho y Estado angosto. Flash abre la biblioteca en estado Angosto por defecto. El estado Ancho se apodera de un espacio mayor de la pantalla, como podr apreciar en la figura 6.5, pero es til para ver la informacin sobre los smbolos de la biblioteca. Adems puede expandir la ventana de la biblioteca haciendo click y arrastrando uno de los bordes (en Windows) o la esquina inferior derecha (en Windows y/o Macintosh).

Figura 6.5.
La ventana de la biblioteca est en estado Ancho.

Con la ventana de la biblioteca expandida, puede ver las otras columnas (estas columnas tambin se pueden ver en estado Angosto). Para esto slo debe desplazar el cursor de manera horizontal para verlas. Tambin puede cambiar el tamao de las columnas al poner el cursor entre los nombres de las columnas y arrastrando. Las columnas de la biblioteca son las siguientes:

rea nuevas tecnologas caixanova

pgina 112 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Nombre: Esta columna muestra el nombre que entreg a cada smbolo que cre. Tambin muestra el nombre de archivo de los archivos importados, tales como los de sonidos y mapas de bits. La columna Nombre se ordena alfabticamente. Para revertir el orden de clasificacin, haga click en el botn Orden de clasificacin, que esta hacia la derecha de la ventana de la biblioteca. Tipo: Le informa si el elemento es un botn, un mapa de bits, un grafico, un clip de pelculas o sonido. Para agrupar elementos en la biblioteca por clase, haga click en el encabezado de dicha columna. Numero de usos: Registra la cantidad de veces en que usa cada smbolo. Cuando trabaja en proyectos grandes, es agradable saber si todos los componentes de su biblioteca se usaron en la pelcula final. Vinculacin: Indica si un smbolo se ha compartido con otra pelcula o si se ha importado desde otra pelcula. Explicaremos esto en detalle ms adelante en la Leccin. Fecha modificacin: Indica la ultima vez que se actualiz un smbolo o un archivo importado. Al fondo, en la parte inferior de la ventana de la biblioteca encontrar cuatro botones que puede usar para hacer ms eficaz su trabajo en la biblioteca. Estos botones son Smbolo nuevo, Carpeta nueva, Propiedades y la Papelera de reciclaje. Smbolo nuevo: Crea un smbolo nuevo desde la misma ventana de la biblioteca. Carpeta nueva: Crea carpetas en la biblioteca de manera tal que pueda organizar su contenido. Esto es muy importante cuando est trabajando con pelculas grandes y complejas. Para agregar un elemento a una carpeta, haga click en el elemento y arrstrelo hasta la carpeta. Propiedades: Cambie rpidamente el nombre o el comportamiento de un smbolo. Tambin puede editar el smbolo desde aqu. Borrar: Borre rpidamente un smbolo o smbolos de la biblioteca.

rea nuevas tecnologas caixanova

pgina 113 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Resalte el elemento que quiere borrar y haga click en la Papelera de reciclaje. El Men de opciones de biblioteca est en la esquina superior derecha de la ventana de la biblioteca (vase Figura 6.6.). Haga click en este Men para ver las opciones disponibles. Desde el Men opciones, puede administrar todos los aspectos de la biblioteca. Tambin puede ver un subconjunto de opciones si hace click con el botn derecho (Windows) o haciendo click con Control (Macintosh) en un elemento de la biblioteca. Ya conoce varias de estas opciones, tales como Smbolo nuevo y Carpeta nueva. Las opciones que aun no ha visto se describen en la siguiente lista: Nuevo Smbolo: Abre el cuadro de dialogo para seleccionar el tipo de smbolo nuevo que se va a crear. A partir de alli, abre una nueva ventana de escenario para editar el nuevo smbolo. Nueva Carpeta: Introduzca una nueva carpeta en la biblioteca para poder colocar o reubicar smbolos. Nueva Fuente: Crear un smbolo de fuente nueva. Ahora puede crear smbolos de fuente que se almacenen en una biblioteca compartida. Esto significa que ya no puede introducir una fuente de manera directa en su pelcula de Flash. Cambiar nombre: Cambiar el nombre de un smbolo. Mover a carpeta nueva: Cree una carpeta nueva y llevar el smbolo que resalt hasta ella. Duplicar: Duplicar el smbolo seleccionado. Borrar: Elimina el objeto de la biblioteca. Edicin: Abre el elemento de biblioteca para poder editarlo dentro del escenario de Flash. Editar con: Abre el mapa de bits o sonido seleccionado con una aplicacin externa. Si tiene Fireworks instalado en su mquina, Flash ejecutar este programa para editar el mapa de bit. Los cambios que se hagan con Fireworks no afectan el mapa de bits

rea nuevas tecnologas caixanova

pgina 114 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

original. Los cambios slo aparecen dentro de Flash. Para editar sonido, aparece un cuadro de dialogo, lo que permite escoger un editor de sonido. Propiedades: Aqu se muestran las propiedades del elemento de biblioteca que tengamos seleccionado en ese momento. Vinculacin: Se usa cuando est usando Bibliotecas compartidas. Este tema se aborda con mayor detalle en la seccin Bibliotecas compartidas. Definicin de componentes: Definir parmetros para transformar a clips inteligentes. Se habla de ellos en la Leccin 7. Seleccionar elementos no utilizados: Seleccione cualquier smbolo, sonido o mapa de bits que no est usando actualmente en la pelcula. Actualizar: Si ha actualizado un mapa de bits o sonidos en un editor externo, tal como Fireworks, puede elegir actualizar el elemento de la biblioteca en vez de volver a importarlo. Si elige la opcin Editar con para hacer un cambio en el arte, no tiene que actualizarla.

Figura 6.6.
El Men de Opciones de Biblioteca.

rea nuevas tecnologas caixanova

pgina 115 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Reproducir: Reproduzca la animacin en el smbolo que seleccion. Expandir carpeta: Ample una carpeta para poder ver todos sus contenidos. Contraer carpeta: Cierre una carpeta que ha expandido. Expandir todas las carpetas: Ample todas las carpetas de la biblioteca. Cerrar todas las carpetas: Cierre todas las carpetas de la biblioteca. Propiedades de Biblioteca compartida: Asigne una direccin URL a una biblioteca compartida. Obtendr ms informacin sobre este tema ms adelante. Mantener el Nmero de uso actualizado: Si quiere que su cantidad de usos se actualice de manera continua, seleccione esta opcin. Actualizar Nmero de usos ahora: Si no seleccion Mantener el nmero de uso actualizado, puede actualizar este nmero manualmente al seleccionar esta opcin. Ayuda: Abre una ventana de Explorador con el manual de ayuda de Flash dentro de la opcion de Bibilioteca. Maximizar Panel: Maximiza el panel de biblioteca. Cerrar Panel: Cierra el Panel.

Con el siguiente ejercicio aprender a abrir la biblioteca y seleccionar un smbolo. Luego aprender a usar algunos botones y opciones disponibles en el Men Biblioteca que le facilitarn el trabajo. Para usar la biblioteca: Debera seguir en el archivo jardineria8.fla en la carpeta misarchivos. Si no es as, abra el archivo. 1. Abra la ventana de la biblioteca seleccionando Ventana > Biblioteca o presionando Control+L (Windows) o Comando+L (Macintosh). Aparece la ventana de la biblioteca, como se muestra en la

rea nuevas tecnologas caixanova

pgina 116 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

figura 6.7. El nombre de su actual pelcula Flash debera aparecer en la parte superior de la ventana de biblioteca. Recuerde esto, ya que podr abrir bibliotecas de otras pelculas y es importante saber cual est usando.

Figura 6.7.
La ventana de la biblioteca para el archivo jardineria8.fla.

2. Seleccione el smbolo del Botn flor que aparece en la columna de los Nombres de la ventana Biblioteca. Si no lo ve, es posible que necesite desplazarse por la biblioteca usando la barra de desplazamiento del costado derecho de la ventana. Cuando seleccione el smbolo, aparecer una representacin grfica de este en la ventana Biblioteca 3. Expanda la ventana de la biblioteca haciendo click en Estado Ancho en el lado derecho de la ventana. Desde este momento usted debera poder ver las columnas de Tipo, Nmero de uso y Modificacin de fecha, adems de la columna de Nombre. 4. Ordene los smbolos por clase haciendo click en el encabezado de la

rea nuevas tecnologas caixanova

pgina 117 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

columna Clase. Para revertir el orden de clasificacin, haga click en el botn Orden de clasificacin, que est hacia la derecha de la ventana Biblioteca. 5. Al hacer click en el nombre de la columna adecuado, ordenar los contenidos de la biblioteca para que los nombres aparezcan en orden alfabtico. Si es necesario use el botn clasificacin. El smbolo grfico de Vector Rojo debe aparecer ltimo en la lista. Es posible que deba desplazarse por la ventana de biblioteca para verlo. 6. Seleccione el mapa de bits curvas.jpg de la biblioteca y brrelo haciendo click en Eliminar al fondo de la ventana Biblioteca. Cuando se abre un cuadro de dialogo preguntando si quiere borrar el elemento que seleccion, haga click en Eliminar. Nota: Ya no necesita el mapa de bits curvas porque ya realizo el grfico vectorial en la Leccin 5. No borre el mapa de bits primula.jpg!!!! Debido a que el mapa de bits sigue intacto dentro del smbolo, Flash an necesita referirse a l. Asegrese de no borrar nada que no quiera borrar realmente, porque no puede deshacerlo. 7. Elija Opciones > Mantener numero de uso actualizado desde el Men Biblioteca. La columna de Nmero de uso ya est actualizada. Todo, excepto el botn flor de agua debera tener un nmero 1 a su lado. 8. Regrese la ventana Biblioteca a su tamao predeterminado haciendo click en Estado angosto. 9. Deje la ventana Biblioteca abierta para que pueda usarla durante los prximos ejercicios. Para organizar la biblioteca: Varias de sus pelculas Flash contendrn muchos smbolos. Cuando esto ocurre, puede ser difcil recordar para que fuera cada uno. Para evitar

rea nuevas tecnologas caixanova

pgina 118 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

este problema, debera usar carpetas en la biblioteca. De la misma manera en que puede crear carpetas en un sitio Web para organizar mejor sus archivos, puede crear carpetas en una biblioteca de Flash para organizar mejor sus smbolos, mapas de bits y sonido. Para crear una carpeta, slo debe hacer click en el botn Carpeta nueva, que se encuentra en la esquina inferior izquierda de la ventana Biblioteca. Tambin puede elegir Opciones > Nueva Carpeta para el Men Biblioteca. Despus que ha creado una carpeta, puede arrastrar smbolos, mapas de bits y sonidos hasta ella. Tmese un momento para organizar los smbolos de la biblioteca. Actualmente tiene varios smbolos en la biblioteca. Los smbolos que acaba de crear y el mapa de bits que import. En un momento traer smbolos de otras bibliotecas, as que es hora que cree algunas carpetas para que se mantenga organizado.

Para organizar la biblioteca: 1. Debe seguir en jardineria8.fla. Si no es as, abra el archivo ahora. 2. Abra la biblioteca (Ventana >Biblioteca) si no est abierta. 3. Haga click en Nueva Carpeta, botn localizado en la esquina inferior izquierda de la ventana Biblioteca. Aparecer una nueva carpeta en la ventana Biblioteca, con un nombre que se puede editar. 4. Escriba Grficos de fondo en el espacio en blanco y presione Entrar (Windows) o Regresar (Macintosh). La carpeta se ordena de manera automtica por alfabeto, con el resto de los contenidos de la biblioteca. 5. Crear otra carpeta nueva con el nombre Grficos de encabezado. 6. Seleccione el mapa de bits primula.jpg en la biblioteca y arrstrelo hasta la carpeta Grficos de fondo. La carpeta Grficos de fondo se abre y el mapa de bits primula.jpg queda dentro de la carpeta. 7. Cierre la carpeta haciendo doble click en ella.

rea nuevas tecnologas caixanova

pgina 119 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

8. Arrastre el smbolo del Vector Rojo a la carpeta Grficos de fondo y cierre la carpeta haciendo doble click en ella. 9. Guarde su archivo como jardineria9.fla. Mantenga la biblioteca abierta porque la va a usar en un momento.

Abrir la biblioteca No est limitado a usar la biblioteca interna de una pelcula de Flash. Puede abrir otras bibliotecas de pelculas Flash usando el comando Abrir como biblioteca (Archivo > Abrir come biblioteca). Puede arrastrar elementos de una biblioteca a otra, o puede llevar elementos al Escenario. Para usar el comando Abrir como Biblioteca: 1. Debe seguir en jardineria9.fla. De lo contrario, abra el archivo ahora. 2. Desde el Men principal, elija Archivo > Abrir como biblioteca. Cuando aparece el cuadro de dilogo Abrir como biblioteca, vaya a la carpeta de su disco/ Archivos de Programas/ Macromedia/ FlashMX/ Samples/fla y seleccione el archivo Movement-keys.fla. Haga click en Abrir. La biblioteca de Movement-keys.fla est abierta. Nota: Si no ha movido su ventana Biblioteca original, la ventana nueva abrir debajo de la biblioteca de nuestro archivo. Observe que la biblioteca que recientemente abri se ve atenuada. Esto se debe a que le est indicando que no es la biblioteca del archivo que est editando. 3. Seleccione el smbolo beetle de la nueva biblioteca y arrstrelo dentro de la Biblioteca jardineria9.fla. Recuerde verificar el nombre de la biblioteca antes de comenzar a arrastrar. El smbolo beetle debera aparecer dentro de la biblioteca de jardineria9.fla. 4. Cierre la nueva ventana de la biblioteca Movement-keys.fla desde las

rea nuevas tecnologas caixanova

pgina 120 de 234

Macromedia Flash MX
opciones de ese panel.

Smbolos, la biblioteca y el navegador

5. Guarde su archivo como jardineria10.fla y cirrela. En el prximo ejercicio abrir esta pelcula como biblioteca. No puede hacer esto si el archivo ya est abierto.

Para usar una biblioteca compartida: Flash MX puede hacer que varias pelculas de Flash usen smbolos de la misma biblioteca, lo que permite mantener reducido el tamao de sus archivos, ya que almacena componentes tales como sonidos y fuentes fuera de la pelcula de Flash principal. Lo bonito de las bibliotecas con smbolos compartidos es que los equipos pueden compartir conjuntos todos los grficos necesarios en varias pelculas. Cualquier cambio que se quiera hacer en un smbolo, se puede hacer en una Biblioteca compartida. Despus que se ha publicado la Biblioteca compartida, cualquier otra pelcula que use la biblioteca se actualice automticamente. Los smbolos compartidos slo necesitan de una descarga y se pueden volver a usar en cualquier nmero de archivos que se refieran al smbolo compartido. Esto reduce de manera sustancial los tiempos de descarga y lleva a una experiencia visual ms rpida. Puede incluir smbolos de fuentes, botones, grficos, clips de pelculas y sonidos en la biblioteca compartida, hasta videos. Puede usar la biblioteca de cualquier pelcula de Flash como biblioteca compartida. Sin embargo, antes de compartir cualquier smbolo de biblioteca este debe recibir un identificador. Una serie nica de caracteres y/o nmeros que le asigne a cada smbolo de la biblioteca. No incluya espacios en el identificador. Para asignar un identificador a un smbolo de biblioteca, seleccione el smbolo de la biblioteca que quiera compartir y haga click con el botn derecho (Windows) o haga click con Control (Macintosh), o haga click en el botn Opciones de biblioteca. Desde el submen, seleccione Vinculacin. En el cuadro de dilogo Propiedades de

rea nuevas tecnologas caixanova

pgina 121 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

vinculacin, seleccione Exportar este smbolo. Introduzca una serie identificadora en el cuadro de texto. Existen tres maneras de agregar un smbolo desde una biblioteca compartida a su actual archivo. Puede abrir la biblioteca compartida (Archivo > Abrir como biblioteca compartida) y arrastre los smbolos desde la biblioteca compartida hasta la biblioteca de su actual pelcula. Asimismo, puede arrastrar smbolos desde la biblioteca compartida al escenario de su pelcula actual. Con el tercer mtodo, puede crear un smbolo vaco en su actual biblioteca y unir el smbolo a otro que ya exista en una biblioteca compartida. Si se van a hacer cambios al smbolo con vnculo en la biblioteca compartida, esta debe volver a actualizarse. Los cambios no se vern reflejados en los archivos con vnculos de la pelcula FLA, pero s aparecern en los archivos SWF. Las Propiedades de biblioteca compartida se fijan dentro del archivo Flash que est guardando para usar como biblioteca compartida. Esta Configuracin es opcional. Fija el camino predeterminado para la direccin URL que hace referencia a la biblioteca compartida. Mantenga sus bibliotecas compartidas pequeas. Si se presenta algn problema al cargar un smbolo desde un archivo compartido, su pelcula no se reproducir. El armado de flores de jardinera es muy importante para marcar el sitio. Debe asegurarse que si alguna vez cambia, cambie en toda en todas las pelculas en las que se usa. En el siguiente ejercicio llevar el arreglo de primulas a una biblioteca compartida y crear un vnculo. Para mover el logo jardinera a la biblioteca compartida: 1. Cree una nueva pelcula de Flash en blanco (Archivo > Nuevo). Guarde la pelcula en su carpeta misarchivos como compartida.fla. Asegrese que la biblioteca est abierta (Ventana >Biblioteca). 2. Abra jardineria10.fla como biblioteca seleccionando Archivo > Abrir como biblioteca.

rea nuevas tecnologas caixanova

pgina 122 de 234

Macromedia Flash MX
La biblioteca de

Smbolos, la biblioteca y el navegador


jardineria10.fla debera estar abierta.

Recuerde que podra abrirse directamente sobre la actual biblioteca de la pelcula, as que va a tener que moverla. 3. Seleccione el grfico primula en la biblioteca jardineria10.fla y arrstrelo a la biblioteca compartida.fla. Luego cierre la biblioteca jardineria10.fla. 4. Seleccione el smbolo grfico primula en la biblioteca compartida.fla y elija Opciones > Vinculacin desde el Men Opciones de biblioteca. Se abre el cuadro de dilogo Propiedades de vinculacin de smbolo. 5. En el cuadro de dilogo Propiedades de vinculacin, fije la vinculacin en Exportar este smbolo para compartir en tiempo de ejecucin y escriba Jardineria en el campo de identificador. Luego coloque dentro de URL la ruta donde quedar el archivo swf. que armar en el proximo punto. Luego haga click en Aceptar. 6. Antes que pueda usar una biblioteca compartida, el archivo de biblioteca debe ser creado como archivo swf, un reproductor de pelculas de Flash. Desde el Men principal, elija Control > Probar pelicula para crear un archivo swf. y llvelo al modo Pelcula de prueba. Para volver a la pelcula, elegir Archivo > Cerrar. 7. Guarde y cierre compartida.fla en la carpeta misarchivos. Ahora que tiene una biblioteca compartida para trabajar, debe volver a jardineria10.fla. Eso es lo que har a continuacin. Para crear un vnculo a un smbolo en una biblioteca compartida: 1. Abra jardineria10.fla de la carpeta misarchivos. 2. Abra la biblioteca si no est abierta (Ventana >Biblioteca). 3. Seleccione el smbolo del grafico primula en la biblioteca y elija Opciones > vinculacin desde el Men Opciones de biblioteca. 4. Se abre el cuadro de dilogo Propiedades de vinculacin de smbolo. 5. Configure la vinculacin en Importar para compartir en tiempo de ejecucion, escriba compartida.swf en el espacio que queda debajo de

rea nuevas tecnologas caixanova

pgina 123 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

esta opcin y escriba Jardineria en el campo identificador. Luego haga click en Aceptar. 6. Elija Control > Probar pelcula para probar su pelcula y asegurarse que el smbolo vaya a ser exportado. Cuando la pelcula termine, cierre esta ventana para regresar al modo de creacin. 7. Guarde su archivo en la carpeta misarchivos como jardineria11.fla. Si decide cambiar el ramo de flores Jardineria, debe hacer el cambio en el archivo compartida.fla y volver a crear el archivo como swf.

Para crear una biblioteca permanente: Flash MX incorpora varias Bibliotecas comunes (Ventana >Bibliotecas comunes) preinstaladas: botones, botones avanzados, grficos, interacciones de aprendizaje, clips de pelculas y sonidos. Adems tambin puede agregar sus propias bibliotecas permanentes de smbolos a Flash MX. Para tener su propia biblioteca permanente, debe crear un archivo Flash con todos los smbolos que quiera tener en su biblioteca y guardarla en la carpeta Bibliotecas en la carpeta de aplicaciones de Flash de su disco duro. Su ubicacin coincide con Archivos de Programa/Macromedia/Flash MX.

Usar instancias de smbolos Cada instancia de un smbolo tiene sus propiedades nicas. Al usar los paneles Efecto y Transformacin o al elegir Modificar > Transformar del Men principal, puede cambiar el aspecto de las instancias individuales mientras que siguen siendo un smbolo. La mejor parte sobre esto es que puede cambiar la instancia original (que habita en la biblioteca) y afecta todas las instancias del Escenario. Puede cortar el vnculo entre una instancia y el smbolo original de la biblioteca separando la instancia del Escenario. Seleccione el smbolo del

rea nuevas tecnologas caixanova

pgina 124 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Escenario y elija Modificar > Separar desde el Men principal. Los cambios que haga al smbolo en la biblioteca ya no afectarn a la instancia que separe. Para agregar una instancia a un smbolo al escenario y transformarlo: 1. Debe seguir en jardineria11.fla. 2. Asegrese que la biblioteca est abierta y arrastre una nueva instancia al smbolo del grfico Vector Rojo de la carpeta Grficos de Fondo al Escenario. 3. Ahora que ha seleccionado la nueva instancia, elija Modificar > Transformar > Voltear horizontalmente desde el Men principal. a. Ponga la nueva instancia del smbolo del Vector Rojo en la esquina derecha superior del contorno interior del rectngulo. b. Recuerde arrastrar el smbolo hacia la esquina derecha superior para facilitar la alineacin. c. Elimine esta nueva instancia, vimos como podria colocar la cantidad de instancias que necesite y guarde el archivo como jardineria12.fla. d. Ahora, cuando haga un cambio al smbolo del Vector Rojo en la biblioteca, cambiar las dos instancias en el Escenario. Trabajar ms con instancias de smbolos en otras lecciones.

Presentamos el explorador de pelculas En las versiones anteriores de Flash, era difcil registrar la estructura de su pelcula Flash, especialmente cuando usaba smbolos ActionScripts u otros incorporados. El Explorador de pelculas dej esa confusin en el pasado. El Explorador de pelculas es una vista jerrquica de todo elemento que conforme la pelcula de Flash. Puede buscar, reemplazar fuentes y textos, puede encontrar todas las instancias de cualquier smbolo. Tambin puede copiar los contenidos del Explorador de pelculas como texto en el portapapeles o imprimir la Lista de Mostrar en el Explorador de pelculas.

rea nuevas tecnologas caixanova

pgina 125 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Figura 6.8.
La ventana Explorador de pelcula.

Puede abrir el Explorador de pelculas, si elige Ventana > Explorador de pelculas. La ventana de Explorador de pelcula, que se muestra en la figura 6.8, consiste en una lista de Mostrar (los contenidos de una pelcula) una fila de botones de filtro y una cuadro de texto de bsqueda. El camino para el elemento seleccionado se muestra en la barra pluma del fondo de la ventana. Al igual que muchas otras ventanas y paneles de Flash, la ventana del

Figura 6.9.
El cuadro de didlogo Configuration del Explorador de pellculas.

Explorador de pelculas tiene un botn de Opciones en la esquina superior derecha. Puede usar los botones de Filtro que estn en la parte superior de la ventana para elegir los elementos de la pelcula de Flash que podr ver en la Lista de Mostrar. Haga click en el botn para seleccionarlo. Cuando seleccione el botn, se ve como si estuviera presionado con un fondo

rea nuevas tecnologas caixanova

pgina 126 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

blanco. Los botones que no estn seleccionados parecen levantados y con un fondo plomo. Los botones de filtro son, de izquierda a derecha: Mostrar texto. Mostrar botones, clips de pelculas y grfico. Mostrar ActionScriptts. Mostrar video, sonidos y mapas de bits. Mostrar fotogramas y capas. Personalizar los elementos para mostrar. El botn para personalizar los elementos que se van a mostrar abre el cuadro de dilogo Configuracin de Explorador de pelculas que se muestra en la Figura 6.9, donde puede redefinir los elementos que aparecern en la lista de Mostrar para un filtro especfico. Por ejemplo, cuando selecciona los botones Mostrar, clip de pelculas y filtro de grficos, ver estos tres elementos en la Lista de Mostrar. Si realmente slo le interesa encontrar clips de pelculas, puede deseleccionar los botones y grficas en el cuadro de dilogo en la configuracin de Explorador de pelculas. Tambin puede elegir si muestra elementos de pelculas, definiciones de smbolos o ambos. El cuadro de texto de bsqueda le permite buscar elementos de pelculas por nombre. Para usar la funcin Buscar, escriba la serie que quiere buscar en el cuadro de texto. La funcin Buscar acta como filtro del contenido que muestra el Explorador de pelculas y comienza la bsqueda tan pronto usted comienza a escribir. Despus de encontrar un elemento, recuerde despejar el cuadro de texto de bsqueda para volver a mostrar todo el contenido. Puede buscar el nombre de un elemento, de una fuente, una serie ActionScript, un nmero de fotograma o el nombre de un objeto Macromedia Generator, o un par de valores. Para seleccionar un elemento en la Lista de Mostrar, primero haga click en un elemento. Para seleccionar ms de un elemento, use Controlclick (Windows) o Comando-click (Macintosh). Cuando hace doble click en un elemento ir directamente al modo de edicin en el escenario. Click

rea nuevas tecnologas caixanova

pgina 127 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

con el botn derecho (Windows) o Control-click (Macintosh) para abrir un Men de contexto que es igual al Men de Opciones emergente que se aprecia en la ilustracin 6.10. El Men emergente que est disponible al hacer click en el botn de Opciones incluye lo siguiente: Ir a ubicacin: Se dirige directamente a la capa, escena o fotograma seleccionado. Puede lograr lo mismo haciendo doble click en un elemento del rbol de navegacin. Ir a Definicin de smbolo: Esto slo se activa en la Seccin Elementos de la pelcula de la Lista de Muestras. Si selecciona Ir a definicin de smbolo ir directamente a la definicin de smbolo determinada, que indica todos los archivos asociados con ese smbolo. Esto slo funciona si elige Mostrar definiciones de smbolo. Seleccione las instancias de smbolo: Esto slo se activa en la seccin Definicin de smbolo de la Lista de Muestras. Al elegir Seleccionar las instancias del smbolo ir directamente a la escena de la seccin Elementos de Pelcula de la Lista de Mostrar que contiene las instancias de un smbolo. Buscar en Biblioteca: Abre la biblioteca de la pelcula si no est ya abierta y se dirige directamente al smbolo que seleccion. Cambiar nombre: Cambiar nombre a smbolo. Editar en contexto y Editar en ventana nueva: Editar un smbolo, ya sea en contexto o dentro de una ventana separada de edicin de smbolos. Mostrar definiciones de simbolos: Mostrar todos los elementos asociados con un smbolo.

rea nuevas tecnologas caixanova

pgina 128 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Figura 6.1O.
El Men de opciones emergente.

Mostrar todas las escenas Mostrar elementos de pelcula: Mostrar todos los elementos de una pelcula, organizada por escenas.

Copiar todo el texto en Portapapeles: Copiar texto en el Portapapeles.

Cortar, Copiar, Pegar: Funciones comunes. Cualquier modificacin que haga a un elemento en el Explorador de pelculas se refleja en el Escenario.

Expandir rama, Contraer rama y Contraer otras: Controlar el aspecto de la lista de mostrar. Puede expandir o colapsar una rama en el rbol de navegacin para un elemento.

Imprimir: Se imprimir el orden jerrquico que esta abierto, con todas las ramas expandidas. Una excelente manera de tener una vista general de su

estructura de archivos.

rea nuevas tecnologas caixanova

pgina 129 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

En el siguiente ejercicio comenzar a trabajar con el Explorador de pelculas.

Utilizacin del explorador de pelculas 1. Puede abrir el Explorador de pelculas, si elige Ventana > Explorador de pelculas. 2. Comience deseleccionando todos los botones de Filtros. Haga click en un botn para activarlo o desactivarlo. Se sabe que el filtro est activado cuando el botn aparece presionado y el fondo blanco. El Explorador de pelculas debera mostrar dos contextos disponibles para ver el rbol jerrquico: los elementos de la pelcula y las definiciones de smbolos. Los elementos de la pelcula se organizan en escenas. En este momento tiene una escena, as que el nico elemento es la Escena 1. 3. Ahora haga click en el primer botn de filtro, el filtro Mostrar texto. El lugar donde el texto est incorporado en un smbolo. En el smbolo Jardineria Ttulos. 4. Si no est expandido, haga click en el signo ms (+) que est cerca del smbolo Jardineria ttulos. Para colapsar una definicin de smbolo, haga click en el signo menos (-) que est cerca de la definicin expandida. 5. El smbolo de Jardineria Ttulos tiene dos elementos incluidos. Seleccione el elemento SobreJardineria. Ahora puede modificar el texto para este elemento en el Escenario usando lo paneles apropiados. 6. Si no hay paneles abiertos, haga click con el botn derecho (Windows) o Control-click (Macintosh) en el texto Jardineria del panel Explorador de pelculas del Men de contexto. Elija Paneles. Los paneles Caracteres Informacin deben estar abiertos.

rea nuevas tecnologas caixanova

pgina 130 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Puede editar las propiedades de un smbolo directamente desde el Explorador de pelculas. 7. Asegrese que ha seleccionado Todo sobre Jardinera y Paisajismo en el Explorador de pelculas. Cambie el tamao de la fuente en el panel Carcter. El texto del Escenario que corresponde al texto que seleccion en el Explorador de pelculas cambia de manera apropiada, aunque nunca haya seleccionado directamente el texto en el Escenario. 8. Active el filtro Mostrar fotogramas y capas en el Explorador de pelculas (el quinto botn). Ahora puede ver todos los elementos de la pelcula en las capas y fotogramas adecuados. 9. Debido a que en este momento solo esta trabajando con un fotograma, puede personalizar la muestra, de tal manera que los fotogramas no se vean. Haga click en el ltimo botn de filtro, el filtro Personalizar los elementos que va a mostrar. Se abre el cuadro de dilogo de configuracin del Explorador de pelculas. 10.Deseleccione Fotogramas y luego haga click en Aceptar. Ahora todo lo que ve son las capas y los elementos de la pelcula que seleccion. 11.Para seleccionar un elemento en el Escenario del Explorador de pelculas, haga doble click en el elemento. El elemento debera estar seleccionado en el Escenario. Nota: Si intenta seleccionar un elemento de una Biblioteca compartida para editarlo, recibir el mensaje "Este smbolo es importado de una Biblioteca compartida. Si edita este smbolo, ya no ser importado. Quiere continuar?" Si hace click en Si, el vnculo entre el smbolo y la Biblioteca compartida se destruir. A menos que realmente quiera romper este vnculo, haga click en No.

rea nuevas tecnologas caixanova

pgina 131 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

En el siguiente ejercicio usar la funcin Buscar para buscar los elementos de una pelcula por nombre. Para buscar un elemento usando el cuadro de texto de bsqueda: 1. Active todos los filtros (los primeros cinco botones) en el Explorador de pelculas. En el cuadro de texto de bsqueda, escriba Arial. Espere un segundo mientras la funcin Buscar registra los elementos que se ven actualmente en el Explorador de pelculas. Slo debera ver dos smbolos, Lnea de etiqueta y Jardineria Resorts, que usan la fuente Arial (vase figura 6.11).

Figura 6.11.
La ventana del de muestra

Explorador pelculas, bsqueda.

los resultados de la

rea nuevas tecnologas caixanova

pgina 132 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

2. Para despejar la bsqueda, borre el texto en el cuadro de texto de bsqueda. 3. Intente hacer una segunda bsqueda. Esta vez, escriba Rojo en el cuadro de texto de bsqueda. 4. Debera ver las dos instancias del grfico del Vector Rojo que cre. A continuacin, vea lo fcil que es usar el Explorador de pelculas para reemplazar cosas, en este caso una fuente. Para reemplazar todos los aspectos de una fuente en el Escenario o un smbolo con otra fuente: 1. Repita la bsqueda que hizo en el ejercicio previo escribiendo la palabra Arial en el cuadro de dilogo de bsqueda. 2. Seleccione el elemento de fuente en el smbolo de Lnea de etiqueta. Luego haga Control-click (Windows) o Comando-click (Macintosh) para seleccionar los elementos de la fuente en el smbolo de Jardineria Titulos. 3. Con los elementos seleccionados, use el panel Caracter para cambiar el tipo de fuentes. Despus que ha experimentado con esto, cambie el tipo de fuente a Arial.

Prcticas adicionales Seleccione una de las instancias del smbolo grfico del Vector Rojo en el Escenario. Use el panel Efectos para aplicar efectos de color a la instancia. Recuerde: cuando termine, volver dejar sus configuraciones originales. Practique usando el Men emergente de Opciones y los Mens de contexto para desplazarse por el rbol de navegacin. Use el Explorador de pelculas para encontrar smbolos en la biblioteca.

rea nuevas tecnologas caixanova

pgina 133 de 234

Macromedia Flash MX

Smbolos, la biblioteca y el navegador

Notas del estudiante

rea nuevas tecnologas caixanova

pgina 134 de 234

Macromedia Flash MX

Animacin

Leccin 7: Animacin
Objetivos

Al terminar esta seccin habr entendido: El valor de la animacin. El propsito de los fotogramas y fotogramas claves. La utilidad de la interpolacin. La funcin de los clips de pelcula.

Y habr aprendido: Cmo introducir fotogramas, fotogramas clave y fotogramas claves vacos. Cmo crear una animacin fotograma a fotograma. Cmo crear interpolaciones de movimiento y de forma. Cmo usar una gua de movimiento. Cmo crear un clip de pelcula. Cmo crear un botn animado.

Introduccin a la animacin La animacin es el proceso de crear un cambio a travs del tiempo. La animacin puede ser el movimiento de un objeto de un lugar a otro o el dimensionamiento de un tamao a otro. Puede ser un cambio de color o transparencia a travs del tiempo. El cambio tambin puede ser un "morfo" de una forma a otra. Cualquier cambio de posicin o apariencia que ocurre a travs del tiempo. En Macromedia Flash, la animacin se logra al cambiar el contenido de fotogramas sucesivos a travs del tiempo. Esto puede incluir todos los cambios antes mencionados y cualquiera combinacin de ellos. Flash prevee dos

rea nuevas tecnologas caixanova

pgina 135 de 234

Macromedia Flash MX

Animacin

mtodos para crear una secuencia animada en la Lnea de tiempo: fotograma a fotograma y animacin interpolada. La creacin de animacin Flash fotograma a fotograma se puede lograr mediante un cambio en el contenido de los fotogramas sucesivos. En la animacin fotograma a fotograma se crea una imagen en cada fotograma. En la animacin interpolada, se crea el primer y ltimo fotograma y permite que Flash cree los fotogramas intermedios. Debido a sus capacidades de interaccin, Flash tambin tiene la capacidad de lograr animacin dinmica controlada por ActionScript.

Animacin fotograma a fotograma La forma ms bsica de la animacin es aquella que se logra fotograma a fotograma. Debido a que la animacin fotograma a fotograma utiliza ilustraciones nicas en cada fotograma, es ideal para animaciones complejas tales como las expresiones faciales que requieren cambios sutiles. La animacin fotograma a fotograma tambin es til para realizar cambios dramticos en un corto perodo de tiempo, por ejemplo, en diapositivas. La animacin fotograma a fotograma tiene sus desventajas. El hecho de dibujar una imagen nica para cada fotograma de animacin puede ser tedioso y ocupar mucho tiempo. Adems todos estos dibujos significan crear un archivo de gran tamao. Cada vez que quiere hacer un cambio en Flash debe agregar un nuevo fotograma clave. Esto se logra fcilmente: simplemente seleccione el fotograma en donde desea agregar un fotograma clave y elija Insertar > Fotograma clave del Men principal. Tambin puede extender imgenes estticas de modo que sean visibles durante una animacin. Al agregar nuevos fotogramas (no fotogramas claves) a una capa permite extender el contenido del ltimo fotograma clave en todos los fotogramas nuevos. La figura 7.1. ilustra una Lnea de tiempo con numerosos fotogramas y fotogramas claves agregados a ella.

rea nuevas tecnologas caixanova

pgina 136 de 234

Macromedia Flash MX

Animacin

Esta Lnea de tiempo tiene numerosos fotogramas y fotogramas claves.

Figura 7.1.

En el prximo ejercicio se crear una animacin fotograma a fotograma simple. Para crear una animacin fotograma a fotograma: 1. Abra jardineria12.fla de la carpeta misarchivos (vase 7.2.). Si no tiene un archivo denominado jardineria12.fla en la carpeta misarchivos, puede abrir jardineria12.fla de la carpeta Leccion07 y guardarlo en la carpeta misarchivos.

Figura 7.2.
Abra jardineria12.fla de la carpeta misarchivos.

2. Bloquee los contornos y las capas del Vector Rojo. Ya ha utilizado estas

rea nuevas tecnologas caixanova

pgina 137 de 234

Macromedia Flash MX

Animacin

capas y no desea desplazarlas accidentalmente de modo que es mejor bloquearla. 3. Seleccione Fotograma 2 de la capa vector rojo e introduzca un fotograma, eligiendo Insertar > Fotograma del Men principal. Tambin puede introducir un fotograma presionando F5 en la tecla. Adems agregue un fotograma a Fotograma 2 de la capa Contornos. 4. Para ver cmo la incorporacin de estos fotogramas cambia su animacin, arrastre la cabeza lectora (el rectngulo rojo sobre la Lnea de tiempo) hacia atrs y hacia delante entre los fotogramas 1 y 2 (vase Figura 7.3.).
Figura 7.3.
La cabeza lectora es un rectngulo rojo sobre la Lnea de tiempo.

Observe que en Fotograma 2, slo los grficos de las capas vector rojo y Contornos aparecen. Esto se debe a que son las nicas capas en la Lnea de tiempo que contienen fotogramas en este momento. Tambin debe observar que el contenido de estas capas no ha sido alterado. 5. Seleccione fotograma 2 de la capa de barra de desplazamiento e introduzca un fotograma clave eligiendo Insertar > Fotograma clave. Un

rea nuevas tecnologas caixanova

pgina 138 de 234

Macromedia Flash MX

Animacin

fotograma clave es un punto en la Lnea de tiempo en donde el contenido de una capa cambia. Debe aparecer un punto negro en la Lnea de tiempo de Fotograma 2 de la capa de la barra de desplazamiento, tal como se indica en la Figura 7.4. Dicho punto representa un fotograma clave en la Lnea de tiempo en esta etapa.

Figura 7.4.

Un fotograma clave est representado de tiempo. por un punto negro en la Lnea

Un fotograma es un punto en la Lnea de tiempo en donde el contenido de una capa cambia. En el prximo paso, se realizan estos cambios. 6. Deseleccione todo en el Escenario eligiendo Edicin > Deseleccionar todo. Luego seleccione y deseleccione la instancia del smbolo de la Lnea de etiqueta del fotograma en Fotograma 2 de la capa Barra de Desplazamiento. 7. Seleccione la instancia del smbolo Contorno de la barra de desplazamiento que permanece en el Escenario y utilice el panel Informacin (Ventana > Info) para desplazarla a X: -25 y en Y: 85. Si arrastra la cabeza lectora hacia atrs y hacia delante entre los fotogramas 1 y 2, debe ver que el contenido en la capa de la barra de desplazamiento ha cambiado.

rea nuevas tecnologas caixanova

pgina 139 de 234

Macromedia Flash MX

Animacin

8. Introduzca un fotograma clave en Fotograma 2 de la capa del Prmula y utilice el panel Informacin para desplazar la instancia del grfico en el fotograma clave a X: 19 y en Y: 15. No olvide desplazar la cabeza reproductora hacia atrs y hacia delante despus de cada cambio para verificar el progreso de su animacin. 9. Introduzca otro fotograma clave a Fotograma 2 de la capa Titulo. Utilice el panel Transformacin (Ventana > Transformar) para reducir el tamao de la instancia del smbolo Jardinera a 50/o el tamao original. Puede activar la configuracin Limitar para asegurarse que la altura y el ancho de la instancia tengan una dimensin similar. Desplace la instancia del smbolo de Prmula en el fotograma hasta que quede en el lado derecho del logotipo, tal como se indica en la figura 7.5.

Figura 7.5.
Desplace smbolo hasta la instancia del jardinera resorts

que quede al lado

derecho del logotipo.

10. Cree una nueva capa y nmbrela grfico de fondo. En el orden de visualizacin colquela debajo de todo el resto de las capas. Coloque en el fotograma 2 de esta nueva capa un fotograma clave vaco.

rea nuevas tecnologas caixanova

pgina 140 de 234

Macromedia Flash MX

Animacin

Figura 7.6.

11. Importe el archivo tulipanes12grande.jpg de la carpeta archivosCurso en la leccion07. Colquelo centrado horizontal y verticalmente en relacin al escenario tal como se indica en la figura 7.6. 12. Es posible que observe que el contenido de la capa vector Rojo oculta parte del nuevo fondo. No se preocupe por esto; se puede arreglar en el prximo ejercicio. 13. Guarde su archivo como jardineria13.fla en la carpeta misarchivos.

Construccin de mscaras Puede utilizar una capa de mscara para crear un agujero para visualizar el contenido de uno o ms capas inferiores. Puede agrupar capas mltiples debajo una capa de mscara para crear efectos sofisticados. Tambin puede utilizar cualquier tipo de animacin salvo trazados de movimiento para hacer la pelcula de mscara. No puede hacer capas de mscara dentro de un botn. Para crear una mscara: 1. Asegrese que an tiene jardineria13.fla abierto y asegrese de que todas las capas estn bloqueadas por ahora; no quiere desorganizarlas en esta etapa ya que todo se encuentra exactamente donde usted

rea nuevas tecnologas caixanova

pgina 141 de 234

Macromedia Flash MX
quiere que estn.

Animacin

2. Seleccione la capa Vector Rojo y agregue una nueva capa sobre ella, eligiendo Insertar > Capa. Nombre esta nueva capa Mscara de encabezado. 3. Seleccione Fotograma 2 de la nueva capa Mscara de encabezado e introduzca un fotograma clave. Debido a que Fotograma 1 ya estaba vaco usted puede elegir Insertar > Fotograma clave para llevar esto acabo. Si hubiese habido algo en Fotograma 1, habr tenido que introducir un fotograma clave vaco en Fotograma 2 (Insertar > Fotograma clave vaco o F7). 4. Seleccione la herramienta Rectngulo desactive el Control de trazo (Sin color), configure el Color de relleno a degradado verde predeterminado, y asegrese que el radio del ngulo est configurado en O. Dibuje un rectngulo en Fotograma 2 de la capa Mscara de encabezado. 5. Cambie a la herramienta Flecha y seleccione el rectngulo que dibuj en el paso anterior. Utilice el panel de informacin (Ventana > Info) para modificar las siguientes configuraciones: Ancho (W): 58O Altura (H): 1OO X: 1 Y: 129 6. Haga clic con el botn derecho del ratn (Windows) o Control-Clic (Macintosh) en el nombre de la Mscara de encabezado y elija Mscara del Men contextual. Esto convierte la capa Mscara de encabezado en una Mscara para la capa debajo de ella (la capa Vector Rojo). Debe observar que

rea nuevas tecnologas caixanova

pgina 142 de 234

Macromedia Flash MX

Animacin

solamente el rea cubierta por el rectngulo en la capa Mscara de encabezado (la capa de Mscara) se puede visualizar en la capa Vector Rojo (la capa enmascarada). Flash bloquea automticamente la Mscara y las capas enmascaradas. 7. Agregue una nueva capa entre las capas Vector Rojo y Grfico de fondo. Nombre esta nueva capa Grfico de encabezado (vase figura 7.7.).

Figura 7.7.
Cree una nueva capa denominada Grfico de encabezado.

8. Guarde su archivo como jardineria14.fla.

Interpolacin de movimiento La interpolacin de movimiento es til para animar smbolos. Tal cmo sugiere su nombre, la interpolacin de movimiento se utiliza tpicamente para desplazar un elemento de un lugar a otro, pero puede hacer mucho ms que eso. Se puede utilizar la interpolacin de movimiento para dimensionar, girar e inclinar elementos. Tambin sirve para cambiar la configuracin de colores y la transparencia de un smbolo a travs del tiempo. Slo se puede aplicar la interpolacin de movimiento a un elemento de una capa, de modo que cuando es necesario interpolar elementos mltiples tambin se deben usar capas mltiples. Las propiedades de su interpolacin de movimiento se pueden controlar

rea nuevas tecnologas caixanova

pgina 143 de 234

Macromedia Flash MX
mediante el panel Propiedades (vase figura 7.8.)

Animacin

Figura 7.8.
El panel Propiedades.

Interpolacin: Especifique el tipo de interpolacin como Ninguno, Movimiento o Forma. Giro: Puede utilizar esta opcin para girar sus objetos sobre o alrededor de su eje o centro. Seleccione un tipo de rotacin del Men emergente y luego escriba el nmero de giros en el cuadro. La opcin Giro automtico gira su objeto en la direccin que requiere la menor cantidad de movimiento y tanto CW (en sentido de las manecillas del reloj, Clockwise) como CCW (en sentido contrario a las manecillas del reloj Counterclockwise) giran su objeto en la direccin indicada. En ambos casos, el giro se lleva a cabo el nmero de veces que usted especifique en el cuadro. Si escribe en el cuadro o elige Ninguno del Men, no se efecta un giro.

Orientacin al trazado: Cuando su objeto sigue una trayectoria, esta opcin obliga al objeto a volver a su centro o a su trayectoria. Aceleracin: Determine la velocidad de su animacin de comienzo a fin. Esto es til si desea crear el efecto de aceleracin o desacelerar. Si desea que su animacin comience lentamente y que luego aumente en velocidad, suba el deslizador de modo que comience a acelerar. Si desea una animacin que comienza a gran velocidad y que luego reduce de velocidad baje el deslizador de modo que la animacin comience a desacelerar. Si quiere que la velocidad de su animacin sea constante, deje el deslizador en nivel medio. Tambin puede introducir un nmero para el valor de Aceleracin (-100 a 100).

rea nuevas tecnologas caixanova

pgina 144 de 234

Macromedia Flash MX
Sincronizacin: Asegrese que su animacin

Animacin
realice un bucle

adecuadamente en la pelcula principal. Obligue la animacin a hacer bucle adecuadamente aun si la secuencia no se trata de un par mltiple de los fotogramas que el smbolo ocupa en la Lnea de tiempo de la pelcula principal. Esto es importante si su animacin est contenida en el smbolo del grfico. Ajuste: Hace que su objeto animado salte a un gua de movimiento a medida que usted lo desplaza por el Escenario (en el entorno de creacin). Al crear una interpolacin de movimiento, debe tener al menos dos fotogramas claves. El primer fotograma clave contiene el estado inicial del smbolo que se desea animar y el ltimo fotograma clave contiene el estado final de dicho smbolo. Para crear una interpolacin de movimiento, Flash interpreta el estado del smbolo en los fotogramas "intermedios". Si tiene un smbolo en la esquina superior derecha del Escenario en Fotograma 1 y en la esquina inferior izquierda del escenario en Fotograma 10, Flash genera las posiciones intermedias para Fotogramas 2 a 9. Ahora tiene una animacin fotograma a fotograma simple para las dos pantallas en su sitio. Es suficiente para un sitio simple, pero no piensa que se vera mejor con algunas transiciones (objetos en movimiento, desapareciendo y apareciendo progresivamente y todo aquello que hace a un sitio interesante) Eso es exactamente lo que puede agregar en los dos prximos ejercicios. Primero mueva el contorno de la barra de desplazamiento desde de su ubicacin en la primera pantalla a su segunda ubicacin en la segunda pantalla. En vez de hacerla "saltar" hasta ah, como lo hace comnmente, muvala suavemente de un lugar a otro. En el segundo ejercicio, puede aprender como realizar otro tipo de transicin.

rea nuevas tecnologas caixanova

pgina 145 de 234

Macromedia Flash MX
Para crear una simple interpolacin de movimiento:

Animacin

1. An debe estar en jardineria14.fla. De lo contrario, bralo desde la carpeta misarchivos o desde la carpeta Leccin 07. 2. Arrastre la cabeza lectora sobre Fotograma 1. Haga clic una vez en la cabeza lectora para asegurarse de que no tiene ningn fotograma seleccionado. 3. Agregue 13 fotogramas despus de Fotograma 1 presionando la tecla F5 13 veces. El contenido de Fotograma 2 se desplaza a Fotograma 15 (vase figura 7.9.).

Figura 7.9.
Agregue 13 fotogramas despus de Fotograma 1.

4. Seleccione la capa de la barra de desplazamiento y arrastre la cabeza

lectora a Fotograma 10. Introduzca un fotograma clave en Fotograma 10 eligiendo Insertar > Fotograma clave o presionando F6. Debe hacer un cambio en el contenido de la barra de desplazamiento, de modo que es necesario desbloquearla. 5. Arrastre la cabeza lectora a Fotograma 15. Observe como Fotograma 15 de la capa de la barra de desplazamiento contiene una instancia del mismo smbolo Contorno de la barra de desplazamiento ubicada en Fotograma 10. Al crear una interpolacin de movimiento, como har en unos momentos, debe hacerlo con instancias del mismo smbolo.

rea nuevas tecnologas caixanova

pgina 146 de 234

Macromedia Flash MX

Animacin

6. Seleccione Fotograma 10 de la capa de la barra de desplazamiento y haga click elija Insertar > Crear Interpolacin de movimiento. Otra opcin es hacer click con el botn derecho del ratn y seleccionar "crear interpolacin de movimiento". Una pequea flecha aparece entre Fotogramas 10 y 15 de la capa de la barra de desplazamiento (vase figura 7.10.) para indicar que se ha creado una interpolacin de movimiento. Los fotogramas contenidos en la interpolacin de movimiento estn sombreados.

Figura 7.10.
Aparece una pequea flecha entre

Fotograma 10 y 15.

7. Arrastre la cabeza lectora a Fotograma 1 y reproduzca su pelcula eligiendo Control > Reproducir. Los primeros 10 fotogramas sern estticos, pero el contorno de la barra de desplazamiento se desplaza a una nueva posicin desde Fotograma 10 a 15. No fue necesario colocar un fotograma clave en cada fotograma para hacer la transicin debido a que Flash realiz toda la labor de interpolacin. 8. Guarde su archivo como jardineria15.fla. En el prximo ejercicio puede agregar otra interpolacin de movimiento a la animacin. La segunda interpolacin de movimiento hace que el contenido de la capa de fondo aparezca y desaparezca progresivamente a medida que cambia de un grfico a otro. Esto hace que la animacin sea un poco ms interesante.

rea nuevas tecnologas caixanova

pgina 147 de 234

Macromedia Flash MX
Para crear un efecto de aparicin y desaparicin progresivo:

Animacin

1. Abra jardineria15.fla. Si an tiene el archivo abierto del ejercicio anterior puede utilizarlo. Bloquee la capa de la barra de desplazamiento de modo que no dae la animacin que acaba de crear. 2. Seleccione la capa Grfico de fondo y agregue una nueva capa sobre ella, eligiendo Insertar > Capa. Nombre esta nueva capa Aparicin/Desaparicin progresiva. 3. Seleccione Fotograma 10 de la capa de opcin Aparicin/Desaparicin progresiva e introduzca un fotograma clave vaci (Insertar > Fotograma clave vaco). 4. Seleccione la herramienta Rectngulo de la barra de herramientas de dibujo. Asegrese que el Color de trazo este desactivado (Sin color) y el radio del ngulo es O y cambie el Color de relleno a negro (#OOOOOO). En Fotograma 10 de la capa de opcin Aparicin/Desaparicin progresiva, dibuje un rectngulo que cubra el contenido de la capa Grfico de fondo. Si quiere ser ms exacto, puede dibujar un rectngulo y utilizar el panel Informacin para configurar lo siguiente: Altura (H): 490 Ancho (W): 355 X: 55 Y: 23 Puede ayudarse tambin con ocultar todas las capas y visualizar la nueva capa con la capa de grfico de fondo para focalizar su atencin especficamente en el armado del rectngulo. 5. Asegrese de que el rectngulo que acaba de dibujar est seleccionado y elija Insertar > Convertir a smbolo. Nombre su smbolo Grfico de

rea nuevas tecnologas caixanova

pgina 148 de 234

Macromedia Flash MX

Animacin

aparicin, otrguele un comportamiento de grfico y haga clic en Aceptar. El rectngulo que acaba de dibujar en la capa de opcin Aparicin/Desaparicin progresiva es ahora una instancia de un smbolo. 6. Seleccione Fotograma 15 de la capa de Aparicin/Desaparicin progresiva e introduzca un fotograma clave (Insertar > Fotograma clave). 7. Vuelva a Fotograma 10 de la capa de opcin Aparicin/Desaparicin progresiva, seleccione la instancia del smbolo de Grfico de aparicin/desaparicin progresiva en ese fotograma y utilice la barra de herramientas de Propiedades para configurar el color Alfa de esta instancia a O %. (vase figura 7.11.).

Figura 7.11.
La barra de herramientas Propiedades.

La instancia del smbolo Grfico de aparicin en Fotograma 10 parece desaparecer. En realidad an se encuentra ah, sin embargo su alfa esta configurado en 0/o lo que significa que es completamente transparente. 8. Seleccione Fotograma 10 de la capa de opcin Aparicin/Desaparicin progresiva y elija Insertar > Crear Interpolacin de movimiento. Aparece una interpolacin de movimiento entre Fotograma 10 y 15.

rea nuevas tecnologas caixanova

pgina 149 de 234

Macromedia Flash MX

Animacin

9. Arrastre la cabeza lectora a Fotograma 15 y haga clic en la cabeza lectora para asegurarse que no hay fotogramas seleccionados. Introduzca cinco fotogramas despus de Fotograma 15, presionando F5 cinco veces. 10. Seleccione Fotograma 20 de la capa de opcin Aparicin/Desaparicin progresiva e introduzca un fotograma clave (Insertar > Fotograma clave). Seleccione la instancia del smbolo Grfico de aparicin/desaparicin progresiva en Fotograma 20 de la capa de opcin Aparicin/Desaparicin progresiva y utilice el panel de propiedades para establecer su Alfa en O/o. La instancia del smbolo Grfico de aparicin/desaparicin progresiva en Fotograma 20 es transparente. 11. Cree una interpolacin de movimiento entre los Fotogramas 15 y 20 de la capa de opcin Aparicin/Desaparicin progresiva. Puede seleccionar Fotograma 15 de la capa de opcin Aparicin/ Desaparicin progresiva y luego elija Insertar > Crear Interpolacin de movimiento o puede hacer clic con el botn derecho del ratn en (Windows) o Control-Clic (Macintosh) en Fotograma 15 de la capa de opcin Aparicin/Desaparicin progresiva y elija Crear Interpolacin de movimiento del Men contextual. 12. Introduzca un fotograma clave vaco en Fotograma 10 de la capa Ttulo para que desaparezca el contenido de dicha capa hasta Fotograma 15. Si quiere crear una transicin para el contenido de esta capa, lo puede hacer ms tarde. Tenga cuidado, porque al tener demasiados objetos en movimiento en el escenario a la misma vez puede reducir la velocidad de su pelcula. 13. Agregue un fotograma clave vaco en el fotograma clave 10 de la capa

rea nuevas tecnologas caixanova

pgina 150 de 234

Macromedia Flash MX
Vector rojo.

Animacin

14. Repita el procedimiento de interpolacin de movimiento utilizando color alfa para la capa Prmula de la carpeta Fotos, as lograremos que en el fotograma 15 quede completamente transparente. 15. Asegrese de que ninguna de sus capas estn ocultas; usted quiere ver los efectos de su animacin inmediatamente. Arrastre la cabeza lectora a Fotograma 1 y reproduzca su pelcula eligiendo Control > Reproducir. 16. Guarde su archivo como jardineria16.fla. En este momento la pgina principal del sitio Jardinera no es muy informativa. Es necesario agregar texto a esta pgina para que sus visitantes tengan una nocin de que se trata el texto. Agregue este texto debajo del efecto Aparicin/Desaparicin progresiva que acaba de crear de modo que es texto pueda aparecer y desaparecer progresivamente. Para agregar un bloque de texto a su pelcula: 1. Debe seguir en el archivo jardineria16.fla en la carpeta misarchivos. 2. Seleccione la capa Grfico de fondo. Agregue una nueva capa sobre esta (Insertar > Capa) y nombre la nueva capa Texto de pgina principal. 3. Seleccione Fotograma 15 de la capa Texto de pgina principal e introduzca un fotograma clave vaco (Insertar > Fotograma clave vaco o F7). Asegrese que la nueva capa quede debajo de la capa de opcin Aparicin/Desaparicin progresiva. Oculte la capa de opcin Aparicin/Desaparicin progresiva, haciendo clic en el punto negro debajo del icono de Capas Mostar/Ocultar.

rea nuevas tecnologas caixanova

pgina 151 de 234

Macromedia Flash MX

Animacin

4. Seleccione la herramienta Texto de la barra de herramientas de dibujo y modifique las siguientes configuraciones: Fuente: Arial o Helvtica. Tamao: 12 Cursiva: Activada Ajustar entre caracteres: No seleccionado Posicin de carcter: Normal Color de texto (relleno): Blanco (#FFFFFF) Posicin x: 52 Posicin Y: 376

5. Mantenga la herramienta Texto seleccionado y arrastre un cuadro de texto al rea debajo de la foto principal. El lado izquierdo del cuadro debe quedar de la misma altura que el lado izquierdo de la foto. El lado derecho debe quedar a la misma altura que el lado derecho de foto. De lo contrario, no se preocupe demasiado por la colocacin. 6. Escriba lo siguiente en su nuevo cuadro de texto: Bienvenido a SobreJardineria.com, donde encontrar todo lo que necesite.... 7. Cambie a la herramienta Flecha. Seleccione el cuadro de texto que acaba de crear y convirtelo en un smbolo, eligiendo Insertar > Convertir a smbolo. Nombre el nuevo smbolo Texto de pgina principal y otrguele el comportamiento de clip de pelcula. 8. Haga doble clic en el smbolo del Texto de pgina principal en el escenario para abrir el clip de pelcula en modo de edicin de smbolos. Selecciones Capa 1 y luego elija Modificar > Capa y nombre nuevamente la capa como Texto blanco.

rea nuevas tecnologas caixanova

pgina 152 de 234

Macromedia Flash MX

Animacin

9. Elija Insertar > Capa y agregar una nueva capa. Nombre la nueva capa como Sombra y arrstrela debajo la capa Texto blanco. 10. Seleccione la capa Texto blanco. Un recuadro de delimitacin debe resaltar el bloque de texto que usted acaba de crear. Elija Edicin > Copiar. Luego seleccione la capa sombra y luego elija Edicin > Pegar in situ para pegar el texto exactamente la misma posicin dentro de la capa texto negro. 11. Oculte la capa Texto blanco. Seleccione la capa sombra; el texto debe aparecer con un recuadro de delimitacin. De lo contrario, utilice la herramienta Flecha para seleccionarlo. En el panel Propiedades utilice el Color de texto (relleno) para cambiar el color del texto a gris. 12. Con el recuadro de delimitacin an visible, utilice las teclas de flecha para desplazar el cuadro de texto 1 pxel hacia abajo y 1 pxel a la derecha. Cada vez que se presiona una tecla de flecha se avanza un pxel. Revele la capa texto blanco y haga clic en la ficha de la Escena 1 para volver a su Lnea de tiempo principal. 13. Observe el clip de pelcula del texto de la pgina principal en el Escenario. Debe visualizar un leve efecto de sombra. Usted puede acentuar este efecto, regresando al clip de pelcula del Texto de la pgina principal o resaltando el cuadro de texto en la capa sombra todava ms. 14. Seleccione el clip de pelcula del Texto de la pgina principal. Utilice el panel Informacin (Ventana > Info) para modificar las siguientes configuraciones: Posicin x: 52 Posicin Y: 376

rea nuevas tecnologas caixanova

pgina 153 de 234

Macromedia Flash MX

Animacin

15. Guarde su pelcula como jardineria17.fla y pruebe su pelcula (Control > Probar pelcula).

Utilizacin de un gua de movimiento Usted puede usar una gua de movimiento para obligar a un smbolo de interpolacin a seguir una trayectoria especfica. Esto resulta ser muy til para simular el movimiento a lo largo de una lnea curva o irregular. Todo lo que debe hacer es seleccionar la capa que desea guiar y luego elija insertar > Gua de movimiento del Men principal. En el siguiente ejercicio, se aprende cmo crear una interpolacin de movimiento que sigue una trayectoria o gua de movimiento. Tambin se aprende cmo utilizar edicin con Papel cebolla para visualizar una gran cantidad de fotogramas en su animacin a la vez. Para hacer que una Interpolacin de movimiento siga una trayectoria: 1. Debe seguir en jardineria17.fla. De lo contrario, abra el archivo ahora. Asegrese que todas las capas estn bloqueadas. 2. Introduzca una nueva capa sobre la carpeta Contornos. Nmbrela Bichito Importe en esa capa dentro del fotograma 1 el grfico Bichito de la carpeta de ArchivosCurso de la Leccin07. Convirtalo a smbolo grfico con el nombre Bichito y recrtele el fondo blanco utilizando las herramientas que ya aprendi. No se preocupe por la posicin del bichito en este momento, pero s djelo al costado de la izquierda del escenario. Adems, debemos girarlo a 90 en el sentido de las agujas del reloj, utilizando (Modificar > Transformar > Rotar 90 segn las agujas del reloj). 3. Vuelva a la escena y coloque un fotograma clave en el fotograma 10 y

rea nuevas tecnologas caixanova

pgina 154 de 234

Macromedia Flash MX

Animacin

coloque esta instancia del bichito al costado derecho de nuestro escenario. 4. Luego seleccione el fotograma clave que acaba de agregar y elija Insertar > Crear Interpolacin de movimiento. Acaba de agregar una interpolacin de movimiento adicional. Reproduzca la animacin como lo ha hecho anteriormente y obsrvela. En este momento es un poco aburrido porque el bichito slo se mueve desde la izquierda del Escenario hasta la derecha del mismo. Debe dar ms vida a la animacin, agregando un gua de movimiento. 5. Haga clic con el botn derecho del ratn (Windows) o Control-Clic (Macintosh) en la capa del bichito y elija Ocultar otros del Men contextual para ocultar todas las capas menos aquella correspondiente al bichito. 6. Haga clic con el botn derecho del ratn (Windows) o Control-Clic (Macintosh) en la capa del bichito nuevamente. Esta vez, elija Aadir gua de movimiento. Una nueva capa denominada Gua: Aparece el bichito sobre la capa de dicho bichito. La nueva capa tiene un icono de gua de movimiento en el lado izquierdo del nombre y la capa del Bichito se encuentra adentrada y justamente debajo de este (vase Figura 7.12.).
Figura 7.12.
El bichito se encuentra adentrado justamente debajo de la gua: Capa del logotipo del gua Jardinera.

rea nuevas tecnologas caixanova

pgina 155 de 234

Macromedia Flash MX

Animacin

Introduzca otro fotograma clave en Fotograma 10 del Gua: Bichito. 7. Haga clic en el botn de contorno de Papel de cebolla en la parte inferior de la Lnea de tiempo. Los marcadores de Papel de cebolla aparecen en la parte superior de la Lnea de tiempo (vase figura 7.13.). Estos marcadores le muestran los fotogramas que estn incluidos el Papel de cebolla. Puede visualizar el contorno del contenido de cada uno de los fotogramas a la vez.

Figura 7.13.
Marcadores de Papel de cebolla.

8. Con el Fotograma 10 del Gua: Mantenga la capa del bichito seleccionada y arrastre el marcador izquierdo de Papel de cebolla a Fotograma 10 y el marcador derecho hasta Fotograma 15. El contorno del contenido de Fotogramas 1-15 son visibles (vase figura 7.14.).

Figura 7.14.
El contorno de del los contenido visibles.

Fotogramas 1-10 son

9. Seleccione la herramienta Lnea y configure el Color de trazo en rojo

rea nuevas tecnologas caixanova

pgina 156 de 234

Macromedia Flash MX

Animacin

(#FFOOOO). Seleccione Fotograma 10 del Gua: Capa del logotipo Jardinera y dibuje una lnea desde la izquierda del Escenario bien abajo de este (el contenido de Fotograma 1) hasta la esquina superior derecha del Escenario (el contenido de Fotograma 15). 10. Cambie a la herramienta Flecha y cambie la lnea recta que dibuj en el paso anterior a una lnea ondulada, tal como se indica en la figura 7.15. Utilice las herramientas de dibujo como aprendi. La trayectoria de los contornos cambia de acuerdo a la forma de la lnea. De lo contrario, asegrese que el punto central de la instancia en cada fotograma clave esta en lnea, tal como se describe en el prximo paso.

Figura 7.15.
Convierta la lnea recta en una lnea ondulada.

11. Deseleccione los contornos de Papel de cebolla y revele todas las capas. Luego reproduzca su pelcula desde el comienzo. Si le gusta lo que ve, guarde su archivo como jardineria18.fla.

Como hacer clips de pelcula. Los clips de pelcula son pelculas completas dentro de otras pelculas.

rea nuevas tecnologas caixanova

pgina 157 de 234

Macromedia Flash MX

Animacin

Son tiles para aquellas animaciones que se ejecutan independientemente de la Lnea de tiempo de la pelcula principal. Los clips de pelcula pueden contener elementos interactivos (acciones), otros smbolos y sonidos. Pueden ser colocados dentro de otros smbolos y son especialmente tiles para crear botones animados. En el siguiente ejercicio crear un clip de pelcula para el botn flor. Para crear un clip de pelcula: 1. Asegrese que an tiene abierto jardineria18.fla. 2. Abra la biblioteca eligiendo Ventana > Biblioteca. Encuentre el smbolo del botn Flor y bralo en el modo de edicin de smbolos, haciendo doble clic en el botn icono en el lado izquierdo del nombre del smbolo. Flash cambia al modo de edicin de smbolos. 3. Seleccione todo en ambas capas eligiendo Edicin > Seleccionar todo. Cuando todo est seleccionado puede elegir Edicin > Copiar fotogramas. 4. Elija Insertar > Nuevo smbolo. En el cuadro de dilogo propiedades de smbolo, nombre el smbolo como Pelcula de Flor y otrguele un comportamiento de Clip de pelcula. Haga clic en Aceptar. Ahora tiene un clip de pelcula vaco en la biblioteca. A continuacin copiar las formas ovaladas que cre en el botn Flor en la Leccin 6 y las pegar en su nuevo clip de pelcula. 5. Seleccione Fotograma 1 del clip de pelcula que acaba de crear y elija Edicin > Pegar fotogramas. 6. Verifique que la Capa 1 est nombrada como Degradado superior y la Capa 2 como Capa Base.

rea nuevas tecnologas caixanova

pgina 158 de 234

Macromedia Flash MX

Animacin

Ahora tiene un clip de pelcula, pero no ocurre nada en su interior. Tendr que agregar un poco de animacin a este clip de pelcula en el prximo ejercicio. 7. Guarde su archivo como jardineria19.fla en la carpeta misarchivos. Puede construir una interpolacin de forma dentro del clip de pelcula.

Interpolacin de formas La interpolacin de formas es til para cambiar la forma entre los puntos finales. Flash slo puede interpolar formas no grupos, smbolos o textos editables. Si desea interpolar un grupo, un smbolo o un texto editable, primero debe convertirlo en una forma. Para esto, debe desintegrarlo completamente (utilice > Modificar Separar hasta que haya sido convertido en una forma). Puede interpolar una gran cantidad de formas en una capa, pero por motivos de organizacin, resulta ms conveniente dejar cada forma en una capa separada. Tambin puede interpolar colores mediante la interpolacin de formas. En el siguiente ejercicio, se crea una interpolacin de forma para cambiar la forma que agreg a la pelcula de la Flor. Para crear una interpolacin de forma: 1. Asegrese que aun tiene abierto jardineria19.fla. Debera tener el clip de pelcula de la Flor abierto en modo de edicin de smbolos. 2. Introduzca fotogramas claves de ambas capas en Fotograma. 3. Utilice el panel Alinear para asegurarse de que ambos valos an estn alineados en el centro del Escenario. Nota: Si ambos fotogramas estn seleccionados puede transformar ambos valos a la vez.

rea nuevas tecnologas caixanova

pgina 159 de 234

Macromedia Flash MX

Animacin

4. Oculte la capa Superior e introduzca un fotograma clave vaco (Insertar > Fotograma clave) en Fotograma 7 de la capa Base. 5. Seleccione la herramienta Lpiz, y dibuje una forma a mano alzada que tenga la apariencia de una Flor (utilice la figura 7.16. como una gua).
Figura 7.16.
Dibuje una forma que se parezca a una Flor.

Sugerencia: Quizs sea aconsejable configurar el modo de Lpiz en la seccin opciones de la barra de herramienta de dibujo en Suavizar o Tinta. Los bordes exteriores de la flor deben extenderse ms all del borde del valo en Fotograma 1 y los bordes interiores deben traspasar el valo. Utilice la edicin de Papel de cebolla como gua cuando dibuja. 6. Rellene la nueva forma en Fotograma 7 de la capa Base con el mismo degradado que utiliz para el valo que cre en esa capa en la Leccin 6. Nuevamente, la luz debe provenir desde la esquina superior derecha de la pantalla. Puede utilizar la herramienta Gotero para copiar el relleno desde el valo en Fotograma 1 del la capa Base. Cuando la herramienta se cambia al Bote de pintura, desactive el modificador Bloquear Relleno y aplquelo a la forma en Fotograma 7. 7. Seleccione Fotograma 7 de la capa Base y elija Edicin > Copiar fotogramas. Revele la capa superior y pegue el fotograma copiado en el Fotograma 7 de dicha capa, seleccionado el fotograma correcto y eligiendo Edicin > Pegar fotogramas. 8. Utilice el Panel de trazo para cambiar el Color de trazo a # 006600. En la capa del superior. Cambie el tamao del fotograma 7 de la capa base

rea nuevas tecnologas caixanova

pgina 160 de 234

Macromedia Flash MX

Animacin

utilizando Modificar >Transformar > Girar y Voltear a un 110% de su tamao. Sugerencia: Para hacer que la Flor se vea ms real, puede agregar otra capa con unos toques de luz. 9. Arrastre la cabeza lectora hacia atrs y hacia delante en su animacin. La animacin salta de valo a una forma irregular. Usted quiere que la transicin sea suave, de modo que debe agregar una interpolacin de forma. 9. Seleccione cada fotograma de animacin y, elija Animar Forma desde l en la barra de herramientas de propiedades. Aparecen pequeas flechas entre los fotogramas claves para indicar que est ocurriendo una interpolacin (vase figura 7.17.). Nota: No elija Movimiento desde el Men Interpolacin ya que su animacin no funcionara correctamente.

Figura 7.17.
Aparecen pequeas flechas entre los fotogramas claves.

11. Arrastre la cabeza lectora hacia atrs y hacia delante en su animacin nuevamente. Esta vez su valo se convierte en una forma irregular. 12. Abra el smbolo del botn Flor en modo de edicin de smbolos. Cree una nueva capa, denomnela Sobre, y arrstrela hasta la parte superior del orden de visualizacin. 13. Seleccione el fotograma Sobre de la capa Sobre e introduzca un

rea nuevas tecnologas caixanova

pgina 161 de 234

Macromedia Flash MX

Animacin

fotograma clave vaco (Insertar > Fotograma clave vaco o F7). 14. Arrastre una instancia del clip de pelcula de la Flor al fotograma que acaba de crear. Utilice el panel Alinear (Ventana > Alinear) para centrar dicha instancia tanto en forma horizontal como vertical en el Escenario (vase figura 7.18.).

Figura 7.18.
El panel alinear.

15.

Vuelva a la pelcula principal, eligiendo Edicin > Editar documento. Cree una nueva capa, denomnela Conmutador de msica, y arrstrela hasta la parte superior del orden de visualizacin.

16. Introduzca un fotograma clave en blanco en Fotograma 20 la nueva capa Conmutador de msica y arrastre una instancia del botn Flor al Escenario como se indica en la figura 7.19.

Figura 7.19.
Arrastre instancia smbolo botn agua Escenario. Flor, una del del de al

17. Para visualizar el estado animado de su botn, debe probar la pelcula eligiendo Control > Probar pelcula. Se abre la ventana Probar pelcula.

rea nuevas tecnologas caixanova

pgina 162 de 234

Macromedia Flash MX

Animacin

18. Desplace su puntero sobre el botn para ver que sucede. Se aprecia un botn animado muy notable. Observe que la animacin se repite una y otra vez siempre y cuando mantenga el puntero sobre el botn. 19. Si su pelcula hace loop continuamente, desactvelo para visualizar las acciones de su botn con ms claridad. Seleccione Control > Bucle del Men principal y asegrese que Bucle no est seleccionado. Esto deshabilitar el bucle y le permitir visualizar el botn. En la Leccin 9 se aprende cmo agregar una accin a su pelcula de modo que deje de realizar un bucle. 20. Cierre la ventana Probar pelcula cuando ya ha visto suficiente y guarde su archivo como jardineria20.fla.

Tareas adicionales Cree una flor animada que pase peridicamente a travs de la

pantalla. Dicha flor debe ir dentro de un clip de pelcula de modo que pueda colocarlo en cualquier lugar dentro de la Lnea de tiempo sin que ser afectado por el numero de fotogramas que siguen.

rea nuevas tecnologas caixanova

pgina 163 de 234

Macromedia Flash MX

Animacin

Notas del estudiante

rea nuevas tecnologas caixanova

pgina 164 de 234

Macromedia Flash MX

Utilizacin de Sonido

Leccin 8: Utilizacin de sonido.


Objetivos Al terminar esta seccin habr entendido: Cmo los sonidos pueden mejorar las pelculas de Flash. Importacin de sonidos. Sonidos de grabacin y lectura contnua versus sonidos de eventos. Compresin de sonido. Y habr aprendido: Cmo agregar sonidos a la Lnea de tiempo. Cmo agregar sonidos a un botn. Cmo modificar sonidos. Cmo utilizar los controles de edicin de sonido.

Utilizacin de sonidos La utilizacin de sonidos en pelculas de Flash, mejora sus presentaciones (piense en el cine mudo en oposicin al cine sonoro). Aunque no siempre es necesario, el sonido agrega otra dimensin a su presentacin y cuando se utiliza en forma efectiva, hace ms grata la experiencia del usuario. Un aspecto de Flash es su compatibilidad para importar sonidos comprimidos MP3. Flash an da soporte a WAV (Windows) y AIFF (Macintosh), pero la introduccin de audio MP3 significa que ahora puede importar sonidos comprimidos MP3, lo que facilita el proceso de creacin y disminuye el tamao de las pelculas. Si tiene instalado en su sistema Quicktime 4 o posterior, tambin tiene la opcin de importar diversos formatos de sonidos, incluyendo Sound Designer II (slo Macintosh), System 7 Sounds (slo Macintosh), Sun AU (Windows o Macintosh) y pelculas Sound Only Quicktime (Macintosh y

rea nuevas tecnologas caixanova

pgina 165 de 234

Macromedia Flash MX

Utilizacin de Sonido

Windows). Al tener instalado Quicktime 4, tambin puede importar AIFF (Windows) y WAV (Macintosh). El sonido en Flash se puede grabar y leer en el fondo de la pelcula, independiente de la Lnea de tiempo o puede ser reproducido en el estado reposo, sobre o debajo del botn que ha creado. Adems puede controlar cuantas veces reproducir el audio (el sonido puede grabarse y reproducirse algunos fotogramas determinados, repetirse varias veces o reproducirse slo una vez).

Tipos de sonidos Para trabajar con sonidos en sus pelculas, necesita distinguir entre dos tipos de audio en las presentaciones Flash: sonidos de grabacin y lectura continua y sonidos de eventos. En el panel Sonido (que se analiza ms adelante) puede seleccionar el tipo correcto para cada sonido en la Lnea de tiempo.

Sonidos de flujo Los sonidos de grabacin y lectura contina son ptimos para sonidos de fondo de la animacin Flash. Se reproducen mientras se prolongue la capa de la Lnea de tiempo. Flash hace que una animacin siga el mismo ritmo de los sonidos de grabacin y lectura contina. Si Flash no es capaz de mostrar fotogramas a la misma velocidad del sonido, este se salta algunos fotogramas. Los sonidos de grabacin y lectura continua no se reproducen por ms tiempo que la longitud del fotograma que ocupan.

Sonidos de eventos A diferencia de los sonidos de grabacin y lectura contina, un sonido de evento sigue reproducindose, independiente de cuantos fotogramas hay en su capa. Los sonidos de eventos sirven para sonidos cortos en su pelcula

rea nuevas tecnologas caixanova

pgina 166 de 234

Macromedia Flash MX

Utilizacin de Sonido

y para botones. Al utilizar sonidos de eventos, debe descargar todo el clip de audio antes de reproducir el sonido. No estn sincronizados para la animacin, por lo tanto pueden comenzar y terminar en diferentes ocasiones en diferentes ordenadores.

Importacin de sonidos De este modo, puede incluir archivos de sonido en la pelcula de Flash, necesita importarlos a la biblioteca, al igual como lo hara con las ilustraciones. Cuando importa un sonido, este se agrega a su biblioteca de la pelcula actual. Puede utilizar numerosas instancias del mismo sonido a lo largo de toda la pelcula. Si desea compartir sonidos entre las pelculas de Flash, puede incluir sonidos en las bibliotecas compartidas. Para importar un sonido: 1. Abra jardineria20.fla de la carpeta Lesson08. Si ya cuenta con jardineria20.fla en la carpeta misarchivos, abra este en lugar del anterior. 2. Introduzca una nueva capa, nombrandola Pista de sonido y arrstrela a la parte inferior del orden de visualizacin de las capas. Por lo general, es una buena idea introducir los sonidos en distintas capas; es ms sencillo encontrarlos. 3. Seleccione Archivo > Importar a Biblioteca. Adems, puede utilizar Control+R (Windows) o Comando+R (Macintosh). Se abre el cuadro de dilogo Importar. 4. Explore la carpeta de ArchivosCurso dentro de la carpeta Lesson08 y seleccione principal.mp3. Haga click en Abrir.

rea nuevas tecnologas caixanova

pgina 167 de 234

Macromedia Flash MX

Utilizacin de Sonido

En Macintosh, haga click en Agregar para aadir el archivo a la lista Importar y haga click en Importar para importar dicho archivo. El archivo de sonido se importa directamente a la biblioteca actual de Flash y no se agrega al Escenario como sucede con un grfico importado. 5. Abra la biblioteca para jardineria20.fla, escogiendo Ventana > Biblioteca del Men principal. Busque el Sonido principal.mp3 en la biblioteca y obtenga una vista preliminar de este al hacer click en Reproducir en la esquina superior derecha de la ventana Biblioteca. Adems, puede agregar sonidos que ya existen en otra biblioteca utilizando Abrir > archivo como biblioteca.

Adicin de sonidos a la linea de tiempo Importacin slo agrega el sonido a la biblioteca. Con respecto al sonido que se reproduce en su pelcula, debe colocarlo en la Lnea de tiempo. La incorporacin de un sonido al clip de pelcula es relativamente simple, pero es importante que se asegure de colocar el clip de sonido en el fotograma donde desea que comience el sonido y crear una nueva capa para cada sonido que desea reproducir en la pelcula. Esto impedir que un sonido sobrescriba a otro. 1. Con la capa pista de sonido seleccionada de jardineria20.fla, arrastre una copia del sonido al Escenario. El sonido se agrega al primer y nico fotograma clave de la capa Pista de sonido. Puede ver que el sonido esta ah porque aparece una representacin grfica (onda sinusoidal) del sonido en la Lnea de tiempo (vase figura 8.1.).

rea nuevas tecnologas caixanova

pgina 168 de 234

Macromedia Flash MX

Utilizacin de Sonido

Figura 8.1.
Un sonido aparece como una onda sinusoidal en la Lnea de tiempo.

Nota: Es necesario que arrastre el sonido al Escenario y no a la Lnea de tiempo. 2. Guarde su archivo como jardineria21.fla en la carpeta misarchivos. Es importante recordar que despus de colocar un sonido desde la biblioteca hasta el escenario, no se puede observar ninguna representacin visual de dicho sonido en el escenario. Con tan slo mirar la capa Sonido que ha creado, puede comprobar que el sonido ha sido importado. Si el archivo de sonido es demasiado grande, se ve una Inea horizontal en el fotograma en el que ha colocado el sonido. Si el archivo de sonido es pequeo, es probable que note una onda sinusoidal en dicho fotograma. Ambos representan lo mismo: sus sonidos se han introducido con xito en la Lnea de tiempo. La extensin del nmero de fotogramas en la capa en que ha colocado el sonido, no necesariamente alarga o reduce la longitud de tiempo en que se reproduce el sonido. Puede hacerlo de dos formas: En el panel de Propiedades, coloque 3 en l numero de veces que el sonido realiza un bucle. En el Men emergente de sincronizacin del panel Sonido, seleccione Flujo. Asegrese de crear una capa para cada sonido que desea incluir en la pelcula. La incorporacin de otro sonido a un fotograma clave que ya tiene un sonido, puede causar que el primero sobrescriba dicho sonido (Flash no le permite reproducirlos simultneamente).

rea nuevas tecnologas caixanova

pgina 169 de 234

Macromedia Flash MX
Adicin de sonidos a botones

Utilizacin de Sonido

La incorporacin de sonidos a botones se asemeja a la incorporacin de sonidos a la Lnea de tiempo. Al agregar un fotograma clave e introducir el sonido en dicho estado del botn, puede colocar un sonido en cualquiera de los tres estado activos del botn: reposo, sobre y presionado. En el siguiente ejercicio, se crea un nuevo botn y se le agrega un sonido de otra biblioteca. Para agregar sonidos a un botn: 1. Asegrese que an tiene abierto jardineria21.fla. Necesita crear cinco botones de desplazamiento para las diferentes secciones del sitio Web de Jardinera. Necesitar botones denominados Galera de Fotos, Contctenos, Informacin, Eventos y Paseos. Comience con el botn Galera de Fotos. Cree un nuevo smbolo (Insertar > Nuevo smbolo) y denomnelo Botn Galeria de Fotos. Otrguele a este smbolo el comportamiento de botn y luego haga click en Aceptar. 2. Seleccione la herramienta Rectngulo de la barra de herramientas de dibujo. Utilice el panel Propiedades para configurar que el Trazo es sin color y el Relleno con el color de su eleccin. Este rectngulo se utiliza para el rea activa del botn, por lo tanto no tiene importancia el color que escoge ahora. 3. Dibuje un rectngulo en el Escenario. Utilice el panel Informacin para configurar el Ancho (W) a 80 pxeles y el Alto (H) a 2O pxeles. Seleccione el rectngulo y utilice el panel Alnear (Ventana > Alinear) para centrarlo en el Escenario. 4. Nombre el botn Capa 1 y agregue una nueva capa sobre esta denominada Texto. 5. Seleccione la herramienta Texto de la barra de herramientas de dibujo. Utilice el panel Propiedades para modificar las siguientes configuraciones:

rea nuevas tecnologas caixanova

pgina 170 de 234

Macromedia Flash MX
Fuente: Arial o Helvetica. Color: #33FFFF Tamao: 18

Utilizacin de Sonido

6. Seleccione el fotograma Reposo de la capa Texto, haga click para activar la herramienta de Texto y escriba las Galeria de Fotos. Cambie a la herramienta Flecha y seleccione el texto. Centre el texto sobre el rectngulo y ajuste el ancho del rectngulo hasta que cuadre debajo del texto. Luego seleccione el fotograma Presionado de la capa texto y escoja Insertar > Fotograma del Men principal. 7. Seleccione el fotograma Zona Activa de la capa Botn e introducir un fotograma clave (Insertar > Fotograma clave o F6). Esta corresponde al rea activa del botn. 8. Haga click en el fotograma Sobre de la capa Botn para seleccionar los fotogramas arriba, sobre y debajo de esta capa. Elimine el rectngulo. 9. Agregue una capa, denomnela Sonido e introduzca un fotograma clave (Insertar > Fotograma clave o F6) en el fotograma Sobre de esta nueva capa. 10. Seleccione Ventana > Bibliotecas comunes > Sonidos Seleccione el sonido Stick hit. Ahora, es necesario que agregue el sonido al botn. 11. Desde la biblioteca que acaba de abrir, seleccione Stick hit y arrstrelo al fotograma Sobre de la capa Sonido en el escenario. Recuerde, tiene que arrastrar el sonido al escenario, no a la lnea de tiempo, a pesar de que el sonido aparece en la lnea de tiempo en lugar del escenario. 12. Retroceda a la pelcula principal (Edicin > Editar documento), seleccione y desbloquee la capa de la barra de desplazamiento. y explore.

rea nuevas tecnologas caixanova

pgina 171 de 234

Macromedia Flash MX

Utilizacin de Sonido

Seleccione Fotograma 20 de la capa de la barra de desplazamiento e introduzca un fotograma clave (Insertar > Fotograma clave). 13. Mantenga fotograma 20 de la capa de barra de desplazamiento seleccionado y arrastre una instancia de su nuevo smbolo del botn Galeria de Fotos desde la biblioteca (Ventana > Biblioteca) al Escenario.

Figura 8.2.
Coloque el botn Galeria de Fotos entre las lneas horizontales de la barra de desplazamiento.

Coloque el botn al lado izquierdo del Escenario debajo de las lneas horizontales de la barra de desplazamiento (vase Figura 8.2.). 14. Habilite el botn seleccionado Control > Habilitar botones simples del Men principal. Desplace su puntero sobre el botn en el Escenario y escuche su sonido. Nota: Cuando agrega el sonido a la lnea de tiempo del botn, la sincronizacin automticamente se configura para evento. Esto significa que cada vez que desplace el puntero sobre el botn, comienza a reproducirse el sonido. Si desea reproducir el sonido slo una vez y evitar que

rea nuevas tecnologas caixanova

pgina 172 de 234

Macromedia Flash MX

Utilizacin de Sonido

posiblemente el "sonido se solape", puede cambiar la sincronizacin del sonido a Iniciar. Puede encontrar esta configuracin en el panel Sonido, al seleccionar el fotograma clave Sobre de la capa Sonido dentro del smbolo de botn Galeria de Fotos. 15. Guarde su archivo como jardineria22.fla en la carpeta misarchivos. Recuerde que es importante mantenerse organizado. Necesita agregar varios botones y sonidos de modo que debe limpiar su biblioteca en el siguiente ejercicio. Para organizar sus botones v sonidos: 1. Asegrese que la biblioteca para jardineria22.fla aun est abierta (Ventana > Biblioteca). Cree una nueva carpeta en esta biblioteca y denomnela Botones de desplazamiento. 2. Seleccione el botn Galeria de Fotos en la biblioteca y arrstrelo a la carpeta Botones de desplazamiento. 3. An no ha terminado! Cree una subcarpeta dentro de la carpeta botones de desplazamiento y denomnela Sonidos. 4. Seleccione Stick Hit y arrstrelo a la carpeta Sonidos. No es mejor? 5. La biblioteca de sonidos aun debera permanecer abierta desde el ejercicio anterior. En caso contrario, vuelva a abrirla. Arrastre 5 sonidos de botn a eleccin a la carpeta Sonidos de la biblioteca jardineria22.fla y luego cierre esta ltima. 6. Guarde su archivo como jardineria23.fla. Bien, es un botn menos. Pero an faltan cuatro ms. En realidad, no desea volver a repetir todos los pasos no es as? Desde luego que no. Ahorre tiempo, duplique el botn que acaba de crear en la biblioteca y edtelo. Para duplicar v editar un botn: 1. Seleccione el botn Galeria de Fotos en la biblioteca de jardineria23.fla.

rea nuevas tecnologas caixanova

pgina 173 de 234

Macromedia Flash MX

Utilizacin de Sonido

Haga click en Opciones en la parte superior de la ventana Biblioteca y elija Duplicar del Men. Se abre el cuadro de dilogo Propiedades de smbolo. 2. Cambie el nombre del botn al botn Reservas y haga click en Aceptar. 3. Haga doble click sobre el icono del botn en el lado izquierdo del botn Reservas en la biblioteca para abrirla en modo de edicin de smbolos. 4. Seleccione la herramienta Texto y haga click en la palabra "Galeria de Fotos" en el fotograma Reposo. Cambie Galera de Fotos a Reservaciones. 5. Seleccione el fotograma de la capa Sonido y abra el panel de Propiedades y cambie el Sonido a otro de los sonidos seleccionados en la eleccin. 6. Ahora, slo necesita volver al Men principal (Edicin > Editar documento) y agregue su botn recin editado al Escenario. Asegrese de haber seleccionado el Fotograma 20 de la capa de barra de desplazamiento y arrastre una instancia de su smbolo del botn Reservaciones que recin ha creado al Escenario. Colquelo debajo de la instancia existente del smbolo de botn Galeria de Fotos (vase figura 8.3.).

Figura 8.3.
Coloque el botn Reservaciones a la derecha del botn Galeria de Fotos.

rea nuevas tecnologas caixanova

pgina 174 de 234

Macromedia Flash MX
7. Guarde su archivo como jardineria24.fla.

Utilizacin de Sonido

Puede realizar los otros tres botones sin ayuda (vase las tareas adicionales para esta Leccin) porque en realidad no los necesita para esta clase. Ahora que sabe cmo agregar sonidos a la Lnea de tiempo y a los botones, es momento de aprender cmo modificar sonidos.

Modificacin de sonidos Una vez que tiene un sonido en su pelcula, puede utilizar el panel Sonido para aplicar un efecto de sonidos preestablecidos en el panel Propiedades del sonido, adems se define el tipo de sonido como un sonido de grabacin y lectura contina o sonido de evento.

Figura 8.4.

El panel Propiedades del sonido.

Flash ofrece algunos efectos enlatados bsicos. Para aplicar uno de estos efectos, seleccione una de las siguientes opciones en Editar el sonido: Ninguno: Elimine cualquier efecto de sonido anterior y no aplique efectos al archivo de sonido. Canal izquierdo/ Canal derecho: Aplique el sonido slo al canal izquierdo o al derecho. Desvanecimiento Desvanecimiento progresivo progresivo: de izquierda Aumenta a y derecha/ disminuye de derecha a izquierda: Desplaza el sonido de un canal a otro. gradualmente el volumen del sonido mientras dure. Personalizar: Cree sus propios puntos de entrada y salida del archivo de sonido, utilizando el sobre de edicin (vase "Personalizacin de efectos de sonido" ms adelante).

rea nuevas tecnologas caixanova

pgina 175 de 234

Macromedia Flash MX
Para elegir cmo propiedades:

Utilizacin de Sonido
sincronizar un sonido, seleccione una de las

siguientes opciones del Men emergente Sincronizar en el panel de

Sinc: Sincronice el sonido para un evento, as como hacer click en un botn o alcanzar un fotograma clave en la lnea de tiempo. Un sonido de evento se reproduce por completo y en forma independiente de la Lnea de tiempo. Si necesita que el sonido se reproduzca exactamente con la Lnea de tiempo, no elija esta opcin. Los sonidos de eventos se detienen en la mitad de la reproduccin y comienzan desde un principio cada vez que se escucha (como un disco rayado). Inicio: Semejante a evento, pero los sonidos se reproducen hasta el final antes de reproducirse nuevamente (si se ejecuta). Detener: Detiene cada aparicin de un evento especfico o inicia el sonido en el fotograma dnde se ubica la detencin. Para utilizar esta funcin, cree una capa adicional, introduzca un fotograma clave dnde desee que termine el sonido, inserte el sonido que desee para detener en el fotograma clave y por ultimo establezca Sincronizar en el cuadro de dilogo Propiedades de sonido. Puesto que los sonidos de eventos se ejecutan independientes de la Lnea de tiempo, esta es la nica forma de garantizar que un sonido se detenga en un fotograma especfico. Flujo: Sincroniza el sonido para la Lnea de tiempo. Los sonidos de grabacin y lectura contina terminan cuando no existen ms fotogramas en la Lnea de tiempo. Los sonidos de grabacin y lectura contina pueden servir para sonidos de fondo, as como para tratar de sincronizar una voz para una animacin. Bucle: Especifique un nmero para la opcin bucle si desea que el sonido se repita. El sonido no puede hacer bucle para siempre, pero puede realizar bucles 99,999,999 veces. Nota: No es recomendable realizar el bucle de un sonido de grabacin y

rea nuevas tecnologas caixanova

pgina 176 de 234

Macromedia Flash MX

Utilizacin de Sonido

lectura contnua. Si un sonido en Flujo se configura para realizar bucle, el tamao del archivo aumenta para agregar los fotogramas adicionales del sonido en bucle. En el prximo ejercicio, se utiliza el panel Sonido para aplicar uno de los efectos bsicos especiales de msica envasada de Flash para el sonido que import en el primer ejercicio. Para modificar el sonido en la Lnea de tiempo principal: 1. Seleccione el fotograma 1 de la capa Pista de sonido en jardineria24.fla y abra el panel Propiedades. Modifique las siguientes configuraciones en el panel Sonido: Sonido: Asegrese que se establezca en principal.mp3, el nombre del sonido que agreg al Escenario. Si alguna vez necesita eliminar un sonido de la pelcula, puede cambiar esta opcin a Ninguno. Efecto: Establzcalo en Aumento Progresivo. Sinc: Este debera establecerse en Flujo. Bucle: Establzcalo en O para que el sonido realice bucle. 2. Reproduzca su animacin, arrastrando la cabeza lectora al Fotograma 1 y escoja Control > Reproducir del Men principal. El sonido aparece en forma progresiva, pero tan pronto como la animacin alcanza el Fotograma 20, el sonido se detiene. Esto se debe a que el sonido de grabacin y lectura contina se encuentra sincronizado para la Lnea de tiempo de la pelcula. Cuando no tiene ms fotogramas, el sonido se detiene. Si desea que el sonido contine reproducindose, es necesario que cambie la forma en que est sincronizado para la Lnea de tiempo de la pelcula. Adems, puede extender el tiempo de reproduccin del sonido, configurndolo en bucle.

rea nuevas tecnologas caixanova

pgina 177 de 234

Macromedia Flash MX

Utilizacin de Sonido

3. Seleccione Fotograma 1 de la capa de pista de sonido y efecte los siguientes cambios en el panel Sonido: Sincronizar: Cmbielo a Inicio. Bucle: Establzcalo en 3. 4. Vuelva a reproducir las animaciones. En esta ocasin el sonido se reproduce a lo largo de los tres bucles. Cuando establece la sincronizacin a inicio, el sonido comienza a reproducirse en el fotograma donde aparece y contina reproducindose hasta finalizar o se detenga explcitamente. 5. Guarde su archivo como jardineria25.fla en la carpeta misarchivos.

Personalizacin de efectos de sonido En el panel propiedades se abre el cuadro de dilogo Sobre de edicin Editar, donde puede modificar los efectos de sonidos existentes y crear sus propios efectos personalizados (vase figura 8.5.). Al utilizar el cuadro de dilogo Sobre de edicin, puede cambiar el punto de entrada y el punto de salida del sonido y controlar el volumen de cada canal de sonido. Si deseara hacer algo ms complicado con su sonido, utilice un programa como Macromedia's SoundEdit o Sonic Foundry's Sound Forge para ayudarlo.

Figura 8.5.
El cuadro de dilogo de Edicin.

rea nuevas tecnologas caixanova

pgina 178 de 234

Macromedia Flash MX

Utilizacin de Sonido

El cuadro de dilogo de edicin tiene tres ventanas, junto con una serie de otros controles que puede utilizar para personalizar sus sonidos. Los controles de la ventana superior controlan los sonidos para el canal izquierdo. Los controles de la ventana inferior controlan los sonidos para el canal derecho. La ventana central de la barra entre las ventanas de canal es la lnea de tiempo para el sonido. Se controla tambin el volumen del sonido. Cada canal tiene su propia lnea, que aparece en la parte superior de la ventana del canal. El cuadrado abierto en la lnea es el Selector. Puede alterar el sonido para un canal agregando y reubicando los Selectores. Cada canal puede tener hasta ocho Selectores de sobre. Agregue un Selector, haciendo click en una Lnea y elimine uno, arrastrndolo fuera de la ventana. La Lnea de tiempo de sonido tiene dos canales: un control de Tiempo de entrada y Tiempo de salida. Estos controles se utilizan para definir los puntos de inicio y detencin de un sonido. Sobre la ventana del canal izquierdo se encuentra el Men emergente Efecto. Las configuraciones aqu son iguales a aquellas que explor en el panel Propiedades. Debajo de la ventana del canal derecho, en la esquina inferior izquierda se encuentran los botones Detener y Reproducir. Utilice estos para probar el sonido mientras edita. En la esquina inferior derecha se encuentran los botones Aumentar, Reducir y Fotogramas. Utilice los botones Aumentar y Reducir para expandir o contraer la lnea de tiempo del sonido. Puede ver la lnea de tiempo ya sea como fotogramas o segundos.

rea nuevas tecnologas caixanova

pgina 179 de 234

Macromedia Flash MX

Utilizacin de Sonido

Para personalizar el sonido en la Lnea de tiempo principal: An debera tener abierto jardineria25.fla. De lo contrario, bralo. 1. Haga click en Fotograma 1 de la capa Pista de sonido. 2. Las configuraciones actuales para principal.mp3 aparecen en el panel Propiedades. 3. Haga click en Editar en el panel Sonido para abrir el cuadro de dilogo Sobre de edicin. 4. Haga click en Reducir hasta que pueda ver un bucle completo del archivo de sonido. El final del bucle se encuentra marcado por una lnea vertical. 5. De inmediato el sonido aumenta en forma progresiva, comenzando sin volumen y terminando a todo volumen. Establezca el sonido para comenzar a medio volumen, haga click en el selector de arriba en la ventana del canal izquierdo y arrstrelo hasta la mitad de la ventana. Repita lo mismo con el canal derecho. Nota: Slo tiene que agregar el Selector de sobre en un canal. Un selector recproco se establecer automticamente en el otro canal. 6. Haga click en Reproducir para probar su efecto de sonido. Utilice las barras de desplazamiento debajo de la ventana de canal derecho para desplazarse al tercer bucle de sonido. Luego desea desvanecer el volumen de mximo a mnimo al final. 7. Haga click en la mitad de la Lnea en el tercer bucle para establecer un punto. Introduzca un cuarto selector al final del tercer bucle. Arrastre este ltimo selector a la parte inferior de la ventana de canal para ambos canales. 8. Haga click en Reproducir para probar su efecto de sonido. 9. Puede tener hasta ms de cuatro Selectores. Haga click para agregar estos

rea nuevas tecnologas caixanova

pgina 180 de 234

Macromedia Flash MX

Utilizacin de Sonido

junto a la Lnea de sobre y reprodzcalos cambiando las configuraciones de sonido. 10. Haga click en Reproducir para probar el efecto de sus cambios. Haga click en Aceptar para cerrar el cuadro de dilogo de Sobre de edicin. Luego, guarde su archivo como jardineria26.fla en la carpeta misarchivos. 11. A continuacin, se estudian las formas en que puede comprimir un sonido dentro de Flash MX.

Compresin de sonido Flash MX le permite exportar sonido utilizando tres formatos diferentes: ADPCM (Modulacin de impulsos modificados diferencial adaptable), MP3, o Raw. Si se encuentra en Windows, Flash tambin puede exportar sonidos en formato WAV. Al establecer en forma individual las propiedades de exportacin para cada sonido, puede controlar la calidad de cada archivo de sonido por separado, seleccionando el tamao del archivo. Aquellos archivos que necesiten estar ms claros pueden comprimirse menos, de este modo se mantienen fieles con respecto al archivo original. Experimente con estas configuraciones para equilibrar la importancia del tamao general del archivo con calidad de sonido. Puede establecer las configuraciones de compresin para cada sonido en forma separada en la ventana Propiedades de sonido o globalmente en la Configuracin de publicacin (que se expone en la Leccin 10). Si no cuenta con configuraciones de exportacin establecidas para un sonido, Flash exporta el sonido de acuerdo a estndares establecidos en el cuadro de dilogo Configuracin de publicacin. Para establecer configuraciones individuales para compresin de sonido: 1. Asegrese que jardineria26.fla se encuentra abierto y escoja la Ventana

rea nuevas tecnologas caixanova

pgina 181 de 234

Macromedia Flash MX
> Biblioteca para abrir su biblioteca.

Utilizacin de Sonido

2. Seleccione el archivo de sonido principal.mp3 en la biblioteca y haga click en Propiedades (vase figura 8.6.).

Figura 8.6.
El icono Propiedades en la

biblioteca.

Aparece el cuadro de dilogo Propiedades de sonido (vase figura 8.7.).

Figura 8.7.
El cuadro de dilogo Propiedades de sonido.

3. Seleccione MP3 del Men emergente de compresin. Tiene las siguientes opciones para comprimir.

rea nuevas tecnologas caixanova

pgina 182 de 234

Macromedia Flash MX
ADPCM (Modulacin de impulsos

Utilizacin de Sonido
modificados diferencial

adaptable): Establecer compresin para datos de sonido de 8 bits o 16 bits. Utilice la configuracin ADPCM cuando exporta sonidos cortos de eventos, tales como sonidos de botones. 22 kHz es la velocidad estndar para publicacin en el Web y corresponde la mitad de la velocidad estndar para publicaciones en CD (44 kHz). MP3: Exporta sonidos con compresin MP3. Utilice MP3 cuando exporta sonidos ms largos y de grabacin y lectura contina, tales como pistas de sonido de msica. Cambie las configuraciones para la velocidad de transferencia y calidad y observe como se reduce el tamao del archivo de sonido o seleccione una velocidad de bit superior a 16 Kbps para obtener una mejor calidad de sonido. Sin Formato: Exporta sonidos sin compresin de sonido. 22 kHz es la velocidad estndar para publicacin en el Web y corresponde la mitad de la velocidad estndar para publicaciones en CD (44 kHz). Voz: La opcin de compresin Voz exporta sonidos mediante una compresin especialmente adaptada al habla. 4. Haga click en Aceptar para cerrar el cuadro de dilogo Propiedades de sonido. Guarde su archivo como jardineria27.fla.

Tareas adicionales Cree los botones para Informacin, Eventos y Paseos. Utilice los sonidos que agrego a su biblioteca desde la biblioteca de sonidos comunes. Alterne las configuraciones de compresin para cada uno de sus sonidos. Podr apreciar que algunos sonidos pueden tener compresiones inferiores sin perder gran parte de su calidad, pero otros no pueden.

rea nuevas tecnologas caixanova

pgina 183 de 234

Macromedia Flash MX
Notas del estudiante

Utilizacin de Sonido

rea nuevas tecnologas caixanova

pgina 184 de 234

Macromedia Flash MX

Adicin de interactividad

Leccin 9: Adicin de interactividad.


Objetivos Al terminar esta seccin habr entendido: El objetivo de ActionScript. Cmo utilizar acciones en Macromedia Flash. Cmo utilizar ActionScript para crear interactividad. Los distintos usos de los clips inteligentes. Y habr aprendido: Cmo agregar acciones a su pelcula de Flash. Cmo agregar una simple accin de desplazamiento a su pelcula de Flash. Cmo crear Mens desplegables y botones invisibles. Cmo utilizar la accin Carga pelcula. Cmo abrir una pagina Web desde una pelcula de Flash. Cmo crear un formulario en Flash. Cmo utilizar clips inteligentes. Cmo hacer una precarga y un conmutador de msica.

Una introduccin a ActionScript Hasta ahora usted ha creado una pelcula con una Lnea de tiempo que reproduce un fotograma tras otro en forma secuencial. Est bien, pero de que se trata la interactividad? No se preocupe, eso lo vemos a continuacin. En Flash usted puede configurar su pelcula para que esta sea interactiva, de modo que ciertos eventos aparezcan al alcanzar un fotograma particular, al hacer click en un botn o al desplazar el puntero sobre el, al presionar una tecla o al introducir informacin en un campo de texto. Esto se

rea nuevas tecnologas caixanova

pgina 185 de 234

Macromedia Flash MX

Adicin de interactividad

realiza mediante la asignacin de acciones, conjunto de instrucciones escritas mediante el uso de ActionScript. ActionScript apareci por primera vez con la llegada de Flash 4. En conjunto con Flash MX, ActionScript se ha convertido en un complejo lenguaje de programacin orientado objetos cuya sintaxis es muy similar al de JavaScript. No se preocupe, no es necesario ser programador para agregar interactividad a sus pelculas de Flash. Los nuevos usuarios pueden construir ActionScript fcilmente mediante el uso de una interactividad de arrastrar y soltar en modo Normal en el panel Acciones (Ventana> Acciones). Los usuarios ms experimentados pueden programar ActionScript directamente en el panel Acciones con la ventaja de poder acceder a una biblioteca de acciones como referencia y con resaltados automticos a color de la sintaxis al estar en Modo Experto. Usted puede agregar acciones a botones, clips de pelculas o fotogramas mediante el panel Acciones (vase figura 9.1.) que est subdividido en tres secciones. En el lado izquierdo tiene la lista de caja de herramientas, en el lado derecho tiene la lista de acciones. Debajo de estos dos se encuentra el panel Parmetros.

Figura 9.1.
El panel Acciones

rea nuevas tecnologas caixanova

pgina 186 de 234

Macromedia Flash MX

Adicin de interactividad

Lista de caja de herramientas: Una lista de acciones que usted puede agregar a su ActionScript. Slo debe hacer doble click sobre una accin en la lista de caja de herramientas para agregarla a la lista de acciones. Lista de acciones: Todas las acciones que usted agregue aparecen aqu. Usted no est limitado a escribir guiones en el panel de la lista de acciones. Puede importar un archivo externo al panel de la lista de acciones. Tambin puede exportar las acciones en la lista de acciones a un archivo externo. Panel Parmetros: Slo se utiliza al editar en modo Normal. Se le indica que introduzca los parmetros o los argumentos necesarios en cada accin. La barra de divisin vertical entre la caja de herramientas y las listas de acciones se utilizan para abrir y cerrar la lista de la caja de herramientas. Puede hacer doble click sobre la barra para cerrar la lista de caja de herramientas o puede hacer click sobre el botn de flecha izquierda para cerrar la lista. Haga doble click sobre la barra de divisin (que ahora se encuentra en el lado izquierdo) o haga click sobre el botn de flecha derecha para abrir la lista de caja de herramientas. Tambin puede arrastrar la barra de divisin vertical para

redimensionar las dos listas. Al arrastrar la barra de divisin hacia la izquierda, puede comprimir o cerrar la lista de caja de herramientas. Puede arrastrar la barra de divisin hacia la derecha para abrir nuevamente la lista de caja de herramientas. Slo puede arrastrar la barra de divisin hacia la derecha dentro de las dimensiones predeterminadas de la lista de caja de herramientas. En Windows, puede redimensionar el panel Acciones completamente al hacer click sobre sus bordes izquierdo, derecho o inferior y arrastrarlo. Desplace su puntero sobre el borde del panel. Se visualiza un puntero horizontal o vertical con dos flechas, esto indica que puede arrastrar. Puede

rea nuevas tecnologas caixanova

pgina 187 de 234

Macromedia Flash MX

Adicin de interactividad

hacer lo mismo con las dos esquinas inferiores, pero en este caso el puntero se convierte en una lnea de 45 grados con dos flechas y esto permite redimensionar el panel tanto en forma horizontal como vertical. Si usted est utilizando un Macintosh, puede redimensionar el panel, arrastrando la esquina inferior derecha. Tal como se mencion anteriormente, usted puede utilizar tanto el modo Normal como Experto para introducir acciones. Durante esta Leccin se utilizar en modo Normal. Puede agregar una accin al hacer doble click sobre la accin en la lista de caja de herramientas o al hacer click sobre el botn Agregar (+) en la parte inferior de la lista de caja de herramientas y seleccionando una accin de los Mens emergentes. Para eliminar una accin, haga click sobre la accin que desea eliminar de la lista de acciones y haga click sobre el botn Eliminar (-) que se encuentra sobre la lista de caja de herramientas o presione la tecla Eliminar de su teclado. Es hora de comenzar a agregar un poco de interactividad a su pelcula de Flash. Comience por agregar acciones de Detencin. Este bien, la detencin parece ser contraria a la interactividad, pero es el primer paso. Para agregar la accin Detener a su pelcula: 1. Abra jardineria27.fla en la carpeta misarchivos. Si no tiene esta carpeta, abra jardineria27.fla en la carpeta Lesson08 y gurdelo en la carpeta misarchivos. 2. Elija Control > Probar documento del Men principal. En este momento, la pelcula se reproduce de comienzo a fin y luego se devuelve al comienzo para volver a reproducirse. Acaso no sera mejor que la pelcula se detuviera al alcanzar la pgina principal? Esto lo puede lograr al agregar la accin Detener.

rea nuevas tecnologas caixanova

pgina 188 de 234

Macromedia Flash MX

Adicin de interactividad

3. Elija Insertar > Capa o haga click sobre el botn Capa para agregar una capa nueva. Nombre la nueva capa Acciones y Carteles. Si dicha capa no se crea en la parte superior del orden de visualizacion, ahora debe arrstrela hasta ah. Nota: Es buena idea siempre mantener sus acciones de fotograma en la misma capa. Esto facilita la solucin de problemas y la edicin. 4. Haga click sobre Fotograma 20 de la capa de Acciones y etiquetas y elija Insertar > Fotograma clave (o presione F6). 5. Mantenga Fotograma 20 de la capa de Acciones y etiquetas seleccionada y abra el panel Acciones eligiendo Ventana > Acciones. El panel Acciones se abre en modo Normal por defecto. Este es el modo que se utiliza en esta Leccin de modo que no es necesario que lo cambie. 6. La accin Stop es una de las acciones bsicas de Flash. Para ampliar la categora de Acciones bsicas, haga click en la lista de caja de herramientas Control de Pelcula. Luego haga doble click sobre Stop en la lista de caja de herramientas. Lo siguiente aparece en la lista de acciones. Stop (); Srvase tomar nota que Fotograma 20 de la Lnea de tiempo principal tiene una pequea "a", lo que indica que contiene una o ms acciones. 7. Elija Control > Probar documento para ver que sucede. Guarde su archivo como jardineria28.fla en la carpeta misarchivos. Su pelcula debera reproducirse hasta despus de Fotograma 20 y

rea nuevas tecnologas caixanova

pgina 189 de 234

Macromedia Flash MX
luego detenerse (no debera realizar un bucle).

Adicin de interactividad

Si no introduce estas instrucciones precisas, su pelcula slo llega hasta Fotograma 20. Esto sucede an si agrega mas fotogramas despus de Fotograma 20 (lo que se ve en un ejercicio posterior). Por ahora, debe agregar otra accin Stop. Recuerda el botn Flor? Usted cre un clip de pelcula animado para el estado Sobre del botn Flor en la Leccin 7. La Lnea de tiempo de dicho clip de pelcula es independiente de la Lnea de tiempo del botn y la Lnea de tiempo principal, de modo que cuando usted desplaza el puntero sobre la flor la animacin sigue haciendo bucle en vez de reproducirse una sola vez. Es hora de detener el bucle. Para evitar que el clip de pelcula siga en ciclo de bucle: 1. Siga en el archivo jardineria28.fla en la carpeta misarchivos. De lo contrario, abra el archivo. 2. Abra la biblioteca (Ventana > Biblioteca) si no est abierta. 3. Haga doble click sobre el icono en el lado izquierdo de la pelcula de Flor en la biblioteca para abrirla en modo de edicin de smbolos. 4. Seleccione la capa Degradado superior y elija Insertar > Capa para agregar una capa nueva. Nombre la capa Acciones y Carteles. Agregue un fotograma clava a Fotograma 7 en la nueva capa. 5. Mantenga Fotograma 7 de la capa de Acciones y etiquetas seleccionada y asegrese de que el panel Acciones est abierto (Ventana > Acciones). Si fuese necesario, ample la categora de Acciones bsicas, haciendo doble click sobre el en la lista de caja de herramientas de control de pelicula. Para agregar la accin Stop, haga doble click en Stop. Debiera visualizar lo siguiente en la lista Acciones: Stop(); Sugerencia: El panel Acciones puede ocupar mucho espacio en su

rea nuevas tecnologas caixanova

pgina 190 de 234

Macromedia Flash MX

Adicin de interactividad

pantalla. Para abrirlo y cerrarlo rpidamente, utilice el triangulo delante del titulo. 6. Vuelva a la pelcula principal, eligiendo Edicin > Editar documento. Pruebe su pelcula, eligiendo Control > Probar pelcula. Cuando la pelcula se detiene en la pgina principal, trate de desplazar el puntero sobre el botn Flor. Debera reproducirse una sola vez y detenerse. 7. Guarde su archivo como jardineria29.fla en la carpeta misarchivos. Ahora sabe cmo detener la pelcula. A continuacin use las acciones para provocar una verdadera gestin. Agregue dos secciones nuevas a su pelcula: las secciones de Galera de Fotos y Contctenos. Luego, active los botones en la barra de desplazamiento de modo que pueda saltar a las nuevas secciones. Para agregar las secciones de Galera de Fotos y Contctenos: 1. Siga en el archivo jardineria29.fla en la carpeta misarchivos. 2. Primeramente, ample la Lnea de tiempo de la pelcula principal, seleccionando Fotograma 30 en todas las capas (haga click en Fotograma 30 en la capa superior y luego haga Mays-click en Fotograma 30 en la capa inferior). Luego, elija Insertar > Fotograma. 3. Cada una de las nuevas secciones tiene un diseo distinto, Agregue dos secciones mas a su pelcula de Flash, colocando dos nuevas carpetas, una para Galera de Fotos y otra para Contctenos. 4. Seleccione la capa de fondo y arrastre la cabeza lectora a Fotograma 25. Luego elija Insertar > Fotograma clave vaco. Note que el texto de la pgina principal se sigue mostrando. Seleccione el resto de los fotogramas y realice Insertar > Eliminar Fotogramas. Haga lo mismo con la capa Copete de la carpeta Fotos.

rea nuevas tecnologas caixanova

pgina 191 de 234

Macromedia Flash MX

Adicin de interactividad

Figura 9.2.
As debe quedar el diseo hasta este momento.

5. Seleccione Fotograma 30 de la capa Grfico de fondo y elija Insertar > Fotograma clave vaco. Elimine la interpolacin de movimiento del fotograma 15 de esta misma capa utilizando el boton derecho del ratn. 6. Introduzca el fondo para la seccin Galera de Fotos y Contctenos en el fotograma 30. Para Galera de Fotos, importe de la carpeta Fotos el archivo azalea.gif en el fotograma 30 de la capa Grfico de Fondo y colquelo sobre el dibujo de la barra de desplazamiento al costado izquierdo del botn Flor. Deber escalarlo a 514 x 72 pixels. Si, debe quedar desproporcionado, es parte de la prctica!!!

rea nuevas tecnologas caixanova

pgina 192 de 234

Macromedia Flash MX

Adicin de interactividad

Para Contctenos agrege 5 fotogramas ms a todas las capas y coloque un fotograma clave vaco en el fotograma 35 de la Capa Grfico de fondo. Importe de la carpeta Fotos el archivo orqudea.jpg y colquelo sobre el dibujo de la barra de desplazamiento al costado izquierdo del botn Flor. Deber escalarlo tambien a 514 x 72 pixels. 7. Seleccione fotograma 25 de la capa Acciones y etiquetas e introduzca un fotograma clave vaco (Insertar > Fotograma clave vaco). Utilice el panel Acciones para agregar la accin Stop a este fotograma clave. 8. Introduzca un fotograma clave vaco en el fotograma 30 en la capa de acciones y Carteles desde el panel de Propiedades, coloque el nombre Galera de fotos al fotograma clave. En el cuadro de texto Etiqueta, escriba Galera de Fotos. Observe que ahora puede visualizar una bandera roja y el nombre de etiqueta al lado derecho de Fotograma 30. La bandera roja indica que un fotograma se ha etiquetado. 9. Seleccione Fotograma 35 e introduzca un fotograma clave vaco (Insertar > Fotograma clave vaco). Utilice el panel Acciones para agregar una accin Stop a este fotograma clave y utilice el panel Fotograma para rotular el fotograma clave como Contactenos. Observe que esta vez no puede visualizar una bandera roja o un nombre de etiqueta al lado derecho de Fotograma 30. No existen fotogramas adicionales al lado derecho de Fotograma 30, de modo que Flash no puede mostrar la bandera o el nombre de etiqueta. 10.Debido a que se encuentra agregando etiquetas a los fotogramas, es prctico rotular el fotograma en donde se encuentra la pgina principal. Seleccione Fotograma 20 de la capa Acciones y etiquetas, y escriba Inicio en el cuadro de texto Etiqueta.

rea nuevas tecnologas caixanova

pgina 193 de 234

Macromedia Flash MX

Adicin de interactividad

11.Guarde su archivo como jardineria30.fla en la carpeta misarchivos. En el prximo ejercicio se activan los botones en la barra de desplazamiento de modo que pueda saltar a las secciones de Galera de Fotos y Contctenos. Para configurar los botones de desplazamiento: 1. Siga en el archivo jardineria30.fla en la carpeta misarchivos. 2. Seleccione el fotograma Inicio (Fotograma 20) en la capa de barra de desplazamiento. Asegrese de que la capa de la barra de desplazamiento est desbloqueada. 3. Seleccione el boton de Galera de Fotos en el Escenario. Debido a que el cuadro de delimitacin es similar al fondo, es difcil de visualizar. Puede verificar el panel propiedades para asegurarse que el botn est seleccionado; el panel mostrar un icono de botn con la etiqueta Ubicacin a un costado, tal como se indica en la figura 9.3.

Figura 9.3.

El panel Propiedades con el botn Galera de Fotos seleccionado.

Es necesario que agregue una accin al botn Galera de Fotos para darle instrucciones a Flash de avanzar al fotograma rotulado Galera de Fotos. Inicie el Panel de acciones si no est abierto. Observe que ahora el panel Acciones est rotulado Acciones de objetos en vez de Acciones de fotograma porque est aplicando una accin a un objeto en el Escenario y no a un fotograma en una Lnea de tiempo.

rea nuevas tecnologas caixanova

pgina 194 de 234

Macromedia Flash MX

Adicin de interactividad

Primero debe encontrar el evento de ratn que permitir saltar a un fotograma de Galera de Fotos. Asegrese de que las Acciones Control de Pelicula en la lista de caja de herramientas del panel Acciones estn ampliadas. Desplcese y haga doble click en Control de Pelcula, en la accion on. El siguiente cdigo aparece en la lista de acciones. Lo nico que esto indica es que, el on (realease)-botn del ratn se debe estar preparado para hacer algo." On (release); Si observa el panel Acciones, el panel Parmetros muestra la lnea de cdigo que ha seleccionado actualmente y todos los posibles parmetros que puede traspasar a la lnea de cdigo. Puede dejar la opcin Release seleccionada. 4. Al soltar usted debe dirigirse a algn lugar. Desplcese al principio de las Acciones bsicas y haga doble click en Ir al cdigo en la lista de acciones ahora aparece de la siguiente manera: On (release);} gotoAndPlay (1); } Si deja esto tal como est, al alcanzar la pgina principal y al hacer click en el botn Galera de Fotos, Flash rebobina hasta llegar a Fotograma 1 de la pelcula y comienza a reproducirse nuevamente. Eso no es lo que usted quiere. Usted desea saltar al fotograma Galera de Fotos. 5. Mantenga la lnea gotoAndPlay seleccionada y cambie los siguientes parmetros: Tipo: Rtulo de fotograma.

rea nuevas tecnologas caixanova

pgina 195 de 234

Macromedia Flash MX
Fotograma: Galera de Fotos.

Adicin de interactividad

Ir a y reproducir: Deseleccione, seleccione Ir y detener. El cdigo en la lista de acciones ahora aparece de la siguiente manera: On (release) gotoAndStop("Galera de Fotos"); } 6. Pruebe su pelcula, eligiendo Control > Probar documento. Al hacer click en el botn Galera de Fotos, la pelcula avanza a la seccin Galera de Fotos de su pelcula. 7. Repita los pasos 2-6 para el botn Contctenos. Asegrese de cambiar el Fotograma al rtulo Contactenos en el panel para este segundo botn. 8. Pruebe su pelcula, nuevamente (Control > Probar documento). Trate de hacer click en el botn Contctenos y luego el botn Galera de Fotos. Al hacer click en el botn Contctenos, la pelcula se desplaza hacia el fotograma Contctenos. Al hacer click en el botn Galera de Fotos, la pelcula se salta a esa seccin del sitio. 9. Guarde su archivo como jardineria31.fla en la carpeta misarchivos. Ahora puede avanzar o retroceder entre las secciones Galera de Fotos y Contctenos, pero no puede volver a la pgina principal. Ahora cree un botn invisible que puede colocar sobre el logo Jardinera de modo que siempre lo llevar a la pagina principal. Para crear un botn invisible: 1. Siga en el archivo jardineria31.fla en la carpeta misarchivos. 2. Seleccione la capa trazado de la carpeta Fotos. Elija Insertar > Capa para

rea nuevas tecnologas caixanova

pgina 196 de 234

Macromedia Flash MX

Adicin de interactividad

agregar una nueva capa y coloque el nombre a esta capa Botn Inicio. 3. Seleccione Fotograma 20 de la capa del botn Inicio y elija Insertar > Fotograma clave. 4. Seleccione la herramienta Oval desde la barra de herramientas y cambie las siguientes configuraciones en el panel Mezclador: Trazo: Sin color Relleno: # FF000 (verde) 5. Mantenga el Fotograma 20 en la capa Botn Inicio seleccionado y dibuje un circulo (arrastre con la tecla Mays presionada para comprimir el valo en un circulo) sobre la instancia del ramo trazado. El crculo debera cubrir el ramo completamente. 6. Utilice la herramienta Flecha para seleccionar el circulo que acaba de dibujar y elija Insertar > Convertir a smbolo En el cuadro de dilogo Propiedades de smbolo, escriba Botn Inicio como nombre y otorgue un comportamiento al botn smbolo. Luego haga click en Aceptar. Ahora tiene un gran botn verde que no hace absolutamente nada y que cubre su logo Jardinera. Es hora que haga el botn invisible y que le asigne acciones. 7. Haga doble click en la instancia del smbolo del botn Inicio que se encuentra en el Escenario en Fotograma 20 para abrirlo en modo de edicin de smbolos. 8. Haga click en el fotograma Reposo de la capa 1 para seleccionarlo. Cuando el fotograma Reposo est seleccionado, su puntero se convierte en una mano abierta; esto indica que puede arrastrar este fotograma clave a una nueva ubicacin. Seleccione el fotograma Reposo nuevamente y arrastre el fotograma clave al fotograma Zona Activa. Acaba de desplazar su botn amarillo hacia el fotograma Zona

rea nuevas tecnologas caixanova

pgina 197 de 234

Macromedia Flash MX

Adicin de interactividad

Activa, dejando el fotograma Reposo vaco. Nota: Si selecciona el estado Reposo y simplemente elimina el crculo del Escenario, Flash introduce automticamente un nuevo fotograma en el prximo estado, el estado Sobre. Eso no es lo que usted quiere. 9. Elija Edicin > Editar documento para volver al Men principal. 10. Seleccione el botn Inicio en el Escenario en Fotograma 20 de la capa del botn Inicio (ahora aparece como un crculo cuasi transparente de color verde agua). En el panel Acciones agregue el siguiente ActionScript al botn: on (release) { gotoAndPlay("Inicio"); } Usted puede hacer esto. Si se le olvida cmo agregar este tipo de accin a un botn, consulte los pasos 4-7 en el ejercicio previo. 11. Pruebe su pelcula (Control > Probar pelcula). Al hacer click en los botones Galera de Fotos o Contctenos, accede al fotograma apropiado. Al hacer click en el botn Inicio (sobre el logo Jardinera) accede a Fotograma 20. 12. Al finalizar, cierre la ventana Probar pelcula y guarde su pelcula como jardineria32.fla en la carpeta misarchivos. En el prximo ejercicio se crea un Men desplegable en la seccin Galera de Fotos.

rea nuevas tecnologas caixanova

pgina 198 de 234

Macromedia Flash MX
Para crear un Men desplegable:

Adicin de interactividad

1. Siga en el archivo jardineria32.fla en la carpeta misarchivos. 2. Seleccione la carpeta Galera de fotos y elija Insertar > Capa para agregar una capa nueva, arrstrela dentro de la carpeta. Nombre la nueva capa Men Galera de Fotos. Introduzca un fotograma clave (Insertar > Fotograma clave) en Fotograma 30 de la capa del Men Galera de Fotos. 3. Cree un Men desplegable dentro de su propio clip de pelcula. Elija Insertar > Nuevo smbolo del Men principal. Cuando aparece el cuadro de dilogo Propiedades de smbolo, escriba Men Galera de Fotos en el cuadro Nombre y asgnele un comportamiento al smbolo del clip de pelcula. Luego haga click en Aceptar. Flash cambia al modo de edicin de smbolos y usted se ubica en el Men Ubicacin del clip de pelcula. 4. Cambie el nombre de Capa 1 a Men y luego elija Insertar > Capa para agregar una capa nueva. Nombre la nueva capa Acciones y etiquetas. 5. Agregue una accin Stop a Fotograma 1 de la capa de Acciones y etiquetas. 6. Abra el archivo objetos.fla de la carpeta Leccion09 como una biblioteca (Archivo > Abrir como biblioteca) y seleccione la capa del Men. Arrastre una instancia del botn Desplegable de la biblioteca objetos.fla hacia el Escenario. 7. Seleccione el botn que acaba de colocar en el Escenario y abra el panel Informacin (Ventana > Info) si no est abierto. A un lado de la X e Y se encuentra un icono compuesto de una serie de cuadrados (vase figura 9.4.). Haga click en el cuadrado ubicado en la esquina z

Figura 9.4.

rea nuevas tecnologas caixanova

pgina 199 de 234

Macromedia Flash MX

Adicin de interactividad

8. Este debera ser resaltado en negro. Ahora escriba O para X y O para Y. Esto ubica el botn Selector de modo que su esquina superior izquierda este a la misma altura con el punto de registro del clip de pelcula. 9. Introduzca un fotograma clave a Fotograma 10 de la capa de Acciones y etiquetas. En el panel Propiedades, configure la etiqueta para este fotograma clave de modo que tenga el nombre Desplegable. 10.Seleccione Fotograma 10 de la capa del Men y elija Insertar > Fotograma clave. 11.Seleccione la herramienta Rectngulo de la barra de herramientas de dibujo. Utilice el panel Mezclador (Ventana > Mezclador), para modificar las siguientes configuraciones: Trazo: Negro (Verifique el Panel de trazo; el trazo debera ser de 1 pxel.) Relleno: #OOOO99 Alfa: 50 % 12. Dibuje un rectngulo en el Escenario. Seleccione el rectngulo y asegrese de seleccionar tanto el trazo como el relleno y utilice el panel Informacin para cambiar las siguientes configuraciones: W: 210 H: 100 X: O Y: 25 13. Seleccione el botn Desplegable en Fotograma 1 de la capa Men. En el panel Acciones, haga doble click sobre Control de pelcula, Goto dentro

rea nuevas tecnologas caixanova

pgina 200 de 234

Macromedia Flash MX

Adicin de interactividad

de las Acciones bsicas. Haga click en Release para deseleccionar el evento del ratn Liberar y seleccionar en su lugar Situar sobre el objeto. 14. Haga doble click en la accin Goto para cambiar el Tipo a Rtulo de fotograma y cambie el fotograma a Desplegable. Seleccione Ir a y detener. 15. Elija Edicin > Editar documento. Seleccione Fotograma 25 de la capa de Men de Galera de Fotos y arrastre una instancia del boton Desplegable al Escenario. Colquela a la derecha del texto Galera de fotos, tal como se ilustra en la figura 9.6.

Figura 9.6.

16.Pruebe su pelcula (Control > Probar pelcula). Haga click sobre el botn Galera de Fotos para obtener el Men desplegable. Al mover su puntero sobre el botn, el Men desplegable aparece. Pero no desaparecer. Arreglaremos este asunto a continuacin. 17.Guarde su pelcula como jardineria33.fla en la carpeta misarchivos. Ahora haga que el Men desplegable desaparezca. Para hacer que el Men desplegable desaparezca: 1. Siga en el archivo jardineria33.fla en la carpeta misarchivos.

rea nuevas tecnologas caixanova

pgina 201 de 234

Macromedia Flash MX

Adicin de interactividad

2. Abra la biblioteca (Ventana > Biblioteca) si no est actualmente abierta. Haga doble click en el icono cerca del Men Galera de Fotos para abrirlo en modo de edicin de smbolos. Flash cambia al modo de edicin de smbolos. 3. Seleccione el boton Desplegable y convirtalo en Smbolo eligiendo Insertar > Convertir en Smbolo. Seleccione Clip de pelcula y colquele el nombre Men desplegable. Edite este Clip de pelcula, que contendra un boton dentro de l y elija Insertar > Capa para agregar una nueva capa. Nombre la capa Botn invisible y arrstrela hasta la parte inferior del orden de visualizacin de la capa. Introduzca un fotograma clave (Insertar > Fotograma clave o F6) en Fotograma 10 de la nueva capa. 4. Seleccione la herramienta Rectngulo y mantenga el Fotograma 10 de la capa del botn invisible seleccionado para dibujar un rectngulo. En este caso, el color del rectngulo es irrelevante; recuerde que lo hara invisible. Utilice el panel de informacin para configurar su ancho (W) a 300 y su altura (H) a 30. 5. Seleccione el rectngulo y elija Insertar > Convertir a smbolo. En el cuadro de dilogo Propiedades de smbolo cuadro, tipo Botn Invisible en el cuadro de texto Nombre. Cambie el comportamiento a Botn. Haga click en Aceptar para crear el smbolo. 6. En el Men Desplegable, haga doble click sobre la instancia del smbolo del botn invisible para abrirlo en modo de edicin de smbolos. Al hacer doble click sobre el smbolo usted elige editar el smbolo en si lugar o en el contexto del resto del clip de pelcula. Haga click en el fotograma Reposo en la Capa 1 y arrastre el fotograma Reposo al fotograma Zona activa. 7. Haga click en la ficha del Men Desplegable en la parte superior de la Lnea de tiempo para volver al smbolo del Men Desplegable. 8. Seleccione la instancia del smbolo del botn Invisible en Fotograma 10 de la capa del botn Invisible y asgnele las siguientes acciones en el panel Acciones:

rea nuevas tecnologas caixanova

pgina 202 de 234

Macromedia Flash MX
on (rollOver) { gotoAndStop(1); }

Adicin de interactividad

Usted puede agregar estas acciones sin ayuda. Si tiene cualquier tipo de problema, slo debe recordar que los eventos de ratn provienen de la accin On del ratn. El gotoAndStop proviene de la accin GoTo. En este caso, la accin GoTo est configurada de modo que vaya a Fotograma1 y se detenga, lo que significa que la opcin GoTo y reproducir est deseleccionada. 9. Coloque fotogramas hasta el fotograma 10 de la capa 1 del Men desplegable. Luego coloque la instancia del botn Invisible sobre el botn Selector de ubicacin y cntrelo sobre el Men desplegable (vase figura 9.7).

Figura 9.7.
El botn Invisible est ubicado en el botn Menu Desplegable Fotos. Galera de

10. Duplique el botn Invisible en el Escenario, seleccionndolo y eligiendo Edicin > Duplicar. Arrastre el duplicado debajo del Men desplegable. 11. Duplique el botn nuevamente y grelo en 90 grados, seleccionndolo y eligiendo Modificar >Transformar > Rotar en sentido de las agujas del reloj. Arrastre el botn girado hacia el lado izquierdo del Men desplegable. Dimensione el botn (utilice el Modificador de escala) hasta que este se solape pero que no se extienda ms all de los botones

rea nuevas tecnologas caixanova

pgina 203 de 234

Macromedia Flash MX
horizontales.

Adicin de interactividad

12. Duplique el botn girado y desplcelo hacia el lado derecho del Men desplegable. 13. Introduzca una nueva capa dentro del clip Men desplegable y colquele el nombre Globo. Dibuje alli un circulo con degradado en el primer fotograma y convirtalo a boton nombrndolo con Boton Men. Coloque la siguiente accion al boton: on (rollOver) { gotoAndStop(10); } Reubique los elementos para que no se superpogan. 14. Pruebe su pelcula (Control > Probar pelcula). Haga click sobre el botn Galera de Fotos para obtener el Men desplegable. Ahora su Men aparece al desplazar el puntero sobre el botn Galera de fotos y desaparece al desplazarse sobre el recuadro de delimitacin de los botones invisibles. 15. Guarde su pelcula como jardineria34.fla en la carpeta misarchivos. Ahora tiene un Men que aparece y desaparece. A continuacin agregue una accin al botn Hawaii en el Men desplegable para cargar una pelcula en el Escenario. Antes de hacer esto, es necesario crear una nueva pelcula e importar una pelcula preparada previamente acerca de Hawaii. Para crear una nueva pelcula e importar un SWF: 1. Elija Archivo > Nuevo para crear una nueva pelcula. Modifique las propiedades de la pelcula, seleccionando Modificar > Documento. Cambie las dimensiones, configurando el Ancho a 500 pxeles y la Altura a 400 pxeles. No es necesario cambiar el color de fondo.

rea nuevas tecnologas caixanova

pgina 204 de 234

Macromedia Flash MX

Adicin de interactividad

Donde sea que usted cargue una pelcula existente, la pelcula cargada hereda las propiedades de la pelcula principal. 2. Abra como biblioteca el archivo objetos.fla y seleccione el grfico arboles. 3. Guarde este archivo como arboles.fla en su carpeta. 4. Seleccione Control > Probar pelcula. Esto no slo le permite visualizar la pelcula, pero adems crea un archivo SWF con el mismo nombre que el archivo FLA. El archivo SWF se utiliza en el prximo ejercicio. Una vez que se crea la pelcula arboles.swf, es necesario configurar las acciones para cargar la pelcula. Para cargar una pelcula en un nuevo nivel: 1. Devulvase a jardineria34.fla en la carpeta misarchivos. Si el Men Desplegable no est abierto, bralo haciendo doble click en el icono que se ubica. 2. Seleccione Fotograma 10 en la capa Boton Invisible. Seleccione el botn Arboles-Flores-Paisajes y abra el panel Acciones. 3. Haga doble click en On en la lista de caja de herramientas. Deje el evento configurado en Liberar. 4. Haga doble click en la accin Load Movie para agregarla al ActionScript. En el Panel de parmetros se encuentra en la carpeta Navegador/Red. URL: arboles.swf Ubicacin: Nivel 1 Variables: No enviar El cdigo en la lista de acciones aparece de la siguiente manera:

rea nuevas tecnologas caixanova

pgina 205 de 234

Macromedia Flash MX
on (release) {

Adicin de interactividad

loadMovieNum ("arboles.swf", 1); } Una vez que la pelcula se ha cargado es necesario descargarla si desea ir a otra seccin del sitio. 5. Vuelva a la pelcula principal y seleccione el botn Contactenos. Seleccione la lnea gotoAndStop en el panel Acciones y agregue una accin UnloadMovie. Para configurar el nivel en 1. El cdigo en la lista de acciones aparece de la siguiente manera: on (release) { gotoAndStop("Contactenos"); unloadMovieNum(1); } 6. Agregue la misma accin al botn Inicio (el botn Invisible que cubre el logo Jardinera). Otro pequeo detalle en el cual se debe fijar: no es bueno que el Men desplegable Galera de Fotos aparezca en la pgina Contctenos (en este momento es as). 7. Esto es fcilmente solucionable. Seleccione Fotograma 35 en la capa del Men Galera de Fotos e introduzca un fotograma clave vaco. As es! 8. Seleccione Control > Probar pelcula. Haga click sobre el botn Galera de Fotos para obtener su Men desplegable. Al hacer click en rboles en el Men desplegable, el archivo arboles.swf se carga.

rea nuevas tecnologas caixanova

pgina 206 de 234

Macromedia Flash MX

Adicin de interactividad

9. Guarde su archivo como jardineria35.fla. Que ocurre si sus visitantes desean obtener ms informacin acerca de rboles? No sera preferible que ellos simplemente hicieran click sobre un botn para cargar otro sitio Web acerca de rboles? Usted puede proporcionarles esta opcin; en el prximo ejercicio se utiliza Obtener URL para iniciar un navegador y cargar un nuevo sitio Web. Para agregar un vnculo a un botn: 1. Abra objetos.fla en la carpeta misarchivos. 2. Elija Insertar > Capa para agregar una nueva capa en el archivo rboles.fla. Nombre esta nueva capa Botn. 3. Asegrese de que objetos.fla en la carpeta ArchivosCurso est abierto como biblioteca (Archivo > Abrir como biblioteca). Mantenga la capa de botn seleccionada y arrastre una instancia del botn. Ms informacin de la biblioteca objetos.fla hacia el Escenario. (vase figura 9.8). 4. Seleccione el botn ms informacin y abra el Panel Acciones.

Figura 9.8.
Coloque el botn Ms information en arboles.fla.

5. Haga doble click en Evento de ratn (on) en la lista de caja de herramientas. Deje el parmetro de evento configurado en liberar. Haga doble click en la accin get URL En el panel Parmetros, escriba
http://www.sobrejardineria.com el cuadro de texto URL. Configure la

rea nuevas tecnologas caixanova

pgina 207 de 234

Macromedia Flash MX
Ventana a_blank.

Adicin de interactividad

6. Guarde su archivo, pero no le cambie el nombre. Pruebe su pelcula (Control > Probar pelcula) para exportar el archivo SWF. 7. Si an no lo ha abierto, abra jardineria35.fla de la carpeta misarchivos. No es necesario realizar cambios; solo pruebe su pelcula (Control > Probar pelcula). Desplcese a la seccin Galera de Fotos y haga click en el botn rboles. Ahora haga click en el botn Ms informacin. Su navegador se inicia con el sitio sobrejardineria.com cargado

(suponiendo que usted tiene conexin a Internet).

Utilizacin de cuadros de introduccin de texto Con los cuadros de introduccin de texto de Flash para introducir datos, usted puede crear formulario y encuestas grficamente atrayentes. Usted puede utilizar estos cuadros de introduccin de texto para recopilar informacin acerca de sus usuarios, otorgarles a sus usuarios un medio para conectarse a su sitio Web, crear formularios de pedidos y mucho ms. En el prximo ejercicio, se utiliza la herramienta Texto y el Panel de Propiedades para crear unos cuadros de introduccin de texto para su formulario de Contctenos. Para crear un cuadro de introduccin de texto: 1. Seleccione la capa Grficos de fondo en jardineria35.fla para agregar una nueva capa. Nombre esta nueva capa Introduccin de formulario. 2. Seleccione Fotograma 35 de la capa Introduccin de formulario y agregue un fotograma clave seleccionando Insertar > Fotograma.

rea nuevas tecnologas caixanova

pgina 208 de 234

Macromedia Flash MX

Adicin de interactividad

3. Asegrese de no tener un texto seleccionado. Abra el panel Propiedades Ventana > Propiedades y seleccione la herramienta Texto. Configure lo siguiente: Fuente: Verdana Altura de fuente: 12 Ajustar entre caracteres: no seleccionado Posicin de caracter: Normal Color de texto (relleno): Blanco 4. Ahora abra el men desplegable de herramienta Texto (vase figura 9.9.) y configure de la siguiente forma: Tipo de texto: Introduccin de texto Tipo de Inea: Lnea nica Mostrar borde: seleccionado Mximo de caracteres: 5

Figura 9.9.
El Panel de opciones de texto.

5. Asegrese de tener Fotograma 35 de la capa Introduccin de formulario seleccionado. Ahora seleccione la herramienta Texto y dibuje un cuadro de texto en el Escenario. 6. Una vez que el cuadro de introduccin de texto se haya dibujado, aparecen las opciones de configuracin de Variables en el panel de propiedades de texto. El nombre de un variable aparece automticamente en el cuadro; cambie el Variable a Nombre.

rea nuevas tecnologas caixanova

pgina 209 de 234

Macromedia Flash MX

Adicin de interactividad

Cambie a la herramienta Flecha y coloque el cuadro de introduccin de texto en el contorno cerca del encabezamiento Nombre. Repita el paso anterior para un campo de texto llamado email. Coloque una etiqueta seleccionando texto esttico con el texto Nombre e Email. (Ver figura 9.10.)
Figura 9.10.

7. Cierre la ventana Probar pelcula, y verifique que su formulario aparece en la seccion contactenos y guarde la pelcula como jardineria36.fla.

Utilizacin de clips inteligentes Los clips inteligentes son elementos reutilizables tales como los Mens desplegables y los formularios de opcin mltiple. Dichos elementos pueden ser compartidos a travs del sitio, con otros miembros de su equipo creativo o puede permitir que otros dentro de la comunidad Flash los utilicen. Los clips inteligentes son creados exactamente de la misma manera que los dems smbolos, pero pueden actuar sobre los parmetros que estn asociados a ellos. Incluso puede crear un archivo SWF para utilizar una interfaz de uso fcil con el clip inteligente que acaba de crear. La interfaz le permitir insertar los parmetros y personalizar el clip segn sus necesidades. En el prximo ejercicio, se construyen los formularios de Contctenos en Fotograma 35. Es necesario agregar unos pocos clips inteligentes al formulario para obtener ms informacin de los visitantes.

rea nuevas tecnologas caixanova

pgina 210 de 234

Macromedia Flash MX
Para utilizar un clip inteligente:

Adicin de interactividad

1. Abra jardineria36.fla de la carpeta misarchivos. (Es probable que ya tenga este archivo abierto del anterior ejercicio.) 2. Seleccione Fotograma 35 de la capa Introduccin de formulario y abra el panel de Componentes desde Ventana > Componentes. 3. Arrastre una instancia del smbolo del clip inteligente de la casilla de verificacin (check Box) al Escenario y utilice la flecha para colocarlo debajo el campo de texto del email. Utilice el panel Info para configurar los siguientes coordenadaas: X = 260 Y = 262 4. Asegrese de que la instancia del clip inteligente o componente de la casilla de verificacin este seleccionado en el Escenario y elija y vea el panel de Propiedades. 5. Configure lo siguiente en el panel (haga doble click sobre el valor para cambiarlo): Nombre de instancia: Informacin Activado: falso Label: Deseo Recibir informacin 6. Dibuje un rectngulo blanco y colquelo detrs del componente. 7. Verifique lo que ha hecho, eligiendo Control > Probar pelcula. Es necesario ir al fotograma Contctenos para ver su trabajo, de modo que debe hacer click en Contctenos en el Men del sitio. Usted visualiza su casilla de verificacin. Haga click en distintas reas para ver que sucede. 8. Cierre la ventana Probar pelcula y guarde la pelcula como jardineria37.fla en la carpeta misarchivos.

rea nuevas tecnologas caixanova

pgina 211 de 234

Macromedia Flash MX

Adicin de interactividad

Construccin de una precarga Despus de agregar grficos, sonido y contenido a su pelcula, el tamao del archivo se puede tornar bastante grande. Qu sucede si un usuario hace click sobre un botn para ir a un fotograma particular, pero dicho fotograma aun no ha sido descargado an? Flash no ir a fotogramas que no han sido cargados de modo que se debe asegurar que todo lo que requiere ser cargado sea cargado antes de permitir que Flash realice dichas acciones. Una solucin para resolver este problema es un precargador o precarga. Un precargador es una animacin que se reproduce mientras los contenidos de la pelcula de Flash se descargan. Para lograr esto, debe utilizar la accin ifFrameLoaded (Si el fotograma esta cargado). Esta accin prctica y til, que usualmente est conectada a un fotograma clave, verifica que si se ha cargado un fotograma en particular. If Frame Is Loaded es una accin condicional que verifica si una condicin es verdadera, particularmente si se ha cargado un fotograma. Puede asignar acciones adicionales dentro de la accin If Frame Is Loaded, dichas acciones funcionan slo si las condiciones son verdaderas. Esto significa que usted puede configurar su animacin de precargador de modo que vaya solamente al fotograma especfico siempre y cuando dicho fotograma haya sido cargado. Que sucede si el fotograma no est cargado, de modo que la condicin es falsa? Debe responder a esto mediante la incorporacin de una segunda accin ms adelante en la Lnea de tiempo. Esta segunda accin puede decirle a la Lnea de tiempo de la pelcula que vuelva a la accin If Frame Is Loaded para realizar una segunda revisin. En el prximo ejercicio, se aprende cmo construir un precargador simple. Se crea una animacin que le dice a sus visitantes que la pelcula est cargada y agrega las acciones necesarias que hacen funcionar el precargador.

rea nuevas tecnologas caixanova

pgina 212 de 234

Macromedia Flash MX

Adicin de interactividad

Ms adelante tiene la oportunidad de asegurarse que el precargador est funcionando. Tambin tiene la oportunidad de utilizar escenas en el prximo ejercicio que le permiten dividir su pelcula en porciones discretas que facilitan el manejo del mismo. La accin ifFrameLoaded se ha desestimado en Flash 5; se recomienda tambien utilizar la accin MovieClip._framesloaded. Para construir un precargador: 1. Asegrese de que an tiene abierto jardineria37.fla. Abra el panel Escena eligiendo Ventana > Escena.
Figura 9.11.
El panel Escena.

3. Haga doble click en Escena 1 en el panel Escena. Al hacer doble click en el nombre de la escena esta resaltada. Escriba Sitio en el espacio proporcionado y presione Intro (Windows) o Retorno (Macintosh). 4. Agregue una nueva escena haciendo click en el botn Agregar escena (+) que se encuentra en la esquina inferior derecha del panel Escena. La nueva escena se agrega automticamente despus de la escena existente, pero es deseable que quede antes. Seleccione la escena en la ventana Escena y arrstrela sobre la escena Sitio. 5. Configure el nombre del sitio que acaba de agregar como Precargador, mediante el mtodo utilizado en el paso 3. 6. Asegrese de que ha seleccionado la escena del Precargador en el panel Escena. Al hacer esto esta estableciendo dicha escena como la ms actual. 7. La escena del Precargador tiene una capa, actualmente nombrada Capa 1. Cambie el nombre de la capa a Acciones y etiquetas.

rea nuevas tecnologas caixanova

pgina 213 de 234

Macromedia Flash MX

Adicin de interactividad

8. Seleccione Fotograma 5 de la capa de Acciones y etiquetas en la escena del Precargador y agregue un fotograma clave eligiendo Insertar > Fotograma clave. 9. Introduzca otro fotograma clave a Fotograma 10 de la capa de Acciones y etiquetas. Rotule este segundo fotograma clave como Bucle. 9. Seleccione el fotograma 5 y abra el Panel de acciones (Ventana > Acciones). En el Panel de acciones, expande las Condiciones/Bucles y haga doble click en la accin If para asignarla al fotograma 5. Luego configure los siguientes parmetros: Condicin: _framesloaded>=_totalframes Este verifica si el fotograma han cargado todos los fotogramas del Sitio. Luego agregue la accion Goto, para llevar a reproducir la escena Sitio si es que se cumpli esta condicin. if (_framesloaded>=_totalframes) { gotoAndPlay("Sitio", 1); } Esta accin verifica si el fotograma Contctenos en el sitio ha sido cargado. Si el fotograma ha sido cargado, la pelcula va al primer fotograma en la escena del sitio y se reproduce. Que sucede si el fotograma aun no ha sido cargado? La pelcula sigue reproducindose sin verificar si el fotograma ha sido cargado. Es necesario agregar otra accin a la Lnea de tiempo para hacer que la pelcula verifique el fotograma nuevamente. 10. Seleccione el fotograma Bucle (Fotograma 10) en la escena del

rea nuevas tecnologas caixanova

pgina 214 de 234

Macromedia Flash MX

Adicin de interactividad

Precargador. En el Panel de acciones, ample las Acciones bsicas y haga doble click en la accin Ir a. Para obtener esta accin configure los siguientes parmetros: Escena: <escena actual> Tipo: Etiqueta de fotograma Ir a y reproducir: seleccionado Si el fotograma Contctenos no est cargado, ocasionando que se ignoren las acciones en el fotograma Verificar, las acciones en el fotograma Bucle obligan a la pelcula a devolverse a dicho fotograma para verificarlo nuevamente. Esta configuracin mantiene la pelcula en un bucle hasta que se haya cargado el fotograma Contctenos. Una vez que el fotograma ha sido cargado, las acciones en el fotograma Verificar obligan a la pelcula a ir al primer fotograma de la escena del sitio y reproducirse. 11. Guarde su archivo como jardineria38.fla en la carpeta misarchivos. Ahora tiene un precargador activo, pero sin animacin. Eso se agrega en el prximo ejercicio. Para agregar la animacin del precargador: 1. Asegrese de que an tiene abierto jardineria38.fla. Agregue una segunda capa a la escena del Precargador. Nombre esta nueva capa Animacin de precargador y colquela en la ltima en el orden de visualizacion de la capa. 2. Abra objetos.fla en la carpeta ArchivosCurso como una biblioteca (Archivo > Abrir como biblioteca). Asegrese de tener la capa de la nueva animacin del precargador seleccionado y arrastre una instancia del clip de pelcula de dicha animacin desde la biblioteca objetos.fla al Escenario.

rea nuevas tecnologas caixanova

pgina 215 de 234

Macromedia Flash MX

Adicin de interactividad

Utilice el panel Alinear para centrar el clip de pelcula en el Escenario. 3. Pruebe su pelcula (Control > Probar pelcula). Cuando pruebe la pelcula por primera vez, es probable que no vea su precargador debido a que la pelcula se carga casi inmediatamente al visualizarlo en su equipo. Para ver el precargador debe simular la grabacin. 4. Con modo Probar pelcula, elija Ver > Creador de perfil de ancho. Luego elija Ver > Mostrar grabacin. Un grfico aparece en la parte superior de la pantalla. Srvase tomar nota de la barra verde a lo largo de la parte superior del grfico; esto muestra lo que ha sido cargado en la pelcula. La pequea flecha en la parte superior del grfico indica el fotograma que se est reproduciendo actualmente. La flecha avanza y retrocede entre los fotogramas Verificar y Bucle hasta que la barra verde alcance el final de la pelcula; luego, debe saltar al primer fotograma en la escena del sitio y comenzar a reproducirla. 5. Guarde su archivo como jardineria39.fla en la carpeta misarchivos.

Construccin de un conmutador de msica Si agrega un bucle musical a su pelcula es aconsejable que le otorgue a sus visitantes la opcin de desactivarlo. A pesar de que el bucle musical puede sonar muy bien despus de las primeras veces puede comenzar a molestar. Usted no quisiera que sus visitantes dejaran de ir al sitio por la msica, de modo que debe otorgarles un conmutador de msica. Un conmutador de msica es un clip de pelcula simple que activa y

rea nuevas tecnologas caixanova

pgina 216 de 234

Macromedia Flash MX

Adicin de interactividad

desactiva la msica. En el prximo ejercicio se aprende a construir un conmutador de msica con el botn Flor que usted cre en la Leccin 7.Para hacer un conmutador de msica: 1. An debera estar en jardineria39.fla. Utilice el panel Escena (Ventana > Paneles > Escena) para entrar a la escena del Sitio y seleccione Fotograma 20 de la capa del conmutador de msica. 2. Seleccione la instancia del botn Flor que se encuentra en el Escenario en Fotograma 20 y seleccione Insertar > Convertir a smbolo. Se abre el cuadro de dilogo Propiedades de smbolo. 3. En el cuadro de dilogo propiedades de smbolo, nombre el smbolo como Conmutador de msica y otrguele un comportamiento de Clip de pelcula. Haga click en Aceptar para crear su smbolo. 4. Mantenga la instancia del smbolo que acaba de crear seleccionado en el Escenario (debera estar seleccionado automticamente una vez que el smbolo est creado) y elija Edicin > Editar seleccionado. Ahora el smbolo Conmutador de msica estar en modo de edicin de smbolos. 5. Nombre la capa existente en el smbolo del clip de pelcula del Conmutador de msica como Botn. Seleccione la capa de botn y agregue una nueva capa sobre esta denominada Acciones y etiquetas. Agregue una tercera capa denominada Sonidos y arrstrela hasta la parte inferior del orden de Visualizacin de la capa.

rea nuevas tecnologas caixanova

pgina 217 de 234

Macromedia Flash MX

Adicin de interactividad

Es necesario agregar una etiqueta al conmutador de msica, de modo que los visitantes del sitio sepan su funcin. Abra el panel Caracter y cambie las siguientes configuraciones: Fuente: Arial Altura de f uente: 12 Ajustar entre caracteres: no seleccionado Posicin de caracter: Normal Color de texto (relleno): Blanco Nota: Debido a que cre un cuadro de introduccin de texto anteriormente en esta Leccin, quizs tenga que abrir el Panel de opciones de texto y cambiar el Tipo de texto a Esttico y deseleccione la opcin Seleccionada. Seleccione la capa Botn y utilice la herramienta Texto para escribir OFF debajo el botn. Centre el texto debajo del botn. 6. Seleccione Fotograma 1 de la capa de Acciones y etiquetas. Utilice el panel Acciones para otorgar una accin Stop a este fotograma clave. Luego utilice el panel Fotograma para rotular este fotograma clave MusicOn. 7. Seleccione Fotograma 1 de la capa Sonido y abra el panel Propiedades Realice las siguientes modificaciones al fotograma: Sonido: principal.mp3 Efecto: Ninguno Sincronizar: Inicio Bucle: 1O 8. Introduzca un fotograma clave a Fotograma 2 de la capa de Acciones y etiquetas. Otrguele a este nuevo fotograma clave una accin Stop y rotlelo musicOff. Introduzca otro fotograma clave a Fotograma 2 de la capa Botn. Seleccione la herramienta Texto y cambie msica

rea nuevas tecnologas caixanova

pgina 218 de 234

Macromedia Flash MX
desactivada por ON.

Adicin de interactividad

9. Introduzca otro fotograma clave en Fotograma 2 de la capa Sonidos. Utilice el panel Sonidos para realizar los siguientes cambios al sonido en este fotograma clave: Sonido: principal.mp3 Efecto: Ninguno Sincronizar: Detener Bucles: O 10. Ahora seleccione la instancia del smbolo del botn Flor en Fotograma 1 de la capa Botn. Utilice el panel Acciones para agregarle la accin GoTo con los siguientes parmetros: Escena: <escena actual> Tipo: Etiqueta de fotograma Fotograma: musicOff Ir a detener 11. Seleccione la primera lnea del ActionScript en el panel derecho del panel Acciones. Luego mantenga presionado Mays y haga click en la ltima lnea del ActionScript. Mantenga el ActionScript seleccionado y haga click con el botn derecho del ratn (Windows) o Control-Click (Macintosh) y seleccione Copiar del Men contextual. 12. Seleccione la instancia del smbolo del botn Flor en Fotograma 2 de la capa Botn. Haga click con el botn derecho del ratn (Windows) o Control-Click (Macintosh) en el panel derecho del panel Acciones y elija Pegar del Men contextual. El ActionScript que copi desde el botn en Fotograma 1 ahora se aplica al botn en Fotograma 2. 13. Seleccione la lnea que contiene la accin gotoAndStop y cambie el

rea nuevas tecnologas caixanova

pgina 219 de 234

Macromedia Flash MX
Fotograma a musicOn.

Adicin de interactividad

14. Vuelva a la Lnea de tiempo de la pelcula principal, eligiendo Edicin > Editar pelcula. Ya no es necesario la capa de pista de sonido de modo que lo puede seleccionar y eliminar. 15. Pruebe su pelcula (Control > Probar pelcula). Ahora puede activar y desactivar la msica, haciendo click en el conmutador de msica. 16. Guarde su archivo como jardineria4O.fla en la carpeta misarchivos.

Tareas adicionales Trate de agregar otro clip inteligente a su formulario. Puede utilizar tambien distintos campos de texto para recabar ms datos de los usuarios.

rea nuevas tecnologas caixanova

pgina 220 de 234

Macromedia Flash MX
Notas del estudiante

Adicin de interactividad

rea nuevas tecnologas caixanova

pgina 221 de 234

Macromedia Flash MX

Publicacin y exportacin

Leccin 10: Publicacin y exportacin de sus pelculas Macromedia Flash.


Objetivos Al terminar esta seccin habr entendido: Cmo preparar sus archivos para publicacin. Cmo publicar sus archivos Flash. Cmo crear una pelcula Flash que no requiere un Reproductor de Flash. Y habr aprendido: Diferentes formas de publicar los archivos en Flash. Cmo optimizar su archivo Flash en tamao y calidad. Acaba de pasar todo este tiempo creando el increble sitio Web Jardinera Resorts, pero ahora necesita prepararlo para su distribucin en el Web. El comando Publicar (Archivo Publicar) crea todos los archivos que usted necesita para entregar su pelcula de Flash. El comando Publicar crea por defecto un archivo SWF que contiene su pelcula y un archivo HTML que, a su vez, contiene el cdigo para introducir el archivo SWF. Despus de que Flash le haya creado esos archivos, debe cargarlos a su servidor Web. Los visitantes slo necesitan visualizar el archivo HTML para ver el archivo SWF. Por supuesto, ellos necesitan tener instalado el reproductor de Flash para que funcione correctamente. Si le preocupa que sus espectadores no tengan el reproductor de Flash, puede cambiar la configuracin de publicacin (archivo>Configuracin de publicacin) para que el comando publicar tambin cree una versin ejecutable

rea nuevas tecnologas caixanova

pgina 222 de 234

Macromedia Flash MX

Publicacin y exportacin

de la pelcula Flash para los equipos con Windows y Macintosh. La versin ejecutable de la pelcula de Flash se conoce por el nombre de proyector. Tambin puede usar la configuracin de la publicacin para que Flash publique una plantilla Generator (SWT), imagen GIF, imagen JPEG, imagen PNG, pelcula QuickTime o archivo RealPlayer SMIL.

Optimizacin Antes de publicar su pelcula por primera vez verifique cmo los usuarios realmente la ven en el Web. Puede hacer esto en Flash utilizando el Creador de perfil para ancho de banda, el que vimos brevemente en la Leccin 9, y el Men Depuracin en el modo probar pelcula. El Creador de perfil para ancho de banda proporciona una representacin grfica del tamao de su pelcula por fotograma (vase figura 10.1.). Puede utilizar el Men Depuracin para elegir una velocidad de mdem con la cual el creador de perfil para ancho de banda puede competir. Todos los elementos que se encuentran sobre la Inea roja causaran algunos problemas de rendimiento de descarga en la velocidad del mdem que seleccion en el Men Depurar (vase figura 10.2.).

Figura 10.1.
El Creador de perfil para ancho de banda.

rea nuevas tecnologas caixanova

pgina 223 de 234

Macromedia Flash MX

Publicacin y exportacin

Figura 10.2.
Men Depurar.

Para probar el rendimiento de descarga: 1. Abra el archivo jardineria40.fla desde la carpeta misarchivos y elija Control > Probar pelcula. La pelcula se abre en el modo Probar pelcula. Cada vez que pruebe la pelcula de esta forma, Flash crea un archivo SWF en el directorio donde guard por ltima vez el archivo FLA. El nuevo archivo tiene el mismo nombre que su archivo FLA. 2. Ahora seleccione Depuracin > 56k (4.7 KB/s) desde el Men Probar

pelcula para competir con el mdem 56K. EL Creador de perfil para ancho de banda an debera estar abierto desde la Leccin 9. De lo contrario, puede abrirlo eligiendo Ver > Creador de perfil para ancho de banda. La parte izquierda del Creador de perfil para ancho de banda contiene informacin bsica de pelculas: dimensiones, tamao del archivo, longitud e imgenes por segundo. La parte derecha del creador de perfil para ancho de banda contiene un grfico que muestra el tamao del archivo en cada fotograma. La lnea roja en el grfico indica si un fotograma dado graba y lee en tiempo real con la velocidad del actual mdem establecida en el Men Control. Si una barra sobrepasa la lnea roja la pelcula debe esperar hasta que dicho fotograma est cargado.

rea nuevas tecnologas caixanova

pgina 224 de 234

Macromedia Flash MX

Publicacin y exportacin

Nota: Ahora que configur el modo Probar pelcula para mostrar el cuadro de dilogo Ancho de banda, todas las pelculas que pruebe incluyen esta caracterstica. Para activarlo o desactivarlo elija Ver > Creador de perfil para ancho de banda. 3. Elija Ver > Mostrar grabacin y lectura continua desde el Men Probar pelcula. Aparece una barra verde en la parte superior del Creador de perfil para ancho de banda para indicar el porcentaje de la pelcula se ha cargado. Cuando activa mostrar grabacin y lectura continua se ve la pelcula como si estuviese vindola en el Web en un mdem que tiene la misma velocidad del mdem que eligi en el Men Depuracin. Note que la barra verde a menudo deja de moverse en lugares donde las barras sobrepasan la Inea roja. 4. Cierre la ventana Probar pelcula. No dependa completamente del Creador de perfil para ancho de banda para probar el rendimiento de su pelcula. Siempre prubela en varias conexiones de Internet, en diferentes computadoras y sistemas operativos. Tambin cree un informe de tamao cuando publique su pelcula como se ve ms adelante en esta leccin. Cuanto ms grande sea el archivo de la pelcula, ms prolongado es el tiempo de descarga. Cuando identifica fotogramas demasiado grandes para una configuracin eficiente, tal como lo indica el Creador de perfil para ancho de banda, quizs quiera optimizar su pelcula. Puede tomar varios pasos para preparar su pelcula para una ptima reproduccin. Como parte del proceso de publicacin, Flash ejecuta automticamente algunas optimizaciones en pelculas, incluyendo la deteccin de formas duplicadas en exportacin, la ubicacin de estos en el archivo slo una vez y la conversin de grupos anidados en grupos sencillos. Puede usar las siguientes tcnicas de optimizacin para que

rea nuevas tecnologas caixanova

pgina 225 de 234

Macromedia Flash MX
su pelcula de Flash sea an mejor.

Publicacin y exportacin

Utilice smbolos para cada elemento que aparece ms de una vez. Utilice animaciones interpoladas cuando sea posible. Ocupan menos espacio que una serie de fotogramas claves. Utilice clips de pelculas en vez de smbolos de grficos para secuencias animadas. Evite la animacin de mapas de bits. Utilcelos como fondos o elementos estticos. Siempre utilice sonidos MP3 cuando sea posible. Siempre utilice elementos de grupo cuando sea posible. Siempre optimice las formas cuando sea posible. Puede hacer esto en Flash al seleccionar la forma y al elegir Modificar >Curvas>Optimizar desde el Men principal. Restrinja el nmero de diferentes tipos de Ineas especiales como Ineas discontinuas y de punto. Restrinja el nmero de fuentes y estilos de fuente. Cuando introduzca las fuentes seleccione los caracteres que necesita y no toda la fuente. Asegrese de utilizar degradados y trasparencias alfa de manera econmica.

Configuracin de publicacin Flash le proporciona muchas opciones para publicar sus archivos. Adems de SWF, puede exportar su archivo como una imagen GIF o un archivo de Proyector de Windows entre otros. Una nueva caracterstica de Flash MX es la capacidad de exportar al formato RealPlayer (SMIL). Flash tambin publica el archivo HTML que se necesita para mostrar su pelcula (u otra imagen) en la Web.

rea nuevas tecnologas caixanova

pgina 226 de 234

Macromedia Flash MX
Para publicar su pelcula:

Publicacin y exportacin

1. An debe tener el archivo jardineria40.fla abierto desde la carpeta misarchivos. Elija Archivo > Guardar como y guarde el archivo misitio.fla en su carpeta misarchivos. Esto permite que sus archivos publicados sean un poco ms fciles de reconocer. 2. Elija Archivo > Configuracin de Publicacin.

Figura 10.3.

Se abre el cuadro de dilogo Configuracin de publicacin (vase Figura 10.3.). 3. En la ficha de formatos del cuadro de dilogo Configuracin de publicacin, seleccione los formatos de Flash, HTML, Imagen GIF, Proyector de Windows, Proyector de Macintosh. Mientras selecciona un formato que tiene la configuracin de la publicacin, aparece una ficha para ese formato. 4. Haga clic en la ficha Flash. La Configuracin de publicacin de Flash

rea nuevas tecnologas caixanova

pgina 227 de 234

Macromedia Flash MX

Publicacin y exportacin

aparece en el cuadro de dilogo Configuracin de publicacin (Vase Figura10.4.)

Figura 10.4.
La Configuracin de publication de Flash aparece en el cuadro de dilogo de Configuracin de publicacin.

5. Modifique las siguientes configuraciones de Flash: Orden de carga: Configrelo de abajo hacia arriba. Esto

determina el orden en que se cargan las capas en cada fotograma individual. Es importante al momento de cargar archivos mediante mdems lentos. Flash muestra cada capa que aparece apenas se haya descargado de arriba hacia abajo primero carga la capa superior en cada fotograma y luego carga cada fotograma subsiguiente en orden. de abajo arriba hace lo opuesto. Genere un informe de tamao: Asegrese que esto esta seleccionado. Le indica a Flash que cree un archivo de texto que contiene el tamao de cada archivo individual. Repase este documente despus de que haya publicado su pelcula. Protjase de la importacin: Seleccione esta opcin. Cuando se protege de la importacin su archivo SWF no puede ser importado

rea nuevas tecnologas caixanova

pgina 228 de 234

Macromedia Flash MX

Publicacin y exportacin

a Flash. Esto impide que otras personas roben su pelcula. Versin: Elija Flash 6 desde el Men desplegable. Usted tiene la opcin de elegir otras versiones de Flash desde este Men, pero si lo hace puede perder un poco de la funcionalidad de su pelcula. Si utiliza algo que sea especfico de Flash MX y lo exporta como una versin anterior, puede perder toda las partes de la pelcula que sean especifico de Flash MX. 6. Siga en la ficha Flash y haga clic en Establecer junto a la configuracin de evento audio. Se abre el cuadro de dilogo Configuracin de sonido (vase Figura 10.5.

Figura 10.5.
El cuadro de dilogo Configuracin de sonido.

7. Configure la Compresin en MP3, Velocidad de bit en 32kbps y Calidad en rpido. Luego haga clic en Aceptar. Esto configura su pelcula de forma de que cualquier sonido de evento que no tiene configuraciones de Compresin individual utilice estas configuraciones. 8. Haga clic en la ficha HTML. Las configuraciones de HTML aparecen en el cuadro de dilogo Configuracin de publicacin (vase Figura10.6.).

rea nuevas tecnologas caixanova

pgina 229 de 234

Macromedia Flash MX

Publicacin y exportacin

Figura 10.6.
Las configuraciones de HTML aparecen en el cuadro de dilogo Configuracin de publicacin.

9. Modifique las siguientes configuraciones de HTML: Plantilla: Elija Solo Flash (Predeterminado) desde el Men desplegable. Esto crea el HTML que se introduce en su archivo. Dimensiones: Elija Porcentaje desde el Men desplegable. Esto permite que su pelcula se adapte al tamao del navegador Web del usuario. Visualizar Men: Deseleccione esta opcin. Esto deshabilita el Men de acceso directo cuando los usuarios hacen clic en el botn derecho (Windows) o Control-Clic (Macintosh) en la pelcula mientras se visualiza mediante el archivo HTML en el navegador. Calidad: Asegrese de que esto est configurado en Alto. Bajo: Da prioridad a la reproduccin sobre la calidad y desactiva la visualizacin suavizada.

rea nuevas tecnologas caixanova

pgina 230 de 234

Macromedia Flash MX

Publicacin y exportacin

Auto-bajo: Es similar a bajo pero mejora la calidad cuando es posible (si Flash determina que la computadora puede manejar la visin suavizada, lo activa). Auto Alto: Da igual prioridad a la reproduccin como a la calidad (esto reduce primero el aspecto si la reproduccin est sufriendo problemas y desactiva la visualizacin suavizada si las imgenes por segundo siguen disminuyendo). Medio: Produce una mejor calidad que bajo (no visualiza el suavizado de los mapas bits pero si lo aplica). Alto (predeterminado): Da prioridad al aspecto sobre la reproduccin. Perfecto: Da el aspecto de una perfecta calidad sin preocuparse de la velocidad (todas las imgenes y mapas bit son suavizadas). 10. Cuando este listo para publicar su pelcula, haga clic en el botn Publicar en la parte derecha del cuadro de dilogo. Se abre el cuadro de dilogo Publicacin e indica el progreso de la publicacin de la pelcula. 11. Para guardar todos los cambios que hace en Configuracin de publicacin, haga clic en Aceptar. Haga clic en Cancelar si no quiere guardar los cambios que hace. 12. Ahora observe todos los archivos que acaba de publicar. EL archivo HTML introduce automticamente el archivo SWF. Vea el cdigo fuente de HTML para saber lo que contiene. Si quiere que los visitantes puedan ver su pelcula en el Web, tiene que cargar los archivos HTML y SWF. 13. Si est trabajando en un ordenador con Windows, abra el proyector de Windows (EXE) y si esta trabajando en un ordenador con Macintosh, abra el proyector de Macintosh.

rea nuevas tecnologas caixanova

pgina 231 de 234

Macromedia Flash MX

Publicacin y exportacin

Puede mandar un proyector a alguien que no tiene instalado el Reproductor de Flash y an deberan visualizarlo. 14. Vuelva a Flash y guarde su documento Misitio.fla una ltima vez. Termin!

Tareas adicionales Abra el informe de tamao (misitio Report.text) que cre al publicar la pelcula. Vea las estadsticas en el informe de tamao y piense cmo puede optimizar su pelcula. Si tiene una conexin Internet y un poco de espacio en el servidor cargue sus archivos HTML y SWF. Luego navegue por ellos para verlos en Internet.

rea nuevas tecnologas caixanova

pgina 232 de 234

Macromedia Flash MX
Notas del estudiante

Publicacin y exportacin

rea nuevas tecnologas caixanova

pgina 233 de 234

Macromedia Flash MX

Apndice

Apndice: recursos adicionales


Recursos de flash: Centro de soporte de Flash: www.macromedia.com/support/flash Amussen interactivo: www.turtleshell.com/asm/ FlashCentral: www.flashcentral.com/ FlashLite: www.flashlite.net/ FlashPlanet: www.flashplanet.com/ Virtual-FX: www.virtual-fx.net/

Recursos de generador: Central de soporte de flash : www.macromedia.com/support/ generator. FlashGen: www.flashgen.com/ Red de desarrolladores de Generator: www.gendev.net/

rea nuevas tecnologas caixanova

pgina 234 de 234

You might also like