flash mx clase 1

43
FLASH MX Animación para la web Animación para la web

Upload: raymond-marquina

Post on 18-Nov-2014

11.282 views

Category:

Technology


3 download

DESCRIPTION

Materiales del curso básico de animación con Flash MX.

TRANSCRIPT

Page 1: Flash Mx Clase 1

FLASH MX

Animación para la webAnimación para la web

Page 2: Flash Mx Clase 1

Curso Básico Flash MX

Instructor:

Raymond MarquinaProf. Escuela de Medios Audiovisuales / ULA

Prof. Maestría en Educación mención Informática y Diseño Instruccional

Coord. Área Tecnología Educativa / PAD - ULA

Correo electrónico:Correo electrónico:

[email protected]

[email protected]

Celular:

0416 - 7747870

Page 3: Flash Mx Clase 1

Curso Básico Flash MX

• Duración: 20 horas• Sesiones 4 horas/semana• Material:

http://www.meidi.ula.ve/raymond • Certificado:

• Asistencia: 80% asistencia• Aprobatorio: Entrega de Proyecto

• Formalizar inscripción en el curso:

Completar planilla de inscripción

Page 4: Flash Mx Clase 1

Curso Básico Flash MX

El curso comprende los siguientes tópicos:• Trabajo con herramientas de dibujo y pintura• Animación• Trabajo con biblioteca, símbolos e instancias• Captura y edición de sonido con Soundforge• Importación de contenidos a Flash MX• Optimización de películas • Principios básicos de ActionScripts

Page 5: Flash Mx Clase 1

Curso Básico Flash MX

Evaluación:• Se realizara un ejercicio evaluado el ultimo día del curso

• Se debe desarrollar un proyecto que comprenda todos los aspectos vistos en clases (animación, sonido, optimización y exportación)

• El archivo final debe compilarse a SWF y entregarse en conjunto con el fuente

• En caso de no entregar el proyecto, se le otorgara Certificado de Asistencia

Page 6: Flash Mx Clase 1

FLASH MX

Conceptos Básicos del Software

Page 7: Flash Mx Clase 1

• Es una herramienta estándar de amplio uso en la actualidad, para el diseño de sitios web de gran impacto.

• Es parte de la familia de productos Macromedia para el diseño web (Dreamweaver, Fireworks, Freehand...)

• Los proyectos desarrollados con Flash MX pueden ser completamente multimediales e interactivos, lo cual ha logrado que esta herramienta se use con frecuencia en el diseño web.

¿Que es Flash?

Page 8: Flash Mx Clase 1

¿Que es Flash?• Los archivos finales generados con Flash MX

para su distribución en la web, tienen como características principales:• Son de pequeño tamaño, por lo cual se

descargan rápidamente• Pueden contener audio y/o video• Pueden ser interactivos, gracias al uso del

lenguaje ActionScript

Page 9: Flash Mx Clase 1

Ver Archivos Flash

• Para visualizar un archivo Flash que se encuentre dentro de una pagina web, es necesario que el PC posea instalado el Flash Player (reproductor de contenidos Flash)

• El Flash Player es un Plugin que se añade al navegador y que es necesario para reproducir los contenidos en formato Flash

• La descarga del Flash Player es completamente gratuita y solo requiere conexión a internet

Page 10: Flash Mx Clase 1

Archivos Flash Ejecutables• Algunos archivos producidos con Flash MX,

pueden tener la extensión .EXE por lo cual no requieren del Flash Player.

• Estos archivos son de mayor tamaño que aquellos que se encuentran dentro de las paginas web, ya que el empaquetamiento como ejecutable les añade el visor de contenidos Flash.

Ver Archivos Flash

Page 11: Flash Mx Clase 1

Con Flash MX se pueden crear:• Software multimedia• Gráficos vectoriales• Logotipos animados• Barras de navegación• Animaciones de todo tipo con sonido• Aplicaciones en línea • Juegos

Caracteristicas de Flash MX

Page 12: Flash Mx Clase 1

Flash MX trabaja con herramientas de dibujo y pintura que generan Gráficos Vectoriales.

Flash MX es el software mas completo para el desarrollo de Animaciones y aplicaciones interactivas para la web

Flash Posee un lenguaje de programación orientado a objetos (POO), llamado ActionScript

Caracteristicas de Flash

Page 13: Flash Mx Clase 1

• Los proyectos que se desarrollan con la aplicación se denominan “Peliculas”

• Los archivos de proyecto de Flash que se guardan en el PC, poseen la extensión .FLA y están representados por un icono con el logotipo de Flash MX.

• Las películas que se usan en el diseño web, usan la extensión SWF.

Peliculas Flash

Page 14: Flash Mx Clase 1

• Para Microsoft® Windows: procesador Intel Pentium a 200 MHz o equivalente con Windows 98 SE, Windows ME, Windows NT 4.0, Windows 2000 o Windows XP, 64 MB de RAM (se recomiendan 128 MB), 85 MB de espacio disponible en disco; monitor en color de 16 bits con capacidad para una resolución de 1024 x 768 y una unidad de CD-ROM.

• Para Macintosh: Power Macintosh con Mac OS 9.1 (o posterior) o Mac OS X versión 10.1 (o posterior); 64 MB de memoria RAM libre para aplicaciones (se recomiendan 128 MB), más 85 MB de espacio libre en disco, monitor en color con capacidad de visualización en 16 bits (miles de colores) con una resolución de 1024 x 768 y una unidad de CD-ROM.

Requerimientos de instalación

Page 15: Flash Mx Clase 1

• Microsoft Windows 95, Windows 98, Windows ME, Windows NT 4.0, Windows 2000, Windows XP o posterior; o un Macintosh PowerPC con System 8.6 o posterior (incluido OS X 10.1 o posterior).

• El complemento (plugin) de Netscape que funcione con Netscape 4 (o posterior) en Windows, o con Netscape 4.5 (o posterior) o Internet Explorer 5.0 (o posterior) en Mac OS.

Instalación Flash Player

Page 16: Flash Mx Clase 1

• Flash MX• Swish Max• Mix FX• Swf Quick• AnFX• Swift 3D

Software de Desarrollo SWF

Page 17: Flash Mx Clase 1

Trabajar en Flash MX

Información General

Page 18: Flash Mx Clase 1

• Las películas producidas con Flash MX, pueden ser lineales o no lineales

• Las películas Lineales son todas aquellas en las cuales la reproducción se realiza de forma continua de principio a fin.

• Las películas No Lineales brindan la posibilidad al usuario de interactuar con el contenido,por medio de objetos como botones, menús y barras de navegación

Peliculas

Page 19: Flash Mx Clase 1

Pelicula Lineal

Escena 1 Escena 2 Escena 3

Page 20: Flash Mx Clase 1

1 2 3

E1 E2 E3

Escena Inicial

Pelicula No Lineal

Page 21: Flash Mx Clase 1

• Las películas Flash utilizan gráficos vectoriales compactos, para que se descarguen y se adapten rápidamente al tamaño de la pantalla del usuario.

Imagenes Vectoriales

Page 22: Flash Mx Clase 1

Las imágenes del tipo vectorial se representan con trazos geométricos, controlados por cálculos y fórmulas matemáticas, que toman algunos puntos de la imagen como referencia para construir el resto.

La principal ventaja de las imágenes vectoriales es su capacidad de almacenar los dibujos en un archivo muy compacto, ya que sólo se requiere la información necesaria para generar cada uno de los vectores. Los vectores pueden definir algunas propiedades de los objetos como el grosor de la línea o incluso el color de relleno de los objetos

Imagenes Vectoriales

Page 23: Flash Mx Clase 1

• Flash ofrece varios métodos tanto para crear ilustraciones originales como para importarlas desde otras aplicaciones.

• Se pueden crear objetos con las herramientas de dibujo y pintura, así como modificar los atributos de los objetos existentes

• También es posible importar gráficos vectoriales, gráficos de mapa de bits y video desde otras aplicaciones y modificarlos en Flash

Ilustraciones en Flash MX

Page 24: Flash Mx Clase 1

• Flash permite animar objetos para dar la impresión de que se mueven por el escenario, así como cambiar su forma, tamaño, color, opacidad, rotación y otras propiedades

• También se puede crear una animación fotograma a fotograma, creando una imagen diferente para cada fotograma.

• Otra posibilidad consiste en crear una animación interpolada, es decir, crear los fotogramas primero y último de una animación y dejar que Flash cree los fotogramas intermedios

Animación

Page 25: Flash Mx Clase 1

• Flash permite crear películas interactivas en las que los espectadores pueden utilizar el teclado o el ratón para pasar a diferentes partes de la película, mover objetos, introducir información en formularios y realizar muchas otras acciones

• Estas peliculas se crean mediante scripts de acciones usando el lenguaje de programación integrado de Flash: ActionScript

Peliculas Interactivas

Page 26: Flash Mx Clase 1

Los ActionScripts son cadenas de ordenes variables y funciones que se pueden asociar a un frame o a un objeto. ActionScript es un lenguaje conducido por eventos, esto significa que los Scripts (o sea las ordenes que le damos a Flash) se ejecutan cuando suceden una serie de eventos o sucesos.

ActionScripts

Page 27: Flash Mx Clase 1

Un concepto de vital importancia que debe tomarse en cuenta en todo momento en el diseño de películas Flash, es la optimización de los contenidos importados.La optimización se puede entender como la disminución al máximo del tamaño que ocupan en disco los archivos multimediales (entiéndase mapas de bits, audio y video) evitando en lo posible la perdida de calidad

Optimización de contenidos

Page 28: Flash Mx Clase 1

Recuerde que uno de los principales objetivos que se busca al desarrollar una película Flash para la web, es que la misma se pueda descargar en el menor tiempo posible, lo cual garantice que aquellos usuarios que posean conexiones lentas no tengan problemas en visualizar correctamente los contenidos

Optimización de contenidos

Page 29: Flash Mx Clase 1

Optimización de Fotografías:• El formato de mayor uso en la fotografía digital es el

JPEG (Joint Photographic Experts Group)• Este formato posee un algoritmo de compresión con

perdida, que disminuye el tamaño del archivo y como consecuencia la calidad de la imagen.

• Flash puede recomprimir los mapas de bits utilizando este algoritmo, el cual produce archivos finales de menor tamaño pero con menor calidad, por lo cual hay que tener mucho cuidado cuando se haga uso del mismo.

Optimización de contenidos

Page 30: Flash Mx Clase 1

Optimización de Sonido• El formato de mayor uso en las películas Flash es el

MPEG-2 Layer 3 o mejor conocido como MP3 debido a la alta compresión que le introduce a los archivos de audio.

• Los archivos de audio que se utilicen en el diseño de películas, deben capturarse, editarse, codificarse y exportarse con software especializado

• Flash MX brinda la posibilidad de recodificar al formato MP3 todos los sonidos digitales, en el momento de la exportación de película

Optimización de contenidos

Page 31: Flash Mx Clase 1

• Al igual que en un largometraje, las películas Flash dividen el tiempo en fotogramas. En el escenario se compone el contenido de los fotogramas individuales de la película, dibujando ilustraciones directamente o bien modificando ilustraciones importadas

El Escenario de Flash MX

Page 32: Flash Mx Clase 1

En el escenario se componen los fotogramas individuales de una película

El Escenario de Flash MX

Page 33: Flash Mx Clase 1

• Puede cambiar la visualización del escenario cambiando el grado de aumento/reducción, o moviendo el escenario dentro del entorno de trabajo de Flash.

• También puede ajustar la visualización del escenario mediante los comandos de visualización.

Herramientas de Visualización

Page 34: Flash Mx Clase 1

Cuadrícula, guías y reglas

Flash incluye reglas y guías que ayudan a dibujar y diseñar objetos de manera precisa. Es posible colocar guías en un documento y ajustar objetos a las mismas o activar la cuadrícula y ajustar objetos en ésta

Herramientas de Visualización

Page 35: Flash Mx Clase 1

Cuadricula

Para mostrar u ocultar la cuadrícula de dibujo:• Seleccione Ver > Cuadrícula > Mostrar

cuadrícula. Para activar y desactivar el ajuste a las líneas

de la cuadrícula:• Seleccione Ver > Cuadrícula > Ajustar a

cuadrícula. Para establecer preferencias para la cuadrícula:• Seleccione Ver > Cuadrícula > Editar

cuadrícula

Herramientas de Visualización

Page 36: Flash Mx Clase 1

Uso de las guías

• Si las reglas son visibles, puede arrastrar las guías horizontales y verticales de las reglas en el escenario.

• Puede mover, bloquear, ocultar y eliminar las guías.

• También puede ajustar objetos a las guías y cambiar el color de las guías y la tolerancia al ajuste (a qué distancia máxima deben estar los objetos para ajustarlos a una guía)

Herramientas de Visualización

Page 37: Flash Mx Clase 1

Uso de las reglas

• Si se muestran las reglas, éstas aparecen en la parte superior y a la izquierda del documento.

• Puede cambiar la unidad de medida que se utiliza en las reglas; la unidad predeterminada es píxeles.

• Al mover un elemento en el escenario con las reglas visibles, aparecerán unas líneas en las reglas indicando las dimensiones del elemento.

Herramientas de Visualización

Page 38: Flash Mx Clase 1

Creación de un documento nuevo• Cada vez que se abre Flash, la aplicación

crea un nuevo archivo con la extensión FLA. • Durante la sesión de trabajo es posible crear

otros documentos de Flash. • Para establecer el tamaño, la velocidad de

fotogramas, el color de fondo y otras propiedades de un documento nuevo, utilice el cuadro de diálogo Propiedades del documento.

Trabajo con Flash MX

Page 39: Flash Mx Clase 1

• Seleccione Archivo > Nuevo

• Elija Modificar > Documento

• En la sección Velocidad de fotogramas, introduzca el número de fotogramas de animación que deben mostrarse cada segundo. La mayoría de las animaciones que se ven en los equipos, especialmente las que se reproducen desde un sitio Web, no necesitan una velocidad superior a 8-12 fps (fotogramas por segundo). La velocidad de fotogramas predeterminada es de 12 fps.

Creación de un documento nuevo

Trabajo con Flash MX

Page 40: Flash Mx Clase 1

En Dimensiones, realice una de las acciones siguientes:

• Para especificar el tamaño del escenario en píxeles, introduzca los valores en los cuadros de texto Anchura y Altura.

• El tamaño predeterminado de la película es de 550 x 400 píxeles. El tamaño mínimo es de 1 x 1 píxel; el tamaño máximo es de 2.880 x 2.880 píxeles

Creación de un documento nuevo

Trabajo con Flash MX

Page 41: Flash Mx Clase 1

• Para establecer el color de fondo de la película, haga clic en el triángulo del cuadro Color de fondo y seleccione un color de la paleta.

• Para especificar la unidad de medida para las reglas que puede visualizar en la parte superior y lateral de la ventana de la aplicación, seleccione una opción del menú emergente situado en la esquina superior derecha

Creación de un documento nuevo

Trabajo con Flash MX

Page 42: Flash Mx Clase 1

• También puede abrir una plantilla como documento nuevo. Puede elegir entre varias plantillas estándar incluidas en Flash o abrir una plantilla guardada previamente.

Uso de Plantillas

Trabajo con Flash MX

Page 43: Flash Mx Clase 1

Fin de Primera Clase