Animacion de Gráficos :)

Instituto de Educacin Superior Tecnolgico Pblico Luis E.
Valcrcel
Carrera Profesional Computacin e Informtica
Unidad Didctica: ANIMACIN DE GRFICOS
MANEJO DE CONCEPTOS PARA LA ANIMACIN
TEMA:
INTRODUCCIN
Objetivo
Lograr que los estudiantes conozcan y se familiaricen con el rea de trabajo y las
herramientas del programa Adobe Flash.
Objetivo Especfico
Que el estudiante conozca la interfaz del programa.
Que el estudiante pueda utilizar la interfaz del programa de forma intuitiva.
Contenido
Qu es Flash?
Caractersticas de Flash
Archivos y requisitos para ver pelculas realizadas en Flash
Imgenes vectoriales y de mapa de bits
Entorno de Flash
El escenario
Cuadro de propiedades
Barra de herramientas
Seleccin
Creacin
Transformacin
Visualizacin
Colores
Opciones
Paneles
Mezclador de colores
Alineamiento
Info
Transformar
Docente: Ing. Melina Alfrez Garca
Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Muestra de color
Componentes
Escena
Biblioteca
Concepto de lnea de tiempo
Capas
ENTORNO DE FLASH Qu
es Flash?
Flash es una aplicacin informtica producida por la empresa de software
norteamericana Macromedia, que se utiliza principalmente para la generacin de
pginas web animadas e interactivas.
Combina en un solo producto una potente herramienta de animacin y diseo con un

entorno de programacin para aplicaciones multimedia interactivas. De esta forma, es
posible obtener lo mejor de ambos mundos, creando programas que incluyen
animaciones y elementos grficos que contienen comportamientos interactivos.
Esta es una caracterstica que lo hace nico pero que tambin precisa una formacin
amplia. El desarrollador de Flash se desenvuelve en un entorno que es a la vez diseo
y programacin, arte y tcnica.
Caractersticas de Flash
Flash se ha convertido en el estndar, de hecho, para la produccin y visualizacin de
contenidos dinmicos e interactivos en lnea (conectados a Internet), gracias a
caractersticas como las siguientes:

Se puede utilizar tanto para la produccin de elementos animados e interactivos que

se integran dentro de una pgina web como para generar sitios completos. En ambos
casos, el uso de Flash permite incrementar la espectacularidad y riqueza interactiva
de nuestra web.
La utilizacin de Flash es relativamente sencilla. Con poco tiempo de aprendizaje

podemos llegar a crear elementos animados e interactivos bsicos y gracias a la ayuda
de su entorno de trabajo visual, resulta accesible llegar a niveles ms sofisticados,
incluso para aquellos con poca experiencia previa en el uso de herramientas similares.
El entorno de Flash dispone de herramientas para probar nuestras creaciones y verlas

tal como las ver el usuario final. Por otra parte, las pelculas hechas con Flash son
multiplataforma, se ven de la misma forma independientemente del navegador
(Explorer, Netscape, Mosaic u otros) y del sistema operativo (Windows, Macintosh,
Linux u otros) que utilice el usuario. Incluso se puede utilizar en entornos como Palm,
Pocket PC o PlayStation.
Las pelculas Flash se descargan rpidamente en el ordenador del usuario, ya que,

aunque se incorporen elementos complejos, conservan unos tamaos relativamente
modestos. Adems, las pelculas Flash se pueden empezar a ver aunque no se hayan
descargado totalmente (tecnologa de flujo o streaming).
La incorporacin de elementos interactivos es muy sencilla con Flash. Por ejemplo,

podemos conseguir que determinados objetos de nuestra pelcula reaccionen a las
acciones del usuario, o tambin, podemos construir formularios atractivos para pedir
informacin.
La creacin de animaciones complejas: objetos que cambian de posicin, de color, de

forma o, incluso, que se convierten en otros objetos, resulta muy fcil con Flash.

Gracias a la organizacin de los documentos siguiendo la metfora de una pelcula,

con su lnea temporal y su sistema de animacin interpolada, crear contenidos
dinmicos es sencillo y divertido. Con Flash es posible crear animaciones mediante
programacin y, por lo tanto, que cambian cada vez que se ejecutan.
Para que nuestra web sea ms espectacular, podemos incorporar fcilmente en una
pelcula Flash elementos multimedia como imgenes, sonido y vdeo, incluso ficheros
externos, sincronizados o no con las animaciones.
Flash est preparado para gestionar contenido multimedia dinmico. Con l se pueden
crear no slo webs, sino tambin pequeas aplicaciones, como chats, servicios de
noticias, bancos de imgenes o de vdeo y, por supuesto, juegos.
Flash dispone de un sistema de bibliotecas que permite reutilizar los elementos de una
pelcula dentro de la misma pelcula o en otra, aprovechando al mximo el trabajo del
diseador.
Archivos y requisitos para ver pelculas realizadas en Flash

Las pelculas producidas con Flash se almacenan en dos tipos de archivo:
Los archivos con la extensin .fla: se generan cuando guardamos nuestro trabajo con
Flash y contienen la pelcula en formato original, de tal manera que podemos
modificarla.
Cuando hacemos doble clic, estos archivos abren la aplicacin.
Los archivos con la extensin .swf: contienen la pelcula en un formato optimizado

para su descarga en Internet. Se trata de los archivos que se ejecutan en el navegador
de nuestro usuario y contienen la pelcula como producto final, no la fuente original.

Estos archivos no permiten modificar las pelculas, slo permiten visualizarlas.
Tipos de archivos
.FLA
Este tipo de archivos contiene el desarrollo de la pelcula sin compilar,

es decir permite visualizar cmo est hecha la pelcula y editarla en la
aplicacin de Flash.
.SWF
Es el archivo que contiene la pelcula compilada y que utilizaremos para

su publicacin en Internet o medio digital. Para poder visualizar este
archivo se necesita la utilidad reproductor de flash que viene por
defecto en la aplicacin y que se puede descargar de modo gratuito de la
red. Este formato no permite editar la pelcula solamente visualizarla.
.HTML
Este archivo es el que va a contener el conjunto de instrucciones para

que el archivo .swf se pueda reproducir en el navegador.
.GIF
Crea una imagen de baja resolucin ( 256 colo r
es ) pero de descarga
rpida.
.JPEG
Crea una imagen de alta resolucin.
.PNG
Crea una imagen, hbrido entre .GIF y .JPEG
Proyector
de
Un proyector es un archivo que contiene la pelcula Flash y el

reproductor todo junto. El resultado es un
archivo .exe (.app)
Win y Mac
ejecutable
que
puede
reproducirse
en
cualquier
ordenador
sin
necesidad de tener Flash instalado.
Resulta importante tener en cuenta que para que el usuario final pueda descargar una
pelcula Flash desde Internet (en formato .swf) y pueda verla sin problemas en su
ordenador, el navegador que utilice debe tener preinstalado un pequeo complemento,
llamado plug-in, especfico para la deteccin e interpretacin de archivos con extensin
.swf.
Imgenes vectoriales y de mapa de bits

Una pelcula realizada con Flash se compone, entre otros elementos, de un conjunto de
objetos grficos, de imgenes. En general, una imagen digital puede ser de dos tipos:
vectorial o de mapa de bits.
Una imagen vectorial se compone de una o de unas cuantas trayectorias formadas

por lneas y curvas. Estas trayectorias forman contornos y delimitan reas, y todos
estos elementos pueden presentar un color o textura concretos.
Las imgenes de mapa de bits estn definidas por puntos llamados pxeles. Los
pxeles se organizan en un entramado de filas y columnas, tienen una ubicacin
especfica dentro de la imagen (sus coordenadas de fila y columna) y un cdigo que
especifica su color.
Cuando manipulamos una imagen de mapa de bits, en realidad modificamos las

caractersticas de los pxeles individuales que la forman, en lugar de cambiar las
formas u objetos representados.
Entorno de Flash
El entorno de trabajo es el escenario de desarrollo de la aplicacin Flash, formado por
el espacio donde se construye la pelcula y por el conjunto de herramientas que lo
hacen posible.
Sus elementos bsicos son el escenario, la lnea temporal y los conjuntos de paneles.
Aunque la disposicin del entorno de trabajo puede personalizarse, la configuracin

que presenta por defecto es la siguiente:

Estas 5 partes se pueden arrastrar y cambiar de ubicacin, dndote la posibilidad de adaptar el

entorno como a ti ms te guste. Adems, estos elementos se pueden minimizar, haciendo clic sobre
el nombre de cada uno.
El escenario
El escenario es el espacio donde se desarrolla la pelcula Flash, donde tenemos los
diferentes objetos (imgenes, texto, animaciones, sonido, etc.) que forman parte de la
misma. Por defecto, las dimensiones del escenario son 550 pxeles de ancho por 400
de altura (unos19 14 centmetros).
Para situar correctamente los diferentes objetos de la pelcula en el escenario, nos

puede ser de gran ayuda visualizar la cuadrcula, la regla y las guas.
La cuadrcula es un conjunto de lneas verticales y horizontales que

dividen el escenario en porciones cuadradas. La cuadrcula no aparece
en la versin publicada de la pelcula, pero nos ayuda a alinear y colocar

los objetos. Podemos activar y desactivar la cuadrcula escogiendo la

opcin Mostrar cuadrcula, dentro de Cuadrcula del men Ver. Si la
opcin Ajustar cuadrcula est seleccionada, los objetos que movamos
en el escenario tendern a situarse con su punto de registro sobre las
lneas de la cuadrcula, como si la lnea "atrajese" al objeto. Esta opcin
es muy til para alinear y ordenar los objetos automticamente. Tambin
podemos editar las propiedades de la cuadrcula con la opcin
'Ver/Cuadrcula/Editar cuadrcula y cambiar su aspecto (distancia entre
lneas, color de las lneas, etc.).
La regla nos indica en pxeles la posicin y distancia entre los diferentes

objetos dentro del escenario. Podemos activar la regla horizontal y
vertical escogiendo la opcin Reglas del men Ver.
Las guas son lneas que podemos colocar en el escenario que tienen
como finalidad ser el punto de referencia al situar los diferentes objetos.
Para insertar una gua horizontal, hacemos clic en la regla vertical y la
arrastramos hacia el escenario, situando la gua en el lugar que nos
interese. Para insertar una gua vertical, el procedimiento es el mismo,
pero haciendo clic en
la regla horizontal. De
forma
similar
la
cuadrcula, las guas

tambin
pueden
"atraer" a los objetos

prximos si activamos
la
opcin
Ver/Guas/Ajuste a las
guas.
Tambin podemos cambiar las propiedades de las guas (color, tolerancia del
ajuste, etc.) con Ver/Guas/Editar Guas.

Podemos personalizar varias caractersticas del escenario a partir de la

ventana de propiedades del documento. Se puede acceder a esta ventana a
partir de la opcin Documento dentro del men Modificar. Entre otras cosas,
permite hacer lo siguiente:
Cambiar las dimensiones del escenario escribiendo los valores de

anchura y altura. Si queremos que el espacio sea el mismo en todo el
contenido de la pelcula, tenemos que hacer clic en el botn Coincidir
contenidos.
Cambiar la unidad de
medida de la regla, que
puede ser, entre otros,
pxeles,
centmetros
pulgadas.
Escoger
un
color
de
fondo para el escenario (el blanco es el color predeterminado) y para las

lneas de la regla (el gris, por defecto).
Escoger la velocidad a la que se reproducirn los fotogramas (por defecto

12 por segundo).
Adems, podemos conseguir que el escenario aparezca mayor o menor, segn

si nos interesa tener una visin general o una visin detallada de una parte.
Esto es posible gracias a la funcin Zoom.
Cuadro de propiedades

Una de las cosas fundamentales antes de comenzar es definir el tamao de la Hoja

de Trabajo. Aunque se puede setear ms adelante, es recomendable saber de
antemano en qu dimensiones vamos a trabajar.
En el cuadro de Propiedades, vers la opcin de Tamao. Ingresa all las dimensiones
que quieras. Tambin puedes cambiar el color de fondo, desde la opcin Fondo o la
velocidad, eligiendo la cantidad de Fotogramas por segundo.
Y en el momento de publicar nuestro trabajo, incluso tenemos la opcin de escoger

entre varios formatos de publicacin Pero lo mejor del cuadro de Propiedades es que se
va modificando segn lo que selecciones. En este caso, estaba nicamente la hoja
de trabajo vaca y por eso se indica del lado izquierdo, al costado del logo de Flash
que se trata de un Documento, que por ahora no tiene nombre. Ahora crearemos un
crculo con la herramienta de crculo (barra de Herramientas). Si seleccionamos el
crculo, vemos que el cuadro de Propiedades nos muestra informacin sobre esta
nueva forma:
Ahora puedes ver datos de la forma: sus dimensiones ancho y alto, su posicin
dentro de la mesa de trabajo X, Y, el color de borde, el color de la forma, el grosor de
borde y el tipo de lnea de borde. Todas estas especificaciones pueden ser cambiadas
ah mismo, en el cuadro de Propiedades. Ms adelante veremos otros usos de este
elemento Flash.
Barra de Herramientas
10

La barra de Herramientas puede dividirse en 4 partes: seleccin, creacin,

transformacin, visualizacin, color y otras opciones. Antes de ver estas
herramientas, debes saber que en Flash trabajamos con dos tipos de elementos: de
pxel y vectoriales. Las herramientas de esta barra sirven para manipular y crear estos
elementos.
Seleccin
La flecha negra nos permite seleccionar objetos enteros, sobre todo aquellos
elementos de pxel, para moverlos dentro de la mesa de trabajo, borrarlos o
realizar otras acciones. Importante: cuando selecciones una forma con borde, ten
en cuenta que para seleccionar el interior y el borde al mismo tiempo, debers
hacer doble clic sobre la forma. De otra forma, haz un clic sobre el borde para
seleccionar el borde, o uno sobre el interior de la forma para seleccionar esa
parte.
11

La flecha blanca selecciona vectores, movindolos o borrndolos. Nos permite

cambiar la forma de un objeto vectorial.
El lazo se usa para seleccionar elementos de pxel, tanto para borrarlos como
para editarlos.
Creacin
La lnea nos permite crear lneas rectas. Para eso se debe
hacer clic en un punto de la hoja. Mantn presionado el mouse
y mueve el puntero para ver cmo se genera la lnea. Deja de
cliquear cuando hayas obtenido la lnea que deseas. Si una
sucesin de lneas generan una forma cerrada, esta forma
pasar a ser un objeto y podr rellenarse con color, permitiendo adems otras
opciones de edicin.
La pluma sirve para crear objetos del tipo vectorial (ver
imagen de la derecha), con la posibilidad de generar curvas.
Es similar a la pluma que se ve en otros programas de
diseo.
Las herramientas de valo y rectngulo generan formas

cerradas. Manteniendo presionada la tecla Shift del teclado, podrs crear crculos
o cuadrados perfectos. De lo contrario, podrs lograr las dimensiones que
quieras, seleccionando el objeto y modificando sus medidas en el cuadro de
Propiedades.
El lpiz y el pincel son muy parecidos. Con estas herramientas podemos crear
lneas a mano alzada. Como ves en la imagen, mientras que el lpiz genera una
lnea de borde, el pincel genera relleno y es un objeto en s mismo. Si el trazo del
12

lpiz se une en un punto, se convertir en una forma que podrs rellenar. Al

trazo de pincel es una forma llena a la que podemos darle borde.
Dentro de esta barra de Herramientas est la opcin de Fuente, para

insertar texto. Hay un captulo ms adelante sobre el tratamiento de
tipografas en Flash, sin embargo podrs darte cuenta lo fcil que es incluir texto
con este programa: slo debes seleccionar la herramienta y hacer clic en alguna
seccin de la hoja de trabajo. Escribe lo que quieras. Luego podrs mover o rotar
la caja de texto. Para editar el texto, tienes varias opciones en el cuadro de
Propiedades.
Transformacin
La herramienta de Transformacin es una de las ms importantes porque nos
permite rotar y modificar las dimensiones de cualquier objeto. Slo haz clic en
la herramienta y luego sobre el objeto u
objetos
que
quieras
modificar.
La
herramienta de Gradiente se usa para editar

gradientes, no para generarlos. Se selecciona
la herramienta y se hace clic sobre el objeto que se quiera modificar. Podrs
modificar las dimensiones del gradiente (la distancia entre un color y otro), la
posicin y el ngulo.
El Bote de tinta y el Cubo de pintura cumplen la funcin de colorear. El Bote de

tinta colorea bordes; el Cubo de pintura colorea rellenos.
El Gotero sirve para tomar colores de objetos ya existentes. De esta manera,

si queremos pintar un objeto de otro color que ya se utiliz, tomamos el gotero y
manteniendo presionado ALT+SHITF hacemos clic sobre el objeto del color que
13

nos gusta. El color quedar seleccionado y lo podrs usar en la creacin de un

objeto nuevo o para colorear uno que ya existe. Atencin: no funciona con
gradientes!
El Borrador borra cualquier objeto o parte de un objeto. Se puede modificar el

grosor y forma del borrador desde la misma barra de Herramientas, en el sector
Opciones. Tambin se puede elegir borrar selectivamente: slo relleno, slo
borde, slo elementos seleccionados, etc.
Visualizacin
La mano te deja desplazarte por la pantalla a gusto y piacere. Prubalo, pero no
hace falta recurrir a la barra de herramientas: presionando la barra
espaciadora se habilita la opcin de mano. Es una herramienta muy
til para trabajar en un espacio amplio.
La Lupa te permite ampliar la pantalla en el sector que quieras. Sin embargo, se

utiliza un atajo de la lupa que agiliza mucho el trabajo: presionando
CTRL+BARRA ESPACIADORA visualizars la lupa automticamente en su
versin de ampliar. Haz clic sobre la pantalla en el punto que quieras ampliar.
Para ampliar ms, haz otro clic. Si quieres reducir el zoom, haz lo mismo, slo
que esta vez debers presionar CTRL+ALT+BARRA ESPACIADORA.
Colores
Desde el sector de Colores modificamos el color de relleno y de borde de
cualquier objeto (lpiz para borde, cubo de pintura para relleno).
Tambin puedes invertir estos colores (la opcin de las flechas):
pasando a estar el del borde para el de relleno y al revs. El programa
cuenta con colores predeterminados: borde negro y relleno azul (la opcin de
los cuadraditos blanco y negro).
14

Opciones
En el sector de opciones, se muestran opciones sobre las diferentes
herramientas que vamos seleccionado. Es bueno prestar
atencin a estas opciones ya que muchas veces
nos simplifican el trabajo. En la imagen puedes ver un ejemplo con las opciones
que se muestran cuando seleccionamos la herramienta del borrador y con la
flecha negra. Para continuar con el taller de Flash, te recomiendo que comiences
con un reconocimiento del programa, probando con estas herramientas.
En Flash tenemos a nuestra disposicin una serie de paneles para trabajar con
color,
alineamiento,
transformaciones
escenas,
adems
de
obtener
informacin sobre los objetos. Si sabemos usar estas herramientas, podremos

sacar mayor provecho del programa. Adems de los paneles, veremos cmo
utilizar la biblioteca: un espacio para almacenar imgenes, objetos y smbolos,
que administra el trabajo y lo organiza.
Paneles
Los paneles se encuentran generalmente en la parte derecha de la mesa de trabajo y
son cajas de herramientas, especializadas en diferentes cosas. Cada panel nos abre
distintas posibilidades para mejorar nuestro diseo.
Mezclador de colores
En este panel encontraremos prcticamente las mismas opciones de color que en
la barra de Herramientas. La diferencia reside en la eleccin de los colores a
travs de numeracin.
15

A la derecha vemos 4 casilleros con nmeros.

Los primeros tres, con el valor 255 son los que
definen el color RGB (Red, Green, Blue), que en
este caso se ve como RVA (Rojo, Verde,
Amarillo). Puedes variar las cifras para cambiar
el valor de color. R255, V255, A255 equivale a
blanco.
Por otra parte, el porcentaje de Alfa se refiere al valor de transparencia que

tendr el color.
Alfa 100% es slido, mientras que un valor del 0% es completamente
transparente. Si trabajas con colores web, tambin puedes introducir valores de
este tipo tal como se ve en el ejemplo: #FFFFFF.
Alineamiento
El
panel de
Alineamiento
se
utiliza continuamente. Sirve tanto para

alinear objetos entre s, como para alinearlos
con respecto a la mesa de trabajo: centrar
algo perfectamente en la hoja.
Para alinear dos o ms objetos debes primer

seleccionarlos y luego elegir la opcin del panel que prefieras. Si lo haces con
respecto a la mesa de trabajo, selecciona el objeto solo y asegrate que est
seleccionada la opcin En Escena.
Info
16

El panel de Info es super til para

obtener
informacin sobre
los objetos que estamos

manipulando. En el ejemplo podemos ver un cuadrado comn. En el panel se
muestra informacin sobre el color (R204, V255, A51 - Alfa: 100%), la posicin
dentro de la mesa de trabajo (X:334.9, Y:377.4) y las dimensiones (41.3 x 41.3
pxeles).
Transformar
La opcin de Transformar es muy
parecida a la transformacin que se
consigue a travs de la barra de
Herramientas, slo que esta vez es mucho ms precisa, a travs de cifras.
En la imagen de la derecha se ve el mismo cuadrado que el ejemplo anterior,

transformado utilizando este panel. Se redujo un 60% en su ancho y lo rotar 15
grados hacia la derecha (para rotar hacia la izquierda se le agrega un signo
menos (-) antes del nmero). La opcin de sesgar se deduce del dibujo explicativo
en el panel.
Por otra parte hay dos mini-botones en la parte inferior derecha. El botn de la
izquierda repite la ltima accin que se haya realizado. En este caso, repite la
reduccin en el ancho y el giro a la derecha, quedando como se puede ver en la
imagen de la izquierda. El botoncito de la derecha deshace las acciones
regresando la forma u objeto a su estado original.
Muestras de color
17

Para ahorrar tiempo en la eleccin de los colores que uso, tengo siempre en
cuenta el muestrario de color. Este muestrario se puede ampliar con nuevas
muestras.
Adems, los colores se pueden ordenar y se pueden aadir nuevos colores que
estemos utilizando. As nos ahorramos el uso del Gotero y agilizamos la tarea. De
hecho, podemos crear nuestro muestrario de color desde cero, incluyendo
nicamente colores que estn en uso. Debajo del muestrario de color hay un
mini-muestrario de gradientes, que puedes elegir como base y despus editar.
Componentes
Los Componentes son elementos Flash, como
botones, menes expandibles y scroll bars.
Este panel ofrece componentes estndar para

utilizarlos de base y no tener que crearlos desde cero. Estos
componentes se pueden editar para personalizarlos.
Escena
As como en una pelcula, las animaciones en
Flash estn divididas en Escenas. En el panel
de Escena vemos el listado de las escenas. En
este caso es una sola y el nombre es Escena 1.
Haciendo doble clic sobre el nombre, se puede editar. Debajo hay 3 botones: el
primero es para
duplicar escenas. El segundo sirve para crear una nueva escena vaca. El
tercero y es obvio es para borrar las escenas. El orden de las escenas se puede
modificar seleccionndolas y arrastrndolas con el mouse.
18

Biblioteca
La Biblioteca es una parte fundamental de Adobe Flash. Aqu quedan
almacenados los elementos que luego explicaremos en futuras clases: smbolos,
pelculas, botones, etc.
En la biblioteca vas a ver un listado con todos los elementos, smbolos. Pueden
estar a su vez organizados en carpetas. Estos smbolos son nicos. En el caso
del ejemplo, el Smbolo 3 se corresponde al texto que dice flash. En el visor de
la biblioteca vemos el elemento original. Al costado vemos el mismo smbolo
modificado. Sin embargo, las nicas modificaciones que pueden hacerse tienen
que ver con la dimensin, posicin y ngulo. Cualquier modificacin de color o
forma que sufra el smbolo, se modificar en el smbolo de la biblioteca. Si yo
hubiera modificado el color del flash grande, lo hubiera hecho tambin con el
pequeo. No as si deseo ampliar o reducir el elemento. Si queremos realizar
cambios en un elemento sin cambiar el original de la biblioteca, entonces
debemos duplicar este smbolo. Selecciona el smbolo y haz clic en el men
(debajo de la cruz de cierre de la ventana). Escoge Duplicar.
Concepto de lnea de tiempo

El manejo del tiempo se basa en una Lnea de Tiempo. As como una hora est dividida
en minutos y segundos, nuestra Lnea de Tiempo se divide en Fotogramas. La lnea
19

es siempre infinita, pero la animacin va a finalizar en el ltimo fotograma lleno, el

ltimo que contenga informacin.
La unidad de medida es Fotogramas por Segundo (fps) y es un valor que se puede

modificar, aunque lo ms comn es utilizar 12 fps. Como se ve en la imagen, la Lnea
de Tiempo presenta fotogramas blancos y grises. Los grises se disponen cada 5
fotogramas como una ayuda para contabilizar mejor estos fotogramas a la hora de
crear la animacin.
Capas
Como complemento de nuestra Lnea de Tiempo estn las Capas. Su principal
funcin es organizativa. Supongamos que creo un crculo en el primer
fotograma de la Capa 1. Luego creo una animacin de ese crculo, aumentando
su tamao hasta duplicarlo definitivamente en el fotograma 10. Del fotograma 1
al fotograma 10 tengo la animacin de mi crculo. Supongamos que al mismo
tiempo quiero crear un crculo al lado y tambin animarlo. En ese caso, no
20

pueden superponerse ms de una animacin en la misma capa, por eso tengo

que crear el segundo crculo en una capa nueva.
Cada objeto debe estar en su propia capa. Y ojo que cuando de objetos puede ser
una combinacin de elementos: si mi crculo es un sol en un paisaje y es lo nico
que va a tener animacin, podemos crear todo en la misma capa. Pero ms all
de situaciones como esta, no es conveniente ahorrar en capas, todo lo contrario.
Cuando ms capas tengamos, ms organizado estar nuestro trabajo. En el
listado de capas, al lado de cada
una podemos ver el Estado de la
capa:
Ojo: Tildando esta opcin podemos

ocultar o mostrar la capa.
Candado: Esta opcin nos permite bloquear una capa. Esto
significa
que
no
podremos realizar ninguna modificacin a los objetos de la capa.

Marco: Cuando la opcin de marco est activa, se muestran nicamente el contorno
de los objetos de esa capa.
A su vez, debajo del listado de capas hay 4 opciones:
Agregar capa: Agrega una capa al listado de capas.
Agregar gua de capa: El elemento gua de capa lo veremos ms adelante.
21

Agregar carpeta: Se puede agregar una carpeta para organizar capas all adentro. De
esta manera podremos organizar mejor las capas que poseemos, evitando un largo
listado de capas imposible de entender.
Eliminar: Elimina capas, guas y carpetas y todo su contenido.

El orden de las capas est relacionado con su posicin virtual en el espacio. La
capa inferior del listado se encontrar detrs de las otras capas. Podemos
ver en las imgenes de los crculos, que el crculo mayor, en la capa 1, est
detrs del crculo menor de la capa 2. Para poder comprender ms estos
conceptos, es bueno que practiques generando figuras en distintas capas,
probando la superposicin, junto con lo que vimos en clases anteriores. Crea
capas, duplica, elimina, organiza en carpetas.
EJERCICIO 01
PARA CONFIGURAR LAS
PROPIEDADES DEL
DOCUMENTO
Presione la combinacin de
teclado Control + F3, se
encuentra la informacin
actual
del
documento, como
segundo reproducido
en
la
velocidad
las secuencias
del fotograma
adems,
por
las
dimensiones del documento y color de fondo.

Nota: en el cuadro de propiedades del documento abierto puede cambiar las
dimensiones de la salida del archivo, tome en cuenta que para la mayora de pantallas,
la resolucin es de 1024*768, eso no quiere decir que el documento debe ser de ese
tamao, ya que en realidad al publicar este espacio ser menor.
TEMA:
CREACIN DE DIBUJOS
22

Objetivo
Lograr que los estudiantes desarrollen su conocimiento en Adobe Flash con
el uso de las formas de dibujo bsicas del programa: Trazos y rellenos
Objetivo Especfico
Que el estudiante sea capaz reconocer las diferencias entre grficos vectoriales y
grficos de mapas de bits.
Que los alumnos reconozcan las diferencias, ventajas y desventajas de los trazos y
rellenos.
Contenido
Dibujos de formas bsicas.
Grficos vectoriales vs bitmaps
Trazos y rellenos
Combinacin y dibujo de objetos
Degradados de color
Dibujo Combinado
DIBUJO DE FORMAS BSICAS
23

Grficos vectoriales vs bitmaps Qu

es un grfico vectorial?
Un grfico vectorial es un tipo de grfico que contiene informacin matemtica de
forma, posicin, color y tamao para ser dibujado o representado por la computadora.
Como los grficos vectoriales solo constan de informacin, suelen ser archivos de poco
tamao que se pueden descargar rpidamente y que pueden escalarse a cualquier
tamao sin prdida de calidad.
Qu es mapa de bits?
Un mapa de bits o Bitmap es un grfico representado por una malla de pixeles cuya
cantidad en dicha malla determina la calidad de la imagen. Dependiendo del nmero
de pixeles, estas imgenes pueden ocupar mucho espacio en el archivo y al ser
escalados a tamaos superiores -o incluso inferiores- suelen perder calidad.
Los sistemas informticos muestran las imgenes en formato de vectores o mapa de

bits.
Grficos vectoriales:
Describen las imgenes mediante lneas y curvas, denominadas vectores, que
incluyen propiedades de color y posicin. Ejemplo.
24

Grficos de mapas de bits:

Estn compuestos por puntos de color, denominados pixeles, organizados en una
cuadrcula. Ejemplo:
Flash puede trabajar con ambos tipos de grficos: Crea nativamente grficos
vectoriales y puede importar mapas de bits. Sin embargo, siempre hay que tomar en
cuenta que los bitmaps aaden peso al archivo y que importar demasiados puede
sobrecargar la animacin y por ende la capacidad de la computadora para mover esos
grficos o aadirles efectos especiales.
Trazos y rellenos
Flash nos permite crear formas de dos tipos: Trazos (o lneas) y rellenos. Podramos
considerar los trazos como el contorno de una figura y los rellenos como el color
dentro de ese contorno; sin embargo, como veremos ms adelante, esto no es del todo
cierto puesto que tambin podemos utilizar las herramientas de relleno para crear
contornos. Lo importante es aprender a usar ambos tipos de formas de acuerdo a qu
queramos disear y cul sea nuestro estilo de dibujo. Para poder identificar estas
herramientas podemos prestar atencin a la figura 1:
25

La herramienta de lneas nos permite precisamente eso: crear lneas rectas que
pueden unirse o no con otras. La herramienta de lpiz tambin puede crear lneas
pero nos da ms libertad para crear figuras con lneas rectas o curvas. La herramienta
de pincel nos permite dibujar con la misma libertad que el lpiz pero haciendo uso de
rellenos. Tambin tenemos herramientas que combinan el uso de ambos tipos de
dibujo para la creacin de figuras geomtricas: rectngulo, valo y polystar.
Finalmente, podemos utilizar el bote de pintura para aplicar o sustituir rellenos en
cualquier tipo de figura y el bote de tinta para crear contornos en figuras que no los
tengan, as como cambiar el color de contornos en figuras que ya lo tengan. Podemos
ver un ejemplo de esto en la figura 2.
26

Dibujo Combinado
Adems de poder elegir entre trazos y rellenos, Flash nos dejar crear cualquiera de
estas formas en dos modos diferentes: dibujo combinado y dibujo de objeto. Los
dibujos creados en el modo combinado pueden integrarse a otros dibujos para
fusionarse entre s, de tal forma que formen un solo objeto. Si luego de combinarse dos
dibujos seleccionamos uno de ellos y lo separamos del otro, notaremos que quedar
un rea incompleta en cualquiera de los dibujos, justo donde se hizo la separacin.
Podemos apreciar un ejemplo de lo anterior en la figura 3.
Dibujo de objeto
Por el contrario, si creamos figuras en Flash en el modo de Dibujo de Objeto,
notaremos en primer lugar que cada forma parece estar encapsulada dentro de un
27

rectngulo de color azul oscuro, esto mantiene a las figuras separadas de cualquier
otra en la que entren en contacto, como se puede ver en la figura 4. Adems, los
dibujos de objeto mantienen las mismas posibilidades de edicin que los dibujos
combinados, es decir, podemos cambiar su color y dimensiones, as como alterar su
forma misma desde el escenario.
Para usar cualquiera de estos modos es necesario prestar atencin al modificador

Dibujo de objeto de las herramientas de dibujo que estemos utilizando. Tanto para
las figuras geomtricas como para las herramientas de trazo y relleno, aparecer el
cono del modificador en el espacio para modificadores de la barra de herramientas.
Mientras est inactivo, se ver de color gris claro y podremos crear objetos
combinables; si est activo, se ver de color gris oscuro y tendr un recuadro negro a
su alrededor, entonces podremos crear dibujos de objeto
Existen otras dos formas de encapsulado de objetos: el dibujo simple (solo para las
formas geomtricas valo y rectngulo) y la agrupacin de objetos (para cualquier
objeto) Las formas simples las podemos encontrar dentro de las herramientas de valo
y rectngulo. Funcionan prcticamente igual que los dibujos de objeto, con la
diferencia de que nos permiten alterar algunas caractersticas del objeto incluso
despus de haberlo creado. Por ejemplo, si en dibujo de objeto queremos crear un
28

rectngulo
cuyas
esquinas
estn
redondeadas,
es
necesario
especificar
esta
caracterstica en el inspector de propiedades antes de dibujar el rectngulo en el

escenario. De otro modo, una vez dibujado el rectngulo, no podremos alterar esta
caracterstica en ese objeto. En cambio, si dibujamos el mismo rectngulo con la forma
simple, podremos modificar esta caracterstica en el panel de propiedades cada vez que
seleccionemos el objeto. Tenemos ejemplos de esto en las figuras 5 y 6.
La ltima opcin para encapsular un objeto es agrupndolo. Esto se logra

seleccionando el objeto y luego presionando Ctrl+G, o en el men-->modificar>Agrupar. En este caso, la figura queda restringida por un recuadro de color celeste y
no es posible editarla a menos que demos doble click a la figura para acceder al
interior del grupo. Luego de hacer doble click en un grupo, podremos saber que nos
encontramos dentro del objeto agrupado si observamos la esquina superior izquierda
del escenario. Ah veremos un recuadro que nos indica que estamos en la escena 1 (en
este caso), y hacia la derecha veremos la palabra Grupo (figura 7). Una vez aqu,
podremos alterar la forma, dimensiones o colores del objeto. Para regresar al escenario
principal, simplemente damos click a Escena 1 y Flash nos llevar fuera del objeto
agrupado. Si por alguna razn queremos eliminar cualquiera de los encapsulamientos
que hemos visto (Dibujo de objeto, dibujo simple, grupos) Basta con presionar Ctrl+B
o en men-->modificar-->separar.
29

Modificadores de lpiz y pincel

El modificador del lpiz de flash sirve para tratar de ayudarnos a corregir un poco las
lneas o curvas irregulares que dibujemos en el escenario (El tamao del lpiz se
configura en el panel de propiedades). Si seleccionamos el lpiz y luego damos click a
su modificador veremos tres posibles opciones: Enderezar, suavizar y tinta. Las
primeras dos opciones nos proveen de ayuda para convertir trazos irregulares en
formas ms estables, mientras que la opcin tinta deja sin modificaciones cualquier
trazo que hayamos creado. Esta ayuda, por supuesto, solo corrige irregularidades
pequeas y la mejor forma de entender esto es poniendo a prueba el modificador, como
en la figura 8. El pincel, por otro lado, tiene ms opciones de modificacin, como
podemos ver en la figura 9. Adems de poder crear dibujos de objeto, tenemos un
modificador para trabajar colores en degradados (que veremos ms adelante), otro
para cambiar tamao y forma del pincel y uno ms para cambiar los modos posibles
de pintura. Nos centraremos en este ltimo. El primer modo de este modificador es
Pintar normal, y como su nombre lo indica, simplemente significa que las figuras
hechas con este modo pintan encima de otras ya creadas en el escenario. Pintar
rellenos indica que las figuras hechas con este modo solamente afectarn otros
rellenos en el escenario, pero respetarn cualquier trazo o lnea que encuentren a su
paso.
30

Pintar detrs colocar cualquier figura hecha con este modo detrs o debajo de
otros dibujos en el escenario, sean rellenos o sean trazos. Pintar seleccin dejar
que las nuevas figuras solamente afecten los rellenos que hayan sido seleccionados
previamente (con la herramienta de seleccin). Los rellenos no seleccionados no
sufrirn ninguna alteracin. Pintar dentro. Este modo nos permite pintar al interior
de un relleno determinado sin seleccionarlo previamente y sin afectar los rellenos a su
alrededor; pero para poder aplicarlo es necesario siempre iniciar el dibujo dentro de
ese relleno. Podemos ver un ejemplo de cada uno de estos modos en la figura 10.
31

Cerrar huecos
El bote de pintura posee tambin un modificador muy importante que sirve para
cerrar algunos espacios que pudieran haber quedado en un diseo determinado.
Esto depende, por supuesto, de qu tan grande sea el espacio que se necesita cerrar
con el bote de pintura. En la figura 11 podemos observar las opciones posibles de
32

tamaos de hueco que el modificador puede cerrar. Hay que tomar en cuenta que
incluso con la opcin cerrar huecos grandes siempre habr espacios demasiado
grandes como para que Flash intrprete que ah debe hacer algn cierre.
Degradados de color
Adems de poder seleccionar colores slidos para rellenar con el bote de pintura, es
posible aplicar colores en degradado. Esta opcin se encuentra dentro de las muestras
que se presentan al darle click al bote de pintura y luego en el recuadro de seleccin
de color. En la parte baja de las muestras normales se pueden apreciar los posibles
degradados que ofrece Flash por defecto, tal como se puede ver en la figura 12. El
degradado se puede aplicar tambin con cualquier figura geomtrica (valo,
rectngulo, polystar) que se vaya a crear. Podemos controlar la direccin y extensiones
de color de un degradado utilizando la herramienta de trasformacin de
degradado que se encuentra oculta bajo la herramienta de transformacin libre.
Seleccionamos el degradado que queremos manipular y veremos los con - troles que
nos proporciona Flash para esa tarea.
Por otro lado, tambin es posible crear degradados personalizados dentro de la

pestaa color. Si seleccionamos un degradado, esta pestaa nos mostrar una
barra horizontal con los colores que ya posee el degradado y aqu mismo podremos
cambiar, eliminar o aadir nuevos colores, as como cambiar sus posiciones y su
rango de influencia. Ejemplo de esto lo podemos ver en la figura 13. Finalmente, es
bueno saber que dentro de esta pestaa tambin podemos elegir entre dos opciones de
degradado: lineal y circular, adems de tres modos de flujo: color ampliado, reflejar
color y repetir color. Si tienes curiosidad, puedes jugar con estas opciones para
observar que hacen exactamente.
33

34

EJERCICIO 02
TRAZOS
TIP 01: Cuando tenemos la herramienta de seleccin activada y acercamos el cursor a
la esquina o extremo de un trazo, el cursor mostrar dos lneas en ngulo recto en su
parte inferior, esto significa que podemos alargar o deformar el trazo al arrastrar el
cursor. De igual modo, si nos posicionamos en la parte media de un trazo, el cursor
mostrar una pequea curva, esto significa que podemos convertir una lnea recta en
curva o modificar una curva ya creada. Ejemplo verlo en la figura 14.
35

Con la figura 15 de referencia, usa la herramienta de lpiz y trata de dibujar el

mismo paisaje (no coloree todava). El tamao del trazo debe ser de 2.00 y el color
negro. Hacer uso de los modificadores cuando sea necesario para suavizar o estabilizar
tus lneas. No es necesario que tu dibujo sea idntico al de la referencia, pero todos los
elementos deben estar presentes y en las mismas posiciones.
TIP 02: Si tenemos muchos elementos en pantalla, unos sobre otros, es til separarlos
en capas para poder tener un mejor control y visin sobre ellos. Aunque tambin
podemos darles un color temporal para diferenciarlos ms fcilmente, hay que
36

recordar que podemos utilizar la opcin capas como contornos para distinguirlos
ms rpidamente. Para esto, hay que darle un click al cono de las capas que parece
un pequeo rectngulo de color, esto cambiar la vista de cualquier objeto al interior
de la capa automticamente a una figura como de alambre. Tambin podemos dar
doble click al cono y cambiar el color del contorno en la ventana emergente que
aparece, como podemos ver en la figura 16. Otra opcin es agrupar aquellos dibujos
que ya hayamos terminado antes de iniciar los siguientes. Dado que estaremos
creando muchas lneas individuales, no es conveniente usar el dibujo de objeto.
TIP 03: A veces los objetos quedan torcidos o necesitamos cambiarlos de tamao. Para
hacer esto podemos usar la herramienta de transformacin libre. Primero,
seleccionamos el objeto (un click en una lnea selecciona la lnea hasta el primer punto
de unin con otra, dos clicks seleccionan todas las lneas unidas) y luego activamos la
herramienta de transformacin libre de la barra de herramientas, notaremos un
contorno negro alrededor del objeto. Ahora, acercamos el cursor a un lado del objeto si
queremos sesgar la figura o hacia una de las esquinas si queremos escalar o rotar, el
cambio de imagen en el cursor nos indicar lo uno o lo otro, figura
17.
TIP 04: Cuando se dibuja con el lpiz o con la herramienta de lnea, es ms sencillo
crear un objeto encima de otro y luego borrar las lneas que sobren. Para esto, basta
con seleccionar aquellas lneas que no formen parte del diseo y luego presionar la
tecla Suprimir (o Delete) en el teclado, tal como se aprecia en la figura 18.
37

38

EJERCICIO 03
COLOREAR
Una vez finalizado el diseo del paisaje, hay que darle color a cada una de las partes
de la selva. Puedes usar de referencia la figura19 para los colores o utilizar los que
ms te gusten. Sin embargo, lo que s tienes que tener en cuenta es que el cielo debe
tener un degradado radial de tres colores, las montaas un degradado lineal de dos
colores y el suelo tambin un degradado lineal de dos colores. Tampoco deben quedar
espacios sin pintar.
Ejercicios propuestos
39

40

Animacion de Gráficos :)

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Animacion de Gráficos :)

Hochgeladen von

Copyright:

Verfügbare Formate

Instituto de Educacin Superior Tecnolgico Pblico Luis E.

MANEJO DE CONCEPTOS PARA LA ANIMACIN

Que el estudiante conozca la interfaz del programa.

Que el estudiante pueda utilizar la interfaz del programa de forma intuitiva.

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Combina en un solo producto una potente herramienta de animacin y diseo con un

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Se puede utilizar tanto para la produccin de elementos animados e interactivos que

La utilizacin de Flash es relativamente sencilla. Con poco tiempo de aprendizaje

El entorno de Flash dispone de herramientas para probar nuestras creaciones y verlas

Las pelculas Flash se descargan rpidamente en el ordenador del usuario, ya que,

La incorporacin de elementos interactivos es muy sencilla con Flash. Por ejemplo,

La creacin de animaciones complejas: objetos que cambian de posicin, de color, de

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Gracias a la organizacin de los documentos siguiendo la metfora de una pelcula,

Archivos y requisitos para ver pelculas realizadas en Flash

Cuando hacemos doble clic, estos archivos abren la aplicacin.

Los archivos con la extensin .swf: contienen la pelcula en un formato optimizado

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Estos archivos no permiten modificar las pelculas, slo permiten visualizarlas.

Este tipo de archivos contiene el desarrollo de la pelcula sin compilar,

Es el archivo que contiene la pelcula compilada y que utilizaremos para

Este archivo es el que va a contener el conjunto de instrucciones para

Crea una imagen de baja resolucin ( 256 colo r

Crea una imagen de alta resolucin.

Crea una imagen, hbrido entre .GIF y .JPEG

Un proyector es un archivo que contiene la pelcula Flash y el

archivo .exe (.app)

necesidad de tener Flash instalado.

Imgenes vectoriales y de mapa de bits

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Una imagen vectorial se compone de una o de unas cuantas trayectorias formadas

Cuando manipulamos una imagen de mapa de bits, en realidad modificamos las

Aunque la disposicin del entorno de trabajo puede personalizarse, la configuracin

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Estas 5 partes se pueden arrastrar y cambiar de ubicacin, dndote la posibilidad de adaptar el

Para situar correctamente los diferentes objetos de la pelcula en el escenario, nos

La cuadrcula es un conjunto de lneas verticales y horizontales que

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

los objetos. Podemos activar y desactivar la cuadrcula escogiendo la

La regla nos indica en pxeles la posicin y distancia entre los diferentes

cuadrcula, las guas

"atraer" a los objetos

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Podemos personalizar varias caractersticas del escenario a partir de la

Cambiar las dimensiones del escenario escribiendo los valores de

fondo para el escenario (el blanco es el color predeterminado) y para las

Escoger la velocidad a la que se reproducirn los fotogramas (por defecto

Adems, podemos conseguir que el escenario aparezca mayor o menor, segn

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

Una de las cosas fundamentales antes de comenzar es definir el tamao de la Hoja

Y en el momento de publicar nuestro trabajo, incluso tenemos la opcin de escoger

Docente: Ing. Melina Alfrez Garca

Instituto de Educacin Superior Tecnolgico Pblico Luis E. Valcrcel

La barra de Herramientas puede dividirse en 4 partes: seleccin, creacin,

Docente: Ing. Melina Alfrez Garca