animacion de gráficos :)
TRANSCRIPT
-
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
-
8/16/2019 Animacion de Gráficos :)
2/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
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:
Docente: Ing. Melina Alférez García 2
-
8/16/2019 Animacion de Gráficos :)
3/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
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.
Docente: Ing. Melina Alférez García 3
-
8/16/2019 Animacion de Gráficos :)
4/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
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.
Docente: Ing. Melina Alférez García 4
-
8/16/2019 Animacion de Gráficos :)
5/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
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
Docente: Ing. Melina Alférez García 5
-
8/16/2019 Animacion de Gráficos :)
6/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
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:
Docente: Ing. Melina Alférez García 6
-
8/16/2019 Animacion de Gráficos :)
7/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
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
Docente: Ing. Melina Alférez García 7
-
8/16/2019 Animacion de Gráficos :)
8/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
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.
Docente: Ing. Melina Alférez García 8
-
8/16/2019 Animacion de Gráficos :)
9/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
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
Docente: Ing. Melina Alférez García 9
-
8/16/2019 Animacion de Gráficos :)
10/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
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
Docente: Ing. Melina Alférez García 1
-
8/16/2019 Animacion de Gráficos :)
11/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
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.
Docente: Ing. Melina Alférez García 11
-
8/16/2019 Animacion de Gráficos :)
12/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
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
Docente: Ing. Melina Alférez García 12
-
8/16/2019 Animacion de Gráficos :)
13/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
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
Docente: Ing. Melina Alférez García 13
-
8/16/2019 Animacion de Gráficos :)
14/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
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).
Docente: Ing. Melina Alférez García 14
-
8/16/2019 Animacion de Gráficos :)
15/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
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
-
8/16/2019 Animacion de Gráficos :)
16/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
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
Docente: Ing. Melina Alférez García 16
-
8/16/2019 Animacion de Gráficos :)
17/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
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
Docente: Ing. Melina Alférez García 17
-
8/16/2019 Animacion de Gráficos :)
18/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
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.
Docente: Ing. Melina Alf érez García 18
-
8/16/2019 Animacion de Gráficos :)
19/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
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
Docente: Ing. Melina Alférez García 19
-
8/16/2019 Animacion de Gráficos :)
20/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
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
Docente: Ing. Melina Alférez García 2
-
8/16/2019 Animacion de Gráficos :)
21/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
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.
Docente: Ing. Melina Alférez García 21
-
8/16/2019 Animacion de Gráficos :)
22/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
- 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
Docente: Ing. Melina Alférez García 22
-
8/16/2019 Animacion de Gráficos :)
23/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
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
Docente: Ing. Melina Alférez García 23
-
8/16/2019 Animacion de Gráficos :)
24/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
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.
Docente: Ing. Melina Alf érez García 24
-
8/16/2019 Animacion de Gráficos :)
25/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
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:
Docente: Ing. Melina Alf érez García 25
-
8/16/2019 Animacion de Gráficos :)
26/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
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.
Docente: Ing. Melina Alférez García 26
-
8/16/2019 Animacion de Gráficos :)
27/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
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
Docente: Ing. Melina Alférez García 27
-
8/16/2019 Animacion de Gráficos :)
28/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
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
Docente: Ing. Melina Alférez García 28
-
8/16/2019 Animacion de Gráficos :)
29/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
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.
Docente: Ing. Melina Alférez García 29
-
8/16/2019 Animacion de Gráficos :)
30/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
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.
Docente: Ing. Melina Alférez García 3
-
8/16/2019 Animacion de Gráficos :)
31/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
“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.
Docente: Ing. Melina Alférez García 31
-
8/16/2019 Animacion de Gráficos :)
32/40
Cerrar huecos
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
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
Docente: Ing. Melina Alférez García 32
-
8/16/2019 Animacion de Gráficos :)
33/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
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.
Docente: Ing. Melina Alférez García 33
-
8/16/2019 Animacion de Gráficos :)
34/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
Docente: Ing. Melina Alférez García 34
-
8/16/2019 Animacion de Gráficos :)
35/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
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.
Docente: Ing. Melina Alférez García 35
-
8/16/2019 Animacion de Gráficos :)
36/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
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
Docente: Ing. Melina Alférez García 36
-
8/16/2019 Animacion de Gráficos :)
37/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
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.
Docente: Ing. Melina Alférez García 37
-
8/16/2019 Animacion de Gráficos :)
38/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
Docente: Ing. Melina Alférez García 38
-
8/16/2019 Animacion de Gráficos :)
39/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
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
Docente: Ing. Melina Alférez García 39
-
8/16/2019 Animacion de Gráficos :)
40/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