Practica Fireworks

Internet, el instrumento esencial de la diplomacia del siglo XXI

Sesión práctica de Fireworks MX - 1 -

SESIÓN PRÁCTICA Sesión Práctica de Fireworks MX

El primer paso antes de comenzar cualquier tipo de producción en Fireworks es el boceto en papel. A partir de este boceto se podrá planear de mejor manera la página Web. Platilla de trabajo y guías

Abra el archivo “plantilla.png” y verá una capa llamada plantilla. Esta capa ha sido preparada con anticipación basada en el boceto de la página que queremos hacer. Dicha capa va a servir exactamente como plantilla de trabajo. En ella están divididas las áreas básicas del sitio, navegación al lado izquierdo, área de encabezado en la parte superior, margen izquierdo y área central de contenido.

Asegúrese de que las Guías y Reglas de apoyo estén visibles, si no lo están vaya a el menú de Vista (View) > Guías (Guides) > Mostrar Guías (Show Guides) y Vista (View) > Reglas (Rulers).

Manipulación de objetos

El siguiente paso es manipular una forma simple, en este caso un rectángulo. El primer cambio que haremos es muy sencillo, se trata de cambiar el color del objeto. Seleccione la capa que contiene el rectángulo 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 impresión de un trozo de tela en movimiento. Esto lo lograremos al añadir nuevos puntos a un rectángulo y despues manipulando las



curvas a partir de estos mismos puntos. Seleccione el ahora rectángulo anaranjado de la parte superior. Los objetos de tipo vector que ofrece Fireworks están compuestos por puntos y por defecto están agrupados. Antes de modificar dicho rectángulo, tenemos que des-agruparlo. Vaya al menú de Modificar (Modify) > Desagrupar (Ungroup). Después seleccione la herramienta de pluma y empiece a añadir nuevos puntos al rectángulo en la parte inferior. En el momento que pasa el puntero sobre la línea del rectángulo, notara que el cursor cambia al símbolo de pluma con un signo de “+” al lado.

Para que tenga control sobre las curvas cuando añada un punto, deje presionado por un momento y mueva el cursor, en ese momento aparecerán las pequeñas manecillas que sirven para controlar los contornos de una curva, a este tipo de curva se le llama curva de Bezier.

Símbolos e Instancias

"Utilice símbolos e instancias para simplificar las animaciones de Fireworks y facilitar el trabajo de edición. Las instancias son representaciones de un objeto Fireworks original, que recibe el nombre de símbolo. Cuando se modifica el objeto símbolo (original), las instancias (copia) cambian automáticamente para reflejar las modificaciones efectuadas en el símbolo.

Puede utilizar símbolos e instancias para modificar fácilmente ilustraciones complejas que

contienen varias copias de objetos, compartir componentes a través de estados de rollover y crear y modificar animaciones rápidamente. Los símbolos se almacenan en el panel Biblioteca (Library). Se puede crear un símbolo a partir de cualquier objeto, texto o grupo". (Manual de Macromedia) Creación de un símbolo (botones)

Dentro del panel de capas, haga clic sobre el icono del ojo sobre la capa llamada “elementos”, seleccione la capa “botón” junto con la capa “marco” (seleccione las dos utilizando la tecla shift ). Vaya al menú Modificar (Modiy) > Símbolo (Symbol) > Convertir a Símbolo (Convert to symbol…). En ese momento aparece la siguiente ventana.



Presione la opción de Botón (Button) bajo la categoría de tipo y asigne el nombre de “boton”. Haga clic en OK.

En el momento que se crea o convierte un símbolo, 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 botón que teníamos, ahora se han convertido en una instancia del símbolo de botón. La instancia está representada con color verde sobrepuesto y una pequeña flecha de retorno, en la parte inferior izquierda, similar a las que aparecen en los famosos atajos (shorcut). Es una buena metáfora pensar en símbolos 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.

Símbolo botón dentro de la biblioteca

Instancia de botón en el lienzo

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



Existen cuatro modalidades básicas para un botón: - Up: la apariencia inicial del botón. - Over: apariencia del botón cuando es señalado por el mouse. - Down: apariencia del botón al momento de hacer clic sobre él. - Over while down: apariencia del botón al estar mostrando el link al que hace

Usted puede editar cada una de estas modalidades, manteniendo la ventana de edición 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 botón que dice “Copy Up Graphic”. Esta opción copiara los elementos del estado anterior (Up). Ahora si puede cambiar libremente el color del marco o de la tipografía. Siga el ejercicio con la modalidad de Down, y finalmente cierre la ventana (Done).

Barra de navegación

Una vez que haya terminado de editar el símbolo del botón puede crear las diferentes instancias del mismo y armar su barra de navegación. El botón original que convertimos a símbolo, se muestra como habíamos dicho anteriormente, como una instancia (con la capa verde sobrepuesta y la pequeña flecha a un lado). Es muy sencillo añadir instancias del botón, simplemente seleccione el símbolo dentro de la Biblioteca y arrástrelo al lienzo. Coloque los botones en una hilera dentro del área de navegación gris. Una vez que los tenga bien alineados puede definir las propiedades de cada boton: texto, URL y texto alternativo.



Las capas de color verde que aparecen sobre los botones indican un área de división (Slice).

Areas de division

"La división de imágenes tiene las ventajas siguientes:

- Puede optimizarse cada parte de la imagen por separado, con lo que se obtienen archivos más pequeños y fáciles 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 exportación.

- Pueden designarse páginas para utilizar algunos de sus elementos gráficos en todas las páginas y cambiar sólo las divisiones que tienen contenidos exclusivos, lo que proporciona velocidad al sitio Web. Además, se puede editar y reemplazar un elemento gráfico de una división sin tener que volver a descargar todas las divisiones de una imagen.

(Manual de Macromedia)

Exportación con zonas de división

El siguiente paso es manualmente asignar el resto de las áreas de división. Asegúrese de que estén visibles tanto las guías de trabajo, de color verde, como las guías que muestran las áreas de división (slices), estas líneas son de color rojo. Usted puede ajustar las líneas al gusto, de forma que queden dimensiones consistentes con el formato de la página, por ejemplo, los botones automáticamente se aíslan y dejan un pequeño margen de ambos lados, para ajustarlos al ancho de la columna, con el puntero arrastre las líneas rojas hacia las guías verdes.



También puede crear nuevas áreas de división para el título The Gates, en la parte superior izquierda y para la gráfica anaranjada con el texto de Central Park. Seleccione la herramienta de

división, bajo la categoría de Web y marque ambas áreas, por defecto se crean rectángulos, pero también tiene la opción de la herramienta de división poligonal.

Consejo (tip): Para mejor organización de su página es recomendable que le asigne un nombre a cada una de sus áreas de división, de otra forma Fireworks asignara nombres automáticamente, 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 optimización, calidad, etc., de cada una de las áreas de división. Fireworks hace una interpretación de acuerdo al tipo de imagen, es decir que si hay una fotografía por ejemplo, quizá proponga crear un archivo JPEG en vez de un GIF para esa área. Una vez definidas las áreas de división y su optimización, vaya al menú de Archivo (File) > Exportar (Export). La siguiente ventana aparecerá:



1. Busque la carpeta en donde guardará el archivo HTML y las imágenes. 2. Tiene las opciones de exportar las imágenes solamente o junto con un archivo HTML. 3. Para las áreas de división (slices) usted puede:

-exportar las áreas de división seleccionadas, -incluir áreas no marcadas como división y -separar las imágenes en otra carpeta (recomendable).

4. El botón de Opciones (Options…) junto al menú de HTML, le da la opción de definir el archivo HTML con mayor detalle, tipo de tablas y contenido en las áreas vacías, nombramiento de archivos, etc.

5. Por ahora, nada más seleccione la opción de poner imágenes en otra carpeta. 6. Usando un navegador, abra el archivo HTML para ver la plantilla de su página Web.

Enmascaramiento de imágenes

"Las máscaras se crean agrupando dos objetos en un grupo de máscara. El objeto superior (la máscara) 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 máscara" (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, acuérdese 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 fotografía.

4. Para ajustar las curvas de la máscara 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 fotografía en la capa de abajo como guía.

5. Luego, seleccione las dos capas, sosteniendo la tecla de shift y vaya al menú de Modificar (Modify)> Máscara (Mask)> Agrupar como máscara (Group as Mask).

Este enmascaramiento se puede utilizar como encabezado de página, en vez de la gráfica de vector que realizamos al principio del ejercicio. Es un ejemplo de cómo se puede ejecutar de diferente forma la misma idea.



Gifs animados

"Una animación GIF está formada por una serie de imágenes fijas que aparecen de forma consecutiva a gran velocidad, lo que permite percibirlas como una imagen en movimiento. Al crear una animación en Fireworks, cada imagen se sitúa en un fotograma distinto. A continuación, todas las imágenes de una animación 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 imágenes fijas" que lo conformarán, ya sean diseñadas por nosotros o provistas por otros medios.

Por ejemplo, tenemos varias imágenes individuales que simulan la frecuencia de movimientos que tendrá el gif animado final. Estas imágenes 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 botón de Distribución 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.



Ahora configuraremos los "tiempos" de la animación.

El primer aspecto a configurar es cuántas veces se repetirá el efecto animado. En la parte inferior de la ventana Fotogramas (Frames), tenemos el botón que nos da las opciones de hacerlo hasta 20 veces, continuamente (Forever), o sin repetición alguna.

Podemos también configurar la duración del tiempo de los frames, individual o generalmente. Esto lo podemos hacer si damos clic dos veces sobre el número 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 duración de TODOS los frames, simplemente habrá que seleccionarlos todos antes de hacerlo.

Finalmente, para probar el producto final, hacemos clic en el botón Play, abajo a la derecha, en la ventana del documento. Y allí veremos la animación en curso.

Con respecto a los efectos que podemos aplicar a los GIF's animados, sólo resta señalar dos cosas: 1- Los efectos referidos a sombras y texturas, son los mismos aplicables a cualquier imagen. 2- Los que están referidos al movimientos de las imágenes habrá que determinarlos por medio de una conveniente distribución en los distintos frames.

Con respecto a la optimización y exportación de un GIF animado: 1- Para la optimización de las imágenes que componen la animación, deben tenerse seleccionados todos los frames 2- La exportación es exactamente igual que en un GIF no animado, sólo que en el mismo proceso de optimización hay que especificar que la exportación será como GIF animado (Animated Gif).

Documents

Practica Fireworks