Manual flash 6to semestre 1ra version publicar

33 %
67 %
Information about Manual flash 6to semestre 1ra version publicar
Books

Published on February 24, 2014

Author: MireyaRodrguez

Source: slideshare.net

Description

Apuntes y trabajos para la Capacitación Producción de animaciones con elementos Multimedia

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. ADOBE¬ģ FLASH ¬ģ CS5 mireyaisela@hotmail.com Apuntes y Trabajos M en NTI Mireya Isela Rodr√≠guez Orozco M en I. Juan Alfonso Guzm√°n Zavala. Nombre del Alumno: Plantel: Grado/Grupo/Turno. P√°gina 1

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Avisos leg ales Apuntes y Trabajos Para la Capacitación SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. M en NTI Mireya Isela Rodríguez Orozco M en I. Juan Alfonso Guzmán Zavala. Documentos seleccionados solo con fines educativos. mireyaisela@hotmail.com Página 2

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Introducci√≥n Flash CS5 es una potente herramienta que nos permite crear diferente tipo de contenido, como por ejemplo gr√°ficos vectoriales, animaciones, recursos interactivos, aplicaciones multimedia, juegos, etc. En esta gu√≠a comenzaremos conociendo las herramientas de edici√≥n gr√°fica, para despu√©s adentrarnos en las diferentes herramientas de animaci√≥n que ofrece Flash CS5, como por ejemplo el editor de movimiento, la animaci√≥n de huesos y las herramientas 3D. Tambi√©n a√Īadiremos sonido a nuestras animaciones. Objetivo El alumno al finalizar ser√° capaz de realizar pel√≠culas flash de uso cotidiano en el dise√Īo web: banners, presentaciones animadas, pel√≠culas interactivas, etc. Adem√°s de incluir utilidades multimedia como sonido y v√≠deo. mireyaisela@hotmail.com P√°gina 3

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Tabla de contenido Bloque I : Manipular las funciones de las barras y paneles. ............................................................................. 7 Entorno de trabajo ........................................................................................................................................ 7 1. Identifica la barra de herramientas principal. .................................................................................................... 8 Barra de Men√ļs. ..................................................................................................................................... 9 El Escenario ...........................................................................................................................................10 La ventana de L√≠nea de Tiempo..............................................................................................................12 Propiedades de la pel√≠cula .....................................................................................................................13 Dimensiones de la pel√≠cula ....................................................................................................................14 2.- Utilizar la ventana de herramientas principal. ......................................................................................................15 Guardar el espacio de trabajo ................................................................................................................16 Para guardar una configuraci√≥n de pantalla seguimos estos pasos. ........................................................17 3.- Utiliza barra de herramientas, de control y de edici√≥n y maneja los diferentes paneles. .......................17 Cuadr√≠cula .............................................................................................................................................18 Encajar ..................................................................................................................................................18 Acerca de las im√°genes de vectores y mapas de bits ..............................................................................19 Im√°genes de vectores ............................................................................................................................19 Im√°genes de mapa de bits .....................................................................................................................19 Diferentes tipos de Archivos .fla y .swf ...................................................................................................20 Abrir un documento. .............................................................................................................................21 Trabajar con varios documentos. ...........................................................................................................21 Pre visualizaci√≥n y prueba de pel√≠culas ..................................................................................................22 Resumen ...............................................................................................................................................22 Bloque II : Utilizar la ventana de herramientas principal. ...............................................................................24 1. Desarrollar habilidades y destrezas en el uso de herramientas principales: ........................................24 Introducci√≥n ..........................................................................................................................................24 L√≠nea .....................................................................................................................................................25 L√°piz ......................................................................................................................................................25 Propiedades del contorno .....................................................................................................................26 mireyaisela@hotmail.com P√°gina 4

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Pincel. ...................................................................................................................................................27 La herramienta Pluma ...........................................................................................................................30 √ďvalos ...................................................................................................................................................31 Rect√°ngulos ...........................................................................................................................................34 Pol√≠gonos/Estrellas ................................................................................................................................35 Selector de color ...................................................................................................................................36 Crear un color personalizado. ................................................................................................................37 Crear un color desde el Mezclador de color ...........................................................................................38 Colores alfa, Colores transparentes .......................................................................................................39 Bote de pintura. ....................................................................................................................................40 Bote de Tinta. ........................................................................................................................................41 Ayudas: Cuentagotas, lupa y mano. .......................................................................................................42 Cuentagotas. .........................................................................................................................................42 Lupa. .....................................................................................................................................................42 Crear un degradado. ..............................................................................................................................43 Aplicar un degradado. ...........................................................................................................................44 Transformar un degradado. ...................................................................................................................45 RESUMEN ..............................................................................................................................................47 Capas ....................................................................................................................................................51 Creaci√≥n de capas..................................................................................................................................51 Para crear una capa: ..............................................................................................................................51 Representaci√≥n de animaciones en la l√≠nea de tiempo ...........................................................................51 Edici√≥n de capas ....................................................................................................................................52 Animaci√≥n .............................................................................................................................................53 Distinci√≥n de las animaciones en la l√≠nea de tiempo ..................................................................................53 Previsualizaci√≥n y prueba de pel√≠culas ...........................................................................................................53 Para crear una capa de mascarilla ..........................................................................................................54 Uso de capas de gu√≠as............................................................................................................................54 Gu√≠as de movimiento.............................................................................................................................54 Bloque III: Crear s√≠mbolos y bibliotecas. ........................................................................................................64 Los s√≠mbolos ..........................................................................................................................................64 mireyaisela@hotmail.com P√°gina 5

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Creaci√≥n de s√≠mbolos.............................................................................................................................64 Para crear un s√≠mbolo nuevo con elementos seleccionados: ..................................................................64 Las Bibliotecas .......................................................................................................................................66 Diferencia entre s√≠mbolo e instancia ......................................................................................................67 Bloque IV: Aplicar animaci√≥n al dibujo...........................................................................................................72 Aspectos b√°sicos de animaciones ..........................................................................................................72 Ejercicios ...............................................................................................................................................73 Interpolaci√≥n de movimiento I : el vuelo de un √°guila ............................................................................73 Interpolaci√≥n de de forma (cambio de color): ........................................................................................75 Animaciones fotograma a fotograma .....................................................................................................76 Interpolaci√≥n de movimiento utilizando capa gu√≠a (cl√°sica) ...................................................................76 Bloque V: Manipular botones. .......................................................................................................................85 Crear y manipula los aspectos del bot√≥n (reposo, sobre, presionado, zona activa). .............................................................85 Aplicar acciones y eventos del rat√≥n y el teclado........................................................................................88 Botones de texto. La importancia de la zona activa ................................................................................89 Incluir un clip en un bot√≥n .....................................................................................................................89 Crear botones invisibles y de varias capas..................................................................................................90 Bitmaps y Botones .................................................................................................................................90 Auto Evaluaci√≥n del Bloque. ..................................................................................................................92 Bloque VI: Manipular sonido. ........................................................................................................................95 Editar Sonidos .......................................................................................................................................99 Auto Evaluaci√≥n:..................................................................................................................................103 Bloque VII: Manipular v√≠deo. .......................................................................................................................106 Ejercicio...............................................................................................................................................109 AUTO EVALUACI√ďN .............................................................................................................................115 Bloque VIII: Publicar pel√≠cula. ......................................................................................................................119 AUTO EVALUACI√ďN. ............................................................................................................................122 mireyaisela@hotmail.com P√°gina 6

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Bloque I : Manipular las funciones de las barras y paneles. Entorno de trabajo Al iniciar el programa aparece en el centro de la pantalla una ventana de bienvenida. Esta ventana siempre va a aparecer al iniciar el programa. Ofrece informaci√≥n sobre el programa y posibilidades de inicio ya predeterminadas. Los espacios de trabajo de las distintas aplicaciones de Adobe¬ģ Creative Suite¬ģ 5 tienen la misma apariencia para facilitar e l cambio de una a otra. Adem√°s, si lo prefiere, puede adaptar cada aplicaci√≥n a su modo de trabajar seleccionando uno de los varios espacios de trabajo preestablecidos o creando otro personalizado. Aunque el dise√Īo del espacio de trabajo predeterminado var√≠a en funci√≥n del producto, los elementos se manipulan de manera muy parecida en todos los casos. mireyaisela@hotmail.com P√°gina 7

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Identifica la barra de herramientas principal. Pero la interfaz de Flash sólo se activa al abrir un documento: mireyaisela@hotmail.com Página 8

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

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. El Escenario Una película de Flash, se divide en frames. Es en el escenario donde se visualizan y componen los frames individuales de la película, mediante su dibujo o con la organización de ilustraciones importadas. mireyaisela@hotmail.com Página 10

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. mireyaisela@hotmail.com P√°gina 11

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. La ventana de L√≠nea de Tiempo Es donde se coordina el tiempo de la animaci√≥n y se ensambla la ilustraci√≥n en distintas capas. La ventana de l√≠nea de tiempo muestra todos los frames de la pel√≠cula. Las capas act√ļan como una pila de acetato transparente; mantienen la ilustraci√≥n por separado, de forma que puedan combinarse distintos elementos en una imagen. mireyaisela@hotmail.com P√°gina 12

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Propiedades de la pel√≠cula Antes de comenzar a realizar una pel√≠cula tenemos que acostumbrarnos a determinar sus caracter√≠sticas generales. Para ello vamos al men√ļ MODIFICAR > DOCUMENTO, mostr√°ndose un cuadro con las "propiedades " de la pel√≠cula. d) e) f) g) a) Para la velocidad de frame¬īs, introduce en Frame Rate el n√ļmero de frames de animaci√≥n que deben mostrarse cada segundo. La mayor√≠a de las animaciones que se visualizan en los sistemas locales, especialmente las que se reproducen desde un sitio Web, no necesitan una velocidad mayor de 8 a 12 fps (frames por segundo). b) Para el tama√Īo, usa una de las siguientes opciones: c) Para especificar el tama√Īo en pixeles, introduce en Dimensions valores de anchura y altura. El tama√Īo de pel√≠cula predeterminado es de 550 por 400 pixeles. El tama√Īo m√≠nimo es de 18 por 18 pixeles; el m√°ximo es de 2880 por 2880 pixeles. Para establecer el tama√Īo del escenario de forma que el espacio que rodea el contenido sea igual en todos los lados, haz Click en Match: Contents. Para establecer el tama√Īo del escenario con la mayor √°rea de impresi√≥n posible, haz Click en Match: Printer. El √°rea de impresi√≥n la determina el tama√Īo de papel que est√© seleccionado en el √°rea de M√°rgenes del cuadro de di√°logo Configurar p√°gina, menos los m√°rgenes establecidos. Para establecer el color de fondo de la pel√≠cula, escoge un color en la muestra de colores de Fondo. Selecciona la unidad de medida en la opci√≥n Ruler Units. Estas propiedades se pueden variar tambi√©n en cualquier momento a lo largo del trabajo con la pel√≠cula... y de una forma m√°s r√°pida desde el Panel de Propiedades. Basta con hacer clic en una zona vac√≠a del √°rea de trabajo, es decir, no tener ning√ļn objeto seleccionado: NOTA: Un Frame es una unidad gr√°fica que almacena en un instante por, una porci√≥n de una escena, o bien el cuadro por segundo de una pel√≠cula. mireyaisela@hotmail.com P√°gina 13

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Dimensiones de la pel√≠cula En este campo se establecen las dimensiones de la pel√≠cula en anchura y altura de la ventana escenario. Podemos hacer pel√≠culas que ocupen desde toda la pantalla del ordenador hasta peque√Īos "banners" de publicidad para colocar en las p√°ginas Web, o aplicaciones para pantallas de m√≥viles. En la parte inferior del cuadro hay una opci√≥n en la que podemos elegir en qu√© unidades de regla queremos establecer el tama√Īo de la pel√≠cula. Es importante acostumbrarse a trabajar en p√≠xeles, ya que afectar√° a varias opciones del programa (la unidad est√°ndar en multimedia y p√°ginas Web es el p√≠xel). Las dimensiones de la pel√≠cula son, rigurosamente hablando, las dimensiones del escenario. EL TAMA√ĎO NO IMPORTA ... IMPORTA EL INTERIOR Una pel√≠cula flash no ocupar√° m√°s bytes por tener un gran tama√Īo en p√≠xel, sino por la complejidad de los elementos que coloquemos en la animaci√≥n. Es posible que ocupe m√°s un peque√Īo banner con sonido que una gran animaci√≥n a pantalla completa con vectores simples. mireyaisela@hotmail.com P√°gina 14

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Utilizar la ventana de herramientas principal. mireyaisela@hotmail.com P√°gina 15

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. TRUCO: CON LOS PANELES Podemos crearnos nuevos Paneles e incluso agrupar unas determinadas solapas en un panel u otro. Para incluir una solapa en un determinado panel actuaremos como sigue: 1. Seleccionamos la solapa que queremos incluir en otro panel. 2. 3. Pulsamos sobre el icono que aparece en la esquina superior derecha de cada panel. Del men√ļ que se despliega elegimos la opci√≥n Agrupar "nombre de solapa"con... y elegimos el panel en el cual se agrupar√°. Si queremos crear un panel elegiremos la opci√≥n Nuevo grupo de paneles. 4. Haciendo clic sobre el icono configuraci√≥n del mismo. de la esquina superior derecha del panel, aparecen todas las opciones de Guardar el espacio de trabajo Por √ļltimo, cuando ya nos hemos configurado la pantalla a nuestro gusto; visibles los paneles y barras que nos interesan, colocados en el lugar que nos es m√°s c√≥modo... Podemos guardar esta configuraci√≥n para usarla cuando deseemos. O podemos guardarnos varias configuraciones de pantalla seg√ļn el trabajo que hagamos: edici√≥n de gr√°ficos, Configuraci√≥n de componentes o programaci√≥n actionscript. mireyaisela@hotmail.com P√°gina 16

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Para guardar una configuraci√≥n de pantalla seguimos estos pasos. 1. Elegimos la opci√≥n de men√ļ Ventana > Conjunto de Paneles > Guardar disposici√≥n de paneles 2. En el cuadro que aparece le damos un nombre a esa configuraci√≥n de pantalla... y pulsamos Aceptar. 3. Desde esa opci√≥n del men√ļ ventana podemos gestionar estas configuraciones de pantalla: Utiliza barra de herramientas, de control y de edici√≥n y maneja los diferentes paneles. Uso de la paleta de herramientas Las herramientas de la paleta de herramientas permiten dibujar, seleccionar, pintar y modificar ilustraciones. Otras herramientas permiten cambiar la visualizaci√≥n del escenario. La mayor√≠a de las herramientas cuentan con modificadores auxiliares para las tareas de pintado o edici√≥n. Dentro de este Panel las herramientas se organizan por grupos: 1. El primer grupo nos ofrece las diferentes herramientas con que contamos para crear y modificar cualquier dibujo en el √°rea de trabajo. En este caso se ve activada la herramienta de Selecci√≥n y Movimiento (esquina superior izquierda). 2. √Čstas son las herramientas de ayuda para la visualizaci√≥n del √°rea de trabajo. 3. √Čste es el controlador de color de Flash. Dividido en el color de Contorno y de Relleno. 4. Al final del panel aparecer√°n las opciones de la herramienta que tengamos activada. En este caso las opciones de la herramienta de Selecci√≥n y Movimiento. NOTA: Para utilizar cualquiera de las herramientas del panel seguiremos los pasos siguientes: 1. Picamos en la herramienta que queremos utilizar o bien tecleamos el car√°cter del teclado de la herramienta. 2. Movemos el cursor a la escena y utilizamos la herramienta. mireyaisela@hotmail.com P√°gina 17

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. TRUCO: ¬°OCULTOS! En algunos momentos es interesante ocultar todos los paneles moment√°neamente para ver mejor lo que estamos dibujando en el escenario. Pulsando la tecla F4 podemos ocular y volver a visualizar todos los paneles de un plumazo. Cuadr√≠cula Para visualizar la cuadr√≠cula en la escena, debemos dirigirnos al men√ļ Ver>Cuadr√≠cula>Mostrar cuadr√≠cula. Desde la misma opci√≥n de men√ļ podemos Editar la cuadr√≠cula para que sea del tama√Īo que nosotros deseemos. Encajar Localizada en la barra de herramientas principal, la herramienta Encajar (...Im√°n para los amigos) funciona de dos formas: En primer lugar, si est√° activada la cuadr√≠cula y ejecutamos la opci√≥n de men√ļ Ver > Ajustar a cuadr√≠cula... actuar√° como un im√°n de manera que al dibujar o editar, el cursor saltar√° forz√°ndose a tomar puntos de esa cuadr√≠cula. En segundo lugar, tambi√©n act√ļa sobre los objetos de forma que al dibujar rectas se bloquean sobre los puntos finales o medios de las rectas. Cuando deseemos dibujar de forma libre desactivamos esta opci√≥n, ya que en ocasiones tambi√©n puede dificultar el dibujo libre de siluetas. Otra herramienta de ayuda al dibujo son las "reglas", que tambi√©n se pueden habilitar desde el men√ļ ver. El uso de las reglas es s√≥lo una ayuda visual para controlar las dimensiones en p√≠xeles de nuestro dibujo. mireyaisela@hotmail.com P√°gina 18

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Acerca de las im√°genes de vectores y mapas de bits Los sistemas muestran im√°genes en formato de vectores o de mapa de bits. Es muy importante comprender la diferencia entre ambos formatos para poder utilizarlos de la forma m√°s eficaz. Flash permite crear y animar im√°genes de vectores compactas. Tambi√©n permite importar y manipular im√°genes de mapa de bits creadas en otras aplicaciones. Im√°genes de vectores Los elementos gr√°ficos de vectores representan im√°genes mediante l√≠neas y curvas, denominadas vectores, y tienen propiedades de color y posici√≥n. Cuando se edita una imagen de vectores, se modifican las propiedades de las l√≠neas y curvas que definen su forma. La posici√≥n, el tama√Īo, la forma y el color de las im√°genes de vectores puede cambiarse sin que por ello pierdan calidad. Las im√°genes de vectores no dependen de la resoluci√≥n, de pantalla, es decir se trabajan a cualquier resoluci√≥n; sin embargo si dependen de la resoluci√≥n del perif√©rico de salida. Im√°genes de mapa de bits Los elementos gr√°ficos de mapa de bits representan im√°genes mediante puntos de color, denominados pixeles, que est√°n organizados en una cuadr√≠cula. Un mapa de bits que representa una imagen bitmap se representa mediante el valor espec√≠fico de posici√≥n y color de cada p√≠xel en la cuadr√≠cula, que crea una imagen similar a la de un mosaico. La visualizaci√≥n de un mapa de bits depende de la resoluci√≥n de pantalla; es decir que si se escala o visualiza a una resoluci√≥n mayor de la estipulada, nuestra imagen se ver√° distorsionada y por consiguiente perder√° calidad visual. mireyaisela@hotmail.com P√°gina 19

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Diferentes tipos de Archivos .fla y .swf En el proceso de trabajo con Flash se ven involucrados diferentes tipos de archivos, pero explicar aqu√≠ todos ellos puede resultar un poco confuso. Nos centraremos principalmente en dos de ellos: .Fla: Archivo de trabajo Este archivo es el que necesitamos para trabajar, dibujar, animar, hacer modificaciones... en la pel√≠cula. Es la extensi√≥n con la que se guarda el archivo cuando estamos trabajando. As√≠, podemos abrirlo, editarlo y trabajar con √©l, y restaurar con √©l los dem√°s tipos de archivo. No es el archivo que se publica en Internet. .Swf: archivo resultante Se caracteriza porque s√≥lo es la visualizaci√≥n resultante de la pel√≠cula. No nos permitir√° modificarla. Por eso tiene un tama√Īo muy reducido; motivo por el que Flash ha alcanzado tanta popularidad en la creaci√≥n de animaciones dirigidas para Internet. Es el archivo que genera la pel√≠cula optimizada preparada para ser reproducida, y puede ser visto por cualquier persona que cuente con un Navegador de Internet y el plug-in Reproductor Flash (o Flash Player). El p√ļblico no puede editar este tipo de archivo, s√≥lo puede verlo. En resumen, el archivo .FLA es el ORIGEN y el archivo .SWF es el RESULTADO. M√°s adelante veremos que este archivo flash puede producir muchos tipos de archivo, lo que da versatilidad a este programa. Teniendo el .fla de una pel√≠cula podemos hacer con ella lo que deseemos. mireyaisela@hotmail.com P√°gina 20

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Abrir un documento. Como en cualquier otro programa, para abrir un archivo los pasos son los siguientes: Elegimos la opci√≥n de men√ļ Archivo > Abrir... (o pulsamos el icono de la barra de Herramientas principal) En el cuadro que aparece localizamos en la estructura de nuestro ordenador el archivo .fla en el que queremos trabajar. Lo seleccionamos y pulsamos Abrir. Trabajar con varios documentos. Flash tiene la posibilidad de trabajar al mismo tiempo con m√°s de un archivo abierto. Para organizarnos nos ofrece una f√°cil navegaci√≥n por solapas por encima del panel de L√≠nea de tiempo. Ejemplo, aqu√≠ vemos que est√°n abiertos 3 documentos. Se est√° trabajando en el archivo WESTERN.fla (la solapa est√° activada). El documento Sin t√≠tulo-4 es un documento que se ha creado nuevo, por eso no tiene nombre. TRUCO: M√ĀS R√ĀPIDO Y C√ďMODO Si pulsamos con el bot√≥n derecho del rat√≥n sobre estas solapas de los documentos abiertos podemos acceder a opciones r√°pidas: Las opciones de Guardar todo..., Cerrar todo... son interesantes para guardar y cerrar todos los archivos abiertos de un plumazo¬°¬°¬° mireyaisela@hotmail.com P√°gina 21

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Pre visualizaci√≥n y prueba de pel√≠culas Cuando estemos trabajando en un archivo .FLA nos interesar√° probar peri√≥dicamente la pel√≠cula y ver el resultado de lo que vamos consiguiendo. Hay dos formas de probar la pel√≠cula: 1. Desde el mismo programa Para ello basta con elegir la opci√≥n de men√ļ Control > Probar Pel√≠cula... o mucho m√°s r√°pido, con el comando de teclado Control+Intro. En este caso no salimos del programa para ver el resultado, es decir, el archivo .SWF que se abre en una ventana flotante (en versiones anteriores se abre la ventana a pantalla completa): 2. Probarla en el navegador Ya que un gran volumen de trabajo de Flash va dirigido a la web se nos da la posibilidad de ver la pel√≠cula resultante inscrita en una p√°gina web que reproducir√° el navegador que tengamos predeterminado. Para ver la pel√≠cula en el navegador basta elegir la opci√≥n de men√ļ Archivo > Vista previa de la publicaci√≥n > Predeterminado, o, lo que es m√°s r√°pido, pulsar la tecla F12. En los dos casos, lo que ha hecho Flash es producir a partir del documento .FLA los archivos necesarios para visualizar el resultado:. Resumen Esta primera lecci√≥n es un poco te√≥rica pero es necesaria para asentar conceptos que por lo b√°sicos que son tienen mucha importancia. Adem√°s, al utilizarlos repetidamente a lo largo de las lecciones nos acostumbraremos a ellos r√°pidamente. ‚ÄĘ Flash combina la creaci√≥n de animaciones en 2D con aplicaciones para la interactividad con el espectador. ‚ÄĘ Esta interactividad se basa en la programaci√≥n Actionscript, que veremos, pero en menor medida que las utilidades de animaci√≥n. mireyaisela@hotmail.com P√°gina 22

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. ‚ÄĘ La pantalla de Flash es mejor verla en resoluciones amplias... y se compone de Paneles que contienen Solapas. ‚ÄĘ El √°rea de trabajo se compone del ESCENARIO (la zona visible y real de la pel√≠cula) y el √°rea de trabajo (fuera del escenario, que no se ve pero puede albergar objetos). ‚ÄĘ El archivo de trabajo de flash son los .fla ‚ÄĘ Para probar el resultado de nuestro trabajo con el .FLA podemos: 1. Pulsar Control+Intro: se produce el archivo resultante .SWF 2. Pulsar F12: se produce el archivo resultante .SWF y la p√°gina web para que la reproduzca el navegador. M√≥dulo II: Software de dise√Īo Subm√≥dulo II: Generar animaci√≥n con aplicaciones multimedia Evidencia por desempe√Īo: Las funciones de las barras y paneles manipuladas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En un software de animaci√≥n manipula las funciones de las barras y paneles siguiendo las instrucciones planteadas por el docente OBSERVACIONES SI NO 1. ¬ŅUtiliz√≥ la barra de herramientas principal para el dise√Īo de objetos? 2. ¬ŅEmple√≥ los elementos de la caja de herramientas? 3. ¬ŅAplic√≥ comandos de la barra de control? 4. ¬ŅUtiliz√≥ las opciones de la barra de edici√≥n? 5. ¬ŅEmple√≥ el panel de propiedades para establecer par√°metros de los objetos dibujados? 6. ¬ŅManej√≥ los elementos del panel de pantallas? 7. ¬ŅAline√≥ las formas dibujadas mediante el panel alineaci√≥n permitiendo la claridad y compresi√≥n del dise√Īo de la animaci√≥n (orden)? 8. ¬ŅAplic√≥ los rellenos de color a las formas dibujadas con el panel mezclador de colores permitiendo la distinci√≥n clara de cada objeto de la pel√≠cula (orden)? 9. ¬ŅIgual√≥ colores utilizando las opciones del panel muestra de color? 10. ¬ŅModific√≥ la ubicaci√≥n de los objetos en el escenario mediante el panel informaci√≥n clarificando el dise√Īo general de la animaci√≥n (orden)? 11. ¬ŅManipul√≥ la pel√≠cula a trav√©s de las opciones del panel escenas para obtener claridad en la presentaci√≥n del dise√Īo de la animaci√≥n (orden)? EVALU√ď (NOMBRE Y FIRMA) mireyaisela@hotmail.com LUGAR Y FECHA DE APLICACI√ďN P√°gina 23

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Bloque II : Utilizar la ventana de herramientas principal. 1. Desarrollar habilidades y destrezas en el uso de herramientas principales: Introducci√≥n En el tema anterior ya comentamos que, Macromedia Flash es un programa de animaci√≥n de gr√°ficos (aunque no debemos olvidarnos de las im√°genes de mapa de bits). En este cap√≠tulo estudiaremos las diferentes herramientas de dibujo a partir de las cuales generaremos nuestras pel√≠culas. Junto con el tema siguiente "Edici√≥n de formas" completaremos las posibilidades de dibujo y su modificaci√≥n en flash. Al empezar a dibujar es mejor que nos restrinjamos a las formas geom√©tricas simples y podremos conseguir composiciones elegantes. Para los que ya hayan usado otro programa de dibujo vectorial (Freehand, Illustrator, etc.): Veremos que la base es la misma, incluso tenemos la posibilidad de trabajar el trazado de forma detallada para hacer dibujos muy elaborados. Tambi√©n se notar√° como Flash concibe las opciones de dibujo como algo m√°s intuitivo y r√°pido, pero con unas breves nociones podremos controlar lo que al principio puede parece un desprop√≥sito. Debemos quedarnos con la idea seg√ļn la cual cuando dibujamos objetos en Flash se generan vectores (tambi√©n llamados formas) correspondientes a las curvas y rectas que trazamos. Las formas que dibujamos con Flash se clasifican en dos tipos, los contornos que forman las siluetas de los objetos y los rellenos de color con los que pintamos el interior de dichas siluetas. El tama√Īo (en bytes) de una pel√≠cula de flash aumentar√° a medida que la complejidad de las curvas que trazamos sea mayor (tenga mayor n√ļmero de puntos y l√≠neas), no por el tama√Īo que dichas curvas ocupen dentro de nuestra pel√≠cula. Por lo tanto si dibujamos un c√≠rculo esa pel√≠cula ocupar√° lo mismo tanto si ese c√≠rculo es peque√Īo o grande. mireyaisela@hotmail.com P√°gina 24

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. L√≠nea Vamos a ver primero las herramientas para crear S√ďLO CONTORNOS. Empezaremos con la herramienta de l√≠nea Para dibujar rectas realizamos los siguientes pasos: Picamos en la herramienta L√≠nea del panel de Herramientas. ANTES DE DIBUJAR: Definimos los atributos del trazo del l√°piz en el panel Propiedades. Pulsamos y arrastramos en la direcci√≥n que deber√≠a seguir la l√≠nea. Soltamos el bot√≥n del rat√≥n donde queramos que √©sta termine. Si activamos esta opci√≥n de la barra Principal, el IM√ĀN, al dibujar l√≠neas el punto inicial o el final se nos ajustar√°, se nos imantar√°, a cualquier referencia que haya en el √°rea de trabajo: la cuadr√≠cula, una gu√≠a o cualquier otra l√≠nea o forma que haya dibujado antes. ¬°¬°¬°√ĀNGULOS PERFECTOS!!! Si mientras arrastramos se mantiene presionada la TECLA MAY√öSCULA se dibujan rectas horizontales, verticales y oblicuas de 45¬į. L√°piz La herramienta l√°piz permite dibujar S√ďLO CONTORNOS a partir de trazos realizados a mano alzada. Adem√°s del color grosor y tipo de l√≠nea con que dibujamos (desde el panel Propiedades), podemos elegir el m√©todo de ajuste de los trazos dibujados. mireyaisela@hotmail.com P√°gina 25

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. El m√©todo para dibujar con el l√°piz ser√≠a √©ste: Activamos la herramienta L√°piz en el panel Herramientas. Especificamos los valores del dibujo en el panel Propiedades. Elegimos un MODO de L√ĀPIZ y dibujamos en el √°rea de trabajo. ¬ŅQu√© es eso del Modo de L√°piz? Son diferentes opciones de la herramienta de L√°piz para facilitarnos el dibujo a los que no tenemos manos de artista... y a los dem√°s tambi√©n. Est√°n localizados al final del panel de Herramientas. Al activar la herramienta L√°piz. Enderezar: terminado el trazado a mano alzada, ajusta el trazado definitivo a tramos de l√≠nea y arcos (se aproxima poco al trazado original en el caso de emplear pocos trazos rectos). Es √ļtil cuando queremos que el resultado de nuestro dibujo sea recto. Suavizar: terminado el trazado a mano alzada, ajusta el trazado definitivo con curvas blandas, lo que da al dibujo un resultado m√°s suavizado. Parece que perfecciona nuestro dibujo. √Čsta es una opci√≥n adecuada cuando queremos dibujar cualquier objeto o figura que no sea geom√©trico. Tinta: es el m√©todo m√°s fiel al dibujo que hagamos arrastrando el L√°piz, por lo que depende mucho de la destreza que tengamos con el rat√≥n o el L√°piz gr√°fico. Por esta raz√≥n quiz√°s sea el m√©todo menos usado de los tres. Propiedades del contorno Ya sea usando la herramienta de L√≠nea o el del L√°piz estamos consiguiendo contornos. Al activar cualquiera de las dos herramientas podemos seleccionar las caracter√≠sticas de ese contorno desde el panel de Propiedades. √Čstas son las m√°s importantes: mireyaisela@hotmail.com P√°gina 26

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Se a√Īadieron nuevas propiedades que vienen de editores de dibujos vectoriales m√°s potentes como Freehand: Extremo y Uni√≥n. Estas propiedades ser√°n m√°s visibles cuanto m√°s grosor tenga el contorno al que se refieren. Extremo: determina el aspecto de los v√©rtices finales del contorno. Pincel. Si la herramienta de L√°piz S√ďLO dibuja contornos... la herramienta de PINCEL S√ďLO DIBUJA RELLENOS. Para pintar con el pincel actuamos como sigue: Seleccionamos la herramienta Pincel en el panel Herramientas Elegimos el color del relleno con el que queremos pintar. mireyaisela@hotmail.com P√°gina 27

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Elegimos las caracter√≠sticas del pincel pulsando sobre los botones de la paleta que se despliega en la parte inferior del panel de herramientas, dentro del campo Opciones. Picamos sobre el escenario y arrastramos. En la siguiente imagen se ven varios trazos realizados con el pincel, donde hemos elegido el color rojo y cambiado el tama√Īo y tipo del pincel. Modo Modo por defecto, pinta sobre los objetos existentes. Pintar normal: Modo relleno de pintura: Respeta los bordes de los vectores de los objetos d√≥nde se dibuja. Modo pintar detr√°s: Pinta por detr√°s de lo que tenemos ya dibujado. Modo pintar selecci√≥n: Pinta s√≥lo sobre los objetos seleccionados... podemos seleccionar con la herramienta Flecha. Modo pintar dentro: Pinta dentro del contorno sobre el cual se empieza a pintar mireyaisela@hotmail.com P√°gina 28

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Ejercicio Realiza las siguientes Im√°genes. mireyaisela@hotmail.com P√°gina 29

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. La herramienta Pluma Hasta ahora hemos visto c√≥mo realizar objetos con las herramientas de dibujo b√°sico. La herramienta de Pluma que ahora vamos a ver es m√°s recomendada para usuarios que ya tienen cierta experiencia en la creaci√≥n de dibujos vectoriales en otros programas como Freehand, Illustrator o Photoshop (con sus trazados). Si dominamos su relativa complejidad nos da la posibilidad de crear dibujos y formas m√°s elaboradas. 1. Activamos la herramienta Pluma en el panel Herramientas. 2. Colocamos el cursor donde queramos que comience nuestro trazado y picamos. Aparecer√° un punto de v√©rtice (o primer nodo) con forma de c√≠rculo vac√≠o. 3. Colocamos el cursor en el siguiente punto y de nuevo hacemos clic. Tendremos una l√≠nea que va de un punto a otro. 4. Continuamos picando hasta conseguir nuestro primer objeto (recuerda que con cada nuevo clic definiremos un nuevo punto de v√©rtice que se unir√° al anterior a trav√©s de los segmentos). 5. Si queremos que nuestra figura o trazado sea una figura cerrada, solo debemos picar de nuevo sobre el primer punto de v√©rtice. Junto a la herramienta aparecer√° un c√≠rculo blanco peque√Īo que nos indica que la forma ser√° cerrada La herramienta Pluma y los segmentos curvos Como vemos la pluma crea CONTORNOS de una forma simple, creando clic a clic los v√©rtices o nodos de la forma y los segmentos que unen esos puntos. Por defecto la pluma crea segmentos rectos entre cada uno de los v√©rtices o nodos... pero con un poco de detalle podemos conseguir segmentos curvos a medida que vamos dibujando con la pluma: 1. Activamos la herramienta Pluma . 2. Hacemos clic en el primer punto que definamos y estiramos ligeramente. 3. No debemos soltar el bot√≥n del rat√≥n hasta que hayamos creado un selector que se extienda al menos un tercio de la longitud de la curva que queramos definir. mireyaisela@hotmail.com P√°gina 30

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 4. (Debemos tener en consideraci√≥n que los trazados curvos siempre ser√°n tangentes a los selectores o vectores propios). 5. Seguimos haciendo clic para determinar el siguiente nodo o punto de nuestra forma. Si estamos realizando un elemento con segmentos curvos, deberemos ubicar cada uno de los nodos all√° donde el segmento o trazado cambie la direcci√≥n de su curva, estirando a cada nuevo punto para extender los correspondientes selectores. √ďvalos Ahora vamos a ver las herramientas de dibujo que crean de una sola vez CONTORNO Y SU RELLENO, es decir, dos vectores de un plumazo. Se basan en formas geom√©tricas simples, as√≠ que es muy sencillo. La primera, la herramienta √ďvalo podemos pintar √≥valos o c√≠rculos (si mantenemos pulsada la tecla May√ļsculas). Para dibujar un √≥valo actuamos como sigue: Seleccionamos la herramienta √≥valo . Especificaremos los valores de la herramienta desde el panel Propiedades. mireyaisela@hotmail.com P√°gina 31

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. El primer selector de color determina el color del contorno. El selector inferior, permite elegir el color del relleno . Si bien lo veremos con más detalle unos puntos más abajo, también tenemos la posibilidad de elegir los colores de relleno y contorno de los objetos desde la parte inferior del panel Herramientas. Arrastramos la herramienta en el área de trabajo. En este caso se ha dibujado un óvalo con un contorno de color azul oscuro, grosor 2 y estilo Sólido, y el relleno de color azul claro. Para dibujar el círculo se ha mantenido la tecla MAYÚSCULAS pulsada mientras se arrastra. Se han usado las mismas propiedades que en el anterior. Podemos dibujar óvalos (y otros objetos) sin contorno eligiendo en el primer selector (selector de color de contorno), la opción sin color. Tenemos dos opciones: Desde la parte inferior del panel Herramientas, una vez hemos pulsado sobre el icono "color de contorno" picaremos sobre el icono Ninguno. Desde el panel Propiedades, desplegaremos la paleta de colores y elegiremos la opción Ninguno de la parte superior de la misma. mireyaisela@hotmail.com Página 32

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Del mismo modo, podemos dibujar óvalos sin relleno eligiendo la opción sin color en el selector de color de relleno. Ejercicio Realiza las siguientes Imágenes. mireyaisela@hotmail.com Página 33

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Rect√°ngulos La herramienta de dibujar Rect√°ngulos funciona de la misma forma que la del √≥valo Al activar la herramienta el panel de Propiedades nos ofrece las mismas posibilidades de contorno y relleno, ya que tambi√©n dibuja a la vez el contorno y el relleno de una vez. Una vez creados los rect√°ngulos, o un cuadrado (manteniendo la tecla May√ļsculas pulsada) podemos seleccionarlos y volver a manipular sus propiedades: contorno, relleno, ancho, alto, coordenadas, etc. Igual que suced√≠a con el √≥valo. La √ļnica propiedad diferenciada de esta herramienta de rect√°ngulo es la posibilidad de determinar un redondeo a las esquinas del rect√°ngulo o cuadrado que dibujemos. ¬ŅC√≥mo? Sigue estos pasos: Antes de dibujar el rect√°ngulo pulsa en el siguiente icono de opciones de Rect√°ngulo (en la parte inferior del panel de herramientas): Aparecer√° un cuadro como √©ste, donde podr√°s estipular el Radio de ese redondeo de las esquinas: Pulsamos Aceptar y arrastramos el cursor para dibujar: Conseguiremos un rect√°ngulo o cuadrado con las esquinas redondeadas seg√ļn el radio que nosotros hayamos estipulado. mireyaisela@hotmail.com P√°gina 34

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. CUIDADO: EL REDONDEO Y SUS COSAS Ôā∑ Ôā∑ Una vez hayamos estipulado un redondeo, √©ste se aplicar√° a TODOS los rect√°ngulos que dibujemos con esa herramienta. Si queremos rect√°ngulos normales debemos poner ese Radio a 0. El Radio del redondeo de esquinas no es una propiedad del rect√°ngulo dibujado, sino de la herramienta. Es decir, que una vez dibujado no se puede manipular desde el panel de Propiedades. Pol√≠gonos/Estrellas Para activar esta herramienta basta mantener pulsada el icono de la herramienta de rect√°ngulo y aparecer√° la de Pol√≠gonos. Su funcionamiento es muy similar al de las otras herramientas de forma (√ďvalo y Rect√°ngulo). Su peculiaridad es la opci√≥n de poder determinar el n¬ļ de lados del pol√≠gono y otras caracter√≠sticas de √©ste: 1. Activamos la herramienta de Pol√≠gonos y estrellas. 2. ANTES DE DIBUJAR nos dirigimos al panel de Propiedades y pulsamos en el bot√≥n de Opciones (s√≥lo aparece con esta herramienta) mireyaisela@hotmail.com P√°gina 35

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Selector de color Anteriormente hemos visto que es muy f√°cil elegir un color de los selectores de color (ya sea para relleno o contorno) que hay en el panel de Propiedades (al seleccionar una forma) o en el grupo de Opciones (al activar una herramienta de dibujo) Desde este Selector de color podremos Elegir un color establecido Crear un color personalizado Crear un color con canal Alfa (grado de transparencia) Esta misma paleta de colores la podemos encontrar en la Muestras de color solapa de mireyaisela@hotmail.com P√°gina 36

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Crear un color personalizado. 1. Abriremos la paleta predeterminada de colores picando sobre el Selector de color (el de relleno o contorno) 2. Con el cursor nos dirigiremos sobre el botón Editor de Color. 3. Se abrirá el correspondiente cuadro de diálogo Color. 4. Editar un color desde este cuadro es muy intuitivo. Podemos partir del color que ya tenía el selector o elegir uno de los Colores Básicos de la izquierda... y después: Variar su tono y saturación picando en el campo de Gamas de color. Finalmente variar su luminosidad en la Barra de la derecha. 5. Para los más "sibaritas" del color también tenemos la posibilidad de editar un color numéricamente por dos parámetros diferentes: a. Matiz (tono) / Saturación / Luz: las tres características del color. Valor entre 0 - 240 b. Rojo / Verde / Azul: los tres canales de color en pantalla. Valor entre 0 - 255. 6. Una vez hayamos definido nuestro color podemos pulsar Aceptar y empezar a trabajar con él en el escenario, o podemos picar sobre el botón Agregar a los colores personalizados de la parte inferior. Y el color pasará a formar parte de la galería de Colores personalizados de este cuadro. mireyaisela@hotmail.com Página 37

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Crear un color desde el Mezclador de color Flash nos ofrece en la solapa/panel del Mezclador de colores el completo laboratorio que necesitamos para fabricar cualquier color. Nos debemos acostumbrar a su uso. Abrimos dicha solapa desde la opci√≥n de men√ļ Ventana > Mezclador de colores ATENCI√ďN: Debemos tener muy claro que el color con que estamos trabajando, del relleno o el contorno... activ√°ndolo en la casilla correspondiente. En este caso trabajamos sobre el color del relleno. Tenemos el campo de la gama de colores, la barra de luminosidad y los valores num√©ricos de RVA (Rojo, Verde y azul) y el hexadecimal. ¬°¬°todo a mano en un mismo panel!!! Y m√°s posibilidades que tiene este panel que iremos viendo en esta lecci√≥n. A√Īadir un color a la Muestra El color que hayamos construido con el Mezclador de colores podemos insertarlo dentro de la muestra predeterminada de colores, para que aparezca ya directamente en el selector de colores de relleno y contorno. 1.- Una vez elegido el color pulsamos sobre el bot√≥n de Opciones de panel (en la esquina superior derecha del mismo) ... y elegimos la opci√≥n A√Īadir Muestra mireyaisela@hotmail.com P√°gina 38

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. 2.- A partir de ese momento el color formará parte de la lista predeterminada del Selector de colores y del Panel de Muestra de Color. Para eliminar un color del panel de Muestra basta seleccionarlo y pulsar el botón de Opciones de ese panel (esquina superior derecha) y elegir la opción Eliminar muestra. Colores alfa, Colores transparentes En Flash la transparencia es una propiedad más del color como la luz o la saturación. Por defecto la opacidad de los colores que seleccionemos será total... pero si queremos variar esa propiedad seguiremos estos pasos: 1. Seleccionamos el color que queramos aplicarle una transparencia. 2. En el panel Mezclador de colores, abriremos el selector de transparencia que se encuentra junto al campo Alfa o bien entraremos el valor, en porcentaje, directamente en el campo... el valor 100% es completamente opaco y 0% es totalmente transparente. En la mitad superior del cuadro Muestra se visualiza el porcentaje de transparencia tomando como referencia una cuadrícula. mireyaisela@hotmail.com Página 39

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. En la siguiente imagen se aprecia cómo el color verde de la copa del árbol de la derecha es 50% más transparente. Atención: en este caso las formas se han agrupado para poder superponerlas. Si quieres ver la propiedad de transparencia puedes visualizar la cuadrícula o mover la forma fuera del escenario. Bote de pintura. Permite rellenar de un color un contorno cerrado. 1. Escogemos el color con el que queremos rellenar nuestro gráfico. 2. Activamos la herramienta Cubo de pintura en el panel Herramientas. 3. ANTES DE PINTAR... Elegiremos una de las opciones del Bote de pintura. De forma predeterminada el Bote de pintura sólo rellena contornos que estén perfectamente cerrados. Pero puede que el contorno que hemos dibujado no esté cerrado del todo y haya saltos en la línea... en ese caso deberemos elegir un Modo de Bote de pintura que tolere esas aberturas en el contorno. 4.- Una vez elegido la opción hacemos clic dentro del contorno que deseamos rellenar. mireyaisela@hotmail.com Página 40

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Se dibuj√≥ un contorno con el l√°piz y lo he suavizado para que sea m√°s sint√©tico. No es completamente cerrado as√≠ que el bot√≥n de pintura tiene activada la opci√≥n de relleno m√°s tolerante: Cerrar huecos grandes. (Es el m√°s recomendable) En el caso de que el la abertura del contorno sea tan grande que el Modo m√°s tolerante no lo rellene no nos quedara otra opci√≥n que editar el contorno y cerrarlo un poco m√°s moviendo su v√©rtice final para que se acerque m√°s al inicial. Bote de Tinta. Permite dar contorno a los rellenos que no lo tengan, y tambi√©n puede aplicar las caracter√≠sticas activas del contorno (color tama√Īo, estilo...) en el panel de Propiedades a cualquier otro contorno que sea diferente. Por as√≠ decirlo, el Bote de tinta es a los contornos lo que el Bote de pintura a los rellenos. 1. Activamos la herramienta Bote de Tinta en el panel Herramientas. 2. Establecemos los atributos espec√≠ficos de Contorno: el color, el grosor y el tipo de l√≠nea. 3. Pulsamos el borde de un gr√°fico. En el ejemplo cambiamos los bordes del tronco y de la copa. mireyaisela@hotmail.com P√°gina 41

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. El bote de Tinta aplicar√° las propiedades que determinemos all√≠ donde hagamos clic: ya sea para modificar un contorno que ya existe (derecha), como para dar contorno a un Relleno que no lo tiene (izquierda: con estilo punteado) Ayudas: Cuentagotas, lupa y mano. Explicamos tres herramientas de la paleta de herramientas muy √ļtiles a la hora de movernos por el escenario. Cuentagotas. Permite poner como color actual el color seleccionado. Si queremos poner como actual un color ya empleado en el escenario, pulsamos sobre el cuentagotas y picamos en cualquier zona que tenga el color deseado. Lupa. La opci√≥n Lupa permite ampliar o reducir la visualizaci√≥n de los gr√°ficos o im√°genes de nuestro escenario. Podemos cambiar de (+ a -) pulsando la tecla Alt. Zoom ventana. Con esta herramienta podemos ver una determinada zona del escenario, basta con arrastrar la Lupa englobando la parte que queremos ver. Con la herramienta Mano podemos encuadrar la visualizaci√≥n dentro del escenario. Podemos acceder de una manera r√°pida al encuadre pulsando la barra espaciadora. mireyaisela@hotmail.com P√°gina 42

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Crear un degradado. Para crearnos uno deberemos ir a nuestro laboratorio: el Mezclador de color (Ventana > Mezclador de colores) Seleccionamos Lineal o Radial en el cuadro desplegable : En el mismo panel Mezclador de colores especificaremos los atributos, en este caso de un degradado Lineal. La clave para editar nuestros propios colores en el degradado son las muestras de los colores que lo construyen: los cuadraditos Antes hay que tener bien claro cuál es el degradado que deseamos. Por ejemplo: vamos a conseguir uno de Amarillo a Verde. Para variar el color de esas muestras, y así el degradado, basta picar doble clic sobre la muestra del color que deseamos variar. Primero... la del color inicial: De esta forma ya tenemos un degradado de Amarillo (inicial) a Verde (final). Lo vemos en el mezclador de colores y en el Selector de color en las opciones del panel de Herramientas. mireyaisela@hotmail.com Página 43

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Aplicar un degradado. Aquí vamos a explicar cómo pintar una forma con un degradado. No tiene mucho misterio; al igual que al pintar con un color sólido basta seleccionar el Bote de pintura y hacer clic sobre la forma. Pero lo interesante es que en los degradados juegan dos colores, eso implica dirección... por lo que os recomiendo que lo apliquéis ARRASTRANDO el ratón... Vamos a verlo: Activamos el Bote de pintura en el panel Herramientas... y nos aseguramos de que el relleno tiene es degradado que deseamos. En este caso seguimos con el anterior: Lineal de Amarillo a Verde Arrastra el bote de pintura sobre la forma que quieres pintar con degradado: La dirección y amplitud del arrastre son las que toma el Degradado El punto inicial del arrastre corresponde al color inicial del degradado... y lo mismo con el final. mireyaisela@hotmail.com Página 44

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. En el caso de que el Degradado, en vez de lineal, sea Radial... basta hacer Clic, sin arrastre, ya que ese clic determina el centro del radio del degradado, que es el color inicial.. Transformar un degradado. Muchas veces al aplicar el degradado, lineal o radial, no estaremos de acuerdo con la dirección o amplitud del mismo. No es necesario volver a aplicarlo. Podemos variar los parámetros del degradado aplicado de una forma más detallada: Activamos la herramienta Transformación de relleno en el panel Herramientas. Picamos en el área de relleno de degradado de nuestro gráfico. Aparecerán los controladores de extensión y rotación de degradado, en este caso del degradado Radial. mireyaisela@hotmail.com Página 45

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Por ejemplo: 1. Hemos movido el punto focal del degradado a la izq. 2. Lo hemos girado con el selector de Girar 3. Encogemos la anchura desde el cursor de Estirar 4. Aumentamos su tama√Īo con el selector de Amplitud 5. Finalmente movemos el punto central de referencia y con el todo el degradado Por supuesto tambi√©n podemos transformar un degradado Lineal, sus modificadores son similares mireyaisela@hotmail.com P√°gina 46

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. RESUMEN √Čsta es una lecci√≥n larga, con mucho contenido. Pero lo que hemos visto es de uso muy intuitivo y se ir√° practicando a lo largo de todo el curso. Con la pr√°ctica nos iremos haciendo a cada herramienta y sus opciones. Nos podemos tomar esta lecci√≥n como glosario de las herramientas de pintura y volver a ella cada vez que tengamos una duda respecto a c√≥mo dibujar tal cosa o c√≥mo se usaba tal opci√≥n. Ôā∑ Al usar las herramientas de contorno, relleno o formas geom√©tricas acost√ļmbrate a seleccionar las propiedades de la herramienta ANTES de ir al escenario para dibujar. Ôā∑ Ôā∑ Ôā∑ Ôā∑ Recuerda que sea lo que sea (relleno o contorno) siempre se puede variar una vez dibujado si lo seleccionamos y elegimos otras propiedades (en el panel de Propiedades). Tiende a dibujar figuras sint√©ticas, basadas en formas geom√©tricas. Ay√ļdate de las opciones de Suavizar. Acu√©rdate del Im√°n para que las l√≠neas de tu dibujo de ajusten entre ellas. Cuidado porque a veces tener activado el Im√°n es un problema. Para variar la forma de un vector: Selecci√≥n Edici√≥n r√°pida directamente sobre la forma. Subselecci√≥n Edici√≥n detallada sobre los v√©rtices y sus curvaturas. Ôā∑ Ôā∑ Usa el Mezclador de colores para todo lo que tenga que ver con la fabricaci√≥n y selecci√≥n de un color. mireyaisela@hotmail.com P√°gina 47

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Ôā∑ En cuanto a los colores recuerda: o La opacidad (Alfa) es una caracter√≠stica m√°s de cualquier color. o Ôā∑ Antes de seleccionar un color aseg√ļrate de para qui√©n lo est√°s seleccionando: ¬ŅPara un relleno o para un contorno? Tienen selectores diferentes. En cuanto a Degradados: o o Da igual que sea Lineal o Radial, lo importante son los colores que lo forman. Procura aplicarlo arrastrando... As√≠ determinar√°s ya de entrada la direcci√≥n. o Acost√ļmbrate a usar la herr. de Transformar degradados te guste c√≥mo lo has aplicado. o Cuidado con el Bloqueador de relleno del Bote de pintura. A veces puede ser la soluci√≥n pero otras muchas el problema. mireyaisela@hotmail.com siempre que no P√°gina 48

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Ejercicio 1.- Dibujo Es muy importante que vayas realizando los ejercicios propuestos. Ya que lo que ahora hagamos lo vamos a utilizar en ejercicios posteriores. Dibuja este √°rbol. Como hemos dicho puedes conseguir dibujos atractivos centr√°ndonos en formas simples. Si no tienes experiencia en el dibujo vectorial te aconsejo que sigas los pasos de la ayuda y del v√≠deo. Ayuda: 1. Dibuja primero las formas SIN RELLENO, S√ďLO CONTORNOS. 2. Parte de las herramientas de Forma. 3. Para dibujar las sobras, la del tronco, por ejemplo, usa la L√≠nea... as√≠ cerramos un relleno que podemos colorear de otro color (un marr√≥n m√°s oscuro) Ay√ļdate del Im√°n. mireyaisela@hotmail.com P√°gina 49

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. ... y, ¬Ņeste otro modelo? Ayuda: 1. De nuevo empezamos dibujando formas geom√©tricas pero SOLO CON CONTORNOS. 2. Como ves, el truco consiste en conseguir un √°rea cerrada con contornos y despu√©s rellenarla del color elegido. 3. Las ramas est√°n dibujadas con L√≠neas... con grosores diferentes (propiedades del contorno). Ay√ļdate del Im√°n. A partir de estos modelos puedes hacer varias versiones... cambiando las propiedades del relleno y los contornos con y . Guarda el archivo resultante como ARBOLES. fla mireyaisela@hotmail.com P√°gina 50

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Capas Las capas (Layers) son como hojas de acetato transparente apiladas. Cuando una capa est√° vac√≠a, las capas situadas debajo pueden verse a trav√©s de √©sta. Una pel√≠cula creada con Flash contiene una capa. A√Īade m√°s capas para organizar las ilustraciones y la animaci√≥n de las pel√≠culas. El n√ļmero de capas que pueden crearse s√≥lo est√° limitado por la memoria del sistema. Las capas no aumentan el tama√Īo del archivo de la pel√≠cula publicada. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Adem√°s, las capas de gu√≠as pueden utilizarse para facilitar el dibujo y la edici√≥n y, las capas de m√°scara para facilitar la creaci√≥n de efectos sofisticados. Utiliza capas separadas para los archivos de sonido y de acciones. De este modo encontrar√°s las acciones y los sonidos con mayor facilidad cuando tenga que editarlos. Creaci√≥n de capas Cuando se crea una capa nueva, √©sta aparece encima de la capa seleccionada. La √ļltima capa creada es la capa activa. Para crear una capa: Selecciona Insert > Layer √≥ da Click en el bot√≥n Add Layer que se encuentra en la parte inferior de la l√≠nea de tiempo. Representaci√≥n de animaciones en la l√≠nea de tiempo mireyaisela@hotmail.com P√°gina 51

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Edición de capas En la capa activa se puede dibujar y pintar. Selecciona una capa para activarla. El icono de lápiz situado junto al nombre de la capa indica que es la capa activa. Sólo puede estar activa una capa. Los objetos pueden editarse en las capas desbloqueadas y visibles. Las capas pueden bloquearse para protegerlas de posibles cambios y ocultarse para mantener el área de trabajo despejado. Los objetos pueden verse como contornos en cualquier capa, puede determinarse el color del contorno y cambiar la posición de la capa. mireyaisela@hotmail.com Página 52

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. Animaci√≥n La animaci√≥n se crea mediante el cambio del contenido de frames sucesivos. Puede hacer que un objeto se desplace a lo largo del escenario, aumente o disminuya de tama√Īo, gire, cambie de color, aparezca o desaparezca, o cambie de forma. Los cambios pueden ocurrir por separado o combinados entre s√≠. Por ejemplo, puede hacer que un objeto gire a medida que aparece y se desplaza por el escenario. Flash ofrece dos maneras de crear secuencias de animaci√≥n: frame a frame y por interpolaci√≥n (Tweening). En la primera, debe crear la imagen de cada frame, y en la segunda, s√≥lo crea los frames inicial y final y Flash crea los intermedios. Cada frame en el que cambia alg

Add a comment

Related presentations

Related pages

Manual flash 6to semestre by Mireya Rodríguez (page 119 ...

Title: Manual flash 6to semestre, Author: Mireya Rodríguez, Name: manual_flash_6to_semestre_1ra_versi, Length: 125 pages, Page: 119, Published: ...
Read more

Manual flash 6to semestre 1ra version publicar - Education

1. SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA. ADOBE¬ģ FLASH ¬ģ CS5 mireyaisela@hotmail.com Apuntes y Trabajos M ...
Read more

Manual flash 6to semestre by Mireya Rodríguez - issuu

Title: Manual flash 6to semestre, Author: Mireya Rodríguez, Name: manual_flash_6to_semestre_1ra_versi, Length: 125 pages, Published: ...
Read more

Manual ilustrador 5to semestre 1ra version publicar ...

Download Manual ilustrador 5to semestre 1ra version publicar. Transcript. 1. ... Manual flash 6to semestre 1ra version publicar
Read more

Programa XE-0156-II-12 Version Para Publicar (1) - Documents

Manual ilustrador 5to semestre 1ra version publicar Apuntes y Trabajos para la Capacitación en ... Manual flash 6to semestre 1ra version publicar
Read more

Mec√°nico Automotriz 6to Semestre - Documents

Manual flash 6to semestre 1ra version publicar ... Triptico Sobre El Matrimonio 6to Semestre ... PRIMER SEMESTRE DE MANTENIMIENTO MEC√ĀNICO DE LA ...
Read more

Manual de instalar ( flash player ) - Documents - myslide.es

Manual Adobe Flash CS3 Guia del usuario de Adobe Flash CS3 profesional.Adobe Flash CS3 mezcla ... Manual flash 6to semestre 1ra version publicar
Read more

Trabajo Herramientas 6to Semestre (2) - Documents

Share Trabajo Herramientas 6to Semestre (2) ... Trabajo Final 6to A√Īo. Jornada 6to semestre 7 julio 2012. Manual flash 6to semestre 1ra version publicar.
Read more

Ex√°men de toda la unidad del 6to semestre. - Documents

Download Ex√°men de toda la unidad del 6to semestre. ... alumnos de 9no semestre dela Facultad de Medicina ... Manual flash 6to semestre 1ra version ...
Read more