Animación Con Flash Cs4 y CS5

8/17/2019 Animación Con Flash Cs4 y CS5

1/97

ISBN 978-607-7272-92-2

9 786077 272922

Carlos Zepeda Chehaibar

Flash CS4 y CS5

Animacióncon Flash


2/97


3/97

LEGALES

Autor:Carlos Zepeda Chehaibar

Apoyo en actualización:Miguel Pérez Martínez

Guillermo Larios

Director del Libro: Carlos Zepeda Chehaibar

Coordinación Editorial: Abraham Lule Oyervides

Diseño Gráfico y editorial:Héctor Mendoza SuárezAbraham Lule OyervidesGuillermo Larios

Revisión de edición:Alfredo Salazar de la Vega

Ilustración de portada: Ángel Gabriel Herrera MedinaJesús Arteaga Duarte

Animación con FlashFlash® CS4/CS5

Animación con Flash® CS4/CS5. Profesor2ª Edición 1ª ReimpresiónJunio 2015

D.R. © Grupo Educare, S.A. de C.V., Cerro de Mesontepec, número 83, Colonia Colinas del Cimatario, Querétaro, Qro., CP. 76090, 2011.Queda prohibida la reproducción total o parcial de esta obra por cualquier medio, sin autorización de los editores.

ISBN 978-607-7272-92-2Impreso y hecho en México.Esta es una obra protegida por las leyes internacionales de derechos de autor. Prohibida la reproducción total o parcial de esta obra y/o losrecursos que la acompañan, por cualquier medio, sin autorización escrita de Grupo Educare, S.A. de C.V.

Editado por Grupo Educare S.A. de C.V.Impreso por: Grupo Formavi, S.A. de C.V.Calz. Santo Tomás #139 Col. Santo Tomás Del. Azcapotzalco, C.P. 02020 México, D.F.

El logotipo de Grupo Educare es propiedad de Grupo Educare, S.A. de C.V.El diseño editorial y contenidos gráficos son propiedad exclusiva de Grupo Educare, S.A. de C.V.Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos ficticios, a menos que se indique locontrario. Las citas, imágenes y videogramas utilizados en esta obra se utilizan únicamente con fines didácticos y para la crítica e investigación científica o artística, porlo que el autor y Grupo Educare, S.A. de C.V. no asumen ninguna responsabilidad por el uso que se dé a esta información, ni infringen derecho de marca alguno, enconformidad al Artículo 148 de la Ley Federal del Derecho de Autor.

Microsoft Office, MS DOS, MS Windows, Word, PowerPoint, Excel, FrontPage y Access y sus logotipos son marcas comerciales de Microsoft Corporation. Microsoft y ellogo de Microsoft Office son marcas registradas de Microsoft Corporation en los Estados Unidos y/o en otros países. Microsoft no patrocina, endosa o aprueba estaobra. Flash, Illustrator, Fireworks, Freehand, Dreamweaver, Photoshop y sus logotipos son marcas registradas de Adobe Inc. Adobe no patrocina o endosa esta obra.


4/97

CONTENIDO

Animación Flash CS4/CS5

Propuesta Pedagógica I¿Qué es Flash? 7Lámina de apoyo 01. Evolución de Flash (Historia)? 9Actividad 01. Evolución de Flash (Historia) 9Derechos de Autor 10Requisitos del proyecto 11Imágenes vectoriales 13Ventajas de los vectores / Formatos de archivo 14Imágenes de mapas de bits 15Actividad 02. Recordando e investigando 16

Entorno de trabajo 19Escenario (Stage) 19Línea de tiempo (Timeline) 20Herramientas (Tools) / Propiedades (Properties) 20Biblioteca de símbolos (Library) / Acciones (Actions) 21Actividad 03. Reconociendo el entorno 21MID 01. Entorno de trabajo de Flash 22Cómo reorganizar los paneles 22

Dibujar y colorear vectores 23MID 02. Herramientas de Flash 23Actividad 04. Identificando herramientas 23Cómo se comportan las formas en Flash 26MID 03. Dibujando vectores 27Actividad 05. Dibujando vectores 27

Texto (Text) 29 Texto Estátco (Static Text) / Texto Dinámico (Dinamic Text) 30 Texto de entrada (Imput Text) 30MID 04. Trabajando con texto 30Actividad 06. Creando formas 31 Trabajo con la Línea de tiempo (Timeline) 31MID 05. Línea de tiempo 33Actividad 07. Repaso de la línea de tiempo 33Actividad 08. Animando con la línea de tiempo 34

Sonido (Sound) 35MID 06. Biblioteca de símbolos 35Event / Stream 35


5/97

CONTENIDO

MID 07. Trabajando con sonido 36Actividad 09. Haciendo pruebas con sonido 37Actividad 10. Conceptos clave 38

Símbolos, sus propiedades y líneas de tiempo 40 Tipos de símbolos 40MID 08. Tipos de símbolo y sus líneas de tiempo 42MID 09. Cómo crear un botón 42MID 10. Cómo crear un MovieClip 42Actividad 11. Tipos de símbolos 42MID 11. Instancias y sus propiedades 44Actividad 12. Creando instancias 44

Actividad 13. Creando botones para una tarjeta interactiva 45

Máscara (Mask) 48MID 12. Máscaras 49Actividad 14. Creando una máscara 49

Principios de Animación 50Animación cuadro por cuadro (frame by frame) 51Actividad 15. Animando cuadro por cuadro 51MID 13. Animación cuadro por cuadro 51

Animación Interpolación Clásica 52Animación Interpolación de Movimiento 52MID 14. Motion Tween 53Actividad 16. Animando con Motion Tween 54Animación Interpolación de Forma 55MID 15. Shape Tween 56Actividad 17. Animando con Shape Tween 56Actividad 18. Identificando Tweens 58

Guías de movimiento (MotionGuide) 58MID 16. Guías de movimiento 59Actividad 19. Siguiendo guías 59

Filtros (Filters) 61MID 17. Filtros 62Actividad 20. Utilizando filtros 63Actividad 21. Publicidad para Internet 64Actividad 22. Creacion de un banner 67Actividad 23. Animación con Pivotes 73Actividad 24. Tarjeta Electrónica 79Actividad 25. Máscara ASV 85


6/97

RECURSOS

Este material forma parte de un conjunto de recursos que conforman el Programa de Informática y Tecnología

(PIT). Está organizado en bloques integrales que incluyen todo lo necesario para aprender, practicar y evaluarhabilidades o competencias. Las explicaciones, imágenes, tablas, actividades, notas y tips, apoyadas con lasláminas y tutoriales, permiten integrar la experiencia de aprendizaje desde múltiples perspectivas. Así, podemosafirmar que el PIT de Grupo Educare es la mejor manera de aprender haciendo.

Material Impreso

Los recursos digitales que acompaña al material impreso contienen videos que te ayudarán a comprender los

conceptos y a poner en práctica las habilidades adquiridas. Adicionalmente encontrarás los archivos que serequieren para realizar las actividades, algunos documentos y aplicaciones útiles. No olvides que los recursosdigitales son parte integral del programa, por lo que es muy importante que lo conozcas y utilices en el curso.

Recursos Digitales


7/97

ICONOGRAFÍA

Este icono nos indica un ejercicio que refuerza de manera práctica e inmediata laparte teórica de este material.

Las notas que verás dentro de tu texto, puntualizan la teoría o los aspectos másimportantes de un tema.

Es una sugerencia que complementa un tema del material impreso, dando unpanorama más amplio al alumno sobre cómo ejecutar una actividad de maneramás sencilla y práctica.

Es el material digital de los recursos del programa. La representación en video dela parte teórica de este volumen.

La lámina es un recurso del profesor, que sirve como refuerzo dinámico einteractivo a un tema denso, que complementa la teoría del material impreso.

Actividad

Nota

Tip

Video

Lámina de apoyo


8/97

PROPUESTA DIDÁCTICAANIMACIÓN CON FLASHFlash CS4 CS5


9/97

ANIMACIÓN CON FLASHFlash CS4 CS5

II

TIEMPO ENSEMANAS

TEMAS SUBTEMAS COMPETENCIA

1 ¿Qué es Flash?

Derechos de AutorRequisitos del proyectoImágenes vectorialesVentajas de los vectoresFormatos de archivoImágenes de mapas de bits

Escoge la aplicación correcta al manipulardiferentes tipos de archivos.Define derechos de autor su importancia y larelación con su proyectos.Distingue entre imágenes Vectoriales y Mapasde Bits.

1 Entorno de Trabajo

Escenario (Stage)Línea de tiempo (Timeline)Herramientas (Tools)Propiedades (Properties)Biblioteca de símbolos (Library)Acciones (Actions)Cómo reorganizar los paneles

Lista los elementos que componen el Espacio deTrabajo de Flash.Usa el acomodo de paneles para organizar unEspacio de Trabajo presonalizado.Identifica los grupos de Herramientas, susopciones y aplicaciones.

2 Dibujar y Colorear VectoresCómo se comportan las formasen Flash

Compone formas compuestas a partir de lacombinación de formas simples.

1 Texto (Text)

Texto Estátco (Static Text)Texto Dinámico (Dinamic Text)Texto de entrada (Input Text)Trabajo con la Línea de tiempo(Timeline)

Escoge el tipo de texto adecuado para cadaproecto.Emplea la linea de tiempo reconociendo loselementos que la componen y organizando loselementos del escenario para crear animaciones.

2 Sonido (Sound) Event / StreamUsa el panel de propiedades para aplicardiferentes efectos a un archivo de sonido.


10/97

DISEÑO MULTIMEDPropuesta Didáct

OBJETIVOSACTIVIDADES SUGERIDAS PARA EL

ALUMNO (CONTENIDAS EN EL MATERIAL

DE TRABAJO)

TUTORIAL SUGERIDO RECURSOS

1.- Conocer los origenes de Flash y su evolución.2.- Definir los Derechos de Autor identificando fuentes

de información de libre uso.3.- Identificar las principales caracteristicas de las

imágenes de Mapa de Bits y Vectoriales, listandosus ventajas, desventajas y usos.

4.- Analizar un proyecto y determinar las herramientasnecesarias para su desarrollo.

Actividad 01. Evolución de Flash(Historia)

Actividad 02. Recordando einvestigando

Lámina de apoyo 01.Evolución de Flash (Historia)

Computadora.

Material de aopyo del alumno

CD del alumno.

1.- Identificar diferentes usos de Flash y reconocer loselementos que conforman el Espacio de Trabajo.

2.- Localizar las Herramientas, explicar su uso ydistinguir propiedades y opciones disponibles paracada una de ellas.

Actividad 03. Reconociendo elentorno 21

MID 01. Entorno detrabajo de Flash22

Computadora.


CD del alumno.

1.- Emplear las Herramientas de dibujo y pintura paracrear formas complejas, disitinguiendo propiedadesde las formas.

Actividad 04. Identificandoherramientas

Actividad 05. Dibujando vectores

MID 02. Herramientas deFlash

MID 03. Dibujandovectores

Computadora.


CD del alumno.

1.- Definir los diferentes tipos de Texto que trabajaFlash y sus caracteristicas.

2.- Usar la línea de tiempo para organizar símbolosreconociendo los diferentes tipos de fotogramasempleados en la animación.

Actividad 06. Creando formasActividad 07. Repaso de la línea

de tiempoActividad 08. Animando con la

línea de tiempo

MID 04. Trabajando contexto

MID 05. Línea de tiempo

Computadora.


CD del alumno.

1.- Incorporar sonidos en un documento de Fashcomparando los tipos de sincronía Event y Stream.

Actividad 09. Haciendo pruebascon sonido

Actividad 10. Conceptos clave

MID 06. Biblioteca desímbolos

MID 07. Trabajando consonido

Computadora.


CD del alumno.


11/97


IV

TIEMPO ENSEMANAS


2Símbolos, sus propiedades y líneas de

tiempoTipos de símbolos

Localiza simbolos en la Biblioteca de símbolos ycrea animaciones con ellos.

Máscara (Mask)Aplica mascaras a elementos en el Escenariomejorando el impacto de su trabajo.

Principios de Animación

Animación cuadro por cuadro(frame by frame)

Animación Interpolación ClásicaAnimación Interpolación deMovimientoAnimación Interpolación deForma

Nombra las formas de Animación que tiene

disponibles Flash reconociendo las caracteristicasprincipales para cada una de ellas.Ejemplifica las formas de Animación aplicandoestas para crear películas de Flash.

Guías de movimiento (MotionGuide)Prepara guías de movimiento para emplearlascomo base para animaciónes no líneales y quesigan una ruta especifica.


12/97




DE TRABAJO)


1.- Crear símbolos en un documento Flashdeterminando líneas de tiempo para emplearlos enuna película.

Actividad 11. Tipos de símbolosActividad 12. Creando instanciasActividad 13. Creando botones

para una tarjetainteractiva

MID 08. Tipos de símboloy sus líneas detiempo

MID 09. Cómo crear unbotón

MID 10. Cómo crear unMovieClip

MID 11. Instancias y suspropiedades 44

Computadora.


CD del alumno.

1. Crear efectos de máscara e identificando como elenmascaramiento puede emplearse para

mejorar un documento Flash.

Actividad 14. Creando unamáscara

MID 12. Máscaras

Computadora.


CD del alumno.

1.- Crear diferentes animaciones aplicando losconceptos de animación Cuadro por Cuadro,Interpolación Clásica, Interpolación de Movimiento eInterpolación de Forma.

Actividad 15. Animando cuadropor cuadro

Actividad 16. Animando conMotion Tween

Actividad 17. Animando conShape Tween

Actividad 18. IdentificandoTweens

MID 13. Animación

cuadro porcuadro

MID 14. Motion TweenMID 15. Shape Tween

Computadora.


CD del alumno.

1.- Diseñar animaciónes no lineales empleando Guíasde Movimiento.

Actividad 19. Siguiendo guíasMID 16. Guías de

movimiento

Computadora.


CD del alumno.


13/97


VI

TIEMPO ENSEMANAS


Filtros (Filters) Recuerda los filtros disponibles en Flash y losaplica alos elementos dentro del proyecto.

Total desemanas 9


14/97

V




DE TRABAJO)


1.- Mejorar el impacto visual de los simbolos de undocumento Flash mediante la aplicación de losefectos disponibles en la aplicación.

Actividad 20. Utilizando filtrosActividad 21. Publicidad para

Internet Actividad 22. Creacion de un

bannerActividad 23. Animación con

PivotesActividad 24. Tarjeta ElectrónicaActividad 25. Máscara ASV

MID 17. Filtros

Computadora.


CD del alumno.


15/97

VIII



16/97Diseño Multimedia

¿Qué es Flash?

Flash se originó como un simple programa de dibujo para computadora llamado SuperPaint , creado poun estudiante de ingeniería de nombre John Gay, a quien le gustaba diseñar y construir cosas. El programa funcionaba en las computadoras Apple II , en una época en la que los gráficos eran algo novedoso

ni siquiera se había inventado el concepto de “deshacer” (undo).

La tecnología de SuperPaint fue desarrollada por varias compañías hasta crear un programa que se llamInetlliDraw . La característica única de IntelliDraw era que, además de poder dibujar cosas, era posiblagregar acciones a los dibujos. Por ejemplo, por primera vez fue posible dibujar una gráfica que cambiarmientras el usuario tecleaba diferentes números. IntelliDraw tuvo poco éxito en el mercado, pero JohGay nuevamente pensó que tenía que crear un producto novedoso.

Diseño Multimedia


17/97


8

8

En 1995, la compañía Future Wave se interesaba por crear programas de animación, pero en esentonces, la única forma de distribuir animación era por medio de videos VHS o CD Rom, por lo que emercado para un software que facilitara la animación era muy reducido.

Pero justo en la misma época, el Internet surgía como una novedosa y creciente herramienta dcomunicación. En teoría, era posible que el Internet se volviera lo suficientemente popular como parcrecer y permitir transmitir gráficos e incluso animación. Si esto ocurría, Future Wave tendría unoportunidad para vender su programa de animación.

Con esta esperanza en mente, empezaron a trabajar en un programa que permitiera dibujar, creaanimación y usar un lenguaje de programación para crear contenido para la Web. El programa se llamFuture Splash Animator y empezó a crecer poco a poco.

En 1996, la compañía Macromedia compró el novedoso programa y lo rebautizó con el nombre de Flas1.0. Diez años más tarde, Macromedia ya había lanzado al mercado 7 versiones de Flash, alcanzando millones de usuarios, convirtiéndose en la aplicación para Web con mayor penetración en el mundo.


18/97

1. En la red mundial de Internet hay miles de sitios con contenido creado en Flash, algunos de ellosimples, pero otros muy complejos. La página www.thefwa.com (The Favourite Website Awards)agrupa decenas de sitios reconocidos por su alta calidad. Visita este sitio y navega en algunapáginas para que conozcas las posibilidades de Flash y te sirvan de inspiración creativa.

2. Elige tres de los sitios visitados (los que más te hayan gustado) y llena las siguientes formas:

Sitio 1 URL:

Análisis de diseñoAnálisis de contenidoAnálisis de interactividad

Lámina01 Evolución de Flash (historia)

En 2006, la compañía Adobe, líder mundial en aplicaciones para diseño gráfico, adquiere a Macromedia

La fusión de los expertos en diseño Web y diseño gráfico, ha ofrecido desde entonces poderosaherramientas de software para el diseño, la animación y la producción multimedia.

Pero entonces, ¿qué es Flash hoy día? Flash es una herramienta de edición con la que los diseñadorey desarrolladores pueden crear presentaciones, aplicaciones y contenido que permite la interacciódel usuario. Los proyectos de Flash incluyen desde simples diseños hasta complejos sitios Web coanimaciones, contenido de video e interacciones complejas.

Dado el pequeño tamaño de sus archivos, Flash resulta ideal para crear contenido que se distribuye a travéde Internet. Para lograrlo, Flash utiliza en gran medida gráficos vectoriales. Este tipo de gráfico requier

menos memoria y espacio de almacenamiento que las imágenes tradicionales de mapa de bits.

Actividad 01 Evolución de Flash


19/97


10

Sitio 3 URL:

Análisis de diseñoAnálisis de contenidoAnálisis de interactividad

Sitio 2 URL:

Análisis de diseño

Análisis de contenidoAnálisis de interactividad

0

Derechos de autor

Actualmente es posible encontrar una gran cantidad de información, imágenes fotográficas y de vectoresarchivos de audio y otros contenidos en Internet y no siempre es fácil evitar caer el la tentación deutilizarlos para nuestros proyectos de Flash. Hacer esto conlleva el riesgo de usar información protegido con “derechos de autor” o Copyright ©.

El derecho de autor consiste en una seria de normas y derechos que la ley otorga al creador de una obr

literaria, científica, artística o didáctica para su uso y publicación. Estos derechos varían según el paípero el uso de este tipo de trabajos sin permiso de su creador, puede ser legalmente sancionado.

Algunas de las obras originales que pueden ser protegidas (cualquiera que sea su forma de expresiónsoporte o medio) son: entrevistas, libros, folletos, obras dramáticas o coreográficas, composicionemusicales (con o sin letra), grabaciones sonoras, cinematográficas y/o audiovisuales, dibujos, pinturasesculturas, grabados, litografías, historietas, cómics, fotografias, gráficos, mapas, planos, maquetas diseños arquitectónicos, de ingeniería, programas informáticos y sitios web.

En México, la Ley Federal del Derecho de Autor otorga derechos patrimoniales que están vigentesdurante toda la vida del autor, más 100 años tras la fecha de su muerte o la fecha de publicación. Poesto, es muy importante el correcto uso del material gráfico, de audio o video que puedes encontrarcirculando en Internet.

Y a pesar de que existen algunos sitios web que ofrecen archivos de uso “libre”, una buena recomendacióes que trates de generar tú mismo los diferentes elementos que utilizarás en tus proyectos.


20/97Diseño Multimedia

Requisitos del proyecto

En la mayoría de los casos, los proyectos de Flash requieren de la manipulación de los archivos gráfico(ilustraciones y fotos), de audio y video por medio de otros programas, por lo que es conveniente qucuentes con conocimientos básicos de otros programas tales como Photoshop o Ilustrator.

Adobe Photoshop:

Muchas veces los proyectos de Flash requieren el uso de imágenes fotográficas. Estas, a diferencia de uarchivo compuesto por vectores, poseen una mayor cantidad de información para definir cada punto dla imagen, lo que les confiere un mayor peso.

Recuerda que la mayoría de las veces, los archivos de Flash estan destinados a Internet, por lo que eaconsejable que todas las fotografías sean optimizadas para así tener películas más ágiles al momentde publicarlas.

Algunos puntos básicos a considerar en el uso de fotografías en Flash son:

1. Las imágenes deben de tener el tamaño final al que serán publicadas. Si los archivos que utilizaráno tienen el tamaño adecuado para los requerimientos de tu proyecto de Flash , se deberán redimecionar desde un programa de edición de imágenes fotográficas (generalmente Adobe Photoshop )

2. Es aconsejable que estas imágenes tengan una resolución adecuada; al no ser archivos que s

requieran imprimir, 72 dpi son suficientes.3. Adobe Photoshop cuenta con una opción para guardar documentos (Salvar para Web y Dispositivo

o Save for Web & Devices ), la cual nos permite obtener archivos de poco peso y buena calidad.

4. Aunque Flash CS4 reconoce varios formatos de imágenes, los archivos JPG son recomendables.

Adobe Illustrator:

A diferencia de Photoshop , los programas de generación de ilustraciones con base en vectores, creadocumentos de poco peso; estos tienen la desventaja de tener una apariencia poco real, pues no tieneel nivel de detalle de una fotografía.

Para utilizar documentos de Illustrator en Flash , puedes guardarlos en formato Adobe Ilustrator (AI) importarlo dentro de Flash o simplemente copiar directamente de Illustrator y pegar en Flash . Algunaopciones que te permiten estas maneras de trabajar son:


21/97


12

2

1. Pegar como mapa de Bits. Es la manera más simple de pegar un archivo, este pasa como unimagen de mapa de bits perdiendo las propiedades de los objetos vectoriales.

2. Mantener las capas (layers). Esta opción permite conservar las capas originales en Flash .

3. Convertir capas en... Al utilizar esta herramienta, Flash puede convertir las capas de Illustrator fotogramas clave en una capa en particular.

4. Colocar objetos en la posición original. Se conserva la misma ubicación del material al pasarlde Illustrator a Flash .

Adobe Fireworks:

A diferencia de los dos programas anteriores, al utilizar material de Fireworks en Flash es posibconservar la mayoría de sus atributos originales, sin importar si estos son archivos PNG o materialegráficos. Esto se debe a que originalmente ambos programas eran propiedad de Macromedia.

Algunas opciones que podrás utilizar al momento de importar archivos de Fireworks son:

1. Impotar como un mapa de bits plano. Elementos como capas, vectores o textos de nuestrarchivo original son reducidos a pixeles dejando de ser editables.

2. Importar No. de página. Permite seleccionar de un documento con varias páginas una en particular.También es posible pegarlas todas. Al hacerlo, cada página se convertirá en un movieclip.

Otros archivos que Flash también reconoce son los de AutoCAD y FreeHand (del FH7 al FH11). En ambocasos, una vez importados, los archivos son editables.

Sonido:

En cuanto a sonido, Flash no puede grabar ni crear sonidos. Para utilizar este recurso en tus proyectodeberás grabarlos o utilizarlos por otros medios como un CD de sonidos o de un sitio web de libracceso. Siempre que quieras modificar la duración, calidad o volumen será necesario la utilización de uprograma de edición de audio.

Cuando hayas importado tus archivos de audio a Flash , podrás sincronizar el sonido con animacionesreproducir uno o varios sonidos al mismo tiempo o utilizar efectos como balances y desvanecimientos.


22/97

Imágenes Vectoriales

¿Recuerdas que en las clases de física se estudian los vectores? En diseño gráfico un vector esta consttuido por una serie de puntos y líneas, rectas o curvas, definidas matemáticamente.

Las características de un vector son las siguientes:a. Tienen una línea de contorno (también llamado trazo) y un color de relleno. La

características del contorno y del relleno se pueden cambiar en cualquier momento.b. Los vectores se pueden agrupar, separar, recortar, intersectar y relacionar con otros vectore

en el dibujo.c. Cada vector se manipula por separado del resto de los objetos: se puede ordenar d

cualquier manera y modificar sin afectar otros vectores.

Para comprender mejor por qué a estos objetos se les llama vectores, primero recuerda que en geometría, un punto del plano se puede definir por sus coordenadas. Dos puntos cualesquiera se pueden uni

mediante una línea recta.

Si en lugar de unir dos puntos con una recta se hace con una curva, los puntos se denominan nodos opuntos de anclaje. La forma de la curva (suave o pronunciada) se define por otros puntos invisibles eel dibujo, llamados puntos de control, manejadores o manecillas.

Flash sólo puede importar archivos de audio en los siguientes formatos:1. MP3 (en plataformas Windows y Mac ).2. WAV (preferente en Windows ).3. AIFF (preferente en Mac ).

Si tu equipo tiene instalado el QuickTime , podrás utilizar archivos WAV y AIFF en ambas plataformas.

Así mismo, en lo referente al uso de videos, deberás convertir los archivos a un formato que reconozcaFlash . La versión de CS4 es capaz de aceptar archivos de video compactados por el codec H.264 . Estcodec (esquema de compresión/descompresión) está incluido en casi todos los programas de conversióactuales, tales como Any Video Converter Free Version (de Anvsoft ) o el QuickTimePro de Apple.

Un formato muy utilizado en Flash es Flash Video (FLV ) obtenido por medio de Adobe Media Encorde

programa que se instala en tu disco duro al instalar Flash . Este formato es compatible con las versioneanteriores de Flash Player .


23/97


14

4

Cualquier forma abierta o cerrada, como un polígono, rectángulo, elipse o una curva irregular, se basaen nodos y puntos de control. Para rellenar un gráfico vectorial es necesario que los puntos estén unidoformando una línea cerrada.

Los contornos o trazos pueden ser delgados o gruesos y tener una forma determinada. Esto permite creadibujos lineales o creaciones artísticas con un contorno caligráfico.

Ventajas de los Vectores

1. No importa el tamaño en el que se dibuje o despliegue un vector: siempre aparecerá con la mismnitidez y calidad al escalarlo (hacerlo más pequeño o más grande), tanto en la pantalla como en limpresión.

2. Cada objeto está definido por fórmulas matemáticas independientes al resto de los demás. Puedescalarse, distorsionarse, cambiar de forma o resituarse sin afectar a los otros elementos del dibujo

3. Se puede controlar con gran precisión la forma, orientación y orden de los elementos.

4. Las imágenes vectoriales no están limitadas a un área rectangular, como los mapas de bits.

5. Cualquier cambio que se aplique a los objetos puede modificarse en cualquier momento: dibujo siempre es editable.

6. Se puede reutilizar un dibujo vectorial o parte de él en otros proyectos.

7. El peso del archivo es muy reducido, dado que no se almacena información para definir cada punto de pantalla.

8. Permite trabajar con texto sin limitaciones.

Nodo

Nodo

Punto de control

Punto de control

Nodo


24/97

Desventajas de los Vectores

Los gráficos vectoriales no pueden producir imágenes fotográficas realistas, ya que están hechos de áreade color sólido o degradado y no pueden representar los tonos continuos de una fotografía. Por eso lmayoría de las imágenes vectoriales tienen una apariencia de caricatura. Los vectores son de aspectofrío, con un contorno o trazo perfecto, sin naturalidad.

Un uso frecuente que se da a la conversión de mapas de bits a vectores, es la necesidad de publicarloen Web. Los formatos más comunes y aceptados para la imagen vectorial en Web son el ShockwavFlash (SWF) y PNG.

Formatos de archivo

Existen diferentes aplicaciones que trabajan con archivos de tipo vectorial, como Adobe Illustrator Corel Draw o Inkscape . Aunque cada aplicación maneja sus formatos de archivo nativos, en general eposible abrir y modificar los gráficos creados en una aplicación, utilizando otra aplicación. Los formatode archivo nativos principales, reconocidos por otras aplicaciones son:

a. Adobe Illustrator (AI).b. Corel Draw (CDR).c. Corel Exchange (CMX).d. Computer Graphics Metafile (CGM).e. Inkscape (SVG).f. Auto CAD (DXF).

Imágenes de Mapa de bits

Las imágenes de Mapa de bits o bitmaps, están compuestas por píxeles. Los píxeles son los elementomínimos de imagen. Un mapa de bits es una cuadrícula de esos pequeños puntos individuales de coloque están ordenados de una forma determinada para definir un patrón y formar la imagen que observaen pantalla.

Las imágenes bitmap dependen de la resolución, es decir del número de píxeles que existen en un áredeterminada. La resolución se mide en dpi o puntos por pulgada.


25/97


16

Actividad 02 Recordando e investigando

6

Debido a que los mapas de bits dependen de la resolución, es difícil incrementar o disminuir su tamañ

sin reducir la calidad de la imagen. Cuando se hace más pequeña una imagen bitmap, se eliminapíxeles y cuando se hace más grande se crean nuevos píxeles. Cuando se crean nuevos píxeles, eprograma de edición que se esté utilizando, estima el valor del color de los nuevos píxeles basado en loya existentes. El resultado siempre es una calidad reducida.

Los bitmaps pueden modificarse con programas como Microsoft Paint , Adobe Photoshop , Corel PhotPaint o Gimp , entre muchos otros.

Contesta las siguientes preguntas usando tus propias palabras:

1. ¿Qué es un vector?

2. ¿Qué es un píxel?

3. Dibuja un píxel.

4. ¿Qué es un Mapa de Bits?

5. En el espacio en blanco especifica si estamos hablando de un vector o de un mapa de bits.

a. No importa el tamaño al que se dibuje, siempre tendrá la misma nitidez y calidaal escalarlo.

Vector


26/97

b. Se controla de forma precisa la forma, orientación y orden de los elementos.

c. Depende de la resolución y es difícil cambiar el tamaño sin perder calidad.

d. Pierde pixeles si se hace más pequeño.

e. El tamaño del archivo es muy compacto.

6. Haz una pequeña investigación de las similitudes y diferencias entre Adobe Illustrator y AdobPhotoshop . Creen una mesa de discusión entre compañeros y profesor para defender puntos dvista acerca de las ventajas o desventajas de cada uno. Anota en este espacio tus conclusiones

Vector

Vector

Mapa de bits

Mapa de bits


27/97


18

8

7. Crea un collage con recortes de revistas. Divide el área del collage en dos partes. En una mitapega solamenete imágenes que sean ilustraciones vectoriales. En la otra mitad pega imágene

que sean mapas de bits o fotografías.


28/97

Entorno de trabajo

El entorno de trabajo de Flash se compone de seis paneles principales, que pueden mostrarse, ocultarso moverse según sea necesario. Si has utilizado Flash con anterioridad, podrás notar que en la versióCS4, muchas tareas ahora se manejan de manera diferente, pues los desarrolladores de Adobe hahomologado la interfaz del programa con los demás productos de la Crative Suite tales como Photoshoo Illustrator . Esto ha dado como resultado que el programa sea más fácil e intuitivo.

Al igual que en las versiones anteriores a la CS4 , todos los paneles se pueden mostrar u ocultar pomedio del Menú Window .

Dependiendo de las necesidades de tu proyecto, estos paneles pueden organizarse de diferentes formasexistiendo cuatro básicos: el panel de Herramientas (Tools), Línea de tiempo (Timeline), Escenari(Stage) y Propiedades (Properties). Aunque estos páneles funcionan igual que las versiones anterioressu apariencia cambió en Flash CS4.

Te recomiendo que, mientras te familiarizas con el programa, utilices la distribución predeterminada demodo Clásico (Clasic) de los páneles de trabajo. Para mostrar las diferentes distribuciónes predeterminadautiliza el Menú Ventana/Espacio de Trabajo/Clásico (Window/Workspace Layout/Clasic).

Escenario (Stage)Situado en la parte central del programa, el escenario es el área de trabajo rectangular donde se colocel contenido, ya sean gráficos vectoriales, cuadros de texto, botones, movie clips o imágenes de mapde bits. Sólo el contenido que esté dentro de este rectángulo será mostrado en la película terminadaPuedes utilizar áreas fuera del rectángulo para situar objetos que después entrarán a escena o parobjetos temporales de trabajo.

TipA los documentos de Flash se les llama películas debido a que tienen elementossimilares a los largometrajes. Por esta razón es más sencillo comprender algunosconceptos si los relacionas con el séptimo arte.


29/97


20

Línea de tiempo (Timeline)Muestra dos dimensiones de la película: el tiempo (horizontalmente a través de frames) y la profundida(verticalmente en layers o capas). Los componentes principales de la línea de tiempo son los layers

los frames y la cabeza lectora. Dependiendo del tipo de organización que hayas escogido, la línea dtiempo puede encontrarse en la parte superior o inferior de la pantalla; incluso, en el modo Depurar Desarrollador, no es visible.

1. Los layers son capas apiladas unas sobre otras, cada una de las cuales puede contener un gráficdiferente que aparece en el escenario. Los layers de un documento aparecen de forma vertical la izquierda de la línea de tiempo. Todos los gráficos que se colocan en el escenario se ubican enalgún layer. Los tipos de layers que se pueden insertar en la línea de tiempo son: layers, guías, guíapara movimiento y máscaras. Al igual que la Línea de tiempo, los layers pueden no ser visiblesdependiendo del tipo de organización de paneles que hayas seleccionado.

2. Similar a un largometraje, los documentos de Flash dividen el tiempo en cuadros o frames. Loframes contenidos en cada layer aparecen de forma horizontal, a la derecha del nombre del layeLos tipos de frames que se pueden insertar son: Frame, Keyframe y Blank Keyframe.

3. La cabeza lectora indica el frame actual que se muestra en el escenario. Mientras se reproduce unpelícula de Flash , la cabeza lectora se desplaza de izquierda a derecha por la línea de tiempo. Eposible hacer que la cabeza lectora avance hacia atrás o se mueva a diferentes lugares, pero parello es necesario apoyarnos con algo de programación.

Herramientas (Tools)Las herramientas de este pánel permiten crear, editar, dibujar, pintar, seleccionar y modificar objetosasí como cambiar la visualización del escenario. Si colocas tu puntero sobre las diferentes herramientapodrás conocer el nombre y el atajo de teclado necesario para utilizarla.

Propiedades (Properties)Desde este panel se pueden modificar los atributos mas utilizados de cualquier herramienta que estactiva o cualquier objeto que tengamos seleccionado en el escenario. Por lo tanto, el aspecto de estepanel variará dependiendo de lo que se tenga seleccionado.

• Si seleccionas una herramienta del panel Tools, sin que se haya seleccionado ningún objeten el escenario, el panel de propiedades muestra y permite modificar las características de es

herramienta, como el grosor o color.

• Si seleccionas un objeto en el escenario, el panel de propiedades muestra y permite modificalas propiedades de dicho objeto, como el color, la posición y las dimensiones.

• Si no hay ninguna herramienta ni objeto seleccionado, el panel de propiedades muestra lacaracterísticas del documento, como el color de fondo, dimensiones y velocidad.

20


30/97

Para asegurarte que no hay nada seleccionado, puedes tomar la herramienta Arrow (flecha negra) hacer un clic sobre un área vacía del escenario.

Biblioteca de Símbolos (Library)En este panel se guardan y organizan los símbolos creados en Flash, además de archivos importadotales como gráficos, imágenes de mapa de bits, archivos de sonido y clips de vídeo. En este panel puedeorganizar los elementos creando carpetas.

Acciones (Actions)El panel Acciones permite crear y editar código en Action Script (el lenguaje de programación de Flashpara hacer la película interactiva.

La distribución de paneles se guarda cuando cierras el programa, de manera que al iniciarlo de nuevo, apareccomo lo dejaste la última vez. No olvides que siempre puedes regresar a la distribución de paneles predeterminadautilizando el Menú Ventana/Espacio de Trabajo/Clásico (Window/Workspace Layout/Clasic ). En todalas actividades de este curso, suponemos que estás trabajando con la distribución predeterminada.

Observa el Video Flash 01 Entorno de trabajo y coloca los nombres del entorno de trabajo de Flash enel lugar que corresponde en la imagen siguiente.

Actividad 03 Reconociendo el entorno

Herramientas

Escenario

Línea de tiempo

Biblioteca de símbolos

Propiedades Acciones


31/97


22

Video 01 Entorno de rabajo de Flash

Cómo reorganizar los panelesTodos los paneles tienen 4 áreas de control para manejarlos como mejor te convenga. Analiza lafunción de cada una de estas áreas.

Arrastra desde los puntospara colocar el panel en

otro lugar .

Haz clic en el nombre delpanel para minimizarlo(colapsarlo) o desplegarlonormalmente.

Utiliza el menú del control del panel para cerrarloy acceder a opciones relacionadas con la función

de cada panel.

Utiliza la barra gris obscura paracambiar de posición el Marco de

Aplicación.

En la nueva interfaz de Flash CS4, todos los paneles y herramientas se concentran euna ventana única llamada Marco de Aplicación (Application Frame). Esto es comúnWindows, pero nuevo en esta versión asi como en otros programas de Mac.

Tip

22


32/97

Dibujar y colorear vectores

Flash trabaja primordialmente con gráficos vectoriales. Un grafico vectorial se compone de trazos qutienen propiedades como color, tamaño, posición, etc. Un grafico vectorial puede ser rotado, escalado deformado sin perder sus propiedades ni disminuir su calidad.

Para crear gráficos vectoriales en Flash nos apoyamos del panel de herramientas , el cual está divididen cuatro secciones.

Herramientas vectoriales: Se utilizan para dibujar, pintar, borrar, modificar formas, agregar texto, seleccionar, etc.

Herramientas de vistas:Sirven para desplazarse por el área de trabajo o para ampliar o reducir la vista de la misma.

Color de relleno y color de contorno: Al dibujar los gráficos vectoriales en Flash , se trabaja con dos elementos: el relleno y la línea.

Opciones: Muestra las variantes de la herramienta seleccionada.

Video 02 Herramientas de Flash

Actividad 04 Identificando herramientas

Observa detenidamente el Video 02 Herramientas de Flash y relaciona la imagen con su función. Unecon una línea el icono con su descripción:


33/97


24

Arrow. Sirve para seleccionar y manipular objetos en el escenario.

Subselection. Sirve para seleccionar los puntos que dan forma a un gráficovectorial.

Rotación 3D.

Lasso . Permite seleccionar áreas irregulares a mano alzada.

Pen. Se usa para crear polígonos, curvas y trazos controlados.

Text . Permite introducir textos.

Line. Permite crear líneas rectas.

Rectangle. Sirve para crear rectángulos o cuadrados. Si se mantiene presionadla tecla mientras utilizamos esta herramienta, se crearán cuadradoperfectos. Al mantener presionado el botón de la herramienta Rectangleaparece la opción para seleccionar la herramienta PoliStar.

Oval . Sirve para crear óvalos o círculos. Si se mantiene presionada la tecl mientras utilizamos esta herramienta, se crearán círculos perfectoTambién existe Rectangle primitive (rectángulo simple) y Oval primitive (óvasimple), las diferencias entre los objetos creados con esta herramienta y locreados con Rectangle y Oval radican en las opciones de Edición, Modificació

y Convertibilidad.PoliStar. Sirve para crear polígonos o estrellas.

Pencil. Permite dibujar líneas o contornos a mano alzada.

Spray Brush. Este pincel puede hacer varias copias de cualquier símbolo.

Brush . Se emplea para aplicar rellenos. Se puede modificar su grosor y formade trazo.

Deco. Permite rellenar áreas grandes con patrones decorativos.

Bone. Permite animar el movimiento de un brazo o una pierna adjuntando ladiferentes partes como si fueran una sola extremidad. Esta técnica de animacióse denomina Cinemática inversa (IK).


34/97

PaintBucket. Se utiliza para rellenar gráficos o cambiar su color de relleno

InkBottle. Se utiliza para modificar el color del contorno de los gráficos.

Eyedropper. Se utiliza para tomar una muestra del color de relleno ocontorno de un gráfico.

Eraser. Su función es eliminar gráficos.

Hand. Al seleccionar esta opción podemos mover el escenario arrastrandocon el ratón.

Zoom. Su función es aumentar la visión del escenario cada vez quehagamos clic con esta herramienta.

Ajustar a objeto. Esta herramienta crea líneas magnéticas que intentaránunirse automáticamente con otros objetos al momento de ser trazada.

Transform. Sirve para escalar, distorsionar y rotar gráficos.

Gradient transform. Sirve para escalar, rotar y distorsionar rellenos, sinafectar el gráfico que los contiene.

Stroke Color. Establece el color del contorno de un gráfico o de una línea.Al presionar este botón se despliega una paleta de colores disponibles.

Fill Color. Establece el color de relleno de un gráfico. Al presionar este

botón se despliega una paleta de colores disponibles.

Los paneles de color trabajan con los sistemas RGB (rojo, verde y azul) y HSB (matíz, saturación ybrillo).

El primero mezcla diferentes valores de los 3 colores primarios aditivos (rojo, verde y azul) que acombinarse entre sí pueden formar cualquier color que despliega el monitor de la computadora.

Para seleccionar cualquier color mediante el segundo sistema, haz clic en cualquier parte del cuadrmulticolor y al moverte hacia arriba o hacia abajo modificarás el matíz o la saturación respectivamenteEn el rectángulo vertical lateral puedes variar el brillo del color seleccionado.


35/97


26

Cómo se comportan las formas en Flash

En su mayoría, las herramientas de dibujo pueden crear trazos y rellenos al mismo tiempo. En objeto

como óvalos o rectángulos, Flash considera al trazo de manera independiente al relleno y ambos puedeser seleccionados o modificados por separado.

La forma en que el programa nos indica cuál de los dos está seleccionado es marcándolos con unapantalla punteada.

1. Un clic con la Herramienta Arrow sobre una línea del contorno, seleccionará un segmento de líneaEn el caso de un rectángulo, un clic selecciona sólo un lado, pero como el contorno de un óvalo eun solo segmento de línea continua, un clic selecciona todo el contorno.

2. Un doble clic sobre el contorno lo selecciona todo.

3. Un clic sobre el relleno seleccionará sólo el relleno. Podrías moverlo o eliminarlo sin modificar el cotorno.

4. Un doble clic sobre el relleno selecciona tanto el relleno como el contorno.

5. Para seleccionar áreas mayores o sólo parte de algún objeto, utiliza la herramienta Arrow y arrastrenmarcando los objetos o partes a seleccionar.

6. Con un clic de la Herramienta Subselección (Subselection) podrás seleccionar los puntos de anclde un trazo de manera independiente.

1 2 3

4 65


36/97

Actividad 05 Dibujando vectores

Algunos objetos, como las líneas creadas con las herramientas Line, Pen y Pencil, sólo tienen contorno y norelleno. Otros objetos, como los creados con las herramientas Text y Brush, sólo tienen relleno y no contorno.

Para aplicar un color de relleno, selecciona la figura y utiliza el panel de propiedades. También puedes aplicarellenos con la herramienta Paint Bucket, haciendo clic con dicha herramienta sobre cualquier figura, esté no seleccionada. Similarmente, los colores de contorno se aplican con la herramienta Ink Bottle.

En esta actividad vas a dibujar y colorear vectores, además de conocer su comportamiento en Flash .

1. Abre un documento nuevo de Flash utilizando el Menú Archivo/Nuevo (Menú File/New) y seleccionla opción Flash File (AS2.0) en la ventana Generales. Analiza la línea de tiempo. Todas las películanuevas de Flash tienen un layer y un frame en blanco.

2. Selecciona la herramienta Rectángulo (Rectangle) y dibuja un cuadrado perfecto en el centro de

escenario.

Video 03 Dibujando vectores

2 3 4

6 8 7 9

3. Selecciona el cuadrado con la herramienta Selección (Arrow) y cambia su color de relleno desde eselector Color de relleno (Fill Color) en el panel de Propiedades.


37/97


28

4. Selecciona la herramienta Oval y dibuja un círculo a un lado del cuadrado, dejando un espacio entrlas dos figuras. Es importante que el tamaño del círculo sea igual o un poco más grande que el de

cuadrado.

5. Selecciona el círculo con la herramienta Selección (Arrow) y cambia su color de relleno a undiferente al del cuadrado.

6. Selecciona el círculo y duplícalo con el Menú Edición/Duplicar (Menu Edit/Duplicate) . Arrastra enuevo círculo al lado opuesto del cuadrado.

7. Acerca los dos círculos sobreponiéndolos al cuadrado.

8. Elimina los dos círculos. Observa como el cuadrado queda recortado.

9. Selecciona lo que quedó del cuadrado. Usa Menú Edición/Copiar (Menu Edit/Copy) para copiala selección al portapapeles. Luego usa Menú Edición/Pegar en sitio (Menu Edit/Paste in Placepara pegar la copia en el lugar donde estaba el original. Por último, usa Menú Modificar/Transfomar/Rotar 90° en sentido de las manecillas del reloj (Menu Modify/Transform/Rotate 90CW) y la nueva figura formará una cruz con la figura anterior.

10. Prueba la película con Menú Control/Probar película (Menu Control/TestMovie).

11. Guarda el archivo con Menú Archivo/Guardar ( Menu File/Save ) con el nombre actividad02.flaen la carpeta que tu profesor indique.

En Flash , si se sobreponen dos gráficos de diferente color, se cortan. Si se sobreponen dosgráficos del mismo color, se agrupan. Si no quieres que unos gráficos afecten a otros, debesagruparlos, colocarlos en diferentes layers, o bien convertirlos en símbolos como estudiare-mos más adelante.

Tip


38/97

Texto (Text)

Para añadir texto a una película Flash , selecciona la herramienta Texto (Text) y da clic en el lugar donde lquieres situar en el escenario. Los textos están contenidos en un espacio de ancho determinado. Si al escribse sobrepasa este espacio, entonces el texto pasa a la siguiente línea. En el panel de propiedades podemomodificar los atributos de color, tamaño, tipo de fuente, alineación del texto e interlineado. Es posible añadhipervínculos (URL link) y podemos decidir si el texto será seleccionable o no en la película publicadaAdemás, puedes seleccionar si será un texto estático, texto dinámico o texto de entrada.

Panel de propiedades de los textos incluye opciones como textos dinámicos, tipo de letra, estilo, color, tamaño, entre otros

Texto Estático (Static Text). Estos textos funcionan como si fueran imágenes: son textos que no smodificarán al publicar la película. Un texto estático se puede usar para títulos, mensajes o etiquetas quno van a cambiar durante la reproducción de la película.


39/97


30

Textoeditable

Letrasseparadas

Gráfico vectorial

Video 04 Trabajando con texto

Texto Dinámico (Dynamic Text). El contenido de estos textos puede ser modificado durante lreproducción de la película publicada, normalmente mediante programación. Mensajes como e

puntaje de un juego o la hora actual, son ejemplos de textos dinámicos.

Texto de Entrada (Input Text). Este tipo de texto se utiliza para que el usuario de la películterminada pueda introducir información, que puede ser manipulada mediante programación. Cuanduna película pide información al usuario, como su nombre, correo electrónico o comentarios, estinformación se introduce por lo regular en un texto de entrada.

Un texto seleccionado puede convertirse en caracteres separados utilizando el Menú ModificarSeparar (Modify/Break Apart) o la combinación de teclas . Si se aplica por segunda veeste mismo comando, los caracteres separados se convierten en gráficos vectoriales independientesque ya no pueden ser editados con la herramienta de texto.


40/97

Con el objetivo de que te familiarices con las herramientas de dibujo de Flash , debes crear, lo mejorposible, los siguientes diseños. Incluye junto a cada uno un texto con su nombre.

1. Un teléfono móvil.

2. Un automóvil.

3. Una tortuga.

4. La silueta de una persona.

Trabajo con la línea de tiempo (TimeLine)

La línea de tiempo se utiliza para organizar las imágenes, gráficos, sonidos e instrucciones dprogramación de una película. Imagina que una película Flash es como una película de cine o una obrde teatro: diferentes actores, objetos, gráficos y secuencias sonoras pueden entrar o salir del escenariode acuerdo a las instrucciones que determine el director para cada momento.

De forma similar, Flash organiza los gráficos, sonidos e instrucciones a lo largo de la línea de tiemp

en cuadros o fotogramas consecutivos también llamados frames. De forma predeterminada, Flasreproduce 12 cuadros (frames) cada segundo (frames per second o fps), pero es posible definir unvelocidad diferente, desde 0.01 hasta 120 fps.

Por otra parte, en una película de cine no todos los actores y objetos están en el mismo plano: haelementos de fondo mientras el resto se distribuyen unos delante o detrás de otros. En Flash estdistribución se logra con capas o layers. Cada layer es independiente, así que pueden modificarse loobjetos de un layer sin que afecten a los objetos de otros layers. Cada layer dispone de su propisecuencia de frames, aunque durante la reproducción todos corren en sincronía.

Cuando abres un nuevo documento de Flash, este tiene sólo un frame, en un solo layer. A partir de ahí, e

posible insertar tantos frames como sean necesarios y organizar el contenido en tantos Layers como quierasPara insertar un nuevo layer usa el Menú Insertar/Línea de Tiempo/Capa (Insert/TimeLine/Layer) o bien con el botón Insertar capa (Insert Layer) de la Línea de tiempo. Para eliminar un layeselecciónalo en la Línea de tiempo y da clic en el botón Eliminar (Delete Layer).

Actividad 06 Creando formas


41/97


32

Cuando insertas nuevos frames, pueden ser de alguno de los siguientes tipos:

Keyframe (Fotograma clave): Marca un contenido nuevo en la película. Se identifican por tener dentro u

punto negro. Para insertar un Keyframe en el lugar seleccionado de un layer, usa el Menú Insertar/Línede tiempo/Fotoframa clave ( Insert/TimeLine/Keyframe ). Para eliminar un Keyframe seleccionado, usel Menú Edición/Línea de tiempo/Quitar Fotoframa ( Edit/TimeLine/Clear Keyframe ).

Frame (Fotograma normal): Son los frames que siguen a un Keyframe. No representan contenidnuevo, ya que contienen exactamente lo mismo que el Keyframe que les precede. Se utilizan paraalargar la duración de un contenido que permanece sin cambios durante cierto tiempo en la películaPara insertar un frame en el lugar seleccionado de un layer, ve al Menú Insertar/Línea de tiempo/Fotograma ( Insert/TimeLine/Frame ). Para eliminar un frame utiliza Menú Edición/Línea de tiempo/Borrar Fotoframa ( Edit/TimeLine/Clear Keyframe ).

Blank Keyframe (Fotograma clave vacío): Son Keyframes sin contenido. Se identifican por teneun punto blanco. Para insertar un Keyframe vació ve al Menú Insertar/Línea de tiempo/Fotogramclave vacío ( Insert/TimeLine/Blank Keyframe ). Para eliminar un Keyframe seleccionado, usa el MenEdición/Línea de tiempo/Borrar Fotogramas ( Edit/TimeLine/Clear Keyframe ).

Abre el archivo Actividad08 de tu carpeta de actividades. Este documento es la animación de un acróbatorganizada en diferentes Layers y frames. Analiza el documento y llena la siguiente tabla siguiendo emismo orden que tiene en la línea de tiempo:

Fotograma clave

Fotograma clave vacío

Fotograma

Los Keyframes en Flash pueden identificarse no sólo por número, sino también pornombre. Para asignar un nombre a un Keyframe, selecciónalo en la línea de tiempo yescribe una etiqueta en el cuadro Etiqueta (Frame label) que se encuentra en el panelde propiedades. Un Keyframe con un nombre asignado se identifica con una pequeñabandera roja en la línea de tiempo.

Tip


42/97

Observa detenidamente el Video 05 Línea de tiempo y coloca los nombres de cada parte en la imagensiguiente.

Actividad 07 Reconociendo la línea de tiempo

Video 05 Línea de tiempo

Capas

Cabeza lectora

Candado

Fotogramas

Nueva carpeta


43/97


34

Actividad 08 Animando con la línea de tiempo

Layer Nombre del Layer Descripciónde contenido

Keyframesen los cuadros

1234

2. En la Línea de tiempo, utiliza los botones para ocultar todos los layers (primer punto a la derech

del nombre de cada layer), excepto el que contiene el fondo.

3. Utiliza las herramientas para colorear los elementos del fondo. Cuando termines con el fondobloquea este layer para que no pueda ser modificado (segundo punto a la derecha del nombre delayer).

4. Muestra el layer siguiente y utiliza las herramientas para darle color. Bloquea el layer cuando termine

5. Colorea así todos los layers. Observa que si en un layer hay más de un Keyframe, es necesarcolorear cada uno, pues un Keyframe representa contenido nuevo.

6. Prueba la película coloreada usando y guarda tu trabajo con el nombre Acrobata0en la carpeta que indique tu profesor.

1. ¿Por qué algunos layers tienen un solo Keyframe, mientras que otros tienen varios?

Porque las capas o layers son independientes, pueden modificarse sin que afecten

los objetos de otros layers. Cada layer dispone de su propia secuencia de frames,

aunque durante la reproducción todos corren en sincronía.


44/97

Sonido (Sound)

Para hacer más atractiva una película o una animación, Flash permite incorporar sonidos, que se importaen formatos comunes como Wav, Aiff y MP3, entre otros, usando el Menú Archivo/ Importar/Importaa Biblioteca ( File/Import/Import to library ). Una vez importado, un sonido queda como un elementen la biblioteca de símbolos y puede usarse colocándolo en un frame o accediendo a él por medio dprogramación.

Video 06 Biblioteca de símbolos

El sonido en un frame puede ejecutarse básicamente en dos modos de sincronía (Sync):

Evento (Event). El sonido se reproduce completo (de inicio a fin) en cuanto la reproducción de la películllega al frame en el que se encuentra el sonido. Una vez iniciado, un evento de sonido continúa hastterminar, independientemente de si la reproducción de la película sigue, se detiene o salta a un luga

diferente, a menos que sea silenciado mediante programación.

Flujo (Stream). Sincroniza el sonido con la Línea de Tiempo. Si la reproducción de la película se detiene esonido también se detiene, y si la reproducción salta a un lugar diferente, la secuencia del sonido también

Cuando una película Flash se publica en Internet, un sonido del tipo Event (Evento) debe descargacompletamente antes de que pueda ser reproducido. Un sonido de tipo Stream (Flujo) puede comenzaa reproducirse conforme va descargando, de modo que es más conveniente para uso en Web.


45/97


36

A un sonido se le pueden incluir los siguientes efectos, directamente en el panel de propiedades:

1. Ninguno (None): el sonido no tiene ningún efecto y se reproduce tal como se importó.

2. Canal Izquierdo (Left Channel): el sonido se reproduce solamente por el altavoz izquierdo.

3. Canal Derecho (Right Channel): el sonido se reproduce solamente por el altavoz derecho.

4. Reducción progresiva a la Derecha (Fade left to right): el sonido comienza a escucharse por altavoz izquierdo y pasa a escucharse por el derecho.

5. Reducción progresiva a la Izquierda (Fade right to left): el sonido comienza a escucharse por altavoz derecho y pasa a escucharse por el izquierdo.

6. Aumento progresivo (Fade in): el sonido comienza a reproducirse con el volumen en 0 y comienza aumentar hasta llegar al nivel original con el que se importó.

7. Desvanecimiento (Fade out): el sonido comienza a reproducirse tal como se importó y comienza disminuir el volumen hasta llegar al nivel 0.

8. Personalizado (Custom): puede modificarse la forma en que se escuchará en los altavoces.

Panel de sonido mostrando los dos modos de sincronía.

Video 07 Trabajando con sonido


46/97

Actividad 09 Haciendo pruebas con sonido1. Abre el documento de Flash Actividad09 que se encuentra en tu carpeta de actividades. Est

archivo tiene dos capas etiquetadas como Layer 1 y Layer 2. Ambas capas tienen una longitud d50 cuadros.

2. Selecciona el Menú Archivo/Importar/Importar a biblioteca (File/Import/Import to librarye importa los dos archivos de sonido que se encuentran en la misma carpeta. Los sonidos se guadan automáticamente en la biblioteca cuando los importas. Compruébalo.

3. En la línea de tiempo, selecciona el primer Keyframe del Layer 1.

4. Después, en el panel de propiedades, abre el menú colgante Sonido (Sound), que contiene todolos archivos de sonido de la biblioteca. Selecciona el primer sonido (sound01). Con esto, el sonidquedará asignado al Keyframe.

5. Cambia el modo de sincronía de este sonido (Sync) a Flujo (Stream). Observa que la forma donda del sonido se puede ver en la línea de tiempo.

6. Arrastra el puntero del ratón sobre la línea de tiempo. Debes hacer clic y arrastrar sobre la escaque muestra los números de cuadros, en la parte superior de la línea de tiempo. Mientras arrastrahacia atrás o hacia delante escucharás en sincronía el sonido asignado.

7. Prueba la película presionando Menú Control/Probar película (Control/Test Movie) o la combinación de teclas .

Contesta:

a. ¿Con qué características se reproduce el sonido?

b. ¿Se escucha completo? ¿Por qué?

Sincroniza el sonido con la línea de tiempo. Si la reproducción de la pelícu se detiene el sonido también se detiene.


47/97


38

1. Para crear un gráfico vectorial en Flash, se dibuja sobre:

a. la línea de tiempo.b. la biblioteca de símbolos.c. el escenario.d. el panel de propiedades.

Actividad 10 Conceptos clave

8. Selecciona el Keyframe 40 del Layer 2.

9. Mediante el panel de propiedades, asigna a este frame el segundo sonido importado (sound02) coel modo de sincronía Evento (Event).

Contesta las siguientes preguntas:

a. ¿Es posible escuchar el segundo sonido arrastrando el puntero del ratón sobre los cuadrode la línea de tiempo?

b. Cuando ejecutas la película, ¿qué pasa si el evento de sonido es más largo que el rangde frames donde está asignado?

10. Modifica los efectos de sonido para que el primer sonido sólo se escuche por el altavoz izquierdo, y el segundo sonido sólo se escuche por el altavoz derecho.

11. Guarda el archivo con el nombre sonido09 en la carpeta que indique tu profesor.

No

Un evento de sonido continúa hasta terminar, independientemente de si la

reproducción de la película sigue, se detiene o salta a un lugar diferente.


48/97

2. Para crear la secuencia de una película, los objetos se animan a lo largo de:

a. La línea de tiempo.

b. La biblioteca de símbolos.c. El escenario.d. El panel de propiedades.

3. Los parámetros de los objetos se modifican en:

a. La línea de tiempo.b. La biblioteca de símbolos.c. El escenario.d. El panel de propiedades.

4. Para extender el contenido de un cuadro, sin cambios, debes insertar un:

a. Frame.b. Keyframe.c. Blank Keyframe.d. Symbol.


49/97


40

Símbolos, sus propiedades y sus líneas de tiempo

Un símbolo es un objeto que se guarda en la biblioteca con el principal objetivo de usarlo más de unavez durante la película, o asignarle código de programación. La ventaja de utilizar símbolos es que sepueden reutilizar cuantas veces se desee, sin aumentar el peso final del archivo.

También se utilizan símbolos para crear animación, ya que todo símbolo cuenta con su propia línea detiempo, independiente de la línea de tiempo principal de la película, con sus propios layers y framesAsí, cada símbolo es como una película de Flash completa, que está dentro de la película principal. Unsímbolo puede incluso contener mas símbolos, cada uno con su propia línea de tiempo.

Un símbolo se puede crear de varias maneras:

a. Se puede crear un símbolo vacío para después crear su contenido. Utiliza el Menú Insertar/Nuevo símbolo (Insert/New Symbol ) o la combinación de teclas .

b. Se puede crear un símbolo a partir de cualquier objeto que se seleccione en el escenarioSelecciona primero los elementos que se convertirán a símbolo y utiliza el MenModificar/Convertir a Símbolo (Modifiy/Convert to Symbol ) o la tecla .

c. Se puede importar un archivo con el Menú Archivo/Importar/Importar a biblioteca (File/Import/Import to Library ).

Tipos de símbolosAl crear un símbolo por cualquier método, debes elegir el tipo de símbolo que deseas crear. Los tres tipoposibles son:

Movie clip. Se utiliza principalmente cuando el símbolo va a contener animaciónCuenta con una línea de tiempo en la que podemos agregar los layers y los frameque necesitemos. El comportamiento de un Movie Clip puede ser programado cocódigo escrito en el lenguaje Action script.

Button (Botón). Es un símbolo que reacciona al puntero del ratón como lo haría ubotón estándar de Windows. Se utiliza para agregar interactividad en una películFlash . El comportamiento de un botón se programa con Action script.

Un símbolo de tipo botón, cuenta con una línea de tiempo especial de cuatrframes, en los que se definen los cuatro estados posibles de un botón: Up, OveDown y Hit.


50/97

• Reposo (Up). Este frame contiene la imagen, sonido y acciones del botón en su estadnormal o apagado.

• Sobre (Over). Contiene la imagen, sonido y acciones del botón, que se despliegan cuando epuntero del ratón está sobre él.

• Presionado (Down). Contiene la imagen, sonido y acciones del botón, que se despliegacuando se hace clic sobre él.

• Zona sensible (Hit). Contiene una imagen que delimita el área sensible del botón.

Cualquiera de los cuatro frames puede o no tener contenido y por lo general sólose utilizan los frames Up y Over. La línea de tiempo de un botón también puedetener tantos layers como se necesite.

Gráfico (Graphic). Es un símbolo estático que comúnmente solo requiere un layer y un frame. Nopuede ser programado con Action script.

Instancias y sus propiedades

Para utilizar un símbolo en algún frame de la película, simplemente selecciona el frame en cuestióy arrastra el símbolo desde la biblioteca hasta el escenario. Esto crea una “instancia” del símboloque es una imagen clon del símbolo original. Puedes crear todas las instancias que quieras de unmismo símbolo, modificar cada instancia cambiando sus dimensiones o propiedades, o aplicar diferentecomportamiento a cada una mediante programación.

Cuando modificas cualquier instancia, el símbolo original no se ve afectado. En el caso opuesto, simodificas el símbolo original, todas sus instancias son afectadas.


51/97


42

Video 08 Tipos de símbolo y sus líneas de tiempo

Video 09 Cómo crear un botón

Video 10 Cómo crear un MovieClip

Actividad 11 Tipos de símbolos

Flash identifica los diferentes tipos de simbolo con un icono. Obseva las imágenes y escribe el nombrede símbolo que corrresponde.

Clip de película

Gráfico

Botón


52/97

Una vez en el escenario, se pueden establecer los parámetros de una instancia usando el panel de

propiedades y de transformar.

• Nombre del símbolo (Instance Name). Se utiliza para identificar la instancia de un símbolo. Emuy recomendable asignar un nombre en cuanto se crea una instancia, ya que es necesaripara la programación.

• X. indica o asigna la posición horizontal en el escenario.• Y. indica o asigna la posición vertical en el escenario.• Ancho (Width). Muestra o determina el ancho de la instancia.• Alto (Heigh). Muestra o determina el alto de la instancia.

• Rotación (Rotate). Indica o asigna un ángulo de giro.• Sesgo (Skew). Indica o determina la deformación oblicua de la instancia.• Color: Permite asignar un aspecto especial como:

a. Brillo (Brightness). Ajusta el color a más blanco o negro.b. Tinta (Tint). Pintar una instancia con un tono de la paleta de colores.c. Avanzadas (Advanced). Ajusta con detalle los colores (tinte) y transparencia (alpha).d. Alfa (Alpha). Aplica un porcentaje de transparencia a una instancia.

1. Abre el documento de Flash Actividad11 que se encuentra en tu carpeta de actividades.

2. Si no está visible, muestra la biblioteca de símbolos con Menú Ventana/Biblioteca (Window/Library ) o las teclas . Observa que la biblioteca tiene dos símbolos llamados bici y rueda

3. Crea un segundo layer y selecciona en la línea de tiempo el frame 1 del Layer 2.

4. Arrastra el símbolo bici de la biblioteca al escenario para crear una instancia.

5. Crea dos instancias del símbolo rueda en el escenario, acomodando cada una en el lugar apropiadpara formar la bicicleta.


53/97


44

Nombre asignadoa la instancia.

Opciones de aparienci

Flash te permite hacer modificaciones a un símbolo o instancia al cambiar, por ejemplo, sus dimensio-nes, tamaño, color o aplicar filtros.

Nombre delsímbolo original.

Video 11 Instancias y sus propiedades

1. De forma similar a la actividad anterior y basándote en el mismo archivo, crea instancias para arma

4 bicicletas más distribuidas en el escenario.

2. Utiliza el panel de propiedades, o bien la herramienta Menú Transformación/TransformacióLibre (Transform/Free Transform) , para modificar el tamaño de las bicicletas, de manera quparezca que unas están más cerca y otras más lejos en la escena.

Actividad 12 Creando instancias


54/97

3. Seleccionando directamente en el escenario cada una de las instancias, utiliza el panel de propiedades para aplicar un color diferente a cada bicicleta usando la opción Tinta (Tint). Observa e

símbolo original en la biblioteca. ¿Qué le ocurrió?, ¿por qué?

4. Por último, haz esta prueba: En la biblioteca de símbolos da doble clic al símbolo bici. Se abrirá línea de tiempo del símbolo y el gráfico original. Haz una pequeña modificación, como agregar unalíneas decorativas o un texto sobre alguno de los tubos de la bicicleta.

5. Regresa a la línea de tiempo principal haciendo clic sobre el botón Scene 1. Describe lo que hocurrido y por qué ocurrió:

6. Guarda el archivo con el nombre bici12 en la carpeta que indique tu profesor.

Actividad 13 Creando botones para una tarjeta interactiva

1. Abre en Flash la película Actividad13, que se encuentra en tu carpeta de actividades.

2. Para poder realizar la actividad, antes de continuar, guarda el archivo en la carpeta que indique t

profesor, con el nombre tarjeta13.

3. Abre la biblioteca y revisa su contenido. Consérvala abierta.

4. En el escenario hay 4 personajes en dos posiciones, que en esta actividad llamaremos normal feliz , respectivamente. Obsérvalos.

No le ocurrió nada porque cuando modificas cualquier instancia, el símbolo original no

se ve afectado.

El símbolo se modificó porque si modificas el símbolo original, todas sus instancias

son afectadas.


55/97


46

Selecciona cada uno de los personajes yconviértelos en símbolos gráficos.

7. Con el Menú Insert/New Symbol , crea un nuevo símbolo del tipo Button y dale el nombre person1. Verás la línea de tiempo del botón, que por ahora está vacía.

8. De la biblioteca de símbolos, arrastra al área de trabajo el primer personaje, en su posición normaUbícalo en medio, auxiliándote de la pequeña cruz que aparece al centro. Dale color al personajeObserva que el personaje ha quedado en el frame Up de la línea de tiempo del botón.

9. Selecciona el frame Over de la línea de tiempo del botón, e inserta un keyframe en blanco con eMenú Insert/Timeline/Blank Keyframe.

10. Arrastra al escenario el símbolo del primer personaje, en su posición feliz. Ubícalo en el área dtrabajo, auxiliándote de la pequeña cruz que aparece al centro. Dale color al personaje.

5. Para poder trabajar mejor con los personajes, es conveniente convertirlos en símbolos. Seleccion

cada uno de forma independiente y conviértelo en un símbolo gráfico . Al final debes tener nuevos símbolos gráficos en la biblioteca.

6. Una vez que los personajes están como símbolos, bórralos del escenario para que quede vacío.


56/97

Arrastra los símbolos en las diferentes casillas de la linea de tiempo del botón.

11. Haz clics alternadamente en el frame Up y en el frame Over, para que preveas el comportamiento del botón, y ajustes la posición de los personajes si es necesario.

12. Regresa a la línea de tiempo principal, presionando el botón Scene 1 en la parte superior de llínea de tiempo.

13. Ahora repite los pasos 7 a 12 para crear un nuevo botón para cada uno de los personajes restantes, utilizando su posición normal para el frame Up y su posición feliz para el frame Over. Dacolor a todos los personajes.

14. Cuando termines de crear los 4 nuevos botones, arma una tarjeta de felicitación con las siguietes características:

a. Crea un fondo en un layer independiente.b. En otro layer arrastra de la biblioteca algunos símbolos para mejorar la escena.c. En un terecer layer encima de los anteriores, arrastra a la escena los botones que ha

creado. No utilices los símbolos originales de los personajes, sino los botones que lo

contienen, para que tengan interactividad.d. Agrega en un layer diferente un texto apropiado.

15. Prueba la película con el Menú Control/Test Movie . Pasa el puntero del ratón sobre los botonepara ver cómo se comportan.


57/97


48

16. De regreso a la película principal, realiza las siguientes mejoras:

a. En la línea de tiempo de cada botón, duplica el personaje feliz del frame Over al fram

Down, pero además agrega en el frame Down un texto. Recuerda que al correr la películael contenido del frame Down se verá cuando se haga clic sobre el botón.b. Aplica al frame Over y/o Down de cada botón un sonido del tipo Event.

17. Prueba la película y guarda los cambios.

Máscara (Mask)Las máscaras tradicionales que se usan en fiestas o carnavales son objetos que cubren parcialmente lcara de quien las usa. Se puede ver a través de los agujeros que tiene, mientras el resto queda ocultopor la máscara misma.

En Flash se puede crear una capa máscara, que oculta lo que está en el layer que se encuentra debajode ella. Los “agujeros” a través de los cuales se puede ver, se dibujan en la capa máscara o se crea

colocando símbolos vectoriales en ella.

Layer con círculo (máscara) y Layer con fotografía (enmascarado).


58/97

Video 12 Máscaras

Para convertir cualquier capa seleccionada en máscara, da clic en el ícono a la izquierda del nombre dla capa y selecciona del menú contextual la opción Mask (Máscara) o da un clic con el botón secundaridel ratón sobre el nombre del Layer 2 y selecciona la opción Mask del menú contextual.

Para convertir cualquier capa en enmascarado, da clic en el mismo ícono y selecciona la opcióMasked (Con Máscara). Los layers que arrastres a niveles inferiores al designado como máscara, seráenmascarados de manera automática.

Actividad 14 Creando una máscara

1. Abre un documento nuevo de Flash y selecciona el frame 1 del Layer 1.

2. Importa una fotografía directamente al escenario usando Menú File/Import/Import to Stage

Puedes importar alguna de las fotografías de la carpeta de la actividad 14 de tu carpeta de trabajo

3. Inserta un nuevo layer (Layer 2) asegurándote que queda encima del existente.

4. Dibuja en el Layer 2 una figura simple, como un círculo o una estrella, usando las herramientas. color no es importante.

5. Haz un clic con el botón secundario del ratón sobre el nombre del Layer 2, y selecciona la opcióMask del menú contextual. Después, selecciona el layer 1 y activa la opción Masked del mencontextual.

6. Describe lo que ocurre:


59/97


50

Principios de Animación

En Flash se pueden utilizar tres técnicas de animación a lo largo de la línea de tiempo de cualquier layer:

Animación cuadro por cuadro (frame by frame)

En esta técnica de animación se utiliza un Keyframe para cada movimiento o cambio, tal y como fuanimado el acróbata que salta de la actividad 08. La técnica también se conoce como animación tradicionaya que cuadro por cuadro era la única forma en que podían hacerse los dibujos animados antes de lacomputadoras. Este tipo de animación funciona muy bien a una velocidad de 12 frames por segundo.

Un gráfico vectorial o un Movie clip puede enmascarar cualquier objeto en el escenario,pero una imagen no puede funcionar como máscara, sólo puede ser enmascarada.

Tip

a. Con la imagen en el Layer 1:

b. Con la imagen en el Layer 2:

c. Con las opciones de bloqueo de layers:

Si quieres modificar la figura en la máscara, basta desbloquear el layer correspondiente. Una vezterminadas las modificaciones, vuelve a bloquear el layer para ver la máscara en acción.

7. Prueba la película y guarda el archivo con el nombre máscara 14 en la carpeta de costumbre.


60/97

1. En un nuevo documento de Flash utiliza las herramientas de dibujo para crear una animación cuadrpor cuadro de un deportista en acción, con las siguientes características:

a. La película debe ejecutarse a 10 fps.

b. Debes utilizar al menos 30 Keyframes, para lograr una animación de 3 segundos.c. Debe mostrar al menos un personaje, pero puede incluir otros elementos.

2. Conforme vas avanzando, puedes ir probando la ejecución presionando la tecla .

3. Guarda tu trabajo con el nombre frame 15 en la carpeta que indique tu profesor.

Actividad 15 Animando cuadro por cuadro

Para crear animación frame to frame, coloca la imagen original en un Keyframe. Inserta delante dél un segundo Keyframe y haz alguna modificación a la imagen. Inserta otro Keyframe y continúa lmodificación. Continúa cuadro por cuadro hasta terminar la animación.

Video 13 Animación cuadro por cuadro

Animación Interpolación ClásicaEsta técnica de animación es la única que puede ser usada en versiones anteriores de Flash . Ussolamente dos Keyframes: uno para la posición inicial y otro para lo posición final. Este tipo de animaciótiene algunas particularidades:

a. Para que este tipo de animación funcione, debes usar instancias del mismo símbolo en frame inicial y en el final.

b. Para crear una interpolación clásica, inserta un Keyframe, que llamaremos Keyframinicial. Toma de la biblioteca una instancia del símbolo a animar y colócala en este primeKeyframe.


61/97


52

Fotogramas con pantalla azul en la línea de tiempo los cuáles marcan una Interpolación Clásica.

c. Después, en la línea de tiempo y en el mismo layer, rellena las celdas con fotogramaregulares (tantos como quieras que dure la animación). Al final de tu secuencia dfotogramas, inserta un último keyframe que llamaremos Keyframe final.

Animación Interpolación de movimientoSe utiliza principalmente para mover símbolos. En este tipo de interpolación Flash CS4 crea animacionede un segundo a partir de un primer keyframe. Los frames subsecuentes al keyframe inicial aparecen dforma automática. El número de cuadros que usará en este segundo de animación dependera del valoque hallamos determinado al configurar el documento (fps).

Para crear una Interpolación de Movimiento o Motion Tween debe existir una instancia de un símbolsobre el escenario. Esta instancia está en un Keyframe, que llamaremos Keyframe inicial.

a. Para aplicar el Motion Tween selecciona el Keyframe inicial y aplica la opción MenInsertar/Interpolación de movimiento . Automáticamente apareceran frames quabarquen un segundo de animación. Puedes modificar esta duración arrastrando el últimframe hacia delante o hacia atrás en la línea de tiempo.

d. Modifica la instancia de este último cuadro, cambiando su posición, tamaño y/o color.

e. Para aplicar la interpolación clásica, selecciona el Keyframe inicial y aplica la opcióMenú Insertar/Interpolación clásica.

f. Los fotogramas intermedios se volverán azules y aparecerá una flecha continua negra dfotograma inicial al fotograma final.

g. Otra característica es que el editor de movimiento no funciona con interpolaciónes clásica

por lo que, al animar un objeto para que se traslade de un punto a otro en el escenarioéste lo hará en línea recta. Si necesitas que tu objeto siga una trayectoria en particulatendrás que crear una guía de movimiento (motion guide).


62/97

Fotogramas con una Interpolación de movimiento donde aparece el Property Keyframe como un rombo negro .

b. En cualquier punto intermedio haz alguna modificación a tu instancia.

c. Aparecerá un pequeño rombo negro en el frame seleccionado. A este frame lo llamaremoProperty keyframe (fotograma clave de propiedad).

d. Si modificas la posición de un objeto, Flash CS4 “conecta” la posición original y la final couna línea de color punteada a la que llamaremos motion path (ruta de movimiento).

e. De manera predeterminada el motion path se genera como una línea recta, si quieres quel movimiento de tu objeto sea diferente, por ejemplo, siguiendo una línea curva, con lherramienta de selección (Arrow) modifica el Motion path según tus necesidades.

Video 14 Animación con Interpolación


63/97


54

Actividad 16 Animando con Motion Tween

1. En un nuevo documento de Flash, cambia la velocidad de reproducción (frame rate) a 30 fps. Lpuedes hacer en el panel de propiedades o bien con el Menú Modify/Document.

2. Dibuja sobre el escenario un rectángulo de 120 px de ancho por 20 px de largo. Para que ladimensiones sean exactas puedes modificar las propiedades W y H del rectángulo seleccionadusando el panel de propiedades.

3. Selecciona la figura y conviértela en un símbolo del tipo Movie Clip. La animación Motion Tweeno funciona en objetos que no son símbolos. Una vez convertido, tendrás el símbolo en la bibliotecy una instancia en el escenario.

4. Centra horizontalmente el rectángulo en el escenario, y pégalo al borde superior.

5. Selecciona el frame 1 y asígnale un Motion Tween. Lo puedes hacer en Menú Insertar/Interpolación dMovimiento. Deben aparecer frames hasta la casilla 30 marcados con color azul.

6. Selecciona el frame 30 y muévelo al borde inferior del escenario. Aparecerá un pequeño rombonegro en esta casilla de la línea de tiempo.

7. Ahora selecciona la casilla 60 y inserta un nuevo keyframe. En esta casilla mueve de nuevo tobjeto a la esquina superior derecha entintando esta instancia con otro color; utiliza el panel dpropiedades.

8. Con la herramienta selección (Arrow) transforma el último recorrido del motion path para haceruna curva.

9. Prueba la película. También puedes arrastrar el puntero del ratón sobre la escala de la línea dtiempo, para ver cada paso de la animación.

10. Selecciona el Keyframe 1 y prueba las opciones Aceleracion (Ease) y Rotación (Rotate) del pan

de propiedades.


64/97

11. Contesta:

a. ¿Qué efecto tiene agregar un valor Ease positivo?

b. ¿Qué efecto tiene agregar un valor Ease negativo?

c. ¿Para qué sirve la opción Rotate CW?

d. ¿Para qué sirve la opción Rotate CCW?

e. ¿Qué función tiene el parámetro times?

13. Guarda el archivo con el nombre motion 15 en la carpeta de costumbre.

Interpolación de forma (ShapeTween)

Esta técnica de animación usa también sólo dos Keyframes: uno inicial y otro final. Todos los pasointermedios son calculados automáticamente por Flash durante la ejecución de la película. La únicdiferencia es que el Shape Tween funciona sólo con gráficos que no son símbolos. Se utiliza principalmentpara deformar vectores.

a. Para crear un Shape Tween debe existir un gráfico sobre el escenario, que no sea usímbolo, que no sea un grupo ni un objeto compuesto. Este gráfico está en u

Animación Con Flash Cs4 y CS5

Documents

Transcript of Animación Con Flash Cs4 y CS5