Internet, el instrumento esencial de la diplomacia del siglo XXI

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
Sesin prctica de Fireworks MX -1-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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.

Sesin prctica de Fireworks MX

-2-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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 Smbolo botn dentro de la biblioteca 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.

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).

Sesin prctica de Fireworks MX

-3-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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.

Sesin prctica de Fireworks MX

-4-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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.

Sesin prctica de Fireworks MX

-5-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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:

Sesin prctica de Fireworks MX

-6-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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.

Sesin prctica de Fireworks MX

-7-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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.

Sesin prctica de Fireworks MX

-8-

Internet, el instrumento esencial de la diplomacia del siglo XXI

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).

Sesin prctica de Fireworks MX

-9-