2. Animaciones Básicas - colegio agustiniano ciudad salitre

COLEGIO AGUSTINIANO CIUDAD SALITRE
AREA DE TECNOLOGÍA E INFORMATICA – GRADO NOVENO
PLANEACION PERIÓDICA – SEGUNDO BIMESTRE
Logro
Identifica la función y utilidad de las herramientas de un editor de animación, para
diseñar películas animadas aplicando efectos básicos.
Indicadores de logro:
 Identifica el entorno de trabajo y las herramientas principales de Flash
 Diferencia los procedimientos para realizar una animación, teniendo en
cuenta las partes de una película en Flash.
 Utiliza las herramientas de flash para diseñar animaciones sencillas, teniendo
en cuenta el uso de las capas.
 Realiza procedimientos ordenados para crear diversos efectos de animación
 Sigue los parámetros establecidos en clase para aprovechar al máximo los
recursos brindados.
 Es recursivo en la creación de una animación básica
Contenidos:
ENTORNO GENERAL DE FLASH CS5
1. Menús y Herramientas Principales
a) Tools – Time Line – Layers – Properties….
b) Manejo de Color
2. Animaciones Básicas – Uso de Capas
a) Create Classic Tween - Cambio de Propiedades
b) Create Shape Tween - Interpolación Formas y Fondos
c) Create Motion Tween - Trayectorias: “Efecto Guide”
EVALUACION BIMESTRAL:
Se programa de acuerdo con el cronograma propuesto por la
coordinación académica, en la hora de clase de Informática.
Cibergrafía
http://www.aulaclic.es/flash-cs5/index.htm Manual Básico de Flash Cs5
OBJETIVO DE ESTA GUIA DE APOYO: Brindar al estudiante un resumen de las
temáticas vistas en clase, para aplicar ejercicios básicos que son útiles en la elaboración
de una película en Flash.
Aquí se encontrarán algunos pasos sencillos, teniendo en cuenta que nos son definitivos
ni únicos.
ENTORNO GENERAL DE FLASH CS5
1. Menus y Herramientas Principales
7
8
5
1
6
2
3
4
a) Tools – Time Line – Layers – Properties….
1. ESCENARY: Es el área de trabajo donde se ubican los fondos, objetos y
ambientes que tendrá la película.
2. LAYERS: En este sitio se agregan las “capas” que tendrá la escena. Recuerda
que por comodidad es mejor utilizar una capa por objeto, para así lograr los
movimientos y efectos de una manera más sencilla.
3. TIME LINE: Llamada también la Línea de Tiempo. En ella determinamos los
“fotogramas clave” o “keyframe”. Aquí podemos determinar en qué momento
aparece un objeto o cambia de posición, o adopta una propiedad; así mismo
determinar algunas propiedades de movimiento.
4. TOOLS: Es el cuadro de herramientas, con las que podemos ubicar, diseñar,
modificar y crear objetos.
5. PROPERTIES: Llamado también cuadro de propiedades. Allí se encuentran
algunas características de los objetos y de la línea de tiempo, permitiendo realizar
modificaciones a las mismas.
6. PANELS: En este sector es posible activar diferentes “cajas” de herramientas que
permiten modificar objetos, crear efectos y manipular la película. Algunos ejemplos
son: COLOR MIXER – SCENE –ALIGN... Todos se pueden activar con el menú
WINDOW.
7. BARRA DE MENUS: Aquí están todas las herramientas del programa, agrupadas
de acuerdo con su función. Por ejemplo con el menú WINDOW se activan las
herramientas principales, la barra de propiedades y los paneles. Con el menú
MODIFY se rotan – alinean y agrupan objetos. Con INSERT se agregan
keyframes, layers y scene...
8. EL ZOOM: Permite visualizar el escenario o acercar los objetos del mismo.
b) Manejo del Color
Para aplicar el color a un objeto, generalmente utilizamos la herramienta de colores
ubicada en la barra Tools..
También se puede aplicar color y apariencias de degradación en
objetos
vectoriales, utilizando el panel del Color Mixer y modificar su
orientación con la herramienta “Fill transform tool” luego de haber utilizado la
(flecha blanca de selección) “subselection tool (A)”
Las imágenes de Bitmap (Pixeladas) pueden ser modificadas, luego de haberse aplicado
un “motion tween” y hayan adoptado la instancia graphic. Allí aparecerá la propiedad
“color” y se podrá hacer
modificaciones de apariencia.
ACTIVIDAD 1
Crear una película sencilla que tenga un escenario de 640 x 480, una velocidad de 35 fps
y contenga 3 objetos distintos que se muevan en diferentes puntos.
Aplica los efectos de tint – alpha – Brightness.
Ten en cuenta que cada objeto va en una capa diferente.
2. Animaciones Básicas – Uso de Capas
Las animaciones básicas en Flash, permiten realizar movimientos que dan vida a fondos y
personajes. En Flash Cs5 encontramos tres opciones para aplicar movimiento de manera
sencilla, sin necesidad de programar.
Para aplicar la animación nos ubicamos en el Time Line y sobre el Fotograma Clave,
(f6) (el cual me indica que ahí hay un objeto), hacemos un clic drecho del mouse y se
habilita el siguiente Menú
Es muy importante recordar que cada objeto debe ir en una capa distinta para poder
aplicarle una acción o efecto de movimiento.
Veamos tres ejemplos básicos para hacerlo.
a) Create Classic Tween - Cambio de Propiedades
Realizamos el siguiente ejemplo:
1. En una capa (layer) ubica un objeto en un Fotograma clave (Key frame) –puede ser
en el primer frame o en el que se elija.2. Haciendo clic con el botón derecho del mouse elige “Create ClassicTtween”
3. En otro fotograma más adelante insertas otro fotograma clave (clic con el botón
derecho del mouse elige “insert keyframe”) Aquí aparece el objeto señalado en un
recuadro, puedes modificar su tamaño y ubicarlo en otro lugar del escenario. La
línea del tiempo te mostrará una flecha continua
4. Para ver el movimiento se utiliza: CTRL.+ALT. También utilizar el menú CONTROL
y elegir “Play” “Test Movie” o “Test Scene” para ver la escena en la que estás
trabajando.
Vemos entonces que el movimiento del objeto es
completamente lineal y podemos cambiar las propiedades,
dando diferentes apariencias en el movimiento. Esto
ocurre en dos formas:
Luego de aplicar el
“Classic
Tween”
tocamos el objeto y
observamos la barra de
propiedades.
Aparece
la
Opción
Color Effect, donde podemos aplicar efectos
de degradación, cambio de color sólido, brillo,
transparencia …
Ahora, si en lugar de tocar el objeto, tocamos el Key Frame, es decir, nos ubicamos en
el TimeLine, la barra de propiedades cambia y aparece Tweening, con la opción
Rotate, el cual me dará la posibilidad de hacer rotar el objeto de un punto a otro, hacia la
manecillas del reloj (cw) o en contra de as manecillas (ccw).
ACTIVIDAD 2
Crear una película sencilla utilizando las herramientas básicas, dibujando un escenario
con 5 objetos que contengan una animación lineal coherente, aplicando diferentes efectos
en las propiedades:
tamaño, apariencia y posición.
b. Create Shape Tween – Interpolación Formas y Fondos
OJO: Este efecto se realiza únicamente con objetos diseñados con las herramientas
de Flash. No aplica para imágenes importadas, jpg o gifs.
Este movimiento se puede utilizar para dar efectos a los fondos, transformar un texto en
otro o una figura en otra. El procedimiento es el mismo en los tres casos.
Veamos un ejemplo:
1. En un fotograma clave (Keyframe) se ubica un objeto.
2. Haciendo clic con el botón derecho del mouse elige “Create Shape Ttween”
3. Más adelante se marca otro fotograma clave. El TimeLine obtiene esta apariencia:
Al tocar el KeyFrame el objeto debe quedar con una apariencia punteada
y al
observar la barra de Propiedades el objeto está identificado como “Shape”.
4. En el segundo KeyFrame, se debe cambiar la forma del objeto ya sea utilizando las
herramientas Transform o borrando la imagen y colocando otra, también de
características “Shape”; con otro color tamaño o forma.
5. Si el objeto no tiene esta propiedad “Shape”, se marca y se convierte en símbolo
gráfico con la opción F8, o con el botón derecho del mouse se elige “Convert to
Symbol” y cuando aparece el recuadro se elige la opción Graphic.
* El objeto seguirá marcado, entonces se debe “deformar” con la opción CTRL. + B ,
o por el menú MODIFY eligiendo la opción Break Apart. Se repite la acción hasta que
el objeto tenga una apariencia punteada y se procede a aplicar la animación “Create
Shape Tween”
6. En la Línea de Tiempo se crea otro Key Frame más adelante y se modifica el objeto
que aún estará marcado. Se puede agregar otros objetos o se cambia de apariencia o
forma. Por el cual el primero será sustituido.
7. Aparecerá en la línea de tiempo el movimiento con fondo verde y la flecha continua.
TEN EN CUENTA:
• En un mismo layer puedes ubicar muchos objetos para que se vayan
transformando uno después de otro.
• Los objetos también pueden ser textos, pero es importante que al
deformarlos tengan la apariencia punteada, pues cada letra es un objeto.
Veamos el ejemplo que aparece en el manual de Flash http://www.aulaclic.es/flashcs5/t_13_2.htm
Los fondos se utilizan para crear ambientes y escenarios estáticos o en movimiento.
Generalmente se diseñan en un layer específico y se ordenan de acuerdo con la película
que se va a crear. Po
1. Se puede dibujar un objeto vectorial (por ejemplo un cuadrado) y utilizando las
herramientas del panel Color Mixer, se le dan efectos de color en degradación,
utilizando los efectos Solid -Linear – Radial o Bitmap.
2. Al utilizar BitMap, es posible importar una imagen que se desea en el fondo
3. Se marca el objeto y en el Panel del Color Mixer se utiliza primero como relleno la
opción Black and White
aquí se activa automáticamente la opción “Solid”
4. Luego se elige nuevamente “Bitmap” y escoges la imagen que deseas como
relleno.
ACTIVIDAD 3
Crear una película sencilla que contenga:
1. Un fondo con interpolación de color
2. Utilizando las herramientas básicas, dibuja 3 objetos que cambien de forma
(interpolen)
3. En otro Layer un texto que cambie a una forma
c. Create Motion Tween - Trayectorias: “Efecto Guide”
En este movimiento, los objetos siguen una trayectoria asignada.
1. Se crea un PRIMER layer con el objeto que se va a mover.
El objeto debe tener la propiedad MovieClip, esto se logra convirtiendo el objeto en
símbolo MovieClip con la opción F8, o con el botón derecho del mouse se elige
“Convert to Symbol” y cuando aparece el recuadro se elige la opción MovieClip.
2. En el fotogramaclave (keyFrame), donde está el objeto, se hace clic con el botón
derecho del mouse elige “Create Motion Ttween”
3. La línea de tiempo cambia de apariencia y avanza el número de fotogramas de 1
segundo, según la velocidad de la película:
4. Insertamos un KeyFrame, para definir hasta dónde deseamos llevar el objeto y al
hacerlo aparece un menú desplegable así:
Esto indica que podemos
modificar varias propiedades
del
objeto
durante
el
movimiento: Posición, Tamaño.
Forma, Rotación…
Para poder midficar cualquiera,
marcamos “All”
5. Ubicamos el objeto en la nueva posición y en el escenario aparece una línea que
me muestra la trayectoria lineal del movimiento, pero al hacer clic sobre ella, va a
permitir que la trayectoria cambie.
Así mismo, fijémonos en la apariencia del TimeLine. Aparece un Rombo indicando
el punto de llegada del objeto.
6. Podemos ir insertando KeyFrames y cambiando la trayectoria del objeto.
ACTIVIDAD 4
Crear una película sencilla que contenga:
1. Un fondo con interpolación de color
2. Dibuja un ovni, que siga una trayectoria por el escenario
3. Dibuja dos objetos, uno persiguiendo a otro.
d. Otro uso de Capas: Creación de Máscaras
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.
2. Sobre este layer se crea un LAYER NUEVO –SEGUNDO-. Allí se ubica la figura
(círculo por ejemplo). Se le puede poner cualquier apariencia.
3. A este SEGUNDO OBJETO se le inserta movimiento Clásico (Create Classic
Tween) y se van insertando diferentes keyframes, ubicando el objeto (lupa) en
diferentes partes del escenario (sobre las partes que se quieren visualizar de la
imagen que se encuentra en el PRIMER LAYER). Se puede cambiar de tamaño,
forma y posición.
4. Por último sobre el nombre del
mouse y se elige la opción Mask
SEGUNDO layer se hace clic derecho con el
5. Automáticamente los íconos de ambos layers cambian quedando el segundo
representado con un círculo (la máscara) y el de la imagen con un recuadro.:
ACTIVIDAD 5
Crear una película sencilla que demuestre el uso de una máscara. Por ejemplo:
1. La imagen de Fondo es la fachada de una casa
2. El efecto máscara me muestra el interior de la casa.