Curso Flash CHOY 2009 - Cap 1 Al 5

Animar tus dibujos con gestos y voz, crear una web, un banner o un DVD interactivo son algunas de las posibilidades que te ofrece Flash y que podrás aprender en este curso de cinco entregas.

Curso: Crea animaciones con Flash, 1ª parteSoftware

SumarioDe a A a la Z 55Principales herramientas 56Diseña una película con movimiento 57Configura el proyecto 57Diseña el fondo de la escena 57Distribuye los objetos en el escenario 58Crea un movimiento sencillo 59

Guía del curso

1ª parte: Principios básicos de Flash CS4 Nº 285 2ª parte: Creación de gráficos, dibujos y texto Nº 286 3ª parte: Animación de objetos en la línea de tiempo Nº 287 4ª parte: Creación de menús y botones de navegación avanzada Nº 288 5ª parte: Integración con otras aplicaciones y publicación del proyecto Nº 289

54 Nº 285

Un mundo animadodad de conocer a fondo el funcionamiento y manejo de sus principales herra-mientas. Te ofrecemos un curso en cinco entregas en el que te explicamos, de forma clara y sencilla, las claves que te ayudarán a que puedas crear todo ti-po de películas animadas. Incluso, cuando termines de leer este artículo, que es una toma de contacto con el programa, podrás obtener tus primeros re-sultados con éxito.

Aún así, no te pierdas las siguientes entregas, porque tienes mucho que descubrir, especialmente a la hora de utilizar correc-tamente las herramientas de dibujo y las técnicas de animación que ofre-ce el programa. Además, aprenderás a crear menús interactivos con los que podrás crear la navegación para una página web en flash a un CD o DVD que contenga tus películas o series preferidas.

Conceptos

FotogramaLa animación en flash se consigue a través de una sucesión de fotogramas que contienen un momento determinado del objeto en una posición y característi-cas diferentes. La película tiene, por de-fecto, una velocidad de 24 fotogramas por segundo, de modo que cuanto mayor sea este valor, también lo será la velocidad de la mis-ma y menor su duración.

SímboloSon los elementos que se almacenan en la biblioteca y se utilizan para construir la película. Existen tres categorías, cada una con distintos comportamientos. Por un lado los gráficos, que son imágenes o vec-tores estáticos a los que no se les puede asignar ningún comportamiento. Los botones permiten la in-teractividad en la película, es decir, añadir acciones para que se produzca un determinado comporta-miento. Por último, los clips de película (movie clip) que permiten una animación superior, ya que cuentan con una línea de tiempo independiente y pueden contener gráficos, botones y otros clips de película.

InstanciaCuando un símbolo de coloca en el escenario se denomina instancia, de modo que puede haber va-rias con el mismo símbolo. Cada una de ellas tiene un nombre para identificarla. Al modificar un símbolo de la biblioteca cambian, de forma automática, el resto de instancias.

Clip de películaSon símbolos que con-tienen su propia línea de tiempo, de modo que permiten agregar o quitar fotogramas para aumentar o disminuir su velocidad, independientemente de la película. Generalmente contienen una animación (interpolación) de movi-miento o de forma.

incluir cualquier fichero multimedia, son algunos de sus puntos fuertes. Pe-ro sin duda, el reducido tamaño que ocupan sus archivos (ayudado tam-bién por el desarrollo de la banda ancha), así como las posibilidades que ofre-ce su lenguaje de progra-mación ActionScript, han sido otros de los dos fac-tores determinantes para su consolidación.

Piérdele el miedo a Flash

Si alguna vez has sen-tido curiosidad por usar este programa, pero al abrirlo todas tus ilusiones se han desvanecido por su complejidad aparente, ahora tienes la oportuni-

E l tiempo ha acabado por dar la razón a esta aplicación, que permite

realizar todo tipo de ani-maciones para publicarlas en Internet o incluirlas en un CD o DVD. Su facili-dad para hacer todo tipo de contenidos interactivos (en la nueva versión CS4 mejorada con la herra-mienta de cinemática in-versa), la sencillez a la ho-ra de diseñar ilustraciones, incluso si tu mejor habili-dad no es precisamente el dibujo, y la posibilidad de

Menú principal

La barra de herramientas su-perior contiene los diferentes accesos de la mayoría de las funciones principales del pro-grama, que te permitirán con-figurar el proyecto, añadir y disponer los archivos, e insertar texto. Es interesante que tengas en cuenta el menú ya que desde aquí podrás mostrar las ventanas de trabajo que te ayudarán a usar el programa con más agilidad .

Vista de la interfaz

La versión Flash CS4 permite seleccionar distintas inferfaces de trabajo, que ordenan los paneles de herramientas en la pantalla según el tipo de tarea: diseño y dibujo, animación, pro-gramación, etc.

BúsquedaPuedes resolver tus du-

das en la Comunidad de Adobe en Internet si introduces un tér-mino de consulta en este campo.

Panel depropiedades

Cada vez que seleccionas un símbolo se habilitan en el panel de propiedades las diferentes opciones que puedes modificar. Así, puedes cambiar el tipo de instancia (clip de película, bo-tón o gráfico) de forma rápida, o hacer otros ajustes como el tamaño o el color. Si necesitas disponer de un área de trabajo mayor, puedes pulsar el botón , situa-do en el margen superior, que te permitirá ocultar el panel.

BibliotecaCada uno de los ele-

mentos que vas a utilizar en el proyecto se guarda en la biblio-teca, de modo que puedes orde-narlos en carpetas, nombrarlos, localizar uno de ellos desde el

campo de búsqueda, etc. En el área superior dispones de una vista previa que, en el caso de un clip de película, vídeo o au-dio, se pueden reproducir. Para añadir un símbolo a la escena sólo debes seleccionarlo aquí y arrastrarlo al lugar que quieras.

Herramientasde selección

Desde aquí puedes seleccionar los distintos objetos para mover-los sobre el escenario, añadirles un comportamiento o acción, transformarlos o rotarlos.

Herramientasde dibujo

Flash es un programa de dibujo vectorial, por lo que cuenta con todas las opciones necesarias para crear tus propios gráficos e ilustraciones a partir de cero. El trabajo con curvas bezier permite modelar los objetos de forma fácil y sencilla .

EscenaEn este área se sitúan

todos los elementos del proyecto distribuidos en diferentes capas (según las necesidades del mis-mo) y en diferentes fotogramas, para controlar el momento de su aparición. Para aplicar cualquier animación, los elementos deben ser convertidos previamente en símbolos.

Línea de tiempo

Es la herramienta más impor-tante del programa, ya que des-de aquí se controlan los movi-mientos tanto de los elementos de la escenta como los clips de película, además del tiempo de ejecución de los mismos.

CapasEl trabajo con capas

en Adobe Flash permite situar unos elementos sobre otros, como si se tratara de papel cebolla, y asignarles diferentes comportamientos en la línea de tiempo. Al igual que con otras herramientas de diseño gráfico, se pueden ocultar, bloquear, or-ganizar en carpetas, nombrar y añadir tantas como quieras, así como eliminarlas.

FotogramasLa sensación de mo-

vimiento se consigue a través de una sucesión de fotogramas en un intervalo determinado de tiempo. Los objetos se pueden animar fotograma a fotograma, añadiendo un pequeño cambio en cada uno, si bien, el modo de hacerlo en Flash es a través de las interpolaciones (de forma o movimiento). La versión CS4 ha añadido el cinegético, que permite modelar esqueletos y animarlos de forma rápida .

Documentosen uso

Puedes tener varios documen-tos abiertos y compartir los elementos de la biblioteca. Pa-ra seleccionar uno u otro sólo necesitas hacer click sobre la pestaña que contiene el nom-bre del archivo que quieres utilizar. De igual modo, puedes cerrarlos con un click sobre el icono con forma de cruz .

Editor de escenas

Según la complejidad del pro-yecto y el peso de los archivos se pueden añadir varias esce-nas, y pasar de una a otra con rapidez y sin dificultad. Desde este menú desplegable puedes seleccionar la que necesites editar en ese momento.

Editor de símbolos

Este botón muestra una lista desplegable que te ofrece un acceso rápido a cada uno de los símbolos que tienes guarda-dos en la biblioteca, para edi-tarlos en el escenario. También puedes conseguir lo mismo si haces doble click sobre el sím-bolo correspondiente dentro de la ventana biblioteca.

ZoomCon ayuda de este pa-

nel desplegable puedes ampliar o disminuir el zoom del área de trabajo. A la hora de dibujar o alinear los diferentes objetos es importante ampliarlo al máximo para visualizarlos con el máxi-mo detalle. También puedes ha-cer esta misma opera-ción desde el botón .

Curso: Crea animaciones con Flash, 1ª parte Software▲

55Nº 285

De la A a la ZB

B

A

C

D

D

E

E

F

G

AI

O

C

H

H

I

K

K

L

M

N

J

M

O

G

NL

F

J

A unque conseguir ani-mar una película com-pleja requiere tiempo

y experiencia, el primer contacto con el programa te permitirá realizar ani-maciones sencillas con buenos resultados.

Área de trabajoEl escenario y la línea

de tiempo son los dos elementos claves a la ho-ra de trabajar con Flash. El primero contiene todo el proyecto, y podría equi-valer al escenario de un teatro, ya que la mayoría de los elementos que apa-recen aquí “interpretan” un papel, puesto que es-tán dotados de animación propia. Cada elemento que añades a la escena se denomina instancia, y pueden contener distintos tipos de archivos: imáge-nes, audio, vídeo o texto.

La línea de tiempo es otro punto fundamental, ya que es aquí donde se controla el movimiento de cada objeto, así como su duración. En el área izquierda están las capas que permiten disponer los objetos de forma indepen-

diente para superponer unos a otros y, además, asignarles otro comporta-miento y duración.

En el área central se en-cuentran los fotogramas, que son momentos con-cretos de la animación que, al cambiar durante un intervalo de tiempo, generan la sensación de movimiento. Cuanto ma-

yor sea el número de fo-togramas, más lento será éste, y viceversa.

Los paneles de herra-mientas laterales te permi-ten modificar los paráme-tros de las instancias de forma rápida. Así, desde el de propiedades se mo-difica el tamaño y posi-ción del objeto, el tipo de instancia o el color. Pue-des acceder a ellos desde el menú .

La barra de herramien-tas vertical contiene el ac-ceso a otras funciones bá-sicas como la selección y transformación de objetos, así como las herramientas de dibujo y pintura. Man-tenla siempre visible, por-que tendrás que recurrir constantemente a ella.

Elementos de animación

Ya sabes que puedes añadir cualquier tipo de archivo multimedia a tu proyecto de Flash. Sin

embargo, antes de poder trabajar con ellos debes convertirlos en símbolos, que se dividen a su vez en tres categorías. Los más elementales son los gráficos, que se representan por el icono .

Son elementos estáticos que no tienen animación propia, pero pueden ser

animados. Los botones sir-ven para interactuar con el usuario y navegar en-tre las distintas partes de la película, así como para crear navegaciones com-plejas a través de menús. Se representan con el icono .

Por último, los clips de película constituyen el nú-cleo principal de esta apli-cación, ya que es en ellos donde se realizan las ani-maciones. Cada uno cuen-ta con una línea de tiem-po propia que te permite crear animaciones de mo-vimiento, de forma o rotar objetos, entre otras.

Los símbolos se guardan en la biblioteca y puedes moverlos al escenario en el punto que quieras. Allí se denominan instancias, y puedes añadir tantas co-mo quieras, si bien es im-portante que tengas nom-bres diferentes si quieres hacer llamadas para asig-nar comportamientos o acciones a cada una. Esto te ofrece la posibilidad de no tener que crear el mis-mo símbolo más de una vez, con la ventaja de que cuando hagas un cambio en éste, se modificarán to-das las instancias.

Para animar los distintos elemento dispones de dos opciones principales que, en Flash, se denominan

interpolaciones. Consisten en definir un fotograma clave dentro de la línea de tiempo en el que el obje-to muestra unas caracte-rísticas, y otro fotograma clave más alejado (según la duración) con unas ca-racterísticas diferentes. La transición de uno a otro creará un cambio que po-drá ser de tamaño y po-sición (interpolación de movimiento) o de forma (interpolación de forma)

si bien para esto último es necesario que los objetos sean vectoriales.

Flash CS4 incorpora, además, nuevas funciones como la animación en 3D de texto y objetos y la herramienta con este icono que mueve los objetos y símbolos a través de cinemática inversa, una técnica de animación que permite crear un esquele-

to o huesos en los obje-tos y animarlos de forma rápida.

El modo de interactuar con el usuario se consigue a través de los botones, que se componen de cua-tro momentos que pue-des o no definir si quie-res que cambie: reposo, sobre, presionado y área sensible. Además, puedes darles toda la compleji-dad que necesites, ya que puedes añadir diferentes

capas e incluir en cada momento distintos ele-mentos: clips se sonido, clips de película, etc.

Otra ventaja de Flash es que, aunque no ten-gas conocimientos de Ac-tionScript (el lenguaje de programación que utiliza) puedes controlar las dis-tintas instancias a través de órdenes sencillas que se controlan desde el pa-nel de acciones.


56 Nº 285

Principales herramientas en Flash

La biblioteca contiene los ele-mentos que vas a usar en la película. Puedes ver una vista previa en la ventana de visuali-zación situada arriba.

Desde el panel de acciones se controla el comportamientode los botones, fotogramas o clips de película.

Las interpolaciones de movimiento se representan en color violeta, mientras que las de forma lo hacen en verde.

CS4 crea esqueletos con movimiento

Para mantener organizada la película es recomendable asig-nar un nombre a cada capa y agruparlas en carpetas.


57Nº 285

Tanto si vas a incluir al archivo de flash en una página web como si lo vas a utili-zar para la creación de un CD o un DVD, la preparación previa del documento es un requisito fundamental. Especialmente, es muy importante que definas desde el principio el tamaño, ya que el de todos los objetos que añadas estará en función de él y si lo cambias desupes, muchos de ellos se deformarán.

1Al acceder al programa aparece una ven-tana para que elijas el tipo de documento

que quieres crear, según la versión del código ActionScript que utilices. De momento esto no tiene que preocuparte, así que puedes elegir el primero, ya que para este ejem-plo es irrelevante y, en todo caso, podrás acceder a las otras versiones desde el proyecto .

2 Una vez que se abre la ventana princi-pal debes saber que dispones de varios

modos de visualización del escenario, de los paneles de herramientas y de la línea de tiempo, en función del tipo de trabajo en el que te vayas a centrar: diseño, animación de objetos, programación, etc. En la barra de menú superior está predefinido el modo

, si bien, si pulsas sobre la flecha situada al lado, puedes seleccionar en-tre varias opciones, como por ejemplo .

3 Hecho esto, verás la ventana principal con este aspecto .

Como ves, la línea de tiempo, desde donde controlarás los distintos objetos que animes se sitúa en el margen superior, la barra prin-cipal de herramientas en el izquierdo y los paneles de propiedades en el derecho. El área blanca se denomina escenario, y es el lugar donde vas a colocar los diferentes elementos de tu animación.

4 Pincha en , pulsa en y asigna el nombre que quieres darle al

proyecto . En el apartado de abajo puedes se-leccionar si quieres que sea compatible con la versión ante-rior a ésta o no . Luego pulsa sobre el botón .

5 El siguiente paso tam-bién es importante, ya

que debes definir el área de trabajo. Aquí tienes que tener en cuenta la finalidad de tu proyecto: si lo vas a

publicar para acceder desde Internet, visua-lizarlo en un CD o DVD o si, simplemente, se trata de un banner animado. En cualquie-ra de los casos, pulsa en el menú y en para acceder a la ventana

. Aquí se establecen las dimensiones del mismo .

También el color, con un click en el botón y luego desde el selector que se muestra . No obstante, nuestro consejo es que, a no ser que lo tengas muy claro lo mantengas en blanco, ya que más tarde lo podrás mo-dificar. Por último, en el apar-tado , conviene que selecciones ya que es la mejor manera de trabajar con las aplicaciones de diseño gráfi-co. Pulsa de nuevo sobre .

6 Una última recomendación antes de po-nerte manos a la obra. Es muy posible

que en más de una ocasión durante el tra-bajo, necesites alinear con precisión algunos elementos, por lo que dirígete al menú y pulsa en , para que se muestren junto a la escena. Asimismo, puedes mostrar una

y, lo que es más importante, ha-bilitar la función , ya que te permitirá crear guías que te servirán de ba-se para colocar los diferentes elementos con mayor precisión.

El área de trabajo en Flash se denomina escenario por su similitud con la escena de una película, en la que intervienen distintos actores. En Flash éstos pueden ser símbolos (representaciones gráficas), clips de movi-miento (animaciones) y botones. El modo en el que los distribuyas en diferentes capas y en la línea de tiempo juega un papel esencial a la hora de conseguir una buena animación.

1El primer paso consiste en añadir a la biblioteca todos los elementos que vas a

utilizar en el proyecto. Pueden ser imágenes, vídeos o sonidos, si bien puedes también incluir-los más tarde. Dirígete al menú , selecciona

y luego .

En la ventana de exploración que aparece a continuación, selecciona los diferentes ar-chivos y pulsa en . También puedes crearlos en la misma película tal y como te contare-mos en la entrega del próximo número.

2 En el caso de que el panel de la bibliote-

ca no esté visible, desde el menú marca

, y aparecerá sobre el área donde están el resto de paneles de he-rramientas .

3 Como ves se han aña-dido los archivos que

has indicado y, cuando seleccionas uno de ellos con un click , puedes ver su con-

tenido (o reproducirlo en el caso de vídeo o de audio) en la ventana de vista previa .

4 También puedes comprobar que se han creado distintos elementos de forma au-

tomática, que en Flash se deno-minan símbolos .Debes trabajar con estos elemen-tos, y no con las imágenes que tendrás que eliminar si quieres que la com-pilación o el proyecto final no ocupe mucho. Para ello tendrás que convertirlas en archivos de mapa de bits, si bien, te mostraremos tam-bién cómo hacerlo en el próximo número.

5 El siguiente paso consiste en definir el fondo de la escena. En ella debes colocar

solamente los elementos que sean fijos, es decir, que permanezcan inalterables a lo largo de toda la película, de modo que sólo tendrás que crearla una única vez, y ocupará tantos

Configura el proyecto

Diseña el fondo de la escena

1

2

Diseña una película con movimientoCrear una animación sencilla en Adobe Flash es más fácil de lo que parece. Para que lo puedas comprobar

hemos seleccionado este ejemplo a partir de unas imágenes vectoriales gratuitas que hemos descargado de Internet (www.freevectordownload), donde puedes encontrar multitud de recursos a los que dar movimiento.

http://www.freevectordownload

XXXXXXXXXXXXXXXSoftware

58


Nº 285

Una vez que has definido el fondo del pro-yecto, es el momento de añadir cada una de las instancias que compondrán la animación. Para ello es fundamental el trabajo con capas, ya que podrás superponer unos elementos sobre otros y asignar distintos tipos de com-portamientos y animaciones.

1Antes de nada, debes crear una capa don-de vas a añadir los nuevos elementos.

Puedes añadir tantas como necesites, si bien, para conseguir un trabajo ordenado es acon-sejable que en cada una añadas objetos de la misma categoría o que tengan un comportamiento similar. Pincha sobre el icono para añadir la nueva capa que se colocará encima de la anterior . Luego haz doble click sobre ella para asig-narle un nombre .

2 Después, dirígete a la y selec-ciona con un click uno de los elementos

que quieres añadir y arrástralo al área del escenario donde deseas colocarlo .

Repite este pro-ceso con el res-to de figuras .

3 Ahora e s el momen-

to de cambiar su tamaño y orientación para conseguir un efecto de profundidad. Selecciona para ello la herramienta haz click sobre uno de los grá-ficos y aparecerán unos selec-tores sobre su contorno . Sitúa luego el cursor en uno de los extremos hasta que el puntero se convierta en una doble flecha . Amplía o reduce la selección según quieras hacer más gran-de o pequeño el objeto, respectivamente.

4 Luego vuelve a colocar el puntero sobre una de

las esquinas de la selección, hasta que cambie a la forma

del mismo . De este modo podrás girar o rotar la imagen. Por último, se-lecciona la he-rramienta

y sitúa el cursor sobre el obje-to hasta que se modifique a un puntero de cuatro flechas . Haz click entonces y podrás arrastrarlo ha-cia el lugar de la escena que prefieras. Poco a poco conse-guirás recrear la fauna de un en-torno marino .

5 Hay que añadir más elementos (algas, en ese caso) por lo que necesitas añadir una

nueva capa. Sitúate sobre la que creaste en el paso 1 , pulsa y asígnale un nombre . No te olvides tampoco de bloquear la capa anterior . Selecciona los objetos y llé-valos de nuevo al escenario, como te hemos mostrado en los pasos anteriores, hasta con-seguir el resultado que más te agrade .

fotogramas como tenga la película en conjun-to o la escena de la misma en la que quieras mantener ese fondo. El ejemplo que hemos utilizado es un fondo marino que hay que pintar, pero puedes utilizar cualquier imagen, fotografía o gráfico que prefieras. Haz doble click sobre el nombre de la única capa que aparece en el panel de la línea de tiempo y asígnale un nombre como . Es importante que sigas es-te paso en el resto de ca-pas, ya que en un proyecto complejo será la mejor manera de localizar cada elemento.

6 Después pulsa sobre la herramien-ta de color

y elige un tono de azul en el cua-dro de muestras que aparece . Luego selecciona la herramienta de forma y dirígete al panel situado en el margen derecho. En el apartado

pulsa en y en la ventana que aparece, pin-cha sobre el icono .Con esto evitarás que se cree una línea de contorno que, aunque en algunas ocasio-nes te puede resultar útil, en este caso no. Luego traza un rectángu-lo sobre toda el área de trabajo de modo que comproba-rás que el escenario se muestra en color azul.

7 Ahora es el momento de pintar la arena del fondo y simular el oleaje. En Flash

se trabaja con imágenes vectoriales, lo cual simplifica la tarea de dibujar desde composi-ciones simples (como esta) a otras más complejas. Para comenzar con esta ta-rea pulsa sobre la herramienta y elige un tono arena, como . Lue-go selecciona este botón y traza una línea ondulada en la parte inferior de la escena .No importa que no sea todo lo perfecta que desees en este momento: el programa se encargará de suavizar los contornos y tú también podrás hacerlo con facilidad más adelante.

8 Con esta línea has separado el cuadrado azul inicial en dos bloques que se pue-

den editar y modificar de modo independien-te. Por eso mismo, pintar ahora la arena es tan fácil como seleccionar de nuevo la herramienta y pinchar sobre el bloque azul situado bajo la línea ondulada, para rellenarlo de este color .

9 Para perfeccionar los contornos de este dibujo (así como el de todos los que ha-

gas), amplía el escenario con ayuda de la herramienta y luego escoge el botón de selección con un click sobre . Sitúa el cursor del ratón sobre el área

que quieres modificar hasta que el puntero cambie a esta forma . Después haz click y mueve la figura hasta que adopte la ondula-ción que deseas .

No es difícil, pero si no estás acostumbrado a trabajar con herramientas de dibujo tendrás que practicar varias veces.

10 Ya has conseguido simular la arena del mar. Ahora quedan las olas, pe-

ro el proceso ya lo conoces. Selecciona distintos tipos de azul y repite los pa-sos anteriores hasta conseguir un resulta-do parecido a este:

11Por último, como en esta capa no harás ningún cambio ni vas a añadir otros

elementos fijos, como pudiera ser en otro ca-so marcas comerciales, texto o imágenes, es aconsejable que la bloquees para impedirlo. Selecciónala y pulsa sobre el icono . De este modo quedará bloqueada y se mos-trará un icono de candado al lado de ella . Si necesitaras des-bloquearla más tarde, basta con hacer click sobre el mismo.

Distribuye los objetos en el escenario

3

Curso: Crea animaciones con Flash, 1ª parte Software■

59Nº 285

Hasta este momento, el uso de Flash no es muy diferente al de una aplicación de dibujo. No obstante, la característica más interesante son las posibilidades de animar los objetos y crear todo tipo de movimientos que se te puedan ocurrir. En esta parte del práctico te mostraremos cómo crear una animación muy sencilla que permitirá simular el movimiento de los peces en el agua.

1Como vas a trabajar con los elementos de una única capa, el primer paso que

te recomendamos es que bloquees el resto para evitar que los objetos situados en las otras se modifi-quen .Luego, con la he-rramienta de selección elige el elemento que vas a animar en este momento .

2 Dirígete al pa-nel , ya

que tendrás que con-vertirlo en un clip de movimiento puesto que sólo este tipo de objetos se pueden ani-mar. En el campo haz click sobre la fe-cha situada al lado y, en el cuadro de diá-logo que se muestra, selecciona .

3 A continuación haz doble click sobre el clip de película. De esta forma accederás

a su propia línea de tiempo, donde podrás ajustar su movimiento de forma independien-te al resto de instancias. Comprobarás que, aunque sigues viendo la escena, se muestra más aclarada .

4 La parte fundamental en este proceso es la línea de tiempo. Cada uno de los rec-

tángulos en los que se encuentra dividida es un fotograma y, por defecto, está ajustada a una velocidad de 24 fotogramas por se-gundo para producir el movimiento. Por esta razón, cuantos más fotogramas abarque un movimiento, éste será más lento y vicever-sa. Con el tiempo podrás controlarlo casi sin preocuparte, pero casi siempre, tendrás que comprobar si el movimiento se ajusta a la finalidad que pretendes. En este caso, vas a crear un movimiento de 30 fotogramas. Para ello, pincha con el ratón sobre el cuadro si-tuado debajo de él .

5 Luego, haz click con el botón derecho del ratón y selecciona .

De este modo el intervalo entre el primer y último fotograma se rellenará de color gris .

Los fotogramas 1 y 30 se denominan foto-gramas clave y se distinguen entre los demás

porque tienen un punto negro situado en el centro . Para desplazarte entre ellos puedes usar la barra de des-plazamiento de color rojo o bien, hacer click con el ratón sobre el fotograma correspondiente dentro de la línea de tiempo.

6 Sitúate so-bre el foto-

grama 30 y des-plaza el objeto a un punto dife-rente, por ejem-plo, fuera de la escena .Luego sitúate en el fotograma 29 haz click en él con el botón derecho del ratón y selecciona

. La línea de tiempo se habrá coloreado en morado y apa-recerá una línea continua en su interior, para indicar que el movimiento se ha realizado correctamente .

Pulsa para comprobar el resultado, o para ver la película completa.

6 Es posible que te encuentres ante un pro-blema frecuente en el trabajo con capas:

al situar un objeto en una capa superior se ha tapado otro situa-do en otra inferior y que necesitas mostrarlo. Aquí ha ocurrido con el alga que tapa al cangrejo . La solución en este caso pasa por añadir una nueva capa sobre la que está si-tuado el elemento que tapa al que quieres mostrar, y colocar en ella este último, o a la inversa, añadir la capa por debajo de la que se encuentra el elemento oculto y pegar aquí el objeto que lo tapa. En ambos casos el proceso es similar.

7 Sitúate, por ejemplo, sobre la capa , añade una nueva capa

desde el botón y asígnale un nombre . Des-pués selecciona la herramienta haz click sobre el elemento que vas a mover

a la nueva capa con el botón derecho del ratón y elije la entrada den-tro del cuadro de diálogo que se muestra en este momento.

8 A continuación, selecciona la capa nueva donde vas a insertar el objeto

haz click con el botón de-recho del ratón sobre el área del escenario donde quieras colocarlo y marca la entrada

. Es posible que ten-gas que mover un poco el objeto hasta colocarlo en el punto exacto que prefieras tal y como te mostramos en el paso 4. De este mo-do conseguirás el resultado que perseguías y habrás logrado colocar todos los elementos de tu animación .

Crea un movimiento sencillo

4

...y en el próximo número

Esto es sólo un pequeño avance de lo que puedes con-seguir animando objetos en Flash. Pero antes de que llegue este momento, es fundamental que conozcas a fondo las herramientas de dibujo. Aunque no seas preci-samente un “manitas” en la materia, puedes conseguir excelentes resultados basándote en sencillos objetos, utilizando tus imágenes como base o, incluso, conver-tirlas en dibujos como si se tratara de un cómic listo para ser animado. No te pierdas la próxima entrega, en la que te explicaremos todo esto y muchos trucos más.

Es posible que dentro de una misma capa dos elemen-tos se superpongan y necesites que uno no quede ocul-to por el otro. Puedes organizar la disposición y el orden en el que aparecen las distintas instancias seleccionando una de ellas con el botón derecho del ratón, seleccionar y elegir su posición .

Consejo

Las posibilidades de Flash para crear dibujos, gráficos o ilustraciones son ilimitadas. Da igual si no tienes aptitudes artísticas, ya que las herramientas que te ofrece este programa te ayudan a pintar todo tipo de situaciones de un modo muy sencillo y fácil.


SumarioDibuja líneas y trazos simples 39Crea formas sencillascon relleno 40Crea tu primera ilustración 40Dibuja a partir de una imagen o fotografía 41Inserta y edita texto 42

Guía del curso


38 Nº 286

¡Atrévete a dibujar!archivo, a la vez que el dibujo y la representación de gráficos se realiza de un modo muy sencillo.

El camino fácilCon Flash puedes dibu-

jar de muchas maneras: a mano alzada (con la herra-mienta de lápiz o pincel), mediante curvas bézier (herramienta de pluma), a partir de formas sencillas como polígonos o líneas, o transformando una ima-gen en mapa de bits en vectorial. El primero de los métodos no te resul-

tará complicado si tienes buena destreza en el dibu-jo, ya que si lo haces bien sobre el papel, sólo nece-sitarás adaptarte al ratón y a la pantalla del orde-nador para conseguir bue-nos resultados. El segundo caso tampoco te resultará complicado si has utiliza-do antes otros programas de ilustración.

En esta entrega del cur-so te mostramos los dos últimos métodos, con los que conseguirás dibujar aún cuando nunca hayas manifestado ninguna apti-tud para el dibujo.

toda esta información de color se traduce en un aumento del tamaño del archivo. Flash utiliza vec-tores que se crean a partir de una serie de posiciones en un eje de coordenadas. Con esto se consigue re-ducir la información del

en mapa de bits basadas en píxeles. Estas últimas están formadas a partir de una retícula con millo-nes de puntos diferentes de color que, en conjunto, dan como resultado una imagen llena de detalle y precisión. Sin embargo, A unque seguro que no

puedes contener más las ganas de animar

objetos en tu proyecto con Flash, es conveniente que antes de empezar tengas claros algunos conceptos sobre los distintos elemen-tos que darán forma a tu futuro proyecto, así como el tratamiento que requiere el trabajo con cada uno.

Vectores vs. mapa de bits

En Flash debes tener en cuenta su naturaleza vecto-rial. Esto significa que los gráficos e imágenes que vas a crear y editar son vectores, y no imágenes

Adobe Flash CS4 permite realizar movimientos en 3D sobre cualquier clip de película de un modo rápido y fácil.

Cada elemento gráfico en Flash se forma a partir de un contorno, un relleno o la com-binación de ambos. Es importante que sepas cómo trabajar con ellos y en qué casos nece-sitas uno u otro.

1Antes de comenzar a dibujar con Flash, puedes cambiar el aspecto de la interfaz,

de modo que te resulte más cómodo acce-der a las herramientas específicas para esta tarea. Dirígete al menú supe-rior y pulsa sobre la entra-da . En el cuadro de diálogo que se muestra a continuación, selecciona . De este modo, la barra de herramientas de dibujo y los paneles de pro-piedades de cada una de ellas, se colocarán en el margen izquierdo de la pantalla .

2 El elemento más sencillo de dibujo es la línea. Para pintar una pulsa sobre el

botón correspondiente . A continuación, pincha en un área de la es-cena y, sin soltar el ratón, arrastra el cursor en cualquier dirección hasta que la línea alcance el ancho que necesitas .

3 Es posible que el resultado no sea aún el que buscas, pero no te preocupes, porque

puedes modificar sus propiedades. Para ello es necesario que selecciones el objeto pre-

viamente. Hazlo con un click sobre el siguiente botón: situado en la barra de herramientas, y después selecciona con otro la línea, que cobrará este aspecto . Luego, dir ígete a l apartado y pulsa sobre la man-cha de color situada al lado del icono del lápiz de trazado. Se abrirá un panel con distintas gamas de color

que puedes elegir con un click sobre uno de los recuadros. En este caso .

4 Otro de los valores que puedes cambiar es el grosor del trazo. En este caso, des-

pués de haber seleccionado la línea como en el paso anterior, dirígete al apartado

y desliza la barra hacia la derecha si quieres aumentar el grosor. También puedes hacer-lo si indicas el valor que deseas darle en el campo situado justo al lado. Tras hacerlo verás al instante el resultado .

5 También puedes elegir distintos estilos de trazos para crear, por ejemplo, una línea

discontinua de puntos o rayas, de trazo fino, sombreada, etc. Simplemente debes volver a seleccionar la que tienes sobre el escenario y luego pulsar en el menú .

En el cuadro desplegable que aparece enton-ces, selecciona uno de los estilos

y verás el resulta-do al momento .

6 Cuentas con tres posibilidades más a la hora de modificar el trazado original.

Puedes modificar la curvatura de la línea del mismo modo que si es tratara de una goma flexible, lo que te permitirá crear cualquier forma que te propongas. Sitúa el puntero del ratón cerca de la línea hasta que éste cambie a la forma . Entonces haz click y mueve la línea hacia arriba o hacia abajo, y también hacia la izquierda o derecha hasta que alcance la curvatura y altura que deseas que tenga .

7 También puedes modificar la longitud del trazo. Sólo tienes que situar el puntero

del ratón en uno de sus extremos hasta que cambie a la forma siguiente: luego haz click y, s in sol tar el ratón, arrástralo hasta que alcance el tamaño que deseas . Si necesitas hacer un ajuste preciso de la me-dida, escríbelo en el campo .

8 Por último, puedes desplazar y colocar el objeto que has creado en la parte de la

escena que prefieras. Lo conseguirás si sitúas el puntero sobre la línea hasta que cambie a la forma .

Luego haz click y muévela al lugar que prefie-ras. Al igual que en el punto 7 , puedes hacer un ajuste preciso indicando la posición exacta en los campos .


39

Herramientas de dibujo

Nº 286

Dibuja líneas y trazos1

El dibujo a mano alzada con Flash es muy flexible, y te permite realizar las composiciones con facilidad. Pero si el dibujo no es tu fuerte, te mostramos cómo obtener ilustraciones y formas a partir de contornos simples

como líneas, círculos y rectángulos. Puedes usar tus fotos y convertirlas en dibujos. Te mostramos cómo.

Es importante que mantengas siempre visible la he-rramienta Regla en el escenario, ya que te permitirá calcular la posición exacta de cada objeto en él, así como su tamaño. Esto te resultará muy necesario a la hora de animar los distintos elementos, como podrás comprobar en la próxima entrega. Dirígete al menú

y luego a para mostrar las barras de regla vertical y horizontal. Los objetos se alinean en un eje de coordenadas donde el valor “y”, marca la posición vertical y, el valor “x”, la horizontal.

Consejo

Ahora que ya sabes utilizar las líneas bá-sicas, llega el momento de crear tu primera ilustración. En este ejemplo vas a dibujar una mariquita utilizando formas simples, como líneas y círculos. Comprobarás que no tiene ninguna complicación.

1Comienza primero con un círculo. Pulsa sobre el botón

y, en el cuadro de diálogo que aparece, es-coge la entrada . Luego haz click sobre para acceder a la ventana donde puedes seleccionar el color . Establece un grosor, por ejemplo de .

A continuación cambia el color del relleno por el blanco. Esto lo conse-guirás con un click sobre y después selecciona .

2 Ahora dirígete al escenario y pinta ya el círculo .

Para crear la forma del cuerpo alargada debes modificar la cur-

vatura, del mismo modo que te hemos mos-trado con las líneas. Pulsa luego sobre el botón de selección haz click en el extremo inferior del círculo y desliza el cursor ha-cia abajo .

3 Para separar la cabeza del cuerpo del insecto, vas a

utilizar la herramienta cuyo funcionamiento es similar al que te hemos mostrado para crear líneas, si bien tiene algunas peculiaridades. Así, el lápiz te permite dibujar a mano alzada, pero puedes indicar el tipo de acabado que dará de forma automática a tu trazo (suavizado o con vérti-ces marcados). Esto te evitará la preocupación de dibujar con precisión con el ratón. Pincha sobre el botón y en el cuadro de diálogo que aparece, selecciona la herramienta para suavizar el trazo. A continuación, dibuja sobre el círculo una línea curva-da similar a esta .

4 Comprobarás que se suaviza de forma automática. Además de separar el objeto

visualmente con una línea, el relleno también se ha dividido en dos, de forma que puedes editar cada una de las partes independiente-

mente. Pulsa en el área superior para comprobar que es así, y selecciónala para comenzar a dibujar lo que será la cabeza .

5 Ahora debes colo-rearla, por lo que

dirígete al panel de pro-piedades de color situado en el margen infe-rior derecho de la pantalla .

Pulsa sobre el icono y en el cuadro de diálogo que aparece justo después, selec-ciona la entrada . De este modo obtendrás un color de relleno degradado de forma li-neal. De momento, está de-finido en escala de grises, del negro al blanco . Pulsa sobre el selector

Otros elementos que puedes obtener fácil-mente con Flash son las formas simples que viene predefinidas por el programa: rectán-gulo, cuadrado, círculo, óvalo y pentágono. Si tus artes en el dibujo no son muy amplias, te recomendamos que, antes de recurrir a he-rramientas más complicadas, intentes utilizar uno de estos elementos para dar forma a tu figura ya que la mayoría de los objetos pue-den crearse a partir de una de ellas.

1Pincha sobre la herramienta para comenzar el proceso. Se abrirá

un cuadro de diálogo desplegable con las di-versas opciones de que dispones .

En este ejemplo, elije la primera de ellas. Lue-go dirígete al menú situado abajo. Observa que ahorase ha activado, además de la herramienta de co-lor de trazo, también la de relleno .

2 En este tipo de objetos es importante que distingas entre el trazo y el relleno.

El primero de ellos es el contorno, y dibu-

ja una línea alrededor del objeto. Esta línea tiene las mismas propiedades que te hemos mostrado en el apartado anterior, de modo que te ayudará en muchos casos poder mo-dificar su color, estilo o grosor, si bien es po-sible que, según el tipo de objeto que vas a dibujar, no sea necesario crear este contorno. En este último caso, pulsa en y en el cuadro de muestras de color que aparece, selecciona con un click la siguiente opción:

3 La paleta de color se utiliza del mismo modo ya sea para seleccionar el color de

un trazo, del relleno o de un elemento de tex-to. Puedes elegir una de las tonalidades que aparecen por defecto, pero si buscas un matiz diferente, es preferible que pulses sobre el icono . De este modo se mostrará un panel más avan-zado desde el que podrás elegir el color. Para ello, haz click en un área del mismo . Además, si vas a utilizar este tono en más mo-mentos del proyecto, es preferible que definas una lista de colores personalizados para agili-zar el trabajo. Pulsa en y se añadirá al campo .

4 Continúa con el rectángulo que habías co-menzado a dibujar. Has seleccionado un

trazo de color azul y el relleno será de color rojo, tal y como lo puedes comprobar en .

El siguiente paso que puedes dar, en el caso de que lo consideres necesario, consiste en indicar un mayor o menor grosor del trazo. Puedes hacerlo desde .

Una vez que hayas definido estas características, ya puedes dibujar el rectángulo con ayuda del ra-tón en el escenario con las dimensiones que creas conveniente, y obtendrás un re-sultado similar a este .

5 Al igual que en el ejemplo anterior, pue-des modificar su forma si seleccionas

uno de los bordes (o varios) y lo arrastras a la posición que deseas hasta conseguir un resul-tado que cumpla con tus expectativas .


40 Nº 286

Crea formas simples con relleno

Crea tu primera ilustración

2

3

y, en el panel de muestra de colores que aparece, selecciona un tono amarillo, como por ejemplo . De forma automática habrás con-seguido colorear la cabeza .A continuación, selec-ciona el otro área del relleno para dibujar el cuerpo . Pincha sobre la herramienta pero selecciona ahora un color sóli-do en tono rojo . Obtendrás un resultado como este .

6 También aquí tendrás que separar el cuerpo en dos

mitades para dibujar las alas. Puedes utilizar la herramienta de modo que selecciónala y traza una línea que recorra el relleno de punta a punta . Con ayuda del ratón, cúrvala un poco para conseguir una sensación de volumen .

7 Por último, debes dibujar los topos en las alas y, si quieres, los rasgos de la cara,

así como las antenas y las patas. En el primer caso pulsa sobre el botón

después en la herramienta y, en el menú que aparece a conti-nuación, marca la casilla para desactivar la opción de trazo. Lue-go pulsa sobre y selecciona el color blanco entre las muestras disponibles. Después dibuja un círculo sobre una de las alas del dibujo y repite este paso varias veces mo-dificando el tamaño de los círcu-los hasta conseguir un resultado parecido a este:

8 Ahora selecciona el co-lor negro para el relleno

del círculo y di-buja uno pequeño sobre la cabeza a modo de ojo . Como tienes que pintar al lado otro igual, selecciónalo primero con la he-rramienta correspondiente y luego con un click sobre el punto re-cién creado . Después pulsa a la vez las teclas y para duplicar el objeto de forma instantánea . Obtendrás una copia, si bien no estará ubicada en su lu-gar exacto. Para ello sitúa el puntero del ratón en un área cercana al mismo hasta que el cursor cambie de forma

y muévelo después hasta el lu-gar que sea necesario .

9 Puedes pintar la boca tra-zando una línea pequeña con la

herramienta y curvándola ligeramente como te hemos mostrado en pasos anteriores. Con esta mis-ma herramienta puedes, finalmente, dibujar las antenas que puedes curvar también

así como las diferentes pa-tas

hasta que ob-tengas un re-sultado similar al que te mos-tramos en este ejemplo .

Además de pintar a mano alzada puedes convertir una imagen en mapa de bits ( Jpg, Gif, Bmp…) basada en píxeles, en una vecto-rial que puedes editar fácilmente con Adobe Flash (aparte de reducir el tamaño del archi-vo), q también, te servirá si quieres convertir tus fotos en ilustraciones y darles un aspecto de cómic. Hazlo de este modo.

1Lo primero que tienes que hacer es im-portar al proyecto la imagen que vas a

utilizar. Para ello, dirígete al menú ,selecciona y después haz click so-bre la entrada denominada . A continuación, aparece una ventana de ex-ploración desde donde debes seleccionar la imagen que vas a utilizar .

Tras ello com-probarás que la imagen se ha guardado en la biblioteca de archivos .

Selecciónala con el ratón y arrástrala hasta el escenario para editarla .

2 Antes de comenzar el proceso, debes se-leccionar el objeto con un click en

y, luego, seleccionar la imagen pinchan-do sobre ella. A continuación, pulsa sobre el menú y en la entrada , elije la opción . De este mo-

do verás un nuevo cuadro de diálogo, donde debes indicar una serie de parámetros para la creación de los vec-tores. En el primero de los apartados especifica un valor de 1 a 100, según quieras que se conserve una mayor o menor cantidad de píxeles de color. Después debes indicar el valor de número de píxeles que deben considerarse para asignar un valor. Cuanto mayor sea este dato, más se parecerá a la

Curso: Crea animaciones con Flash, 2ª parte Software

41Nº 286

▲

Dibuja a partir de una imagen

4

Una vez que has convertido en vectorial una imagen en mapa de bits, es muy recomendable que agrupes todas las partes para que puedas manejar el conjunto como un bloque. Para ello, selecciona la imagen obte-nida desde el menú y luego en . Después, dirígete al menú y pincha en

para convertirla en un único bloque o elemen-to. Además, te recomendamos que la conviertas en símbolo y, a partir de ahora, trabajes únicamente con esta imagen y no con el Jpg original, que aumenta el volumen del archivo y que debes eliminar para evitar-lo. Haz click con el botón derecho del ratón sobre la imagen, selecciona la entrada

y asigna un nombre . En la biblioteca, selecciona el archivo original, pulsa el botón derecho del ratón y es-coge la función .

Consejo

Con Flash puedes utilizar tres tipos de texto: estático, que se puede editar del mismo modo que un procesador de texto; dinámico, que se puede actualizar de forma automática; y campos de introducción de texto para añadir formularios. En este curso vas a emplear el primero de ellos, ya que para los otros son necesarios ciertos conocimientos de progra-mación algo más avanzados.

1Pulsa sobre el botón y mueve el cursor del ratón hacia

la escena. Observarás que el puntero cambia por la forma . Si lo prefieres, puedes definir antes el ancho

que tendrá en campo de texto. Para ello, una vez que has pulsado sobre el área donde vas a escribir, sitúa el cursor en el margen derecho hasta que cambie su forma con una doble flecha, haz click y desplázalo hacia la derecha hasta que consigas el ancho deseado .

No te preocupes por la altura, porque el progra-ma hace los saltos de línea de forma automática.

2 Haz click en el área donde quieres insertar el párrafo

y comienza a escribir del mismo como que con un procesador de texto . Para cambiar la posición del texto dentro de

la escena, selecciónalo con la herramien-ta correspondiente de modo que quedará rodeado por un marco de color azul .

Sitúa el cursor sobre este mismo campo hasta que tome la forma . Por último haz click y, sin soltar el ratón, des-plaza el texto a la nueva ubicación.

3 Es el momento de aplicar los atributos del texto. Para ello debes dirigirte al

panel de herramientas situado en el mar-


42 Nº 286

imagen original, si bien, el número de vec-tores aumentará y te resultará más difícil editar la imagen. En este caso es suficiente con un valor medio .

3 En los siguientes apartados puedes elegir cómo se van a tratar las

curvas y los vértices de las distintas áreas de la imagen. En este caso, como no es ne-cesario que queden definidas estas partes, en selecciona la entrada y luego, en indica . A continuación pulsa en

y, tras unos ins-tantes, verás el resultado en la pantalla .

4 Pero aún no has termina-

do, porque aun-que has obtenido una imagen vec-torial, cada una de las partes de la imagen presenta algunas irregula-ridades que debes corregir de forma manual. Durante este proceso, te aconsejamos que te armes de paciencia, porque los mejores re-sultados los conseguirás a fuerza de probar y de hacer un trabajo minucioso. Ante todo, debes aplicar el zoom de la imagen para verla con la mayor precisión posible. Selecciona la herramienta y haz varios clicks sobre la escena hasta ampliar la vista de la imagen lo máximo po-sible. Entonces verás los diversos defectos e irregularidades en los trazos de la imagen . Como se trata de vec-tores, puedes modificar cada una de las partes

con ayuda del cursor del ratón, del mismo modo que te hemos enseñado a hacerlo en los apartados anteriores .

5 Es posible que se hayan formado más

colores de relleno de los que pretendías . En este caso, puedes uni-ficar el color de un objeto de un modo muy simple. En primer lugar, seleccio-na el área que contenga el re-lleno que vas a cambiar con un click sobre ella . Luego, pulsa sobre la herramienta y, a continuación, pincha sobre un área de la imagen que sea del color por el que lo quieres sustituir . Tómate tu tiempo y, con mu-cha paciencia retoca y modifi-ca poco a poco la imagen hasta que consigas un resultado adecuado .

6 Este mismo proceso te puede servir, en el caso

de rostros y caras a las que quieras darles un aspecto de cómic. En estos casos, el pro-ceso es similar al anterior: im-porta el archivo a la biblioteca, arrástralo a la escena

y sigue los pasos del apartado 2. En este ejem-plo, sin embargo debes indicar los valores

ya que será preferible que la imagen vectorial se parezca a la original.

7Obtendrás un resultado similar a este, si bien, aún con algunas imperfecciones .

Vuelve a utilizar la herramienta para matizar algunas zonas como el con-torno de la boca o de los ojos . Si es necesario, utiliza la siguiente he-rramienta: para perfeccionar al-gunos rasgos, como el perfil de la nariz .

Inserta y edita texto5

gen izquierdo de la interfaz del programa. En primer lugar, asegúrate de que en el cam-po se encuentre marcada dicha opción. Después dirígete al apartado y pulsa sobre el panel desplegable

. De es-ta forma podrás elegir el tipo de fuente que prefieres .

4 A continuación, pincha sobre el campo

si quieres añadir cursiva, negri-ta o ambas características al tex-to. En el apartado puedes modif icar el cuerpo o tamaño del mismo con un click en el campo . Y en , el espacio entre las letras. Para cambiar el color del texto pulsa sobre la he-rramienta y selecciona una de las opciones del panel que aparece

o bien haz click sobre para elegir otra tonalidad más específica.

5 Después, desde el apartado

es posible alisar los bordes de las letras, y puedes seleccionar distintas posibilidades según la finalidad del texto .

Ten presente la herramienta . Si la activas, el texto podrá ser seleccionado y copiado des-de el archivo final, por lo que es importante que conozcas este as-pecto si, por ejemplo, vas a pu-blicar tu documento en Internet y no quieres facilitar esta tarea.

6 Las opciones de formato de párrafo se encuentran en el

panel . Selecciona una de las cuatro posibilidades

para establecer la alineación del texto a la izquierda, centra-da, derecha o justificada. Desde

puedes definir la sangría del párrafo y, e n , los márgenes. Por último, en el campo tienes la posi-bilidad de establecer un vínculo o link al texto. Simplemente, es-cribe la dirección o ruta en

y, si quieres añadir una dirección de correo electrónico utiliza la ex-presión “mailto: [email protected]”. Por último, en el apar-tado , selecciona si quieres que el nuevo sitio se abra en una página distinta del navegador, y si quieres que lo haga en la misma ventana.

43

Software

Nº 286


Si has llegado hasta esta parte del curso, no te pierdas la próxima entrega, porque en ella te contamos todos los pasos nece-sarios para que puedas animar cualquier tipo de objeto con Flash. Asimismo, te ex-plicamos con todo detalle cómo funciona la línea de tiempo, para que puedas orga-nizar y controlar con total exactitud cual-quier movimiento que necesites crear.

Cada vez que utilizas una fuente en Flash el programa almacena toda la serie de caracteres y los compila junto con el do-cumento final. Esto permite que, desde cualquier equipo donde se reproduzca el archivo, se pueda visualizar dicha ti-pografía, con independencia de si se en-cuentra instalada o no. Sin embargo, esto hace que aumente el tamaño del archivo, algo que puede ser un impedimento en determinadas ocasiones. Para evitarlo, una vez que termines de editar el texto y esté totalmente listo para su publicación, puedes convertir el texto en vectores, de modo que el programa lo trate como un gráfico. Para ello selecciona el texto y pulsa y dos veces consecutivas. Enseguida verás el resultado:

Consejo

■

vaio

Textfeld

En la edición impresa, este era un espacio de publicidad

mailto:[email protected]%E2%80%9D



L a animación por or-denador ha revolu-cionado las técnicas

tradicionales, en las que había que generar una gran cantidad de dibujos en distintas fases de mo-


SumarioCrea una animación de movimiento clásica 47Movimientos dentro del clip de película 48Animación con guías de movimiento 48Esqueleto de movimiento 49Uso de máscaras animadas 50Máscaras animadas complejas 51

46 Nº 287

Guía del curso


vimiento para crear esta sensación. No obstante, la base del funcionamiento de programas como Flash se centra en sus principios fundamentales ya que, al igual que entonces, es ne-cesario crear diferentes estados de movimiento de un objeto y dibujar entre ellos la secuencia de tran-sición entre uno y otro. Sin embargo, existe una diferencia más que nota-

ble en cada caso ya que, antiguamente, además de dibujar los fotogramas clave, era necesario dibu-jar fotograma a fotograma todos los momentos que marcaban el paso de un estado a otro. La diferen-cia ahora es más que nota-

ble, ya que sólo tienes que preocuparte de definir los dos (o más) estados de movimiento y Flash se en-carga de intercalar el resto de forma automática. Este hecho permite, no sólo re-ducir el tiempo de trabajo, sino que cualquier usuario

puede aventurarse en este campo sin tener conoci-mientos específicos de di-bujo o de animación.

Distintos tipos de movimiento

Flash permite crear dos tipos de animaciones a los que llama interpolación de movimiento e interpola-ción de forma. En ambas el funcionamiento es el mismo, ya que se crean dos fotogramas claves, y el programa interpola el resto de la secuencia entre ambos. La diferencia entre una y otra función reside

en el tipo de objeto y en el modo en el que se ani-ma. Así, la de movimiento funciona con símbolos, mientras que la de forma con gráficos editables. Con ambas puedes cam-biar el tamaño, el color y la posición, si bien con la segunda el objeto puede cambiar de forma.

Junto a estos movimien-tos, dispones de funciones más avanzadas como las guías de movimiento y las máscaras animadas, que te permiten conseguir una mayor precisión y control de los movimientos.

Por último, es necesario destacar una función que ha incorporado la últi-ma versión de Flash CS4, denominada cinemática inversa. Gracias a ella es posible crear fácilmente formas articuladas, que equivalen a los huesos de un esqueleto, y animar las distintas partes que lo componen.

Llega el momento de hacer que cobren vida los objetos de tu proyecto. Animar una película en Flash es una tarea sencillaque te permite crear toda clase de movimientos imaginables.

Con guías conseguirás recorridos exactos

3, 2, 1...¡acción!

Es recomendable que organices en capas distintas cada ele-mento que vas a animar, para tener un mayor control de ellos.

Genera el movimiento con fotogramas clave

▲

47


Nº 287

Para mover un objeto en Flash no es nece-sario animar fotograma a fotograma, sino que basta con definir puntos o fotogramas clave, en los que se produce un cambio en el objeto (posición, tamaño, orientación, etc.) y generar una transición entre ellos que crea el movi-miento. En este ejemplo hemos usado gráficos gratuitos del sitio www.vector4free.com

1Lo primero que debes hacer para comen-zar a animar tu proyecto es situar los

distintos elementos en la línea de tiempo. Los objetos que no vas a animar, en prin-cipio, puedes situarlos en la primera capa, y el resto en otras diferentes. Sitúate en la escena principal con un click en y haz doble click sobre el nombre de la ca-pa para cambiar el nombre de la misma . Aquí, por ejemplo, puedes situar elementos que anima-rás algo más tarde.

2 Añade otra para colocar la imagen de fondo o los elementos fijos que se man-

tendrán constan-tes a lo largo de la película y que no vas a animar .Llámala, por ejemplo . Es importante que la imagen o tapiz de fondo se sitúe por debajo del resto de elementos del proyecto para permitir su visualización. Para cambiar el orden de las capas sólo tienes que seleccionarla y arrastrarla hacia la posición que desees .

3 Una vez que has situado los elementos en las distintas capas en el escenario

, selecciona el objeto que quieres animar con un click sobre el botón y lue-go otro sobre el elemento en cuestión .Para darle movimiento ne-cesitas antes convertirlo en símbolo que, además, debe ser un clip de película. Di-rígete al menú situado en el menú de he-rramientas del margen izquierdo, luego asigna un nombre a la nueva instancia en y des-pués selecciona la opción .

4 Ahora que ya has convertido el objeto en un clip de película, es el momento

Controla los movimentos

Crea una animación de movimiento clásica

1

Cualquier elemento gráfico en Flash puede ser animado. Si conoces bien los recursos de que dispones podrás controlar hasta el movimiento más imperceptible, pero con el que conseguirás un gran realismo, desde el

parpadeo de un ojo hasta el desplazamiento de los objetos a lo largo de la escena. Aprende cómo.

de conseguir que se mueva. Haz doble click sobre él y accederás así a su propia línea de tiempo. Como puedes ver, es igual a la de la escena principal, si bien, los ele-mentos de ésta están inactivos y en un color más aclarado .

5 Sitúa el cursor sobre el primer fotograma con un click sobre él

luego colócate en otro punto donde vayas a insertar el fotograma clave, en este caso el 15, y pulsa . Comprobarás que queda sombreado el espacio entre uno y otro en color gris, y el fotograma 15 queda resaltado con un punto negro, lo que indica que se trata de un fotograma clave .

6 Es en este último donde debes cambiar la posición del objeto, de modo que se

produzca un cambio entre un momento y el otro. Para controlar la velocidad, recuerda que cuanto más tiempo dure más lento se-rá el movimiento, y a la inversa. Dirígete a la línea de tiempo y sitúate en el fotograma clave 15, luego pulsa en y aproxima el cursor del ratón sobre el objeto hasta que el puntero del ratón cambie de forma .Haz click y muévelo al lugar del escenario donde quieras trasladarlo. Te vendrá muy bien la imagen de fondo pues te servirá de guía, en este caso, para des-lizar la ardilla por el árbol .

7 A continuación, dirígete de nuevo a la línea de tiempo y haz click sobre el fo-

tograma anterior al fotograma clave con el botón derecho del ratón. En el cuadro de diálogo que aparece entonces, selecciona

. De este modo has creado una interpolación de movimiento que, como ves, se representa en la línea de tiem-po en color violeta, y con una flecha que marca la transición entre el frame de inicio y el final .

8 Aún puedes conseguir que el objeto cam-bie más: rotarlo, modificar su tamaño o

color. En este mismo fotograma clave puedes rotar e inclinar el objeto para dar la sensación de que realmente se desliza por el árbol. Sitúate así sobre el foto-grama clave haciendo click sobre la línea de tiempo luego selecciona la herramienta y verás cómo el objeto queda enmarcado por una serie de selectores .Coloca el puntero del ratón sobre una de las esquinas hasta que cambie a la forma haz click y muévelo hasta que encuentres la inclinación más acertada .

9 Ya has completado una primera parte de la ani-

mación, pero puedes seguir haciendo más tramos hasta completar el movimiento de este animal en cuestión. Como has hecho antes, sitúate en otro punto de la línea de tiempo y pulsa luego la tecla para crear allí otro fotograma clave .

Luego, selecciónalo con un click y mueve y rota el obje-to hasta otro punto diferen-te en la escena, del mismo modo que has hecho en el paso anterior .Después sitúate en el punto anterior al nuevo fotograma clave haz click con el botón derecho del ra-tón y selecciona .Repite este mismo pro-ceso en la línea de tiem-po las veces que consi-deres necesarias hasta que la ardilla alcance su objetivo .

10 Cuando termines, la línea de tiempo po-drá tener un aspecto similar a este:

Para comprobar el resultado, pulsa la tecla y verás la animación sobre la misma escena. Si la velocidad del movimiento no te acaba de convencer, ahora puedes acelerarla o ralentizarla. En el primer caso seleccio-na cada uno de los fotogramas clave del intervalo que quieras cambiar

http://www.vector4free.com

48


Nº 287

Cada símbolo en Flash (clip de movimiento, gráfico o botón) puede contener tantos clips de movimiento como sean necesarios para conseguir animar los distintos elementos de tu película. En este ejemplo te mostramos cómo simular el parpadeo de un ojo en un animal, lo que te puede ayudar a la hora de hacer animaciones más complejas, como ros-tros de personas, ya que el procedimiento es muy parecido.

1No siempre te resultará necesario animar los objetos sobre el escenario principal

para ver el fondo de la ilustración. En este caso, como se trata de mover una parte den-tro del objeto, puedes hacerlo fuera de su contexto. Haz ahora doble click sobre el nombre del mismo dentro de la bibliote-ca de archivos .De este modo accederás a la línea de tiempo del objeto .

Para trabajar de un modo más cómodo, au-menta el zoom del dibujo con ayuda de la herramienta o del selector .

2 Para poder animar un objeto dentro de otro es necesario que lo conviertas antes

en un símbolo independiente, que debe ser un clip de película. Selecciona la parte que quieres animar con un click con el botón derecho del ra-tón, en este caso, el ojo

Movimientos dentro del clip de película

2

Otro método a la hora de animar los objetos son las guías. Esta función tiene como ventaja que puedes crear recorridos, sobre los que se moverán los distintos elementos, tan com-plejos como quieras ya que previamente los tendrás que diseñar. Te explicamos cómo.

1Cuando vayas a añadir un nuevo objeto, con una animación independiente al resto

de elementos de la película, es recomenda-ble que lo hagas en una nueva capa. Diríge-te a la escena principal con un click sobre

y pulsa en para crearla .Pulsa dos veces sobre ella para asignarle un nombre . Es im-portante que lo hagas, ya que a medida que la película se haga más compleja, tener orde-nada la línea de tiempo y cada uno de los ele-mentos será el mejor modo de reconocerlos y gestionarlos. También es muy recomendable que bloquees las capas que no vas a utilizar, para impedir cualquier cambio por error en alguno de sus elementos. Hazlo con un click sobre el punto blanco bajo el icono de can-dado situado en cada una de ellas .

2 Sitúa el elemento que vas a animar

en la nueva capa, en el lugar donde deseas que se inicie el movi-miento .A continuación, tie-nes que convertir el símbolo en un clip de película del mis-mo modo que en los ejemplos anteriores. Pincha sobre él para seleccionarlo y dirígete al aparta-do . Presiona lue-go en el panel desplegable

y selecciona la primera función .

Animación con guías de movimiento

3

y deslízalo hacia la izquierda para aumentar la velocidad, o hacia la derecha para reducirla. Obten-drás un resultado diferente con movimientos mucho más rápidos y breves en este caso tendrá esta representación:

11Pero aún no has terminado. Seguro que ya te has dado cuenta de que, una vez

que la línea de tiempo llega al último fotogra-ma, vuelve de nuevo al primero, generando así un bucle infinito. Como no quieres que esto ocurra en este caso, debes añadir una instrucción en el último fotograma para dete-ner el movimiento. Haz click sobre él con el

botón derecho del ratón y selecciona la op-ción . De este modo verás la ventana de comandos del programa .

12 Selecciona la versión del código que vas a utilizar, en

este ejemplo, y en la lista de acciones que aparecen en e l m a r g e n i z q u i e r d o , escoge la ac-ción con un do-ble click del ratón. Comprobarás que la instrucción se añade también en el campo de código situado en la ven-tana principal .Pulsa en para cerrar la ventana. Ahora sobre el fotograma clave, se habrá añadido una “a” para indicar-te que contiene una acción .

e indica el nombre y tipo de símbolo en la ventana de propiedades situada en el margen izquierdo del programa .

3 Ahora que ya has con-vertido el objeto en

símbolo, haz doble click sobre él para, de este modo, acce-der a su línea de tiempo propia .

Luego, dirígete al punto donde quieras crear el fotograma clave, selecciónalo y pulsa .En este caso el intervalo será breve para conseguir que el par-padeo sea rápido .

4 Sitúate sobre el último fotogra-ma clave, selecciona el objeto,

en este caso el ojo y pulsa en para eliminarlo, ya que la posición del ojo cerrado vas a di-bujarla a mano alzada. Luego, selecciona la herramienta y dirígete al apartado

. Elige el color ne-gro en y un grosor de trazo de .

Luego vuelve a la escena y pinta una línea pareci-da a esta:

5 Por último, com-prueba el resultado

pulsando la tecla . En este caso no necesitas detener el movimiento en el último fotograma como en el apartado anterior, ya que el parpadeo debe ser continuo. Por lo tanto, te interesa generar un bucle.


49Nº 287

3 Haz doble click sobre el objeto para ac-ceder a su línea de tiempo .

Sitúate sobre la capa, presiona el botón derecho del ratón y elije .Aparecerá así la capa donde vas a incluir la guía .Después debes indicar el tiem-po que durará el movimiento. En este caso, selecciona los fotogramas de las dos capas y pulsa para crear aquí el fotograma clave en la capa que contiene el objeto .

4 Luego pulsa sobre el fotograma 1 de la capa de guía

escoge la herra-mienta y dibuja un recorrido en la

escena que quieres que siga el objeto que vas a animar .En este ejemplo, la mari-posa deberá realizar el si-guiente recorrido .

No te preocupes porque la guía “ensucie” el escenario, ya que cuando reproduzcas la pe-lícula no se mostrará.

5 Es importante que la duración de ambas capas sea la misma, para conseguir que

el movimiento se realice de forma co-rrecta. Al crear la guía es posible que no sea así, por lo que debes seleccio-nar el fotograma 39 y arrastrarlo hacia el 40 para igualar la duración de las dos capas .

6 Es el momento de vincular la guía de movimiento al objeto. Te recomenda-

mos que amplíes el zoom de la imagen con ayuda de la herramienta .Luego haz click sobre el primero de los fo-togramas claves de la capa que contiene el objeto pulsa en y mué-velo hasta ajustar correctamente el extremo de la guía de movimiento con el indicador de posición que aparece sobre él .A continuación, debes seleccionar el último fotograma clave y situar la mariposa junto al extremo

final del reco-rrido .

7 Para crear e l mov i -

miento sobre la guía sitúate en el fotograma pincha sobre el botón dere-cho del ratón y marca luego

. Pulsa la tecla y comprueba que el objeto se desliza correctamente por la guía .

8 Es posible que necesites detener el movimiento para evitar que se

repita indefinidamente. Ya sabes cómo hacerlo: marca el último fotograma cla-ve de la línea de tiempo y presiona el botón derecho del ratón. Después selecciona la entrada para abrir la ventana de comandos y haz doble click en

para detener en este punto la animación y evitar que vuelva al pri-mer fotograma y lo repi-ta de forma indefinida.

Flash CS4 ha añadido la función de ani-mación cinegética, que permite crear un es-queleto en los objetos y mover las distintas partes del mismo. Para ello debes definir las piezas que se moverán y crear un esqueleto a partir del cual se generará el movimiento.

1Primero, haz doble click sobre el símbolo que vas a animar

con la herramienta en la biblioteca de archivos para acceder a su lí-nea de tiempo en el escenario .

Esqueletode movimiento

4 Utiliza el botón para aumentar el modo de vista del objeto en la pantalla y trabajar con mayor precisión.

2 Pa r a p o d e r crear un es-

queleto es necesa-rio que cada una de las partes del mismo sean sím-bolos independien-tes y, en este caso, deben ser clips de película .De este modo, tendrás que convertirlos en el caso de que no lo hayas hecho aún. Selecciona para ello el pri-mero de los grupospresiona el botón derecho del ratón y elige la entrada

. Luego, en la ventana que aparece,

indica un nombre para este elemento y des-pués marca la opción en el panel desplegable. Repite este mismo paso por cada uno de los elemen-tos del objeto que vayas a animar.

3 El siguiente paso consiste en colocar cada una de las partes en capas di-

ferentes. Con ayuda de la herramienta podrás añadir tantas como necesites, en este caso harán falta dos más .Selecciona una de las partes y pulsa a la vez las teclas y para cortarla de dicha capa. Luego, sitúate en el primer fotograma de una de las que acabas de crear y pulsa y . Repite este paso con otro de los elementos.

4 A continuación, pulsa la herramienta pincha en el elemento que será el

eje central del movimiento, en este caso el cuerpo de la mariposa, y alarga uno de los

50


Nº 287

Una de las utilidades de la función de inter-polación de forma son las máscaras animadas. En Flash las máscaras se utilizan para ocultar y mostrar un objeto de modo que éste sólo queda visible cuando se encuentra cubierto por la máscara. Si, además, la máscara está animada, puedes conseguir que el objeto se muestre de forma progresiva.

1En primer lugar, añade una nueva capa en la escena principal donde insertarás los

nuevos elementos .Debes asigar-le un nombre

. Luego arras-tra el objeto, en este caso una flor de la biblioteca, al área del escenario principal donde quieres que aparezca .

2 Selecciona el objeto con el botón y luego haz click sobre él

para seleccionarlo. A continuación, en la ven-tana , debes indicar un nombre, así como el tipo de com-portamiento que tendrá el nuevo símbolo .

Acto seguido, pulsa dos veces sobre el elemento para acceder a su línea de tiempo.

3 Debes asignar una duración a este movi-miento, si bien como sabes, más adelante

podrás cambiarla. Para ello sitúate en un fotograma dentro de la línea de tiempo como, por ejemplo y pulsa la tecla . Enseguida verás la dura-ción seleccionada .

4 Añade una nueva capa sobre la anterior, ya que es aquí donde vas a insertar la

máscara. Pincha en y se creará al momen-to. Luego selecciónala , pincha con el botón derecho del ratón y marca la entrada denominada . De este modo la capa asumirá el comportamiento de máscara, como podrás verlo indicado en el panel correspon-diente .

Uso de máscarasanimadas

5 5 Es el momento de dibujar la máscara. Selecciona la herramienta para dibu-

jar un rectángulo. Pulsa luego sobre y, en el panel de muestras que aparece, escoge el botón para quitar el contorno del mis-mo, ya que éste te permitirá editar la figura más tarde sin dificultad. Luego pulsa en y elige un color llamativo para que puedas distinguir bien la máscara como, por ejemplo

. No te preocupes, porque después no apa-recerá en el proyecto final.

6 A continuación, sitúate en el primer fo-tograma de la capa superior que conten-

drá la máscara y dibuja un rectángulo fuera del objeto que abarque todo el ancho .

Para controlar el tiempo que du-rará esta animación selecciona un punto dentro de la línea de tiempo y crea un fotograma cla-ve, con ayuda de la tecla , en ambas capas .

7 Luego sitúate, con un click, en este últi-mo fotograma de la capa que contiene la

máscara, ya que debes cubrir con la máscara la figura completamente para que se muestre visible. Selecciona la herramienta de modo que verás unos selectores bordeando el rec-tángulo .Coloca el pun-tero del ratón sobre el margen superior hasta que cambie de forma por una doble flecha. Haz click y arrástralo hacia arri-ba para aumentar su tamaño .

vértices hacia una de las alas para vincular-las .Comprobarás que se crea una nueva capa a la vez que se vacían las que acabas de unir .

Luego repite el mismo proceso para unir el cuer-po al otro ala .

5 Debes eliminar las tres capas anteriores, ya que se habrán

quedado vacías .Para ello, pulsa sobre cada una de ellas con el botón derecho del ratón y selecciona .

6 Ahora puedes centrarte en la nueva capa. Puedes cambiarla de nombre si haces do-

ble click sobre ella ,pero lo importante aquí es que definas el movimiento de cada uno de los elementos, en este caso, las alas. En primer lugar tienes que definir la duración de cada uno de los aleteos. Pincha en un frame de la línea de tiempo y pulsa la tecla para aña-dir un fotograma clave .El intervalo seleccionado quedará resaltado en color verde.

7 A continuación, añade varios fotogramas claves más, según consideres necesarios

para generar el movimiento de tu objeto. En este ejemplo el resultado ha sido .

Después debes cambiar la posición de las alas en cada uno de los fotogramas clave que has creado. Selecciona el pri-mero de ellos e inclina cada una de las alas: y luego la otra .

Después elige otro fotograma clave y repite el mismo proceso, pero inclinán-dolas en senti-do opuesto .Para compro-bar el resulta-do, dirígete al menú y pulsa sobre

.

Curso: Crea animaciones con Flash, 3ª parte Software■

51Nº 287

En el ejemplo anterior has aprendido a utilizar máscaras animadas a partir de una interpolación de forma sencilla, un proceso que podrías hacer de forma similar con una interpolación de movimiento. Sin embargo, la ventaja de las interpolaciones de forma es que puedes modelar la máscara siguien-do el contorno de la figura que pretendes tapar, de modo que puedes conseguir que cada una de las partes de ésta aparezca de forma progresiva.

1Como en el ejemplo anterior coloca el ob-jeto en la escena principal donde quieres

que se muestre .

En el panel de define su nom-bre y el tipo de instancia que debe ser .

Luego haz doble click sobre el objeto pa-ra acceder a su línea de tiempo y después amplia el zoom para que puedas verlo con mucho más detalle .

Máscaras animadas complejas

6

De este modo cubrirá totalmente la figura consiguiendo que se muestre visible .

8 Es el momento de crear la inter-polación de forma, cuyo proceso

es muy parecido a la de movimiento. Sitúate sobre el punto anterior al fo-tograma clave haz click con el botón derecho del ratón y selecciona la entrada . Como verás, aparece representada en la línea de tiempo en color verde .

2 Sitúate en un punto en la línea de tiempo para determinar la du-

ración de la animación y pulsa luego la tecla para crear un fotograma clave .

Luego añade una nueva capa desde el botón , después haz click sobre ella con el botón dere-cho del ratón y seleccio-na la entrada .

3 A continuación mar-ca la herramienta

de dibujo y comien-za a pintar la máscara fuera del objeto en el fotograma 1para ocultarlo en un primer momento. Lue-go elige un fra-me en la línea de tiempo y pul-sa para crear otro fotograma clave .

4 Sitúa el cursor del ratón sobre la máscara hasta que cambie la forma del puntero y

puedas editarla poco a poco .

Cubre un área del tallo y luego de-fine otro fotograma clave .Selecciónalo y continúa trazando el dibujo hasta cubrir otro área. Lue-go repite la misma operación las veces que sean nacesarias hasta cubrir, poco a poco, todas las partes de la flor . Repite de nuevo el proceso hasta que consi-


¿Necesitas utilizar Flash para crear una página web con diferentes secciones y un menú de opciones? En el próxi-mo número te damos las claves para conseguir una total interactividad con los distintos elementos de la película, para que puedas controlar con botones todo tipo de com-portamientos, como la navegación en una página o la reproducción de elementos en movimiento.

Pulsa y para probar el resultado y ver que todo es correcto.

9 Por último, no te olvides de detener la animación en el último fotograma, ya

que si no se generará un bucle y el movimiento se repetirá una y otra vez. Sitúate sobre el último fotograma cla-ve en la línea de tiempo de una de las dos capas pulsa el botón derecho del ratón y seleccio-na la entrada dentro del cuadro de diálogo que aparece. En la ventana de coman-dos, haz doble click en para añadir este comportamiento.

gas cubrir la flor por completo, como puedes ver en la imagen a continuación .

No escatimes en tiempo, ya que cuanto más preciso y detallado sea cada movimiento, me-jor será el resultado que obtendrás

Para comprobar el resulta-do, pulsa para reproducir la película completa, y verás cómo la flor se dibuja poco a poco.

5 Por último, no te olvi-des de añadir un com-

portamiento en el último fotograma para detener la animación. Sitúate sobre és-te, abre la ventana de accio-nes y pulsa dos veces sobre el comando .

A unque aventurarte en un proyecto como la creación de una pági-

na web en Flash te pue-de parecer, a priori, algo demasiado complejo, una vez que tengas claro el


SumarioDefine los elementos 39Crea la estructura de las páginas 40Control de texto con botones 41Transiciones de imágenes 41Crea los botones del menú de navegación 43Programación del menúde navegación 44

38 Nº 288

Guía del curso


método que debes seguir para conseguirlo te darás cuenta de que no es más que una simple rutina, donde el trabajo se sim-plifica bastante más que en una página realizada en lenguaje Html. Esto es porque para la creación de los distintos elementos que se repiten en la estruc-tura de una página: boto-nes de menú, títulos, sec-ciones con texto y fotos,

etc., basta con duplicarlos y añadir los elementos di-ferenciadores, lo que agi-liza y simplifica el trabajo. Por otro lado, el problema de la navegación, es decir, la creación de botones con los que puedas controlar tu proyecto y acceder a

los diferentes apartados, se resuelve de un modo bastante sencillo, especial-mente con la última ver-sión del programa Adobe Flash CS4. No tengas mie-do antes de ponerte ma-nos a la obra, ya que pue-des crear una página web

navegable sin tener ni un solo conocimiento sobre el lenguaje de programación ActionScript que utiliza

este programa. Eviden-temente, si los tienes, el control que podrás ejer-cer (en todos los aspectos) sobre tu película será infi-nitamente mayor, ya que podrás añadir campos de texto dimámicos y perso-nalizar aún más tu web, pero, repetimos, no es im-prescindible.

Construye tu propia web

Si has seguido las entre-gas anteriores del curso, seguro que tienes claro cómo crear y animar cual-quier elemento en Flash, así como el comporta-miento que siguen los tres tipos de símbolos en Flash: gráficos, clips de película y botones.

Con ello no te resultará difícil embarcarte en un proyecto más complejo, en el que vas a poner a prueba todos estos co-

nocimientos y combinar-los del modo que más se ajuste a tu página web. En este artículo te mos-tramos, paso a paso, el proceso que debes seguir para diseñar una web desde cero, crear cada uno de los apartados que la componen y programar un menú de navegación a través de botones.

En la última entrega del curso te mostraremos có-mo optimizarlo para pu-blicarlo en Internet.

¿Estás preparado para diseñar una página web en Flash? Las posibilidades que te ofrece este programa para añadir gráficos y animaciones son mucho mayores que las de una web en Html.

La programación necesaria es fácil

Mundo interactivo

Dentro de las bibliotecas comunes de Adobe Flash CS4 encon-trarás una amplia galería con botones y menús predefinidos.

Flash CS4 agiliza los menús de navegación

▲

39

Software

Nº 288

En cualquier proyecto de Flash, la primera tarea consiste en configurar el tamaño de la película y diseñar el fondo sobre el que colo-carás el resto de los elementos. Aunque ya te hemos mostrado algunos ejemplos en anterio-res entregas del curso, te ofrecemos algunos consejos para el diseño de una página web.

1Para crear el archivo dirígete al menú , pulsa en , selecciona la

entrada en la ventana que aparece y pulsa . Se abrirá el nue-vo documento con una pestaña en la parte superior de la escena que indica su nombre

. Es recomendable que le asignes uno nuevo y lo guardes: pincha en ,

, indica el nombre que quieras darle y pulsa en .

2 También es muy importante el tamaño del archivo, tanto si vas a crear un sitio

web completo en Flash como si se trata de un pequeño banner que añadirás en una página de tu sitio. El tamaño debe ser exacto, ya que en caso contrario, los elementos aparecerán deformados. Pulsa en el menú y en

. En la ventana que aparece des-pués indica el ancho y alto que le vas a dar

y luego pincha en .

3 Después dirígete a la escena principal y haz doble click sobre la primera capa

para cambiarle el nombre, en este caso, se llamará . El fondo del proyec-to lo puedes construir de muy diversas for-mas, como un gráfico, una foto o un fondo de color. En este caso, vas a crear un fondo basa-do en formas sencillas que será la única parte, además, que no estará animada en la película. Pulsa en y en el panel suprime el trazo del rectángulo seleccionando la opción y pulsa sobre la herramienta y selecciona un color de relleno, como para el fondo de tu sitio web.

4 Si quieres que los bordes de un rectángu-lo sean redondeados dirígete al apartado

e indica un valor, por ejemplo, de para señalar el grado de curvatura. De forma automática, se aplicará al resto de vértices de la figura . Luego comienza a dibujar el rectán-

Preparación y diseño del sitio

Define los elementos principales

1

Antes de comenzar a diseñar tu sitio web, te recomendamos que pienses la estructura de navegación que tendrá en función de los apartados que pretendes añadir. No está de más que, incluso, pintes un pequeño

boceto que te pueda servir como guía. Cuando lo tengas claro será el momento de ponerte manos a la obra.

gulo sobre el escenario con ayuda del ratón . Hazlo tan grande como con-sideres necesario hasta que abarque toda el área de su superficie al completo .

5 Para separar el encabeza-do superior del área donde

insertarás los menús y los con-tenidos de cada página, en este ejemplo vas a utilizar una simple línea. Pincha en la herramienta selecciona como color después añade un grosor de trazo de y, para asegu-rarte de que los extremos sean rectos, diríge-te al panel y selecciona . Lue-go dirígete a la escena principal y comienza a tra-zar una línea recta . Obtendrás un resultado pare-cido a este . Pulsa luego sobre selecciona las dos áreas azules y la línea y pulsa a la vez las teclas y . De es-te modo, agruparás estas tres partes y podrás moverlas como si se tratara de un único bloque.

6 También puedes añadir los distintos elementos, como fotografías y gráficos,

que vas a utilizar en tu proyecto, si bien podrás hacerlo en cualquier momen-to más tarde. Ve al menú , pin-cha en y en

.Después te aparece-rá una ventana de exploración desde donde debes selec-cionar los diferentes ficheros. Una vez que termines, com-probarás cómo éstos se han añadido a la biblioteca .

7 El diseño del encabezado puedes ha-cerlo según prefieras, en este caso,

un sencillo collage de fotos, con un título y un gráfico decorativo. A cada foto le he-mos añadido un marco de color blanco pa-ra resaltarlas, por lo que las hemos con-vertido primero en gráficos. Para crear un símbolo desde cero pulsa en el menú ,

y, en la ventana que aparece, asígnale un nombre así como su comportamiento, en este caso

y pulsa . De forma automática, accederás a su línea de tiempo

.

8 Arrastra la imagen que quieras utilizar de la biblioteca al escenario. Pulsa en

para añadir una nueva capa, donde vas a in-sertar el borde de color blanco. Una vez que se cree selecciona el fotograma 1 de la misma y pulsa en la herramienta . Selecciona el color del trazo y elimina el de relleno marcan-do para ello la casilla Luego traza un rectángulo sobre el contorno de la imagen para enmar-carla .Cuando ter-mines, vuelve a la escena principal con un click en

,se lecciona el s ím-bolo que acabas de crear en la biblioteca

y arrás-tralo al lugar donde quieres que se muestre sobre el escenario .

9 A continuación, debes hacer lo mismo con cada una de las fotos con las que

pretendas componer el collage. Puedes re-petir este mismo proceso, o bien usar la vía rápida en Flash, que consiste simplemente en duplicar los objetos. Para ello, haz click con el botón derecho del ratón sobre el símbolo situado en la biblioteca y se-lecciona . En la ventana que aparece, asígnale otro nombre y se creará un elemento idénti-co al primero.

10 Después haz doble click sobre él para acceder a su línea

de tiempo. Luego se-lecciona con un click la imagen situada so-bre la escena y dirígete al panel

s i t u ado en el margen izquier-do. Pulsa en el botón

y aparecerá

Curso: Crea animaciones con Flash, 4ª parte


40 Nº 288

una ventana en la que debes seleccionar la imagen que vas a utilizar en este caso .

Pincha en y comprobarás que la imagen anterior ha sido sustituida .En este caso, es posible que ten-gas que rehacer el marco de nuevo de ocurrir que el tamaño de las imágenes no co-incida.

11Repite esta operación con el resto de fo-tografías y arrástralas después a la esce-

na principal. Puedes girarlas y colocarlas unas

sobre otras como te he-mos mostrado en las entre-gas anteriores del curso has-ta conseguir el efecto que deseas .

12 Para completar el encabezado en este ejemplo hemos utilizado un elemento

gráfico (encontrarás muchos recursos gratui-tos de este tipo en Internet). Simplemente, arrástralo hasta la escena

colócalo bajo las fotografías del paso anterior con un click sobre el botón derecho del ratón y luego selecciona las opciones y

. Puedes hacerlo más transparen-

te para que quede más atenuado desde el panel . Pulsa sobre el desplegable

, selecciona y reduce el nivel de opa-cidad hasta que alcance el resultado que te guste .

Puedes añadir tantos elementos como consi-deres necesarios, si bien, no debe faltar un titular, como el nombre que quieres dar a la página o, incluso, un logotipo. Para el primer caso, utiliza la tecla y escribe el texto en el lugar necesario para obtener el resultado que esperas .

Antes de poder interactuar con los objetos es necesario que añadas los contenidos que ofrecerás en tu sitio web. Ten presente que en Flash no vas a utilizar páginas independientes por cada sección, como ocurre con el lenguaje Html, sino que todos los apartados se encon-trarán dentro de un mismo fichero, cada uno en el interior de un clip de película cuya apa-rición controlarás por medio de botones.

1Crea una capa independiente para aña-dir en ella el cuerpo central de la página,

esto es, donde aparecerán los distintos con-tenidos y el menú de navegación. Pulsa en

e indica el nombre de la nueva capa, por ejemplo .Puedes diferenciar esta área con un co-lor independiente, en este ejemplo, se-rá un rectángulo en color blancosi bien esta parte de-pende de tus gustos y de las necesidades de tu sitio web.

2 Luego puedes insertar un título para dife-renciar cada sección. Pincha en

y escribe el texto sobre el área donde calcules que irá . Si quieres darle un toque de diseño, seleccio-na un par de palabras que quieras destacar como, por ejemplo y en el panel asígnale un color diferente al del resto del texto desde el botón . Conseguirás un resultado parecido a este:

. Luego muévelo a la ubi-

Crea la estructura de las páginas

2 cación exacta donde quieres que aparez-ca en la escena .

3 Bajo el título también pue-

des añadir imáge-nes y texto. En el primer caso sólo debes arrastrar las fotos de la bi-blioteca al escena-rio y, si prefieres, añadir un marco o contorno como te hemos mostrado en el apartado anterior .

4 Insertar el texto tampoco te resultará complicado. Puedes escribirlo a mano o

bien copiarlo y pegarlo desde otro documento previo. Selecciona la herramienta pincha sobre el área de la escena donde quieras que comience el texto y, sin soltar el ratón arrastra el puntero hacia la derecha hasta que el campo de texto abarque el ancho que quieres que tenga el párrafo .

Finalmente, copia o escribe el texto en el in-terior del campo .

No te preocupes por definir la altura del mis-mo, ya que ésta se ajusta de forma automática en función de la extensión del texto que in-troduzcas, como podrás comprobar .

5 Ahora vas a convertir el contenido de la nueva sección en un clip de película, ya

que va a contar con distintos elementos ani-mados y, además, será necesario para contro-larlas desde el menú de navegación principal. Para ello, selecciona el cuerpo central del sitio donde has añadido el texto y las imágenes. Comprobarás la utilidad de haberlo hecho en una única capa, ya que será suficiente con que pulses sobre el primer fotograma de la capa que nombraste como . Luego presiona con el botón derecho del ratón sobre el escenario y pulsa en .En la ventana que aparece indica un nom-bre para este nuevo símbolo

y señala tam-bién el com-por tamiento

.Luego haz do-ble click sobre él para acce-der a su línea de tiempo .De este modo podrás animar cada uno de sus elementos.

▲

41

Software

Nº 288


Como el tamaño de tu película está definido desde el comienzo, al añadir una extensión de texto larga, éste se desbordará de la escena sin darte la oportunidad de usar el scroll del navegador como ocurre en una página en Ht-ml. Por ello, es muy importante que aprendas a controlarlo desde el principio mediante bo-tones de avance y retroceso o con la creación de barras de scroll.

1Como vas a animar cada uno de los ele-mentos de forma independiente, te reco-

mendamos que los sitúes en capas diferentes. Pulsa en el botón las veces necesarias has-ta obtener la cantidad que necesitas . Ta m b i é n e s muy importan-te que asignes un nombre a cada una, para distinguir con claridad más tarde dónde se encuentra cada objeto. Luego, corta y pega cada uno de los elementos exis-tentes en la ca-pa inicial en la que les corres-ponda .

2 Ahora queda la parte más importante, con la que conseguirás mostrar sólo una par-

te del texto en la página y desplazarte hacia arriba o hacia abajo con la ayuda de botones. Ya sabes que, cada vez que quieras animar un elemento debes convertirlo antes en un clip de película. Lo mismo debes hacer con el tex-to. Selecciónalo con un click en el fotograma 1 de la capa correspondiente . Luego pincha con el botón derecho sobre la pantalla, pulsa en e indica un nom-bre y el comporta-miento que tendrá en la ventana .

3 ¿Recuerdas las máscaras que te enseñamos a usar en la entrega anterior del curso?

Ahora debes rescatar aquellos conocimientos, ya que así podrás controlar la apari-ción del texto pro-gresivamente. Como la longitud de texto es muy grande, se desborda incluso del propio proyecto .

Interactividad y navegación web

Control de texto con botones

1

Aún te queda la parte más importante de tu web: dotarla de interactividad. Para controlar la acción de cada uno de los elementos es necesario crear botones en los que definirás cómo debe comportarse cada objeto. Así podrás desplazarte en la línea de tiempo o navegar entre cada una de las secciones, entre otras posibilidades.

Para evitarlo, debes crear una máscara para que se muestre sólo una pequeña parte visible en la escena principal.

4 Pincha en para añadir una nueva capa, luego selecciónala con el botón derecho

del ratón y pulsa selecciona la en-trada para asignarle esta propiedad. Asegúrate de que la nueva capa no se encuentre bloqueada y luego selecciona la herramienta de dibujo para es-pecificar después el área donde quie-res que el texto se muestre visible .

5 Ya has definido el primer punto

en el que aparece-rá el comienzo del texto. Te quedan por definir dos más, uno intermedio y otro que muestre la última parte. Para ello, basta con que crees dos fotogramas clave en los que coloques el texto en lugares diferentes bajo la más-cara. Sitúate sobre el frame 20 dentro de la capa que contiene el texto y pulsa la tecla para crear un foto-grama clave.

6 Ahora, selecciona el texto con un click de ratón y, sin soltarlo, muévelo hasta una

posición más o menos intermedia .Luego sitúate en el último fotograma de esta misma capa y vuelve a pulsar . Del mismo modo que antes, arrastra el tex-to hasta que el final del mismo quede cubierto bajo la máscara. Dirígete al último fotograma

y pulsa para crear otro fotograma clave. Luego sitúate sobre él y desliza el texto hacia arriba hasta que la última frase quede comple-tamente cubierta por la máscara .

7 Por último debes crear las interpolaciones de forma en el texto, de modo que se

desplace hacia abajo cuando pulses sobre el botón de avanzar, que crearás después. De momento, sitúate en la posición anterior a cada uno de los fotogramas clave haz click con el botón derecho del ratón y selecciona . Aparecerá re-presentado así en la línea de tiempo .

8 Existe un pe-queño p ro -

blema que tienes que salvar aún. Tal y como está ahora indicado, la animación comen-zaría en el punto 1 y continuaría sin detenerse hasta el fotograma 40, des-de donde volvería de nuevo al prime-ro para repetir el proceso indefini-damente. Pero no

Transiciones de imágenes

Es muy posible que tengas que animar imágenes. En este caso, puedes hacer transiciones entre unas y otras jugan-do con el canal Alpha, que hace la imagen más o menos transparente, y la línea de tiempo, donde definirás el mo-mento en el que aparerá y se desvanecerá cada una.

1 Sitúate en el clip de película donde vas a crear la tran-sición y se encuentra la imagen. Según sea la duración

que quieras darle, sitúate sobre el fotograma correspon-diente y pulsa para crear un fotograma clave . Luego haz click sobre el fotograma y en el panel pincha sobre

y selecciona la entrada .

Asígnale un valor como , de modo que la imagen quede más transparente. Luego colócate sobre el fotograma: haz click con el botón derecho del ratón y selec-ciona después la opción .

2 A continuación, añade nuevas capas donde colo-carás el resto de las imágenes y crearás el mismo

efecto. Para que funcione la transición debes situar el comienzo de cada una un poquito antes de que termine de mostrarse la anterior .


42 Nº 288

es esto lo que quieres ya que en este caso vas a controlar la animación por medio de botones, para lo que será necesario que la película se encuen-tre detenida en un primer momento. Por tanto, sitúate ahora con un click en el primer fotograma , haz click con el botón derecho del ratón y selecciona la entrada . En la venta-na que se abre, indica la versión del código y haz doble click en la función

hasta que lo veas indicado en el campo de la derecha . Repite este mismo paso en los otros dos fotogramas clave y lo verás así indicado en la línea de tiempo .

9 Es el momento de crear los botones de navegación. Te recomendamos que lo ha-

gas en una capa independiente fuera de la máscara. Sitúate sobre ésta y pulsa sobre de modo que se añadirá una nueva sobre ella . A continuación, selecciona el fotogra-ma donde terminan las otras dos capas de la animación y pulsa la tecla para que su duración sea exactamente igual.

10 Para el diseño de los botones puedes utilizar iconos que hayas creado a ma-

no alzada, descargado de Internet, etc. En este ejemplo, te enseñamos a crear uno de avance y otro de retroceso de forma muy simple, con una tipografía especial basada en símbo-los. Selecciona la herramienta y teclea el número en una parte de la escena, más o me-nos donde quieras situar el botón.

11A continuación, debes seleccio-narlo con el ratón

pulsar sobre el panel desplegable situado en la

barra de herramientas de propiedades y ses-coger la fuente denominada . De este modo obtendrás una forma que te puede servir para representar el botón de des-plazamiento hacia abajo .

12 Para crear el de desplazamiento hacia arriba, simplemente puedes duplicarlo

y girarlo 180º. Selecciona el botón que acabas de crear, pulsa a la vez las teclas y se añadirá otro símbolo idéntico al que has creado en la escena . Luego haz click sobre él con el botón derecho del ratón y elige la entrada . Sitúa el cursor en uno de los vértices de la figura que se habrá formado hasta que cambie por la forma

haz click y gíralo hasta que alcan-ce la posición que deseas . Por último, selecciona los dos símbolos y pulsa las teclas y a la vez dos veces consecutivas para transformarlos en gráficos vectoriales en lugar de texto. Esta acción es muy importante para reducir el tamaño.

13 El siguiente paso consiste en convertir cada símbolo en un botón. Haz click

con el botón derecho del ratón en el primero de ellos y selecciona la opción . Lue-go asígnale un nombre en la ventana que apa-rece , pulsa en

y marca la opción denominada .

14 Comprobarás que se ha añadido a la biblioteca de archivos con un nuevo

icono . Haz doble click sobre él para acceder a su línea de tiempo, que verás que es diferente cuando se trata de un botón . So l amente tiene cuatro fotogramas que se corresponden a los estados del botón: cuando está inactivo, cuando sitúas el cursor sobre él, cuando lo presionas y, por último, el área sensible, es decir un área que señalarás para que al desplazar el cursor sobre ella se active el botón.

15 Ahora se trata de cambiar el diseño del botón en cada uno de estos esta-

dos. Sitúate sobre el primero de ellos y pulsa la tecla para crear un fotograma clave. Aquí no debes cambiarlo, ya que es el modo en el que deseas que se muestre cuando es-té parado. Haz lo mismo con el segundo estado . Sitúate sobre el tercero y pul-sa si quieres que el botón se muestre del mismo modo cuando coloques el cur-sor encima o hagas click sobre él. Por último, pincha en y añade otro fotograma clave. El resultado que ob-tendrás será este: .

16 Ya sólo te queda definir los es-tados del botón. Pulsa en

y marca sobre el escenario el símbolo que lo representa . Luego selecciona la herramienta y elige un color diferente que des-taque sobre el anterior .A continuación dirígete al último de los fotogramas de esta linea de tiempo y selecciona de nuevo el botón en la escena correspondiente . Si dejases esta área como zona sen-sible, al tratarse de un botón bastan-te pequeño, tendrías que tener una mayor precisión al deslizar el ratón sobre él para activarlo. Por ello es mejor que dibujes un área sensible mayor. Hazlo fácilmente con la herramienta y dibujando un rectángulo que cubra completa-mente su superficie .

17 Repite el mismo proceso con el otro botón situado en el escenario. Luego,

añade una nueva capa a la que pue-des llamar y donde debes colocar ambos (simplemente, copia y pégalos). Añade después el mismo número de fotogramas clave en la misma posición que has creado en la capa que contiene el texto .

18 El último paso que debes dar consiste en asignar un comportamiento a

cada botón que, en este caso, consiste en indicar el punto donde debe dirigirse. Sitúate sobre el fotograma . En esta ubicación sólo debe aparecer el botón de avance ya que el texto se encuentra en su posición ini-cial y únicamente puedes deslizarlo hacia abajo. Haz click sobre él para seleccionarlo y luego ve al menú y pulsa sobre .

19 Es posible que aparezca entonces un mensaje como este

que te indique que debes cambiar de versión de código ActionScript. Acepta y, en la venta-na que aparece, pulsa en la pestaña , se-lecciona en el cuadro desplegable la versión

y pulsa en .

20 Ya luego en la ventana

presiona sobre el icono , luego en

y des-pués en para reproducir la película a partir de un punto.

¿Te gustaría que el texto se desplazara a lo largo de una barra de scroll en lugar de con estos botones? El modo de programarlo es el mismo que te hemos mostrado en el ejemplo, pero debes crear una nueva capa que con-tenga la barra de scroll .

Para su diseño es suficiente con dibujar un área rectangular y co-locar los botones de avance y re-troceso, respec-tivamente, abajo y arriba .

Consejo

por lo que debes repetir el proceso e indicar en éste que la película vaya al fotograma de modo que vuelva al comienzo del tex-to y se detenga en ese punto.

22 Para finalizar, dirígete al último de los fotogramas clave con

un click sobre él . Aquí sólo tendrás que activar el bo-tón de volver hacia atrás por lo que selecciona y eli-mina el de avance del texto. Repite aquí tam-bién el paso 21, pero indica que se dirija al fotograma .

▲

43

Software

Nº 288


En el cuadro de diálogo que aparece señala dicho fotograma, en este caso para iniciar desde aquí la reproducción que se detendrá cuando llegue al fotograma clave 20, que tiene una acción de stop.

21A continuación sitúate con un click en el fotograma

y repite el mismo proceso que en el paso anterior, pero indicando aquí que la película se debe reproducir a partir del fotograma . En este punto sí que tiene que apare-cer el botón de retroceso

En el ejemplo anterior te hemos mostrado cómo crear un botón y asignarle un comporta-miento. Del mismo modo te explicamos ahora el método para añadir el menú de navegación de tu película. La diferencia radica aquí en la acción que se llevará a cabo cuando presiones sobre cada botón, ya que mostrarán un con-tenido u otro. Los comportamientos de botón no acaban aquí. Entre otros, puedes añadir un enlace o descarga de un archivo.

1En primer lugar debes situarte sobre el es-cenario principal, ya que es aquí donde vas

a crear el menú de navegación principal de tu sitio web. Crea una nueva capa con ayuda del botón y llámala, por ejemplo .Después utiliza la herramienta de dibujo de formas y traza un área redondeada de color blanco .Asígnale el tamaño que creas conveniente, pero no te olvides de que será uno de los botones. Luego escribe el enunciado del menú con ayuda de la herra-mienta de texto .

2 A continuación, debes convertir este ob-jeto que acabas de crear en botón. Para

ello selecciona a la vez el área blanca junto con el texto haz click con el botón derecho del ratón y elige

. En la ventana que se mues-tra después, asíg-nale un nombre y el comportamiento de botón . Pulsa en .

3 Después de hacerlo comprobarás que es-tos dos elementos

se encuentran agrupa-dos en el escenario . Haz doble click sobre él para acceder a su línea de tiempo, ya que tienes que configurar los diferentes estados .

Crea los botones del menú de navegación

2 Sitúate en el segundo frame y pulsa la tecla para añadir aquí un fotograma clave, ya quieres que el aspecto del botón cambie cuando el ratón se sitúe sobre él . Luego colócate sobre y pulsa la tecla , puesto que cuando presiones el botón, el estado será el mismo que cuando te sitúas sobre él. Por último, crea otro fotograma en ya que aquí indicarás el área que ac-tivará el botón cuando deslices el cursor del ratón sobre ella.

4 A continuación debes diseñar los estados del botón. En pri-

mer lugar pincha en para definirlo cuando sitúes el cursor encima o hagas click en él. Escoge primero el rectángulo de color blanco, luego pincha en la herramienta de relleno y elige un color que le haga destacar sobre el fondo, por ejemplo . Luego, selecciona el fotograma y traza un área rectangular sobre la superficie del botón para que éste se active cuando deslices el cursor por ella .

5 La mejor manera de conseguir que todos los elementos del menú sean iguales, y

que el texto se encuentre alineado en la mis-ma posición, consiste en duplicarlos. Para ello vuelve a la escena principal con un click so-bre . Después selecciona el botón que acabas de crear y pulsa a la vez las teclas y , de modo que se duplicará al instante . Selecciónalo y arrástralo hacia la posición que de-seas. En este caso, para crear un menú horizontal, hacia la derecha. Comprobarás que aparecen unas guías vertica-les y horizontales que te servirán de referen-cia para mantenerlo alineado respecto al primero . Repite esta misma operación tantas veces como elementos de menú sean necesarios en tu proyecto y obtendrás el siguiente resultado: .

6 Selecciona el botón en la biblioteca de archivos , haz click con el bo-

tón derecho del ratón y pulsa en . Asig-na al nuevo botón, co-mo por ejemplo y pulsa en . Repite esta misma operación por cada uno de los botones de los que se componga el menú de navega-ción que vayas a crear .

7 Vuelve a la escena principal donde tienes duplicado el mismo símbolo cinco veces.

Ahora se trata de sustituir cada uno de estos botones por los nuevos que has creado des-de la biblioteca de archivos. Selecciona con un click el segundo de ellosdirígete luego al panel situado en el menú izquierdo y pulsa en el botón

.

8 Justo después, ve-rás una ventana

desde donde puedes seleccionar el símbolo por el que quieres sus-tituir al botón. Seleccio-na el que has llamado y pulsa . Aunque de momento el texto del menú es igual, ya no se trata del mismo símbolo, por lo que puedes modificarlo sin al-terar el resto. Haz doble click sobre él para acceder a su línea de tiempo y modifica el título en el primer fotograma, cuando el bo-tón se encuentra en esta-do de reposo . Luego haz click en el fotograma y cambia aquí también el título .

9 Repite este mismo proceso en los tres

botones restantes hasta que obtengas un menú con todos los aparta-dos que necesitas para tu web .

Pulsa la tecla para comprobar el resultado, y cuando deslices el ratón sobre cada uno de ellos cambiará su aspecto .


44 Nº 288

Ya has llegado a la última parte del proyec-to. En ella tienes que conseguir que cada vez que pulses sobre uno de los botones del menú de navegación, aparezca en la pantalla un con-tenido diferente. Para ello tendrás que definir distintos clips de película y programarlos de modo que se muestren u oculten cuando pre-siones uno u otro botón del menú.

1En este proceso el primer paso que debes dar consiste en crear una película con los

elementos que necesites por cada uno de los botones del menú. Si quieres que se man-tenga la misma estructura en todas ellas lo tendrás muy fácil, ya que sólo tendrás que duplicar la película que creaste al comienzo de este artí-culo y sus-tituir unos e lementos por otros. Selecciona con el bo-t ón de r e -cho el clip de película que incluye e l c o n t e -nido de la primera de las catego-rías en la biblioteca de archivos y pulsa en la entrada .

2 A continua-ción asígnale

un nombre . Recuerda que si tienen una nu-meración correlativa te será más fácil localizarlos y tra-bajar con ellos más tarde. Pulsa en y repite este mismo proceso tantas veces como categorías hayas definido en el menú de na-vegación principal .

3 Tras hacerlo, debes editarlos uno a uno y añadir los nuevos elementos que quieres

que aparezcan en ellos. Haz doble click sobre el símbolo situado en la biblioteca para acceder a su línea de tiempo. Para perso-nalizar cada una de estas películas tienes que cambiar tres elementos: el título, la fotografía y el texto. En el primer caso, selecciona el primer foto-grama de la capa deno-minada . Selecciona el título ante-rior y escri-be el texto, pa r a e s t e caso .

Programación del menú de navegación

3 4 En el caso de la fotografía, pulsa en el primer fotograma de la capa denomina-

da donde se encuentra. Luego dirígete al panel y presio-na el botón . En la ventana que aparece justo a continua-ción, elige el gráfico que contiene la nueva imagen .Recuerda que para que esto sea posible has tenido que im-portar antes la fotografía a la biblioteca y convertirla en un gráfico. Obten-drás un resultado con la misma estructura que el anterior pero distinto contenido .

5 Por último, sitúate en la capa para cam-

biar el texto. Aquí el proceso será algo distinto, porque el texto que quieres cambiar se encuentra dentro de un clip de película. Cuando esto ocurre tienes que duplicar en la biblioteca este ele-mento las veces que sean necesarias, editar el texto en cada uno de ellos y luego sustituirlo en la película principal.

6 Haz click sobre el nombre del clip de la película con el botón derecho del ratón el

la biblioteca de archivos y pulsa en . Después

asígnale un nom-bre, como y pulsa en .Repite esta opera-ción todas las veces que sean necesarias para modificar cada uno de los clips de película. Obtendrás un resultado como este en la biblioteca: .

7 A continuación, posicióna-te otra vez

sobre la capa y, en el panel de propiedades, pulsa sobre

para acceder de este modo a la ventana . Como has hecho ya en ejem-plos anteriores, selecciona el clip de película que vas a uti-lizar, en este caso y pincha en . Como recordarás, este elemento estaba formado por un texto con una máscara que controlabas por

medio de unos botones para avanzar o retro-ceder sobre el texto .

Solamente tendrás que reemplazar el texto antiguo por el nuevo.

8 Es importante que las barras de regla ho-rizontal y vertical se muestren visibles pa-

ra alinear los elementos con mayor precisión. Pulsa para ello en el menú y luego en

, para de es-te modo mostrarlas en la ventana de Flash. Sitúa el cursor sobre la regla vertical hasta que el puntero cambie por la forma . Haz click entonces y sitúa la guía de color verde que apa-rece sobre el marco izquierdo del texto .También crea otra y llévala al extremo derecho para delimi-tar el ancho de la caja. Haz lo mismo con la regla horizontal y sitúala sobre el mar-co superior .Con estas dos guías ya puedes borrar el texto antiguo.

9 A continuación, pincha sobre el primer fotograma de esta capa y arrastra la se-

lección hasta el último de ellos .

Luego haz click con el botón derecho del ra-tón y selecciona y los fotogra-mas quedarán vacíos en la línea de tiempo .

Ahora, simplemente, crea un fotograma clave en la primera po-sición y con ayuda de la tecla escribe o copia el nuevo texto. Luego, selecciónalo y colócalo en la posición exacta de la escena con ayuda de las guías que has añadido en los pasos anteriores .Esta tarea te resultará más fácil si ocultas la capa que contiene la másca-ra con un click en .

10 Sitúate en el fotograma y pulsa la tecla para crear

un fotograma clave y desliza el texto hacia arriba hasta que alcance una posición intermedia. Luego haz otro fo-

Cuando termines de indicar el fotograma de cada clip de película que debe aparecer en la escena principal obtendrás el resultado .

18 Después repite este mismo proceso con el resto de los botones, pero mo-

dificando la selección del fotograma según la instancia cuyo contenido quieres que se muestre visible al presionar cada botón. Por ejemplo, en el segundo de ellos tendrás que indicar que en se muestre el foto-grama y el resto se oculte.

19 Por último, es posible que necesites añadir un enlace para acceder a un si-

tio de Internet o para descargar un archivo. Para el primer caso, debes seleccionar primero el botón y desde la ventana pulsar en y escoger las entradas y

. A continuación añade la direc-ción web completa .También puedes indicar si quieres que se abra en esa misma página del navegador se-leccionando la entrada , o bien que lo haga en otra diferente si eliges

.

20 Para añadir un enlace de descarga de-bes subir primero el fichero al servi-

dor donde vayas a alojar el archivo, o incluirlo dentro de un directorio si el proyecto lo vas a guardar dentro de un CD o DVD. Debes seguir el mismo proceso que en el paso 19 pero indicando ahora la ruta exacta donde se encuentra ubicado junto con el nombre

.

como, por ejemplo . Es muy importan-te que lo hagas, ya que de otro modo no con-seguirás este resultado.

14 Luego selecciona el clip de película en la biblioteca y

arrástralo al escenario hasta que quede situado justo encima del anteriorPuedes utilizar las flechas de dirección , , y hasta ubicarlo en la posi-ción exacta. Asígnale también un nombre de instancia . Repite este proceso con cada una de las películas principales.

15 Dirígete finalmente a la capa donde se encuentran los botones del menú de

navegación, sobre la escena principal .

Selecciona el primero de los botones dirígete al menú y pulsa en para abrir la venta-na de comportamientos .

16 Aquí es donde vas a indicar qué fo-tograma de cada una de las películas

sobre el escenario se mostrará cuando pul-ses el botón y cuáles se ocultarán. Pincha en el botón , selecciona y luego

. En la ventana que aparece, selecciona el nombre de instancia de la primera película cuyo contenido se correspon-de con la categoría del primer botón e indica que quieres que se muestre de esta película el segundo fotograma .

Pulsa en y, a conti-nuación, pincha sobre el me-nú y selecciona la entrada para definir el comporta-miento del ratón.

17 Pincha de nuevo so-bre , ya que aho-

ra tienes que indicar que se muestre el fotograma 1 (vacío) del resto de las instancias. Selecciónalas en la ventana que aparece, e indica el valor . Modifica el comportamiento del ratón como en el paso 16 y obtendrás un resultado como este:

■

45

Software

Nº 288


tograma clave al final, pero deslizando el texto completamente arriba. Repite este proceso por cada una de las películas de texto que existen en tu proyecto.

11Vuelve a la película principal con un click sobre .

Después selecciona el segundo foto-grama de cada una de las capas que la componen y pulsa para crear aquí un fotograma clave . A continuación, se-lecciona el fotogra-ma 1 de cada una de las capas y pulsa para eliminar el contenido. De este mo-do, el primer fotograma estará va-cío, mientras que la información se mostrará ahora en el segundo .

12 A continuación, sitúate sobre el primer fotograma de una de

las capas, haz click con el botón dere-cho del ratón y selecciona pa-ra abrir esta ventana. Luego haz doble click sobre y repite esta misma operación en el fotograma 2 . Al hacerlo, la película estará detenida en la primera posición sin ningún tipo de ele-mentos, y en la segunda donde se encuentra el contenido. Enseguida descubrirás por qué es necesario este requisito.

13 Vuelve a la escena principal con un click sobre . Comprobarás

que ya no se encuentra el texto con la imagen, sino que el contenido ha sido sustituido por un círculo vacío en color blanco .

Selecciónalo con un click y asígnale un nombre a la instan-cia en el panel ...y en el próximo número

Ya te acercas al final del curso de Flash. La última entrega está centrada en la publicación del proyecto, una parte esencial para optimizar el tamaño de tu sitio web. Ade-más, te explicamos cómo añadir y controlar la reproduc-ción de archivos de vídeo y audio. ¡No te lo pierdas!

Si has seguido todos estos pasos encontrarás ahora que la página principal se encuentra vacía. ¿Cómo solucio-narlo? Si has comprendido bien los comportamientos que te hemos mostrado, verás que es muy simple. Crea un clip de película diferente en el que muestres la pági-na principal, si bien ahora los elementos se encontrarán dentro del fotograma 1 (para estar visibles por defecto) y el segundo estará vacío. Del mismo modo, en cada uno de los botones del menú de navegación tienes que indicar que se oculte, esto es, se posicione en el foto-grama número 2 cada vez que presiones sobre ellos.

Consejo

más fácil de lo que ima-ginabas. Además, desde la versión anterior de Ado-be Flash puedes incrus-tar, junto a la película, un control de reproducción con las opciones que de-sees de un modo más que fácil, ya que únicamente debes seleccionarlo de una lista. El único requi-sito que debes tener en cuenta es el formato de los vídeos, que debe ser

compatible con Flash, es-to es, Flv o F4v, si bien, no tienes que preocupar-te porque el programa in-cluye una aplicación para convertirlos.

¿Preparado para publicar?

La configuración de la publicación es la última parte del proyecto, si bien, no por ello es imprescin-dible. Todo lo contrario, es muy importante que selecciones el formato en el que se va a exportar (generalmente Swf ), así como que ajustes el grado de compresión de las imá-genes, el vídeo o el archi-vo de sonido.

Si en tu proyecto es de-cisivo el tamaño final del mismo, dispones de una función que genera un in-forme donde te muestra el

peso de cada uno de los elementos incluidos, para que valores y reajustes el tamaño en aquellos que consideres necesario. L as posibilidades mul-

t imedia hacen que añadir un archivo de

vídeo o de música se con-viertan en una necesidad casi imperiosa en tu pro-yecto. Si sigues los pasos que te proponemos en este artículo comprobarás que añadirlos es mucho


54 Nº 289

Guía del curso


SumarioUso del vídeo en Adobe CS4 55Gestión y control del sonido 57Optimización del proyecto 60¿Cuánto ocupa cadaelemento? 61

Si has llegado a esta última parte del curso, ¡enhorabuena! Seguro que ya eres casi un experto en Flash. Sin embargo, aún puedes mejorar tus presentaciones si incluyes un archivo de vídeo o una pieza musical. Aquí tienes las claves para concluir tu proyecto.

La última pieza

Incluido en el programa, Adobe Media Encoder permite conver-tir los ficheros de vídeo en formatos compatibles con Flash.

Para poder trabajar con vídeo en Flash necesitarás antes convertir el archivo en un formato compatible con el programa, esto es en Flv o en F4v. Esto no representará ningún problema, ya que puedes hacerlo desde una aplicación denominada Adobe Media Encoder que se encuentra instalada junto con el pro-grama y cuyo manejo es muy sencillo, tal y como puedes comprobar a continuación.

1Como cualquier otro elemento en Flash, tendrás que importarlo a la biblioteca de

archivos antes de poder comenzar a trabajar con el fragmento de vídeo. Para ello, dirígete al menú , luego pulsa en y después selecciona . De este modo te aparecerá un asistente desde donde debes seleccionar el origen del mismo .

2 Como lo más habitual será que guardes ese fichero en algún directorio dentro de

tu equipo, pulsa sobre , y en la ventana de exploración que aparece localiza y selecciónalo con un click . Luego presiona sobre .

3 A no ser que el formato de dicho archi-vo sea uno de los dos específicos del

programa: Flv o F4v, aparecerá una ventana de aviso en la pantalla que te indicará que debes cambiarlo de modo que sea compati-ble con Flash .

Acepta el mensaje y, en la ventana de antes, pincha en el botón pa-ra acceder a la aplicación incluida en Flash Adobe Media Encoder que te permitirá codifi-car el vídeo en el formato que necesitas.

4 Aparecerá entonces la ventana principal de esta aplicación .

Si pinchas sobre el icono aparecerá un menú des-plegable con las distintas configuracio-nes de codi-ficación del vídeo . En este caso, debes selec-cionar . A pesar de los ajustes predefinidos que incluye el programa, si quisieras hacer un ajuste perso-nalizado puedes hacerlo marcando la opción

que encontrarás al fi-nal de dicho menú desplegable. En este caso aparecería la ventana

desde donde podrías indicar los nuevos va-lores. No obstante, a no ser que tengas un dominio bastante alto en este campo, es pre-ferible que optes por una de las configura-ciones predeterminadas.

5 Una vez que has decidido el formato de salida del vídeo, pulsa sobre el botón

para comenzar de este modo el proceso de conversión. Podrás seguirlo desde esta misma ventana .

Durará más o menos tiempo según el tamaño del vídeo y la configuración de salida que hayas escogido. Cuando termine, verás un indicador en la parte su-perior de la pantalla .

Pulsa en cuando termines este proceso para volver de nuevo al proyecto de Flash.

6 Ahora sí, vuelve a pulsar de nuevo en , selecciona el vídeo que acabas

de convertir en la ventana de exploración, en este caso , y pulsa en . Tie-nes diferentes opciones para incluir el vídeo en el proyecto. En esta ocasión, selecciona

pulsa en el botón .

7 Es el momento de escoger los botones de control de la reproducción en la ventana

que aparece a continuación .

Si habías pensado que tenías que programar estas instrucciones de forma manual, puedes respirar con alivio, ya que la única compli-cación aquí consiste en elegir, con ayuda del panel desplegable

el formato que quieres para este menú. Por ejemplo, si se-leccionas obtendrás el siguiente:

8 Por último, también puedes elegir el co-lor de la barra del control de reproduc-

ción. Para ello, pulsa sobre

y haz click so-bre el color que prefieras . En este ejemplo obtendrás un resultado como este: Pulsa una vez más sobre el botón y luego en para com-pletar la importación del vídeo.

9 Por defecto, el vídeo se añadirá al fo-tograma 1 de la escena principal, pero

Inserta un vídeo en tu proyecto

1


Uso del vídeo en Adobe CS4Una de las ventajas a la hora de añadir un archivo de vídeo en Flash es la posibilidad de controlarlo a través

de un menú de reproducción, cuyas opciones puedes seleccionar fácilmente con la ayuda de un listado. Esto te permite reproducir cualquier película sin tener que programarlo de forma manual en ActionScript.

▲

55Nº 289


seguramente no sea esta la ubicación donde lo quieras colocar y, además, debes convertir-lo primero en un clip de película. Por tanto, selecciónalo con un click

y pulsa la tecla para borrarlo de aquí.

10 Luego, dirígete al menú y se-lecciona la entrada . En

la ventana que aparece justo después, asigna un nombre al nuevo símbolo y elige como comportamiento .

Pulsa en y accederás de forma auto-mática a la línea de tiempo de éste .

11Localiza en la biblioteca de archivos el vídeo recién

importado y arrástralo luego al escenario .

Después, sitúate en la escena principal con un click sobre y sitúalo sobre el fo-tograma que deseas que aparezca en la línea de tiempo escogiendo el clip de película en

la biblioteca de archi-vos y arras-trándolo al escenario. Por último, haz click

sobre el vídeo y, en el panel situado a la izquierda de la pantalla principal del programa asigna un nombre a la instancia, por ejemplo

. Para comprobar el resultado pulsa la tecla y se abrirá una ventana del navega-dor desde donde podrás visualizar y controlar la reproducción del vídeo, tal y como puedes ver en la siguiente imagen:

En entregas anteriores has comprobado la utilidad de las máscaras. En esta ocasión te enseñamos a aplicarlas al vídeo para conse-guir resultados y formas muy originales.

1El ejemplo que hemos utilizado contie-ne simplemente texto y un marco, que

hemos obtenido gratuitamente de http://vector4free.com/vectors/id/165, en el que vas a insertar el vídeo con ayuda de la máscara .

En primer lugar, debes importar el vídeo tal y como has hecho en el apartado ante-rior, si bien ahora vas a utilizar un método compatible para la versión ActionScript 2.0. Dirígete al menú , y selec-ciona . En la ventana que aparece a continuación elige ahora la opción

y pulsa en para seleccionar el ar-chivo de vídeo previamente convertido en uno de los formatos compatibles .

2 Haz click en , en la nueva ventana marca la opción del

desplegable y después desacti-

va la casilla ya que ahora vas a agregar de forma manual el vídeo desde la biblioteca. Pulsa en y en y de este mo-do verás en la biblioteca el archivo que acabas de im-portar .

3 Antes de poder añadir el vídeo a la es-cena principal es preferible que lo con-

viertas en un clip de película. Para ello pulsa en el menú y selecciona la entrada

. En la ventana que aparece lue-go asígnale un nombre y el tipo de comporta-miento, como . Presiona en y arrastra el vídeo de la biblioteca a la línea de tiempo del nuevo símbolo.

4 Acepta el mensa j e

que te apare-ce luego en la pantalla de modo que la lí-nea de tiempo se extienda en fun-ción de la duración del vídeo . Por último, para evitar que se repita en un bucle indefi-nido debes insertar un fotograma clave al final e indicar que se detenga en este punto. Sitúate entonces en la última posición de la línea de tiem-po con un click sobre el fotograma correspondiente

y pulsa la tecla . Volverá a aparecer la mis-ma ventana que antes, pero ahora tienes que seleccionar ya que tu intención es que se de-tenga, y del otro modo volver ía a repetirse desde el principio.

5 Haz click con el botón derecho del ratón sobre el fotograma clave

que acabas de crear y selecciona . En la ventana que apa-rece elige la versión de ActionScript y luego haz doble click so-bre la función para añadirla a este fotograma .Cierra por último la ventana de acciones con un click so-bre el botón .

6 Vuelve de nuevo a la escena principal con un click sobre y añade

una nueva capa a la que debes asignar un nombre. Luego sitúate sobre el primer foto-grama y arrastra el clip de película que contiene el vídeo a la es-cena principal. Es posible que sus dimensio-nes sean demasiado grandes y se salgan del marco en el que quie-res ajustarlo. En este caso puedes seleccionarlo con ayuda de la herramienta ajustando el tamaño del vídeo todo lo que sea posible al marco de la ventana .

Añade una máscara al fichero de vídeo

2

56 Nº 289

http://vector4free.com/vectors/id/165



En Flash puedes añadir el sonido a la esce-na principal y, con ello, a todo el documento, o bien hacerlo únicamente en clips de pelícu-la o botones, de modo que éste se active úni-camente junto con el símbolo determinado. En este ejemplo, te mostramos cómo hacerlo en un botón, de modo que sólo se reproduzca cuando pulses sobre él.

1Lo primero que vas a hacer en este pro-ceso es crear los botones desde donde

podrás activar y desactivar el sonido gene-ral de la película. Para ello, dirígete al me-nú y pulsa en . En la ventana que aparece indica un nombre para el botón y asígnale el comportamiento co-rrespondiente . Pulsa en .

2 De forma automática accederás a su lí-nea de

tiempo . Sitúate en e l p r imer fotograma y añade el icono que in-dicará que el audio se está repro-duciendo . Para este ejemplo hemos utilizado unos ico-nos obtenidos de forma gratuita desde http://vector4free.com/vectors/id/129. Luego, puedes añadir una guía vertical y otra horizontal para determinar la ubicación exacta del mismo.

3 Acto seguido crea otro fotogra-ma clave en la posición .

Al hacerlo, también se habrá añadi-

do el icono de la primera posición, aunque en este punto vas a utilizar otro diferente. Por ello selecciónalo con un click sobre y pulsa la tecla para eliminar-lo. Luego pega el nuevo objeto en este mismo lugar y ajústalo a las guías que has creado antes para ubicarlo en la misma posición en la que estaba el primer elemento . Por último, aña-de otro fotogra-ma eny dibuja un rec-tángulo para definir el área sensible del ratón .

4 A pesar de que la línea de tiempo del botón sólo tiene cuatro fo-

togramas, eso no impide que puedas añadir más capas y superponer otros elementos co-mo gráficos, clips de película en los diferen-tes estados de botón y, lo que te mostramos en este caso, añadir un pequeño sonido cada vez que pulses sobre él. Comienza añadiendo una nueva capa desde .Después, crea un fotograma clave sobre la posición ya que es aquí don-de vas a insertar el clip de audio.

5 Dirígete ahora al menú y selec-ciona para

acceder a las distintas bibliotecas de elementos que incluye Flash CS4 por defecto. En este caso pin-cha sobre la entrada para abrir la galería de sonidos .

Utiliza el scroll para localizar uno denomina-do . En la ventana de vista previa situada en el mar-gen superior de esta ventana puedes ver el gráfico de la onda de audio y, si pulsas sobre el icono también lo es-cucharás. Para terminar, crea un fotograma clave sobre la zona sensible y obtendrás la siguiente representación en la línea de tiempo .

6 Una vez que has creado este botón para detener el sonido, debes crear otro para

activarlo. La vía más rápida consiste, tal y como te mostramos en la entrega anterior del curso, en duplicarlo. Sitúate en la biblioteca de archivos y haz click con el botón derecho del ratón sobre el símbolo y, en el cuadro de diálogo que aparece, seleccio-na . Asigna un nombre para el nuevo botón, por ejemplo y pulsa en .

7 Realmente el botón es el mismo, lo úni-co que cambia es que ahora los iconos

de activación y desactivación del audio estarán co-locados a la in-versa. Si los ico-nos que utilizas los has converti-do en símbolos gráficos con an-terioridad, pue-des saltarte este

Reproduce un sonidoal pulsar un botón

1

Gestión y control del sonidoAunque incluir audio en tu proyecto de Flash es también una tarea que podrás realizar sin demasiado esfuerzo,

es muy probable que necesites controlarlo para conseguir que se reproduzca o se detenga en un punto concreto. Te mostramos algunos de los casos más frecuentes como el uso y control en, y a través de botones.

7 Como será difícil que encaje con exacti-tud, más en aquellos casos que quieras

ajustarlo en formas irregulares, la solución pasa por añadir una máscara de capa en la que delimites, a través de una forma que crees, el área visible. Añade una nueva capa con ayuda del botón sobre la que contiene el vídeo. Lue-go, oculta y bloquea a ésta para que sólo se muestre e l marco donde quieres incrustarlo .

8 Selecciona la herramienta sitúate con un click

en el primer fotograma de la capa que conten-drá la máscara

y traza después un rec-tángulo que comprenda el área del marco . Con la herramienta puedes del imitar aún más los márge-nes de la figura para que la coincidencia sea lo más exacta posible .

9 Luego, haz click con el botón derecho del

ratón sobre esta capa y en el cuadro de

diálogo que aparece, se-lecciona . Pincha en el icono para hacer visible

de nuevo el contenido de la capa que con-tiene el vídeo y comprobarás que ahora sí que se ajusta perfectamente al marco de la escena principal .

Por último, sólo tienes que pulsar la tecla para comprobar que el resultado es el que pretendías .

▲

57Nº 289




paso. En ca-so contrario, sitúate sobre el fotograma y selecciona luego el icono con el botón derecho del ratón. Luego pulsa en y asígnale un nombre y un compor-tamiento como gráfico en la ventana que aparece a continuación . Repite el proceso con el otro icono. Luego dirígete al panel y pulsa en .En el icono si-tuado sobre el primer fotograma debes seleccionar .Haz lo contrario para el icono situado en la se-gunda posición.

8 A continuación vuelve a la esce-na principal con un click sobre

y pulsa en el botón

para añadir otra capa en la que vas a del co-lor al botón de forma independiente . Selecciona en la bi-blioteca de archi-vos el primero que creaste y arrástralo a la posi-ción que deseas que aparezca . Si las proporciones no son las adecuadas, ayúdate con la herramienta y ajusta el tamaño del botón hasta conseguirlo . También puedes ubicarlo de forma más precisa con la herramienta de selección . Por último pulsa a la vez las teclas y para compro-bar el resultado y ver que todo funciona correctamente.

Por mucho que te guste un tema o una me-lodía debes tener en cuenta que no tiene por qué ser del gusto de todos los usuarios que vayan a acceder a tu página web o proyecto. Para no “condenarles” a escuchar la misma canción una y otra vez, puedes darles la op-ción de desactivar el sonido. Para ello vas a crear un botón de tal modo que al pulsar sobre él, se detenga. Hazlo de este modo.

1Lo primero que debes hacer, como ha-brás adivinado, será importar el archivo

de audio a tu proyecto. Hazlo como si se tratara de un elemento más. Desde el me-nú , selecciona y después

. En la ventana de explo-ración que aparece busca la ubicación dentro del equipo del fichero que quieres utilizar, selecciónalo y pulsa en . Durante unos segundos verás una barra de progreso y finalmen-te se agre-ga r á a l a bibl ioteca de archivos .

2 Es bastan-te reco -

mendable que insertes el fi-chero de audio en una capa independiente del resto. Aña-de una nueva y sitúate luego sobre el primer fotograma . Después dirí-gete al aparta-do

y pulsa sobre para seleccio-nar el archivo de audio. Aparecerá un panel desplegable con los distintos elementos de sonido que se encuentran agregados a la biblioteca del proyecto. En este caso, selecciona el que vas a utilizar, que se denomina .

3 Una vez que has elegido el archivo se habilitan una serie de opciones que te

permiten editar el fichero. Aunque en este caso se va a mantener el original, dispones de efectos que te pueden resultar interesantes. Así, al hacer click sobre el panelpuedes aplicar una serie de efectos que te permitirán desde anular uno de los canales es-téreo hasta des-vanecer el nivel de audio a partir de un punto. Si presionas sobre el iconose mostrará una ventana de edición

desde donde puedes proceder a editar la en-voltura de la onda

o marcar un punto de inicio o de fin distinto al del fichero original.

4 Una vez que has añadido el audio a la película, debes definir el comportamien-

to en el botón, de modo que cuando hagas click sobre él se detenga el sonido. Para ello haz click sobre éste y desde el menú seleccio-na .

5 Es posible que tengas que cambiar la ver-sión de ActionScript del proyecto si ves

esta ventana .

Acéptala, y en la ventana que se muestra, haz click sobre la pestaña y luego seleccio-na la versión del código . Pulsa en para salir de esta ventana y volver a la de comporta-mientos. Haz lue-go click sobre marca la entrada y luego selecciona

. De este modo se añadirá una acción .

6 Ya has conseguido detener el sonido al hacer click sobre el botón. Pero, ¿cómo

puedes conseguir que aparezca el otro botón para volver a activarlo? El método que te pro-ponemos consiste en duplicar todos los ele-mentos de la escena principal en un segundo fotograma y sustituir el botón. De modo que al pulsar sobre el que se encuentra situado en primer lugar, se accederá al segundo fotogra-

ma, y vicever-sa. En primer lugar, escoge el fotograma 2

Controla el audio con botones

2

Una vez que has añadido el audio a la capa donde se reproducirá, puedes aumentar su altura, de modo que obtengas una representación del gráfico de la onda más grande, que te ayude a sincronizar mejor el sonido con los elementos de la película ya que, por ejemplo, puedes saber dónde empieza o comienza a desvanecerse, o en qué punto se producen las frecuencias más elevadas. Haz click con el botón derecho del ratón sobre la capa que contiene el audio

pulsa en y, en la ventana que aparece, pincha a continua-ción en el apartado y selecciona en el desplegable un porcentaje de zoompara mostrar la capa ampliada .

Consejo

▲

58 Nº 289


Cada vez que guardas el proyecto o pulsas las teclas y para comprobar el resultado se generan, por defecto, dos archivos. Uno con extensión .swf, que es el formato que utiliza Flash para generar sus ficheros, y otro en Html que lo aloja. A pesar de ello, puedes ajustas algunas de estas opciones para redu-cir el tamaño de algunos elementos del pro-yecto, publicar sólo en formato Swf si lo vas a incluir en una web diferente que ya tengas creada con anterioridad o publicarlo también como un Gif, si necesitas obtener una imagen (estática o, incluso, animada).

1Para acceder al menú de configuración de la publicación del proyecto dirígete al me-

nú y pulsa en .Aparecerá una nueva ventana con diversas pestañas. La primera de ellas que aparece se-leccionada es la siguiente:

y en ella puedes escoger el formato de archi-vo en que se publicará el proyecto.

2 Es imprescindible que se encuentren activadas las

casillas ya que de este modo se gene-rará un fichero en Html que contendrá el proyecto de Flash que se guar-dará, a su vez ,en formato Swf. Si seleccio-

nas la casilla se creará un archivo ejecutable, que se podrá visualizar desde cualquier equipo sin necesidad de uti-lizar ningún navegador y sin tener instalado Adobe Flash Player.

3 Estas opciones que marcas habilitan tam-bién su pestaña correspondiente desde

donde puedes selec-cionar varias opciones. Así, si presionas sobre

accederás a un nuevo panel donde, en-tre otras posibilidades, puedes elegir con qué versión de Adobe Flash Player será compatible el proyecto. Para ello pulsa en el panel

y selecciona la versión que deseas en la lista que aparece .

Publicación del proyecto

1

Optimización del proyectoYa te acercas a la última parte del proyecto, que consiste en seleccionar el formato de salida y optimizar el tamaño final del mismo. Se trata de un proceso sencillo que no suele quitarte mucho tiempo pero que, sin embargo, cobrará mucha importancia según el grado de necesidad de reducir el tamaño del archivo final.

de las capas (no lo hagas en la que contiene el fi-chero de música) y pulsa para añadir un fotogra-ma clave .

7 Con esto ha-brás obtenido

dos fotogramas clave con los mis-mos elementos, donde el único que tendrás que cambiar se-rá el botón de audio. Sitúate para ello sobre el fotograma 2 de la capa que contiene los botones . En el panel de propiedades situado a la izquierda pulsa luego sobre el botón .

Luego, en la ven-tana que aparece, selecciona el botón de sustitución, en este caso será . Pulsa en .

8 No te olvides de detener la película en cada uno de estos fotogramas, ya que

de otro modo irá de uno a otro sin detener-se y generando un bucle. Sitúate sobre cada uno de ellos, pincha con el botón derecho del ratón y selecciona . Luego, en la

ventana que aparece haz doble click sobre la función . Una vez que añadas las dos acciones lo verás indicado en cada uno de los fotogramas clave de la línea de tiempo .

9 Una vez que ya tienes los dos fotogramas preparados llega el momento de asignar

los diferentes comportamientos a cada uno de los botones. Para empezar, sitúate sobre e l pr imer fotograma de modo que quede seleccionado el botón que aparecerá por defecto . Luego abre la ventana de comporta-mientos y pincha en el botón luego en y finalmente en . En la ventana que aparece a continuación debes indicar que se dirija al fotograma

y pulsa en . De este modo lo que ha-brás conseguido es que al hacer click sobre el botón no sólo se detenga el sonido, sino que la película avance hasta el fotograma 2, donde se encuentra el botón con el símbolo del audio desactivado .

10 Presiona ahora el fotograma 2 de la capa

de modo que se seleccione el otro botón . Dirígete de nuevo a la ventana de comportamientos. Como este botón lo creaste a partir de una copia del primero es posible que tenga asignada la acción de detener los sonidos, que tendrás que elimi-nar. Selecciónalo con un click

y pulsa en para suprimirlo.

11Luego pulsa sobre el botónen la entrada y

en . En la ventana que aparece ahora indica que se dirija al fotogra-ma , de modo que al pulsar sobre el botón la película retroceda al punto anterior. Por último, pincha en para terminar.

60 Nº 289

61

Software

4 Puedes elegir la versión de ActionScript que utilizará

tu proyecto desde .

Según las necesidades de éste, será conveniente que utilices la más reciente (si vas a usar nuevas funciones) o, si por el contrario te decidas por las anteriores. Tam-bién dispones de otras opciones como la calidad y la compre-sión de imágenes y sonidos. Si seleccionas la casilla

se publicarán en el archivo to-das las capas existentes, aun cuando estén ocultas.

5 Por último, una vez que has ajustado todos los pa-

rámetros, pulsa en el botón y, tras unos instantes

durante los que verás una ba-rra de progreso

obtendrás los archivos finales. En principio con los ficheros que tienen la exten-sión será suficiente para publicar el proyecto en Internet una vez que los alojes ambos en el servidor. O también puedes incrustar únicamente el archivo Swf dentro de una página rea-lizada en Html.

■

Nº 289

¿Cuánto ocupa cada elemento?

La generalización y el aumento de la banda ancha ha salvado una de las mayores dificultades a las que se en-frentaba Flash hace algunos años: el tamaño final del archivo, que ralenti-zaba la carga del mismo en Internet y hacía obligatorio el uso de páginas de inicio de precarga. Aunque este problema ya no es tan acusado como entonces, es posible que aún tengas que tener en cuenta el tamaño final del archivo antes de publicarlo en

Internet. Flash publica un informe en el que puedes consultar el peso de cada uno de los elementos incluidos en tu película, de modo que te puedas hacer una idea de cuáles son los que puedes reducir de tamaño. Sigue es-tos pasos para conseguirlo:

1Para obtener estos datos debes indicarlo en la ventana de con-

figuración de la publicación. Diríge-te al menú y selecciona la entrada .Una vez que te encuentres sobre

la ventana , pincha sobre la pestaña ,selecciona a continuacón la opción

y pulsa so-bre el botón .

2 A continuación, al lado de la lí-nea de tiempo de tu proyecto,

se abrirá una nueva pestaña en la que puedes comprobar el tamaño que ocupan cada uno de los elementos que están incluidos en él .

Si accedes al directorio donde guar-das el proyecto podrás comprobar que también se habrá generado un archivo de texto con estos datos

. Con los resultados que aparecen en el informe puedes optar por pres-cindir de algunas fuentes de texto y convertirlas en gráficos, convertir en vectorial imágenes en mapas de bits (Jpg, Gif, etc.) y eliminar las imáge-nes originales de la biblioteca de ar-chivos, comprimir o anular un canal de audio, etc.

vaio

Textfeld

En la edición impresa, este era un espacio de publicidad

Documents

Curso Flash CHOY 2009 - Cap 1 Al 5