ManualdeFireworks]

JulioCsarHernndezHernndez

Estemanualcontienetodoloqueserecibienel
cursodeOperacinRedenelaode2007

INDICE

N NOMBRE
pgina
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

JulioCsarHernndezHernndez
3

Descripcin
Fireworks es una herramienta que puede utilizarse para crear, editar y animar
grficos web, aadir interactividad avanzada y optimizar imgenes en entornos
profesionales. En Fireworks es posible crear y modificar imgenes vectoriales y
de mapa de bits en una sola aplicacin. Todo es modificable en todo momento.
Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de
cambio y actualizacin que de otra forma exigiran una enorme dedicacin.

Objetivos
Aprender a utilizar fireworks en el diseo, edicin y animacin de
grficos web.
Integrar los elementos producidos con otras herramientas de diseo de
pginas.
Inspector De Propiedades
Es un panel que vara segn el contexto y que muestra las propiedades de la
seleccin 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 tambin puede contraerse en su totalidad aunque
permanezca en el espacio de trabajo.
4

Para expandir el Inspector de propiedades de media altura a altura completa y

ver otras opciones:
Haga clic en la flecha de ampliacin 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 ampliacin o el ttulo 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 fcil acceso a muchos comandos.

El panel Herramientas est organizado en seis categoras:
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 aplicacin emplea la herramienta
correctamente.
El panel Herramientas contiene docenas de
herramientas, algunas de las cuales estn agrupadas, tal
como se ilustra. Los grupos de herramientas se identifican
por el pequeo tringulo situado en la esquina inferior
derecha de la herramienta. Haga clic en una herramienta
para seleccionarla. De forma alternativa, puede pulsar las
teclas de mtodo abreviado para cambiar rpidamente de
herramienta.
Nota: Puede ver el mtodo abreviado de cada tecla si
coloca el cursor sobre el cono de la herramienta en el
panel Herramientas, y espera a que aparezca el rtulo
correspondiente. El mtodo abreviado es la letra que
aparece tras el nombre de la herramienta.

Seleccin de una herramienta en un grupo de herramientas
5

Cuando en el ngulo inferior derecho de una herramienta del panel

Herramientas aparece un tringulo pequeo, indica que la herramienta forma
parte de un grupo. Por ejemplo, la herramienta Rectngulo forma parte del
grupo de herramientas bsicas de forma, que tambin incluye las herramientas
Rectngulo Redondeado, Elipse y Polgono.

Para elegir otra herramienta de un grupo de herramientas:
1. Haga clic en el cono de la herramienta y mantenga presionado el botn
del ratn. Aparece un men emergente con los conos, los nombres y las
teclas de mtodo abreviado de las herramientas. La herramienta
actualmente seleccionada lleva una marca de seleccin a la izquierda del
nombre.
2. Arrastre el puntero para resaltar la herramienta que desee y suelte el
botn del ratn. La herramienta elegida aparece en el panel
Herramientas y sus opciones se indican en el Inspector de propiedades.
Nota: La funcin de algunas herramientas cambia segn se editen objetos
vectoriales o de mapa de bits.

MONTAGEDEUNAIMAGENSOBREOTRA
Primeraforma:

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
6

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

7. Luego pinchamos la pestaa seleccionar y elegimos seleccionar inverso









8. Nos quedar seleccionada la imagen y el cuadro





8

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

10. Elegimos en las herramientas de Mapa de Bits La Barita Mgica







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






9

12. 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 pestaa
ventana de la barra de men, seleccionar mosaico vertical para arrastrar la
imagen diseada y colocarla sobre la ltima imagen importada
La imagen quedar de la siguiente manera
10

Segunda forma:
1. Se edita la imagen
2. Se selecciona

3. Selecciona exportar rea
11

4. Se da clic en Exportar rea

5. Aadir color a la transparencia
6. La imagen queda de la siguiente manera
7. Luego exportar
12

8. Le asignamos un nombre
9. Lo exportamos como HTML e imagen
10. Clic en exportar

COMOHACERUNESCUDO
EjercicioN2
1- Elegir el tamao del lienzo
2- En el bloque de vector seleccionar la opcin
elipse.
3- Dibujamos un elipse en el lienzo de manera
que quede de la siguiente manera






13

4- Encima de la elipse, dibujamos lneas con la herramienta lnea, en el

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

5- Luego encima de las lneas que creamos dibujamos otro elipse ms
pequeo que el primero y lo colocamos de modo que quede as











6- Despus de hacer esto
dibujamos una estrella desde el
bloque vector.

14

7-Dibujamos la estrella encima
de la elipse que creamos antes
as:

8-Despus de crear la estrella la
seleccionamos y le damos clic
en la opcin puntos y lo
movemos hasta que quede de
cuatro puntos como la
siguiente.







9-Luego de ponerle las cuatro puntas damos clic en la opcin radio y lo
movemos de modo que la estrella se vea ms delgada

Como la siguiente:

15

10-Luego de hacer lo anterior seleccionamos la opcin escala del bloque

seleccionar y rotamos la estrella de la siguiente forma.

Despus 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

16

1. IMPORTAR IMAGEN
2. SELECCIONAR
IMAGEN



3. Con un crculo


















4. Seleccionar toda la imagen y en edicin cortar y pegar dentro


17

5. Queda como sigue











6. As quedar


7. En sombrear e iluminar Agregar sombra

8. De la siguiente manera










18

COMO CEAR UN BOTON ANIMADO
*Primero damos clic en Edicin
*Despus en Insertar
*Luego en la opcin Nuevo Botn
*Aparecer una pantalla diferente al lienzo anterior


En la pantalla en
blanco que
aparece
debemos dibujar
una forma, la
que queramos
en esta ocasin
un rectngulo.







Luego usamos la herramienta texto y escribamos por ejemplo
Home, En el inspector de propiedades le damos color al rectngulo y al
texto si lo desea, luego debemos dar clic en la opcin seleccionar y
damos clic en la opcin 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
19

apariencia del rectngulo y el texto, como se muestra en la imagen

siguiente, luego de modificarlo damos clic en el botn Listo. Y aparecer
en el lienzo como un botn GIF.
Para ver el efecto del botn debemos dar clic en la opcin Vista Previa y
pasamos el cursor del mouse y vemos que cambia del color que tenia de
primero (azul) al color que colocamos despus (verde).

Rollovers en dos
objetos.

Primero dibujamos un rectngulo
como un botn en la pgina
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 opcin Fotograma y
Historial, damos clic en el botn 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 opcin
Herramienta divisin y marcamos exactamente el entorno del rectngulo que
creamos y luego el de la imagen.





Las imgenes quedaran de la
siguiente forma. Sealamos el
20

rectngulo para que cambie el botn blanco a la parte izquierda .

Luego en una de las imgenes
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.


Despus damos clic en Fotograma 2 y ahora ya no aparecer el lienzo vaco
hay como una replica de las imgenes 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
21

1.Editar el botn como lo hicimos en los pasos anteriores

2.luego le damos clic en la parte blanca del centro del botn

3.Seleccionamos aadir comportamiento Intercambiar imagen, nos
muestra la siguiente ventana

4.Clic en la carpeta amarilla
22

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

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

7.Presionamos F12 para ver el botn en el explorador

Esta imagen es la que insertamos, y es la que muestra al poner el ratn
sobre el botn
COMO PONERLE TEXTO AL BOTN
1. Seguimos todos los pasos anteriores

2. Damos clic en la parte blanca y seleccionamos Aadir men
emergente, como sigue

3. Aparecer la siguiente ventana, note que la ventana contiene las
siguientes vietas: contenido, aspecto, avanzado y posicin
Todas tienen que ser editadas
24

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













25

Cuando ya estamos en posicin, que contiene el lugar donde queremos
el texto, presionamos listo, F12 para ver en explorador, nos muestra la
siguiente ventana








26

MENSAJE EN LA BARRA DE ESTADO
1. Hacemos todo igual que el anterior, seleccionamos aadir 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:
27

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.

28

5. Nos aparecer la siguiente ventana

6. Aqu introduciremos el texto que deseamos que aparezca en la imagen.

7. Despus de introducir el texto, damos clic en aceptar; presionamos F12
para ver cmo queda en el explorador.



NOTA: Para exportar la animacin anterior a DW hacer los pasos que estn en
la pgina 31.

MENU EMERGENTE CON UNA IMAGEN

Primera forma
1-El primer paso es insertar una imagen en Fireworks.
29

2-Herramienta Divisin, que se encuentra en el
panel de herramientas de Fireworks, de modo que
nos quede de la siguiente forma.

3-Luego en la pestaa Comandos de la barra
de men, seleccionamos Web y despus
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.





30

Segunda Forma
Al seleccionar la imagen con la Herramienta Divisin, 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 animacin de Fireworks a Dreamweaver
1 forma:
Primero creamos la animacin, en este caso, un botn animado en Fireworks,
luego damos clic en Archivo,
despus en Exportar y aparecer el
siguiente cuadro donde
guardaremos la animacin.
En la zona del cuadro que dice
exportar debemos seleccionar
HTML e imgenes, le ponemos un
nombre a la animacin y damos
clic en Exportar.




31

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 extensin HTML, en
este caso animacin1,
damos clic en Abrir y
luego en Aceptar y ya
tenemos la animacin en
DW, ahora al presionar
F12, veremos la
animacin en el
explorador.





32

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 seleccin.
4. Luego seleccionamos Exportar rea.

5. Nos aparece la siguiente ventana.



33

6. Damos clic en el botn de en medio Aadir color a la transparencia

7. La imagen quedar como sigue:

8. Damos clic en exportar.

9. Nombramos el botn, exportamos como HTML e
imgenes.
10. Damos clic en exportar.
11. Es importante que cuando estemos editando la
imagen optimicemos.