Revista Compus24 Fireworks-Jose de La Rosa Vidal-Http://jose-De-La-Rosa - Blogspot.com

Guia del Usuario Revista Compus Practicas Fireworks
INDIC
E
Nº NOMBRE
1. DESCRIPCION DE FIREWOKS
2. OBJETIVOS
3. INSPECTOR DE PROPIEDADES
4. PANEL DE HERRAMIENTAS
5. MONTAGE DE UNA IMAGEN SOBRE OTRA
6. COMO HACER UN ESCUDO
7. EDICION DE LA MEDIA LUNA
8. COMO CREAR UN BOTON ANIMADO
9. INTRODUCIR IMAGEN AL BOTON
10 TEXTO EN EL BOTON
11 ROLLOVERS EN DOS OBJETOS
12 MENSAJE EN LA BARRA DE TAREAS
13 MENU EMERGENTE
14 EXPORTAR UNA ANIMACION A DW
Prof. José de La Rosa Página 1

Descripción
Fireworks es una herramienta que puede utilizarse para crear, editar y
animar gráficos web, añadir interactividad avanzada y optimizar
imágenes en entornos profesionales. En Fireworks es posible crear y
modificar imágenes vectoriales y de mapa de bits en una sola aplicación.
Todo es modificable en todo momento. Y el flujo de trabajo puede
automatizarse para satisfacer las necesidades de cambio y actualización
que de otra forma exigirían una enorme dedicación.
Objetivos
• Aprender a utilizar fireworks en el diseño, edición y
animación de gráficos web.
• Integrar los elementos producidos con otras herramientas de

diseño de páginas.
Inspector De Propiedades
Es un panel que varía según el contexto y que muestra las propiedades
de la selección actual, las opciones de la herramienta seleccionada o las
propiedades del documento. De forma predeterminada, el Inspector de
propiedades está acoplado en la parte inferior del espacio de trabajo.
Como se observa en la figura del entorno.
El Inspector de propiedades puede abrirse a media altura con lo

que se muestran dos filas de propiedades.
O puede abrirse por completo, con lo que se muestran cuatro

filas.

El Inspector de propiedades también puede contraerse en su totalidad

aunque permanezca en el espacio de trabajo.
Para expandir el Inspector de propiedades de media altura a altura
completa y ver otras opciones:
• Haga clic en la flecha de ampliación situada en el ángulo inferior

derecho del Inspector de propiedades.
• Haga clic en el ícono del ángulo superior derecho del
Inspector de propiedades y elija Altura completa en el menú de
opciones del Inspector de propiedades.
Nota: El menú de opciones está disponible únicamente cuando el

Inspector de propiedades está acoplado.
Para contraer el Inspector de propiedades cuando está

acoplado:
• Haga clic en la flecha de ampliación o el título del

Inspector de propiedades.
• Elija Contraer grupo de paneles en el menú de
opciones del
Inspector de propiedades.
Panel Herramientas
El panel Herramientas contiene las herramientas necesarias para
crear, seleccionar y modificar objetos. Las
barras de herramientas Principal y Modificar proporcionan
fácil acceso a muchos comandos.
El panel Herramientas está organizado en seis

categorías:
1.Seleccionar, 2.Mapa de bits, 3.Vector,
4.Web,
5.Colores y 6. Ver. Basta con elegir una
herramienta y comenzar a utilizarla. La aplicación
emplea la herramienta correctamente.
El panel Herramientas contiene docenas

de herramientas, algunas de las cuales están
agrupadas, tal como se ilustra. Los grupos de
herramientas se identifican por el pequeño triángulo
situado en la esquina inferior derecha de la
herramienta. Haga clic en una herramienta para
seleccionarla. De forma alternativa, puede pulsar las

teclas de método abreviado para cambiar

rápidamente de herramienta.
Nota: Puede ver el método abreviado de cada tecla

si coloca el cursor sobre el ícono de la herramienta
en el panel Herramientas, y espera a que aparezca el
rótulo correspondiente. El método abreviado es la
letra que aparece tras el nombre de la herramienta.
Selección de una herramienta en un grupo de herramientas

Cuando en el ángulo inferior derecho de una herramienta del
panel Herramientas aparece un triángulo pequeño, indica que la
herramienta forma parte de un grupo. Por ejemplo, la herramienta
Rectángulo forma parte del grupo de herramientas básicas de forma, que
también incluye las herramientas Rectángulo Redondeado, Elipse y
Polígono.
Para elegir otra herramienta de un grupo de

herramientas:
1. Haga clic en el ícono de la herramienta y mantenga presionado el

botón del ratón. Aparece un menú emergente con los íconos, los
nombres y las teclas de método abreviado de las
herramientas. La herramienta actualmente
seleccionada lleva una marca de selección a la izquierda del
nombre.
2. Arrastre el puntero para resaltar la herramienta que desee y
suelte el botón del ratón. La herramienta
elegida aparece en el panel
Herramientas y sus opciones se indican en el Inspector de
propiedades.
Nota: La función de algunas herramientas cambia según se editen

objetos vectoriales o de mapa de bits.

MONTAGE DE UNA IMAGEN
SOBRE OTRA
Primera forma:
1. Elegir pixeles del lienzo del nuevo documento

2. Elegir archivo, de la barra de menú y seleccionar importar
3. Seleccionar la imagen que deseamos editar
4. La colocamos en el lienzo y quedará como sigue
5. Elegimos en el Bloque de Mapa de Bits, la herramienta

“Herramienta
Lazo(L)
6. Luego seleccionamos el contorno de la imagen con la Herramienta

Lazo y esta quedará como sigue

7. Luego pinchamos la pestaña seleccionar y elegimos “seleccionar

inverso”
8. Nos quedará seleccionada la imagen y el cuadro

9. Luego le presionamos la tecla suprimir, y nos quedará como sigue
10. Elegimos en las herramientas de Mapa de Bits “La Barita Mágica
11. Se da clic en el contorno que queremos eliminar, y la imagen

queda como sigue.
Elegimos en las herramientas de Mapa Bits, “Borrador” y con este

quitamos el contorno.
13. La imagen quedará como sigue:

En el siguiente paso hay que introducir un documento nuevo, importar

una imagen que desea que fuese el fondo e insertarla; luego iremos a la
pestaña ventana de la barra de menú, seleccionar “mosaico vertical” para
arrastrar la imagen diseñada y colocarla sobre la última imagen
importada
La imagen quedará de la siguiente manera:

Segunda forma:
1. Se edita la imagen
2. Se selecciona
3. Selecciona exportar área:
4. Se da clic en Exportar área

5. Añadir color a la transparencia
6. La imagen queda de la siguiente manera
7. Luego exportar
8. Le asignamos un nombre
9. Lo exportamos como HTML e imagen
10. Clic en exportar

COMO HACER UN
ESCUDO
Ejercicio Nº 2
1- Elegir el tamaño del lienzo
2- En el bloque de vector seleccionar la

opción elipse.
3- Dibujamos un elipse en el lienzo de

manera que quede de la siguiente
manera
4- Encima de la elipse, dibujamos líneas con la herramienta línea, en el

bloque de vectores, de manera que se vea de la siguiente forma

5- Luego encima de las líneas que creamos dibujamos otro elipse más
pequeño que el primero y lo colocamos de modo que quede así
6- Después de hacer esto

dibujamos una estrella desde el
bloque vector.

7-Dibujamos la estrella encima de

la elipse que creamos antes así:
8-Después de crear la estrella la

seleccionamos y le damos clic
en la opción puntos y lo movemos
hasta que quede de cuatro puntos
como la siguiente.
9-Luego de ponerle las cuatro puntas damos clic en la opción radio y lo

movemos de modo que la estrella se vea más delgada
Como la siguiente:

10-Luego de hacer lo anterior seleccionamos la opción escala del bloque

seleccionar y rotamos la estrella de la siguiente forma.
Después de haber hecho todos los pasos el

escudo debe de quedarnos de la siguiente
forma.
EJERCICIOS DEL DIA 18/08/07
PARA HACER LA MEDIA LUNA

EJERCICIO Nº 2
1. IMPORTAR IMAGEN
2. SELECCIONAR
IMAGEN
3. Con un círculo
4. Seleccionar toda la imagen y en edición cortar y pegar dentro


5. Queda como sigue
6. Así quedará
7. En sombrear e iluminar Agregar sombra
8. De la siguiente manera

COMO CEAR UN BOTON ANIMADO
*Primero damos clic en Edición
*Después en Insertar
*Luego en la opción Nuevo Botón
*Aparecerá una pantalla diferente al lienzo anterior
En la pantalla en
blanco que
aparece
debemos dibujar
una forma, la
que queramos
en esta ocasión
un rectángulo.
Luego usamos la herramienta texto y escribamos por ejemplo

“Home”, En el inspector de propiedades le damos color al rectángulo y al
texto si lo desea, luego debemos dar clic en la opción seleccionar y
damos clic en la opción seleccionar todo y luego lo copiamos, luego en la
pantalla damos clic en la ficha Sobre, y aparecerá otra pantalla en
blanco, en esa pantalla debemos pegar lo que copiamos y modificamos la

apariencia del rectángulo y el texto, como se muestra en la

imagen siguiente, luego de modificarlo damos clic en el botón
Listo. Y aparecerá en el lienzo como un botón GIF.
Para ver el efecto del botón debemos dar clic en la opción

Vista Previa y pasamos el cursor del mouse y vemos que
cambia del color que tenia de
primero (azul) al color que colocamos después (verde).
Rollovers en dos
objetos.
Primero dibujamos un
rectángulo como un
botón en
lapágina anterior,
luego
importamos una
imagen de modo que el lienzo quede de la
siguiente
forma luego en el panel de la derecha
de
la
pantalla seleccionamos la opción Fotograma
y
Historial, damos clic en el botón Nuevo
fotograma y se agregará un nuevo
fotograma en el panel de fotogramas y
luego damos clic en Fotograma 1 y
volveremos al lienzo donde tenemos las dos
figuras creadas anteriormente.
Luego damos clic en la Barra de herramientas en la parte de Web

en la opción Herramienta división y marcamos exactamente el
entorno del rectángulo que creamos y luego el de la imagen.

Las imágenes quedaran de la siguiente forma. Señalamos el

rectángulo para que cambie el botón blanco a la parte izquierda .
Luego en una de las

imágenes quedó un punto blanco debemos dar clic en él y arrastrarlo
hasta la otra luego nos dará un mensaje donde nos pregunta si
queremos Intercambiar una imagen con el fotograma 2, le damos
clic en Aceptar.
Después damos clic en Fotograma 2 y ahora ya no aparecerá el

lienzo vacío hay como una replica de las imágenes que creamos en
el Fotograma 1, bueno ahora hay que seleccionar la herramienta
Texto y escribimos Byciclet en el segundo cuadro del lienzo de la
siguiente forma:
Luego volvemos al Fotograma 1 y presionamos la tecla F12

para ver los efectos creados.

COMO INTRODUCIR UNA IMAGEN AL BOTON
1. Editar el botón como lo hicimos en los pasos anteriores
2.luego le damos clic en la parte blanca del centro del botón
3.Seleccionamos “añadir comportamiento Intercambiar imagen”, nos

muestra la siguiente ventana
4.Clic en la carpeta amarilla

5.Buscamos la imagen que deseamos colocar y nos aparece la siguiente

ventana
6.Damos clic en aceptar y nos queda como sigue

7.Presionamos F12 para ver el botón en el explorador
Esta imagen es la que insertamos, y es la que muestra al poner el ratón

sobre el botón
COMO PONERLE TEXTO AL BOTÓN
1. Seguimos todos los pasos anteriores
2. Damos clic en la parte blanca y seleccionamos “Añadir menú

emergente, como sigue
3. Aparecerá la siguiente ventana, note que la ventana contiene las

siguientes viñetas: contenido, aspecto, avanzado y posición
Todas tienen que ser editadas

4. En la parte del texto digitamos lo requerido presionamos siguiente

Cuando ya estamos en posición, que contiene el lugar donde queremos

el texto, presionamos listo, F12 para ver en explorador, nos muestra la
siguiente ventana

MENSAJE EN LA BARRA DE ESTADO
1. Hacemos todo igual que el anterior, seleccionamos añadir mensaje

de Barra de estado
2. Digitamos lo que queremos que aparezca en la barra de estado
3. F12 para ver en el explorador y nos muestra lo siguiente:

MENU EMERGENTE
1. Editamos la imagen
2. De la barra de menú seleccionamos comandos.
3. De comandos seleccionamos web.
4. De web seleccionamos definir texto ALT.

5. Nos aparecerá la siguiente ventana
6. Aquí introduciremos el texto que deseamos que aparezca en la imagen.
7. Después de introducir el texto, damos clic en aceptar; presionamos F12

para ver cómo queda en el explorador.
NOTA: Para exportar la animación anterior a DW hacer los pasos que están en
la página 31.
MENU EMERGENTE CON UNA IMAGEN
Primera forma
1-El primer paso es insertar una imagen en Fireworks.

2-Herramienta División, que se encuentra en el

panel de herramientas de Fireworks, de modo que
nos quede de la siguiente forma.
3-Luego en la pestaña Comandos de la barra

de menú, seleccionamos Web y después
Definir texto ALT.
4-Aparecerá el siguiente cuadro

donde escribiremos el Texto ALT.
5-Damos clic en Aceptar.
6-Al presionar F12 veremos en el

explorador al pasar el cursor del
mouse sobre la imagen el Texto
ALT que colocamos a la imagen.

Se
gu
nd
a
Fo
rm
a
Al seleccionar la imagen con la Herramienta División, el

inspector de propiedades cambia de forma, hay una parte
donde dice “Alt:” allí escribimos el texto ALT, presionamos la
tecla Enter y lo vemos en el explorador para ver el Texto ALT.
NOTA: El texto que queramos poner en el inspector no tiene

limite podemos digitar o pegar todo el texto que queramos y
el resultado será el mismo.
Insertar una animación de Fireworks a Dreamweaver
1º forma
Primero creamos la animación, en este caso, un botón animado

en Fireworks, luego damos clic
en Archivo,
después en Exportar
y aparecerá el
siguiente
cuadro
donde guardaremos la
animación.
En la zona del cuadro

que dice exportar
debemos
seleccionar HTML e
imágenes, le ponemos

un nombre a la
animación y damos
clic en Exportar.

Cuando ya estamos en DW damos clic

en el Menú Insertar y seleccionamos
Objetos de imagen, luego HTML de
Fireworks.
Y aparecerá el
siguiente cuadro donde
debemos dar clic en
Examinar.
Luego aparecerá este

cuadro, donde debemos
seleccionar el archivo con
la extensión HTML, en
este caso animación1,
damos clic en Abrir y
luego en Aceptar y ya
tenemos la animación en
DW, ahora al presionar
F12, veremos la
animación en el
explorador.

2º Forma:
1. Editamos la imagen en FW.
2. En la barra de herramientas seleccionar se encuentra Exportar área.
3. Seleccionamos la imagen y le damos clic derecho sobre la selección.

4. Luego seleccionamos Exportar área.
5. Nos aparece la siguiente ventana.

INST. PART. “ROMA” Practicas Firework
6. Damos clic en el botón de en medio “Añadir color a la

transparencia”
7. La imagen quedará como sigue:
8. Damos clic en exportar.
9. Nombramos el botón, exportamos como

HTML e imágenes.
10. Damos clic en exportar.
11. Es importante que cuando estemos
editando la imagen optimicemos.
Prof. Hugo Michel Orihuela Página 35

Gifts 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 las pegamos, en

un lienzo nuevo, una
sobre otra pero
Cuidando de tener seleccionadas TODAS
perfectamente
las imágenes superpuestas, vamos a
centradas.
Ventana(Window)>Fotogramas(Frames).
En esta ventana veremos
que la imagen está
aún compuesta por un solo frame.
Entonces vamos, en esa misma Ahora configuraremos los

ventana, al botón Distribuir en "tiempos" de la animación.
Frames (Distribute to frames), y El primer aspecto a configurar es
veremos cómo, cuántas veces se repetirá el
automáticamente, las imágenes efecto animado. En la parte

que teníamos en uno solo, se inferior de la ventana

distribuyen cada una en un Fotogramas (Frames), tenemos
frame distinto. 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 cliqueando dos veces en el número
que aparece a la derecha de cada número de
frame. Alli 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.

Otras opciones de configuración:

1- Para agregar un frame.
2- Para eliminar el/los frame/s seleccionado/s.
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. Y ahora ... sólo basta pedirle tres
deseos ...
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.

Revista Compus24 Fireworks-Jose de La Rosa Vidal-Http://jose-De-La-Rosa - Blogspot.com

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Revista Compus24 Fireworks-Jose de La Rosa Vidal-Http://jose-De-La-Rosa - Blogspot.com

Hochgeladen von

Copyright:

Verfügbare Formate

Guia del Usuario Revista Compus Practicas Fireworks

5. MONTAGE DE UNA IMAGEN SOBRE OTRA

6. COMO HACER UN ESCUDO

7. EDICION DE LA MEDIA LUNA

8. COMO CREAR UN BOTON ANIMADO

9. INTRODUCIR IMAGEN AL BOTON

11 ROLLOVERS EN DOS OBJETOS

12 MENSAJE EN LA BARRA DE TAREAS

14 EXPORTAR UNA ANIMACION A DW

Prof. José de La Rosa Página 1

• Integrar los elementos producidos con otras herramientas de

El Inspector de propiedades puede abrirse a media altura con lo

O puede abrirse por completo, con lo que se muestran cuatro

Prof. José de La Rosa Página 2

El Inspector de propiedades también puede contraerse en su totalidad

• Haga clic en la flecha de ampliación situada en el ángulo inferior

Nota: El menú de opciones está disponible únicamente cuando el

Para contraer el Inspector de propiedades cuando está

• Haga clic en la flecha de ampliación o el título del

El panel Herramientas está organizado en seis

El panel Herramientas contiene docenas

Prof. José de La Rosa Página 3

teclas de método abreviado para cambiar

Nota: Puede ver el método abreviado de cada tecla

Selección de una herramienta en un grupo de herramientas

Para elegir otra herramienta de un grupo de

1. Haga clic en el ícono de la herramienta y mantenga presionado el

Nota: La función de algunas herramientas cambia según se editen

Prof. José de La Rosa Página 4

MONTAGE DE UNA IMAGEN

1. Elegir pixeles del lienzo del nuevo documento

5. Elegimos en el Bloque de Mapa de Bits, la herramienta

6. Luego seleccionamos el contorno de la imagen con la Herramienta

Prof. José de La Rosa Página 5

7. Luego pinchamos la pestaña seleccionar y elegimos “seleccionar

8. Nos quedará seleccionada la imagen y el cuadro

Prof. José de La Rosa Página 6

9. Luego le presionamos la tecla suprimir, y nos quedará como sigue

10. Elegimos en las herramientas de Mapa de Bits “La Barita Mágica

11. Se da clic en el contorno que queremos eliminar, y la imagen

Prof. José de La Rosa Página 7

queda como sigue.

Elegimos en las herramientas de Mapa Bits, “Borrador” y con este

13. La imagen quedará como sigue:

Prof. José de La Rosa Página 8

En el siguiente paso hay que introducir un documento nuevo, importar

La imagen quedará de la siguiente manera:

Prof. José de La Rosa Página 9

3. Selecciona exportar área:

4. Se da clic en Exportar área

Prof. José de La Rosa Página 10

5. Añadir color a la transparencia

6. La imagen queda de la siguiente manera

9. Lo exportamos como HTML e imagen

10. Clic en exportar

Prof. José de La Rosa Página 11

2- En el bloque de vector seleccionar la

3- Dibujamos un elipse en el lienzo de

4- Encima de la elipse, dibujamos líneas con la herramienta línea, en el

Prof. José de La Rosa Página 12

6- Después de hacer esto

Prof. José de La Rosa Página 13

7-Dibujamos la estrella encima de