manual flash 6to semestre 1ra version publicar

SUBMODULO II PRODUCCION DE ANIMACIONES CON ELEMENTOS MULTIMEDIA.

[email protected] Página 1

ADOBE® FLASH ® CS5

Apuntes y Trabajos

M en NTI Mireya Isela Rodríguez Orozco

M en I. Juan Alfonso Guzmán Zavala.

Nombre del Alumno:

Plantel:

Grado/Grupo/Turno.



Avisos leg ales

Apuntes y Trabajos

Para la Capacitación

SUBMODULO II PRODUCCION DE ANIMACIONES

CON ELEMENTOS MULTIMEDIA.

M en NTI Mireya Isela Rodríguez Orozco

M en I. Juan Alfonso Guzmán Zavala.

Documentos seleccionados solo con fines educativos.



Introducción

Flash CS5 es una potente herramienta que nos permite crear diferente tipo de

contenido, como por ejemplo gráficos vectoriales, animaciones, recursos

interactivos, aplicaciones multimedia, juegos, etc.

En esta guía comenzaremos conociendo las herramientas de edición gráfica,

para después adentrarnos en las diferentes herramientas de animación que

ofrece Flash CS5, como por ejemplo el editor de movimiento, la animación de

huesos y las herramientas 3D. También añadiremos sonido a nuestras

animaciones.

Objetivo

El alumno al finalizar será capaz de realizar películas flash de uso cotidiano en el

diseño web: banners, presentaciones animadas, películas interactivas, etc.

Además de incluir utilidades multimedia como sonido y vídeo.



Tabla de contenido Bloque I : Manipular las funciones de las barras y paneles. ............................................................................. 7

Entorno de trabajo ........................................................................................................................................ 7

1. Identifica la barra de herramientas principal. .................................................................................................... 8

Barra de Menús. ..................................................................................................................................... 9

El Escenario ...........................................................................................................................................10

La ventana de Línea de Tiempo..............................................................................................................12

Propiedades de la película .....................................................................................................................13

Dimensiones de la película ....................................................................................................................14

2.- Utilizar la ventana de herramientas principal. ......................................................................................................15

Guardar el espacio de trabajo ................................................................................................................16

Para guardar una configuración de pantalla seguimos estos pasos. ........................................................17

3.- Utiliza barra de herramientas, de control y de edición y maneja los diferentes paneles. .......................17

Cuadrícula .............................................................................................................................................18

Encajar ..................................................................................................................................................18

Acerca de las imágenes de vectores y mapas de bits ..............................................................................19

Imágenes de vectores ............................................................................................................................19

Imágenes de mapa de bits .....................................................................................................................19

Diferentes tipos de Archivos .fla y .swf ...................................................................................................20

Abrir un documento. .............................................................................................................................21

Trabajar con varios documentos. ...........................................................................................................21

Pre visualización y prueba de películas ..................................................................................................22

Resumen ...............................................................................................................................................22

Bloque II : Utilizar la ventana de herramientas principal. ...............................................................................24

1. Desarrollar habilidades y destrezas en el uso de herramientas principales: ........................................24

Introducción ..........................................................................................................................................24

Línea .....................................................................................................................................................25

Lápiz ......................................................................................................................................................25

Propiedades del contorno .....................................................................................................................26



Pincel. ...................................................................................................................................................27

La herramienta Pluma ...........................................................................................................................30

Óvalos ...................................................................................................................................................31

Rectángulos ...........................................................................................................................................34

Polígonos/Estrellas ................................................................................................................................35

Selector de color ...................................................................................................................................36

Crear un color personalizado. ................................................................................................................37

Crear un color desde el Mezclador de color ...........................................................................................38

Colores alfa, Colores transparentes .......................................................................................................39

Bote de pintura. ....................................................................................................................................40

Bote de Tinta. ........................................................................................................................................41

Ayudas: Cuentagotas, lupa y mano. .......................................................................................................42

Cuentagotas. .........................................................................................................................................42

Lupa. .....................................................................................................................................................42

Crear un degradado. ..............................................................................................................................43

Aplicar un degradado. ...........................................................................................................................44

Transformar un degradado. ...................................................................................................................45

RESUMEN ..............................................................................................................................................47

Capas ....................................................................................................................................................51

Creación de capas ..................................................................................................................................51

Para crear una capa: ..............................................................................................................................51

Representación de animaciones en la línea de tiempo ...........................................................................51

Edición de capas ....................................................................................................................................52

Animación .............................................................................................................................................53

Distinción de las animaciones en la línea de tiempo ..................................................................................53

Previsualización y prueba de películas ...........................................................................................................53

Para crear una capa de mascarilla ..........................................................................................................54

Uso de capas de guías ............................................................................................................................54

Guías de movimiento .............................................................................................................................54

Bloque III: Crear símbolos y bibliotecas. ........................................................................................................64

Los símbolos ..........................................................................................................................................64



Creación de símbolos.............................................................................................................................64

Para crear un símbolo nuevo con elementos seleccionados: ..................................................................64

Las Bibliotecas .......................................................................................................................................66

Diferencia entre símbolo e instancia ......................................................................................................67

Bloque IV: Aplicar animación al dibujo. ..........................................................................................................72

Aspectos básicos de animaciones ..........................................................................................................72

Ejercicios ...............................................................................................................................................73

Interpolación de movimiento I : el vuelo de un águila ............................................................................73

Interpolación de de forma (cambio de color): ........................................................................................75

Animaciones fotograma a fotograma .....................................................................................................76

Interpolación de movimiento utilizando capa guía (clásica) ...................................................................76

Bloque V: Manipular botones. .......................................................................................................................85

Crear y manipula los aspectos del botón (reposo, sobre, presionado, zona activa). .............................................................85

Aplicar acciones y eventos del ratón y el teclado........................................................................................88

Botones de texto. La importancia de la zona activa ................................................................................89

Incluir un clip en un botón .....................................................................................................................89

Crear botones invisibles y de varias capas..................................................................................................90

Bitmaps y Botones .................................................................................................................................90

Auto Evaluación del Bloque. ..................................................................................................................92

Bloque VI: Manipular sonido. ........................................................................................................................95

Editar Sonidos .......................................................................................................................................99

Auto Evaluación: ..................................................................................................................................103

Bloque VII: Manipular vídeo. .......................................................................................................................106

Ejercicio ...............................................................................................................................................109

AUTO EVALUACIÓN .............................................................................................................................115

Bloque VIII: Publicar película. ......................................................................................................................119

AUTO EVALUACIÓN. ............................................................................................................................122



Bloque I : Manipular las funciones de las barras y paneles.

Entorno de trabajo Al iniciar el programa aparece en el centro de la pantalla una ventana de bienvenida. Esta ventana siempre va a aparecer al

iniciar el programa. Ofrece información sobre el programa y posibilidades de inicio ya predeterminadas.

Los espacios de trabajo de las distintas aplicaciones de Adobe® Creative Suite® 5 tienen la misma apariencia para facilitar e l

cambio de una a otra. Además, si lo prefiere, puede adaptar cada aplicación a su modo de trabajar seleccionando uno de los

varios espacios de trabajo preestablecidos o creando otro personalizado.

Aunque el diseño del espacio de trabajo predeterminado varía en función del producto, los elementos se manipulan de

manera muy parecida en todos los casos.



Identifica la barra de herramientas principal. Pero la interfaz de Flash sólo se activa al abrir un documento:



Barra de Menús.

Como en cualquier otro programa, en la parte superior de la pantalla se desarrolla la Barra de Menús:

ARCHIVO: Junto con el menú de Edición, es un menú común en cualquier programa.

Nos permite manejar el flujo de trabajo con los diferentes archivos. Desde menú abriremos los

documentos de trabajo, los guardaremos y los publicaremos.

EDICIÓN: Al igual que en otros programas, desde este menú podremos realizar acciones de gestión y

desplazamiento (Copiar, Cortar, Pegar...).

VER: Se facilita el trabajo en la creación de una película Flash desde el punto de vista de cómo ver el área

de trabajo. Incluye las opciones de ayuda al dibujo, como son las Reglas o la Cuadrícula.

INSERTAR: hace referencia a todos los componentes que se pueden ir incluyendo en una película Flash;

desde los símbolos, los fotogramas con diferentes cualidades o las escenas de que se compone la película

final (es uno de los más usados).

MODIFICAR: Desde este menú podremos alterar cualquier componente de la película... incluso la película

en sí misma (es uno de los más usados).

TEXTO: Nos permitirá controlar los diversos atributos aplicados al texto (no lo usaremos mucho).

COMANDOS: Este nuevo menú administra la ejecución de acciones preprogramadas llamadas comandos.

(En este curso no lo usaremos).

CONTROL: Rige la reproducción de la animación. Más que este menú usaremos la barra de herramientas

de mismo nombre que veremos más adelante.

VENTANA: Este menú gobierna la visualización y organización de toda la interfaz del programa. Desde

aquí puedes visualizar y ocultar cualquier panel o barra de herramientas que desees.

AYUDA: Como cualquier otro por grama flash incluye un menú de ayuda.

Al contrario de lo que ocurre en otros programas, la ayuda de Flash es realmente una ayuda muy útil

cuando estamos perdidos o queremos introducirnos en el conocimiento de alguna parcela del programa.



El Escenario

Una película de Flash, se divide en frames. Es en el escenario donde se visualizan y componen los

frames individuales de la película, mediante su dibujo o con la organización de ilustraciones

importadas.



La ventana de Línea de Tiempo

Es donde se coordina el tiempo de la animación y se ensambla la ilustración en distintas capas.

La ventana de línea de tiempo muestra todos los frames de la película. Las capas actúan como

una pila de acetato transparente; mantienen la ilustración por separado, de forma que puedan

combinarse distintos elementos en una imagen.



Propiedades de la película

Antes de comenzar a realizar una película tenemos que acostumbrarnos a determinar sus características generales.

Para ello vamos al menú MODIFICAR > DOCUMENTO, mostrándose un cuadro con las "propiedades " de la

película.

a) Para la velocidad de frame´s, introduce en Frame

Rate el número de frames de animación que deben

mostrarse cada segundo. La mayoría de las animaciones

que se visualizan en los sistemas locales, especialmente

las que se reproducen desde un sitio Web, no necesitan

una velocidad mayor de 8 a 12 fps (frames por segundo).

b) Para el tamaño, usa una de las siguientes opciones:

c) Para especificar el tamaño en pixeles, introduce en

Dimensions valores de anchura y altura. El tamaño de

película predeterminado es de 550 por 400 pixeles. El

tamaño mínimo es de 18 por 18 pixeles; el máximo es de

2880 por 2880 pixeles.

d) Para establecer el tamaño del escenario de forma que el espacio que rodea el contenido sea igual en todos los

lados, haz Click en Match: Contents.

e) Para establecer el tamaño del escenario con la mayor área de impresión posible, haz Click en Match: Printer.

El área de impresión la determina el tamaño de papel que esté seleccionado en el área de Márgenes del

cuadro de diálogo Configurar página, menos los márgenes establecidos.

f) Para establecer el color de fondo de la película, escoge un color en la muestra de colores de Fondo.

g) Selecciona la unidad de medida en la opción Ruler Units.

Estas propiedades se pueden variar también en cualquier momento a lo largo del trabajo con la película... y de una

forma más rápida desde el Panel de Propiedades. Basta con hacer clic en una zona vacía del área de trabajo, es decir,

no tener ningún objeto seleccionado:

NOTA: Un Frame es una unidad gráfica que almacena en un instante por, una porción de una escena, o bien el cuadro

por segundo de una película.



Dimensiones de la película

En este campo se establecen las dimensiones de la película en anchura y altura de la ventana escenario.

Podemos hacer películas que ocupen desde toda la pantalla del ordenador hasta pequeños "banners" de publicidad

para colocar en las páginas Web, o aplicaciones para pantallas de móviles.

En la parte inferior del cuadro hay una opción en la que podemos elegir en qué unidades de regla queremos establecer

el tamaño de la película. Es importante acostumbrarse a trabajar en píxeles, ya que afectará a varias opciones del

programa (la unidad estándar en multimedia y páginas Web es el píxel).

Las dimensiones de la película son, rigurosamente hablando, las dimensiones del escenario.

EL TAMAÑO NO IMPORTA ... IMPORTA EL INTERIOR

Una película flash no ocupará más bytes por tener un gran tamaño en píxel, sino por la complejidad de los elementos que coloquemos en la animación.

Es posible que ocupe más un pequeño banner con sonido que una gran animación a pantalla completa con vectores simples.



Utilizar la ventana de herramientas principal.



TRUCO: CON LOS PANELES

Podemos crearnos nuevos Paneles e incluso agrupar unas determinadas solapas en un panel u otro. Para

incluir una solapa en un determinado panel actuaremos como sigue:

1. Seleccionamos la solapa que queremos incluir en otro panel.

2. Pulsamos sobre el icono que aparece en la esquina superior derecha de cada panel.

3. Del menú que se despliega elegimos la opción Agrupar "nombre de solapa"con... y elegimos el panel en el cual se agrupará.

4. Si queremos crear un panel elegiremos la opción Nuevo grupo de paneles.

Haciendo clic sobre el icono de la esquina superior derecha del panel, aparecen todas las opciones de configuración del mismo.

Guardar el espacio de trabajo

Por último, cuando ya nos hemos configurado la pantalla a nuestro gusto; visibles los paneles y barras que nos

interesan, colocados en el lugar que nos es más cómodo... Podemos guardar esta configuración para usarla

cuando deseemos.

O podemos guardarnos varias configuraciones de pantalla según el trabajo que hagamos: edición de gráficos,

Configuración de componentes o programación actionscript.



Para guardar una configuración de pantalla seguimos estos pasos.

1. Elegimos la opción de menú Ventana > Conjunto de Paneles > Guardar disposición de paneles

2. En el cuadro que aparece le damos un nombre a esa configuración de pantalla... y pulsamos Aceptar.

3. Desde esa opción del menú ventana podemos gestionar estas configuraciones de pantalla:

Utiliza barra de herramientas, de control y de edición y maneja los diferentes

paneles.

Uso de la paleta de herramientas

Las herramientas de la paleta de herramientas permiten dibujar, seleccionar, pintar y

modificar ilustraciones. Otras herramientas permiten cambiar la visualización del

escenario. La mayoría de las herramientas cuentan con modificadores auxiliares para las

tareas de pintado o edición. Dentro de este Panel las herramientas se organizan por

grupos:

1. El primer grupo nos ofrece las diferentes herramientas con que contamos para

crear y modificar cualquier dibujo en el área de trabajo.

En este caso se ve activada la herramienta de Selección y Movimiento (esquina

superior izquierda).

2. Éstas son las herramientas de ayuda para la visualización del área de trabajo.

3. Éste es el controlador de color de Flash. Dividido en el color de Contorno y de

Relleno.

4. Al final del panel aparecerán las opciones de la herramienta que tengamos

activada.

En este caso las opciones de la herramienta de Selección y Movimiento.

NOTA: Para utilizar cualquiera de las herramientas del panel seguiremos los pasos

siguientes:

1. Picamos en la herramienta que queremos utilizar o bien tecleamos el carácter del

teclado de la herramienta.

2. Movemos el cursor a la escena y utilizamos la herramienta.



Cuadrícula

Para visualizar la cuadrícula en la escena, debemos dirigirnos al menú Ver>Cuadrícula>Mostrar cuadrícula.

Desde la misma opción de menú podemos Editar la cuadrícula para que sea del tamaño que nosotros deseemos.

Encajar

Localizada en la barra de herramientas principal, la herramienta Encajar (...Imán para los amigos) funciona de dos

formas:

En primer lugar, si está activada la cuadrícula y ejecutamos la opción de menú Ver > Ajustar a cuadrícula... actuará

como un imán de manera que al dibujar o editar, el cursor saltará forzándose a tomar puntos de esa cuadrícula.

En segundo lugar, también actúa sobre los objetos de forma que al dibujar rectas se bloquean sobre los puntos

finales o medios de las rectas.

Cuando deseemos dibujar de forma libre desactivamos esta opción, ya que en ocasiones también puede dificultar

el dibujo libre de siluetas.

Otra herramienta de ayuda al dibujo son las "reglas", que también se pueden habilitar desde el menú ver. El uso

de las reglas es sólo una ayuda visual para controlar las dimensiones en píxeles de nuestro dibujo.

TRUCO: ¡OCULTOS!

En algunos momentos es interesante ocultar todos los paneles momentáneamente para ver mejor lo que estamos dibujando en el escenario.

Pulsando la tecla F4 podemos ocular y volver a visualizar todos los paneles de un plumazo.



Acerca de las imágenes de vectores y mapas de bits

Los sistemas muestran imágenes en formato de vectores o de mapa de bits. Es muy importante comprender la

diferencia entre ambos formatos para poder utilizarlos de la forma más eficaz. Flash permite crear y animar imágenes

de vectores compactas. También permite importar y manipular imágenes de mapa de bits creadas en otras

aplicaciones.

Imágenes de vectores

Los elementos gráficos de vectores representan imágenes mediante líneas y curvas, denominadas vectores, y tienen

propiedades de color y posición.

Cuando se edita una imagen de vectores, se modifican las propiedades de las líneas y curvas que definen su forma. La

posición, el tamaño, la forma y el color de las imágenes de vectores puede cambiarse sin que por ello pierdan calidad.

Las imágenes de vectores no dependen de la resolución, de pantalla, es decir se trabajan a cualquier resolución; sin

embargo si dependen de la resolución del periférico de salida.

Imágenes de mapa de bits

Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color, denominados pixeles, que están organizados en una cuadrícula. Un mapa de bits que representa una imagen bitmap se representa mediante el

valor específico de posición y color de cada píxel en la cuadrícula, que crea una imagen similar a la de un mosaico.

La visualización de un mapa de bits depende de la resolución de pantalla; es decir que si se escala o visualiza a una

resolución mayor de la estipulada, nuestra imagen se verá distorsionada y por consiguiente perderá calidad visual.



Diferentes tipos de Archivos .fla y .swf

En el proceso de trabajo con Flash se ven involucrados diferentes tipos de archivos, pero explicar aquí todos ellos

puede resultar un poco confuso. Nos centraremos principalmente en dos de ellos:

.Fla: Archivo de trabajo

Este archivo es el que necesitamos para trabajar, dibujar, animar, hacer modificaciones... en la película. Es la

extensión con la que se guarda el archivo cuando estamos trabajando.

Así, podemos abrirlo, editarlo y trabajar con él, y restaurar con él los demás tipos de archivo. No es el archivo que se

publica en Internet.

.Swf: archivo resultante

Se caracteriza porque sólo es la visualización resultante de la película. No nos permitirá modificarla.

Por eso tiene un tamaño muy reducido; motivo por el que Flash ha alcanzado tanta popularidad en la creación de

animaciones dirigidas para Internet.

Es el archivo que genera la película optimizada preparada para ser reproducida, y puede ser visto por cualquier

persona que cuente con un Navegador de Internet y el plug-in Reproductor Flash (o Flash Player). El público no

puede editar este tipo de archivo, sólo puede verlo.

En resumen, el archivo .FLA es el ORIGEN y el archivo .SWF es el RESULTADO. Más adelante veremos que este

archivo flash puede producir muchos tipos de archivo, lo que da versatilidad a este programa.

Teniendo el .fla de una película podemos hacer con ella lo que deseemos.



Abrir un documento.

Como en cualquier otro programa, para abrir un archivo los pasos son los siguientes:

Elegimos la opción de menú Archivo > Abrir... (o pulsamos el icono de la barra de Herramientas principal)

En el cuadro que aparece localizamos en la estructura de nuestro ordenador el archivo .fla en el que queremos

trabajar.

Lo seleccionamos y pulsamos Abrir.

Trabajar con varios documentos.

Flash tiene la posibilidad de trabajar al mismo tiempo con más de un archivo abierto.

Para organizarnos nos ofrece una fácil navegación por solapas por encima del panel de Línea de tiempo.

Ejemplo, aquí vemos que están abiertos 3

documentos. Se está trabajando en el

archivo WESTERN.fla (la solapa está

activada). El documento Sin título-4 es un

documento que se ha creado nuevo, por eso

no tiene nombre.

TRUCO: MÁS RÁPIDO Y CÓMODO

Si pulsamos con el botón derecho del ratón sobre estas solapas de los documentos abiertos podemos acceder a opciones rápidas:

Las opciones de Guardar todo..., Cerrar todo... son interesantes para guardar y cerrar todos los archivos abiertos de un plumazo¡¡¡



Pre visualización y prueba de películas

Cuando estemos trabajando en un archivo .FLA nos interesará probar periódicamente la película y ver el resultado

de lo que vamos consiguiendo.

Hay dos formas de probar la película:

1. Desde el mismo programa

Para ello basta con elegir la opción de menú Control > Probar Película... o mucho más rápido, con el comando de

teclado Control+Intro.

En este caso no salimos del programa para ver el resultado, es decir, el archivo .SWF que se abre en una ventana

flotante (en versiones anteriores se abre la ventana a pantalla completa):

2. Probarla en el navegador

Ya que un gran volumen de trabajo de Flash va dirigido a la web se nos da la posibilidad de ver la película

resultante inscrita en una página web que reproducirá el navegador que tengamos predeterminado.

Para ver la película en el navegador basta elegir la opción de menú Archivo > Vista previa de la publicación >

Predeterminado, o, lo que es más rápido, pulsar la tecla F12.

En los dos casos, lo que ha

hecho Flash es producir a

partir del documento .FLA los

archivos necesarios para

visualizar el resultado:.

Resumen

Esta primera lección es un poco teórica pero es necesaria para asentar conceptos que por lo básicos que son tienen

mucha importancia. Además, al utilizarlos repetidamente a lo largo de las lecciones nos acostumbraremos a ellos

rápidamente.

• Flash combina la creación de animaciones en 2D con aplicaciones para la interactividad con el espectador.

• Esta interactividad se basa en la programación Actionscript, que veremos, pero en menor medida que las utilidades de

animación.



• La pantalla de Flash es mejor verla en resoluciones amplias... y se compone de Paneles que contienen Solapas.

• El área de trabajo se compone del ESCENARIO (la zona visible y real de la película) y el área de trabajo (fuera del

escenario, que no se ve pero puede albergar objetos).

• El archivo de trabajo de flash son los .fla

• Para probar el resultado de nuestro trabajo con el .FLA podemos:

1. Pulsar Control+Intro: se produce el archivo resultante .SWF

2. Pulsar F12: se produce el archivo resultante .SWF y la página web para que la reproduzca el navegador.

Módulo II: Software de diseño Submódulo II: Generar animación con aplicaciones multimedia

OBSERVACIONES

Evidencia por desempeño: Las funciones de las barras y paneles manipuladas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En un software de animación manipula las funciones de las barras y paneles siguiendo las instrucciones planteadas por el docente

SI NO

1. ¿Utilizó la barra de herramientas principal para el diseño de objetos? 2. ¿Empleó los elementos de la caja de herramientas? 3. ¿Aplicó comandos de la barra de control? 4. ¿Utilizó las opciones de la barra de edición? 5. ¿Empleó el panel de propiedades para establecer parámetros de los objetos dibujados? 6. ¿Manejó los elementos del panel de pantallas? 7. ¿Alineó las formas dibujadas mediante el panel alineación permitiendo la claridad y compresión del diseño de la animación (orden)? 8. ¿Aplicó los rellenos de color a las formas dibujadas con el panel mezclador de colores permitiendo la distinción clara de cada objeto de la película (orden)? 9. ¿Igualó colores utilizando las opciones del panel muestra de color? 10. ¿Modificó la ubicación de los objetos en el escenario mediante el panel información clarificando el diseño general de la animación (orden)? 11. ¿Manipuló la película a través de las opciones del panel escenas para obtener claridad en la presentación del diseño de la animación (orden)?

EVALUÓ (NOMBRE Y FIRMA)

LUGAR Y FECHA DE

APLICACIÓN



Bloque II : Utilizar la ventana de herramientas principal.

1. Desarrollar habilidades y destrezas en el uso de herramientas principales:

Introducción

En el tema anterior ya comentamos que, Macromedia Flash es un programa de animación de gráficos (aunque no

debemos olvidarnos de las imágenes de mapa de bits).

En este capítulo estudiaremos las diferentes herramientas de dibujo a partir de las cuales generaremos nuestras

películas.

Junto con el tema siguiente "Edición de formas" completaremos las posibilidades de dibujo y su modificación en

flash.

Al empezar a dibujar es mejor que nos restrinjamos a las formas geométricas simples y podremos conseguir

composiciones elegantes.

Para los que ya hayan usado otro programa de dibujo vectorial (Freehand, Illustrator, etc.):

Veremos que la base es la misma, incluso tenemos la posibilidad de trabajar el trazado de forma detallada para

hacer dibujos muy elaborados. También se notará como Flash concibe las opciones de dibujo como algo más

intuitivo y rápido, pero con unas breves nociones podremos controlar lo que al principio puede parece un

despropósito.

Debemos quedarnos con la idea según la cual cuando dibujamos objetos en Flash se generan vectores (también

llamados formas) correspondientes a las curvas y rectas que trazamos.

Las formas que dibujamos con Flash se clasifican en dos tipos, los contornos que forman las siluetas de los objetos

y los rellenos de color con los que pintamos el interior de dichas siluetas.

El tamaño (en bytes) de una película de flash

aumentará a medida que la complejidad de las

curvas que trazamos sea mayor (tenga mayor

número de puntos y líneas), no por el tamaño que

dichas curvas ocupen dentro de nuestra película. Por

lo tanto si dibujamos un círculo esa película ocupará

lo mismo tanto si ese círculo es pequeño o grande.



Línea

Vamos a ver primero las herramientas para crear SÓLO CONTORNOS.

Empezaremos con la herramienta de línea

Para dibujar rectas realizamos los siguientes pasos:

Picamos en la herramienta Línea del panel de Herramientas.

ANTES DE DIBUJAR: Definimos los atributos del trazo del lápiz en el panel Propiedades.

Pulsamos y arrastramos en la dirección que debería seguir la línea.

Soltamos el botón del ratón donde queramos que ésta termine.

Si activamos esta opción de la barra Principal, el IMÁN, al dibujar líneas el punto inicial o el

final se nos ajustará, se nos imantará, a cualquier referencia que haya en el área de trabajo:

la cuadrícula, una guía o cualquier otra línea o forma que haya dibujado antes.

Lápiz

La herramienta lápiz permite dibujar SÓLO CONTORNOS a partir de trazos realizados a

mano alzada.

Además del color grosor y tipo de línea con que dibujamos (desde el panel Propiedades),

podemos elegir el método de ajuste de los trazos dibujados.

¡¡¡ÁNGULOS PERFECTOS!!!

Si mientras arrastramos se mantiene presionada la TECLA MAYÚSCULA se dibujan rectas horizontales, verticales y oblicuas de 45°.



El método para dibujar con el lápiz sería éste:

Activamos la herramienta Lápiz en el panel Herramientas.

Especificamos los valores del dibujo en el panel Propiedades.

Elegimos un MODO de LÁPIZ y dibujamos en el área de trabajo.

¿Qué es eso del Modo de Lápiz?

Son diferentes opciones de la herramienta de Lápiz para facilitarnos el dibujo a los que no tenemos manos de

artista... y a los demás también. Están localizados al final del panel de Herramientas. Al activar la herramienta

Lápiz.

Enderezar: terminado el trazado a mano alzada, ajusta el trazado definitivo a tramos de línea y arcos (se aproxima poco al

trazado original en el caso de emplear pocos trazos rectos). Es útil cuando queremos que el resultado de nuestro dibujo sea

recto.

Suavizar: terminado el trazado a mano alzada, ajusta el trazado definitivo con curvas blandas, lo que da al dibujo un

resultado más suavizado. Parece que perfecciona nuestro dibujo. Ésta es una opción adecuada cuando queremos dibujar

cualquier objeto o figura que no sea geométrico.

Tinta: es el método más fiel al dibujo que hagamos arrastrando el Lápiz, por lo que depende mucho de la destreza que

tengamos con el ratón o el Lápiz gráfico. Por esta razón quizás sea el método menos usado de los tres.

Propiedades del contorno

Ya sea usando la herramienta de Línea o el del Lápiz estamos consiguiendo contornos. Al activar cualquiera de las dos

herramientas podemos seleccionar las características de ese contorno desde el panel de Propiedades.

Éstas son las más

importantes:



Se añadieron nuevas propiedades que vienen de editores de dibujos vectoriales más potentes como Freehand:

Extremo y Unión.

Estas propiedades serán más visibles cuanto más grosor tenga el contorno al que se refieren.

Extremo: determina el aspecto de los vértices finales del contorno.

Pincel.

Si la herramienta de Lápiz SÓLO dibuja contornos... la herramienta de PINCEL SÓLO DIBUJA RELLENOS.

Para pintar con el pincel actuamos como sigue:

Seleccionamos la herramienta Pincel en el panel Herramientas

Elegimos el color del relleno con el que queremos pintar.



Elegimos las características del pincel pulsando

sobre los botones de la paleta que se despliega en

la parte inferior del panel de herramientas, dentro

del campo Opciones.

Picamos sobre el escenario y arrastramos. En la

siguiente imagen se ven varios trazos realizados

con el pincel, donde hemos elegido el color rojo y cambiado el tamaño y tipo del pincel.

Modo Pintar normal:

Modo por defecto, pinta sobre los objetos existentes.

Modo relleno de pintura: Respeta los bordes de los vectores de los objetos dónde se dibuja.

Modo pintar detrás: Pinta por detrás de lo que tenemos ya dibujado.

Modo pintar selección: Pinta sólo sobre los objetos seleccionados... podemos seleccionar con la herramienta

Flecha.

Modo pintar dentro: Pinta dentro del contorno sobre el cual se empieza a pintar



Ejercicio Realiza las siguientes Imágenes.



La herramienta Pluma

Hasta ahora hemos visto cómo realizar objetos con las herramientas de dibujo básico.

La herramienta de Pluma que ahora vamos a ver es más recomendada para usuarios que ya

tienen cierta experiencia en la creación de dibujos vectoriales en otros programas como

Freehand, Illustrator o Photoshop (con sus trazados).

Si dominamos su relativa complejidad nos da la posibilidad de crear dibujos y formas más

elaboradas.

1. Activamos la herramienta Pluma en el panel Herramientas.

2. Colocamos el cursor donde queramos que comience nuestro trazado y picamos. Aparecerá un punto de

vértice (o primer nodo) con forma de círculo vacío.

3. Colocamos el cursor en el siguiente punto y de nuevo hacemos clic. Tendremos una línea que va de un

punto a otro.

4. Continuamos picando hasta conseguir nuestro primer objeto (recuerda que con cada nuevo clic

definiremos un nuevo punto de vértice que se unirá al anterior a través de los segmentos).

5. Si queremos que nuestra figura o trazado sea una figura cerrada, solo debemos picar de nuevo sobre el

primer punto de vértice. Junto a la herramienta aparecerá un círculo blanco pequeño que nos indica que

la forma será cerrada

La herramienta Pluma y los segmentos curvos

Como vemos la pluma crea CONTORNOS de una forma simple, creando clic a clic los vértices o nodos de la forma

y los segmentos que unen esos puntos.

Por defecto la pluma crea segmentos rectos entre cada uno de los vértices o nodos... pero con un poco de detalle

podemos conseguir segmentos curvos a medida que vamos dibujando con la pluma:

1. Activamos la herramienta Pluma .

2. Hacemos clic en el primer punto que definamos y estiramos ligeramente.

3. No debemos soltar el botón del ratón hasta que hayamos creado un selector que se extienda al menos un

tercio de la longitud de la curva que queramos definir.



4. (Debemos tener en consideración que los trazados curvos siempre serán tangentes a los selectores o

vectores propios).

5. Seguimos haciendo clic para determinar el siguiente nodo o punto de nuestra forma. Si estamos

realizando un elemento con segmentos curvos, deberemos ubicar cada uno de los nodos allá donde el

segmento o trazado cambie la dirección de su curva, estirando a cada nuevo punto para extender los

correspondientes selectores.

Óvalos

Ahora vamos a ver las herramientas de dibujo que crean de una sola vez CONTORNO Y SU RELLENO, es decir, dos

vectores de un plumazo. Se basan en formas geométricas simples, así que es muy sencillo. La

primera, la herramienta Óvalo podemos pintar óvalos o círculos (si mantenemos pulsada la

tecla Mayúsculas).

Para dibujar un óvalo actuamos como sigue:

Seleccionamos la herramienta óvalo .

Especificaremos los valores de la herramienta desde el panel Propiedades.



El primer selector de color determina el color del contorno. El selector inferior, permite elegir el color

del relleno . Si bien lo veremos con más detalle unos puntos más abajo, también tenemos la

posibilidad de elegir los colores de relleno y contorno de los objetos desde la parte inferior del panel

Herramientas.

Arrastramos la herramienta en el área de trabajo.

En este caso se ha dibujado un óvalo con un contorno de color azul oscuro, grosor 2 y estilo Sólido, y el relleno de

color azul claro. Para dibujar el círculo se ha mantenido la tecla MAYÚSCULAS pulsada mientras se arrastra. Se

han usado las mismas propiedades que en el anterior.

Podemos dibujar óvalos (y otros objetos) sin contorno eligiendo en el primer selector (selector de color de

contorno), la opción sin color.

Tenemos dos opciones:

Desde la parte inferior del panel Herramientas, una vez hemos pulsado sobre el icono "color de

contorno" picaremos sobre el icono Ninguno.

Desde el panel Propiedades, desplegaremos la paleta de colores y elegiremos la opción

Ninguno de la parte superior de la misma.



Del mismo modo, podemos dibujar óvalos sin relleno eligiendo la opción sin color en el selector de color de

relleno.

Ejercicio

Realiza las siguientes Imágenes.



Rectángulos

La herramienta de dibujar Rectángulos funciona de la misma forma que la del óvalo

Al activar la herramienta el panel de Propiedades nos ofrece las mismas posibilidades de contorno

y relleno, ya que también dibuja a la vez el contorno y el relleno de una vez.

Una vez creados los rectángulos, o un cuadrado (manteniendo la tecla Mayúsculas pulsada) podemos

seleccionarlos y volver a manipular sus propiedades: contorno, relleno, ancho, alto, coordenadas, etc. Igual que

sucedía con el óvalo.

La única propiedad diferenciada de esta herramienta de rectángulo es la posibilidad de determinar un redondeo a

las esquinas del rectángulo o cuadrado que dibujemos. ¿Cómo? Sigue estos pasos:

Antes de dibujar el rectángulo pulsa en el siguiente icono de opciones de Rectángulo (en la parte

inferior del panel de herramientas):

Aparecerá un cuadro como éste, donde podrás estipular

el Radio de ese redondeo de las esquinas:

Pulsamos Aceptar y arrastramos el cursor para dibujar:

Conseguiremos un rectángulo o cuadrado con las esquinas redondeadas según el radio que nosotros hayamos

estipulado.



CUIDADO: EL REDONDEO Y SUS COSAS

Una vez hayamos estipulado un redondeo, éste se aplicará a TODOS los rectángulos que dibujemos con esa herramienta. Si queremos rectángulos normales debemos poner ese Radio a 0.

El Radio del redondeo de esquinas no es una propiedad del rectángulo dibujado, sino de la herramienta. Es decir, que una vez dibujado no se puede manipular desde el panel de Propiedades.

Polígonos/Estrellas

Para activar esta herramienta basta mantener pulsada el icono de la herramienta de rectángulo y aparecerá la de

Polígonos.

Su funcionamiento es muy similar al de las otras herramientas de forma (Óvalo y Rectángulo). Su peculiaridad es

la opción de poder determinar el nº de lados del polígono y otras características de éste:

1. Activamos la herramienta de

Polígonos y estrellas.

2. ANTES DE DIBUJAR nos

dirigimos al panel de

Propiedades y pulsamos en el

botón de Opciones (sólo aparece

con esta herramienta)



Selector de color

Anteriormente hemos visto que es muy fácil elegir un color de los selectores de color

(ya sea para relleno o contorno) que hay en el panel de Propiedades (al seleccionar

una forma) o en el grupo de Opciones (al activar una herramienta de dibujo)

Desde este Selector de color podremos

Elegir un color establecido

Crear un color personalizado

Crear un color con canal Alfa (grado de transparencia)

Esta misma paleta de colores la podemos encontrar en la solapa de

Muestras de color



Crear un color personalizado.

1. Abriremos la paleta predeterminada de colores picando sobre el Selector de color (el de relleno o

contorno)

2. Con el cursor nos dirigiremos sobre el botón Editor de Color.

3. Se abrirá el correspondiente cuadro de diálogo Color.

4. Editar un color desde este cuadro es muy intuitivo. Podemos partir del color que ya tenía el selector o

elegir uno de los Colores Básicos de la izquierda... y después:

Variar su tono y saturación picando en el campo de Gamas de color.

Finalmente variar su luminosidad en la Barra de la derecha.

5. Para los más "sibaritas" del color también tenemos la posibilidad de editar un color numéricamente por

dos parámetros diferentes:

a. Matiz (tono) / Saturación / Luz: las tres características del color. Valor entre 0 - 240

b. Rojo / Verde / Azul: los tres canales de color en pantalla. Valor entre 0 - 255.

6. Una vez hayamos definido nuestro color podemos pulsar Aceptar y empezar a trabajar con él en el

escenario, o podemos picar sobre el botón Agregar a los colores personalizados de la parte inferior.

Y el color pasará a formar parte de la galería de Colores personalizados de este cuadro.



Crear un color desde el Mezclador de color

Flash nos ofrece en la solapa/panel del Mezclador de colores el completo laboratorio que necesitamos para

fabricar cualquier color. Nos debemos acostumbrar a su uso.

Abrimos dicha solapa desde la opción de menú Ventana > Mezclador de colores

ATENCIÓN: Debemos tener muy claro que el color con que estamos trabajando, del relleno o el contorno...

activándolo en la casilla correspondiente.

En este caso trabajamos sobre el color del relleno.

Tenemos el campo de la gama de colores, la barra de luminosidad y los

valores numéricos de RVA (Rojo, Verde y azul) y el hexadecimal. ¡¡todo a

mano en un mismo panel!!!

Y más posibilidades que tiene este panel que iremos viendo en esta

lección.

Añadir un color a la Muestra

El color que hayamos construido con el

Mezclador de colores podemos insertarlo

dentro de la muestra predeterminada de

colores, para que aparezca ya directamente

en el selector de colores de relleno y

contorno.

1.- Una vez elegido el color pulsamos sobre

el botón de Opciones de panel (en la

esquina superior derecha del mismo)

... y elegimos la opción Añadir Muestra



2.- A partir de ese momento el color formará parte de la lista predeterminada del Selector de colores y del Panel

de Muestra de Color.

Para eliminar un color del panel de Muestra basta seleccionarlo y pulsar el botón de Opciones de ese panel

(esquina superior derecha) y elegir la opción Eliminar muestra.

Colores alfa, Colores transparentes

En Flash la transparencia es una propiedad más del color como la luz o la saturación.

Por defecto la opacidad de los colores que seleccionemos será total... pero si queremos variar esa propiedad

seguiremos estos pasos:

1. Seleccionamos el color que queramos aplicarle una transparencia.

2. En el panel Mezclador de colores, abriremos el selector de transparencia que se encuentra junto al campo

Alfa o bien entraremos el valor, en porcentaje, directamente en el campo... el valor 100% es

completamente opaco y 0% es totalmente transparente.

En la mitad superior del cuadro Muestra se visualiza el porcentaje de transparencia tomando como referencia una

cuadrícula.



En la siguiente imagen se aprecia cómo el color verde de la copa del árbol de la derecha es 50% más transparente.

Atención: en este caso las formas se han agrupado para poder superponerlas.

Si quieres ver la propiedad de transparencia puedes visualizar la cuadrícula o mover la forma fuera del escenario.

Bote de pintura.

Permite rellenar de un color un contorno cerrado.

1. Escogemos el color con el que queremos rellenar nuestro gráfico.

2. Activamos la herramienta Cubo de pintura en el panel Herramientas.

3. ANTES DE PINTAR... Elegiremos una de las opciones del Bote de pintura.

De forma predeterminada el Bote de pintura sólo rellena contornos que

estén perfectamente cerrados.

Pero puede que el contorno que hemos dibujado no esté cerrado del todo y

haya saltos en la línea... en ese caso deberemos elegir un Modo de Bote de

pintura que tolere esas aberturas en el contorno.

4.- Una vez elegido la opción hacemos clic dentro del contorno que

deseamos rellenar.



Se dibujó un contorno con el lápiz y lo he suavizado para que sea más sintético.

No es completamente cerrado así que el botón de pintura tiene activada la opción de relleno más tolerante:

Cerrar huecos grandes. (Es el más recomendable)

En el caso de que el la abertura del contorno sea tan grande que el Modo más tolerante no lo rellene no nos

quedara otra opción que editar el contorno y cerrarlo un poco más moviendo su vértice final para que se acerque

más al inicial.

Bote de Tinta.

Permite dar contorno a los rellenos que no lo tengan, y también puede aplicar las características

activas del contorno (color tamaño, estilo...) en el panel de Propiedades a cualquier otro contorno

que sea diferente.

Por así decirlo, el Bote de tinta es a los contornos lo que el Bote de pintura a los rellenos.

1. Activamos la herramienta Bote de Tinta en el panel Herramientas.

2. Establecemos los atributos específicos de Contorno: el color, el grosor y el tipo de línea.

3. Pulsamos el borde de un gráfico. En el ejemplo cambiamos los bordes del tronco y de la copa.



El bote de Tinta aplicará las propiedades que determinemos allí donde hagamos clic: ya sea para modificar un

contorno que ya existe (derecha), como para dar contorno a un Relleno que no lo tiene (izquierda: con estilo

punteado)

Ayudas: Cuentagotas, lupa y mano.

Explicamos tres herramientas de la paleta de herramientas muy útiles a la hora de movernos por el escenario.

Cuentagotas.

Permite poner como color actual el color seleccionado. Si queremos poner como actual un color ya

empleado en el escenario, pulsamos sobre el cuentagotas y picamos en cualquier zona que tenga el

color deseado.

Lupa.

La opción Lupa permite ampliar o reducir la visualización de los gráficos o imágenes de

nuestro escenario.

Podemos cambiar de (+ a -) pulsando la tecla Alt.

Zoom ventana. Con esta herramienta podemos ver una determinada zona del escenario, basta con arrastrar la

Lupa englobando la parte que queremos ver.

Con la herramienta Mano podemos encuadrar la visualización dentro del escenario. Podemos

acceder de una manera rápida al encuadre pulsando la barra espaciadora.



Crear un degradado.

Para crearnos uno deberemos ir a nuestro laboratorio: el Mezclador de color

(Ventana > Mezclador de colores)

Seleccionamos Lineal o Radial en el cuadro desplegable :

En el mismo panel Mezclador de colores especificaremos los atributos, en este

caso de un degradado Lineal.

La clave para editar

nuestros propios colores en

el degradado son las

muestras de los colores que

lo construyen: los

cuadraditos

Antes hay que tener bien

claro cuál es el degradado

que deseamos.

Por ejemplo: vamos a

conseguir uno de Amarillo a

Verde.

Para variar el color de esas

muestras, y así el degradado, basta picar doble clic sobre la muestra del color que deseamos variar.

Primero... la del color inicial:

De esta forma ya tenemos un degradado de Amarillo (inicial) a

Verde (final).

Lo vemos en el mezclador de colores y en el Selector de color en

las opciones del panel de Herramientas.



Aplicar un degradado.

Aquí vamos a explicar cómo pintar una forma con un degradado. No tiene mucho misterio; al igual que al pintar

con un color sólido basta seleccionar el Bote de pintura y hacer clic sobre la forma.

Pero lo interesante es que en los degradados juegan dos colores, eso implica dirección... por lo que os

recomiendo que lo apliquéis ARRASTRANDO el ratón... Vamos a verlo:

Activamos el Bote de pintura en el panel Herramientas... y nos aseguramos de que el relleno tiene es degradado

que deseamos.

En este caso seguimos con el anterior: Lineal de Amarillo a Verde

Arrastra el bote de pintura sobre la forma que quieres pintar con degradado:

La dirección y amplitud del arrastre son las que toma el Degradado

El punto inicial del arrastre corresponde al color inicial del degradado... y lo mismo con el final.



En el caso de que el Degradado, en vez de lineal, sea Radial...

basta hacer Clic, sin arrastre, ya que ese clic determina el centro del radio del degradado, que es el color inicial..

Transformar un degradado.

Muchas veces al aplicar el degradado, lineal o radial, no estaremos de acuerdo con la dirección o amplitud del

mismo. No es necesario volver a aplicarlo.

Podemos variar los parámetros del degradado aplicado de una forma más detallada:

Activamos la herramienta Transformación de relleno en el panel Herramientas.

Picamos en el área de relleno de degradado de nuestro gráfico.

Aparecerán los controladores de extensión y rotación de degradado, en este caso del degradado Radial.



Por ejemplo:

1. Hemos movido el punto focal del degradado a la izq.

2. Lo hemos girado con el selector de Girar

3. Encogemos la anchura desde el cursor de Estirar

4. Aumentamos su tamaño con el selector de Amplitud

5. Finalmente movemos el punto central de referencia y con el todo el

degradado

Por supuesto también podemos transformar un degradado Lineal, sus modificadores son similares



RESUMEN

Ésta es una lección larga, con mucho contenido. Pero lo que hemos visto es de uso muy intuitivo y se irá practicando a lo largo de todo el curso. Con la práctica nos iremos haciendo a cada herramienta y sus opciones. Nos podemos tomar esta lección como glosario de las herramientas de pintura y volver a ella cada vez que tengamos una duda respecto a cómo dibujar tal cosa o cómo se usaba tal opción.

Al usar las herramientas de contorno, relleno o formas geométricas acostúmbrate a seleccionar las propiedades de la herramienta ANTES de ir

al escenario para dibujar. Recuerda que sea lo que sea (relleno o contorno) siempre se puede variar

una vez dibujado si lo seleccionamos y elegimos otras propiedades (en el panel de Propiedades).

Tiende a dibujar figuras sintéticas, basadas en formas geométricas. Ayúdate de las opciones de Suavizar.

Acuérdate del Imán para que las líneas de tu dibujo de ajusten entre ellas. Cuidado porque a veces tener activado el Imán es un problema.

Para variar la forma de un vector:

Selección

Edición rápida directamente sobre la forma.

Subselección

Edición detallada sobre los vértices y sus curvaturas.

Usa el Mezclador de colores para todo lo que tenga que ver con la fabricación y

selección de un color.



En cuanto a los colores recuerda: o La opacidad (Alfa) es una característica más de cualquier color. o Antes de seleccionar un color asegúrate de para quién lo estás seleccionando:

¿Para un relleno o para un contorno? Tienen selectores diferentes.

En cuanto a Degradados:

o Da igual que sea Lineal o Radial, lo importante son los colores que lo forman. o Procura aplicarlo arrastrando... Así determinarás ya de entrada la dirección.

o Acostúmbrate a usar la herr. de Transformar degradados siempre que no

te guste cómo lo has aplicado.

o Cuidado con el Bloqueador de relleno del Bote de pintura. A veces puede ser la solución pero otras muchas el problema.



Ejercicio 1.- Dibujo

Es muy importante que vayas realizando los ejercicios propuestos.

Ya que lo que ahora hagamos lo vamos a utilizar en ejercicios posteriores.

Dibuja este árbol.

Como hemos dicho puedes conseguir dibujos atractivos centrándonos en formas simples. Si no tienes experiencia en el dibujo vectorial te aconsejo que sigas los pasos de la ayuda y del vídeo.

Ayuda:

1. Dibuja primero las formas SIN RELLENO, SÓLO CONTORNOS.

2. Parte de las herramientas de Forma. 3. Para dibujar las sobras, la del tronco, por ejemplo, usa la

Línea... así cerramos un relleno que podemos colorear de otro color (un marrón más oscuro) Ayúdate del Imán.



... y, ¿este otro modelo?

Ayuda:

1. De nuevo empezamos dibujando formas geométricas pero SOLO CON CONTORNOS.

2. Como ves, el truco consiste en conseguir un área cerrada con contornos y después rellenarla del color elegido.

3. Las ramas están dibujadas con Líneas... con grosores diferentes (propiedades del contorno). Ayúdate del Imán.

A partir de estos modelos puedes hacer varias versiones...

cambiando las propiedades del relleno y los contornos con y .

Guarda el archivo resultante como ARBOLES. fla



Capas

Las capas (Layers) son como hojas de acetato transparente apiladas. Cuando una capa está vacía, las capas situadas

debajo pueden verse a través de ésta. Una película creada con Flash contiene una capa. Añade más capas para organizar las ilustraciones y la animación de

las películas. El número de capas que pueden crearse sólo está limitado por la memoria del sistema. Las capas no

aumentan el tamaño del archivo de la película publicada. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Además, las capas de

guías pueden utilizarse para facilitar el dibujo y la edición y, las capas de máscara para facilitar la creación de efectos

sofisticados. Utiliza capas separadas para los archivos de sonido y de acciones. De este modo encontrarás las acciones y los

sonidos con mayor facilidad cuando tenga que editarlos.

Creación de capas

Cuando se crea una capa nueva, ésta aparece encima de la capa seleccionada. La última capa creada es la capa activa.

Para crear una capa:

Selecciona Insert > Layer ó da Click en el botón Add Layer que se encuentra en la parte inferior de la línea de tiempo.

Representación de animaciones en la línea de tiempo



Edición de capas

En la capa activa se puede dibujar y pintar. Selecciona una capa para activarla. El icono de lápiz situado junto al

nombre de la capa indica que es la capa activa. Sólo puede estar activa una capa. Los objetos pueden editarse en las capas desbloqueadas y visibles. Las capas pueden bloquearse para protegerlas de

posibles cambios y ocultarse para mantener el área de trabajo despejado. Los objetos pueden verse como contornos

en cualquier capa, puede determinarse el color del contorno y cambiar la posición de la capa.



Animación

La animación se crea mediante el cambio del contenido de frames sucesivos. Puede hacer que un objeto se

desplace a lo largo del escenario, aumente o disminuya de tamaño, gire, cambie de color, aparezca o

desaparezca, o cambie de forma. Los cambios pueden ocurrir por separado o combinados entre sí. Por ejemplo,

puede hacer que un objeto gire a medida que aparece y se desplaza por el escenario.

Flash ofrece dos maneras de crear secuencias de animación: frame a frame y por interpolación (Tweening). En la

primera, debe crear la imagen de cada frame, y en la segunda, sólo crea los frames inicial y final y Flash crea los

intermedios. Cada frame en el que cambia algo en el escenario es un frame clave (Keyframe) . La animación

frame a frame aumenta el tamaño del archivo de forma mucho más rápida que la interpolada.

Distinción de las animaciones en la línea de tiempo

Flash distingue la animación frame a frame de la interpolada en la línea de tiempo de la siguiente forma:

Los frames clave de interpolación de movimiento (Keyframes) tienen un punto negro; los frames intermedios

muestran una flecha negra sobre fondo azul claro.

Los frames clave de la interpolación de forma tienen un punto negro; los frames intermedios muestran una flecha

negra sobre fondo verde claro.

Una línea discontinua indica un problema en la interpolación. Los frames clave simples tienen un punto negro; los frames de color gris claro situados tras ellos tienen el mismo

contenido.

Los frames clave vacíos tienen un punto negro hueco.

Una “a” pequeña indica que al frame se le asignó una acción de frame con el cuadro de diálogo Propiedades de frame.

Previsualización y prueba de películas

Conforme vayas creando una película, necesitarás reproducirla para ver la animación y probar los controles

interactivos. Las opciones disponibles son las siguientes:

Para probar la animación sencilla, los controles interactivos básicos y el sonido, utiliza el controlador o el comando

Reproducir, para realizar una visualización previa de la película dentro del entorno de creación de Flash. (Window >

Controler ó Control >Play)

Para probar toda la animación y todos los controles interactivos, usa los comandos Probar película (Control > Text

Movie o Ctrl + Enter ) y Probar escena (Control > Text Scene o Ctrl. + Alt + Enter) para crear películas de

Reproductor Flash que se reproduzcan en otra ventana.

Para probar la película en un navegador Web, utiliza el comando File > Publish Preview > HTML.

Uso de Máscaras



Una capa de máscara oculta todo aquello que está vinculado a dicha capa, excepto el lugar donde se sitúa el objeto

con relleno. Un objeto de tipos en la capa de máscara crea un agujero a través del cual se ve el contenido de las capas

situadas debajo. Las capas de máscara pueden contener una sola forma, instancia u objeto de tipo.

Para crear una capa de mascarilla

1. Crea una capa que incluya el contenido que desea mostrar a través de los agujeros de la máscara.

2. Asegúrate de que la capa creada está seleccionada y elige Insertar > Capa para crear una capa nueva encima.

Una capa de máscara siempre cubre la capa situada debajo, por tanto asegúrate de crear la capa en el lugar correcto.

3. Dibuja una forma rellena, coloca un tipo o crea una instancia de un símbolo en la capa de máscara. Flash ignora

los mapas de bits, degradados, transparencias, colores y estilos de línea en una capa de máscara. Todas las

áreas rellenas de una máscara son transparentes; y las áreas no rellenas son opacas.

Uso de capas de guías

Para facilitar el dibujo, utiliza capas de guías. Puede visualizarse una cuadrícula de fondo en todas las escenas o crear

una ayuda personalizada en una capa y designarla como la capa de guías. La capa de guías se señalan con un emblema

de guía que se muestra delante del nombre de la capa. La capa de guías no se ve en las películas del Reproductor Flash

publicadas.

Para designar una capa como capa de guía:

Haga Click en el botón derecho del ratón (Windows) y elija Guía en el menú contextual.

Para cambiar la capa de guías a capa normal:

Seleccione la capa y elige Guía en el menú contextual de esa capa.

Nota: Sitúa todas las capas de guías en la última posición de la serie de las capas. De este modo se evita

arrastrar de forma accidental una capa normal sobre una capa de guías y convertirla en una capa de guía de

movimiento.

Guías de movimiento

Las capas de guía de movimiento permiten dibujar trazados a lo largo de los cuales se animan instancias, grupos y

bloques de tipos interpolados. Puedes vincular varias capas a una capa de guía de movimiento para hacer que varios

objetos sigan el mismo trazado. Al vincular una capa normal a una capa de guía de movimiento se convierte en una

capa con guía.

Los trazados flexibilizan la animación, obligando a un símbolo a seguir un camino determinado sin necesidad de

crear más key frames que el inicial y el final.

Para crear un trazado debes de seleccionar la capa que contendrá la animación y pulsamos el botón Añadir Capa guía.



Practica sugerida 1 En los programas de animación, así como en cualquier otro programa de dibujo, es importante tomar

en cuenta que existen muchas herramientas que permiten que el objeto sea cada vez más complejo y

que siempre se tiene que empezar de lo más sencillo a lo más complejo.

Se sugiere realizar esta práctica en donde el docente guie al alumno.

1.- Película en blanco, obsérvese la selección de la herramienta óvalo.

2.- Óvalo dibujado, relleno con los colores por defecto.

3.- Selección del objeto con la 8herramienta Flecha

4.- Selección del objeto ya realizada.

5.- Panel Alineación utilizado para centrar en la escena el objeto.

6.- Relleno con degradado lineal aplicado al objeto.

7.- Modificación de la orientación del relleno utilizando la herramienta transformación de relleno.

8.- Copiado del objeto dibujado (una vez seleccionado).

9.- Inserción de una nueva capa.

10.- Pegado del objeto en la nueva capa y alineación mediante el panel Alineación.

11.- Modificación del relleno y su orientación.

12.- Eliminación del borde del segundo objeto e inserción de una nueva capa.

13.- Copiado y pegado del objeto en la nueva capa.

14.- Modificación del relleno a relleno radial

15.- Selección del nuevo objeto y activación del panel transformar.

16.- Reducción del nuevo objeto (rojos) con el panel transformar.

17.- Inserción de una nueva capa.

18.- Inserción de un letrero mediante la herramienta texto.

19.- Modificación del tamaño del objeto texto con la herramienta transformación libre.

20.- Objeto modificado en su tamaño.

21.- Modificación del relleno del texto con la herramienta Color de relleno.

22.- Objeto finalizado.



PRACTICA 1

Objetivo

Esta primer práctica tiene como objetivo familiarizarse con la interfaz de Flash, así como aprender a crear una

animación usando elementos básicos utilizando las herramientas de la paleta de dibujo, y como parte final se

aplicarán movimientos y efectos sencillos a objetos de la película.

Al final de la práctica se obtendrá una imagen como la que se muestra a continuación (figura 1), logrando que el

barco se desplace de izquierda a derecha al movimiento de la olas.



Desarrollo

Para realizar esta práctica, es necesario seguir los siguientes pasos:

1. Crea una nueva película con dimensiones de 550 x 400 pixeles con fondo blanco.

1.1 Selecciona del menú Archivo nuevo.

En la versión en Ingles.

1.2 Selecciona Modify > Movie y cambia las propiedades modificando las dimensiones y color del fondo del

escenario.



2. Tienes que crear un cielo, un sol, unas nubes y olas en el escenario, para esto haz lo siguiente:

2.1 Selecciona el primer keyframe vacío de la línea de tiempo. Utiliza en la paleta de herramientas la opción del

rectángulo y traza un cuadrado que abarque todo el escenario, esto hará la función de cielo.

2.2 Cambia el color del rectángulo utilizando la paleta de color, y crea un degradado que se difumine de un azul con

coordenadas RGB (53,96,223) a un tono con coordenadas RGB (121,223,224).

2.3 Crea otra capa o layer, y de igual forma utiliza la paleta de herramientas para crear un sol, selecciona la opción

“elipse” para crear un círculo y dibújalo con un gradiente, esto se lo indicas en las opciones de degradado.

2.4 Para crear las nubes usaras la brocha ubicada también en la paleta de herramientas, esto lo tendrás que realizar en

otra capa o layer.

Nota. Utilizando los diferentes estilos de brocha podrás darle mejor efecto a las nubes.



Para realizar las olas, tendrás que crearlas en tres diferentes capas o layers debido a que les daremos diferentes

movimientos. Para dibujar las olas utiliza la herramienta del lápiz , selecciona un estilo de línea para mayor facilidad en

el trazo del dibujo. ( figura 2 )

3. Anima las olas que vayan en sentidos distintos unas de otras.

3.1 Posiciona el puntero en el keyframe donde se encuentra la “ola” que quieras animar, en seguida arrastra el

keyframe al frame 20, notaras que los frames intermedios están en blanco, para corregir esto tendrás que regresar el

keyframe a la posición original. Ahora podrás mover la cabeza lectora a cualquier frame de la capa y se encontrará el

dibujo de la “ola” en todos los frames.



3.2 Una vez realizado el paso anterior, posiciónate en el keyframe y da click derecho , observa que aparece un

menú, escoge la opción Create Motion Tween ( figura 3 ). En seguida, tendrás que insertar un keyframe en el

frame 20; para esto debes de dar click derecho en el frame y seleccionar Insert keyframe ó la llave corta ( F6 ).

( figura 4 )

Realiza la misma operación para las demás olas que deseas animar.

3.3 Una vez creado el keyframe en el frame 20, tendrás que mover el objeto (la “ola”) a la posición que deseas que

se desplace. Mueve la cabeza lectora y observa la animación que creaste.

3.4 Ahora, tendrás que crear (dibujar) un barco y animarlo como se muestra en la figura siguiente (figura 5). Todo

lo podrás hacer con los conceptos y conocimientos que obtuviste en los pasos 3.1 – 3.3



Una vez terminada la animación, la puedes pre visualizar y probar.



GUÍA DE OBSERVACIÓN M2B2IEM1


OBSERVACIONES

Evidencia por desempeño: Las funciones de las barras y paneles manipuladas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En un software de animación manipula las funciones de las barras y paneles siguiendo

las instrucciones planteadas por el docente

SI NO

1. ¿Utilizó la barra de herramientas principal para el diseño de objetos? 2. ¿Empleó los elementos de la caja de herramientas? 3. ¿Aplicó comandos de la barra de control? 4. ¿Utilizó las opciones de la barra de edición? 5. ¿Empleó el panel de propiedades para establecer parámetros de los objetos dibujados? 6. ¿Manejó los elementos del panel de pantallas? 7. ¿Alineó las formas dibujadas mediante el panel alineación permitiendo la claridad y compresión del diseño de la animación (orden)? 8. ¿Aplicó los rellenos de color a las formas dibujadas con el panel mezclador de colores permitiendo la distinción clara de cada objeto de la película (orden)? 9. ¿Igualó colores utilizando las opciones del panel muestra de color? 10. ¿Modificó la ubicación de los objetos en el escenario mediante el panel información clarificando el diseño general de la animación (orden)? 11. ¿Manipuló la película a través de las opciones del panel escenas para obtener claridad en la presentación del diseño de la animación (orden)? 12. ¿Modificó los objetos del escenario mediante el panel transformar? 13. ¿Manipuló las acciones de los objetos a través del panel de acciones? 14. ¿Controló la instancia de los símbolos mediante el panel comportamiento? 15. ¿Modificó el contenido de la película a través de las opciones del panel componentes? 16. ¿Manipuló los objetos de la película mediante el panel inspector de componentes?


LUGAR Y FECHA DE APLICACIÓN



GUÍA DE OBSERVACIÓN M2B2/IEM/2

Evidencia por desempeño: El uso de la caja de herramientas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Utiliza la caja de herramientas de un programa de animación para crear una película, siguiendo las instrucciones planteadas por el docente.

SI

NO

1. ¿Utilizó la herramienta flecha en los elementos del espacio de trabajo

cuidando la claridad del concepto de diseño general de la animación (orden)?

2. ¿Usó la herramienta línea?

3. ¿Dibujó vectores mediante la herramienta pluma?

4. ¿Dibujó forma óvalo en el escenario de trabajo?

5. ¿Aplicó la herramienta transformación libre?

6. ¿Dibujó formas en el escenario mediante la herramienta lápiz contribuyendo

con ello a la claridad del concepto de diseño general de la animación (orden)?

7. ¿Manipuló los rellenos mediante las herramientas bote y cubo de pintura?

8. ¿Aplicó la herramienta cuentagotas?

9. ¿Manipuló las vistas del escenario a través de la herramienta mano?

10. ¿Utilizó la herramienta color de trazo para los objetos dibujados en el

escenario?

11. ¿Aplicó la herramienta blanco y negro?

12. ¿Aplicó la herramienta de subselección en las formas dibujadas en el

escenario?

13. ¿Seleccionó fracciones de los objetos del escenario a través de la herramienta lazo?


LUGAR Y FECHA DE

APLICACIÓN



Bloque III: Crear símbolos y bibliotecas.

Los símbolos

Los símbolos son imágenes reutilizables que se crean con las herramientas de dibujo. Cuando se coloca un

símbolo en el escenario o dentro de otro símbolo, se está creando una instancia del símbolo. Los símbolos

reducen el tamaño de los archivos, ya que Flash, sin considerar el número de instancias creadas, sólo guarda una

copia en el archivo.

Los símbolos también son parte esencial en la

creación de películas interactivas. Por ejemplo, los

botones sobre los que puede hacer Click y que

cambian en respuesta al puntero del ratón son un

tipo de símbolos. Otro tipo de símbolo, el clip de

película, también se utiliza para crear películas

interactivas más elaboradas.

Creación de símbolos

Puede crear un símbolo a partir de los objetos seleccionados en el escenario o crear un símbolo vacío y llenarlo en

modo de edición de símbolos. Los símbolos pueden tener toda la funcionalidad disponible en Flash, incluida la

animación.

Mediante los símbolos con animación pueden crearse películas con mucho movimiento al mismo tiempo que se

reduce al mínimo el tamaño del archivo.

Considera la posibilidad de crear animación en un símbolo cuando exista una acción repetitiva o cíclica, por

ejemplo el movimiento hacia arriba y hacia debajo de las alas de un pájaro.

Para crear un símbolo nuevo con elementos seleccionados:

Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual es partir de una forma.

Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo Símbolo, desde el menú

contextual eligiendo Convertir en símbolo, o directamente con las teclas Ctrl + F8 o F8.



Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del

símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que se hará imprescindible

cuando tengamos muchos símbolos.

Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos convertir nuestro objeto.

Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las diferencias entre ellos las veremos

en temas posteriores. Lo más habitual es Clips de película para los objetos que queremos mostrar en el escenario,

y Botón si queremos que actúe como tal.

Bastará con pulsar Aceptar para tener nuestro símbolo creado.

Para crear un nuevo símbolo vacío:

1 Asegúrate de que no hay nada seleccionado en el escenario y realiza uno de los siguientes pasos:

Selecciona Insertar > Nuevo Símbolo o bien,

Haz Click en el botón Nuevo símbolo en la parte inferior de la ventana de biblioteca o bien,

Elige New Symbol, en el menú Opciones en la ventana de biblioteca.

2 En el cuadro de diálogo Propiedades de símbolo, escribe el nombre del símbolo y elige Clip de película ,

Botón, o Gráfico en Comportamiento.

3 Para crear el contenido del símbolo, utiliza la línea de tiempo, dibuja con las herramientas de dibujo,

importa medios o crea instancias de otros símbolos.

4 Cuando hayas terminado de crear el contenido del símbolo,

selecciona Editar > Editar Pelicula o (Ctrl+E) para salir del modo

de edición de símbolos.

Ventana de edición de Símbolos



EJERCICIO:

1. Abre el archivo trabajo.fla con el que venimos probando cosas a lo largo del curso.

2. Seleccionamos el óvalo haciendo doble clic sobre él.

3. Abrimos el menú Insertar → Nuevo Símbolo... de la barra de menús. Se desplegará una ventana como la de la figura.

4. En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi Primer Símbolo".

5. Seleccionamos la opción Gráfico en el apartado Tipo. Con esto le decimos a Flash que el nuevo símbolo será un gráfico.

6. Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado.

Las Bibliotecas

En Flash podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas

asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los

símbolos que contienen.

Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a la Barra de

Menús, Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de

símbolos: botones, clips o gráficos.



Para acceder a la líbrería de símbolos de la película que estamos creando de nuevo vamos a la Barra de

Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el

momento.

Podemos comprobar cómo el nuevo símbolo que hemos creado en el ejercicio anterior (Ejercicio Crear Símbolo)

se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el

tipo de símbolo que representan: Clip Botón Gráfico

Diferencia entre símbolo e instancia

Como hemos comentado anteriormente, cuando creamos un símbolo, Flash lo almacena en una biblioteca. Pues

bien, cada vez que utilicemos ese objeto en una película, éste se convierte en una instancia.

Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando utilicemos un símbolo que

hayamos creado previamente en una película, al modificarlo se modificará la instancia, mientras que el objeto

seguirá intacto, tal y como era en el momento de su creación, de manera que podremos volverlo a utilizar en otro

momento.

A la derecha tenéis un ejemplo de una biblioteca, en este caso una biblioteca estándar de Flash. Cada elemento

de la biblioteca es un símbolo.



Ejercicio paso a paso.

1 Vamos al menú Ventana → Bibliotecas Comunes.

2 Seleccionamos la primera opción del submenú que aparecerá (Botones). Aparecerá la librería de botones predefinidos de Flash 8.

3 Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera carpeta que aparece en la lista (Arcade buttons).

Se abrirá una lista con todos los símbolos contenidos en la carpeta.

4 Arrastramos el primer símbolo (arcade button - blue) a nuestra área de trabajo.

Aparecerá en el papel el símbolo que habíamos arrastrado. Esto es una instancia del símbolo llamado arcade button - blue. Comprobémoslo.

5 Seleccionamos nuestra nueva instancia.

6 Seleccionamos la herramienta Transformación Libre y modificamos el tamaño de la instancia arrastrando los extremos del objeto.

7 Bien, ahora hemos modificado la instancia. Comprobemos que el símbolo sigue intacto. Repitamos lo que hicimos en el paso 5.

Como vemos, el botón ha aparecido de nuevo, pero no con el tamaño que le acabamos de dar, sino con su tamaño original. Esto sucede porque lo que hemos reducido de tamaño era tan sólo una instancia del símbolo, no el símbolo mismo, y esto es lo que se ha modificado.

Por tanto podemos seguir insertando y modificando ese símbolo y cualquier otro en esta u otra película ya que estaremos insertando instancias.




Evidencia por desempeño: Los símbolos y bibliotecas creadas en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Crea una película que contenga símbolos y biblioteca en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. ¿Insertó símbolos en blanco en el escenario? 2. ¿Convirtió objetos en símbolos siguiendo los procedimientos marcados por el software de animación (orden)? 3. ¿Organizó los símbolos en la biblioteca a través de carpetas facilitando la presentación clara y comprensible de la película (orden)? 4. ¿Insertó en el escenario los símbolos almacenados en la biblioteca para contribuir a la claridad del concepto de diseño de la animación (orden)? 5. ¿Duplicó símbolos? 6. ¿Editó los símbolos almacenados en la biblioteca para clarificar el concepto de diseño general de la animación (orden)? 7. ¿Eliminó los símbolos almacenados en la biblioteca que no permitían la comprensión del concepto de diseño general de la animación (orden)?






Evidencia por producto: Los símbolos y bibliotecas creadas en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Crea una película que contenga símbolos y biblioteca en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI

NO

1. La Película contiene símbolos y bibliotecas creados y organizados claramente (orden) en: - Símbolos gráficos. - Símbolos clip de película. - Símbolos botón. - Carpetas de símbolos. - Objetos importados.





Prueba Tema 9: Símbolos

Solo una respuesta es válida por pregunta. Selecciona la respuesta que consideres correcta.

Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.

Si pulsas Restablecer podrás repetir la evaluación.

1. Darle un nombre concreto a los símbolos no es importante.

a) Verdadero. b) Falso.

2. Las Bibliotecas Comunes de Flash aparecen desde la primera vez que abrimos el programa.


3. Para insertar un símbolo de biblioteca en una película abrimos la biblioteca y hacemos doble clic sobre el símbolo.


4. Para cambiar el tamaño de un símbolo, lo insertamos en nuestro documento y utilizamos la herramienta "escalar".


5. ¿Cuál es cierta?.

a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos, lo que nos ayuda en la organización de

nuestra película.

b) Con el panel Propiedades podemos modificar internamente la instancia seleccionada.

c) Con el panel Propiedades podemos modificar externamente la instancia seleccionada.

6. ¿Cuál de las siguientes afirmaciones es falsa?.

a) El efecto Alfa permite ver objetos situados en capas inferiores cuando su valor es distinto del 100%.

b) El efecto Tinta permite modificar cada uno de los colores presentes en la instancia.

c) El efecto Avanzado combina varios de los efectos sobre instancias que ofrece Flash.

7. Por razones de copyright no podemos utilizar más de un símbolo de las bibliotecas comunes por película.


8. Todos los símbolos que incluyamos o podamos encontrar en nuestras películas serán de estos tres tipos: Clip de película,

Gráfico y Botón.




Bloque IV: Aplicar animación al dibujo.

Aspectos básicos de animaciones

Tipos de animaciones

Adobe® Flash® ofrece varias formas de crear animación y efectos especiales. Cada método proporciona distintas

posibilidades para crear contenido animado.

Flash admite los siguientes tipos de animación:

Interpolaciones de movimiento Las interpolaciones de movimiento se utilizan para establecer las propiedades

de un objeto, por ejemplo, la posición y la transparencia alfa de un fotograma y, de nuevo, de otro fotograma.

Flash interpola los valores de las propiedades de los fotogramas intermedios. Las interpolaciones de movimiento

resultan útiles para animaciones con movimiento continuo o para la transformación de objetos. Las

interpolaciones de movimiento aparecen en la línea de tiempo como grupos de fotogramas contiguos y se

pueden seleccionar como un solo objeto de forma predeterminada. Las interpolaciones de movimiento son

realmente potentes y fáciles de crear.

Interpolaciones clásicas Las interpolaciones clásicas son como las interpolaciones de movimiento, aunque más

difíciles de crear. Las interpolaciones clásicas permiten agregar efectos de animación específicos que no son

posibles en interpolaciones basadas en el tamaño.

Poses de cinemática inversa: Las poses de cinemática inversa permiten estirar y doblar objetos de forma, así

como vincular grupos de instancias de símbolos para que se muevan al mismo tiempo y con naturalidad. Puede

colocar el objeto de forma o instancias vinculadas de distinto modo y en fotogramas diferentes; Flash interpola

las posiciones de los fotogramas intermedios.

Interpolaciones de forma: En la interpolación de forma, se dibuja una forma en un fotograma concreto de la línea

de tiempo y se modifica o se dibuja otra forma en otro fotograma específico. Seguidamente, Flash interpola las

formas intermedias de los fotogramas intermedios y crea la animación de una forma cambiante.

Fotograma a fotograma animación: Esta técnica de animación permite especificar distintas ilustraciones para

cada fotograma de la línea de tiempo. Utilice esta técnica para crear efectos como el de fotogramas de una

película que se suceden rápidamente. Esta técnica resulta útil en animaciones complejas donde es preciso que los

elementos gráficos de cada fotograma sean distintos.



Ejercicios

Interpolación de movimiento I : el vuelo de un águila

En la interpolación de movimiento, el diseñador define la posición, el tamaño y la rotación de un objeto sobre el

escenario en un fotograma clave inicial. Estas propiedades las modifica en el fotograma clave final. Flash generará

sobre el escenario la secuencia de transición de un estado a otro.

En este ejemplo vamos a diseñar el vuelo de un águila.

1. Cuando se abre un archivo de película nueva mediante Archivo > Nuevo, Flash se sitúa en la capa actual Capa 1

y en ella sitúa en la posición nº 1 un fotograma clave (rectángulo con punto hueco en su base) a la espera de

rellenarlo con alguna imagen.

2. Arrastra una instancia del símbolo gráfico Águila desde la carpeta Gráficos en Ventana > Otros paneles >

Bibliotecas comunes > Curso. Sitúa el águila en la esquina inferior izquierda del escenario.

Observa que el fotograma clave ahora muestra un punto negro indicando que ya contiene una imagen.

3. Crea un segundo fotograma clave (fotograma clave final) donde desees que concluya la animación. Por

ejemplo, haz clic sobre el fotograma nº 30 de esa capa. Una vez seleccionado, elige la opción Insertar > Línea de

tiempo > Fotograma Clave. Otra opción es hacer directamente clic derecho sobre el fotograma nº 30 y seleccionar

Insertar fotograma clave en el menú contextual que se despliega.

Flash automáticamente rellena ese nuevo fotograma clave con el contenido del anterior.

4. Asegúrate que está seleccionado el fotograma nº 30. Ahora pincha y arrastra el águila para moverlo hasta la

esquina superior derecha del escenario.



5. También puedes reducir su tamaño. Utiliza la herramienta Transformación libre (Q) y su opción Escalar.

Arrastra el selector de la esquina superior derecha del águila.

6. Advierte que los cambios de posición y tamaño sólo afectan al fotograma clave nº 30. Al hacer clic en la línea de

tiempo sobre el fotograma clave nº 1, se observa la posición y tamaño inicial del objeto.

7. Clic sobre el fotograma clave nº1. Si el Inspector de Propiedades no está visible, selecciona Ventana >

propiedades.

8. En la lista desplegable Animar del Inspector de propiedades selecciona Movimiento. Éste es el tipo de

interpolación que vamos a utilizar.

Figura Inspector de propiedades del fotograma inicial

9. Activa la casilla Escalar para interpolar el cambio de tamaño del elemento seleccionado.

10. En la lista desplegable Aceleración arrastra el deslizador o se introduce un valor para ajustar la velocidad del

cambio entre fotogramas interpolados:

• Para empezar la interpolación de movimiento lentamente y acelerar hacia el final de la animación, arrastra el

deslizador hacia abajo o introduce un valor entre -1 y -100. Nota que aparece la etiqueta Dentro.

• Para empezar la interpolación de movimiento rápidamente y ralentizar hacia el final de la animación, arrastra el

deslizador hacia arriba o introduce un valor entre 1 y 100. Aparece la etiqueta Fuera.

La velocidad de cambio predeterminada entre los fotogramas interpolados es constante. La opción Aceleración

crea una apariencia más natural de aceleración o ralentización ajustando gradualmente la velocidad de cambio.

11. Al concluir estas tareas en la capa actual los fotogramas clave están indicados por un punto negro mientras

que los fotogramas intermedios muestran una flecha negra sobre fondo azul claro.

Representación de una animación de movimiento por interpolación en la línea de tiempo

Si se elimina el fotograma clave final esta flecha se transforma en una línea discontinua.

No hay interpolación porque falta fotograma final

12. Para visualizar la animación resultante selecciona Control > Reproducir o bien Control > Probar Película.



Interpolación de de forma (cambio de color):

El fantasma

En este ejemplo, diseñaremos una animación en la cual un fantasma desaparece o cambia de color.

El punto de registro se sitúa en el centro del símbolo

1. Arrastra una instancia de un símbolo desde Bibliotecas Comunes-Curso:

Ventana > Otros paneles > Bibliotecas comunes > Curso > Gráficos. Por ejemplo el

símbolo gráfico Fantasma. Sitúalo en el centro del escenario.

2. Crea un segundo fotograma clave donde desees que termine la animación. Clic

sobre el fotograma nº 30, por ejemplo, de esa capa. Una vez seleccionado elegir la

opción Insertar > Línea de tiempo > Fotograma clave o bien clic derecho para

seleccionar Insertar fotograma clave. Advierte que este fotograma está

seleccionado. En el Inspector de Propiedades aparece la información relativa al Fotograma seleccionado.

3. Haz clic sobre la instancia del fantasma en el fotograma nº30. El Inspector de propiedades ahora muestra la

información de la instancia seleccionada y no del fotograma.

4. En el menú desplegable Color selecciona la opción Alfa .Pincha y arrastra el deslizador hasta el 0% . Nota que el

fantasma se ha hecho invisible. Otro efecto distinto puede ser con la opción Tinta, 50% y tinta de color rojo.

5. Clic para volver a seleccionar el fotograma inicial en la Línea de Tiempo. Selecciona Insertar > Línea de tiempo >

Crear interpolación de movimiento.

6. Para visualizar la animación seleccionar Control > Reproducir o bien Control > Probar Película.



Animaciones fotograma a fotograma

En la animación fotograma a fotograma se cambia el contenido del escenario en cada fotograma. Es idóneo para

las animaciones complejas en las que la imagen cambia en cada fotograma además de moverse. Este tipo de

animación genera archivos más grandes que por interpolación.

Arrastra una instancia del símbolo dance01 desde la carpeta

Gráficos/Baile en Ventana > Otros paneles > Bibliotecas comunes > Curso

hasta el escenario.

Con la instancia de dance1 seleccionada en el escenario, introduce 50

como valores en las casillas X e Y del Inspector de propiedades. De esta

forma este elemento se situará en un mismo sitio del escenario.

Clic en el siguiente fotograma hacia la derecha de la misma capa.

Selecciona Insertar > Línea de tiempo > Fotograma clave vacío o bien clic derecho sobre el fotograma para

seleccionar la opción Insertar fotograma clave vacío en el menú contextual. Repite los pasos 1 y 2 para ir

insertando en cada nuevo fotograma clave un nuevo símbolo de la carpeta Baile: dance02, dance03, etc.

hasta crear el movimiento completo.

Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.

Interpolación de movimiento utilizando capa guía (clásica)

Las capas de guía de movimiento permiten dibujar trazados no visibles al usuario a lo largo de los cuales se

mueven objetos en el escenario. Se pueden vincular varias capas a una capa de guía de movimiento para hacer

que varios objetos sigan el mismo trazado. Al vincular una capa normal a una capa de guía de movimiento se

convierte en un tipo de capa con guía.

1. Doble clic sobre el nombre de la Capa 1 para cambiar su nombre: Escribe Fondo

y luego pulsa <enter>



2. Abre la Biblioteca común Curso: Ventana > Otros paneles > Bibliotecas comunes> Curso. Desde la carpeta

Gráficos, arrastra una instancia del símbolo colmena hasta el borde izquierdo del escenario y una instancia del

símbolo flor hasta el extremo derecho.

3.Añade una nueva capa siguiendo uno de estos métodos:

• Clic derecho sobre el nombre de la Capa Fondo y seleccionar Insertar capa en el menú contextual

• Clic en el botón Nueva Capa en la esquina inferior derecha de la Línea de tiempo.

• Insertar > Línea de tiempo > Capa

4. Doble clic sobre el nombre de la Capa 2 para cambiar su nombre: Escribe Abeja y luego pulsa <enter>. Arrastra

una instancia del símbolo Abeja hasta el centro del escenario en esta capa.

5. En la capa Abeja crea un fotograma clave en la posición nº 30. Clic en este fotograma y seleccionar Insertar >

Línea de tiempo > Fotograma clave.

6. En la capa Fondo crea un fotograma en la posición nº30. Clic en este fotograma y seleccionar Insertar > Línea

de tiempo > Fotograma.

7. Clic para seleccionar el fotograma 1 de la capa Abeja. Selecciona la herramienta Flecha, pincha y arrastra la

abeja para situarla sobre la flor.

8. Clic para seleccionar el fotograma 30 de la capa Abeja. Selecciona la herramienta Flecha, pincha y arrastra la

abeja para situarla sobre la colmena.

9. Para crear una capa guía asociada a la capa "Abeja", puedes optar por uno de los

siguientes procedimientos:

• Selecciona la capa que contiene la animación y eliges Insertar > Guía de movimiento

• Clic con el botón derecho del ratón en la capa que contiene la animación y elige Añadir

Guía de Movimiento en el menú contextual que se despliega.

• Clic en el botón Añadir guía de movimiento Flash crea una nueva capa sobre la seleccionada con el icono de guía

de movimiento a la izquierda del nombre de la capa.



10. Selecciona el fotograma 1 de la capa guía. Utilizando la herramienta Lápiz dibuja una trayectoria curva desde

la flor a la colmena. Elige previamente la opción Suavizar del Lápiz en la caja de herramientas para conseguir

bordes más suaves en la trayectoria dibujada.

11. En la capa Abeja haz clic sobre el fotograma 1. Selecciona la herramienta Flecha, clic en la abeja y haz clic en el

modificador Ajustar a objetos.

12. Arrastra el símbolo por su punto de registro hasta ajustar el centro del símbolo animado al

comienzo de la línea en este primer fotograma.

13. Repite esta operación para ajustar el centro del símbolo al final de la línea en el último

fotograma de la capa Abeja. El centro del símbolo adquiere la apariencia de un anillo negro cuando

está correctamente ajustado.

Nota: La operación de enganchar el objeto con el principio y final de la trayectoria requiere bastante pericia con el

ratón. A veces el anillo negro no se consigue ver porque no se arrastra el objeto precisamente por su punto de

registro. Si tienes bien cogido el objeto, observa cómo éste efectúa un pequeño saltito, como si fuese un imán,

para pegarse al acercarlo a la línea trayectoria. Esto es un indicio de que la operación se ha realizado con éxito.

14. Crea una secuencia de animación interpolada de movimiento mediante: Selecciona el fotograma nº 1 de la

capa Abeja y a continuación clic derecho y Crear interpolación de movimiento o bien Insertar >

Línea de tiempo > Crear interpolación de movimiento.

15. En el Inspector de Propiedades activa la casilla Orientar según trazado para

que la línea base del símbolo interpolado se oriente hacia el trazado de

movimiento. Activa también la casilla Ajustar, para que el punto de registro del

elemento interpolado se ajuste al trazado de movimiento.

16. Para visualizar la animación completa selecciona Control > Reproducir o

bien Control > Probar Película.

Interpolación de cambio de forma I: del círculo al cuadrado

Flash puede realizar por interpolación la animación de una silueta que cambia de forma en el transcurso del

tiempo.



1. Crea la imagen del primer fotograma de la secuencia. Para crear la forma, utiliza una de las herramientas de

dibujo. Traza, por ejemplo, un círculo con relleno.

2. Doble clic sobre el círculo para seleccionar su trazo y su relleno. En el Inspector de propiedades define los

siguientes parámetros: An (anchura) 100 y de Al (altura) 100 y situado en la posición X e Y (200,200) del

escenario.

3. Crea otro fotograma clave a una distancia de tantos fotogramas hacia la derecha como desees agregar: Insertar

> Línea de tiempo > Fotograma Clave Vacío en la posición nº 20, por ejemplo.

4. Crea la imagen del último fotograma de la secuencia. Puede ser otra imagen distinta, por ejemplo, un cuadrado

con relleno. También puede ser la imagen original pero modificada.

5. Doble clic sobre el cuadrado para seleccionar su trazo y su relleno. En el Inspector de propiedades puedes

definir los siguientes parámetros: anchura 100 y de altura 100 y situado en la posición (200,200) del escenario.

Con ello se consigue que la silueta cambie de forma pero que no desplace su posición sobre el escenario.

6. Clic para seleccionar el primer fotograma clave.

7. En la lista desplegable Animar selecciona la opción de interpolación Forma. Observa que al realizar esta

selección en la línea de tiempo la interpolación de forma aparece representada por una flecha del fotograma

inicial al final sobre fondo verde claro.

8. Ajusta el valor en la casilla Aceleración.

9. Elige una opción para Mezcla:

• Distributivo: crea una animación con formas intermedias suaves y regulares.

• Angular: crea una animación que mantiene las esquinas y líneas rectas en las formas intermedias.

10. Para visualizar la animación completa seleccionar Control > Reproducir o bien Control > Probar Película.



Interpolación de cambio de forma II: del uno al dos

Una capa máscara es un tipo de capa donde los elementos que contiene: formas, instancias de símbolos, etc

definen áreas o agujeros a través de los cuales es visible el contenido de la capa situada debajo.

Las formas y símbolos de una capa máscara admiten animación. Por ello las capas máscara se suelen utilizar para

obtener el efecto de foco y de transiciones. Vamos a diseñar una animación que muestre un efecto de foco

luminoso sobre la palabra Bienvenidos.

1. Mediante Modificar > Documento despliega el cuadro de diálogo Propiedades del documento. En el menú

desplegable Color de fondo selecciona el color negro.

2. Selecciona la herramienta Texto. En el Inspector de propiedades define como Color de relleno de

caracteres el color blanco y como tamaño de la fuente 60 puntos. Clic en el centro del escenario y escribe

“Bienvenidos”.

3. Elige la herramienta Flecha, pincha y arrastra este cuadro de texto para situarlo en el centro del escenario.

4. Con la capa seleccionada, elige Insertar > Línea de tiempo > Capa para crear una capa nueva encima. Esta nueva

capa será la máscara.

5. Haz clic derecho sobre el nombre de la capa de máscara en la Línea de Tiempo y elige Máscara en el menú

contextual. La capa se convierte en una capa de máscara, señalada por un icono de capa máscara. La capa situada

inmediatamente debajo está vinculada a la capa de máscara y se muestra su contenido a través del área rellena

en la máscara. El nombre de capa de máscara aparece con sangría y su icono cambia.

6. Desbloquea la capa máscara antes de editarla.

7. En la capa máscara, dibuja un círculo seleccionando previamente la herramienta Óvalo. Una capa de máscara

siempre cubre la capa situada debajo, por tanto asegúrate de crear la capa de máscara en el lugar correcto.

Puedes dibujar una forma rellena, colocar un texto o crear una instancia de un símbolo en la capa de máscara.

Flash ignora los mapas de bits, degradados, transparencias, colores y estilos de línea en una capa de máscara.

Todas las áreas rellenas de una máscara son transparentes; y las áreas no rellenas son opacas



8. Selecciona la herramienta Flecha y haz doble clic sobre el óvalo dibujado. A continuación selecciona Modificar

> Convertir en símbolo. En el cuadro de diálogo Convertir en símbolo define como nombre del símbolo: Foco y

como comportamiento Gráfico. Clic en Aceptar. La animación de movimiento por interpolación sólo se puede

aplicar a instancias de símbolos luego es necesario convertir esta forma circular sobre el escenario en un símbolo.

9. Arrastra este nuevo símbolo para situarlo a la izquierda y a la misma altura del rótulo que dice Bienvenidos.

10. Desbloquea la capa que contiene el rótulo de texto y para que el texto se visualice hasta el fotograma nº 20,

clic sobre este fotograma en esta capa y selecciona Insertar > Línea de tiempo > Fotograma (no es necesario

insertar un fotograma clave puesto que el contenido en esta capa no cambia).

11. Ahora vamos a crear por interpolación la animación de movimiento del foco. Mediante Insertar > Línea de

tiempo > Fotograma Clave, crea un fotograma clave en el fotograma nº 20 de la capa máscara. Clic sobre este

fotograma. Una vez situado en él desplazar la instancia del Foco al lado derecho del rótulo Bienvenidos

manteniendo su altura.

12. Clic derecho sobre el fotograma 1 de la capa máscara y selecciona Crear interpolación de movimiento. Con

esta operación hemos dotado de movimiento por interpolación a la instancia foco dentro de la capa máscara.

13. Control > Probar película para comprobar el efecto foco diseñado.



LISTA DE COTEJO M2B4IEM1

Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por producto: Las capas y animación aplicadas en una película.

Evidencia de actitud asociada: Orden

Instrucciones para el alumno: Elabora una película en un programa de animación aplicando las capas y animación de acuerdo a las instrucciones planteadas por el docente.

SI

NO

1. Las capas y animación de la película contienen claramente diseñados

(orden):

- Animación interpolada.

- Animación fotograma por fotograma.

- Animación interpolación de forma.

- Animación guía de movimiento.

- Animación alfa.

- Animación tinta.

- Animación de máscaras.

- Gifs animados.

- Capas guía.

- Capas objetos guiados.

- Capas máscaras.

- Capas con objetos enmascarados.

- Capas con vista normal.






Submódulo II: Generar animación con aplicaciones multimedia

Evidencia por desempeño: Las capas y animación aplicadas en una película.

Evidencia de actitud asociada: Orden

Instrucciones para el alumno: Elabora una película en un programa de

animación aplicando las capas y animación de acuerdo a las instrucciones

planteadas por el docente.

SI

NO

1. ¿Manipuló los objetos del escenario para dar claridad al concepto de

diseño general de la animación (orden)?

2. ¿Definió fotogramas clave para animación interpolada?

3. ¿Aplicó la animación interpolada a símbolos gráficos en el escenario

siguiendo la secuencia de instrucciones del software de animación?

4. ¿Utilizó la animación fotograma a fotograma en la película?

5. ¿Aplicó animación interpolación de forma para las formas dibujadas

en el escenario sin afectar la claridad del concepto de animación?

6. ¿Manipuló las capas en la línea de tiempo?

7. ¿Definió capas máscaras para animación en el escenario con orden?

8. ¿Aplicó animación máscara con los símbolos definidos en el escenario?

9. ¿Definió capas guía para animación guía de movimiento?

10. ¿Aplicó animación guía de movimiento a símbolos del escenario?

11. ¿Aplicó la herramienta papel cebolla en los elementos de la línea del

tiempo?

12. ¿Aplicó animaciones predefinidas a los objetos y símbolos de la

película?

13. ¿Importó gráficos vectoriales que permitan hacer comprensible el

concepto de diseño a la película (orden)?

14. ¿Importó gráficos en mapas de bits que permitan clarificar el

concepto general de diseño a la película (orden)?

15. ¿Importó video a la película respetando la secuencia en el

procedimiento marcado por el software de animación (orden)?

16. ¿Importó sonido a la película respetando la secuencia en el

procedimiento marcado por el software de animación (orden)?

17. ¿Importó Gif animados a la película?

18. ¿Importó archivos PostScript a la película?



19. ¿Generó películas con animaciones claras y comprensibles (orden)?

20. ¿Exportó imágenes siguiendo la secuencia en el procedimiento

marcado por el software de animación (orden)? 21. ¿Exportó películas respetando la secuencia en el procedimiento marcado por el software de animación (orden)?





Bloque V: Manipular botones.

Antes de comenzar

Al comenzar el trabajo con botones, es importante conocer los siguientes aspectos básicos de Flash Pro:

Existen distintos tipos de creación de botones en Flash Pro.

Existen dos partes en el comportamiento del botón. La primera es el modo en que el propio botón reacciona

cuando se hace clic o se pasa sobre el mismo. La segunda es lo que sucede en el archivo de Flash Pro cuando se

hace clic en el botón.

La mayor parte de los botones están diseñados con diferentes estados de Arriba, Presionado y Sobre. Estos

estados permiten al botón tener diferentes aspectos cuando el cursor está sobre el mismo y si se hace clic en el

botón.

Los botones de Flash Pro siempre requieren ActionScript para llevar a cabo operaciones. El código pre

programado de ActionScript 3.0 para muchos botones habituales está disponible en el panel Fragmentos de

código. Consulte Cómo añadir interactividad mediante fragmentos de código.

Existen dos versiones de ActionScript, 2.0 y 3.0. Estas versiones no son compatibles entre sí. Solo se debe

seleccionar una versión para utilizar con todos los botones en un solo archivo de Flash Pro.

El código ActionScript de los botones debe existir en los mismos fotogramas que los botones.

Es importante estar seguro de entender bien el procedimiento de trabajo con la línea de tiempo en Flash. Es

importante para crear botones que quiere que aparezcan en más de un fotograma de la línea de tiempo. Consulte

Trabajo con líneas de tiempo.

Para probar la funcionalidad del botón, utilice el comando Control > Probar película > Probar. Es posible pre

visualizar los estados de un símbolo de botón en el escenario, seleccionado Control > Habilitar botones simples.

Este comando permite ver los estados de un símbolo de botón sin utilizar Control > Probar película > Probar.

Crear y manipula los aspectos del botón (reposo, sobre, presionado, zona activa).

Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel

que la está visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web

o cualquier otro.



Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones.

También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se

les está pulsando, por ejemplo.

Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web,

que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente bastante

grande ya que el uso de los botones es una práctica muy habitual en el diseño en Internet. Sin embargo, en Flash no

ocurre así. Su interfaz está diseñada de manera especial para la creación de botones, lo que nos permite crear todos

estos efectos de una manera muy sencilla.

Al igual que los otros símbolos de Flash, los botones tienen su propia línea de tiempos. Esta es independiente pero,

sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón.

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él.

Sobre. Aspecto del botón cuando situamos el puntero sobre él.

Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.

Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre

todo en botones compuestos sólo por texto como veremos más adelante.

Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad

de estos símbolos, pero no es así.

Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las

posibilidades de todos los símbolos dota a los botones de gran espectacularidad.

En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo

de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha

estructura.

Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que

nos ofrece Flash.

Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el comportamiento

Botón y asignaremos un nombre a nuestro nuevo símbolo.



De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos

internamente.

Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con

el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar.

Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado

anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6

para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del

botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es

importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash

una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón.

Aquí podemos ver una muestra de creación de un botón ovalado. Como resultado obtenemos el botón que

continuación mostramos. http://www.aulaclic.com.es/flash8/secuencias/crear_boton.htm

Este es un botón muy básico, como veremos se pueden complicar mucho, pero para empezar nos servirá con este.

Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y

por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra película y

seleccionando el botón creado. Para ver lo que comentábamos bastará con pulsar la tecla situada a la derecha de

la vista previa del símbolo.

Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares,

cuadrados y circulares, cuya creación es inmediata como vimos en el punto anterior, también hay otros muchos tipos

de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de páginas web.

http://www.aulaclic.com.es/flash8/secuencias/crear_boton.htm



Entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente,

dibujos con diferentes motivos, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más

expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus

herramientas de dibujo nos ofrece.

Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los botones en forma de

píldora. Puesto que existen muchas formas de conseguir estos efectos, a continuación tienes un ejercicio paso a paso

que muestra una forma de conseguir el relieve en un botón circular.

En un botón puede utilizarse un clip de película o un símbolo gráfico, pero no puede utilizarse otro botón. Utilice

símbolos de clips de película si desea crear un botón animado.

(a) (b) (c) (d)

(a) Imagen con la que iniciará tu botón (up).

(b) Imagen que se mostrará cuando el ratón pase por arriba del botón (over). (c) Imagen que se mostrará cuando des Click al botón (down).

(d) Área sensible al ratón (hit).

Aplicar acciones y eventos del ratón y el teclado.



Botones de texto. La importancia de la zona activa

Los botones, como hemos visto, poseen un fotograma en el que indicamos la zona activa. En los ejemplos vistos

hasta el momento esto parecía poco útil, ya que es común pensar que obviamente la zona activa que queremos

que tenga nuestro botón es el área que comprenden los límites de dicho botón.

Veamos como esto no es siempre tan trivial. Aquí se muestran dos botones creados en Flash 8. Comprobemos lo

que sucede al pasar el ratón por encima de uno y de otro.

Aunque parezcan iguales, la diferencia está en el momento en el que situamos el ratón en uno de los huecos que

existe entre letra y letra o, en general, todos aquellos lugares que no pertenezcan al texto propiamente dicho.

En el texto de la izquierda el botón se activa sólo cuando situamos el puntero del ratón sobre la letra. Esto puede

ser incómodo y puede llevar a confusión, ya que aquel que navegue por nuestras páginas simplemente querrá

hacer uso del botón y no tener que intentar apuntar concretamente a unas letras que quizá sean muy estrechas.

Esto es debido al mal uso de la zona activa. Para solucionar este problema sigue los siguientes pasos:

Haz doble clic sobre el botón para entrar en su modo de edición.

Haz clic sobre el fotograma de Zona Activa, si no hubiese ningún fotograma clave creado haz clic sobre él y pulsa

la tecla F6 para crear uno.

Una vez en el estado Zona Activa seleccionamos la herramienta Rectángulo y dibujamos un rectángulo sobre el

texto tapándolo en su totalidad. Así definiremos toda el área del rectángulo como zona activa al ratón.

Vuelve al modo de edición normal pulsando el enlace a Escena 1 sobre la Línea de tiempos.

http://www.aulaclic.com.es/flash8/secuencias/boton_texto.htm

Incluir un clip en un botón

La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad.

CLIC AQUÍ CLIC AQUÍ

http://www.aulaclic.com.es/flash8/secuencias/boton_texto.htm



Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación

para ir más allá de un cambio de color.

También es común ver un clip de película actuando como un botón. Esto caso se puede hacer por ejemplo

poniendo el clip en el fotograma Reposo.

Veamos por ejemplo el botón siguiente:

Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza algo, pero quizá

no tengamos claro qué.

Si nosotros en determinado momento no queremos que esto ocurra en nuestras páginas web, podemos recurrir a

la introducción de un Clip en el botón, que explique un poco más acerca de lo que pasará si pulsamos.

Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, sólo tendrás que, primero, hacer doble clic

sobre el botón para entrar en su modo de edición.

Haz clic en el estado Sobre para modificarlo. Selecciona el texto y pulsa la tecla SUPRIMIR para eliminarlo.

Ahora abre la Biblioteca desde el menú Ventana → Biblioteca donde se encontrará el clip que habremos

creado previamente. Selecciónalo y arrástralo sobre el botón.

Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse.

Aquí puedes seguir el proceso que acabamos de comentar

http://www.aulaclic.com.es/flash8/secuencias/clip_boton.htm

Y este es el resultado.

Crear botones invisibles y de varias capas.

Bitmaps y Botones

Además de clips, los botones también pueden contener símbolos de tipo Gráfico.

http://www.aulaclic.com.es/flash8/secuencias/clip_boton.htm



Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer con un clip,

vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que están muy extendidos como forma de

expresión gráfica a lo largo y ancho de la Red.

Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante

hacer uso de ellos en la creación de botones, pero no es así.

Básicamente podemos hacer dos cosas:

1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como el que se

consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash).

2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero el Bitmap y

después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar cada fotograma clave,

convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash

(Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos.

He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo

hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo, lo que da la

sensación de estar apagado (también podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado el

GIF original para que al pasar sobre el botón de la sensación de encenderse. Finalmente le hemos aumentado la

cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.



Auto Evaluación del Bloque.

Solo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta.

Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.

Si pulsas Restablecer podrás repetir la evaluación.

1. Es posible determinar en qué zona del botón queremos que sean aplicables las acciones.


2. Los botones pueden contener cualquier otro símbolo en su interior.


3. La línea de tiempos de un botón sólo puede tener una capa y cuatro fotogramas.



a) Un botón es capaz de controlar la reproducción de toda una película.

b) Si en un botón no definimos la Zona Activa el no reaccionará ante ninguna acción.

c) Los botones son la base de la interactividad de Flash.

5. Podemos asociar acciones a un botón para que, por ejemplo, abra una ventana nueva y la direccione a aulaclic.com.


6. Es posible incluir un Clip de película en un botón.






OBSERVACION

ES

Evidencia por desempeño: Los botones creados en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: En una película en un programa de animación crea los botones siguiendo las

instrucciones planteadas por el docente.

SI NO

1. ¿Estructuró y creó botones para dar claridad al concepto de diseño de animación (orden)? 2. ¿Manipuló los fotogramas del botón?

- Fotograma reposo. - Fotograma Sobre. - Fotograma Presionado. - Fotograma Zona activa.

3. ¿Creó botones estáticos? 4. ¿Creó botones dinámicos? 5. ¿Aplicó animaciones a los botones sin alterar la claridad de su concepto de diseño de animación (orden)? 6. ¿Agregó acciones al botón facilitando la comprensión del concepto de diseño de la película (orden)? 7. ¿Agregó acciones al botón asociadas al ratón y el teclado permitiendo claridad para la navegación de la película (orden)? 8. ¿Estableció atributos de invisibilidad a los botones? 9. ¿Aplicó contenido de los botones en múltiples capas permitiendo comprender el concepto de diseño y animación del botón (orden)?


LUGAR Y

FECHA DE APLICACIÓN





OBSERVACIONES

Evidencia por producto: Los botones creados en una película. videncia de actitud asociada: Orden. Instrucciones para el alumno: En una película en un programa de animación crea los botones siguiendo las

instrucciones planteadas por el docente.

SI NO

1. La película contiene claramente organizados (orden): - Botones con fotogramas reposo, sobre, presionado, zona activa. - Botones estáticos. - Botones con acciones. - Botones animados. - Botones con símbolos anidados. - Botones Invisibles. - Botones de varias capas.





Bloque VI: Manipular sonido.

Comenzando

Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de escaso tamaño y

de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún

así, siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3)

en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la página sin

llegar a escucharla.

Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las páginas web

es un poco más fácil, ¿qué aporta FLASH?

Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff y .mp3) de forma fácil

y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con

nuestra película.

Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos (música de fondo)

e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último

necesitaría que toda la película estuviera descargada previamente, para evitar "atascos" durante el desarrollo de

la animación). En definitiva, Flash nos lo vuelve a poner fácil.

Importar Sonidos http://www.aulaclic.com.es/flash8/secuencias/sonidos.htm

"Importar" y se puede hacer con sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es

más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando

queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que

participan en la película (este Panel se verá más adelante).

Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente.

Una vez esté importado, podremos usarlo con total libertad.

Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.

http://www.aulaclic.com.es/flash8/secuencias/sonidos.htm



Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los

formatos de sonido.

Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Seleccionalo

haciendo clic sobre él y haz pulsa el botón Aceptar.

El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca).

Propiedades de los Sonidos

En Flash, todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aquí tenemos todo lo

necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningún

sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto

cambie.

Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algún fotograma de nuestra

película, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:



Veamos las partes que tiene este panel.

Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas, deberemos seleccionar la

canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarlo).

Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo que el sonido pase del

canal izquierdo al derecho (esto crea la sensación de que el sonido te envuelve ya que lo oyes por un sitio y luego

por otro, aunque queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente

progresivamente etc... Si deseamos añadir complejos efectos sonoros, deberemos tratar adecuadamente el

sonido con algún programa creado específicamente para este propósito antes de importarlo.

Flash pone valores predeterminados, si deseas editarlos cambia los valores de Efectos y/o Sincronización.

Opciones de Efectos:

Nosotros podemos dar diferentes efectos a nuestro sonido, como por ejemplo: cambios a los distintos canales y

descenso o ascenso de volumen.

Opciones de sincronización:

• Evento.- Sincroniza el sonido con un evento. Un evento de sonido no comienza a sonar hasta que aparece el

fotograma clave inicial y suena por completo, independientemente de la línea de tiempo, aunque la película

se detenga. Al reproducir la película publicada los eventos de sonido se mezclan.

• Inicio.- Es igual que Evento, pero si el sonido ya se está reproduciendo, inicia una nueva instancia.

• Detener.- Detiene el sonido especificado.

• Flujo.- Sincroniza el sonido para reproducirlo en un sitio Web, Flash hace que la animación vaya a la misma

velocidad que los flujos de sonido. En los eventos de sonido, si la animación se detiene también lo hacen

flujos de sonido.

Al igual que con los símbolos, sólo es necesaria una copia de archivo de sonido para utilizar el sonido de varias

formas en la película.

Las características o propiedades que tenemos en nuestra consola de sonido son las que se muestran en la

imagen que a continuación se presenta:

Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro sonido, estas son las

opciones que tenemos:

Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto y provoca que el sonido

se empiece a reproducir al pasar la película por el fotograma en el que está situado. También se puede sincronizar

el sonido con botones y los demás tipos de símbolos.



Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si está seleccionado Inicio en vez

de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" del sonido actual. Puede ser

un efecto muy atractivo, o puede provocar que se forme "ruido" en nuestra película.

Detener: Detiene el sonido seleccionado.

Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado, por tanto, si la carga de la

película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este

efecto puede dar la sensación de que la película se corta de un modo muy brusco (pensar en que se considera

normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una

reacción muy negativa en los que pueden estar viendo nuestra película).

Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje

hable durante una película. En esta situación, es muy recomendable que el sonido y las imágenes estén

sincronizadas.

Repetir: Determina el número de veces que se reproducirá el sonido según lo que escribas en la caja de texto de

la derecha. También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un

bluce hasta llegar al siguiente fotograma clave.

No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que al estar sincronizados los

sonidos con las imágenes, provocaríamos que las imágenes (y los fotogramas que las contengan) se dupliquen

también, aumentando considerablemente el tamaño de la película.

Ahora que ya sabemos importar un sonido, qué opciones podemos modificar y para qué sirve cada una. Veamos

lo más importante, cómo insertarlos en nuestra película.

Supongamos que queremos insertar un sonido en un fotograma determinado, de modo que cuando la película

Flash llegue a este fotograma comience a reproducirse el sonido. Para que un sonido se reproduzca al llegar a un

fotograma, deberemos seleccionar el fotograma en el que queremos que empiece a reproducirse el sonido. Una

vez allí, abriremos el Panel Propiedades e importaremos el sonido que queramos del modo visto en el punto

anterior. Otro modo más rápido aún consistiría en seleccionar dicho sonido en la Biblioteca y arrastrarlo al

fotograma en el que queramos que se empiece a reproducir el sonido (al fotograma, no a la línea de tiempo).

De este modo insertamos un sonido, pero ¿suena tal y cómo queremos que suene? ... Depende de lo que

busquemos.

Por defecto Flash entiende que quieres reproducir el sonido en su totalidad, sino ¿para qué insertarlo entero?, de

modo que Flash reproducirá el sonido todas las veces que le hayas indicado en Repetir y el sonido sonará aunque

el fotograma en el que esté no sea el que se está ejecutando en ese instante. Si quisiéramos que el sonido pare



cuando entremos en otro fotograma, lo podemos hacer de 2 formas distintas, ambas combinando las opciones

que nos ofrece el Panel Propiedades.

La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario. El sonido se

añadirá al fotograma en el que nos encontramos.

Otra opción sería la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el panel Propiedades del

fotograma seleccionado:

En la opción Sonido seleccionaríamos el audio que queremos añadir al fotograma. Luego modificaríamos la opción

Sinc. del siguiente modo:

Si seleccionamos Flujo, el sonido se reproducirá hasta llegar al primer fotograma que no lo contenga.

Podemos seleccionar Stop para marcar un fotograma de modo que el sonido se detenga al llegar a él.

http://www.aulaclic.com.es/flash8/secuencias/insertar_sonidos.htm

http://www.aulaclic.com.es/flash8/secuencias/trabajar_sonidos.htm

Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. Aún así, los

efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos

realizar. Disponemos de estos efectos:

Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo.

Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho.

Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego

pasar al derecho.

Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego

pasar al izquierdo.

Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente.

http://www.aulaclic.com.es/flash8/secuencias/insertar_sonidos.htm

http://www.aulaclic.com.es/flash8/secuencias/trabajar_sonidos.htm



Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente.

Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y sencillo. Desde este editor

podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. Podemos crear los efectos anteriores

ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida.

Esta es la apariencia del Panel Personalizar Sonido. La parte superior representa el canal izquierdo y la parte

inferior el canal derecho. Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido

transcurrido en cada punto.

Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen.

En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen está al máximo), pero el canal

derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldría a un Aumento

Progresivo en el canal derecho).

Como ya se ha comentado, los sonidos que Flash 8 puede importar deben tener las extensiones .wav o .mp3. Si

no sabes las diferencias entre estos tipos de archivos, puedes consultar nuestro tema básico.

Por tanto, cuando queramos añadir un sonido a nuestra película, deberemos decantarnos por uno de estos 2

formatos. Lo normal es que el sonido que pretendamos insertar ya esté en uno de ellos, pero no debemos olvidar

que existen multitud de programas que convierten un sonido con extensión .mp3 a uno .wav y viceversa, por lo

que no debe ser inconveniente el formato que tenga el sonido en un principio.

La pregunta surge en seguida ¿Cuál es mejor? ...

Esta pregunta es más importante de lo que parece, ya que si decidimos que nuestra película tenga sonidos,

deberemos asumir una carga muy importante en cuanto a tamaño de la película y en consecuencia en cuanto a



tiempo de descarga. Lo habitual es que los sonidos ocupen más de la mitad del espacio total y muchas veces no

valdrá la pena insertarlos...

Una vez decididos a insertar el sonido, la lógica nos dice que insertemos el sonido que ocupe un espacio menor en

el disco duro, ya que este espacio es el que ocupará en nuestra película. Esto es una aproximación, ya que Flash

comprime todo aquello que insertamos en nuestras películas.

Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos .wav (10 veces menos o

más), por lo que parece recomendable insertar .mp3 en lugar de .wav, ahora bien ¿Puede Flash comprimir un

sonido ya comprimido? Es decir, si un sonido .wav ha sido comprimido y ahora tiene extensión .mp3, ¿podrá Flash

volver a comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos en nuestras películas, pero

si el sonido resulta estar ya comprimido, no podrá volver a comprimirlo (en realidad si que consigue comprimirlo,

pero el sonido final es el mismo que el inicial).

Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav más de lo que comprime el

formato .mp3, para ver bien este aspecto, hemos preparado varios ejemplos...

Ejemplo:

Contamos con una película con un único frame que está vacío. Esta película, una vez lista para ser vista (.swf)

ocupa 1KB.

Tenemos 1 sonido .wav que ocupa 1596 KB

Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismo sonido en formato

.mp3, ocupa 145 KB. (La calidad de sonido es prácticamente idéntica).

Ahora insertamos el sonido .wav en la película original y la exportamos (esto se trata en el último tema).

Resultado: Una película con sonido (película 1) que ocupa 37KB.

Insertamos después el sonido .mp3 en la película original.

Resultado: Una película con sonido (película 2) que ocupa 145 KB

Conclusión: La película con un sonido .wav ocupa casi 5 veces menos que la que tiene el mismo sonido en .mp3,

por tanto parece recomendable insertar sonidos .wav (la compresión de audio que logra Flash es muy grande).

Como contrapartida, podría apreciarse pérdida de calidad en el sonido que se escucha en la película 1. Esta

pérdida será importante según el tipo de sonido que sea. Si es una voz, por ejemplo, deberíamos insertar .mp3 ya

que necesariamente deberá escucharse bien, si es música de fondo, es probable que aunque se pierda calidad, el

resultado final sea aceptable y sea conveniente quedarnos con la película de menor tamaño. Lo mejor es probar

ambas versiones y evaluar el resultado.

Al igual que con los símbolos, sólo es necesaria una copia de archivo de sonido para utilizar el sonido de varias

formas en la película.



Las características o propiedades que tenemos en nuestra consola de sonido son las que se muestran en la

imagen que a continuación se presenta:



Auto Evaluación:

Solo una respuesta es válida por pregunta.

1. Desde un principio podemos trabajar con cualquier sonido que se encuentre en nuestro disco duro.


2. Importar un sonido es lo mismo que insertarlo en un fotograma.


3. Desde el Panel Propiedades, si tenemos seleccionado un fotograma se puede seleccionar qué sonido queremos reproducir, cuántas

veces y qué efectos queremos darle.


4. La calidad del sonido es importante a la hora de importarlo en nuestra película.


5. ¿Cuál de estas 3 afirmaciones es correcta?.

a) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, importaremos y usaremos siempre el MP3.

b) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, importaremos y usaremos siempre el WAV.

c) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, usaremos uno u otro en función de ciertos parámetros

tales como el tamaño, la calidad y el tipo de sonido que sea.

6. ¿Cuál de las siguientes afirmaciones es falsa?

a) El efecto Canal Izquierdo aumenta la calidad del sonido, ya que lo concentra todo en un único altavoz, evitando la pérdida de calidad.

b) El efecto Aumento Progresivo puede ser una buena forma de introducir un sonido, ya que provoca que el sonido aumente de volumen

progresivamente.

c) El efecto Desvanecimiento de izquierda a derecha crea una sensación de movimiento, ya que el sonido pasa de un altavoz a otro.

7. Si configuramos un sonido para que se reproduzca 9999 veces...

a) Se reproducirá indefinidamente.

b) La respuesta anterior es falsa.

8. Para efectos de voz en nuestras películas es mejor utilizar el método...

a) Flujo. b) Inicio - Detener.





OBSERVACIONES

Evidencia por desempeño: El sonido editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita el sonido de la película en un programa de animación siguiendo las instrucciones planteadas por el docente..

SI NO

1. ¿Importó sonidos MP3 y WAV a la biblioteca de la película siguiendo la secuencia en el procedimiento marcado por el software de animación (orden)? 2. ¿Editó la calidad del sonido a parámetros ADPCM de la película? 3. ¿Manipuló los sonidos en la biblioteca? 4. ¿Insertó sonido en las capas de la película facilitando la comprensión de la animación final (orden)? 5. ¿Insertó sonido en los botones de la película facilitando la comprensión y claridad de la animación final (orden)? 6. ¿Aplicó efectos de reproducción simultánea a los sonidos incluidos en la película? 7. ¿Sincronizó el sonido con los objetos de la película? 8. ¿Trasladó sonidos entre bibliotecas de diferentes películas sin alterar el concepto general de diseño de cada animación (orden)?







OBSERVACIONES

Evidencia por producto: El sonido editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita el sonido en película en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI NO

1. La película para facilitar la comprensión de la animación final, contiene (orden): - Sonido con calidad de CD. - Sonido sincronizado con la animación. - Sonido con bucles de reproducción. - Sonido asignado a fotogramas. - Sonido asignado a botones.





Bloque VII: Manipular vídeo. Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En particular Flash 8 incorpora

una serie de características que facilitan la tarea al máximo y permiten el uso de vídeos como si se tratase de

cualquier otro objeto en pantalla.

A continuación explicaremos cómo hacerlo y cuales son las mejores alternativas. Utilizaremos el siguiente

ejemplo para documentar algunos de los pasos que deberemos realizar.

Importando Vídeos

Lo primero que deberemos hacer es transformar

nuestro vídeo de formato avi, mpeg, mov, wmv o

dv al formato que utiliza Flash: flv.

Este formato, además de crear archivos de vídeo

de buena calidad muy comprimidos, te permitirá

introducir puntos de referencia desde donde

controlaremos la interacción del entorno de la

película con el vídeo.

Haz clic en Archivo → Importar → Importar vídeo

para empezar a configurar el archivo .flv que

crearemos.

Se abrirá una pantalla como esta:



Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Haz clic en el botón

Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo para seguir

pulsando el botón Siguiente.

También es posible marcar la opción Ya se ha implementado en un servidor Web, Flash Vídeo Streaming Service o

Flash Communication Server. En este caso deberás introducir la URL del archivo, que previamente habrá sido

preparado para poder utilizarlo en Flash.

La siguiente pantalla te permitirá seleccionar el modo en el que se implementará el vídeo:

Puedes elegir entre varias opciones, si seleccionas

cualquiera de ellas verás su descripción en la derecha de la

pantalla. Te adelantamos que para la implementación de

vídeo para Streaming deberás disponer de un servidor (de

pago) que transmita tu vídeo al usuario de una forma

óptima.

La opción Descarga progresiva, a pesar de no ser la más

aconsejada para conexiones de baja velocidad (sobre todo

para archivos muy grandes) es la más utilizada por

aquellos que no disponen de los recursos necesarios para

contratar los servicios de un servidor de vídeo en formato

Stream.

Así que seleccionaremos la primera opción y pulsaremos

Siguiente.



Ahora es cuando realmente configuraremos el archivo de salida. Antes que nada pulsa el botón Mostrar

configuración avanzada.

Verás 3 pestañas. La primera te servirá para ajustar la compresión y calidad del vídeo. Puedes seleccionarla

directamente en el desplegable de arriba del todo o cambiar alguna de las opciones que te aparecen en la

pestaña Codificación.

Nosotros haremos hincapié en la pestaña Puntos de referencia.

Existen dos tipos de puntos de referencia diferentes: el de Navegación y el de Evento.

Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar en la película. Sería algo así

como crear capítulos sobre los que podremos navegar utilizando botones y ActionScript.

El punto de Referencia de Evento nos permitirá crear interacciones con el resto de objetos en la película. Estos

puntos nos permitirán pasar parámetros que podremos recuperar mediante ActionScript.

En el ejemplo hemos creado los siguientes puntos de referencia:



Como ves hay 3 de Navegación, a los cuales acudiremos pulsando los botones para saltar entre los capítulos de la

película. Luego hemos añadido 4 puntos de Evento desde los que pasaremos un parámetro que hará que se

muestre determinado fotograma de un clip que se encontrará en el Escenario.

Puedes realizar el ejercicio paso a paso de Puntos de Referencia para ver cómo lo hacerlo.

Ejercicio

Haz clic en Archivo → Importar → Importar vídeo.

En la pantalla que aparecerá pulsa el botón Examinar y busca el archivo tux.avi dentro de la carpeta

ejercicios/puntos referencia del curso.

Selecciónalo y pulsa Abrir.

Haz clic en el botón Siguiente.

En la nueva pantalla, asegúrate de que la opción Descarga progresiva desde un servidor web está marcada y pulsa

Siguiente.

Ahora pulsa el botón Mostrar configuración avanzada y haz clic sobre la pestaña Puntos de referencia.

Añadiremos un punto de referencia al principio del vídeo. Haz clic en el botón +.

Dale el nombre de inicio y selecciona Navegación en el desplegable Tipo.

Ahora arrastraremos el cabezal hasta el principio de la primera carrera:

Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo y su duración.

Cuando hayas terminado pulsa el botón Siguiente.

Será en el segundo 07.359, puedes utilizar las flechas izquierda y derecha para ajustar el tiempo.



Pulsa el botón + de nuevo para crear otro punto de referencia, le daremos el nombre de carrera1 y

seleccionaremos Navegación.

Desplaza el cabezal al segundo 07.360.

Crea un punto de referencia pulsando el botón + y dale el nombre de carrera1inicio y selecciona Evento en Tipo.

Ahora añadiremos un parámetro, haz clic en el botón + de la lista de la derecha (Parámetros).

Dale el nombre de fotograma y el valor ready.

Desplázate hasta el segundo 42.280 y crea otro punto de referencia llamado carrera1fin de Tipo Evento.

Dale un parámetro pulsando el botón + en la lista de la derecha, dale el nombre fotograma y el valor win.

Desplázate hasta el segundo 58.159 e inserta otro punto de referencia. Llámalo carrera2 y dale Tipo Navegación.

Cambia el cabezal a la posición 58.160 y crea un punto de referencia llamado carrera2inicio de Tipo Evento.

Dale un parámetro llamado fotograma y con valor ready.

Desplaza el cabezal al segundo 1:34.600, crea allí un último punto de referencia.

Dale el nombre carrera2fin y el Tipo Evento.

Crea un parámetro para este punto de referencia (pulsando el botón + ), llámalo fotograma y dale el valor lose.

Ya hemos terminado, haz clic en el botón Siguiente hasta que llegue al final y empiece la importación.

Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo y su duración.

Cuando hayas terminado pulsa el botón Siguiente.



Desde aquí podrás seleccionar un estilo de controles predeterminado, elige uno o selecciona Ninguno para crear

tú mismo los controles (como veremos a continuación) y pulsa el botón Siguiente.

El sistema te avisará de que el vídeo está debidamente configurado y pasará a importarlo. Cuando haya

terminado lo añadirá directamente sobre el Escenario.

El Componente FLVPlayback

Si ya tuvieses el archivo importado a flv no haría falta que realizases las acciones anteriores, sólo deberás insertar

en el escenario un componente que incorpora Flash para la reproducción de éste.

Abre el Panel Componentes desde Ventana → Componentes y haz clic sobre FLV Playback - Player 8. Arrastra un

componente FLVPlayBack al Escenario.

Desde el Panel Parámetros podrás configurarlo. Allí encontrarás las siguientes opciones:

autoPlay: puede tomar los valores true o false. Indican si el vídeo debe reproducirse nada más abrir el archivo o

esperar a una orden para empezar a reproducirse.

autoRewind: puede tomar los valores true o false. Indica si el vídeo deberá volver a la posición inicial despés de

haberse reproducido completamente.

autoSize: puede tomar los valores true o false. Indica si el control deberá ajustarse al tamaño del vídeo, o por el

contrario deberá ser el vídeo el que se ajuste al tamaño del control.

bufferTime: especifica el número de segundos que se almacenarán en la memoria antes de que se inicie la

reproducción del vídeo.

contentPath: indica la ruta del archivo que se deberá reproducir.

cuePoints: indica los puntos de referencia que están incluidos en la película. Una vez importada la película a

formato flv no pueden ser modificados.

isLive: puede tomar los valores true o false. Este campo se utilizará para la transmisión de vídeo en vivo y sólo

podrá utilizarse a través de un servidor de Streaming.

skin: desde aquí puedes modificar la apariencia de los controles de la película y seleccionar uno entre los

predefinidos.

skinAutoHide: puede tomar los valores true o false. Indicará si los controles se pueden esconder para volver a

aprecer cuando el cursor se sitúe sobre la película.

totalTime: indica el tiempo total del vídeo.

volume: de 0 a 100. Indica el volumen máximo del vídeo.



Una vez insertada la película mediante la adición de este componente o por importación deberemos darle un

nombre de instancia para poder referirnos a él. Hazlo desde este mismo panel o desde el Panel Propiedades.

Uso de Componentes para la Reproducción

Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos desde el Panel

Componentes al Escenario y escribir unas pocas líneas en el Panel Acciones.

Para añadir estos componentes haz clic en el elemento FLV Playback Custom UI y arrastra el que tu quieras al

Escenario, veamos cuales son sus funciones.

BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior o en su defecto al inicio

de éste.

BufferingBar: muestra el progreso de descarga del vídeo.

ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente posterior o en su defecto al final

de éste.

MuteButton: establece el volumen de la película directamente a 0. Actuaría de forma similar a la línea:

miVideo.volume = 0;

PauseButton: pausa la película en el momento en el que se pulse el botón.

PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el cabezal de reproducción de

vídeo.

PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproducción desde un

mismo control.

SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la película.

StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio del vídeo.

VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una barra de volumen.

Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombrede instancia y luego

escribir lo siguiente (dependiendo de los controles que hayas arrastrado) en el Panel Acciones del fotograma 1:

miVideo.playButton = miBotonPlay;

miVideo.pauseButton = miBotonPausa;

miVideo.playPauseButton = miBotonPausaPlay;

miVideo.stopButton = miBotonStop;



mVideo.backButton = miBotonAtras;

miVideo.forwardButton = miBotonAdelante;

miVideo.muteButton = miBotonSilencio;

miVideo.volumeBar = miBarraVolumen;

miVideo.seekBar = miBarraDeslizadora;

miVideo.bufferinBar = miBarraProgreso;

El componente se asociará al vídeo y funcionará por sí solo. Fácil, ¿verdad?

Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre ellos y cambiando su forma,

tamaño o color.

Crear Controles Propios

Crear controles propios no es muy complicado en Flash 8. Sólo tienes que crear los botones que consideres

necesarios y utilizar las propiedades del componente FLVPlayback.

play(): reproduce el vídeo.

miVideo.play();

stop(): detiene el vídeo y vuelve al inicio.

miVideo.stop();

pause(): detiene el vídeo conservando su posición actual.

miVideo.pause();

seek(segundo:Number): permite el avance o retroceso de la película de vídeo.

miVideo.seek(5);

Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí.

volume: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100.

miVideo.volume = 50;

Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un botón:

on (release) {

if (miVideo.state == miVideo.PAUSED) {



miVideo.play();

}

else {

miVideo.pause();

}

}

La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el momento, puede tomar los

siguientes valores:

miVideo.PAUSED: el vídeo se encuentra pausado.

miVideo.PLAYING: el vídeo se está reproduciendo.

miVideo.REWINDING: el vídeo está en estdo de rebobinado.

miVideo.SEEKING: el vídeo está en estado de búsqueda.

miVideo.STOPPED: el vídeo se encuentra detenido.

miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer.

miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no podrá visualizarse.

miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se producirá hasta que se le asigne

una ruta a la propiedad contentPath.

miVideo.LOADING: el vídeo está en estado de carga.

Ahora veremos como interactuar con los puntos de referencia que hayamos creado.

En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que hemos creado: inicio,

carrera1 y carrera2.

El código asociado al botón sería el siguiente:

on (release) {

miVideo.seekToNavCuePoint("inicio");

miVideo.play();

}



Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de referencia que se le indique,

luego tendremos que decirle que reanude la reproducción.

También puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y

retroceder, respectivamente, por los diferentes puntos de referencia de navegación creados.

miVideo.seekToNextNavCuePoint();

miVideo.seekToPrevNavCuePoint();

AUTO EVALUACIÓN


1.Flash puede importar los siguientes tipos de archivo:

a) avi y mpeg. b) mov, wmv y dv. c) Todos los anteriores.

2. Podemos utilizar la función seekToNavCuePoint("puntoRef") para saltar a puntos de referencia de tipo...

a) de Evento. b) de Navegación.

3. ¿A qué valor cambiaremos la propiedad autoPlay si queremos que se reproduzca el vídeo nada más cargarse?.

a) True. b) False.

4. Podemos utilizar la función seek() para saltar a un segundo determinado del vídeo.


5. Si el vídeo esta en estado de DISCONNECTED...

a) Es que no se ha producido un error de conexión y no podrá visualizarse.

b) Es que aun no se le ha asignado una ruta a la propiedad contentPath .

6. La función seekToNavCuePoint("puntoREF") se sitúa en un punto de referencia ya definido y comienza la

reproducción a partir de ahí.


7. Podemos asignar un número indeterminado de parámetros a los puntos de referencia para consultarlos más

tarde a través de ActionScript.




8. El componente SeekBar muestra el porcentaje de vídeo almacenado en el buffer.


9. Además de elegir el aspecto de los controles antes de importar el vídeo, también es posible editarlo cuando ya

está importado y se encuentra en el Escenario .


10. La propiedad skinAutoHide sirve para:

a) Esconder los controles del vídeo si no se tiene el foco sobre ellos.

b) Hacer que los controles no puedan taparse por ningún otro objeto en el Escenario.





OBSERVACIONES

Evidencia por desempeño: El video editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita un video en una película en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI NO

1. ¿Importó sonidos MP3 y WAV a la biblioteca de la película siguiendo

la secuencia en el procedimiento marcado por el software de

animación (orden)?

2. ¿Editó la calidad del sonido a parámetros ADPCM de la película?

3. ¿Manipuló los sonidos en la biblioteca?

4. ¿Insertó sonido en las capas de la película facilitando la

comprensión de la animación final (orden)?

5. ¿Insertó sonido en los botones de la película facilitando la

comprensión y claridad de la animación final (orden)?

6. ¿Aplicó efectos de reproducción simultánea a los sonidos incluidos

en la película?

7. ¿Sincronizó el sonido con los objetos de la película?

8. ¿Trasladó sonidos entre bibliotecas de diferentes películas sin

alterar el concepto general de diseño de cada animación (orden)?







OBSERVACIONES

Evidencia por producto: El video editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita un video en una película en un programa de animación siguiendo las instrucciones planteadas por el docente..

SI NO

1. La película para facilitar la comprensión de la animación final,

contiene (orden):

- Clips de video.

- Video editado.

- Video con efectos.

- Video comprimido.





Bloque VIII: Publicar película. Distribución para Páginas Web

Esta es una parte importante, ya que normalmente las películas de Flash están orientadas a la publicación vía

Web.

Para publicar una película Flash en Internet de manera que forme parte de una página web deberemos

insertarla en un archivo típico de páginas web cuyo lenguaje de programación sea del estilo del HTML. Para ello

debemos atender a las opciones de publicación HTML que nos ofrece Flash, y que nos ayudarán a que nuestra

película se visualice como realmente queremos.

Las opciones de este tipo de publicación están en Archivo → Configuración de Publicación... (Pestaña HTML).

Plantilla: Para incrustar una película Flash en un documento HTML, hay que escribir una serie de códigos de

programa algo complejos y laboriosos de hacer a mano.

Para facilitarnos esta tarea Flash hace esto automáticamente pero, puesto que cada web es distinta y nuestras

necesidades van a ser muy distintas, los codigos también serán muchos y distintos, por esto Flash incluye lantillas,

que crean este código automáticamente según el tipo de publicación que deseemos:

En el botón Información que está a la derecha de la pestaña "Plantilla" se nos muestra información muy útil sobre

cada tipo de plantilla. Estas son las plantillas más comunes:

Sólo Flash: Esta es la opción predeterminada y utiliza el reproductor Flash.

Flash con FSCommand: Imprescindible cuando se usen FSCommands.

Mapa de Imágenes: Si hemos incluido una Image Map (imágenes completas que ejecutan distintas acciones según

la coordenada que se pulse) debemos activar esta opción.

Pocket PC 2003: Especialmente diseñado para Pocket Internet Explorer en Pocket PC 2003.

QuickTime: Permite incluir una película QuickTime. Etc ...

Detectar Versión de Flash: Desde aquí podemos seleccionar si queremos que nuestra película detecte la

existencia o no existencia del plugin de Flash en el ordenador del usuario, así como las páginas web donde se

insertará el código encargado de comprobarlo y las páginas web a las que se irá en caso de disponer del Plugin o

no disponer de él.

Dimensiones: Especifica la unidad en la que mediremos las dimensiones del Documento.

Anchura X Altura: Aquí introduciremos la anchura y altura, teniendo en cuenta que a veces un objeto más

grande que estas dimensiones provocará un cambio en éstas.

Reproducción: Permite realizar determinados cambios en cuanto a la reproducción de la película:



Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la reproducción, que inicialmente

aparecerá detenida.

Reproducción Indefinida: Cuando la película termine, volverá a empezar desde el principio. Esto lo hará

infinitamente.

Visualizar Menú: Permite que al hacer el usuario clic con el botón derecho del ratón sobre la película, el

menú emergente tenga todas las opciones por defecto. Si la desactivamos sólo aparecerá la opción "Acerca de

Flash".

Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animación de la película por las

fuentes predeterminadas en la máquina de quien la visualice.

Calidad: Aquí podemos modificar la calidad de visualización de la película, que depende del suavizado de la

imagen y el tiempo de reproducción. Las opciones son:

Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad.

Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero suavizado, si lo

soporta, lo aplica. El tiempo sigue siendo muy rápido.

Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitación, siempre dará

preferencia a la velocidad.

Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps.

Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si no hay animación. Da preferencia a la

buena visualización.

Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de la apariencia

frente a la velocidad.

Modo de Ventana: Opciones para la reproducción dentro de las ventanas de Windows:

Ventana: Se reproduce la película en la ventana de la web en la que está insertada.

Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película no se vean (en

páginas DHTML).

Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrás se vean.

Alineación HTML: Posición relativa de la película dentro de la página web HTML. Tenemos varias opciones:

Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos.

Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.



Derecha: Alineación a la derecha.

Superior: Alineación en el borde superior de la página.

Inferior: Alineación en el borde inferior de la página.

Escala: Si hemos especificado el tamaño en píxeles o en tanto por ciento, podemos decirle a Flash cómo

distribuir la película en el rectángulo que hemos decidido que la contenga:

Predeterminada: Se ve toda la película guardando las proporciones originales.

Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo) todo lo que sobre con el

fin de mantener las proporciones.

Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película ocupe el

rectángulo completo.

Alineación Flash: Se hace necesario alinear la película cuando esta no tiene las mismas dimensiones que el

rectángulo definido. Las opciones son:

Alineación Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.

Alineación Vertical: Podemos escoger entre Centro, Superior o Inferior.

Mostrar Mensajes de advertencia: Permite que se

muestren los posibles mensajes de error de código

Action Script.

http://www.aulaclic.com.es/flash8/secuencias/publicacion.htm

http://www.aulaclic.com.es/flash8/secuencias/publicacion.htm



AUTO EVALUACIÓN.


1. Flash nos permite trabajar con total libertad, sin preocuparnos por el tamaño de los objetos que dibujemos.


2. Agrupar los objetos o convertirlos en símbolos suelen conllevar un ahorro en espacio, pues Flash reutilizará los

objetos en lugar de crear otros nuevos desde cero.


3. Los mapas de bits, al estar formados por bits individuales, consumen menos espacio que una imagen vectorial,

con complejos cálculos matemáticos.


4. Si a pesar de todo, nuestra película supera los 80 KB, situar un cargador o preloader puede ser una buena

solución para evitar los retardos y la mala reproducción de la película.


5. ¿Cuál de estas 3 afirmaciones es correcta?.

a) Flash permite publicar películas para sus distintas versiones (desde la versión 1, pasando por la versión de

Flash 5, hasta la actual Flash 8 .

b) Los ficheros de Flash son públicos y resulta muy complejo evitar que otros puedan importar nuestras

películas, ya que Flash no incluye ningún mecanismo de seguridad.

c) Las imágenes JPG insertadas en nuestra película se insertan con una calidad determinada y ésta no puede

modificarse desde Flash.


a) Flash sólo es capaz de utilizar las fuentes (tipografías) existentes en el servidor, pues no puede acceder a las

del disco duro del usuario.

b) Flash nos permite ocultar al usuario determinadas propiedades de la película accesibles por los usuarios una

vez esté ésta publicada, tales como la opción de imprimir o modificar su calidad (accesibles mediante el botón

derecho).

c) Flash 8 nos ayuda considerablemente en la tarea de publicar nuestra película, pues nos permite crear

automáticamente un fichero HTML en el que esté contenida la película. También nos permite modificar distintas



propiedades de esta publicación, tales como la alineación de la película dentro de la página web, el tamaño, la

escala etc.

7. Desde el cuadro de diálogo de Configuración de Publicación podemos determinar los metadatos del archivo.


8. Desde el cuadro de diálogo de Configuración de Publicación es posible Publicar directamente el archivo sin

necesidad de ejecutar el comando Archivo → Publicar.


GUIA DE OBSERVACION M2B8IEM1


OBSERVACIONES

Evidencia por desempeño: El video editado en una película. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Edita un video en una película en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI NO

1. ¿Importó videos a la biblioteca de la película respetando la secuencia en el procedimiento establecido por el software de animación (orden)? 2. ¿Editó la calidad de video de la película cuidando la claridad de la animación final (orden)? 3. ¿Creó clips de video? 4. ¿Importó archivos de video Flash a la película de acuerdo a la secuencia en el procedimiento establecido por el software de animación (orden)? 5. ¿Aplicó efectos al video cuidando la claridad y comprensión del la animación final (orden)? 6. ¿Controló los clips de video en la película?







OBSERVACIONES

Evidencia por producto: Las películas publicadas. Evidencia de actitud asociada: Orden. Instrucciones para el alumno: Publica las películas en un programa de animación siguiendo las instrucciones planteadas por el docente.

SI NO

1. Las películas publicadas contienen claridad y comprensión de

(orden):

- Sonido.

- Video.

- Símbolos.

- Animaciones.

- Gifs animados.

- Reproductor independiente.



manual flash 6to semestre 1ra version publicar

Education