FIREWORKS 4.

0
Al entrar a Fireworks nos encontramos, ms o menos (puede variar de acuerdo la la configuracin que le d el usuario), con la siguiente pantalla:

Pero an no tenemos un area de trabajo, que en este caso llamamos "lienzo" (canvas), as que vamos a Archivo(File)>Nuevo(New), y nos aperece esta ventana, que sirve para confirgurar precisamente el area de trabajo:

En ella se nos dan las opciones para determinar el ancho (width) y el alto (heigh) del lienzo; la resolucin (que en el caso de diseo web, se suele determinar en 72 pixels; y el sistema de medidas que queremos utilizar: pixels, pulgadas (inches), o centmetros. Nosotros utilizaremos pixels, por ser el sistema ms utilizado en medidas para diseo web. En la misma ventana podemos ver, adems, las opciones para determinar el color que llevar el "lienzo" o area de trabajo. Pero es de notar que, aunque definamos un color determinado, aun nos da la opcin de utilizarlo de color blanco, o transparente.. Una vez definidas las propiedades del lienzo, ya estamos listos para trabajar. Por empezar, fijmonos que a la izquierda o en algn lugar de la pantalla, encontramos la siguiente "caja de herramientas":

Son 37 herramientas, algunas de las cuales cambian segn lo que se trabaje: dibujos o pixeles. En la tabla siguiente, sacada del manual oficial de Fireworks, se describen las funciones bsicas de cada herramienta en cada modo: Herramienta Puntero En el modo de objeto En el modo de edicin de imgenes

Selecciona y mueve trazados en Mueve la imagen o los pixeles la pantalla. agrupados mediante un recuadro. Haga doble click en una imagen para editar los pixeles que la componen. Seleccciona un objeto situado detrs del objeto seleccionado. Mueve la imagen o los pixeles agrupados mediante un recuadro.

Seleccionar detrs Seleccionar en nivel inferior

Selecciona y mueve recuadros en Mueve la imagen o los pixeles la pantalla, selecciona un objeto agrupados mediante un de un grupo o un smbolo. recuadro. Muestra los puntos de un trazado y selecciona puntos. Activa el modo de edicin de Selecciona un area de pixeles imgenes y selecciona un area rectangular o elptica. de pixeles rectangular o elptica. selecciona o mueve un area de pixeles de estilo libre.

Recuadro o recuadro elptico

Lazo o lazo poligonal Activa el modo de edicin de imgenes y selecciona un area de pixeles de estilo libre

Varita mgica

Activa el modo de edicin de imgenes y selecciona un area formada por pixeles de color similar.

Selecciona un area formada por pixeles de color similar.

Lnea bsicas

y formas

Dibuja objetos como trazados que Pinta pinceladas de pixeles en se pueden editar. un objeto de imagen. Dibuja objetos como trazados que Activa el modo objetos y dibuja se pueden editar. objetos como trazados que se pueden editar. Crea y edita bloques de texto y abre el editor de texto. Activa el modo de objetos, crea bloques de texto, y abre el editor de texto.

Pluma

Texto

Lpiz Pincel Estilo libre

Dibuja trazos de lpiz de un pixel Dibuja trazos de lpiz de un como trazados de estilo libre. pixel. Dibuja pinceladas como trazados. Pinta pinceladas como pixeles. Estira o contrae un trazado seleccionado para cambiar la forma del mismo. Activa el modo de objeto.

Remodelar area

Remodela las partes de un Activa el modo de objeto. trazado seleccionado que estn includas en el cursor "remodelar area"

Depurador de trazados Modifica las caractersticas de Activa el modo de objeto. presin y velocidad de un trazado sin modificar su forma. Cuchillo/borrador En el modo de objetos esta herramienta se convierte en Cuchillo. Corta un trazado seleccionado para crear varios trazados. En el modo de edicin de imgenes esta herramienta se convierte en Borrador. Borra pixeles de una imagen.

Sello

Activa el modo de edicin de Duplica partes de un objeto de imgenes y duplica partes de un imagen. objeto de imagen.

Rectngulos, lneas y elipses:

Obviamente, para dibujar estas formas debo recurrir a las herramientas correspondientes, pero tanto estas como las dems tienen la posibilidad de ser modificada en algunos aspectos. Por ejemplo: 1- Dibuje un rectngulo con la herramienta correspondiente. 2- Ventana (Window)>Objeto (Object).

O Alt+F2
3- Le aparecer una ventana como esta, la de "Objeto": En esta ventana Ud. tiene opciones para darle un determinado ngulo de "redondeado" (roundness) a las puntas del rectngulo, y para poner el trazo, hacia adentro, centrado, o hacia afuera con respecto al objeto (stroke). Opciones similares aparecen si va a dibujar elipses o polgonos. Prubelo.

Pruebe tambin, teniendo seleccionada la herramienta polgono pero antes de dibujar un objeto: Ventana>Opciones de herramienta (Tool options), y ver que aparecen las siguientes opciones, que le permiten seleccionar: 1- Si va a dibujar un polgono o una estrella. 2- Cuntos lados tendr el polgono o cuntas puntas la estrella. 3- El ngulo de los lados de la estrella.

La herramienta de lnea tiene las mismas opciones que las anteriores en la ventana de Objeto.

Otras herramientas de trazado:

Pluma : Sirve para realizar Lpiz : es para dibujar a mano Pincel : La herramienta trazados segmento por segmento. Pincel permite pintar alzada. El trazo abierto se finaliza Los nodos resultantes en este normalmente en cualquier lugar. El pinceladas de estilo libre, trazado, poseen sub-nodos que trazo cerrado, se finaliza en el mismo mientras que la herramienta ayudan a la modificacin en la lugar donde se empez. A la figura Lpiz dibuja trazos de lpiz curva de alguno de esos de un pxel. resultante se le puede dar relleno. segmentos. El trazado, color, efecto y otras caractersticas, son modificables desde la ventana de trazado (stroke). Practique con algunas de las posibilidades que le brinda.

Tanto las imgenes creadas con las herramientas de dibujo, como los trazos cerrados creados con las herramientas de trazo, pueden ser modificadas desde las ventanas de Relleno y Borde (Fill y Stroke) a las que se accede desde el men ventana (Window).

Edicin y remodelado de trazados editando los puntos :

Algunos puntos sobre este tema, sacados del manual oficial de Fireworks: "Los puntos son la estructura de los objetos de trazado en Fireworks. Cuando se dibuja en el modo de objetos con cualquier herramienta de dibujo de Fireworks, el trazado de resultado se definir por los puntos especificados al dibujar. El tipo de punto y el aspecto curvo o recto de las lneas adyacentes estn relacionados directamente: - Un punto curvo indica que los segmentos adyacentes son curvos y se mantienen transiciones suaves y regulares entre segmentos. - Un punto de esquina indica que al menos uno de los segmentos adyacentes es una lnea recta.

Las dos herramientas ms convenientes para realizar la modificacin de los trazados mediante la edicin de puntos, son las de Pluma y Nivel inferior .

Edicin y remodelado de imgenes:

Las imgenes aparecen seleccionadas por defecto con una delgada lnea azul. Haciendo clic en cualesquiera de sus nodos con la herramienta de Seleccin , podemos distorsionar el tamao, aunque no su forma. Pero si queremos cambiar el tamao conservando las proporciones, debemos utilizar la herramienta Escalar .

Al utilizarla, la imagen aparece seleccionada como muestra la figura. La imagen azul es la original, mientras que el burde punteado que sobresale, muestra el aumento de tamao que se est ejecutando, pero, ntese, este aumento es de modo PROPORCIONAL, tanto vertical como horizontalmente, siempre y cuando los cambios se hagan pinchando en los nodos de las esquinas.

Otra de las opciones que da la herramienta de escalar, es la de girar el objeto. Esto se consigue cuando se coloca el mouse entre dos nodos de la figura, y el cursor adopta la forma de una curva de giro.

En el nico caso en que se puede cambiar tanto el tamao como la FORMA original de las imgenes, es en el de las dibujadas mediante las herramientas de dibujo, y con la herramienta Nivel inferior

Insertar imgenes:
1- Men Insertar (Insert)> Imagen (Image). 2- Seleccionar la imagen que se va a insertar. 3- OK o Aceptar. Las imgenes se insertan con su tamao y peso original. En caso que el tamao del lienzo (canvas) difiera con el de la imagen, podemos arreglar esta diferencia mediante el comando Recortar (Trim) del men Modificar (Modify). En caso que las imgenes deban ser insertadas desde un Scanner, es aconsejable determinar la resolucin en 200 dpi, y no en 72, como es comn para resolucin web, ya que de esta manera se obtiene INICIALMENTE una imagen de buena calidad, la que despus puede ser optimizada para web.

Efectos:
Son aplicables tanto a las imgenes realizadas con las herramientas de dibujo, como a aquellas que insertamos desde fuera de Fireworks. Para aplicarlos debemos tener, primeramente, seleccionada la imagen a la que queremos aplicarlos, y luego ir al men Ventana(Window)> Efectos(Effect). Entonces aparecer esta ventana: En principio aparece sin ningn efecto seleccionado.

Pero al desplegar el men aparecern las opciones para optar por alguno de ellos, o por los efectos que se utilizan por defecto (use defaults).

Los efectos "por defecto" son cuatro: 1. Inner Bevel, 2. Outer Bevel 3. Drop Shadow, 4. Glow

Y cada uno de ellos posee un men desplegable (que se activa al hacer clic en la "i" azul que se ve en la imagen) para configurar en detalle cada uno de los efectos que se elijan.

Otra de las opciones para aplicar efectos es la de utilizar la "Librera de estilos", que se activa mediante el men Ventana (Window), y luego Estilos (Styles).

Fireworks tambin le da la posibilidad de crear sus propios estilos e incorporarlos a la lista de los que ya existen. Para eso debe partir de una imagen existente a la que Ud. le haya aplicado los distintos efectos y estilos que quiera incorporar. 1- Seleccionar la imagen. 2- Haga clic en el botn Estilo Nuevo (New Style) de la ventana de estilos:

Aparecer la ventana de Estilo nuevo, en la que Ud. podr elegir las propiedades que el nuevo estilo tomar de su imagen, y el nombre que tendr este nuevo estilo.

Optimizacin y exportacin de grficos simples:

Para la primera parte de este trabajo nos manejamos bsicamente con dos elementos que nos da Fireworks: las opciones de previsualizacin (preview), y las opciones de optimizacin. Tenemos hasta cuatro opciones de previsualizacin. De ellas, elegimos la que nos parezca ms apta como producto final.

En las opciones de optimizacin tenemos a mano los formatos en los cuales podemos optimizar la imagen, y algunas otras que hacen referencia a la calidad que tendr como resultado final. La combinacin que le demos a estas opciones es la que definir, en mayor o menor medida, una imagen de mxima calidad con el menor peso posible.

Una vez optimizada la imagen, slo falta exportarla a la carpeta que tengamos designada a tal efecto. Para eso vamos a ir al men Archivo (File)> Exportar (Export), o directamente al botn Exportar de la barra de herramientas superior. Luego seleccionamos la carpeta donde queremos guardar el archivo, le ponemos un nombre, y finalmente aceptar.

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

En este caso tenemos los dos objetos a utilizar: una elipse, que actuar de mscara, y la foto o imagen que queremos enmascarar.

Tomemos la precaucin de que la mscara (en este caso, la elipse) est por sobre el objeto a enmascarar.

Luego, aplicamos -Modificar (Modify)> -Mscara (Mask)> -Agrupar como mscara (Group as Mask).

En este caso, no importa el color de la imagen que vaya a actuar de mscara (aqu es la elipse), porque se encuentra SOBRE la imagen a enmascarar, pero ntese qu es lo que pasa cuando esta misma elipse se halla POR DEBAJO del objeto: En este caso, como la mscara era negra, la figura tom toda la escala de grises del color que tena debajo De ah podemos concluir que, cuando la mscara se halla por debajo del objeto, este adoptar la gama de colores que le defina la mscara. En la foto de la derecha, la mscara era color bord.

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

10

Por ejemplo, tenemos varias imgenes individuales que simulan la frecuencia de movimientos que tendr el gif animado final

Estas las pegamos, en un lienzo nuevo, una sobre otra pero perfectamente centradas.

Cuidando de tener seleccionadas TODAS las imgenes superpuestas, vamos a Ventana(Window)>Fotogramas(Frames). En esta ventana veremos que la imagen est an compuesta por un solo frame.

Entonces vamos, en esa misma ventana, al botn Distribuir en Ahora configuraremos los Frames (Distribute to frames), y "tiempos" de la animacin. veremos cmo, El primer aspecto a configurar automticamente, las imgenes es cuntas veces se repetir el que tenamos en uno solo, se efecto animado. En la parte distribuyen cada una en un inferior de la ventana frame distinto. Fotogramas (Frames), tenemos el botn que nos da las opciones de hacerlo hasta 20 veces, continuamente (Forever), o sin repeticin alguna.

11

Podemos tambin configurar la duracin del tiempo de los frames, individual o generalmente. Esto lo podemos hacer cliqueando dos veces en el nmero que aparece a la derecha de cada nmero de frame. Alli 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.

Otras opciones de configuracin: 1- Para agregar un frame. 2- Para eliminar el/los frame/s seleccionado/s.

12

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. Y ahora ... slo basta pedirle tres deseos ...

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.

Creacin y organizacin de capas:

"Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de una ilustracin que se dibujan en distintas hojas superpuestas transparentes. Cada objeto de un documento reside en una capa. Puede crear todas las capas antes de comenzar a dibujar o ir aadindolas cuando sea necesario. Tambin puede reorganizar el orden de apilamiento de las capas o de los objetos de una sola capa".(Manual Oficial de Macromedia)

La ventana que nos permite trabajar con las capas (layers), la podemos visualizar desde el men Ventana(Window)>Capas(Layers). Por defecto, el lienzo nos aparece con dos capas: la capa web, en donde posteriormente ubicaremos los objetos de zona interactiva; y la capa 1. Los objetos que Ud. vaya dibujando, aparecern por defecto en la capa 1, pero Ud. tiene la posibilidad de agregar ms capas mediante el botn Agregar capas. El hecho de trabajar en capas le dar la posibilidad de trabajar con diversos efectos.

En un documento recin abierto, inserte una foto. Esta aparecer en una capa independiente de la capa 1. Posicinese en la capa 1 haciendo clic sobre ella y dibuje una figura geomtrica cualquiera (recuerde que estamos probando), y luego colquela sobre la figura

13

. En el men desplegable que se muestra en la imagen, se pueden encontrar los efectos disponibles para trabajar en capas, pero no olvidemos que esto depender del color de la figura que usemos en la capa que actuar de mscara. Si hacemos clic en el ojo correspondiente a cada imagen, veremos que esta se o culta o se muestra, segn se oculte o aparezca el ojo. Y la presencia del lpiz junto a alguna imagen, nos indicar que se est trabajando o que se tiene seleccionada esa imagen.

Historial del documento:

"El panel Historial permite ver, cambiar y repetir el historial del documento. En este panel se enumeran las acciones ms recientes que se han realizado en Fireworks, conforme al nmero especificado en Pasos de deshacer". (Manual de Macromedia) O sea que con el historial podemos: 1- Deshacer y rehacer comandos frecuentes. 2- Seleccionar un nmero determinado de comandos realizados para repetirlos. 3- Seleccionar y guardar un grupo de comandos recientemente realizados, para guardarlo como un solo comando.

14

Abra la ventana del historial con el men Ventana(Window)> Historial(History). Ah podr ver las acciones que ha ido realizando, desde la primera a la ltima, de arriba hacia abajo. Si selecciona una de las acciones y luego presiona el botn Volver a reproducir (Replay), obviamente repetir esa accin.

Si selecciona una o ms acciones y luego presiona el botn Guardar como comando, aparecer una ventana en donde le pedir el nombre para el nuevo comando. Posteriormente, cuando vuelva a necesitar esa accin o conjunto de acciones, las encontrar agrupadas en un solo comando dentro del men Comando.

Bsqueda y reemplazo:
Nos falta hacer referencia ahora a la ventana de bsqueda y reemplazo, similar en tareas a las que encontramos en los procesadores de texto. La ventaja consiste en que podemos hacerlo con otros elementos, adems de texto: "Utilice Buscar y reemplazar para buscar y reemplazar elementos, como texto, valores URL, fuentes y color, en un documento. Con Buscar y reemplazar se puede buscar en el documento actual o en varios archivos a la vez. Durante el uso de Buscar y reemplazar, Fireworks puede efectuar un seguimiento y guardar un registro de cambios en el panel Historial del proyecto. Buscar y reemplazar slo funciona con archivos PNG de Fireworks o con archivos que contienen objetos vectoriales, como archivos FreeHand, CorelDRAW e Illustrator". (Manual de Macromedia) La ventana de Bsqueda y reemplazo aparece desde el men Ventana(Window)>Buscar y reemplazar(Find and replace).

Smbolos e instancias:

15

"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. Se puede crear un smbolo a partir de cualquier objeto, texto o grupo. Los smbolos pueden incluir otros smbolos". (Manual de Macromedia) Para crear un smbolo vamos a Insertar(Insert)> Nuevo smbolo(New Symbol), y entonces aparece la ventana en donde aparecen dos opciones: 1- Para elegir si el smbolo ser un grfico o un botn. 2- Para darle el nombre a ese smbolo.

En el caso de optar por un grfico, la ventana que aparecer, ser casi idntica a la del lienzo comn de trabajo, con todas las posibilidades que esta brinde. En el caso de optar por un botn, la ventana de trabajo para este, aparece con las opciones para determinar su apariencia en cada una de las instancias. Instancias de 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 referencia.

Ambos tipos de smbolos quedan almacenados dentro de la Librera(Library) que se halla en el men Ventana(Window).

16

Tanto botones como grficos, pueden ser utilizados varias veces sin necesidad de repetir su elaboracin. Bastar seleccionar el que necesitemos dentro de la Librera, y transportarlo con el mouse hasta el lienzo.

Creacin de zonas interactivas y mapas de imagen:

"Al acceder a la pgina principal de la mayora de sedes Web, lo ms probable es que encuentre un mapa de imgenes. Un mapa de imagen es un grfico o grupo de grficos que aparece en una pgina Web y que dispone de reas especiales denominadas zonas interactivas. La ubicacin y el tamao de la zona interactiva se definen en el archivo HTML de la pgina Web. Al desplazar el cursor sobre una zona interactiva, ste adquiere la forma de una mano pequea. Normalmente, al hacer clic en una zona interactiva se abre una pgina Web y para esto, se hace referencia a la direccin URL que se le ha asignado en el cdigo HTML. El proceso de creacin de un mapa de imagen en Fireworks sigue estos tres pasos generales: Creacin del mapa de imagen en el documento PNG de Fireworks Exportacin del grfico y de los archivos HTML Ubicacin del HTML del mapa de imagen en la posicin adecuada de la sede Web o en otro archivo HTML". (Manual Oficial de Macromedia) Para crear un mapa de imagen es necesario, primeramente, elegir un grfico de origen, que puede ser una serie de botones, ventanas, una lista de ttulos o cualquier imagen desde la que se determinarn las zonas interactivas que compondrn el mapa de imagen. El archivo PNG de Fireworks en el que se crea el mapa de imagen no es el mapa de imagen en s. Para crear un mapa de imagen en un navegador Web, es preciso combinar el grfico exportado y los archivos HTML.

Para crear las zonas interactivas tenemos la herramienta Zona interactiva en cualquiera de sus tres modalidades segn la zona que deseemos sea cuadrangular, circular o poligonal. Posteriormente, la asignacin de vnculos (valores URL) a esas zonas, se har mediante la ventana correspondiente, que aparece al dar doble clic sobre la zona interactiva

En esta ventana aparecen las opciones para: 1- Determinar la direccin URL. 2- Determinar el texto que aparecer en el Alt con el mouse. 3- Determinar el modo en que se abrir la ventana (self, blank, etc) 4- El color a utilizar en la mscara web. 5- La forma que le daremos a la mscara web.

Introduccin de valores URL absolutos o relativos:

Los valores URL que se introducen en el inspector Objeto o en el panel URL pueden ser absolutos (externos) o relativos (internos): Si desea establecer un vnculo con una pgina Web que no pertenezca a su sitio Web, debe utilizar una direccin URL absoluta. Para establecer un vnculo con una pgina Web de su sitio Web, puede utilizar una direccin URL absoluta o relativa. Los valores URL absolutos (externos) son direcciones URL completas que incluyen el protocolo de servidor, que suele ser http:// en el caso de pginas Web. Por ejemplo,

17

http://www.macromedia.com/support/fireworks es la direccin URL absoluta de la pgina Web de asistencia tcnica de Macromedia Fireworks. Aunque los valores URL absolutos son siempre direcciones exactas que no dependen de la ubicacin del documento origen, los vnculos no se establecen correctamente si se traslada el documento de destino. Los valores URL relativos (internos) estn relacionados con la carpeta que contiene el documento origen. Los valores URL relativos suelen ser los ms fciles de utilizar para establecer un vnculo con archivos que van a permanecer en la misma carpeta que el documento actual.

Barras de navegacin:

1- Cree un botn con todas sus instancias. 2- Luego pase a crear el grfico de fondo sobre el que irn los botones, o sea, el "cuerpo" de la botonera. 3- Distribuya los botones sobre el grfico y adapte el tamao del lienzo al de la botonera. 4- Agregue los links correspondientes a los botones.

Exportacin como HTML:

5- Haga clic en la herramienta de exportacin y fjese que est seleccionada la opcin de exportar usando los "slices" y en estilo HTML.

6- Si usa Dreamweaver como programa de html, encontrar la herramienta de Fireworks HTML , al presionarla, se abrir una ventana de dilogo en donde deber incluir el HTML creado en Fireworks, para luego darle el OK

18

Importacin con zonas de divisin:

"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. - Pueden crearse rollovers con divisiones".(Manual de Macromedia) Vamos a tomar como ejemplo una imagen ya optimizada que pesa 40,7 Kb. Tomemos en cuenta que la medida de peso idealpara un HTML, con imgenes y todo, es de 50 Kb. Por tanto nos encontramos ante una imagen realmente "pesada". Si a esto le sumamos que, en este ejemplo, NO QUEREMOS bajarle la calidad, tenemos en manos un problema, pues el el HTML que contenga esta foto va a tardar en bajar, y no queremos que el usuario se canse de esperar y cambie de pgina.

Hay que mencionar dos puntos ms a propsito de las divisiones: 1- Existe la herramienta de Divisin poligonal , en caso que las divisiones no sean exactamente cuadrangulares. 2- Las zonas poligonales pueden actuar como zonas interactivas, en el sentido que se les puede asignar tambin vnculos URL.

Rollovers simples:

19

Los botones tienen como una de sus caractersticas principales la posibilidad de vincular direcciones URL, ya que incluyen una zona interactiva especialmente para estos casos. Pro esta zona interactiva, por defecto e invariablemente, mantiene una forma rectangular. De modo que, si yo deseo que el botn realice un rollover de color o imagen, la otra forma o imagen a utilizar, deber tener tambin esta forma. Qu pasa en los casos en que necesito un botn circular con algn efecto? Recurro a la creacin de un rollover simple. Para esto debemos tener, en primer lugar, las dos imgenes que actuaran cada una en un FRAME distinto. Luego, posicionados en el frame que mostrar la imagen por defecto del rollover, voy a Ventana>Comportamiento (behaviors). Enseguida el programa nos preguntar si queremos aplicar el rollover 1) A toda la imagen o 2) A slo una parte. Como el rollover que estamos armando es uno simple, elegimos la opcin 1

A continuacin cliqueamos en el signo "+" de la misma ventana, y nos pasar a mostrar la accin que queremos que realice. Por defecto, nos marcar el evento "Mouse Over", que es cuando el mouse est sobre la imagen. Es entonces cuando se ejecutar el rollover.

20