Internet, el instrumento esencial de la diplomacia del siglo XXI

Sesin prctica de Fireworks MX - 1 -

SESIN PRCTICA
Sesin Prctica de Fireworks MX

El primer paso antes de comenzar cualquier tipo de produccin en Fireworks es el boceto en
papel. A partir de este boceto se podr planear de mejor manera la pgina Web.


Platilla de trabajo y guas

Abra el archivo plantilla.png y ver una capa llamada plantilla. Esta capa ha sido preparada
con anticipacin basada en el boceto de la pgina que queremos hacer. Dicha capa va a servir
exactamente como plantilla de trabajo. En ella estn divididas las reas bsicas del sitio, navegacin al
lado izquierdo, rea de encabezado en la parte superior, margen izquierdo y rea central de contenido.

Asegrese de que las Guas y Reglas de apoyo estn visibles, si no lo estn vaya a el men de
Vista (View) > Guas (Guides) > Mostrar Guas (Show Guides) y Vista (View) > Reglas (Rulers).





Manipulacin de objetos

El siguiente paso es manipular una forma simple, en este caso un rectngulo. El primer cambio
que haremos es muy sencillo, se trata de cambiar el color del objeto. Seleccione la capa que contiene el
rectngulo gris de la parte superior del lienzo y vaya al panel de propiedades y seleccione el color
#FF6600.

Siguiendo la idea del boceto, haremos una forma que de la impresin de un trozo de tela en
movimiento. Esto lo lograremos al aadir nuevos puntos a un rectngulo y despues manipulando las
Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 2 -
curvas a partir de estos mismos puntos. Seleccione el ahora rectngulo anaranjado de la parte superior.
Los objetos de tipo vector que ofrece Fireworks estn compuestos por puntos y por defecto estn
agrupados. Antes de modificar dicho rectngulo, tenemos que des-agruparlo. Vaya al men de
Modificar (Modify) > Desagrupar (Ungroup). Despus seleccione la herramienta de pluma y empiece
a aadir nuevos puntos al rectngulo en la parte inferior. En el momento que pasa el puntero sobre la
lnea del rectngulo, notara que el cursor cambia al smbolo de pluma con un signo de + al lado.

Para que tenga control sobre las
curvas cuando aada un punto, deje
presionado por un momento y mueva el
cursor, en ese momento aparecern las
pequeas manecillas que sirven para
controlar los contornos de una curva, a este
tipo de curva se le llama curva de Bezier.




Smbolos e Instancias

"Utilice smbolos e instancias para simplificar las animaciones de Fireworks y facilitar el
trabajo de edicin. Las instancias son representaciones de un objeto Fireworks original, que recibe el
nombre de smbolo. Cuando se modifica el objeto smbolo (original), las instancias (copia) cambian
automticamente para reflejar las modificaciones efectuadas en el smbolo.

Puede utilizar smbolos e instancias para modificar fcilmente ilustraciones complejas que
contienen varias copias de objetos, compartir componentes a travs de estados de rollover y crear y
modificar animaciones rpidamente. Los smbolos se almacenan en el panel Biblioteca (Library). Se
puede crear un smbolo a partir de cualquier objeto, texto o grupo". (Manual de Macromedia)

Creacin de un smbolo (botones)

Dentro del panel de capas, haga clic sobre el icono del ojo sobre la capa llamada elementos,
seleccione la capa botn junto con la capa marco (seleccione las dos utilizando la tecla shift ).
Vaya al men Modificar (Modiy) > Smbolo (Symbol) > Convertir a Smbolo (Convert to symbol).
En ese momento aparece la siguiente ventana.

Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 3 -


Presione la opcin de Botn (Button) bajo la categora de tipo y asigne el nombre de boton.
Haga clic en OK.

En el momento que se crea o convierte
un smbolo, este aparece dentro del panel de
Biblioteca (Library). Si no puede ver este panel,
vaya al men de Ventana (Window) >
Biblioteca (Library).



En el lienzo podemos ver que las dos
capas de la grafica del botn que tenamos,
ahora se han convertido en una instancia del
smbolo de botn. La instancia est
representada con color verde sobrepuesto y una
pequea flecha de retorno, en la parte inferior
izquierda, similar a las que aparecen en los
famosos atajos (shorcut). Es una buena
metfora pensar en smbolos e instancias, si lo
comparamos con el archivo que abre un
software como Word, y el atajo que lo
representa muchas veces en nuestro escritorio.


Smbolo botn dentro de la biblioteca


Instancia de botn en el lienzo


Haga doble clic sobre el smbolo en el panel de la biblioteca, aparecer la ventana de
propiedades del smbolo, seleccione Editar (Edit).


Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 4 -
Existen cuatro modalidades bsicas para un botn:

- Up: la apariencia inicial del botn.
- Over: apariencia del botn cuando es sealado por el mouse.
- Down: apariencia del botn al momento de hacer clic sobre l.
- Over while down: apariencia del botn al estar mostrando el link al que hace


Usted puede editar cada una de estas modalidades, manteniendo la ventana de edicin abierta,
las herramientas de trabajo funcionan de igual forma a que si trabajara directamente sobre el lienzo. En
nuestro ejemplo, ya tenemos listo el primer estado Up, haga clic sobre el tabular Over y seleccione el
botn que dice Copy Up Graphic. Esta opcin copiara los elementos del estado anterior (Up). Ahora
si puede cambiar libremente el color del marco o de la tipografa. Siga el ejercicio con la modalidad de
Down, y finalmente cierre la ventana (Done).




Barra de navegacin

Una vez que haya terminado de editar el smbolo del botn puede crear las diferentes instancias
del mismo y armar su barra de navegacin. El botn original que convertimos a smbolo, se muestra
como habamos dicho anteriormente, como una instancia (con la capa verde sobrepuesta y la pequea
flecha a un lado). Es muy sencillo aadir instancias del botn, simplemente seleccione el smbolo
dentro de la Biblioteca y arrstrelo al lienzo. Coloque los botones en una hilera dentro del rea de
navegacin gris. Una vez que los tenga bien alineados puede definir las propiedades de cada boton:
texto, URL y texto alternativo.

Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 5 -
Las capas de color verde que
aparecen sobre los botones
indican un rea de divisin
(Slice).




Areas de division

"La divisin de imgenes tiene las ventajas siguientes:
- Puede optimizarse cada parte de la imagen por separado, con lo que se obtienen archivos
ms pequeos y fciles de descargar.
- Pueden exportarse algunas partes de la imagen como archivo GIF y otras como JPEG, con
lo que se utiliza lo mejor de cada formato de exportacin.
- Pueden designarse pginas para utilizar algunos de sus elementos grficos en todas las
pginas y cambiar slo las divisiones que tienen contenidos exclusivos, lo que proporciona
velocidad al sitio Web. Adems, se puede editar y reemplazar un elemento grfico de una
divisin sin tener que volver a descargar todas las divisiones de una imagen.
(Manual de Macromedia)

Exportacin con zonas de divisin
El siguiente paso es manualmente asignar el resto de las reas de divisin. Asegrese de que
estn visibles tanto las guas de trabajo, de color verde, como las guas que muestran las reas de
divisin (slices), estas lneas son de color rojo. Usted puede ajustar las lneas al gusto, de forma que
queden dimensiones consistentes con el formato de la pgina, por ejemplo, los botones
automticamente se aslan y dejan un pequeo margen de ambos lados, para ajustarlos al ancho de la
columna, con el puntero arrastre las lneas rojas hacia las guas verdes.
Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 6 -
Tambin puede crear nuevas reas de divisin para el ttulo The Gates, en la parte superior
izquierda y para la grfica anaranjada con el texto de Central Park. Seleccione la herramienta de
divisin, bajo la categora de Web y marque ambas reas, por defecto se crean rectngulos, pero
tambin tiene la opcin de la herramienta de divisin poligonal.
Consejo (tip): Para mejor organizacin de su pgina es recomendable que le asigne un nombre a cada
una de sus reas de divisin, de otra forma Fireworks asignara nombres automticamente, estos
nombres suelen ser largos y no uniformes. Asigne nombres a las divisiones usando el panel de
propiedades.
Seleccione el panel de Vista Previa con dos ventanas. En este momento puede ajustar colores,
tipo de optimizacin, calidad, etc., de cada una de las reas de divisin. Fireworks hace una
interpretacin de acuerdo al tipo de imagen, es decir que si hay una fotografa por ejemplo, quiz
proponga crear un archivo JPEG en vez de un GIF para esa rea. Una vez definidas las reas de
divisin y su optimizacin, vaya al men de Archivo (File) > Exportar (Export). La siguiente ventana
aparecer:


Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 7 -
1. Busque la carpeta en donde guardar el archivo HTML y las imgenes.
2. Tiene las opciones de exportar las imgenes solamente o junto con un archivo HTML.
3. Para las reas de divisin (slices) usted puede:
-exportar las reas de divisin seleccionadas,
-incluir reas no marcadas como divisin y
-separar las imgenes en otra carpeta (recomendable).

4. El botn de Opciones (Options) junto al men de HTML, le da la opcin de definir el
archivo HTML con mayor detalle, tipo de tablas y contenido en las reas vacas, nombramiento
de archivos, etc.
5. Por ahora, nada ms seleccione la opcin de poner imgenes en otra carpeta.
6. Usando un navegador, abra el archivo HTML para ver la plantilla de su pgina Web.




Enmascaramiento de imgenes

"Las mscaras se crean agrupando dos objetos en un grupo de mscara. El objeto superior (la
mscara) se utiliza para crear un efecto de recorte sobre el objeto inferior. Puede utilizar tanto una
imagen como un objeto con trazados como objeto superior de la mscara" (del manual oficial de
Macromedia).

1. Abra el archivo gates2.jpg.
2. Seleccione la herramienta de pluma
3. Trace el contorno de la puerta en primer plano, acurdese de dejar el mouse presionado para
obtener las manecillas de las curvas de Bezier. Una capa nueva como resultado del trazado con
la pluma aparecer sobre la capa con la fotografa.
4. Para ajustar las curvas de la mscara con mayor exactitud vaya al panel de propiedades y
aplique transparencia a toda la capa del objeto, de esta forma podr ver el contorno de la
fotografa en la capa de abajo como gua.
5. Luego, seleccione las dos capas, sosteniendo la tecla de shift y vaya al men de Modificar
(Modify)> Mscara (Mask)> Agrupar como mscara (Group as Mask).




Este enmascaramiento se puede utilizar como encabezado de pgina, en vez de la grfica de
vector que realizamos al principio del ejercicio. Es un ejemplo de cmo se puede ejecutar de diferente
forma la misma idea.

Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 8 -
Gifs animados


"Una animacin GIF est formada por una serie de imgenes fijas que aparecen de forma
consecutiva a gran velocidad, lo que permite percibirlas como una imagen en movimiento. Al crear
una animacin en Fireworks, cada imagen se sita en un fotograma distinto. A continuacin, todas las
imgenes de una animacin se exportan en un archivo GIF animado. En Fireworks es posible abrir y
editar animaciones GIF existentes o crear otras nuevas". (Manual oficial de Macromedia)

Esto implica que para crear un GIF animado debemos tener, en primera instancia, esa "serie de
imgenes fijas" que lo conformarn, ya sean diseadas por nosotros o provistas por otros medios.

Por ejemplo, tenemos varias imgenes individuales que simulan la frecuencia de movimientos
que tendr el gif animado final. Estas imgenes las pegamos, en un lienzo nuevo, una sobre otra pero
perfectamente alineadas. Abra el archivo gif_animacion.png




Vaya al men de Ventana (Window)
> Fotogramas (Frames). El siguiente panel
aparecer del lado derecho. Haga clic sobre
el botn de Distribucin de fotogramas
(Distribute to frames) en la parte inferior
derecha del panel. En este momento cada
capa seleccionada es colocada dentro de un
fotograma (Frame) separado.





Internet, el instrumento esencial de la diplomacia del siglo XXI
Sesin prctica de Fireworks MX - 9 -
Ahora configuraremos los "tiempos" de la animacin.

El primer aspecto a configurar es cuntas veces se repetir el efecto animado. En la parte
inferior de la ventana Fotogramas (Frames), tenemos el botn que nos da las opciones de hacerlo
hasta 20 veces, continuamente (Forever), o sin repeticin alguna.

Podemos tambin configurar la
duracin del tiempo de los frames, individual o
generalmente. Esto lo podemos hacer si damos
clic dos veces sobre el nmero que aparece a la
derecha de cada frame. All aparecer un men
en donde podemos configurar el tiempo que
durar CADA FRAME. Si queremos
configurar la duracin de TODOS los frames,
simplemente habr que seleccionarlos todos
antes de hacerlo.



Finalmente, para probar el producto final, hacemos clic en el botn Play, abajo a la derecha, en
la ventana del documento. Y all veremos la animacin en curso.

Con respecto a los efectos que podemos aplicar a los GIF's animados, slo resta sealar dos
cosas:
1- Los efectos referidos a sombras y texturas, son los mismos aplicables a cualquier imagen.
2- Los que estn referidos al movimientos de las imgenes habr que determinarlos por medio de una
conveniente distribucin en los distintos frames.


Con respecto a la optimizacin y exportacin
de un GIF animado:

1- Para la optimizacin de las imgenes que
componen la animacin, deben tenerse
seleccionados todos los frames
2- La exportacin es exactamente igual que en
un GIF no animado, slo que en el mismo
proceso de optimizacin hay que especificar
que la exportacin ser como GIF animado
(Animated Gif).