UNIDAD DIDACTICA: PRACTICA

ANIMACION DE GRAFICOS LABORATORIO

OBJETIVO:



Iniciando y conocer el Entorno de Flash.
Configurar el entorno.
Uso de las herramientas de Flash.
01
¿QUÉ ES FLASH?

Flash Professional CS6 es una potente herramienta desarrollada por Adobe que ha
superado las mejores expectativas de sus creadores.
Flash fue creado con el objeto de realizar animaciones y diseños vistosos para la
web, y gráficos interactivos.
Los motivos que han convertido a Flash en el programa elegido por la mayoría de
los diseñadores web profesionales y aficionados son varios. Veamos pues, porque
es interesante Flash Pro CS6.
Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash y Adobe.

¿POR QUÉ USAR FLASH CS6?

Las posibilidades de Flash son extraordinarias, con cada nueva versión se han mejorado y
simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 1

Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo
sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores
web deberían saber utilizar Flash.
Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en falta en Internet:
Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite
crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no
estático. Con Flash podremos crear de modo fácil y rápido desde animaciones simples para
lograr algunos efectos visuales, hasta aplicaciones complejas, como juegos.
Además, sus desarrolladores están apostando muy fuerte por ActionScript, el lenguaje de
programación Flash. A cada versión se mejora y ofrece un abanico de posibilidades cada vez
mayor, por lo que además de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma
para aplicaciones web de un modo real.
Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y
horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el
preferido por los diseñadores profesionales.

NOVEDADES DE FLASH CS6

 Soporte para HTML5: Una nueva extensión (disponible por separado) permite crear
contenido HTML interactivo basándose en las animaciones básicas y en las funciones
de dibujo de Flash Professional. Es posible exportar como JavaScript para utilizar la
arquitectura de código abierto CreateJS.
 Generación de hojas de Sprite (Sprite sheet): Exporte sí-mbolos y secuencias de
animación para generar instantáneamente hojas de Sprite que mejoran la experiencia
lúdica, el flujo de trabajo y el rendimiento.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 2

  Compatibilidad amplia con plataformas y dispositivos: Llegue a dispositivos
Android e iOS concentrándose en los tiempos de ejecución más recientes de Adobe
Flash Player y AIR.
 Creación de aplicaciones con Adobe AIR preempaquetado: Cree y distribuya
aplicaciones con tiempos de ejecución cautivos de Adobe AIR preempaquetado. Agilice
las pruebas de las aplicaciones y permita que los usuarios finales ejecuten su contenido
sin realizar descargas adicionales.
 Simulación de dispositivos móviles de Adobe AIR: Simule interacciones comunes de
aplicaciones para dispositivos móviles como la orientación de la pantalla, los gestos
táctiles y el acelerómetro para acelerar las pruebas.
 Orientación a Stage 3D: Acelere el rendimiento de la presentación gráfica utilizando
el modo directo para aprovechar Starling Framework de código abierto para contenido
2D acelerado de hardware.
 Mejora de la herramienta huesos: Se han añadido propiedades de "muelle" a la
herramienta de cinemática inversa (IK). Con esto, se consiguen resultados mucho más
ágiles y realistas.

COSAS QUE SE PUEDEN HACER CON FLASH:

a) Creación de imágenes
Una de las aplicaciones a señalar es la posibilidad de exportar a cualquier parte una
animación creada con Flash a una imagen estática. Las extensiones en las que se puede
exportar desde Flash son: JPEG, GIF, PNG, PICT [Macintosh] y BMP.
b) Pixeles o vectores
El pixel es un elemento muy pequeño que compone las imágenes del mapa de bits,
también conocidas como bitmaps. Cada pixel contiene información con respecto al color
y a su posición en pantalla. Un mapa de bits es una matriz integrada por la ubicación de
pixeles, mediante coordenadas cartesianas [x, y] más su color. Al agrandar una imagen
de este tipo, se ve una cuadricula compuesta por puntos rectangulares de color, éstos
son los pixeles. Entre más pixeles haya por unidad de espacio, mayor es la calidad de la
imagen y el tamaño del archivo.
c) Documento de Flash
El documento creado por Flash está integrado por un documento padre, este permite
dibujar y componer una escena de animación. Después la película que se exporta permite
ser reproducida mediante el reproductor de Flash (Flash Player) o un reproductor de
video.
La extensión del documento padre es “.FLA”. La película exportada, el trabajo final
tiene la extensión “.SWF”. Algunos formatos de imágenes de mapa de bits son: BMP,
PSD, XCF, JPEG, GIF, TIF, PNG.

Un vector es un objeto digital definido de manera matemática. Los vectores se reúnen al

formar líneas y formas individuales. Estos gráficos se caracterizan por ser trabajables, ya
que no se ajustan a un número determinado de unidades fijas, sino a fórmulas matemáticas

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 3

 internas de formación del gráfico, de esta forma, se puede agrandar una imagen sin que
aumente el tamaño del archivo y sin perder definición.
Algunos formatos de imágenes de vectores son: CDR [Corel Draw], SWF [película Flash],
AI [Illustrator].
Algunos formatos de imágenes con información vectorizada y pixeles son:
PICT[Macintosh], WMF [Windows], PSP [Paint Shop Pro], EPS [Encapsulated Postcript],
PDF [Adobe Acrobat Reader], FLA [Flash].

PRESENTACIONES MULTIMEDIA

Son composiciones con imagen, sonido y video que pueden tener animación. Las
composiciones multimedia suelen contener scripts o pequeños programas que ejecutan distintos
eventos como: conexiones a internet, envió de correos electrónicos, chats, etc. Además de
Internet, Flash permite crear CDS multimedia, algo muy útil para armar catálogos de productos,
por ejemplo. Flash es capaz de incluir un reproductor, a fin de poder visualizar el contenido de
la animación, sin necesidad de poseer el programa Windows Media Player.
a) Animaciones:
Una animación es una secuencia integrada por varias imágenes que poseen cambios en
un lapso de tiempo determinado. En las animaciones se utiliza línea de tiempo, capas,
interpolación, etc.
b) Juegos:
Gracias al lenguaje Actionscript que viene incluido en el Adobe Flash, el rango de
posibilidades a la hora de realizar un juego o una aplicación interactiva es muy alto, ya
que lo único necesario es un conocimiento básico de programación. Flash ofrece varias
herramientas en el panel de edición Actionscript, así como la incorporación de acciones
automatizadas que simplifican notablemente los proyectos desarrollados.
c) Sitios Web:
Flash es ampliamente utilizado para desarrollar sitios web completos o partes de ellos.
Sin embargo, existe controversia por el uso del software web (medida de uso de un
determinado producto de forma efectiva, organizada, cómoda y de igual manera
escalable y compatible para el resto de tecnologías que lo rodean.) Usuarios que solicitan
el desarrollo de un sitio web con Flash, ignoran en la mayoría de los casos el concepto
de usabilidad, por lo que se puede caer en un abuso de contenidos. Los sitios web, las
presentaciones y las animaciones desarrolladas en Flash, son visualmente agradables.
Pero en ocasiones son muy pesadas o innecesarias (en el caso de las presentaciones)
para determinados usuarios, por eso, si se planea el desarrollo de un sitio web con Flash,
se debe tener en cuenta prioritariamente el público al que va dirigido, ya que no todos
los usuarios tienen la última versión de Flash Player en su navegador web o la conexión
de banda ancha requerida.
Una de las ventajas que ofrece Flash a un producto potente, es que los archivos
generados para la Web, son más livianos que otros tipos de animaciones, como, por
ejemplo, GIF.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 4

ENTORNO DE FLAS CS6

Flash es un sistema de entorno gráfico que nos permite elaborar animaciones de interfaces
gráficas de interacción multimedia.

Los elementos del espacio de trabajo de Flash son:

a) El escenario
Es un rectángulo blanco que representa la zona de visualización del contenido, todos los
objetos que se encuentran en esta zona, serán visibles en la presentación final del
contenido multimedia. La zona gris conocida como el tablero o cartón de trabajo, oculta
los objetos para que no se visualicen en el contenido final.
b) La línea de tiempo
Se encarga de controlar el flujo de animaciones en el trascurso del tiempo, utiliza una
combinación de capas y fotogramas para controlar las visualizaciones por medio de la
cabeza lectora, está es la encargada de indicar en qué posición se encuentra la línea de
tiempo y también permite visualizar el contenido disponible en los fotogramas, de
acuerdo a la posición. La línea de tiempo se conforma por:
1. Cabeza lectora.
2. Fotogramas.
3. Capas.
4. Botones papel cebolla.
5. Indicador fotograma actual.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 5

 6. Indicador velocidad fotograma.
7. Indicador tiempo trascurrido.
8. Crear capa.
9. Crear carpeta.
10. Eliminar.
11. Mostrar u ocultar.
12. Bloquear o desbloquear.
13. Mostrar contornos.

Entre los tipos de fotograma que usa la línea de tiempo, se encuentra el fotograma clave,
este representa elementos principales con características definidas; mientras que el
fotograma simple, es una extensión del fotograma clave que permite al elemento ser
ubicado en la línea de tiempo.

c) El panel de propiedades
También conocido como inspector de propiedades permite acceder a las configuraciones
y propiedades de los elementos de Flash Professional de una forma rápida. Las opciones
que se encuentran en el panel dependen del elemento que se seleccione, ya sea un objeto
de Flash o una herramienta. Para visualizar el panel de propiedades de forma rápida,
utilizar el teclado y presionar la combinación de teclas Ctrl más la tecla F3.
d) El panel de herramientas
Es el panel que contiene las herramientas para el diseño y retoque de los contenidos de
Flash Professional.

Herramientas Descripción

SELECCIÓN: permite seleccionar y modificar objetos.

SUBSELECCION: permite seleccionar y modificar nodos y vectores.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 6

 TRANSFORMACIÓN LIBRE: permite seleccionar, deformar, rotar y estirar los
objetos seleccionados.

TRANSFORMACIÓN DE RELLENO: permite editar los rellenos degradados.

3D: Para rotar objetos en 3d.

LAZO: Permite seleccionar objetos o parte de un objeto.

PLUMA: permite dibujar objetos mediante la creación de nodos.

Estas sub herramientas, nos sirven para añadir nodos en cada línea o quitarlas además
de convertir un nodo plano, en curvo, es decir, que nuestra línea recta será curva si
usamos esta herramienta.

TEXTO: permite agregar y seleccionar texto.

LINEA: Permite dibujar líneas.

Nos permiten crear figuras con relleno y contorno (línea).

LÁPIZ: Permite dibujar líneas a mano alzada.

PINCEL: Permite pintar trazos con diferentes tipos de punta.

CUBO DE PINTURA: Permite agregar relleno a contornos cerrados o semicerrados,

también permite cambiar el color de relleno de los objetos.
Bote de tinta: permite agregar nuevos contornos o cambiar el color del contorno de
los objetos.
CUENTAGOTAS: Permite obtener el color de relleno o de contorno de un objeto
para después aplicarlo a otro.
BORRADOR: Permite borrar parte de un relleno o de un contorno.

MANO: permite desplazarse por el escenario.

ZOOM: Permite acercarse o alejarse del escenario

COLOR DE TRAZO: Permite elegir un color para aplicar al contorno del objeto
seleccionado o al próximo objeto que se dibujara.
COLOR DE RELLENO: Permite elegir un color para aplicar al relleno del objeto
seleccionado o al próximo objeto que se dibujara.
BLANCO Y NEGRO: Aplica los colores blanco y negro.

INTERCAMBIAR COLORES: Intercambia los colores del color de trazo y el color

de relleno.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 7

 e) La barra de aplicación
Se encarga de almacenar la barra de menús, el menú de selección de área de trabajo, el
campo de búsqueda, menú de servicios CS live y botones del sistema (minimizar,
maximizar y cerrar).
f) La barra de documentos
Muestra las fichas o pestañas de los documentos que se están trabajando en Flash
Professional, junto con la barra de edición de cada documento.

PRINCIPALES DEFINICIONES

a) Fotograma:
Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto,
una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar
desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo
comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son
sus rasgos.
b) Fotograma clave:
Son fotogramas con un contenido específico, se crean para insertar en ellos un nuevo
contenido no existente en la película. Se identifican por tener un punto negro en el centro
y cuando esté vació se le diferencia por una línea negra vertical.
c) Símbolos:
Los Símbolos provienen de objetos
que hemos creado. Estos objetos al
ser transformados en símbolos, son
incluidos en una biblioteca en el
momento en que son creados, lo que
permite que sean utilizados en varias
ocasiones, ya sea en la misma o en otra película.
d) Capas:
Las capas en flash son los distintos niveles donde se disponen los objetos que estás
manipulando o programando. Los objetos que se encuentran en las capas superiores se
verán siempre encima de los que estén en capas inferiores, pero con efectos de aparición,
desaparición, transparencia o incluso programando colisiones podrás hacer que objetos
de distintas capas interacciones entre sí.
e) Interpolación:
Es la acción básica de las animaciones en
Flash. Permite desplazar un símbolo Flash
de un lugar a otro del escenario, siendo
necesarios únicamente dos fotogramas, lo
que optimiza mucho el rendimiento de la
película. Es importante destacar que para
que una Interpolación de movimiento se ejecute correctamente aquellos objetos que
intervengan deberán haber sido previamente convertidos a símbolo.

Docente: M.Sc. Henry, VARGAS CANCINO/2018-I 8