COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA – GRADO NOVENO PLANEACION PERIÓDICA – SEGUNDO BIMESTRE Logro Diseña una composición animada involucrando varias escenas, aplicando efectos básicos de movimiento, transiciones, el uso de librerías y sonidos. Indicadores de logro: Diferencia los procedimientos para aplicar diferentes animaciones a los objetos, en diferentes escenas, haciendo uso adecuado de cada layer Reconoce las propiedades de las imágenes y los procedimientos para importarlas en la librería Planifica el diseño de una animación en Flash, de manera coherente y creativa. Edita y diseña los elementos de una animación aplicándoles procedimientos básicos de animación, transición y sondo. Tiene una actitud de escucha y participación que aporta al buen desarrollo de la clase Contenidos: ANIMACIONES CON EFECTOS 1. Efecto Máscara 2. Gifs animados 3. Uso de Librerías

Evaluación Bimestral: Presentación Final de la película terminada.

Cibergrafía http://www.aulaclic.es/flash-cs5/index.htm Manual Básico de Flash Cs5 http://flash.astalaweb.net/ Cursos básicos, ejemplos flash

OBJETIVO DE ESTA GUIA DE APOYO: Brindar al estudiante pautas para aplicar los temas vistos durante el primer y segundo bimestres, para crear una animación propia en flash. Aquí se encontrarán algunas explicaciones y sugerencias, teniendo en cuenta que nos son definitivos ni únicos.

CREACIÓN DE ANIMACIONES CON EFECTOS Las animaciones con efectos pueden resultar muy llamativas y permiten lograr los objetivos que dirigimos a un público. El diseño de una película se basa en la composición, en las formas, las imágenes y los colores. Hay que saber elegir estos elementos cuidadosamente. Aunque no hay reglas absolutas, tener en cuenta algunas directrices puede ayudarnos a encontrar un diseño armónico. Los efectos se logran partiendo de la creatividad del diseñador y la habilidad para ampliar las animaciones; sin embargo se pueden utilizar algunas ayudas avanzadas. Veamos estos ejemplos:

1. Efecto Máscara Es un efecto sencillo donde una imagen ubicada en una capa determinada se esconde y es presentada a través de otra capa que tiene una forma específica y que se hace transparente. 1. Se crea un PRIMER layer con la imagen que queremos que se vea. Se deja estática el número de frames que se quiera. (Imagen Oculta). 2. Sobre este layer se crea una LAYER NUEVA. Allí se ubica la figura por ejemplo un círculo, (Objeto máscara) “No importa su apariencia.” 3. A esta layer (Objeto máscara) se le aplica movimiento Clásico (Create Classic Tween) y se van insertando diferentes keyframes, ubicando el objeto en diferentes partes del escenario, con diferentes tamaños, (sobre las partes que se quieren visualizar de la imagen que se encuentra oculta) 4. Por último sobre ésta layer que acabas de darle movimiento, se hace clic derecho con el mouse y se elige la opción Mask 5. Automáticamente los íconos de ambos layers cambian quedando el segundo representado con un círculo (Objeto máscara) y el de la imagen o las imágenes con un recuadro. El creador de la película puede decidir en qué momento aplicarlos. Aquí sólo haremos unas recomendaciones en su utilización  Cuando se utilice una máscara es conveniente, que esta se realice detrás de una imagen que descubre otra, para que al presentarse, el fondo no aparezca en blanco  También se pueden agregar varios objetos bajo una misma máscara, esto se hace arrastrando la capa hacia la máscara:  Puedes ubicar varias imágenes, inclusive con movimiento y luego aplicarles máscara, como se ve en la siguiente línea de tiempo.

ACTIVIDAD PROPUESTA Elabora una película donde aparezca un imagen y con la máscara se visualice el interior. Por ejemplo Un auto y la máscara muestre el motor.

2. Gifs animados e Imágenes Podemos construir películas utilizando imágenes existentes y gifs animados que le darán más vida y un ambiente más natural a la composición. Los gifs animados al igual que las imágenes se deben importar a la librería de la película y posteriormente llevarlas al escenario para aplicarles el movimiento que queremos: Las imágenes y gifs animados deben estar en una carpeta específica (no se debe copiar y pegar de Internet), luego realizamos el siguiente procedimiento: File-> Import to Library, se busca la carpeta, seleccionar los archivos queremos importar y pulsar Abrir. La extensión de las imágenes debe ser Gif o JPG, no es conveniente png. Para activar la librería Utilizamos la opción F11 del Teclado o seguimos la ruta Window/Library y al abrirse la ventana se escoge la imagen y se arrastra sobre el escenario.

JO: Si es un gif animado se debe insertar en la película tiene la extensión .gif y el el objeto que ícono…

Para la imágenes es importante recordar que al realizar animaciones se utilizan principalmente los Clip de Película o MovieClips. Estos se pueden crear o importar. Para crearlos se utiliza la tecla F8 (Convert to Symbol) y se elige “MovieClip” Para que las imágenes hagan parte de una buena animación es fundamental que tengan fondos transparentes. Este proceso se realiza en un editor gráfico (Para nuestro caso se utiliza Fireworks, y deben haber sido guardadas con la extensión Gif o Animate Gif y tener en cuenta la opción Alpha Transparency o Index Transparency.

ACTIVIDAD PROPUESTA Descarga tres gifs animados o imágenes que requieren transparencia deben estar editadas y con la extensión .gif. Guárdalas en una carpeta del Bimestre, llamada: Imágenes

3. Uso de Librerías En flash encontramos dos tipos de Librerías: Las Comunes (Common Libraries) y la que se va conformando en la medida que agregamos objetos y símbolos a nuestra película. Como explicamos antes, al insertar imágenes ésta se habilita con la opción F11 del Teclado o seguimos la ruta Window/Library. - Window/Common Libraries Podemos insertar las imágenes de otra película de flash de la siguiente forma: File-> Import/Open External Library, seleccionar el Archivo Flash (.fla) del que queremos importar sus símbolos de biblioteca y pulsar Abrir. Las librerías comunes nos permiten utilizar diseños y formatos predeterminados que ya existen en el programa. Los más utilizados son:

La librería de Botones La Librería de Sonidos Para la composición que realizaremos, podemos utilizar la librería de sonidos. El sonido se debe arrastrar al escenario, sobre una layer específica.

ACTIVIDAD PROPUESTA Ubica 5 objetos y a cada uno asígnale un sonido de la librería..

Evaluación Bimestral: Presentación Final de la película terminada Construir una película en Flash Cs5, que aplique los temas vistos en Primero y Segundo Periodo, que contenga los siguientes Criterios:     

Tres escenas Aplique: Movimientos Básicos: Classic – Shape y Motion Tween Utilice Imágenes (Fondo) – Gifs animados – Efecto máscara – Sonido Debe tener secuencia y coherencia con el tema elegido. No utilizar temas vulgares, violentos ni subliminales.

Ten en cuenta: Para crear una animación sencilla en Flash, es muy importante tener claras las ideas sobre lo que se quiere hacer, por eso se recomienda: a) Pensar en una historia o una idea concreta: En la clase se propone diseñar una

Tarjeta Virtual, una Historieta, una Campaña Publicitaria, un Chiste b) Pensar en los elementos que llevará cada escena: Fondos que se pueden crear o cargar de imágenes existentes, personajes concretos de la película y elementos como gifs animados u objetos, que ambientarán cada escena. c) Crear paso a paso las escenas, teniendo cuidado en la importación de las imágenes y la animación que quieres para cada objeto.

Ayudas para el proyecto. Las Escenas: (Scene) Permiten que la película se pueda dividir en partes, por lo general las usamos cuando cambian los escenarios dentro de la misma. La ventana se activa pulsando las teclas Shift+ F2 de manera simultánea o siguiendo la ruta Window->Scene Estas herramientas permiten: a) Ordenar las escenas para que se ejecuten de la manera como las ubiquemos. b) Para agregar una escena, donde aparece un nuevo escenario con una línea de tiempo limpias. c) La Caneca para borrar las escenas que no vamos a utilizar. En ocasiones necesitamos dos escenas con contenidos similares, por lo cual podemos duplicar las escenas arrastrando la que se elija, sobre el signo +. Cambiar Nombre: Para cambiar el nombre a la escena, basta con hacer doble clic en el nombre actual.

Las Capas (Layeres) Es importante ubicar cada objeto en una capa para poder darle animación de manera independiente, o para insertar objetos en diferentes momentos de la Escena La vista standard de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo usarlos. Insertar Capas : Como su nombre indica, sirve para Insertar capas en la escena actual. Inserta capas normales. Crear Carpeta Permite organizar las capas, cuando se utilizan muchas dentro de una misma película Borrar Capa : Borra la capa seleccionada. Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual. En la parte superior encontramos las siguientes opciones activadas y desactivadas:

Mostrar / Ocultar Capas : Este botón permite ver u ocultar todas las capas de la película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez, para después mostrar sólo la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas" Bloquear Capas : Bloquea la edición de todas las capas, de modo que no podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa concreta, procederemos como en el punto anterior, clic en el punto o icono "Candado" situados en la capa actual bajo el icono "Bloquear Capas". Bloquear una capa es muy útil cuando tenemos varios objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. En muchas ocasiones, cuando la capa no está bloqueada sin darnos cuenta insertamos más de un objeto a la misma, dañando la animación o uniendo varios objetos como si fueran uno solo. Mostrar/Ocultar capas como contornos : Este botón nos muestra/oculta los contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos. Cuando se inserta el objeto se procede a realizar la animación sencilla o con efectos en el Time Line, identificando los puntos donde se encuentran los objetos y los diferentes movimientos.

La Línea de Tiempo Muestra lo que sucede en la película: Qué hay en cada capa, qué tipo de movimiento se aplica, el tiempo que dura un objeto en la película y el momento en que un objeto entra o se retira de la animación. EL MOTION TWEEN Y LA TRAYECTORIA: Este movimiento se aplica a objetos que requieran de una trayectoria determinada dentro de la animación: Por ejemplo un avión, un pájaro, una nube, un insecto, una pelota o una persona que sigue una trayectoria al caminar. Generalmente la trayectoria inicia y termina afuera del escenario para que el objeto que ingresa o sale de la sensación de que venía, o se va. LA INTERPOLACION Es un efecto llamativo y se aplica con frecuencia en los fondos, cuando se utilizan cambios de tiempo, por ejemplo día-noche, también en textos, pero es muy importante que éstos estén estáticos al principio y al final para que el espectador pueda leer o ver el efecto. Además se utilizan para cambiar formas. Cuando se utiliza como fondo sucede lo mismo, se debe dejar un espacio de quietud para visualizar el cambio.

1

2

3

4

5

Transición entre escenas – Efectos

Transición El cambio entre una escena y otra es muy importante en el momento de llevar una secuencia en la película. Las transiciones se logran creando una animación inicial y final, igual para todos y cada uno de los objetos que conforman el principio o final de la escena, es decir, si una escena empieza con el fondo y dos objetos, a todos se les coloca una misma animación: “brightness”, “alpha” o un mismo “tint” para todos. También se logra, animando los objetos desde la parte externa del escenario, realizando entradas y salidas de los objetos. Para que la animación sea más real casi todos los objetos deben estar en movimiento, en particular el fondo.