Animacion de Gráficos :)

8/16/2019 Animacion de Gráficos :)

1/40

Instituto de Educación Superior Tecnológico Público “Luis E. Valcárcel”Carrera Profesional Coputación e Inforática!nidad "idáctica# $%I&$CI'% "E ()*+IC,S

MANEJO DE CONCEPTOS PARA LA ANIMACIÓN

TEMA: INTRODUCCIÓN

Objetivo

Lograr que los estudiantes conozcan y se familiaricen con el área de trabajo y las

herramientas del programa Adobe Flash.

Objetivo Específico

- Que el estudiante conozca la interfaz del programa.

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

Contenido

¿Qué es Flash?

Características de Flash

Archivos y requisitos para ver películas realizadas en Flash

Imágenes vectoriales y de mapa de bits

Entorno de Flash

El escenario

Cuadro de propiedades

Barra de herramientas

Selección

Creación

Transformación

Visualización

Colores

Opciones

Paneles

Mezclador de colores

Alineamiento

Info Transformar

Docente: Ing. Melina Alférez García 1


2/40


Muestra de color

Componentes

Escena

Biblioteca

Concepto de línea de tiempo

Capas

ENTORNO DE FLASH ¿Qué

es Flash?

Flash es una aplicación informática producida por la empresa de software

norteamericana Macromedia, que se utiliza principalmente para la generación de

páginas web animadas e interactivas.

Combina en un solo producto una potente herramienta de animación y diseño con un

entorno de programación para aplicaciones multimedia interactivas. De esta forma, es

posible obtener lo mejor de ambos mundos, creando programas que incluyen

animaciones y elementos gráficos que contienen comportamientos interactivos.

Esta es una característica que lo hace único pero que también precisa una formación

amplia. El desarrollador de Flash se desenvuelve en un entorno que es a la vez diseño

y programación, arte y técnica.

Características de Flash

Flash se ha convertido en el estándar, de hecho, para la producción y visualización de

contenidos dinámicos e interactivos en línea (conectados a Internet), gracias a

características como las siguientes:



3/40


Se puede utilizar tanto para la producción de elementos animados e interactivos que

se integran dentro de una página web como para generar sitios completos. En ambos

casos, el uso de Flash permite incrementar la espectacularidad y riqueza interactiva

de nuestra web.

La utilización de Flash es relativamente sencilla. Con poco tiempo de aprendizaje

podemos llegar a crear elementos animados e interactivos básicos y gracias a la ayuda

de su entorno de trabajo visual, resulta accesible llegar a niveles más 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 películas 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 películas Flash se descargan rápidamente en el ordenador del usuario, ya que,

aunque se incorporen elementos complejos, conservan unos tamaños relativamente

modestos. Además, las películas Flash se pueden empezar a ver aunque no se hayan

descargado totalmente (tecnología de flujo o streaming).

La incorporación de elementos interactivos es muy sencilla con Flash. Por ejemplo,

podemos conseguir que determinados objetos de nuestra película reaccionen a las

acciones del usuario, o también, podemos construir formularios atractivos para pedir

información.

La creación de animaciones complejas: objetos que cambian de posición, de color, de

forma o, incluso, que se convierten en otros objetos, resulta muy fácil con Flash.



4/40


Gracias a la organización de los documentos siguiendo la metáfora de una película,

con su línea temporal y su sistema de animación interpolada, crear contenidos

dinámicos es sencillo y divertido. Con Flash es posible crear animaciones mediante

programación y, por lo tanto, que cambian cada vez que se ejecutan.

Para que nuestra web sea más espectacular, podemos incorporar fácilmente en una

película Flash elementos multimedia como imágenes, sonido y vídeo, incluso ficheros

externos, sincronizados o no con las animaciones.

Flash está preparado para gestionar contenido multimedia dinámico. Con él se pueden

crear no sólo webs, sino también pequeñas aplicaciones, como chats, servicios de

noticias, bancos de imágenes o de vídeo y, por supuesto, juegos.

Flash dispone de un sistema de bibliotecas que permite reutilizar los elementos de una

película dentro de la misma película o en otra, aprovechando al máximo el trabajo del

diseñador.

Archivos y requisitos para ver películas realizadas en Flash

Las películas producidas con Flash se almacenan en dos tipos de archivo:

Los archivos con la extensión.fla: se generan cuando guardamos nuestro trabajo con

Flash y contienen la película en formato original, de tal manera que podemos

modificarla.

Cuando hacemos doble clic, estos archivos abren la aplicación.

Los archivos con la extensión.swf: contienen la película 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 película como producto final, no la fuente original.



5/40


Estos archivos no permiten modificar las películas, sólo permiten visualizarlas.

Tipos de archivos.FLA Este tipo de archivos contiene el desarrollo de la película sin compilar,

es decir permite visualizar cómo está hecha la película y editarla en la

aplicación de Flash.

.SWF Es el archivo que contiene la película compilada y que utilizaremos para

su publicación en Internet o medio digital. Para poder visualizar este

archivo se necesita la utilidad “reproductor de flash” que viene por

defecto en la aplicación y que se puede descargar de modo gratuito de la

red. Este formato no permite editar la película 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 resolución ( 256 colo r

rápida.

es ) pero de descarga

.JPEG Crea una imagen de alta resolución.

.PNG Crea una imagen, híbrido entre .GIF y .JPEG

Proyector

de

Win y Mac

Un proyector es un archivo que contiene la

reproductor todo junto. El resultado es un

película Flash y el

archivo.exe(.app)

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

película Flash desde Internet (en formato .swf) y pueda verla sin problemas en su

ordenador, el navegador que utilice debe tener preinstalado un pequeño complemento,

llamado plug-in, específico para la detección e interpretación de archivos con extensión

.swf.

Imágenes vectoriales y de mapa de bits



6/40


Una película realizada con Flash se compone, entre otros elementos, de un conjunto de

objetos gráficos, de imágenes. En general, una imagen digital puede ser de dos tipos:

vectorial o de mapa de bits.

Unaimagen vectorial se compone de una o de unas cuantas trayectorias formadas

por líneas y curvas. Estas trayectorias forman contornos y delimitan áreas, y todos

estos elementos pueden presentar un color o textura concretos.

Lasimágenes de mapa de bits están definidas por puntos llamados píxeles. Lospíxeles se organizan en un entramado de filas y columnas, tienen una ubicación

específica dentro de la imagen (sus coordenadas de fila y columna) y un código que

especifica su color.

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

características de los píxeles 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 aplicación Flash, formado por

el espacio donde se construye la película y por el conjunto de herramientas que lo

hacen posible.

Sus elementos básicos son el escenario, la línea temporal y los conjuntos de paneles.

Aunque la disposición del entorno de trabajo puede personalizarse, la configuración

que presenta por defecto es la siguiente:



7/40


Estas 5 partes se pueden arrastrar ycambiar de ubicación, dándote la posibilidad de adaptar el

entorno como a ti más te guste. Además, estos elementos se pueden minimizar, haciendo clic sobre

el nombre de cada uno.

El escenario

El escenario es el espacio donde se desarrolla la película Flash, donde tenemos los

diferentes objetos (imágenes, texto, animaciones, sonido, etc.) que forman parte de la

misma. Por defecto, las dimensiones del escenario son 550 píxeles de ancho por 400

de altura (unos19 × 14 centímetros).

Para situar correctamente los diferentes objetos de la película en el escenario, nos

puede ser de gran ayuda visualizar la cuadrícula, la regla y las guías.

- Lacuadrículaes un conjunto de líneas verticales y horizontales que

dividen el escenario en porciones cuadradas. La cuadrícula no aparece

en la versión publicada de la película, pero nos ayuda a alinear y colocar



8/40


los objetos. Podemos activar y desactivar la cuadrícula escogiendo la

opciónMostrar cuadrícula, dentro de Cuadrícula del menú Ver. Si la

opción Ajustar cuadrículaestá seleccionada, los objetos que movamosen el escenario tenderán a situarse con su punto de registro sobre las

líneas de la cuadrícula, como si la línea "atrajese" al objeto. Esta opción

es muy útil para alinear y ordenar los objetos automáticamente. También

podemos editar las propiedades de la cuadrícula con la opción

'Ver/Cuadrícula/Editar cuadrícula y cambiar su aspecto (distancia entre

líneas, color de las líneas, etc.).

- Lareglanos indica en píxeles la posición y distancia entre los diferentes

objetos dentro del escenario. Podemos activar la regla horizontal y

vertical escogiendo la opciónReglasdel menú Ver.

- Lasguíasson líneas que podemos colocar en el escenario que tienen

como finalidad ser el punto de referencia al situar los diferentes objetos.

Para insertar una guía horizontal, hacemos clic en la regla vertical y la

arrastramos hacia el escenario, situando la guía en el lugar que nos

interese. Para insertar una guía vertical, el procedimiento es el mismo,

pero haciendo clic en

la regla horizontal. De

forma similar a la

cuadrícula, las guías

también pueden

"atraer" a los objetos

próximos si activamos

la opción

Ver/Guías/Ajuste a las

guías.

También podemos cambiar las propiedades de las guías (color, tolerancia del

ajuste, etc.) con Ver/Guías/Editar Guías.



9/40


Podemos personalizar varias características del escenario a partir de la

ventana de propiedades del documento. Se puede acceder a esta ventana a

partir de la opciónDocumento 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 película, tenemos que hacer clic en el botón Coincidir

contenidos.

- Cambiar la unidad de

medida de la regla, que

puede ser, entre otros,

píxeles, centímetros o

pulgadas.

- Escoger un color de

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

líneas de la regla (el gris, por defecto).

- Escoger la velocidad a la que se reproducirán los fotogramas (por defecto

12 por segundo).

Además, podemos conseguir que el escenario aparezca mayor o menor, según

si nos interesa tener una visión general o una visión detallada de una parte.

Esto es posible gracias a la función Zoom.

Cuadro de propiedades



10/40


Una de las cosas fundamentales antes de comenzar esdefinir el tamaño de la Hoja

de Trabajo. Aunque se puede setear más adelante, es recomendable saber de

antemano en qué dimensiones vamos a trabajar.

En el cuadro de Propiedades, verás la opción de Tamaño. Ingresa allí las dimensiones

que quieras. También puedes cambiar el color de fondo, desde la opciónFondoo la

velocidad, eligiendo la cantidad deFotogramas por segundo.

Y en el momento de publicar nuestro trabajo, incluso tenemos la opción de escoger

entre varios formatos de publicación Pero lo mejor del cuadro de Propiedades es quese

va modificando según lo que selecciones. En este caso, estaba únicamente la hoja

de trabajo vacía y por eso se indica – del lado izquierdo, al costado del logo de Flash –

que se trata de unDocumento, que por ahora no tiene nombre. Ahora crearemos un

círculo con la herramienta de círculo (barra de Herramientas). Siseleccionamosel

círculo, vemos que el cuadro de Propiedades nos muestra información sobre esta

nueva forma:

Ahora puedes ver datos de la forma: sus dimensiones –ancho y alto–, su posicióndentro de la mesa de trabajo –X, Y–, el color de borde, el color de la forma, el grosor de

borde y el tipo de línea de borde. Todas estasespecificaciones pueden ser cambiadas

ahí mismo, en el cuadro de Propiedades. Más adelante veremos otros usos de este

elemento Flash.

Barra de Herramientas



11/40


La barra de Herramientas puede dividirse en 4 partes:selección,creación,

transformación, visualización,color y otras opciones. Antes de ver estas

herramientas, debes saber que en Flash trabajamos con dos tipos de elementos: depíxel y vectoriales. Las herramientas de esta barra sirven para manipular y crear estos

elementos.

Selección

Laflecha negra nos permite seleccionar objetos enteros, sobre todo aquellos

elementos de píxel, 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, deberás

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.



12/40


Laflecha blanca selecciona vectores, moviéndolos o borrándolos. Nos permite

cambiar la forma de un objeto vectorial.

Ellazo se usa para seleccionar elementos de píxel, tanto para borrarlos como

para editarlos.

Creación

La línea nos permite crearlíneas rectas. Para eso se debe

hacer clic en un punto de la hoja. Mantén presionado el mouse

y mueve el puntero para ver cómo se genera la línea. Deja de

cliquear cuando hayas obtenido la línea que deseas. Si una

sucesión de líneas generan una forma cerrada, esta forma

pasará a ser unobjeto y podrá rellenarse con color, permitiendo además otras

opciones de edición.

La plumasirve paracrear 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

diseño.

Lasherramientas de óvalo yrectángulo generan formas

cerradas. Manteniendo presionada la tecla Shift del teclado, podrás crear círculos

o cuadrados perfectos. De lo contrario, podrás lograr las dimensiones quequieras, seleccionando el objeto y modificando sus medidas en el cuadro de

Propiedades.

Ellápiz y elpincel son muy parecidos. Con estas herramientas podemos crear

líneas a mano alzada. Como ves en la imagen, mientras que el lápiz genera una

línea de borde, el pincel genera relleno y es un objeto en sí mismo. Si el trazo del



13/40


lápiz se une en un punto, se convertirá en una forma que podrás rellenar. Al

trazo de pincel es una forma llena a la que podemos darle borde.

Dentro de esta barra de Herramientas está la opción deFuente, para

insertar texto. Hay un capítulo más adelante sobre el tratamiento de

tipografías en Flash, sin embargo podrás darte cuenta lo fácil que es incluir texto

con este programa: sólo debes seleccionar la herramienta y hacer clic en alguna

sección de la hoja de trabajo. Escribe lo que quieras. Luego podrásmover orotar

lacaja de texto. Para editar el texto, tienes varias opciones en el cuadro de

Propiedades.

Transformación

La herramienta de Transformaciónes una de las más importantes porque nos

permiterotar ymodificar las dimensionesde cualquier objeto. Sólo haz clic en

la herramienta y luego sobre el objeto u

objetos que quieras modificar. La

herramienta deGradientese usa paraeditar

gradientes, no para generarlos. Se selecciona

la herramienta y se hace clic sobre el objeto que se quiera modificar. Podrás

modificar las dimensiones del gradiente (la distancia entre un color y otro), la

posición y el ángulo.

ElBote de tinta y elCubo de pinturacumplen la función de colorear. El Bote de

tinta colorea bordes; el Cubo de pintura colorea rellenos.

ElGoterosirve paratomar 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



14/40


nos gusta. El color quedará seleccionado y lo podrás usar en la creación de un

objeto nuevo o para colorear uno que ya existe. ¡Atención: no funciona con

gradientes!

ElBorrador 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. También se puede elegir borrar selectivamente: sólo relleno, sólo

borde, sólo elementos seleccionados, etc.

Visualización

Lamanote dejadesplazarte por la pantallaa gusto y piacere. Pruébalo, pero no

hace falta recurrir a la barra de herramientas: presionando la barra

espaciadorase habilita la opción de mano. Es una herramienta muy

útil para trabajar en un espacio amplio.

LaLupate permiteampliarla pantalla en el sector que quieras. Sin embargo, se

utiliza un atajo de la lupa que agiliza mucho el trabajo: presionando

CTRL+BARRA ESPACIADORA visualizarás la lupa automáticamente en su

versión de ampliar. Haz clic sobre la pantalla en el punto que quieras ampliar.

Para ampliar más, haz otro clic. Si quieres reducir el zoom, haz lo mismo, sólo

que esta vez deberás presionarCTRL+ ALT+BARRA ESPACIADORA.

Colores

Desde el sector deColoresmodificamos elcolor de relleno y de bordede

cualquier objeto (lápiz para borde, cubo de pintura para relleno).

También puedesinvertirestos colores (la opción de las flechas):

pasando a estar el del borde para el de relleno y al revés. El programa

cuenta concolores predeterminados: borde negro y relleno azul (la opción de

los cuadraditos blanco y negro).



15/40


Opciones

En el sector de opciones, se muestran opciones sobre las diferentesherramientas que vamos seleccionado. Es bueno prestar

atención 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 disposición una serie de paneles para trabajar con

color, alineamiento, transformaciones y escenas, además de obtener

información sobre los objetos. Si sabemos usar estas herramientas, podremos

sacar mayor provecho del programa. Además de los paneles, veremos cómo

utilizar la biblioteca: un espacio para almacenar imágenes, objetos y símbolos,

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 diseño.

Mezclador de colores

En este panel encontraremos prácticamente las mismas opciones de color que en

la barra de Herramientas. La diferencia reside en laelección de los colores a

través de numeración.

Docente: Ing. Melina Alf érez García 15


16/40


A la derecha vemos 4casilleros con números.

Los primeros tres, con el valor 255 son los que

definen elcolor RGB(Red, Green, Blue), que eneste 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, elporcentaje de Alfase refiere al valor detransparenciaquetendrá el color.

Alfa 100% es sólido, mientras que un valor del 0% es completamente

transparente. Si trabajas concolores web, también 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 paraalinearlos

con respecto a la mesa de trabajo: centrar

algo perfectamente en la hoja.

Para alinear dos o más objetos debes primer

seleccionarlos y luego elegir la opción del panel que prefieras. Si lo haces con

respecto a la mesa de trabajo, selecciona el objeto solo y asegúrate que esté

seleccionada la opciónEn Escena.

Info



17/40


El panel de Info es super útil para

obtener información sobre

los objetos que estamos

manipulando. En el ejemplo podemos ver un cuadrado común. En el panel se

muestra información sobre el color (R204, V255, A51 - Alfa: 100%), la posición

dentro de la mesa de trabajo (X:334.9, Y:377.4) y las dimensiones (41.3 x 41.3

píxeles).

Transformar

La opción de Transformar es muy

parecida a la transformación que se

consigue a través de la barra de

Herramientas, sólo que esta vez es mucho más precisa, a través 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 número). La opción de sesgar se deduce del dibujo explicativo

en el panel.

Por otra parte hay dos mini-botones en la parte inferior derecha. El botón de la

izquierda repite la última acción que se haya realizado. En este caso, repite la

reducción 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



18/40


Para ahorrar tiempo en la elección de los colores que uso, tengo siempre en

cuenta el muestrario de color. Este muestrario se puede ampliar con nuevas

muestras.

Además, los colores se pueden ordenar y se pueden añadir 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 estén en uso. Debajo del muestrario de color hay un

mini-muestrario de gradientes, que puedes elegir como base y después editar.

Componentes

Los Componentes son elementos Flash, como

botones, menúes expandibles y scroll bars.

Este panel ofrece componentes estándar para

utilizarlos de base y no tener que crearlos desde cero. Estos

componentes se pueden editar para personalizarlos.

Escena

Así como en unapelícula, las animaciones en

Flash estándivididas en Escenas. En el panel

de Escena vemos ellistado 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 paracrear una nueva escena vacía. El

tercero –y es obvio– es para borrar las escenas. El orden de las escenas se puede

modificar seleccionándolas y arrastrándolas con el mouse.



19/40


Biblioteca

La Biblioteca es una parte fundamental de Adobe Flash. Aquí quedan

almacenados los elementosque luego explicaremos en futuras clases: símbolos,

películas, botones, etc.

En la biblioteca vas a ver unlistadocon todos los elementos, símbolos. Pueden

estar a su vez organizados encarpetas. Estos símbolos son únicos. En el caso

del ejemplo, elSímbolo 3se corresponde al texto que dice “flash”. En el visor dela biblioteca vemos el elemento original. Al costado vemos el mismo símbolo

modificado. Sin embargo, lasúnicas modificacionesque pueden hacerse tienen

que ver con ladimensión, posición y ángulo. Cualquier modificación de color o

forma que sufra el símbolo,se modificará en el símbolo de la biblioteca. Si yo

hubiera modificado el color del “flash” grande, lo hubiera hecho también con el

pequeño. No así si deseo ampliar o reducir el elemento. Si queremos realizar

cambios en un elementosin cambiar el original de la biblioteca, entonces

debemosduplicar este símbolo. Selecciona el símbolo y haz clic en elmenú

(debajo de la cruz de cierre de la ventana). EscogeDuplicar.

Concepto de línea de tiempo

El manejo del tiempo se basa en una Línea de Tiempo. Así como una hora está dividida

en minutos y segundos,nuestra Línea de Tiempo se divide en Fotogramas. La línea



20/40


es siempre infinita, pero la animación va a finalizar en el último fotograma “lleno”, el

último que contenga información.

La unidad de medida esFotogramas por Segundo (fps) y es un valor que se puede

modificar, aunque lo más común es utilizar12 fps. Como se ve en la imagen, la Línea

de Tiempo presentafotogramas blancos y grises. Los grises se disponen cada 5

fotogramas como una ayuda para contabilizar mejor estos fotogramas a la hora de

crear la animación.

Capas

Como complemento de nuestra Línea de Tiempo están las Capas. Su principal

función es organizativa. Supongamos que creo un círculo en elprimer

fotogramade la Capa 1. Luegocreo una animaciónde ese círculo, aumentando

su tamaño hasta duplicarlo definitivamente en elfotograma 10.Del fotograma 1

al fotograma 10 tengo la animación de mi círculo. Supongamos que al mismo

tiempo quiero crear un círculo al lado y también animarlo. En ese caso,no



21/40


pueden superponerse más de una animación en la misma capa, por eso tengo

que crear el segundo círculo en unacapa nueva.

Cada objeto debe estar en su propia capa. Y ojo que cuando de objetos puede ser

una combinación de elementos: si mi círculo es un sol en un paisaje y es lo único

que va a tener animación, podemoscrear todo en la misma capa. Pero más allá

de situaciones como esta, no es conveniente ahorrar en capas, todo lo contrario.

Cuando más capas tengamos, más organizado estará nuestro trabajo. En el

listado de capas, al lado de cada

una podemos ver el Estado de la

capa:

- Ojo: Tildando esta opción podemos

ocultar o mostrar la capa.

- Candado:Esta opción nos permite bloquear una capa. Esto significa que

no

podremos realizar ninguna modificación a los objetos de la capa.

- Marco:Cuando la opción 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 guía de capa:El elemento “guía de capa” lo veremos más adelante.



22/40


- 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, guías y carpetas y todo su contenido.

El orden de las capas está relacionado con suposición virtual en el espacio.La

capa inferior del listado se encontrará “detrás” de las otras capas. Podemos

ver en las imágenes de los círculos, que el círculo mayor, en la capa 1,está

detrásdel círculo menor de la capa 2. Para poder comprender más estos

conceptos, es bueno que practiques generando figuras en distintas capas,

probando la superposición, 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 combinación de

tecladoControl + F3, se

encuentra la información

actual del documento, como la velocidad del fotograma por

segundo reproducido en las secuencias además, 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 mayoría de pantallas,

la resolución es de 1024*768, eso no quiere decir que el documento debe ser de ese

tamaño, ya que en realidad al publicar este espacio será menor.

TEMA: CREACIÓN DE DIBUJOS



23/40


Objetivo

Lograr que los estudiantes desarrollen su conocimiento en Adobe Flash con

el uso de las formas de dibujo básicas del programa: Trazos y rellenos

Objetivo Específico

- Que el estudiante sea capaz reconocer las diferencias entre gráficos vectoriales y

gráficos de mapas de bits.

- Que los alumnos reconozcan las diferencias, ventajas y desventajas de los trazos y

rellenos.

Contenido

Dibujos de formas básicas.

Gráficos vectoriales vs bitmaps

Trazos y rellenos

Combinación y dibujo de objetos

Degradados de color

Dibujo Combinado

DIBUJO DE FORMAS BÁSICAS



24/40


Gráficos vectoriales vs bitmaps¿Qué

es un gráfico vectorial?

Un gráfico vectorial es un tipo de gráfico que contiene información matemática de

forma, posición, color y tamaño para ser dibujado o representado por la computadora.

Como los gráficos vectoriales solo constan de información, suelen ser archivos de poco

tamaño que se pueden descargar rápidamente y que pueden escalarse a cualquier

tamaño sin pérdida de calidad.

¿Qué es mapa de bits?Un mapa de bits o Bitmap es un gráfico representado por una malla de pixeles cuya

cantidad en dicha malla determina la calidad de la imagen. Dependiendo del número

de pixeles, estas imágenes pueden ocupar mucho espacio en el archivo y al ser

escalados a tamaños superiores -o incluso inferiores- suelen perder calidad.

Los sistemas informáticos muestran las imágenes en formato de vectores o mapa de

bits.

Gráficos vectoriales:

Describen las imágenes mediante líneas y curvas, denominadas vectores, que

incluyen propiedades de color y posición. Ejemplo.



25/40


Gráficos de mapas de bits:

Están compuestos por puntos de color, denominados pixeles, organizados en una

cuadrícula. Ejemplo:

Flash puede trabajar con ambos tipos de gráficos: Crea nativamente gráficos

vectoriales y puede importar mapas de bits. Sin embargo, siempre hay que tomar en

cuenta que los bitmaps añaden peso al archivo y que importar demasiados puede

sobrecargar la animación y por ende la capacidad de la computadora para mover esos

gráficos o añadirles efectos especiales.

Trazos y rellenos

Flash nos permite crear formas de dos tipos: Trazos (o líneas) y rellenos. Podríamos

considerar los trazos como el contorno de una figura y los rellenos como el color

dentro de ese contorno; sin embargo, como veremos más adelante, esto no es del todo

cierto puesto que también podemos utilizar las herramientas de relleno para crearcontornos. Lo importante es aprender a usar ambos tipos de formas de acuerdo a qué

queramos diseñar y cuál sea nuestro estilo de dibujo. Para poder identificar estas

herramientas podemos prestar atención a la figura 1:



26/40


La herramienta de líneas nos permite precisamente eso: crear líneas rectas que

pueden unirse o no con otras. La herramienta de lápiz también puede crear líneas

pero nos da más libertad para crear figuras con líneas rectas o curvas. La herramienta

de pincel nos permite dibujar con la misma libertad que el lápiz pero haciendo uso de

rellenos. También tenemos herramientas que combinan el uso de ambos tipos de

dibujo para la creación de figuras geométricas: rectángulo, ó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.



27/40


Dibujo Combinado

Además 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 parafusionarse 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 separación.

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



28/40


rectángulo 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. Además, los

dibujos de objeto mantienen las mismas posibilidades de edición 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 atención al modificador

“Dibujo de objeto” de las herramientas de dibujo que estemos utilizando. Tanto para

las figuras geométricas 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 geométricas óvalo y rectángulo) y la agrupación de objetos (para cualquier

objeto) Las formas simples las podemos encontrar dentro de las herramientas de óvalo

y rectángulo. Funcionan prácticamente igual que los dibujos de objeto, con la

diferencia de que nos permiten alterar algunas características del objeto incluso

después de haberlo creado. Por ejemplo, si en dibujo de objeto queremos crear un



29/40


rectángulo cuyas esquinas estén redondeadas, es necesario especificar esta

característica en el inspector de propiedades antes de dibujar el rectángulo en el

escenario. De otro modo, una vez dibujado el rectángulo, no podremos alterar esta

característica en ese objeto. En cambio, si dibujamos el mismo rectángulo con la forma

simple, podremos modificar esta característica en el panel de propiedades cada vez que

seleccionemos el objeto. Tenemos ejemplos de esto en las figuras 5 y 6.

La última opción para encapsular un objeto es agrupándolo. Esto se logra

seleccionando el objeto y luegopresionando 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 (eneste 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 razón queremos eliminar cualquiera de los encapsulamientos

que hemos visto (Dibujo de objeto, dibujo simple, grupos) Basta con presionarCtrl+B

o en menú-->modificar-->separar.



30/40


Modificadores de lápiz y pincel

El modificador del lápiz de flash sirve para tratar de ayudarnos a corregir un poco las

líneas o curvas irregulares que dibujemos en el escenario (El tamaño del lápiz se

configura en el panel de propiedades). Si seleccionamos el lápiz y luego damos click a

su modificador veremostres posibles opciones:Enderezar, suavizar y tinta. Las

primeras dos opciones nos proveen de ayuda para convertir trazos irregulares en

formas más estables, mientras que la opción tinta deja sin modificaciones cualquier

trazo que hayamos creado. Esta ayuda, por supuesto, solo corrige irregularidades

pequeñas y la mejor forma de entender esto es poniendo a prueba el modificador, como

en la figura 8. El pincel, por otro lado, tiene más opciones de modificación, como

podemos ver en la figura 9. Además de poder crear dibujos de objeto, tenemos un

modificador para trabajar colores en degradados (que veremos más adelante), otro

para cambiar tamaño y forma del pincel y uno más 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 afectarán otros

rellenos en el escenario, pero respetarán cualquier trazo o línea que encuentren a su

paso.



31/40


“Pintar detrás” colocará cualquier figura hecha con este modo detrás o debajo de

otros dibujos en el escenario, sean rellenos o sean trazos. “Pintar selección” dejará

que las nuevas figuras solamente afecten los rellenos que hayan sido seleccionadospreviamente (con la herramienta de selección). Los rellenos no seleccionados no

sufrirán ninguna alteración.“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.



32/40

Cerrar huecos


El bote de pintura posee también un modificador muy importante que sirve para

cerrar algunos espacios que pudieran haber quedado en un diseño 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



33/40


tamaños de hueco que el modificador puede cerrar. Hay que tomar en cuenta que

incluso con la opción“cerrar huecos grandes” siempre habrá espacios demasiado

grandes como para que Flash intérprete que ahí debe hacer algún cierre.Degradados de color

Además de poderseleccionar colores sólidos para rellenar con el bote de pintura, es

posible aplicar colores en degradado. Esta opción se encuentra dentro de las muestras

que se presentan al darle click al bote de pintura y luego en el recuadro de selección

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 también con cualquier figura geométrica (óvalo,

rectángulo, polystar) que se vaya a crear. Podemos controlar la dirección y extensiones

de color de un degradado utilizando la “herramienta de trasformación de

degradado” que se encuentra oculta bajo la“herramienta de transformación libre”.

Seleccionamos el degradado que queremos manipular y veremos los con - troles que

nos proporciona Flash para esa tarea.

Por otro lado, también es posible crear degradados personalizados dentro de la

pestaña“color”. Si seleccionamos un degradado, esta pestaña nos mostrará una

barra horizontal con los colores que ya posee el degradado y aquí mismo podremos

cambiar, eliminar o añadir 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 pestaña también podemos elegir entre dos opciones de

degradado: lineal y circular, además 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.



34/40




35/40


EJERCICIO 02

TRAZOS

TIP 01: Cuando tenemos la herramienta de selección activada y acercamos el cursor a

la esquina o extremo de untrazo, el cursor mostrará dos líneas en ángulo recto en su

parteinferior, 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 pequeña curva, esto significa que podemos convertir una línea recta en

curva o modificar una curva ya creada. Ejemplo verlo en la figura 14.



36/40


Con la figura 15 de referencia, usa laherramienta de lápiz y trata de dibujar el

mismo paisaje (no coloree todavía). El tamaño del trazo debe ser de 2.00 y el color

negro. Hacer uso de los modificadores cuando sea necesario para suavizar o estabilizar

tus líneas. No es necesario que tu dibujo sea idéntico 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 visión sobre ellos. Aunque también

podemos darles un color temporal para diferenciarlos más fácilmente, hay que



37/40


recordar que podemos utilizar la opción “capas como contornos” para distinguirlos

más rápidamente. Para esto, hay que darle un click al ícono de las capas que parece

un pequeño rectángulo de color, esto cambiará la vista de cualquier objeto al interior

de la capa automáticamente a una figura como de alambre. También 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 opción es agrupar aquellos dibujos

que ya hayamos terminado antes de iniciar los siguientes. Dado que estaremos

creando muchas líneas individuales, no es conveniente usar el dibujo de objeto.

TIP 03: A veces los objetos quedan torcidos o necesitamos cambiarlos de tamaño. Para

hacer esto podemos usar la “herramienta de transformación libre”. Primero,

seleccionamos el objeto (un click en una línea selecciona la línea hasta el primer punto

de unión con otra, dos clicks seleccionan todas las líneas unidas) y luego activamos la

herramienta detransformación 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 deimagen en el cursor nos indicará lo uno o lo otro, figura

17.

TIP 04: Cuando sedibuja con el lápiz o con laherramienta de línea, es más sencillo

crear un objeto encima de otro y luego borrar las líneas que sobren. Para esto, basta

con seleccionar aquellas líneas que no formen parte del diseño y luego presionar la

tecla Suprimir (o Delete) en el teclado, tal como se aprecia en la figura 18.



38/40




39/40


EJERCICIO 03

COLOREAR

Una vez finalizado el diseño 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

más te gusten. Sin embargo, lo que sí tienes que tener en cuenta es que el cielo debetener un degradado radial de tres colores, las montañas un degradado lineal de dos

colores y el suelo también un degradado lineal de dos colores. Tampoco deben quedar

espacios sin pintar.

Ejercicios propuestos



40/40


Documents

Animacion de Gráficos :)