FLASH MX Parte I Módulo Básico Horas 10 Ma. Ivet Díaz de León P. (LI’97 MCE’03)

Presentación del tema: "FLASH MX Parte I Módulo Básico Horas 10 Ma. Ivet Díaz de León P. (LI’97 MCE’03)"— Transcripción de la presentación:

1 FLASH MX Parte I Módulo Básico Horas 10 Ma. Ivet Díaz de León P. (LI’97 MCE’03)

2 Objetivo  Que el participante conozca y utilice todas las herramientas que ofrece Flash para la realización de animaciones vectoriales, optimizadas para Internet.

3 Fechas Jueves 3 – 3 horas. Viernes 4 – 3 horas. Lunes 7 – 3 horas. Martes 8 – 1 hora. Horario Inicio: 6.05 pm. Término: 8.55 pm. Receso: 7.05 – 15 min. Ejercicio: 7.20 – 35 min.

4 Temario  Introducción Herramientas, menús, inspectores Herramientasmenús, inspectores  Flash como herramienta de dibujo vectorial Elementos principales: El Escenario, línea de tiempo, biblioteca, paneles, inspectores, fotograma, escena, instancia.El Escenariolínea de tiempo bibliotecapanelesinspectoresfotogramaescena instancia Propiedades de la película. Propiedades de la película Crear formas simples y realización de contornos. Color: uso, relleno utilización de la paleta de colores. Texto: edición de textos y tratamientos de los mismos dentro de Flash. Texto: edición de textos y tratamientos de los mismos dentro de Flash. DosTres Cuatro

5 Herramientas  Esta contiene las herramientas que se utilizarán para crear colocar y modificar texto y gráficos. Inicio

6

7 Línea de tiempo Organiza y controla el contenido de una película en el tiempo. Al igual que en un largometraje flash divide el tiempo en fotogramas, cada fotograma puede tener su propio contenido o puede utilizar el contenido de un fotograma anterior. Inicio

8 Biblioteca  El panel biblioteca utiliza elementos reutilizables denominados símbolos. Por ejemplo si desea reutilizar un gráfico, un clip de película o un sonido puede arrastrarlo a la biblioteca y luego arrastrarlo al escenario cuando lo necesite. Inicio

9 Paneles  Estos le ayudan a trabajar con objetos en el escenario, en todo el documento, en la línea de tiempo y las acciones. Elija el menú ventana para ver la lista de paneles. Inicio

10 Inspectores  Propiedades: Muestra los valores utilizados con más frecuencia para una herramienta u objeto. Inicio

11 Instancia  Una instancia es la presencia de un símbolo en el escenario. Inicio

12 Propiedades de una película Inicio

13 Creación de formas simples  Las herramientas línea, rectángulo y óvalo funcionan de la misma manera que en otros programas de diseño gráfico. Nota: Cuando selecciona una herramienta aparecen sus modificadores en la barra de herramientas en la sección de opciones. Inicio

14 Herramienta lápiz  Esta herramienta pude utilizarse para dibujar líneas, formas u objetos a mano alzada. Ejercicio: Haga clic en la herramienta lápiz. Observar el modificador modo lápiz (barra de herramientas – sección opciones) Dibuje la siguiente figura: ( haga uso de l modificador modo lápiz) Ahora dibujar: Nota: En el panel de propiedades es posible cambiar el grosor, estilo y color de la línea (siempre y cuando esté seleccionada la línea a modificar). Pintar

15 Pintado y relleno de formas Sirve para pintar trazos de pincel como si estuviera pintando. Se puede utilizar el modificador modo pincel para experimentar con diferentes modos. Al utilizar el modificador modo pincel tiene las siguientes opciones: Cubo

16 Cubo de pintura Sirve para cambiar el color de pintura existente y para rellenar las áreas vacías redondeadas por líneas. Ejercicio: Cambie el relleno de una figura utilizando el cubo de pintura Observe el modificador de tamaño de hueco. Nota: Estas opciones le servirán para rellenar aún y que las figuras no estén totalmente cerradas. Siguiente

17  Las figuras pueden rellenarse con colores sólidos y degradados. Los colores degradados se encuentran en la parte inferior de la caja de herramientas o en el inspector de propiedades. Siguiente

18 Transformación de relleno  Con la herramienta transformación de relleno puede ajustar el tamaño, la dirección o el centro de degradado o relleno de un mapa de bits. Siguiente

19 Cambio de preferencias de Trazo  Mediante la herramienta bote de tinta y el inspector de propiedades puede aplicar nuevos estilos, colores y grosores a las líneas. Siguiente

20 Borrado  Esta herramienta borra líneas y rellenos. Esta puede ser personalizada para borrar solo líneas o solo relleno.  Para borrar automáticamente hay que hacer uso del modificador grifo. Siguiente

21 Selección de líneas y formas  La selección de una línea o forma se realiza con la flecha o con el lazo.  Para que no suceda lo anterior y seleccionar relleno y contorno es necesario dar doble clic a la figura. Siguiente

22  Con la herramienta lazo puede realizar selecciones arrastrando un área de selección a mano alzada o de bordes rectos.  El lazo cuenta con el modificador de modo polígono para realizar selecciones de bordes rectos. Siguiente

23 Cambio de forma de líneas y formas  Puede utilizar la herramienta flecha para cambiar la forma de líneas y objetos sin utilizar selectores.  Nota: El puntero cambiará para mostrar como puede cambiar la forma de la línea. Siguiente

24 Cambio de escala y rotación  Se puede utilizar la herramienta de transformación libre para el cambio de escala, la rotación la expansión y el sesgo de líneas y formas. Siguiente

25  Al usar esta herramienta encontrará un ponto blanco dentro de la figura el cuál es llamado punto de transformación.  Es posible hacer una modificación o rotación exacta con el panel transformar: Siguiente

26 Segmentación y Agrupación  Cuando coloca líneas y formas una encima de otra Flash las conecta o las segmenta.  Si ambas figuras tienen el mismo color ya no podrán despegarse al deseleccionarlas. Pero funciona diferente cuando las figuras son de un diferente color: Siguiente

27  Se puede evitar esto si los objetos se agrupan, ya que flash los tomará como si fueran un solo objeto.  Seleccionar y abrir el menú Modificar > Grupo y de esta manera no se producirá ni segmentación ni conexión. Siguiente

28  Aún agrupadas las figuras estas pueden ser modificadas independientemente. Solo es necesario dar doble clic sobra la figura a editar.  Con el inspector de propiedades es posible saber si un objeto está o no agrupado. Inicio

29 ADICIÓN Y EDICIÓN DE TEXTO  Puede agregar texto a su documento y establecer tipo, tamaño, estilo, espaciado, color y alineación. También puede manipular texto como si fuera un objeto o una forma básica para crear efectos sofisticados. Siguiente

30 Creación y asignación de formato a letras  Utilice la herramienta de texto para colocar letras en el escenario. Haga clic en la herramienta de texto y colóquela en el escenario y comience a escribir, esto crea un bloque de texto expansivo de línea. A medida que escriba será mayor. Siguiente

31  Ahora utilice la herramienta texto para crear un nuevo bloque de texto pero en lugar de comenzar a escribir arrastre el selector de cambio de tamaño para establecer la anchura del bloque y a continuación escriba en el cuadro. Siguiente

32 Trabajo con fuentes  Al tener seleccionado texto el inspector de propiedades muestra funciones estándar de formato de letra. Siguiente

33 Formato de bloques de texto  Es posible aplicar un mismo formato a todo un bloque de texto o a varios bloques a la vez.  Para seleccionar dos bloques de texto a la vez solo es necesario dejar oprimida la tecla de mayúsculas mientras selecciona los bloques con el mouse y a continuación usar el inspector de propiedades para cambiar el formato del texto. Siguiente

34 Creación de un campo de texto  Puede convertir un bloque de texto en un campo de texto, que funcionará similar que en HTML. Ejercicio: Seleccione un bloque de texto En el inspector de propiedades seleccionar “Introducción de Texto”  Texto Estático: Crea texto que no cambia  Texto dinámico: Crea un cuadro de texto que se actualiza automáticamente desde una fuente externa como por ejemplo un servidor.  Introducción de texto: Crea un campo de texto en donde los usuarios pueden escribir texto. Siguiente

35 Modificación de formato de Texto  Flash tiene la capacidad de convertir texto en formas básicas con lo que podrá cambiar las formas de los caracteres con la herramienta flecha o rellenar los caracteres con degradado.  Una vez convertido el texto a formas básicas ya no podrá editarse como texto. Siguiente

36  Una vez convertido el texto a formas básicas ya no podrá editarse como texto. Ejercicio: Seleccionar un objeto texto. Ir al menú Modificar > Separar (De esta manera cada carácter se vuelve independiente) Vuelva a seleccionar el Menú modificar > Separar Dar un clic en el escenario para deseleccionar los caracteres Seleccionar la herramienta transformación libre Comenzara trabajar en la modificación de forma y color de cada carácter siguiente

37 Formato del párrafo  Se puede utilizar el inspector de propiedades para alinear uno (o varios) párrafos o modificar su interlineado. Inicio

38 Temario 2  Símbolos e instancias Definición de la terminología Creación de símbolos Trabajar con símbolos  Biblioteca Uso de la biblioteca Bibliotecas compartidas (importar / exportar bibliotecas)  Capas Creación de capas y utilización de las mismas Análisis y propiedades de las capas Tipos de capas (máscaras, guías) UnoTres Cuatro

39 Temario 3  Animación Métodos de animación Fotograma a fotograma Animación Interpolada  Línea de tiempo descripción y uso de la línea de tiempo Línea de tiempo descripción y uso de la línea de tiempo  Fotogramas descripción y tipos de fotogramas Fotogramas descripción y tipos de fotogramas Fotogramas clave Fotogramas interpolados  Interpolaciones de forma y de movimiento Interpolaciones de forma y de movimiento UnoDos Cuatro

40 Símbolos e instancias  Un símbolo es una imagen, una animación o un botón reutilizables. Los símbolos ayudan a reducir el tamaño de un archivo y a simplificar la edición de una película. Los símbolos también son necesarios para crear interactividad sofisticada.  Una instancia es la presencia de un símbolo en el escenario. Siguiente

41  Es necesario mencionar que Flash cuenta con una Biblioteca propia para cada película y otra común, estas bibliotecas servirán para arrastrar los símbolos hacia el escenario. Siguiente

42 Ejercicio: Abrir la Biblioteca (propia) Arrastre hacia el escenario el símbolo que desee. De esta manera se ha puesto una instancia del objeto (deseado) en el escenario. Ud. podrá decidir el comportamiento de la instancia: Clip de película (animación), botón y gráfico. Y este comportamiento de la instancia se podrá cambiar en el panel de propiedades. Siguiente

43  Cuando realizamos una figura también podemos convertirla en símbolo si la arrastramos hacia la biblioteca.  Es posible cambiar las propiedades de una instancia sin por eso afectar a las demás, es posible cambiar el brillo, matriz y transparencia y para eso necesita el panel de propiedades. Siguiente

44  Es posible modificar la transparencia de un objeto: Siguiente

45 Edición de símbolos  También es posible editar los símbolos de la biblioteca para de esta manera cambiar todas las instancias de la película.  Mientras se edita un símbolo el resto del documento desparece y solo aparece el símbolo. Todas las características y herramientas de flash están disponibles. A esto se le llama modo de edición de símbolos. Para editar un símbolo Ud. puede:  Abrir la biblioteca (F11) y dar doble clic sobre el elemento a editar.  Seleccionar el símbolo y abrir el menú Edición > Editar Símbolos Para regresar a editar el documento:  Abrir el menú Editar > Editar documento  Ctrl. + E Inicio

46 CAPAS  Puede considerar las capas como hojas apiladas de acetato transparente. Cuando una capa está vacía, las capas situadas debajo pueden verse a través de esta.  Las capas ayudan a organizar las ilustraciones en un documento. Las ilustraciones de una capa pueden dibujarse y editarse sin que afecten a las ilustraciones de otras capas.  Las carpetas pueden organizarse en carpetas en la línea de tiempo. Inicio

47 Selección de capas  El dibujo y la edición se realizan en la capa activa.  Para activar una capa seleccione un objeto que se encuentre en la capa en el escenario.  La capa activa se resalta en la línea de tiempo y un icono en forma de lápiz indica que puede editarse. También puede seleccionar una capa en la línea de tiempo para activarla. Siguiente

48 Cambio de orden en las capas  Cuando las imágenes se superponen el contenido de las capas de la parte superior de la línea de tiempo aparece delante del contenido de las capas que están debajo de ellas.  Para cambiar el orden de las capas solo es necesario arrastrarlas hacia las posición deseada.

49 Creación, asignación de nombre, bloqueo y ocultación de capas  Para crear una capa deberá de:  Seleccionar el botón insertar capa situado en la línea inferior de la línea de tiempo.  Para cambiar el nombre de la capa deberá de:  Dar doble clic en el nombre de la capa e insertar el nuevo nombre. Siguiente

50  Existen controles a la derecha de cada nombre de capa que le permiten bloquear u ocultar el contenido de la capa actual. Inicio

51 Utilización de capas de máscaras  Para obtener efectos de foco y transiciones puede utilizar una capa de más cara para resaltar partes de la capa inferior. Ejercicio:  Poner una instancia de un coche en una capa  A la capa anterior ponerle el nombre coche  Con la capa –coche- seleccionada en la línea de tiempo, haga clic en el botón agregar capa para crear una nueva capa encima de la capa –coche- y asigne a esta el nombre -mascara coche-.  Con la herramienta ovalo dibuje un ovalo relleno sobre el coche  Haga clic derecho sobre la capa –mascara de coche- y elija máscara del menú contextual. Inicio

52 CREACIÓN DE ANIMACIONES INTERPOLADAS  Existen dos métodos para crear una secuencia de animación en Flash: La animación fotograma por fotograma y la animación interpolada.  En la animación fotograma por fotograma se crea la imagen en cada fotograma.  En la animación interpolada se crean los fotogramas inicial y final y flash crea los fotogramas intermedios. Flash varía el tamaño, la rotación, el color u otros atributos del objeto uniformemente entre los fotogramas inicial y final para dar una impresión de movimiento.  La animación interpolada es una técnica esencial para la creación de movimiento y cambio en una película que al mismo tiempo reduce el tamaño del archivo. Siguiente

53 Utilización de fotogramas clave en las animaciones  Un fotograma clave es un fotograma en el que puede especificar cambios en un botón o en una animación. En la animación interpolada se crean fotogramas clave en puntos importantes de la línea de tiempo y Flash se encarga de crear los otros fotogramas intermedios. Los fotogramas clave se indican con círculos en cada fotograma. Un fotograma clave de una capa que no contiene gráficos está en blanco. Inicio

54 Movimiento de la interpolación Ejercicio: Dibuje un coche en una capa que llevará el nombre – coche – El dibujo se deberá poner en el escenario en la parte central izquierda. Con la herramienta flecha haga una cuadro que cubra el coche (este se seleccionará) Seleccionar el menú Insertar > Crear interpolación de movimiento Aparecerá un fotograma clave y frente a él una línea punteada debido a que está incompleta la interpolación (solo tiene inicio pero no fin). Dar un clic en el fotograma 15. Mover ahora el coche con la herramienta flecha hacia el extremo opuesto. Ahora la línea punteada se convierte en una línea seguida entre un fotograma clave inicial y uno final. Seleccione el fotograma 1 y a continuación menú Control > Reproducir. Para ver de nuevo la película seleccione Control > Rebobinar y a continuación Control > Reproducir. Inicio

55 Temario 4  Sonido  Importar sonidos  Imagen  Importar archivos  Formatos de imagen que soportan flash  Interactividad  Creación de escenas  Uso de los Scripts de Acción (Action Script nivel básico)  Vinculación de escenas y otras películas  Creación de botones  Publicación del trabajo  Formatos de Flash (.FLA.SWF)  Publicando para Internet  Publicando para Interactivos Uno DosTres

56