introducciÓn al flash cs3 (i) ¿quÉ es flash cs3? · adobe flash cs3 professional es una...
TRANSCRIPT
1
INTRODUCCIÓN AL FLASH CS3 (I)
¿QUÉ ES FLASH CS3?
Adobe Flash CS3 Professional es una aplicación que le permitirá
crear páginas Web de alto contenido interactivo, animaciones de todo
tipo y hasta juegos. Efectivamente, gracias a la demostrada potencia y
versatilidad de las diferentes versiones de este programa, podrá
añadir a su Web desde un sencillo botón hasta la más compleja de las
animaciones; incluso podrá diseñar una Web completa exclusivamente
desde Flash. Flash es un estándar y cada vez podemos ver más sitios
Web creados con esta tecnología. Así, por ejemplo, la mayoría de
Webs oficiales de cantantes están realizadas con Flash, lo que les
dota de un gran atractivo. Pero Flash también aparece en multitud de
páginas de las grandes marcas de automóviles y ya ha sido adoptado
por miles de empresas para mostrar sus productos de forma agradable
e interactiva. Por otra parte, cada vez son más las animaciones
realizadas en Flash que podemos ver, tanto en páginas Web como de
forma autónoma. En definitiva, Flash se ha convertido en una de las
herramientas más utilizadas, de forma que ya resulta imprescindible
tener instalado en el ordenador el reproductor de Flash si es que
2
deseamos poder acceder y ver el contenido de millones de páginas
Web.
Flash CS3 Professional proporciona múltiples herramientas con
las que podrá crear películas a base de animaciones, botones estáticos
o animados, sonidos y música, vídeo, etc. Además, las películas podrán
ser interactivas para que respondan a determinados eventos y poder
tener control sobre las secuencias de animación, añadir acciones,
interactividad, etc. Iremos conociendo el entorno, manejo y filosofía
de esta nueva versión de Flash.
3
DE FLASH 8 A FLASH CS3
Adobe ha querido en esta última versión integrar todos sus productos
en una suite única en la que prima sobre todo la compatibilidad entre ellos. Así
la compañía se desmarca del resto ofreciendo un paquete de aplicaciones muy
completas que son capaces de interactuar entre ellas y nos ofrecen la
posibilidad de reusar proyectos de un programa en otro.
El paso de Flash 8 a Flash CS3 se ha visto marcado sobre todo por esta
característica, por lo que su lanzamiento quizás no venga acompañado de
grandes avances como vimos en el paso de Flash MX a Flash 8. Ahora veremos
las mejoras añadidas al programa:
Integración total con archivos de Photoshop e Illustrator: Flash
CS3 ofrece una compatibilidad perfecta a la hora de importar
archivos creados en Photoshop e Illustrator. De esta forma seremos
capaces de incluir en nuestro proyecto este tipo de archivos y
modificar y utilizar sus capas y estilos muy fácilmente.
Con esta nueva opción podremos crear composiciones mucho más
complejas, al ser capaces de crear cualquier diseño en uno de estos
programas para importarlo más tarde a nuestro proyecto Flash con
un par de clics.
4
Interfaz mejorada: Flash CS3 cambia su interfaz para integrarse
completamente en la suite de productos Adobe, ahora todas las
ventanas se encuentran en paneles laterales completamente
configurables. Podrás mostrar las ventanas que quieras de un modo
expandido o minimizado.
Flash también te permitirá guardar y cargar diferentes tipos de
configuración de paneles. Así podrás tener tu vista preferida
guardada y accesible si en algún momento el espacio de trabajo se
vuelve demasiado caótico.
Herramientas compartidas: La herramienta Pluma se ha adaptado y
ahora actúa de un modo similar a la existente en Illustrator. Los
mismos accesos por combinación de teclas también son accesibles
desde Flash.
Componentes mejorados: Flash CS3 permite una mayor configuración
en los componentes preinstalados. De esta forma podremos cambiar
su aspecto y mostrar controles con diferentes skins. Esta opción nos
permitirá crear formularios más acorde con nuestros diseños, ya no
será necesario mostrar los controles con la apariencia a la que
estamos acostumbrados.
5
Vídeo más potente: Esta versión de Flash introduce un nuevo
compresor de vídeo mejorado que aumenta la calidad y disminuye el
tamaño del archivo final SWF. Además se introduce el soporte de
capas con transparencia que podrán ser tratadas e importadas desde
Premiere sin ningún tipo de problema.
Flash CS3 incluye como gran avance ActionScript 3. Esta nueva versión
del lenguaje de programación de Flash supone un gran cambio en la
metodología de trabajo en la creación de proyectos.
VECTORES VERSUS BITMAPS
Todo lo dicho no tendría ningún sentido si para poder ver toda esa
multimedia en las Webs hubiera que esperar mucho a que se descargaran
las páginas. Afortunadamente, Flash, aunque puede manejar los bitmaps,
trabaja fundamentalmente con vectores. Vamos a ver qué significa eso.
Los bitmaps son archivos gráficos constituidos a base de píxeles
(puntos de imagen) que forman parte de un conjunto que obliga a
seleccionarlo todo a la vez, ya que, en principio, lo que aparece en la
6
imagen no son elementos individuales sino un «todo» inseparable. Cada
imagen consta de un número determinado de píxeles que determinan su
resolución, la cual es fija y no varía con el tamaño, lo que provocará
distorsiones si se reduce, o la aparición de un aspecto dentado si se
amplía. En cambio, un dibujo vectorial es un archivo de tamaño reducido
que consta de líneas, curvas y otros objetos independientes que se pueden
seleccionar y editar por separado. Además, la calidad de los gráficos
vectoriales no se ve afectada por el tamaño, lo cual permite reducirlos o
agrandarlos sin que aparezcan distorsiones. De lo dicho se extrae que los
archivos que genera Flash serán pequeños para lo que contienen y su carga
desde Internet sea razonablemente rápida. Además, al tratarse de
vectores, podremos variar su tamaño en la página sin que su calidad varíe
ni un ápice. No obstante, Flash permite incorporar bitmaps a sus películas
para utilizarlos tal cual, o bien, convertirlos en vectores (trazarlos) con
objeto de reducir el tamaño del archivo sin afectar demasiado a su
calidad.
LA PÁGINA DE INICIO
Cada vez que arranque Flash aparecerá el asistente o página de
inicio. Desde él podremos crear rápidamente un documento vacío de Flash,
7
pero también podremos acceder directamente a los últimos
documentos con los que hayamos trabajado o crear un nuevo
documento partiendo de una plantilla predefinida con la que podremos
realizar fácilmente presentaciones de fotografías, juegos de
preguntas, aplicaciones de formularios, etc. Para ello disponemos de
dos columnas en las que se nos muestran las diferentes opciones
disponibles para iniciar un trabajo en Flash. Basta con hacer clic en
la opción deseada y automáticamente se abrirá un nuevo documento
listo para que trabajemos en él. Haciendo clic en
accederemos a más opciones de plantilla.
8
Mediante las dos primeras opciones de la columna central
crearemos un nuevo documento vacío en el que partiendo de
cero podremos crear la película deseada pero con opción a
programar acciones con el lenguaje clásico de Flash
ActionScript 2.0 o con el nuevo ActionScript 3.0. Mediante el
resto de opciones de la columna central podremos acceder
9
directamente a nuevos documentos vacíos para programación
en ActionScript, JavaScript, proyectos, etc.
En la columna de la derecha disponemos de una serie de
plantillas predeterminadas para crear anuncios, formularios,
presentaciones, etc.
En la columna de la izquierda aparecerán los nombres de los
últimos documentos editados, sobre los cuales podremos
hacer clic para abrirlos rápidamente.
ENTORNO DE TRABAJO
Con la página de inicio a la vista, haga clic en
y se abrirá el entorno de trabajo con un
documento nuevo compatible con el nuevo ActionScript 3.0 listo para
trabajar en él.
10
Como puede ver, aparecen una serie de ventanas y paneles
repartidos por la pantalla con una distribución por defecto que le
ofrece el programa en su primer arranque. Sin embargo, se trata sólo
de ventanas y podrá, evidentemente, abrirlas, cerrarlas, cambiar su
tamaño, agruparlas y situarlas donde desee como en la mayoría de
programas de Windows de última generación. Inicialmente aparecen
abiertos la barra de herramientas lateral y los paneles Propiedades,
11
Biblioteca y Color. Además, aparecen cerrados pero disponibles los
paneles Muestras, Filtros y Parámetros. Flash le permitirá agrupar y
manejar los paneles como le plazca, crear y almacenar sus propias
disposiciones, etc.
EL ESCENARIO
El escenario es el rectángulo blanco que aparece en el centro de la
pantalla al crearse un documento nuevo y es donde crearemos la
película y ubicaremos sus diferentes elementos. Mediante la línea de
tiempo controlaremos la reproducción y varias cosas más que iremos
descubriendo poco a poco. Como digo, la ventana del escenario es el
lugar donde se va a crear la película y donde colocaremos las
animaciones, clips de película, botones, gráficos y demás elementos
que compondrán la escena que estemos creando. Cada vez que se cree
un nuevo documento, ese escenario se corresponderá con la escena
principal, que es la que contendrá la película final de Flash que utilizaremos,
por ejemplo, en la Web. Sin embargo, ese espacio en blanco que ahora se
corresponde con la escena podrá ser utilizado también como espacio de
trabajo independiente para crear y editar de forma individual esos
elementos. En ocasiones, por necesidades de organización y complejidad de
12
una película, podremos definir varias escenas diferentes para una misma
película. El paso de una a otra se realizará mediante acciones dentro de cada
escena.
OBJETOS DE FLASH. SÍMBOLOS
Los tres objetos principales con los que trabaja Flash son: gráficos,
botones y clips de película. Cada uno de estos objetos de Flash posee una
identidad y características propias. Vamos a verlas.
GRÁFICO: un gráfico es un objeto cualquiera que puede haber sido
dibujado directamente con las herramientas del programa, o bien importado
desde otra aplicación y convertido a formato vectorial. En principio, los
objetos carecen de cualquier tipo de animación pero son la base de la que se
parte para crearlas, es decir, si desea, por ejemplo, crear la animación de un
círculo que se mueve, primero deberá crear el objeto gráfico «círculo» y a
partir de ahí, aplicarle las operaciones necesarias para que se mueva.
BOTÓN: un botón es un elemento al que se le han añadido una serie
de propiedades que le permiten actuar como un botón, es decir, un gráfico al
que se le podrán añadir acciones para que al pasar el cursor por encima o
hacer clic sobre él, suceda algo.
13
CLIP DE PELÍCULA: un clip de película es un símbolo de animación en
los que un objeto va cambiando de posición, tamaño, forma, color, etc.
¿Qué son los símbolos?
Usted podrá crear un gráfico directamente en la ventana de la escena
utilizando las herramientas de dibujo del programa, y cuando el gráfico esté
terminado podrá, por ejemplo, dotarlo de animación también directamente en
la ventana de la escena. Eso podrá resultar práctico en algunos casos, pero lo
usual será crear un símbolo de ese gráfico. Me explicaré:
Cuando se dibuje, por ejemplo, un círculo directamente en la escena, el
archivo de la película final contendrá la información de ese círculo y la de su
posición en la escena. Si necesita varios círculos más, podrá duplicarlo para
que aparezca varias veces en la escena; sin embargo, el archivo final
contendrá todos esos duplicados junto con la información de la posición de
cada uno, con lo cual el tamaño del archivo necesario tenderá a ser grande.
En cambio, si crea el círculo original y lo define como símbolo gráfico, ese
círculo pasará directamente a formar parte de la biblioteca y lo podrá
reutilizar todas las veces que desee, es decir, podrá arrastrarlo desde la
biblioteca a la escena las veces necesarias hasta completar el total de
14
círculos que necesite. No obstante, y esto es lo importante, el archivo final
sólo contendrá la información correspondiente a un solo círculo y la
posición de todos, con lo cual el tamaño será siempre mucho menor. Eso
sucede porque cuando se lleva un símbolo gráfico a la escena, lo que
realmente se coloca en ella no es el objeto en sí, sino una representación
visual de ese objeto a la cual se le da el nombre de INSTANCIA. De ese
modo, por muchas veces que tenga ese objeto repetido en la escena, el es-
pacio del archivo se mantendrá pequeño porque sólo contendrá la
información del objeto original y las coordenadas de sus repeticiones en la
escena.
Además, si se modifica el objeto original, es decir, el símbolo, todas
sus reproducciones (instancias) que haya en la escena cambiarán
automáticamente, con lo que puede verse que es mucho más práctico definir
todos los gráficos como símbolos en lugar de dibujarlos directamente en la
escena.
Por otra parte, los botones ya son directamente símbolos desde el
momento en que se crean. Como veremos, para crear botones hay que
hacerlo en una ventana de trabajo especial en la que aparecen los
elementos necesarios para asignar al botón sus propiedades cuando se
encuentre en reposo, señalado por el cursor o pulsado por éste. En cuanto a
15
los clips de película, aunque éstos también pueden crearse directamente en
la ventana de la escena, si se definen como símbolos gozarán de las mismas
ventajas que hemos visto para los gráficos. No obstante, veremos cómo, en
algunas ocasiones, interesará convertir los clips de película en gráficos para
que aquéllos se comporten de otra manera. La creación de uno u otro tipo
de símbolo se puede realizar a través de la opción de menú Insertar>Nuevo
símbolo, que dará paso a una ventana en la que se podrá elegir el tipo de
símbolo y asignarle un nombre. Posteriormente, será posible cambiar el
comportamiento de cada símbolo, es decir, un tipo de símbolo podrá ser
convertido en otro.
Además de los objetos que hemos visto, también podremos utilizar
imágenes bitmap, sonidos y vídeo. La conjunción de texto, gráficos,
botones, clips, sonidos, imágenes y vídeo debidamente organizados nos
permitirá crear películas de Flash listas para ser utilizadas en la Web o en
otro sitio.
Seguramente, si es primerizo con el programa, muchas de las cosas que
le estoy contando no le estarán quedando muy claras; sin embargo, no se
preocupe, ya que en cuanto se ponga a manejar el programa, verá cómo todo lo
que está viendo en éste comienza a tener sentido.
16
LA LÍNEA DE TIEMPO
La línea de tiempo es el lugar en donde se refleja lo que va a ir
sucediendo a lo largo de la duración de la película. Se basa prácticamente
en la misma filosofía de las películas de cine, es decir, una serie de
fotogramas sucesivos, cada uno de los cuales contiene las imágenes que
deben aparecer cuando se proyecte la película. La diferencia más sustancial
consiste en que, en el caso de Flash, podemos colocar películas en capas
diferentes de tal modo que al activar la reproducción se proyectarán las
películas de todas las capas a la vez, lo cual sería comparable a proyectar
en la misma pantalla de un cine varias películas simultáneamente. En
cualquier caso, lo que interesa saber de momento es que cuando se
arranque la reproducción de una escena de Flash, se pondrá en marcha la
línea de tiempo a la velocidad que le asignemos e irá apareciendo en la
pantalla todo aquello que contengan los fotogramas según vaya avanzando el
cursor de tiempo. Cuando se llegue al último fotograma, o a cualquier otro
que deseemos, podremos decidir si debe detenerse todo, comenzar de nuevo
la reproducción, saltar a un determinado fotograma, abrir otra escena, etc.
Por otra parte, los símbolos de clip de película, es decir, aquellas
animaciones que hayan sido definidas como símbolos, dispondrán de su
propia línea de tiempo independiente de la línea de tiempo principal, la cual
podremos ver de forma individual cuando estemos editando ese clip.
17
Pulsando en el icono que se encuentra en el vértice superior derecho de
la ventana de línea de tiempo, accederá a un menú que le permitirá
configurar el modo de visualización de la línea de tiempo. Todo ello se irá
viendo poco a poco.
LAS CAPAS
La zona izquierda del panel de la línea de tiempo está destinada al
control de las capas en Flash. Por defecto aparece una capa creada, pero es
posible añadir las que desee. El ubicar cada elemento en una capa
diferente nos permitirá tener un mayor control sobre el desarrollo
de la película y evitará posibles complicaciones a la hora de
reproducirla; además, es posible agrupar las capas en carpetas. Por
otra parte, Flash permite añadir un tipo especial de capa denominado
18
«capa de máscara» que podrá servir, entre otras cosas, para ocultar
o mostrar elementos de la escena.
Finalmente, otro tipo especial de capa denominado «capa de guía
de movimiento» nos permitirá definir una serie de trayectorias
invisibles que servirán para hacer que los objetos se muevan siguiendo
la forma y dirección de esos trazos.
LAS BARRAS DE HERRAMIENTAS
En los próximos apartados vamos a ver una breve descripción del
cometido de las diferentes barras de herramientas disponibles en
Flash.
19
Panel de herramientas principal (barra lateral)
El panel de herramientas principal, al que llamaremos
a partir de ahora «barra lateral de herramientas», es el
que aparece por defecto a la izquierda de la pantalla. Si la
arrastra desde su barra de título, se convertirá en flotante
y podrá llevarla a donde desee. En cualquier caso, cuando se
lleve hasta el lateral izquierdo o derecho de la pantalla,
dejará de ser flotante y se adosará automáticamente a ese
lado. Si no está visible, puede activarla con la orden
Ventana>Herramientas. Haciendo clic en el símbolo en la
franja gris oscuro que aparece en la parte superior de la
barra, podrá alternar entre la visualización de las
herramientas en una o dos columnas.
En esta barra se encuentran las herramientas
20
principales para el dibujo en Flash. La parte superior contiene las
herramientas de dibujo y selección propiamente dichas, la parte
central muestra las herramientas de visualización junto con los
selectores de color y la parte inferior está dedicada a los modificadores de
cada herramienta (si los tiene). Dependiendo de la herramienta elegida se
mostrarán unas u otras opciones.
Barra de herramientas principal
Puede acceder a ella mediante la orden Ventana>Barras de
herramientas>Principal. En esta barra aparecen las clásicas herramientas de
las aplicaciones Windows (Nuevo, Copiar, Cortar, Pegar y otras específicas de
Flash).
Barra del controlador
Mediante esta barra podrá controlar cómodamente la reproducción,
bobinando, rebobinando y paro de una película de Flash. El manejo es idéntico
al de los botones de un reproductor de casete o de vídeo. Puede visualizar
esta barra mediante Ventana>Barras de Herramientas>Controlador.
21
Barra de edición
La barra de edición se encuentra justo debajo del panel de
línea de tiempo y contiene información y controles para cambiar
entre documentos, acceder a escenas, editar escenas, editar
símbolos, cambiar el nivel de zoom del escenario y ocultar o mostrar
la línea de tiempo. Puede activarla o desactivarla mediante la opción
Ventana>Barras de herramientas>Barra de edición.
LOS PANELES DE FLASH CS3
Seguidamente vamos a dar un vistazo rápido algunos de los
paneles más importantes de Flash con objeto de saber cuál es su
22
cometido. Algunos de estos paneles aparecen inicialmente tras
arrancar el programa por primera vez.
Panel de Propiedades
Es la ventana más importante de Flash y también se la denomina
Inspector de Propiedades, aunque en adelante lo llamaremos
simplemente panel Propiedades. Si no está disponible puede
visualizarlo con la opción Ventana>Propiedades>Propiedades o
pulsando directamente Ctrl+F3 . Desde esta ventana podrá examinar y
editar las propiedades de cada elemento que seleccione en la escena.
La gran ventaja de este panel consiste en que su contenido varía en
función del tipo de elemento seleccionado, es decir, el panel
mostrará, por ejemplo, herramientas y opciones de edición de texto si
se trata de un texto, el tipo de línea y colores de un gráfico, etc. Con
lo cual nos ahorramos tener que abrir paneles individuales para
realizar operaciones en los fotogramas, interpolaciones, trabajar con
los sonidos, etc.
23
Panel Alinear
Accesible mediante la orden Ventana>Alinear. Permite alinear
y/o distribuir entre sí varios objetos seleccionados a la vez.
Panel Color
24
Aparece ya en el primer arranque del programa y es accesible
mediante la orden Ventana>Color. Este panel permite, entre otras
cosas:
Seleccionar colores sólidos para aplicar a las líneas o a los
rellenos.
Rellenar con degradados lineales y radiales o con imágenes
bitmap.
Variar el grado de transparencia (Alfa) y los valores de los
componentes RVA y MSB de los colores.
25
Panel Muestras
Accesible mediante la orden Ventana>Muestras. Muestra y
permite aplicar los colores y rellenos correspondientes a una película
de Flash determinada, es decir, es la paleta asociada a un
determinado archivo de Flash. Los colores y rellenos que hayan sido
creados para una película específica aparecerán en esta pa leta
únicamente cuando se encuentre en edición esa película. Mediante
esta paleta podrá aplicar, importar, exportar, añadir, quitar y
clasificar colores.
26
Panel Información
Accesible mediante la orden Ventana>Información. Muestra y
permite modificar las coordenadas de situación del objeto
seleccionado, su altura y su anchura. Igualmente, muestra los
valores RVA (Rojo, Verde, Azul) y Alfa (transparencia) del color que
se encuentre bajo el cursor, así como las coordenadas de éste.
Panel Escena
Accesible mediante la orden Ventana>Otros paneles>Escena.
Permite acceder o seleccionar una escena determinada, así como
duplicar, añadir o eliminar escenas.
27
Panel Transformar
Accesible mediante la orden Ventana>Transformar. Permite
escalar, rotar e inclinar el objeto seleccionado.
28
Panel Acciones
Este panel accesible mediante la orden Ventana>Acciones o
pulsando directamente F9, permite asignar acciones a los fotogramas,
los botones, los clips de película, etc.
Panel Biblioteca
29
Ya disponible desde el arranque del programa y accesible
mediante la orden Ventana>Biblioteca. En este lugar es en donde se
almacenarán y organizarán los símbolos que cree en Flash y también
todo aquello que importe de otro lugar como, por ejemplo, gráficos,
bitmaps, sonidos, vídeos, etc. Las características de este panel le
permitirán, entre otras cosas, organizar los elementos por carpetas o
categorías, duplicar elementos, cambiar su comportamiento, etc.
Panel Bibliotecas comunes
Accesible mediante la orden Ventana>Bibliotecas comunes. Desde
esta biblioteca podrá acceder a una serie de elementos tales como
30
botones, interacciones, etc. que ya vienen incorporados en Flash y que
están listos para ser utilizados.
Panel Explorador de películas
Accesible mediante la orden Ventana>Explorador de películas.
Proporciona una manera fácil para poder ver y organizar el contenido
de la película y seleccionar elementos para su modificación.
Efectivamente, permite ver y organizar el contenido de un documento,
así como seleccionar los elementos que se desean modificar. Los
31
elementos utilizados aparecen organizados en una estructura de árbol
jerárquica por la que se puede desplazar. Puede filtrar las categorías
de los elementos del documento que desea que aparezcan en el
explorador de películas seleccionando entre texto, gráficos, botones,
clips de película, acciones y archivos importados.
Panel Filtros
Este panel aparece integrado junto con el panel Propiedades y se
puede controlar su activación mediante la orden
Ventana>Propiedades>Filtros. Estos filtros, entre los cuales se
encuentran Sombra, Desenfocar, Iluminado, etc., podrán aplicarse a
diferentes objetos de la escena.
32
Panel Historial
Mediante este panel accesible
mediante la orden Ventana>Otros
paneles>Historial, podremos ver una lista
de las operaciones realizadas en el
documento activo desde que se abrió o se
creó. A partir de aquí, se podrán crear
comandos de automatización de tareas,
deshacer y rehacer pasos, etc.