Libro Macromedia Flash Parte 1

Aprendamos Macromedia Flash 8 |- 1 -

Prof. César Augusto Sucari Quispe

CATARULA Aprendamos Flash 8 PRO

Macromedia ®

G U Í A E D U C A T I V A

Aprende Flash de forma

rápida y sencilla

CREA PÁGINAS WEB INTERACTIVAS CON LA TECNOLOGÍA MÁS ACTUAL

DIBUJA, INSERTA TEXTO, SONIDOS Y CREA ANIMACIONES INTERACTIVAS

DISEÑA Y DESARROLLA JUEGOS EN FLASH

César Augusto Sucari QuispeBeatriz Magda Sucari Quispe

ASOCIACIÓN EDUCATIVAASOCIACIÓN EDUCATIVA

IDEA - PERUIDEA - PERU

- 2 - | Aprendamos Macromedia Flash 8

Prof. Beatriz Magda Sucari Quispe

3ra. Edición - Derechos Reservados © 2006Asociación de Investigación de Desarrollo Educativo del AltiplanoIDEA

ASOCIACIÓN EDUCATIVA IDEA PERUJr. Fernando Rivero 321Puno - Peru

Editor y director : César Augusto Sucari Quispe

Composición y diseño: César AugustoSucari Quispe

Beatriz Magda Sucari Quispe

Diseño y diagramación: Beatriz MagdaSucari Quispe

Realización de cubierta: Beatriz MagdaSucari Quispe

Impreso y editado en: IDEA – PERU2006



Aprendamos Macromedia Flash MX

PRESENTACIÓN

Al escribir un obra respecto determinado tema, lo primero que pasa por la mente del autor es volcar en ella la mayor cantidad posible de conocimientos, esto significa centrar el objetivo en el saber del propio autor, lo cual genera un obra estática, poco pragmática y generalmente alejada de la realidad.

La dificultad no solo radica en explorar, no la mente del creador, sino, la del lector y escribir de acuerdo a sus necesidades y expectativas, dotándole al mismo de conceptos y aplicaciones dirigidas a solucionar situaciones concretas y al aprovechamiento de herramientas y software que le permitan desarrollar su creatividad.

Sin embargo lo escrito solo escrito quedará, los conceptos posiblemente sean reconocidos por su exactitud, las aplicaciones practicas quizás se conviertan en anécdotas y los gráficos y fotografías adornen un libro quizá muy bien presentado en la biblioteca de su casa, porque el verdadero conocimiento no está en este libro ni en ningún otro, está en usted mismo, si alcanza la sabiduría practica que es insustituible, lo único que pretendemos es que le agregue algo de técnica.

Este es una guía, no una receta que le asegure la conquista del mundo del diseño y animación. Este es un libro que esperamos lo lea y lo ponga en practica y recoja lo mejor de él pero sobre todo comparta con los que lo rodean y exíjase cada día más, por usted mismo.

Sin más preámbulos ¡Bienvenidos al curso de Macromedia Flash para su versión 8, este curso tiene como objetivo que desarrolles tu espíritu creador, tu disposición para diseñar y expresar tu potencial relacionados con la animación y la creación de video juegos.

César Augusto Sucari QuispeBeatriz Magda Sucari Quispe

PROFESORES DE COMPUTACIÓN E INFORMÁTICA



indice

INDICE

Pág.

Prologo del autor 3

UNIDAD 1 Primeros pasos

¿Como trabaja Flash? 5

El lenguaje de programación de flash 6

¿Qué Puedo Hacer con macromedia flash? 6

El entorno de macromedia : Flash 7

Los paneles 7

El inspector de propiedades 7

La Caja de herramientas 8

La línea de tiempo 9

La biblioteca 10

Actividad 1: Animación por interpolación de movimiento y forma 11

Conceptos de la línea de tiempo 12

Concejos de forma 13

Actividad 2: Animación de objetos por interpolación de forma 14

Transformando el texto libremente 15

Actividad 3: Animación fotograma a fotograma 17

Edición de animaciones 18

Actividad 4 : Uso de capas guías 20

Actividad 5 : Uso de las mascaras 23

Actividad 6 : Creación de botones y asignando acciones 24

Uso del panel de acciones 27

UNIDAD 2 Paginas, juegos y algo más

Actividad 7 : Botones animados 29

El comando SetProperty 30

El comando GetProperty 31

Actividad 8 : Uso de componentes 30

Trabajo con componentes en macromedia flash 32

Componente ScrollBar 33

Componente ScrollPane 34

Actividad 9 : Creación de Paginas web 35

Actividad 10 : Software Educativo : Imágenes, sonido y Animación 37

Publicación de documentos en flash 39

Actividad 11 : Principios para la creación de videojuegos 40



indice



Unidad 1

Primeros Primeros pasos pasos



C

om

pet

enci

a

Reconoce la utilidad y entorno del programa macromedia flash y participa activamente en la elaboración de secuencias de animación.

Capacidades:

1. Conoce los distintos elementos que componen el entorno de trabajo distinguiendo el uso de las mismas.

2. Crea animaciones sencillas utilizando interpolaciones, aplicando el formato de acuerdo a los elementos de trabajo.

3. Modifica elementos con la finalidad de crear animación de mayor impacto.4. Organiza secuencias de animación para presentar en las películas.5. Crea secuencias de interactividad con las animación.

Niveles Mínimos de Logro.

1. Define la filosofía de trabajo de macromedia flash y la distribución del entorno.2. Selecciona la herramienta adecuada para crear una animación sencilla de texto y

forma.3. Modifica elementos para crear una animación secuencial.4. Diferencia formas de trabajo de macromedia flash para la animación.5. Selecciona los elementos que permiten controlar la interactividad del software con el

usuario.

Contenidos Conceptuales

Filosofía de trabajo de Flash, el entorno, Animación de texto y objetos, marcaras, interactividad.



¿Qué es FLASH?

Flash es una potente herramienta creada por Macromedia – Adobe que ha superado las mejores expectativas de sus creadores.

Desde la aparición del Software de Macromedia; Flash, a mediados de 1995, en que introdujeron su version 1, la Internet ya no ha vuelto a ser el mismo lugar de antes. ya que gracias a la introducción de este software es posible encontrar lugares repletos de toda un arsenal multimedia que los diseñadores saben aprovechar muy bien para lograr sitios de gran impacto que a la postre se quedan grabados en la mente.

Macromedia Flash es la herramienta estándar de edición profesional para la creación de publicaciones Web de gran impacto. Tanto si crea logotipos animados, controles de navegación de sitios Web, animaciones de gran formato, o aplicaciones Web o sitios Web completos usando Flash, descubrirá que por su capacidad y flexibilidad, Flash es el medio ideal para desarrollar su propia creatividad.

Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, así como para crear GIFs animados.

Los motivos que han convertido a Flash en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porqué es interesante Flash.

Flash ha conseguido hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático (en contraposición a la mayoría de las páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido animaciones de todo tipo.

Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginación.

¿Como trabaja Flash?Los gráficos vectoriales aunque tengan un nombre que a más de uno asusta, son archí conocidos, y de seguro también ya ha estado familiarizado con ellos. Softwares como FreeHand, Corel Draw, Illustrator, etc. manejan este tipo de gráficos, cuyas características principales son la capacidad de escalar su tamaño a lo máximo de nuestro monitor sin perder

Requerimientos del Sistema:

Para utilizar Macromedia Flash necesitamos tener Cmputadora

Pentium I de 200 MHz o superior.

Windows 98 SE o superior

Memoria RAM de 64 MB (se recomiendan 128 MB),

85 MB de espacio disponible en disco duro.

Monitor en color de 16 bits con capacidad para una resolución de 1024 x 768

Para utilizar Flash no es importante qué versión de Windows tengamos instalada en nuestro computador. Las pantallas que se presentan en este manual se ha utilizado Windows 98SE y Windows XP - Prof, pero igualmente servirá la versión millenium.



calidad de imagen. Los bordes no se verán aserrados, como de cierto sucedería si lo que estuviéramos usando es una imagen de tipo bitmap o mapa de bits

La tecnología ShockWave Significa comprimir gráficos y sonidos lo cual hace que la transmisión de videos por Internet sea más rápida.

Las películas de Macromedia Flash corresponden a gráficos, texto, animación y aplicaciones para sitios Web. Aunque están compuestas principalmente por gráficos vectoriales, también pueden incluir video, gráficos de mapa de bits y sonidos importados. Las películas Flash pueden incorporar interactividad para permitir la introducción de datos de los espectadores y la creación de películas no lineales que pueden interactuar con otras aplicaciones Web. Los diseñadores de Internet utilizan Flash para crear controles de navegación, logotipos animados, animaciones de gran formato con sonido sincronizado e incluso sitios Web con capacidad sensorial. Las películas Flash utilizan gráficos vectoriales compactos, para que se descarguen y se adapten rápidamente al tamaño de la pantalla del usuario.

Es muy probable que ya haya visto películas Flash y haya interactuado con ellas en muchos sitios Web. Millones de usuarios de Internet han recibido Flash Player con sus equipos, navegadores o software del sistema; otros lo han descargado desde el sitio Web de Macromedia. Flash Player reside en el equipo local, donde puede reproducir películas en navegadores o como aplicaciones independientes. Ver una película Flash en Flash Player es similar a ver un DVD en un reproductor de DVD; Flash Player es el dispositivo que se utiliza para ver las películas creadas con la aplicación de edición de Flash.

Los documentos de Flash, que tienen la extensión .fla, contienen toda la información necesaria para desarrollar, diseñar y probar contenido interactivo. Los documentos de Flash no son las películas que muestra Flash Player. Los documentos con la extensión FLA se publican como películas Flash, que tienen la extensión .swf y contienen sólo la información necesaria para mostrar la película.

La mayoría de los elementos de Flash son objetos del escenario o símbolos almacenados en la biblioteca del documento. Otros corresponden a archivos de equipos locales o remotos. La biblioteca facilita la organización y ayuda a optimizar el tamaño de estos elementos. La caja de herramientas, los inspectores, los paneles y la biblioteca le ayudan a trabajar de manera eficiente con los diferentes elementos de un documento, ya sean simples o complejos.

Los símbolos son una parte importante de la creación de películas interactivas, ya que se pueden utilizar instancias de símbolos para introducir interacciones en una película. Por ejemplo, es posible crear un símbolo de botón que cambie en función de las acciones del ratón y colocar una instancia del símbolo en el escenario. Otro tipo de símbolo, el clip de película, también se utiliza para crear películas interactivas más elaboradas.

Flash permite personalizar de muchas maneras el espacio de trabajo según sus necesidades. Mediante los paneles y el inspector de propiedades, puede ver, organizar y cambiar elementos y sus atributos. Puede cambiar el tamaño de los paneles, mostrarlos y ocultarlos. También puede agrupar paneles y guardar conjuntos de paneles personalizados para que la gestión del espacio de trabajo sea más fácil. El inspector de propiedades cambia para reflejar la herramienta o el elemento con el que trabaja, lo que permite acceder rápidamente a las funciones más utilizadas.

Algunas ventajas de utilizar Flash es que sus películas ocupan poco espacio, ya que utilizan distintas técnicas de compresión para que se transmitan rápidamente por Internet.

Con Flash podemos tomas imágenes creadas con otros programas, ya que soporta muchos formatos gráficos. Además con Flash podemos generar videos, archivos GIF animados, secuencias de imágenes, etc. Todo ello a partir de una misma película. Incluso podrás crear contenidos para almacenar CD-ROM interactivos.



El lenguaje de programación de flashTal como cuando apareció el programa Macromedia Director con su propio lenguaje de programación bautizado con el nombre de: Lingo, Macromedia Flash también ha introducido su propio lenguaje de programación que va a la par con otros lenguajes como el JavaScript o el VbScript y que incluso puede interactuar con ellos, me refiero al: ActionScript.

¿Qué puede hacer con Flash?Flash nos permite desarrollar los siguientes elementos:

- Videos para html. - Gráficos.- Videos en formato AVI. - Simulaciones.- Videos en Quick Time. - Paginas Web Dinámicas.- Gif. - Juegos.- Tutores. - Diapositivas. Para ingresar al programa de Macromedia Flash, debes de realizar los siguientes pasos:

1. Haga clic en el botón Inicio

2. Seleccione la opción Programas

3. Ubique y Selecciona la opción Macromedia

4. Haga clic en la opción Macromedia Flash 8

La distribución de la pantalla sigue el estilo del resto de los programas de la casa Macromedia. Este se basa en tener cada grupo de elementos separados en distintas barras y zonas de la pantalla. Así podrás distribuir el espacio a tu gusto.

Si no tienes claro para que sirve alguna de las herramientas, deja un segundo el puntero del ratón sobre ese elemento. Al momento aparecerá un pequeño letrero con el nombre de la herramienta



EL ESPACIO DE TRABAJO DE MACROMEDIA FLASH

DESCRIPCIÓN DE LOS ELEMENTOS DEL ESPACIO DE TRABAJO

LOS PANELES

Los paneles facilitan la visualización, la organización y la modificación de los elementos de los documentos. Las opciones disponibles en los paneles controlan las características de los símbolos, las instancias, los colores, el tipo, los fotogramas y otros elementos. Puede utilizar los paneles para personalizar la interfaz de Flash, manteniendo visibles los paneles necesarios para una determinada tarea y ocultando los demás.

Los paneles permiten trabajar con objetos, colores, textos, instancias, fotogramas, escenas y documentos enteros. Por ejemplo, puede utilizar el mezclador de colores para crear colores y el panel Alinear para alinear los objetos con otros objetos o con el escenario. Para ver una lista completa de todos los paneles disponibles en Flash, consulte el menú Ventana.

La mayoría de los paneles incluyen un menú emergente con opciones adicionales. El menú de opciones se indica mediante un control en la barra de título del panel. Si no aparece ningún control del menú de opciones, significa que el panel no tiene menú de opciones.

Línea de

Tiem

po

Caja de H

erra

mientas

Escenario

Inspector de propiedades

Pane

les

Control del menúFlecha de Contracción opciones



EL INSPECTOR DE PROPIEDADES

El inspector de propiedades simplifica la creación de documentos facilitando el acceso a los atributos más utilizados del elemento seleccionado, ya sea en el escenario o en la línea de tiempo. Puede modificar los atributos del objeto o documento en el inspector de propiedades sin acceder a los menús o paneles que contienen estas funciones.

El inspector de propiedades muestra información y la configuración del elemento que está seleccionado, que puede ser un documento, un texto, un símbolo, una forma, un mapa de bits, un video, un grupo, un fotograma o una herramienta. Cuando hay dos o más tipos de objetos seleccionados, el inspector de propiedades muestra el número total de objetos seleccionados.

Ejemplo : El inspector de propiedades con opciones de texto

LA CAJA DE HERRAMIENTAS

Las herramientas de la caja de herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del escenario. La caja de herramientas se divide en cuatro secciones:

La sección Herramientas contiene las herramientas de dibujo, pintura y selección.

La sección Ver contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación.

La sección Colores contiene modificadores de los colores de trazo y relleno.

La sección Opciones muestra los modificadores de la herramienta seleccionada, los cuales afectan a las operaciones de pintura o edición de dicha herramienta. Nota : al seleccionar una de las herramientas de la sección Herramientas, en la sección Opciones aparecen los modificadores de la herramienta seleccionada.

Flecha

Transformaciónlibre

Línea

Pluma

Óvalo

Lápiz

Bote de tinta

Cuentagotas

Mano

Subselección

Transformaciónde relleno

Lazo

Texto

Rectángulo

Pincel

Cubo de pinturaBorrador

Zoom

Color de trazo

Color de relleno

Modificadores de las herramientas


Fotograma clave vacío

Cabeza lectora Encabezado de la línea de tiempo

Menú emergente de visualización de fotogramas

Animación fotograma a fotograma

Animación Interpolada

Icono Capa de guía Tiempo transcurrido, Indicador

Botón Centrar fotograma Velocidad de fotogramas, indicador

Botones de Papel cebolla Fotograma actual, indicador


LA LÍNEA DE TIEMPO

La línea de tiempo es una herramienta que permite realizar animaciones. Está se encuentra dividida en casillas numeradas, como si fuese una tabla; Cada fila representa una capa. En cada capa colocaremos un elemento de la película y cada columna representa a un fotograma dela película.

La línea de tiempo organiza y controla el contenido de una película a través del tiempo, en capas y fotogramas. Al igual que en un largometraje, las películas Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas encima de otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora.

Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa.

El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo indica los números de fotograma. La cabeza lectora indica el fotograma actual que se muestra en el escenario.

La información de estado de la línea de tiempo situada en la parte inferior de la línea de tiempo indica el número del fotograma seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.

Nota: al reproducir una animación, se muestra la velocidad de fotogramas actual, que puede diferir de la velocidad de fotogramas de la película si el sistema no puede mostrar la animación con la rapidez propiada. Puede cambiar la manera en que se muestran los fotogramas y mostrar miniaturas del contenido de los fotogramas en la línea de tiempo. La línea de tiempo muestra dónde hay animación en una película, incluidas la animación fotograma a fotograma, la animación interpolada y los trazados de movimiento.

Flash es un formato protegido, las películas que coloques en Internet no pueden ser editadas o modificadas por lo que tu trabajo es seguro



Los controles de la sección de capas de la línea de tiempo permiten mostrar u ocultar y bloquear o desbloquear capas, así como mostrar el contenido de las capas como contornos.

Puede insertar, eliminar, seleccionar y mover fotogramas en la línea de tiempo. También puede arrastrar fotogramas a una nueva posición en la misma capa o a otra capa.

LA BIBLIOTECA (F11)

En la biblioteca de un documento de Flash se almacenan símbolos creados en Flash, archivos importados tales como clips de video, clips de sonido, mapas de bits e ilustraciones vectoriales importadas. El panel Biblioteca muestra una lista desplegable con los nombres de todos los elementos de la biblioteca, lo que permite ver y organizar dichos elementos mientras trabaja. Un icono situado junto al nombre de cada elemento del panel Biblioteca indica el tipo de archivo.

Puede abrir la biblioteca de cualquier documento de Flash mientras está trabajando en Flash para poner a disposición del documento actual los elementos de la biblioteca de ese archivo.

Puede crear bibliotecas permanentes en la aplicación Flash que estarán disponibles siempre que se inicie Flash. Flash también incluye varias bibliotecas de muestra que contienen botones, gráficos, clips de película y sonidos que puede agregar a sus propios documentos de Flash. Las bibliotecas de Flash de muestra y las bibliotecas permanentes creadas por el usuario aparecen en el submenú Ventana > Biblioteca (Control + L) o en su defecto en el submenú ventana > Otros Paneles > Bibliotecas Comunes

Forma de Trabajo

Para crear animación de un documento de Macromedia Flash, se modifica el contenido de fotogramas 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 progresivamente, 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.

Capa oculta

Capa activa

Objetos de la capa que aparecen como contornos

Capa bloqueada

Menú de opciones

Botón Orden de clasificación

Botón Estado AnchoBotón estado estrecho

Icono de la papelera

Icono de propiedades

Botón Nueva carpeta Botón Nuevo símbolo

Si deseas activar la biblioteca, puedes presionar la tecla de función F11



Existen dos métodos para crear una secuencia de animación en Flash: la animación interpolada y la animación fotograma por fotograma. En la animación interpolada, se crean los fotogramas inicial y final, y Flash crea los fotogramas intermedios. Flash varía el tamaño, la rotación, el color y otros atributos del objeto uniformemente entre los fotogramas inicial y final para crear la sensación de movimiento. En la animación fotograma por fotograma, la imagen se crea en cada fotograma.

Para simplificar el proceso de creación de animaciones interpoladas, puede distribuir varios objetos en capas distintas.

Puede utilizar una capa de máscara para crear un agujero a través del cual se pueda ver el contenido de una o varias capas situadas por debajo. Con un clip de película animado, puede crear una máscara de capa dinámica.

TERMINOLOGÍA BÁSICA

LA CAPA.- El concepto de Capa es fundamental para manejar Flash de forma eficiente veamos a grandes rasgos qué son las capas.

Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada "Sonidos", por ejemplo).

ESCENARIO.- Es la parte más importante también denominado área de trabajo, sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando.

FOTOGRAMA.- Es una posición en la escena que puede ser tomada por una imagen u objeto o en todo caso no contener nada

INSTANCIA.- Es una copia de un elemento de la biblioteca sobre el escenario, al cual podemos modificar algunos atributos sin modificar al original que se encuentra en la biblioteca.

INTERPOLACIÓN.- Técnica de animación para los objetos insertados en el escenario.

SÍMBOLO.- Son los elementos que integran luestra película los cuales pueden tener diferentes papeles como Clip de película (Contiene animación) Botón (Se comporta como tal) y grafico (contiene imágenes estáticas)

CONFIGURACIÓN DEL ESCENARIO

Macromedia Flash, utiliza una diversidad de herramientas para poder desarrollar adecuadamente los diseño con plantillas estandarizadas o establecidas por el usuario. Así que es necesario saber lo siguiente:

Puedes utilizar la combinación de teclas

Control + J

Para acceder a la ventana de propiedades del documento.

En ocasiones te interesará despejar completamente la pantalla para poder ver bien el área de trabajo. Puedes ocultar todos los paneles momentáneamente pulsando la tecla de función F4. para volver a ver los paneles puedes pulsar nuevamente esta tecla



a) Establecer el área de diseño:

El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento o utilizamos el menú Modificar > Documento...

Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.

Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película.

Unidades de Regla: Unidad que se empleará para medir las cantidades.

Transformar en predeterminado: Este botón, propio de la nueva versión de Flash, permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee.

Otra forma de poder establecer estos atributos del escenario como las dimensiones, color de fondo, etc. Es utilizando las opciones de configuración desde el Inspector de Propiedades

b) Desplazamiento entre Escenas

Cuadro de propiedades del

documento o película

Hay ciertos caracteres que no puede utilizar a la hora de guardar una película, ya que windows los utiliza para funciones especiales. Estos caracteres son: \ / : * ¿ “ > < °|. Recuerda que el número máximo de caracteres para un nombre de archivo es de 215, por lo que tienes espacio de sobre



Para poder desplazarnos dentro de nuestra película a través de las diversos escenarios podemos hacer uso de la herramienta de navegación que nos permite desplazarnos de un escenario a otro

o podemos utilizar el panel de escenas (Menú Ventanas > Paneles de Diseño > escenas) SHIFT + F2 la cual nos permite añadir, eliminar escenas, cambiar de nombre. Además nos ayuda a ordenar la secuencia de escenas

c) Configuración de la Regla

La regla es una herramienta que nos ayuda a definir el tamaño y alinear objetos con precisión. Está no se muestra de manera predeterminada, pero se puede mostrar u ocultar si se es necesario.

Para mostrar u ocultar la regla debemos de acceder al menú Ver > Reglas (Control + SHIFT + Alt + R) o hagamos clic con el botón derecho del mouse sobre cualquier parte del área de trabajo y seleccionamos reglas del menú contextual.

d) Configuración de la Cuadricula

La cuadricula es un serie de líneas y puntos que se intersectan ofreciéndonos un fondo cuadriculado, permitiéndonos colocar, alinear y dibujar objetos con precisión.

Herramienta de navegación

Puedes eliminar escenas haciendo clic en el icono de basurero o crear otra utilizando el icono con el signo mas +

Puedes activar cualquier herramienta presionando la tecla asignada a cada una de ellas. Para saber qué letra corresponde a una herramienta determinada, deja el ratón un segundo sobre el botón y aparecerá la letra junto a su nombre



Para mostrar u ocultar la cuadricula debemos de acceder al menú Ver > Cuadricula > Mostrar Cuadricula o hagamos clic con el botón derecho del mouse sobre cualquier parte del escenario y seleccionamos Cuadricula > Mostrar cuadricula del menú contextual.

Puede establecer la distancia entre las líneas o puntos de la cuadricula si especifica la altura y ancho de cada cuadro de la cuadricula para ello debe acceder al menú Ver > Cuadricula > Editar Cuadricula o hagamos clic con el botón derecho del mouse sobre cualquier parte del escenario y seleccionamos Cuadricula > Editar cuadricula del menú contextual. Entonces en la ventana podemos modificar los valores:

d) Configuración de las líneas guías

Las líneas guías sirven alinear y colocar objetos con precisión o subdividir en escenario en sectores. Hay dos tipos de líneas guías: la horizontal y la vertical.

Para añadir una línea guía arrastremos de la regla horizontal o vertical hacia el escenario en la posición que deseemos.

Puedes modificar algunos atributos, bloquearlo o borrar, para ello hagamos clic en acceder al menú Ver > Guías > Selecciona Opción o hagamos clic con el botón derecho del mouse sobre cualquier parte del escenario y seleccionamos Guías > Selecciona opción del menú contextual. Si deseas puedes acceder a la ventana (Opción Editar Guias)

Puedes mostrar u ocultar rápidamente el panel de la biblioteca pulsando la combinación de teclas Control L



PRACTICA

1. Diseña los siguientes dibujos: utiliza la herramienta línea y cuadricula (25px x 25 px) de color rojo

2. Diseña el siguiente dibujo, utilizando una película de flash con las siguientes características Dimensiones : 500 px x 300 px; fondo de color amarilloUtiliza la herramienta Elipse y Líneas Guías de color celeste (vertical cada 50 px, horizontal al centro)

MANEJO DE MACROMEDIA FLASH

Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash).

No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en este ámbito es casi tan grande como la de éstos programas.



Vamos a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido.

Herramientas Básicas.

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo y diseño de páginas web. Veamos cuáles son las más importantes y cómo se usan:

Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos o los rellenos (con un sólo clic), los bordes y rellenos (con doble clic), zonas a nuestra elección y poder modificar sus atributos o desplazarlos en el escenario. Flecha tiene otras herramientas Opcionales:

Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superponga, dando la sensación de estar "unidos".

Suavizar: Convierte los trazos rectos en líneas menos rígidas.

Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos

De igual forma puedes utilizar esta herramienta par modificar cualquier figura, el método dependerá del elemento que quieras modificar, como vemos seguidamente:

Segmentos: Al pulsar y arrastrar sobre un segmento, cambiaremos la curvatura de esa línea. Junto al puntero del ratón aparece una pequeña curva.Vértices: si te sitúas en un vértice o sobre el final de una línea, lo que cambiará entonces es la posición de ese elemento, en este caso aparece junto al puntero un ángulo recto

Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Al soltar el ratón aparecerá una línea uniendo los dos puntos. Una vez creada la podemos modificar sin más que seleccionar o situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

Como en otras herramientas, la tecla Mayúsculas (Shift) modifica el comportamiento del pincel. Al pulsarla solo podrás moverte en horizontal o vertical



Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. El uso de esta herramienta detallaremos más adelante.

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla. Para crearlo pulsa en algún lugar de la escena y arrastra el botón, a medida que mueves el ratón irá apareciendo la elipse. Puedes utilizar la tecla ALT para crear un circulo a partir del centro o SHIFT para crear un circulo perfecto o usar ambas combinaciones.

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean, además tiene

una variante denominado Polistar . La que crea polígono y estrellas de diferente numero de lados.

RECTANGULO.- Al igual que la elipse se dibuja un rectángulo, aunque esta herramienta tiene un opción que nos permite redondear las esquinas para ello en la parte de opciones (parte inferir de la barra de herramientas) activa

la casilla radio de rectángulo redondeado.

En la ventana que aparece selecciona el número de píxeles que se utilizará para redondear las esquinas; luego dibuja el rectángulo siguiendo el método habitual.

POLISTAR.- Esta herramienta nos permite dibujar polígonos y estrellas para ello debemos de hacer clic en el inspector de propiedades en el botón opciones, entonces aparece una ventana en el que debemos de

Con le herramienta Pluma, Si no quieres crear una figura cerrada, puedes terminar el dibujo, pulsando el tecla Control y haciendo clic en el lugar de la escena que quieres terminar.



seleccionar el estilo (Polígono o Estrella) de la herramienta y el numero de lados.

Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el panel Colores que hay en la Barra de Herramientas.

Al modificar con el lápiz puedes modificar el resultado final con la opción Modo Lápiz, en la zona de opciones de la barra de herramientas.

Enderezar: al soltar el botón, flash intenta convertir el dibujo en figuras geométricas

Suavizar: las líneas se suavizan, para conseguir curvas menos pronunciadas.

Tinta: El dibujo no será modificado.

Herramienta Pincel : Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.

El funcionamiento es similar al de las herramientas anteriores, pero esta dispone de varias opciones para modificar su comportamiento.

Modo Pincel: Hace que los trazos dibujados se comporten de distinta manera según la opción seleccionada. Pues hacer que dibuje detrás de otro elemento, dentro de un elemento, etc.

Tamaño de Pincel: aumenta o disminuye el grosor del pincel

Si tenemos una curva y necesitamos añadir un vértice, podemos arrastrar la curva mientras mantenemos pulsada la tecla Control

Si estás haciendo una selección con el lazo, pero necesitar en cierto momento una recta, como si se hubiera hecho con el modo poligonal, mantén pulsada la tecla ALT. A partir de aquí puedes soltar el botón del ratón, y seguir dibujando como si tuvieses seleccionado el modo poligonal. Deja pulsado el botón y suelta la tecla ALT para volver al modo libre



Forma del pincel: Varia el tipo de dibujo que deja el pincel, puedes pasar del estilo circular a otros en forma de línea, cuadrada, etc.

Bloquear relleno: Esta casilla tiene utilidad al realizar rellenos de color basados en degradados. Si no está activada, cada dibujo que hagas creará un degradado nuevo. En caso contrario, el degradado creado formará parte del conjunto de dibujos creados con el pincel.

Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores que hay en la Barra de Herramientas.

En la zona de Opciones de la barra de herramientas tiene dos opciones

Cerrar figura: permite decidir si una figura que no este completamente cerrada se debe cerrar o no dependiendo den tamaño del hueco.

Bloquear Relleno: Permite que todos los degradados tengan un mismo centro en un lugar del escenario

Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de eliminar todo aquello que "dibuje".

La goma de borrar dispone de varios modificadores accesibles desde la zona Opciones.

Modo Borrador: Mediante esta opción se puede definir el comportamiento de la goma del borradorBorrar Normal: Afecta a todoBorrar Relleno: Sólo eliminará el relleno de las figuras.Borrar Líneas: Solo eliminara las líneas, no tocara los rellenos.Borrar rellenos seleccionados: Sólo eliminará la parte seleccionada del rellenoBorrar Dentro: Para figuras cerradas; sólo borrará en su interior completo.

Grifo: Si está activada, con una sola pulsación eliminará un elemento completo

Existe una peculiaridad de flash al momento de colocar un objeto sobre otro, esta peculiaridad se denomina Solapamiento de Objetos.

Esto puede sea a la vez muy útil y muy incómoda. Para evitar que una figura pueda ser partida podemos agruparla, seleccionando la opción agrupar del menú modificar



Forma del Borrador: Para cambiar el tamaño y la forma de la herramienta.

Herramientas Avanzadas.

Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas

imágenes: . Esto, es la Herramienta "Varita Mágica" y propiedades de “varita mágica”, tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo

que aparece es éste denominado modo polígono que permite hacer selecciones poligonales.

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas.

Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores

Herramienta Cuentagotas: Su misión es "Capturar" colores para que posteriormente podamos utilizarlos. Para ver cómo funciona, aconsejamos ver la siguiente animación:

Si crear una figura con relleno blanco sobre un fondo blanco parecerá que la figura no tiene relleno, pero esto no es así. Tiene un relleno de color blanco. Si pulsas en su interior podrás ver como se selecciona. No es lo mismo crear una figura sin relleno que una con un relleno del mismo color del fondo.

Cuando seleccionamos un color puedes observar que aparece un código de seis elementos, compuesto por un número y letras. Este es el identificador de color. Cada color que usaremos tiene su propio identificador.

El identificador de color tiene dos partes: La almohadilla (#) que indica que el número que viene a continuación es un color. Y el Número identificado por 6 cifras con valores comprendidos entre 0 y F es decir 16 valores (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). estas 6 cifras se subdivide en 3 pares identificado al rojo, verde y azul



Herramienta Transformación Libre: , Sirva para transformar objetos, grupos, instancias o bloques de texto libremente y utilizando sus variantes, es muy útil para el momento de animar

Rotar y Sesgar: permite rotar un objeto sobre un punto de referencia o inclinar sobre si mismo. Para rotar un objeto, selecciónalo con la herramienta Transformación libre y después selecciona la opción rotar y sesgar. Para comenzar a girar, dirige el puntero del ratón hacia una de las esquinas y observa que se modifique el puntero a una flecha circular, arrastra y desplaza el ratón. Para inclinar un objeto sigue el mismo proceso, pero en esta ocasión utiliza los nodos laterales.

Escalar : Permite modificar las dimensiones de un objeto, haciéndose más grande o más pequeño, para ello simplemente desplace cualquier nodo a la dirección deseada.

Distorsionar: Sirve para dar efecto de perspectiva a un objeto, Para ello simplemente se modifican los nodos.

Los degradados lineales en principio realizan la transición entre dos colores. Si quieres añadir más colores basta con pulsar en algún punto de la barra de transición del panel Mezclador de Relleno y aparecerá una nueva muestra de color.

Si deseas agregar un color aplicado a una forma al degradado, al acceder a una casilla de color, prueba a desplazar el ratón por la pantalla. Observaras cómo el puntero se trasforma en un cuentagotas. De este modo puede seleccionar cualquier color que veas en la pantalla.



Envoltura: Permite modificar completamente la apariencia de un objeto, simplemente modificando los nodos y las tangentes.

Herramienta Transformación de Relleno: Esta herramienta nos permite modificar la dirección y el efecto de transición de color de relleno aplicado a un objeto.

PRACTICA

DIBUJA LOS SIGUIENTES GRÁFICOS



TRABAJAR CON TEXTOS

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto:

Texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por

ejemplo),

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. Entonces nos aparecerá algo así:

El recuadro que vemos es el recuadro que contendrá al texto.

En la película final NO se verá, pero nos servirá para localizar más fácilmente el texto y para moverlo o cambiar su tamaño. Finalmente, el círculo que hay arriba a la derecha significa que el recuadro del texto se expandirá según vayamos escribiendo y también el texto. Esto es, todo lo que escribamos, estará en la misma línea.

Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene. Para cambiar de línea, sería necesario pulsar la tecla Enter (Intro).

Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante común, creamos un cuadro de texto o acercaremos el cursor del ratón al borde del recuadro de texto, según donde lo acerquemos, se transformará en un símbolo o en otro. Por ejemplo, si lo acercamos al borde del recuadro, se le añadirá debajo de la flecha una flecha pequeña de 4 direcciones como la que muestra la figura y que nos indica que podemos mover el texto:

Si lo acercamos al círculo que está en el margen superior derecha, el cursor se convierte en un flecha de "ensanchamiento", como la que muestra la figura:

Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los límites del recuadro de texto, y además, el círculo que aparecía en el margen superior derecho, se convierte en un cuadrado. Este cuadrado significa que los límites del recuadro de texto han quedado fijados, y que al insertar más texto, se producirá un salto de línea en lugar de ensanchar el recuadro de texto. Este sería su comportamiento al introducir texto:

Para desplazar un objeto por la pantalla selecciona la herramienta flecha. Sitúa el puntero del ratón sobre el objeto y arrástralo mientras mantienes pulsado el botón del ratón

Si al desplazar con el ratón un objeto mantienes pulsada la tecla Mayúscula observaras que sólo puedes mover el objeto en líneas múltiplos de 45 grados.



Si quisiéramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con hacer doble clic sobre el cuadrado que está en el margen superior derecho del recuadro de texto. Tras hacerlo, se convertirá en un círculo y su comportamiento será el descrito al principio.

EL PANEL PROPIEDADES DE TEXTO

contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto.

Fuente: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.

Altura: Determina el espaciado entre los caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Dirección del Texto: Cambia la orientación del texto de horizontal a vertical, tanto de izquierda a derecha como de derecha a izquierda.

Ajuste automático entre caracteres: Activar esta casilla provoca que la separación entre caracteres se realice de modo automático.

Posición: Nos permite convertir nuestro texto en subíndices o en superídices (o dejarlo normal).

URL: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés escribiendo en ese momento.

Destino: Determina si la URL a la que el texto hace referencia se cargará en la misma ventana del navegador, en una nueva ...

Tipo de Línea: Si el texto que vamos a incluir es dinámico (de lo contrario aparece sin activar), esta opción nos permite

Si al desplazar un objeto utilizas las teclas de desplazamiento y a la hora de utilizar alguna de las teclas mantienes pulsada la tecla mayúsculas, el objeto se desplazará 8 píxeles en ves de uno, con lo que el movimiento será mucho mas rápido



determinar cómo queremos que aparezcan las líneas (línea única, multilínea o multilínea sin ajuste).

Configuración: Son las clásicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.

Otras Propiedades: Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte muy importante y deben respetarse.

A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del Párrafo.

A la derecha: Todas las líneas empezarán tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido).

Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites.

El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo y el espacio interlineal.

TIPOS DE TEXTOS

Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, según el tipo que sean.

Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin más que

haciendo clic sobre la pestaña "Tipo de texto":

TEXTO ESTÁTICO

El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación".

Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser estático. Así, un recuadro de texto en el que pone "Aprendamos Flash" durante toda la película, es estático, aunque dicho texto cambie de posición, forma o color. Los textos estáticos sólo tienen 2 propiedades extras:



Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las Fuentes que tenga instaladas el usuario que ve la película en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la película, la verá exactamente como queremos que la vea, pero si no las tiene, Flash empleará la fuente que más se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendíamos, por lo que suele ser conveniente mantener esta opción sin seleccionar, aunque esto conlleve un mayor tamaño de la película final.

Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en la película (cortarlos, copiarlos...) Actívala si lo crees conveniente.

TEXTO DINÁMICO

El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación.

Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada

Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico.

TEXTO DE ENTRADA

El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas).

Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido, ya que lo deberá introducir el usuario.Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinámico.

Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Aún así, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos minutos, aunque no podrás gozar del entorno de Flash ni podrás emplear el resto de herramientas de que dispone Macromedia Flash.

ACTIVIDADACTIVIDAD



Creación de animaciones sencilla de texto por interpolación de movimiento y forma

Flash puede crear dos tipos de animaciones interpoladas: interpolación de movimiento e interpolación de formas.

En la interpolación de movimiento, se definen propiedades tales como la posición, el tamaño y la rotación de una instancia, un grupo o un bloque de texto en un instante específico, y después estas propiedades se pueden cambiar en otro momento.

En la interpolación de formas, se dibuja una forma en un instante específico y después se modifica o se dibuja otra forma en otro instante. Flash interpola los valores o formas de los fotogramas intermedios para crear la animación.

La animación interpolada es una forma eficaz de crear movimiento y realizar cambios ya que reduce al mínimo el tamaño del archivo. En esta animación, Flash sólo guarda los valores de los cambios producidos entre fotogramas.

1. En el inspector de propiedades modifica las dimensiones de la película con los valores 500 de ancho y 150 de alto y aplica como fondo del documento un color azul oscuro (#000066) también puedes seleccionar en menú Modificar > Documento o presionar las teclas control + J

En el fondo se aplica un color azul oscuro, observa la línea de tiempo, aparece un fotograma clave

2. Selecciona la herramienta texto en la caja de herramientas y elige el color blanco para el relleno

Aparece el cursor con signo + con letra A en la parte inferior

3. Elige en el menú texto, dentro de la opción Tamaño, 48 (tamaño de texto)

4. Pulsa en la parte superior izquierda del recuadro y escribe “FLASH”, si el texto abarca varias líneas estira el área de texto en el recuadro inferior del cuadro de texto hasta convertirlo en una línea

Aparece el texto en la escena

5. Cuando termines de escribir y alinear el texto, selecciona la herramienta flecha (flecha negra) en la caja de herramientas.

El texto de fija en la escena y el puntero se convierte en una flecha.

6. En la línea de tiempo selecciona la casilla de la posición 25 Queda marcado de color negro la casilla

7. Selecciona en el menú Insertar > Línea de tiempo > Fotograma Clave.

Aparece un circulo en la casilla y el texto aparece seleccionado

8. Pulsa en cualquier lugar de la escena para quitar la selección.

El texto deja de estar seleccionado.

9. Pulsa sobre el texto y arrástralo hacia la derecha. El texto se desplaza

10. En la línea de tiempo, en la capa 1 selecciona cualquier casilla entre la primera y el 25

Se activa las propiedades en el inspector

11. En el Inspector de propiedades selecciona la opción Movimiento en cuadro Animar.

Aparece una línea continua entre las casillas 1 y 25

12. Para ver la animación pulsa la tecla enter El texto se desplaza lentamente

ACTIVIDAD



1. Crea una nueva película y utiliza el color negro para el fondo

La escena toma el color negro

2. Selecciona la herramienta texto

3. en el Inspector de propiedades, selecciona Arial Black como tipo de letra, color blanco y tamaño 96

4. en la escena, inserta un bloque de texto y escribe la letra P Aparece la letra P con las características indicadas

5. selecciona la casilla 10 e inserta un fotograma clave presionando la tecla de función F6

Aparece la misma letra en la casilla 5

6. Edita el texto y cambia la letra P por una E (haz clic sobre el texto P y bórralo y escribe la nueva letra)

Aparece la letra E

7. repite los dos últimos pasos en la casilla 20 y 30, insertando en cada una de ellas las letras R y U

La línea de tiempo tendrá 4 fotogramas claves y 15 fotogramas de duración

8. Selecciona la casilla 1 y elige en el menú modificar la opción separar o presiona las teclas Control + B

El texto aparece con pontos negros lo que indica que se convierte en objeto

9. repite este último paso para las casillas 10, 20 y 35 Casillas con fotogramas clave

10. Para crear la interpolación en un solo paso, selecciona todas las casillas, pulsando sobre el nombre de la capa

11. En el inspector de propiedades selecciona la opción forma en el cuadro animar:.

Las casillas aparecen 4 líneas continuas de color verde claro

12. Presiona las teclas Control + Enter para probar la animación Texto cambia de forma

Las animaciones en la línea de tiempo.- Flash distingue la animación fotograma por fotograma de la interpolada en la línea de tiempo de la siguiente forma:

Las interpolaciones de movimiento se indican mediante un punto negro al principio del fotograma clave; los fotogramas interpolados intermedios tienen una flecha negra con un fondo azul claro.

Las interpolaciones de formas se indican con un punto negro en el fotograma clave inicial; los fotogramas intermedios tienen una flecha negra con un fondo verde claro.

Una línea discontinua indica que la interpolación se ha interrumpido o está incompleta, por ejemplo, cuando falta el fotograma clave final.

Un fotograma clave sencillo viene indicado por un punto negro. Los fotogramas en gris claro después de un fotograma clave sencillo tienen el mismo contenido sin ningún cambio y tienen una línea negra con un rectángulo vacío en el último fotograma del recorrido.

Una a pequeña indica que al fotograma se le asignó una acción de fotograma con el panel Acciones.

Una bandera roja indica que el fotograma contiene una etiqueta o un comentario.



Un ancla dorada indica que el fotograma es un anclaje con nombre.

Consejos de forma

Para controlar cambios de forma más complejos o improbables utilice los consejos de forma. Los consejos de forma identifican puntos que deben corresponder en las formas inicial y final. Por ejemplo, si está interpolando el dibujo de una cara mientras cambia de expresión, puede marcar cada ojo con un consejo de forma. A continuación, en lugar de que la cara se convierta en una figura amorfa durante el cambio, los ojos siguen siendo reconocibles y cambian de manera independiente durante el proceso

Los consejos de forma tienen letras (de la a hasta la z) para identificar los puntos que se corresponden en las formas inicial y final. Puede utilizar hasta 26.

Los consejos de forma aparecen de color amarillo en los fotogramas clave iniciales, verde en los fotogramas clave finales y rojo cuando no se encuentran en una curva.

Para obtener un resultado óptimo al interpolar formas, siga las directrices que se indican a continuación:

En la interpolación de formas complejas, cree formas intermedias e interpólelas en lugar de definir sólo la forma inicial y final.

Compruebe que los consejos de forma son lógicos. Por ejemplo, si está utilizado tres consejos de forma para un triángulo, deben estar en el mismo orden en el triángulo original y en el triángulo que se va a interpolar. El orden no puede ser abc en el primer fotograma clave y acb en el segundo.

Es preferible colocar los consejos de forma en sentido contrario a las agujas del reloj a partir de la esquina superior izquierda de la forma.

Para utilizar consejos de forma:

1 Seleccione el primer fotograma clave de una secuencia de forma interpolada.

2 Elija Modificar > Forma > Añadir consejo de forma.

El consejo de forma inicial aparece como un círculo rojo con la letra a en algún lugar de la forma.

3 Colóquelo en un punto que desee marcar.

4 Seleccione el último fotograma clave de la secuencia.

El consejo de forma final aparece en algún lugar de la forma como un círculo verde con la letra a.

5 Coloque el consejo de forma en el punto de la forma final que debería



corresponder con el primer punto marcado.

6 Vuelva a ejecutar la película para ver el cambio introducido con los consejos de forma. Mueva los consejos de forma para afinar la interpolación.

7 Repita el proceso para agregar más consejos de forma. Los nuevos consejos aparecen con las letras siguientes (b, c, etcétera).

ANIMACION DE TEXTO CON PLANTILLAS

Hasta ahora estábamos animando con el estilo tradición de animación en flash. La nueva versión de flash profesional incluye algunas plantillas pre establecidas para la animación de texto sobre la línea de tiempo que son Desenfocar, Expandir, explotar y sombra.

DESENFOCAR:

Crea un texto en el documento (“DESENFOCAR”), Haz clic con el botón derecho sobre el textoSelecciona Efectos de línea de tiempo > Efectos > Desenfocar

EXPANDIR:

Crea un texto en el documento (“EXPANDIR”), Haz clic con el botón derecho sobre el textoSelecciona Efectos de línea de tiempo > Efectos > Expandir

EXPLOTAR:

Crea un texto en el documento (“EXPLOTAR”), Haz clic con el botón derecho sobre el textoSelecciona Efectos de línea de tiempo > Efectos > Explotar

SOMBRA:

Crea un texto en el documento (“SOMBRA”), Haz clic con el botón derecho sobre el textoSelecciona Efectos de línea de tiempo > Efectos > Sombra

Para cada cambio que se realice en las ventanas de configuración de las animaciones debemos de actualizar la vista para ver el cambio.

Responde al siguiente cuestionario:



1. ¿Cuáles son los métodos de animación usados por Flash? ........................................................................................................................................................................................................................................................................................................................

2. ¿Para insertar un fotograma clave se presiona la tecla? ........................................................................................................................................................................................................................................................................................................................

3. ¿Qué diferencia existe entre (enter) y (control + enter) al momento de probar la animación) ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

Investiga ¿Cuántas clases de fotogramas existen en flash? y ¿Cuáles son? ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

GGRÁFICOSRÁFICOS VECTORIALESVECTORIALES YY M MAPAAPA DEDE B BITSITS

Cuando nos encontramos trabajando con imágenes en cualquier programa de Windows, hay una consideración muy importante a tener en cuenta: Las imágenes se pueden almacenar de dos formas completamente distintas, en modo vectorial o en modo mapa de bits.

Imágenes Vectoriales

Las imágenes que utilizan este sistema se almacenan como una serie de coordenadas y datos, que son interpretados por el programa de tratamiento de imagen.Para aclararnos, supongamos que almacenamos una línea azul en modo vectorial. Para definir una línea solamente necesitamos conocer la posición del punto inicial y el punto final. Así que eso es lo único que almacenará, su punto de inicio, su punto final y el color de la línea. Cuando el programa abra ese fichero representará la línea completamente a partir de esos datos.

La ventaja del diseño vectorial es que está línea no perderá calidad y el fichero ocupará muy poco espacio, puesto que almacena muy pocos datos.

Mapa de Bits

El otro sistema que utiliza para almacenar es la de guardarlas como un conjunto de puntos de colores. Cada punto de la imagen se almacena guardando su color. Este sistema es desde luego mucho peor para almacenar una simple línea, h de guardar mucha información, pero en cambio es ideal para fotografías o imágenes con muchos elementos y cambios de color.

ACTIVIDADACTIVIDAD

MOVIMIENTO DE SÍMBOLOSMOVIMIENTO DE SÍMBOLOS

imagen Vectorial: imagen que no pierde calidad

Imagen Mapa de Bits : imagen que muestra píxeles

a mayor zoom



1. Crea una nueva película (500 x 150) y utiliza el color celeste para el fondo

La escena toma el color celeste

2. Selecciona en Menu Archivo > Impotar > Importar a escenario y selecciona la imagen Avion1.GIF de la carpeta RecursosFlash.

Aparece la imagen de un avión en el escenario

3. Hagamos clic con el botón derecho del mouse sobre la imagen importada y selecciona Convertir en Símbolo del menú

Aparece una ventana de dialogo

4. En la ventana de dialogo coloca avion como nombre del símbolo y asígnale el comportamiento de gráfico y acepta los cambios.

Aparece la imagen con un cuadro de color celeste

5. selecciona la casilla 36 e inserta un fotograma clave presionando la tecla de función F6

Aparece un punto negro en la casilla 36

6. Selecciona cualquier casilla entre el primero y el 36, para crear la interpolación

7. En el inspector de propiedades selecciona la opción movimiento en el cuadro animar:.

Las casillas aparecen líneas continuas de color morado con una flecha

8. Presiona las teclas Control + Enter para probar la animación

La imagen se anima

ACTIVIDADACTIVIDAD

MOVIMIENTO DE SÍMBOLOSMOVIMIENTO DE SÍMBOLOS

Creación de animación sencilla de objetos por interpolación de formaEl otro modelo de interpolación de flash, se basa en convertir una figura en otra a través de varios fotogramas, en este caso usaremos formas lo más sencillas posibles.

1. En una nueva película, y dibuja un triangulo utilizando la herramienta Lápiz, comprueba que este activada la opción enderezar en la sección opciones de la Caja de herramientas.

El puntero se pone con forma de lápiz, luego aparece el triangulo

2. Selecciona la herramienta cubo de pintura y elige rojo para el color de relleno y pinta el interior del triangulo

El triangulo se pinta del color indicado

3. haz un clic sobre la casilla 10 de la capa 1 e inserta un fotograma clave

Se crea un fotograma y aparece el triangulo seleccionado

4. Elimina el triangulo (presiona la tecla supr)

5. Selecciona la herramienta rectángulo y elige amarillo para el color de relleno y dibuja un cuadrado en el escenario

Aparece el cuadrado.

6. Selecciona la casilla 20 y crea un fotograma clave. En esta ocasión elimina el cuadrado y dibuja un pentágono con la herramienta lápiz.

Aparece un pentágono en la casilla 20

7. Selecciona la herramienta cubo de pintura y elige verde para el color de relleno y pinta el interior del pentágono

El pentágono se pinta del color indicado

8. Para crear la interpolación accede a la casilla 1 y en el inspector de propiedades selecciona forma en el cuadro Animar:.

Se muestra una línea entre la casilla 1 y el siguiente fotograma

9. Repite este ultimo paso para la casilla 10 y prueba la película.

Transformación de texto libremente

01

03

02



Si necesitas separar las letras de una palabra, modificar las apariencias de las letras, su curvatura, anchura, etc., puedes utilizar la opción Separar del menú Modificar. Cuando utilizamos la opción separar, el texto pierde su categoría de boque de texto y se convierte en un conjunto de figuras en forma de letras. Ejemplo

1. Con la herramienta texto escribe la palabra Sabado Aparece la palabra en escena

2. Selecciona el texto con la herramienta flecha3. En el inspector de propiedades cambia el tipo de letra a

Arial, tamaño 96 y negritaLa palabra toma los nuevos atributos

4. Comprueba en el inspector de propiedades que el tipo de texto sea “texto estático”

5. en el inspector de propiedades amplia la distancia entre caracteres en 6 puntos

La distancia entre caracteres aumenta.

6. En el menú modificar selecciona la opción separar (ahora cada letra es independiente para mover, etc.)

Los caracteres aparecen seleccionados independientemente con marcos celeste

7. Para convertirlos en formas de letras, nuevamente selecciona la opción separar del menú Modificar.

Desaparece el cuadro de selección de texto y las letras aparecen seleccionadas como si fueran figuras.

8. Con la flecha pulsa en algún lugar de la escena para quitar la selección.

La selección se quita

9. Selecciona todas las letras menos la S Se seleccionan las letras abado

10. En el menú modificar, dentro de la opción transformar elige Escalar, y reduce su altura.

Aparece un cuadro con líneas negras y con puntos de distorsión y las letras se hacen más pequeñas.

11. Con la herramienta subseleción, arrastra el final de la letra S, hasta que quede como en la figura de arriba. Para ello puedes usar herramienta zoom de la sección ver

12. Haciendo uso de la herramienta flecha, selecciona nuevamente todas las letras

Las letras aparecen seleccionadas

13. En el panel Mezclador de colores, aplica un relleno degradado radial

El color del texto cambiará al del nuevo color

Transformación de objetos

Puede transformar objetos gráficos, además de grupos, bloques de texto e instancias con la herramienta Transformación libre o con las opciones del submenú Modificar > Transformar. En función del tipo de elemento que seleccione, podrá transformar, rotar, sesgar, escalar o distorsionar el elemento libremente. Se pueden cambiar o agregar elementos a una selección durante la operación de transformación.

Al transformar un objeto, grupo, cuadro de texto o instancia, el inspector de propiedades para dicho elemento visualiza los cambios realizados en las dimensiones o la posición del elemento. Durante las operaciones de transformación que implican arrastre aparece un recuadro de delimitación.

Modificación de formas con el modificador de envoltura



El modificador de envoltura permite deformar y distorsionar objetos. Una envoltura es un recuadro de delimitación que contiene uno o más objetos. Los cambios realizados en la forma de una envoltura afectan a la forma de los objetos contenidos en la envoltura. Para editar la forma de una envoltura, ajuste los puntos y los selectores tangentes.


1. ¿Qué diferencia existe entre animación por interpolación de forma y movimiento? ....................................................................................................................................................................................................................................................................................................................................

2. ¿Qué tipo de teclado se presiona para insertar un fotograma clave?

....................................................................................................................................................................................................................................................................................................................................

3. En la aplicación de rellenos(panel mezclador de colores), menciona cada una de las formas de aplicar los rellenos y menciona lo más característico de cada una de ellas.

............................................................................................................

............................................................................................................

............................................................................................................

4. En base al texto modificado, experimenta con las siguientes herramientas (menú modificar > transformar) y menciona los cambios que producen los mismo en el texto.

Distorsionar.- ....................................................................................................................................................................................................................................................................................................................................

Envoltura.- ....................................................................................................................................................................................................................................................................................................................................

El Panel Mezclador de Colores

El Panel Mezclador de Colores, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten.



Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las Herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaña que está junto a la Herramienta Lápiz y si queremos modificar un relleno, haremos clic en la pestaña que está junto a la Herramienta Bote de Pintura.) Al hacerlo aparecerá un Panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el standard que establece el HTML.

También se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la Herramienta Bote de Pintura).

Se pueden crear diferentes tipos de Rellenos

Sólido: Consiste en un relleno formado por un solo color.Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otroDegradado Radial: Es igual que el anterior, pero los degradados tiene forma circular.Mapa de Bits: Permite colocar como relleno alguna imagen existente en la película (O ajena a ella si antes se "importa")

El Panel Muestras de Color

El Panel Muestras de Color sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, cuando creemos un color mediante el Panel Mezclador de Colores, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del Panel Mezclador de Colores). Una vez esté agregado el color, pasará a estar disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película.

Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película.

ACTIVIDAD

Creación de animación fotograma por fotograma

La animación fotograma por fotograma cambia el contenido del escenario en cada fotograma y es ideal para las animaciones complejas en las que la imagen cambia en cada fotograma en lugar de moverse por el escenario. Este tipo incrementa el tamaño del archivo con mayor rapidez que la animación

interpolada. En la animación fotograma por fotograma, Flash guarda los valores de los fotogramas completos

La animación fotograma a fotograma, en la mayoría de los casos usa fotogramas clave, la lógica de animación es la siguiente:

Insertar un elemento en un fotograma clave Crear un nuevo fotograma clave



Modificar un poco el elemento Repetir los dos últimos pasos hasta completar la animación.

Este método sobre todo es laborioso, pero los resultados pueden ser muy espectaculares. Sigue estos pasos para realizar una animación de una gota de agua que cae.

1. En una nueva película, activa la cuadricula a 25 px (ver > cuadricula > mostrar cuadricula) para un mejor diseño

El fondo del escenario aparece como una hoja cuadriculada.

2. Crea un circulo sin borde, de color celeste en una de las celdas de la cuadrilla, utiliza el zoom de la zona superior de la escena para poder ver mejor el trabajo, un 400% será suficiente

Aparece un circulo en la escena y en la primera casilla de la capa aparece el indicador de fotograma clave.

3. Pulsa F6 para insertar un nuevo fotograma clave Aparece el mismo circulo y la cabeza lectora de la línea de tiempo se ha desplazado a la segunda casilla. Con un nuevo fotograma clave.

4. Selecciona la herramienta flecha y desplaza el círculo hacia la siguiente celda de debajo de su ubicación actual aproximadamente la mitad del circulo.

El circulo se desplaza

5. has un clic en cualquier parte de la escena para quitar la selección del circulo

Se quita la selección

6. Transfórmalo levemente con la herramienta flecha modificando los bordes del circulo, para que parezca que se está cayendo.

Al momento de acercarte al borde el puntero aparece con un arco pequeño, esto nos permite modificar los bordes.

7. Repite del pasos 3 al 6, hasta tener 10 fotogramas claves como se observa en la figura de la parte de abajo8. Para ver la animación pulsa enter o control + enter.9. Cambia el nombre de la capa 1, por la de gota, para ello has doble clic sobre el nombre de capa 1

Para mejorar la animación, crea una nueva capa y asígnale el nombre de caño, en ella dibuja un caño de agua al inicio de la caída de la gota de



agua. Crea otra capa y denomínala fondo, en ella crea un ambiente para la animación.

Edición de animaciones

Tras crear un fotograma o un fotograma clave, puede moverlo a otro lugar de la capa actual o a otra capa, eliminarlo y hacer otros cambios. Sólo puede editarse los fotogramas clave. Puede ver fotogramas interpolados, pero no editarlos directamente. Para editar fotogramas interpolados, cambie uno de los fotogramas clave de definición o inserte un nuevo fotograma clave entre el inicial y el final.

Edición con papel cebolla

En general, Flash sólo muestra un fotograma de la secuencia de animación en el escenario. Para facilitar la ubicación y edición de la animación fotograma por fotograma, puede ver varios fotogramas a la vez en el escenario. El fotograma situado bajo la cabeza lectora aparece de color normal, mientras que los fotogramas circundantes aparecen atenuados; cada fotograma parece estar dibujado sobre hojas de papel traslúcido (papel cebolla) colocadas una encima de otra. Los fotogramas atenuados no pueden editarse. Para ver varios fotogramas de una animación en el

escenario de forma simultánea Haga clic en el botón Papel cebolla: .

Todos los fotogramas entre los marcadores Iniciar Papel cebolla y Finalizar Papel cebolla (en el encabezado de la línea de tiempo) aparecen superpuestos como un solo fotograma en la ventana de la película.

Para controlar la visualización del papel cebolla, realice una de las siguientes acciones:

Para ver los fotogramas de papel cebolla como contornos, haga clic en el botón Contornos de papel cebolla.

Para cambiar la posición de los marcadores de papel cebolla, arrastre el



puntero hasta la nueva ubicación. En general, los marcadores se mueven de forma conjunta con el puntero del fotograma actual.

Para poder editar todos los fotogramas situados entre los marcadores de papel cebolla, haga clic en el botón Editar varios fotogramas. En general, la opción Papel cebolla sólo permite editar el fotograma actual. Sin embargo, puede ver el contenido de cada fotograma situado entre los marcadores y editarlo aunque no se trate del fotograma actual.

Nota: las capas bloqueadas (con el icono del candado) no aparecen cuando se activa la opción de papel cebolla. Para evitar la confusión producida por múltiples imágenes, puede bloquear u ocultar las capas que no desea visualizar con esta opción.

Para cambiar la visualización de los marcadores de papel cebolla:Haga clic en el botón Modificar marcadores de papel cebolla y elija un elemento del menú:

Mostrar marcadores siempre muestra los marcadores en el encabezado de la línea de tiempo, esté activada o no la opción de papel cebolla.

Anclar marcas de papel cebolla bloquea los marcadores en la posición actual en el encabezado de la línea de tiempo. En general, el rango de papel cebolla es relativo al puntero del fotograma actual y los marcadores de papel cebolla. Al anclar los marcadores evita que se muevan con el puntero del fotograma actual.

Papel cebolla 2 muestra dos fotogramas a cada lado del fotograma actual.

Papel cebolla 5 muestra cinco fotogramas a cada lado del fotograma actual.

Papel cebolla todo muestra todos los fotogramas a cada lado del fotograma actual.


1. ¿Dibuja la forma que toma el cursor al memento de modificar los contornes de un objeto (gota de agua)

2. ¿Al hacer uso de la herramienta subselección, que elementos aparecen en el objeto modificado?

1. . _ _ _ _ _ _ _ _ _ _ _ _ _ _ 2.- _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _



PRINCIPIOS DE LA ANIMACIÓN

El arte de una animación correcta se basa en dos cosas: sólido conocimiento de dibujo y un gran deseo de conocer cómo se comporta cada cosa que nos rodea. Los animadores son maestros del movimiento y resuelven de modo creativo los problemas. Si no vemos una solución simplemente lo creamos. Somos actores con lápices, Debemos estudiar y entender el rendimiento de emociones y los conceptos físicos. Un animador de éxito ve el mundo que los rodea como si transcurriese a cámara lenta.

Existen muchos principios que se aplican a la hora de crear una buena animación. Vamos a explorar algunos de los métodos que ayudan a hacer a los personajes y los movimientos algo entretenido y, sobre todo, creíble, Estas técnicas dan vida a la animación y según progresemos, las conexiones entre ellas será más notoria. Las técnicas y los principios de los que vamos a hablar en esta sección son los siguientes:

Fotograma Clave Encoger y estirar Lapso temporal Anticipación, acción, reacción y trasladación de la acción Arcos Animación de personajes y especificas de los mismos

Fotograma Clave

En flash, los fotogramas clave son el equivalente a los puntos clave de la animación clásica. Los puntos clave son las poses más extremas o sutiles de movimiento trazadas antes de la animación. Una vez creadas las poses se trabaja el lapso temporal de una clave de dibujo a otra. Flash crea las animaciones intermedias gracias a la interpolación de movimiento. Muchas veces deberemos ajustar las animaciones interpoladas añadiendo más fotogramas clave para lograr el movimiento deseado.

Encoger y Estirar

Al encoger y estirar los personales conseguimos que aparenten ser de carne y hueso. Se proporciona la sensación de uniformidad y volumen a los personajes. Sin la posibilidad de encoger y estirar los personajes parecerían muy rígidos como si fueran de piedra. La teoría fundamental que se esconde detrás de las reacciones del sujeto tiene que ver con la velocidad y las fuerzas de movimiento. Es importante mantener los volúmenes en el sujeto sólido durante toda la animación, sin importar si está encogido o estirado.

Lapso Temporal

Hay dos reinos temporales de los que debe de ser consiente un animador: el lapso temporal del movimiento y el lapso temporal del rendimiento. Se trata de dos elementos cruciales que añaden a la animación su credibilidad y atractivo. El lapso temporal del movimiento proporciona a la animación un sentido de peso y gravedad.

Aumentar la velocidad o disminuirla son aspectos importantes de un lapso temporal creíble. También llamados “tiempo de demora”, estos aspectos se utilizan para que los puntos iniciales o los puntos más altos de un movimiento no sean robóticos. También proporcionan a un objeto ese momento de ingravidez cuando alcanza el punto más alto de un arco.



Vamos a crear una animación de que basa plenamente en los principios temporal del movimiento y del rendimiento.

PRACTICA

PELOTA BOTANDO 1. Inicia un proyecto de flash y establece la velocidad de los

fotogramas a 24 fps.Cambia el nombre de la capa existente por Pelota. Seleccione la herramienta óvalo. Mantenga pulsada la tecla mayus mientras crea un círculo. (al pulsar la tecla mayus la herramienta trazará un circulo perfecto, en lugar de un ovalo)

2. A continuación, seleccione el circulo (haga doble clic sobre él para seleccionar tanto el trazo como el relleno) y pulse la tecla F8 para convertirlo en un clip de película. Llame al clip de película Pelota. Asegúrese de que la pelota tenga el tamaño y escala sean similares a la del dibujo, de lo contrario el lapso de tiempo será distinto al utilizado en el ejemplo.

3. Cree una nueva capa y llámela fondo. Colóquela bajo la capa en la que está la pelota (pelota). En esta capa dibuje un sencillo fondo con una línea horizontal para la orientación en la que se sitúa el plano del fondo y bloquee la capa pelota.



4. En la línea de tiempo, vaya al fotograma 14 e inserte un fotograma en ambas capas ejecutando Insertar > Línea de tiempo > Fotograma o pulsando la tecla F5. como está animando a una velocidad de 24 fps, los 14 fotogramas teóricamente son la mitad aproximadamente. Creemos que se trata de un buen lapso temporal en este caso.

Este ejercicio desarrolla una animación en bucle y eso significa que no deberá tener un comienzo o final (la pelota botara por siempre). Por lo tanto, el ultimo fotograma debe estar unido al primero. Cuando se reproduzca el último fotograma de la animación, la pelota debería estar en una posición en la que coincida con la del fotograma 1. si no es así, la animación parecerá detenerse cada vez que pase de nuevo al fotograma 1. para lograr esta continuidad revise el siguiente paso.

5. Seleccione la pelota del fotograma 1 y observe el pequeño hueco circular en el centro del clip de película (quizás esté en la parte superior del punto de registro del clip de película) ahora puede mover este circulo llamado punto central, utilizando la herramienta Transformación libre y cambiando el punto desde donde se escala, rota, sesga, etc una instancia.

6. En el fotograma 14 de la capa pelota. Cree un fotograma clave ejecutando Insertar > línea de tiempo > fotograma clave o pulsando la tecla F6, selecciona cualquiera de los primeros 14 fotogramas de la capa pelota y cree una interpolación de movimiento en el inspector de propiedades o a través del menú contextual que aparece al hacer clic con el botón derecho del ratón o ejecutando Insertar>Línea de tiempo>>crear interpolación de movimiento. Como el fotograma 14 es ahora un fotograma clave idéntico al fotograma 1, la animación se desarrollará en un bucle. Sin importar dónde mueve la pelota entre los fotogramas 2 y 13, siempre terminará en este punto para coincidir con el primer fotograma. Así se crea un bucle de animación.

cuando la pelota bote hacia arriba, estará luchando contra la fuerza de la gravedad y por lo tanto se moverá más lentamente que cuando cae (porque se ve empujada por la gravedad)

7. En el fotograma 4, cree un fotograma clave (F6) en la capa pelota y mueva la película (objeto pelota) hasta su posición aplastada, que es el punto de impacto contra el suelo.

8. Seleccione la herramienta Transformación Libre en el fotograma 4 y úsela par aplastar y estirar el objeto pelota. Trabaje siempre con la altura y anchura al estirar y aplastar.



Cuando más aplaste la pelota, más necesitará compensar la anchura. Es importante compensar de este modo para mantener la verosimilitud del volumen de la pelota, observe como el punto central podrá conservar la posición de la pelota.

tanto al caer como al elevarse, querrá estirar la pelota para dar la sensación de que está desplazándose rápidamente. Este efecto será un poco más brusco al caer pues la pelota se moverá más rápidamente.

9. Seleccione el fotograma 2 y cree otro fotograma clave. En el fotograma clave estire la pelota verticalmente y encoja horizontalmente.

Querrá que la pelota vuelva a sus proporciones originales después del estiramiento que acaba de crear y antes del impacto contra el suelo

10. Seleccione y copie el fotograma 1. pegue este fotograma en el fotograma 3. sin o añade este fotograma clave quizás la interpolación del movimiento hará que la pelota adquiera una posición aplastada antes de alcanzar el suelo y eso no sería correcto.

Al duplicar el fotograma 1 en el 3 volverá a crear las proporciones originales una vez la pelota se estire y en el instante anterior a que se aplaste contra el suelo. Sin embargo como hemos copiado y pegado el primer fotograma, la pelota estará en la posición equivocada.

11. Seleccione la herramienta papel cebolla y haga clic en la capa pelota para acceder al modo de silueta, que facilitará la visualización, mueva la pelota del fotograma 3 hacia debajo de modo que quede libremente bajo la posición estira del fotograma 2 y ligeramente sobre la posición aplastada del fotograma 4.



Vamos a animar la pelota botando hacia arriba y en el punto más alto del arco, recuerde que el ascenso será ligeramente más lento, pues la pelota estará luchando en contra de la gravedad por lo tanta, los fotogramas claves no estará tan cerca entre si al caer; existirá más tiempo entre los fotogramas clave. De nuevo, la pelota debería recuperar sus proporciones circulares originales antes y después de que estire el botar hacia arriba.

Ahora la línea de tiempo debería de mostrar el siguiente aspecto

12. Ahora debe estirar la pelota antes de que alcance el punto más alto del arco. Cree un fotograma clave en el fotograma 8. Estire la pelota verticalmente

13. Copie el fotograma 3. péguelo en el fotograma 6. de este modo hará que la pelota conserve sus proporciones originales después de aplastarse contra el suelo y antes de estirarse.

FOTOGRAMA 6

FOTOGRAMA 8



Ahora debe de añadir el tiempo de demora. Como el fotograma 1 y 14 son idénticos, la pelota aparentará golpear una pared invisible. Durante un breve instante se detendrá bruscamente, algo que deberíamos evitar. Es necesario suavizar el movimiento de entrada y de salida en el punto más alto. Para ello, cree otro fotograma clave que haga que la pelota se eleve más que en los fotogramas 1 y 14

14. Copie y peque el fotograma 14 en el fotograma 10. en el fotograma 10, seleccione el regulador de aceleración del inspector de propiedades y elija el valor de 100

15. En el fotograma 12 cree ahora otro fotograma clave y mueva la pelota al punto más alto que alcance la pelota. Ese punto ya no estará en los fotogramas 1 y 14

Imagine lo que siente su estomago cuando conduce su auto a alta velocidad subiendo una colina. Esa será la sensación que quiera que tenga la pelota (aparición momentánea de ingravidez). Añadiendo más tiempo en menos espacio físico en ese punto lo conseguirá.

16. En el fotograma 12 ajuste el fotograma la aceleración a –100. eso hará que la pelota vaya decelerado hasta el fotograma 14.

La línea de tiempo definitiva debería de aparecerse a la imagen del ejemplo.

para darle mayor realismo agrega una nueva capa y en ella desarrolla la sombra de la pelota, puedes utilizar los fotogramas 1, 4, 6 y 14 para crear los puntos de animación.

Además de la animación tradicional podemos realizar otros tipos de animación utilizando lenguaje de programación script. Para conseguir animaciones relacionadas



ACTIVIDADBotando una pelota

Para el siguiente ejemplo configuramos el documento a 550 x 400 pixels, a 30 fps con fondo blanco.

Luego, crearos una línea de horizonte, utilizamos para ello un rectángulo de 125 px de alto y 550 de ancho.

Dibuja la pelota, es un círculo de 25 x 25 pixels con un degradado radial de blanco a negro (En vez de una pelota puedes usar un personaje del estilo de una rana, y queda bastante divertido)

Lo primero es hacer el clip de la pelota. Seleccionamos nuestro dibujo, pulsamos F8 y creamos un símbolo de tipo gráfico al que llamamos pelota. Como centro de Transformación elegimos el Centro y Abajo.

Una vez convertido en Símbolo volvemos a pulsar F8 y creamos un símbolo de tipo MovieClip también con el centro de transformación Abajo y al Centro.

Es en este Movieclip donde vamos a Crear nuestra animación, En este MovieClip vamos a utilizar 3 capas como se muestra en la imagen. Una para la animación, una capa gúia y otra para la acciones.



Una vez hecha la animación de la pelota, tienes que medir cuál ha sido exactamente el desplazamiento en el eje "x". En el caso de la animación del ejemplo es 82

Si pruebas la película, ya tendremos nuestro bote animado pero nos encontramos con dos pequeños problemas. El primero que la pelota bota sobre el mismo sitio, y el segundo que el primer y último fotograma se repiten. Para arreglar estos dos problemas metemos este código en el penúltimo fotograma:

gotoAndPlay(1);this._x += 67.5;

La primera línea de código hace que no se reproduza el último fotograma y así evitamos la superposición. La segunda incremente en "x" la cantidad de pixels que necesitamos para que la pelota avance sin que se note un salto, si probamos la animación de la pelota bota hasta llegar al final pero no regresa

Para que la pelota vuelva por la izquierda cuando sale por la derecha yo he usado esto. Aunque puedes usar muchísimos métodos distintos

if (this._x > 550){this._x = -25;

}

Y con esto hemos conseguido una animación completa en infinita con tan solo 15 fotogramas y 5 líneas de código.

Para que la animació sea mas realizaste puedes modificar su anchura y altura de la pelota con la finalidad de darle realismo a la animación.



Efecto de rebote gravitacional por ActionScript

Uno de los efectos que muchas veces no usamos en nuestras películas, pero que quisiéramos de todos modos aprender, es el efecto de la gravedad.

Vamos a ver simplemente como aplicar el efecto, de acuerdo a un aumento de un valor, que nos permitirá ver como aparentemente nuestro objeto "cuadro" cae.

Cambiemos la velocidad de fotogramas a "30".

En la capa 1 creamos un rectángulo y lo convertimos en un clip de película presionando F8, y le daremos nombre de instancia, "objeto"

En una nueva capa, asignamos las siguientes acciones:

fuerza = 1;7velocidad = 0;_root.onEnterFrame = function() {velocidad += fuerza;objeto._y += velocidad;};

Ahora probemos la pelicula ("ctrl + enter").

Entendamos estas cortas líneas:fuerza = 1;velocidad = 0;

fuerza y velocidad son nuestros valores iniciales, fuerza es la unidad que nos indica la fuerza con que caerá el "objeto", pero, al estar dentro del controlador "onEnterFrame", sera acumulativo, es decir :



1, 1+1, 2+1, 3+1, 4+1 ... etc, y gravedad es el movimiento cuando nuestro clip "objeto", aun no ha sido liberado.

_root.onEnterFrame = function() {

en nuestra escena principal, crearemos nuestro controlador de eventos "onEnterFrame" a la que asignaremos una funcion.

velocidad += fuerza;

la velocidad inicial de nuestro clip "objeto"= es 0, pero aumentara de acuerdo a ese acumulado de valores que mencionamos antes.

objeto._y += velocidad;

finalmente asignaremos ese incremento de valores a nuestro clip "objeto", para darle el efecto de "caida" o "gravedad",

Hasta aqui todo va muy bien, pero ahora vamos a crear un efecto rebote a partir de este efecto "gravedad"

Agreguemos estas líneas dentro de nuestro controlador onEnterFrame

if (objeto._y>400) {objeto._y = 400;velocidad *= -1;}

entonces las líneas quedaran de la siguiente forma.

fuerza = 1;velocidad = 0;_root.onEnterFrame = function() {velocidad += fuerza;objeto._y += velocidad;if (objeto._y>400) {objeto._y = 400;velocidad *= -1;}};

Analicemos las líneas que hemos agregado:if (objeto._y>400) {objeto._y = 400;

cuando "objeto" supere la posición limite inferior de la película, esta línea evita que "objeto" siga cayendo. Si su película tiene una altura diferente, solo cambien ese 400 por dicha altura.

velocidad *= -1;

multiplicamos el valor de la caída por (-1), lo que crea el efecto de rebote.Por pura curiosidad, cambiemos el valor de velocidad en esta ultima linea por 0.95, veremos como cada vez rebota menos nuestro "objeto".



ACTIVIDADEfecto de nieve en Flash

Debemos abrir un nuevo documento de Flash y cambiar el color blanco del fondo del escenario por uno oscuro que permita distinguir el efecto de nieve que se pretende realizar.

Crear un Clip de pelicula, seleccionando en el menú: Insertar > Nuevo símbolo y nombrarlo nieve

Dentro de dicho Clip de Película, dibujar un círculo blanco sin bordes, con la herramienta Óvalo, de apróximadamente 4 x 4 píxeles.

Seleccionar en la biblioteca del Clip de película (nieve) y haz clic sobre él, con el botón derecho del mouse. En el menú hacer click a la opción Vinculación y seleccionar la opción Exportar para ActionScript . Este Clic de Película será el copo de nieve que posteriormente se programará.

Crear otro Clip de película cuyo nombre será Control, de igual forma que el anterior también exportar para actiónscript, y dejarlo en blanco. Regresa al escenario y Arrastrarlo al escenario y ponerle por nombre de instancia control_cs .



Crear un tercer Clip de Pelicula cuyo nombre será Ice, donde dibujará un rectángulo sin bordes y de color blanco con alpha 14% (también se exporta para ActionScript), este Clip de película es para realizar el efecto de que la nieve se acumula.

Crea otro clip de película y llamado poster la misma que contiene el dibujo de un cartel, y en el borde superior de dicho cartel coloca el Clip de Película Ice, luego asigna como el nombre de instancia Ice_cs.

Regresa al escenario e introduce el carte y asignale como nombre de instancia poster_cs.

Crea una nueva capa y denominala acciones, en esta capa posteriormente, se procede a programar el evento onEnterFrame para que cada vez que entre se ejecute la función que crea los copos de nieve llamada, en este caso, AnimacionNieve .

control_cs.onEnterFrame = function() {AnimacionNieve();

};

Posteriormente se programa la función createSnow:

function AnimacionNieve() {/* Crea un copo de nieve a partir de nieve que está en la biblioteca */

i = _root.getNextHighestDepth();tmp = _root.attachMovie("nieve", "nieve_cs"+i, i);

/* El copo de nieve cae desde una posición horizontal en [1,550] */tmp._x = nieveazar (1, 550);

/* Inicialmente, se coloca el copo de nieve fuera del escenario */



tmp._y = -1;/* Ahora se particulariza el copo de nieve estableciendo aleatoriamente su transparencia, * velocidad y tamaño */

tmp._alpha = nieveazar (50, 100);tmp.speed = nieveazar (1, 10);tmp._xscale = nieveazar (70, 110);tmp._yscale = tmp._xscale;

/* Todo copo de nieve inicia su descenso inmediatamente después de creado */

tmp.moving = true;/* moveSnow es responsable de la dinámica del copo de nieve */

tmp.onEnterFrame = movernieve;}

Ahora se programa la función movernieve.

function movernieve() {

/* Si el copo está en movimiento... */

if (this.moving) {

/* El copo desciende según su velocidad prefijada */

this._y += this.speed;

/* Para mayor realismo, el copo experimenta un desplazamiento

lateral, oscilatorio */

this._x += Math.cos(this._y/10);

/* Si el copo colisiona con ice_cs detenerlo. Como no se desea que

el copo permanezca detenido indefinidamente, se utilizará un

contador (stopCounter) para verificar que transcurra un tiempo

prudente antes de remover el copo */

if (this.hitTest(_root.poster_cs.ice_cs)) {

this.moving = false;

this.stopCounter = 0;

}

/* Finalmente, los copos que lleguen al suelo serán eliminados de

inmediato */

if (this._y>327) {

removeMovieClip(this);

}

} else {

/* Entrar aquí implica que el copo está detenido por colisionar con

Ice_cs. Por ende, se incrementa el contador stopCounter, y si éste

supera la cota superior preestablecida, se procede a eliminar el

copo */

this.stopCounter++;

if (this.stopCounter>500) {

this.onEnterFrame = null;

this.removeMovieClip();

}

}

}



Por último, randRange es una función auxiliar que devuelve un número aleatorio entre dos extremos, ambos inclusive.

function nieveazar (min:Number, max:Number):Number {var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;return randomNum;

}

Por ultimo tenemos como resultado

Puedes agrafar el fondo del escenario para mejorar la presentación de esta animación

Libro Macromedia Flash Parte 1

Documents

Transcript of Libro Macromedia Flash Parte 1