Você está na página 1de 77

Sumrio

INTRODUO......................................................................................................................... 1
CRIAR UM NOVO DOCUMENTO DE TRABALHO.............................................................2
CONHECER OS BOTES DE CONTROLE.......................................................................3
CONHECER AS FERRAMENTAS DE DESENHO E SELEO DE CORES............................3
CONHECER AS JANELAS AUXILIARES............................................................................4
ABRIR ARQUIVOS......................................................................................................... 5
Conhecer e utilizar a ferramenta Brush (Pincel);..................................................................7
CONHECER ALGUNS DOS VRIOS ESTILOS DE LINHAS EXISTENTES;...........................7
FERRAMENTA BRUSH(PINCEL).................................................................................... 7
CONHECER ALGUNS DOS VRIOS ESTILOS DE LINHAS EXISTENTES............................8
Ferramentas de desenho..................................................................................................... 10
PENCIL (LPIS)........................................................................................................... 10
LINE (LINHA).............................................................................................................. 11
PEN............................................................................................................................ 12
Rectangle; Ellipse; Polygon.................................................................................................. 14
RECTANGLE................................................................................................................ 14
ELIPSE........................................................................................................................ 15
POLYGON................................................................................................................... 16
Setas; Tipos de retngulos; Linha de conexo; Anel............................................................18
SETAS......................................................................................................................... 18
TIPOS DE RETNGULOS.............................................................................................. 19
LINHA DE CONEXO................................................................................................... 20
FERRAMENTA ANEL.................................................................................................... 21
Forma em L; Torta; Retngulos arredondados; Polgonos dinmicos....................................23
FORMA EM L............................................................................................................... 23
FERRAMENTA TORTA.................................................................................................. 24
RETANGULO ARREDONDADO..................................................................................... 26
POLGONOS DINMICOS............................................................................................ 26
Espiral; Estrela; Assets; Image editing; Exportar.................................................................30
ESPIRAL...................................................................................................................... 30
JANELA ASSETS.......................................................................................................... 31
ESTRELAS.................................................................................................................. 31
JANELA IMAGE EDITING.............................................................................................. 32
EXPORTAR.................................................................................................................. 32
Reviso................................................................................................................................ 34
Text...................................................................................................................................... 37
FERRAMENTA TEXTO.................................................................................................. 37

Manipular Objetos; Ferramenta Knife...................................................................................43


ALINHAR, ROTACIONAR E DISTORCER........................................................................43
AGRUPAR E DESAGRUPAR.......................................................................................... 44
COMBINAR OBJETOS SELECIONADOS.........................................................................44
FERRAMENTA KNIFE................................................................................................... 45
Importar um arquivo; Magic wand; Crop;............................................................................. 48
IMPORTAR UM ARQUIVO............................................................................................. 48
MAGIC WAND (VARINHA MAGICA).............................................................................. 49
CROP.......................................................................................................................... 50
criando uma animao........................................................................................................ 52
ANIMAO................................................................................................................. 52
Criar Animao Automatizada............................................................................................. 56
ANIMAO AUTOMATIZADA....................................................................................... 56
Nesta Aula iremos fazer um exemplo.................................................................................. 59
Nesta aula iremos fazer um animao................................................................................. 61
Avaliao Geral.................................................................................................................... 64

Fireworks 8

Aula

01
INTRODUO
O Fireworks 8 uma poderosa ferramenta destinada criao e edio de imagens
grficas para utilizao no desenvolvimento de pginas para Internet.
Com o Fireworks 8 o usurio tem em mos tudo que necessrio para criar botes,
barras divisrias, cones, texturas, mapas de imagens, animaes em formato
GIF, etc.
Embora no seja seu objetivo principal, tambm possvel criar pginas inteiras
diretamente nele, com a possibilidade de alterar posteriormente o arquivo HTML
resultante.
Para entrar no Fireworks: Clique no Menu iniciar, todos os programas, Macromedia,
Macromedia Fireworks 8.

Observe a tela que se abriu.


Clique na opo: Fireworks File.

Bit Point tecnologia & Treinamento


(Rev.04)

Fireworks 8

Aprenderemos:
Introduo
Conhecer a interface do Fireworks;
Criar um Novo Documento de Trabalho;
Conhecer os Botes de Controle;
Conhecer a janela Properties (Propriedades);
Conhecer as Ferramentas de Desenho e Seleo de Cores;
Conhecer as Janelas Auxiliares;
Abrir arquivos.

CRIAR UM NOVO DOCUMENTO DE TRABALHO


Depois de ter clicado na opo: Fireworks File. Veja na tela abaixo.
Nesta prxima tela que se abriu para escolhermos o tamanho da tela e tambm a cor de
fundo.

Fireworks 8

Na caixa Width e Height, digite: 300. Clique na opo Transparent. Clique em OK.

CONHECER OS BOTES DE CONTROLE

Esta barra nos permite acessar rapidamente algumas operaes disponveis no menu.

Na base da janela de documentos encontra-se no canto inferior um grupo de botes que


tornam possvel a manipulao de animaes criadas no Fireworks, como executar a
animao, avanar ou retroceder um quadro.

Uma outra janela muito importante durante o trabalho com o Fireworks a Properties
(Propriedades). Por meio dela vrios tipos de configuraes podem ser efetuados nos
objetos grficos existentes na ilustrao, como cor de preenchimento, textura, efeitos,
fonte de letras, etc.

CONHECER AS FERRAMENTAS DE DESENHO E SELEO DE


CORES
O Fireworks 8 possui uma variedade muito grande de ferramentas para a produo de
imagens sofisticadas.

Bit Point tecnologia & Treinamento


(Rev.04)

Fireworks 8

O Fireworks trabalha com o sistema de cores RGB, ideal para grficos que so utilizados
em pginas de Internet, o nmero da cor (em formato hexadecimal) mostrado acima da
paleta. Esse nmero corresponde ao que utilizado na linguagem HTML, para a definio
de cores.

CONHECER AS JANELAS AUXILIARES


No lado direito da tela do Fireworks, existe um agrupamento de diversas janelas, cada
uma com funes especficas. A seguir veremos algumas das diversas janelas
existentes.

Optimize
(Otimizar)
Vamos conhecer algumas janelas.

Layers
(Camadas)

Assets
(Propriedades)

Fireworks 8

Clique na janela Assets

Se no estiver clicado clique na guia Styles. Como mostra a figura abaixo.

Agora clique na janela Special Characters e observe.


Deve-se notar que no centro do ambiente encontra-se uma janela na qual todo o trabalho
vai ser realizado. Ela denominada Janela de Documento, a qual pode apresentar-se em
quatro diferentes configuraes, selecionveis a partir dos botes da parte superior da
janela, e que so nomeados Original (Original), Preview (Visualizao), 2-Up (2 para
cima) e 4-Up (4 para cima).

Clique na opo 2-up


Clique na opo 4-up.
Clique na opo Original.

ABRIR ARQUIVOS
Clique no File e clique em Open.
Clique na Seta da caixa examinar e escolha Bibliotecas:
D um duplo clique na pasta Imagens.
D um duplo clique na pasta Amostras de Imagens.
D um duplo clique no arquivo Pinguins.jpg.
Observe que a imagem foi aberta.
Clique no X para fechar o Firewoks.
Bit Point tecnologia & Treinamento
(Rev.04)

6
Se perguntar se deseja salvar clique em no.

Fireworks 8

Fireworks 8

1. Abra o Fireworks
2. Crie um novo arquivo com tamanho 800x600 e transparente.
3. Abra o arquivo Coala.jpg
4. Clique na opo 2-up.
5. Clique na opo 4-up.
6. Clique no original
7. Clique no menu Window e clique na opo Color mixer.
8. Feche o Fireworks.

Bit Point tecnologia & Treinamento


(Rev.04)

Fireworks 8

Aula

02
CONHECER E UTILIZAR A FERRAMENTA BRUSH (PINCEL);
CONHECER ALGUNS
EXISTENTES;

DOS VRIOS ESTILOS

DE

LINHAS

Entre no Fireworks: clique no Menu Iniciar, Todos os programas, Macromedia,


Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho

Clique em OK.

FERRAMENTA BRUSH(PINCEL)
Observe as opes existentes na Janela Propriedades quando a ferramenta Brush (Pincel)
est selecionada.
Clique na ferramenta Brush.
Observe que mais abaixo voc pode alterar as cores.

Clique na seta da primeira caixa de cor.


Escolha a cor Azul escuro.
Leve o mouse dentro da rea de desenho, a caixa que
tem cor vermelha no meio da tela.
Segure o boto do mouse apertado e arraste um
pouco e solte e veja.

Fireworks 8

CONHECER ALGUNS DOS VRIOS ESTILOS DE LINHAS


EXISTENTES
Na parte inferior da tela clique dentro da caixa Tip size e digite: 50

Leve o mouse dentro da rea de desenho, a caixa que tem cor vermelha no meio da
tela.
Segure o boto do mouse apertado e arraste um pouco e solte e veja a diferena.
D um clique na seta para baixo na caixa Stroke category (Soft Rounded).
Leve a seta do mouse sobre a opo Unnatural.
Clique na opo 3D Glow
Leve o mouse dentro da rea de desenho, a caixa que tem cor vermelha no meio da
tela.
Segure o boto do mouse apertado e arraste um pouco e solte e veja a diferena.
D um clique novamente na seta para baixo na caixa Stroke category (Soft Rounded)
que mostra agora 3D Glow.
Leve a seta do mouse sobre a opo Watercolor.
Clique na opo Heavy
Leve o mouse dentro da rea de desenho, a caixa que tem cor vermelha no meio da
tela.
Segure o boto do mouse apertado e arraste um pouco e solte e veja a diferena.
Testes outras opes da caixa Stroke category (Soft Rounded).
Clique na seta da caixa Texture e escolha DNA.

Leve o mouse dentro da rea de desenho, a caixa que tem cor vermelha no meio da
tela.
Segure o boto do mouse apertado e arraste um pouco e solte e veja a diferena.
Teste outras opes da caixa Texture.
Feche o Fireworks, sem salvar.

Bit Point tecnologia & Treinamento


(Rev.04)

10

Fireworks 8

Entre no Fireworks

9. Abra um novo arquivo com tamanho 400x500 e cor azul.


10.Pegue a ferramenta Brush, use as opes das caixas texture, da caixa tamanho,
ou seja, como voc aprendeu na aula e tente desenhar a bandeira do Brasil. Veja
o desenho abaixo, mas faa bem mais bonita, este desenho apenas uma
ilustrao, use sua imaginao.

11.Feche o Fireworks sem salvar

Fireworks 8
11

Aula

03
FERRAMENTAS DE DESENHO
Entre no Fireworks 8:
Clique no Menu Iniciar, Todos os programas, Macromedia, Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho como exemplo da aula anterior.
Clique em OK.

PENCIL (LPIS)
A ferramenta Pencil (Lpis) pode ser utilizada para criao de formas retilneas ou
curvilneas de maneira livre, simplesmente arrastando a seta do mouse como se o usurio
estivesse desenhando com um lpis.
Janela de Propriedades da Ferramenta Pencil (Lpis)

Clique na Ferramenta Pencil.

Na mesma paleta da ferramenta pencil, mas abaixo temos as cores, clique na seta da
primeira caixa de cor e escolha a cor Amarela.
Leve o mouse dentro da rea de desenho segure clicado e arraste o mouse e solte.
Crie mais algumas linhas.

Bit Point tecnologia & Treinamento


(Rev.04)

12

Fireworks 8

LINE (LINHA)
A ferramenta Line, desenha linhas unicamente retas.
Janela de Propriedades da Ferramenta Line

Clique na Ferramenta LINE.

Na mesma paleta da ferramenta LINE, mas abaixo temos as cores, clique na seta da
primeira caixa de cor escolha a cor Azul.
Leve o mouse dentro da rea de desenho segure clicado e arraste o mouse e solte.
Observe que foi feita uma linha reta.
Crie mais algumas linhas retas.

Fireworks 8
13

PEN
A ferramenta Pen, utilizada para desenhar linhas curva. Quando voc cria uma linha
curva, note que na extremidade da linha so apresentadas duas linhas azuis de direo
oposta. Elas so denominadas alas de controle, uma vez que por meio delas
possvel ajustar a curvatura da linha. Esse tipo de linha comumente denominado entre os
profissionais grficos de Curva de Bzier.
Janela de Propriedades da Ferramenta Pen.

Clique na Ferramenta PEN.


Na mesma paleta da ferramenta PEN, mas abaixo temos as
cores, clique na seta da primeira caixa de cor e escolha a cor
Azul.
Leve o mouse na sua rea de desenho clique e solte.
Arraste o mouse um pouco longe do ponto que voc clicou,
clique novamente e segure clicado movimentando seu
mouse, observe a curva.
Clique novamente.
Arraste o mouse de novo e observe que continua fazendo sua
curva.
Para parar d um duplo clique.
Faa mais algumas curvas.
Clique na caixa Tip size e digite 40 e tecle ENTER.

Clique na seta da caixa Stroke category, coloque o mouse sobre a opo UnNatural e
clique em 3D Glow.
Leve o mouse na sua rea de desenho clique e solte.
Arraste o mouse um pouco longe do ponto que voc clicou, clique novamente e
segure clicado e movimente seu mouse, observe a curva.
Clique novamente.
Arraste o mouse de novo e observe que continua fazendo sua curva.
Para parar d um duplo clique.
Feche o Fireworks sem salvar.

Bit Point tecnologia & Treinamento


(Rev.04)

14

Fireworks 8

Entre no Fireworks.

12.Abra um novo arquivo com tamanho 400x500 e cor azul.


13.Clique na ferramenta Pen, escolha a cor vermelha.
14.Clique na caixa Tip size e digite 40 e tecle ENTER.
15.Clique na seta da caixa Stroke category, coloque o mouse sobre a opo Crayon
e clique em Rake.
16.Leve o mouse em sua rea de desenho e faa a Letra W.

17.Crie um novo Arquivo.


18.Clique na Ferramenta line, escolha a cor vermelha e clique na caixa Tip size e
digite 40 e tecle ENTER.
19.Clique na seta da caixa Stroke category, coloque o mouse sobre a opo
Unnatural e cuque em 3D.
20.Usando a ferramenta escreva Fireworks. Veja abaixo.
21.Crie um novo Arquivo.

22.Clique na Ferramenta Pencil e escreva seu nome.

23.Feche o Firewoks sem gravar.

Fireworks 8
15

Bit Point tecnologia & Treinamento


(Rev.04)

16

Fireworks 8

Aula

04
RECTANGLE, ELLIPSE, POLYGON.
Entre no Fireworks 8:
Clique no Menu Iniciar, Todos os programas, Macromedia, Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

RECTANGLE
Janela de Propriedades da Ferramenta Rectangle:

Clique na ferramenta Rectangle.


Leve o mouse dentro de sua rea de desenho segure clicado e faa um
retngulo.
Nas propriedades da ferramenta clique na seta da caixa Fill category.

Leve o mouse sobre a opo Pattern e clique na opo Illusion. Observe seu desenho.
Volte novamente na caixa Fill category e escolha outros estilos.

Fireworks 8
17

ELIPSE
Quando a ferramenta Ellipse estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Elipse.


Leve o mouse dentro de sua rea de desenho segure clicado e faa um
circulo.
Nas propriedades da ferramenta clique na seta da caixa Fill category.

Leve o mouse sobre a opo Gradient e clique na opo Waves. Observe seu desenho.
Volte novamente na caixa Fill category e escolha outros estilos.

Bit Point tecnologia & Treinamento


(Rev.04)

18

Fireworks 8

POLYGON
Quando a ferramenta Polygon estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Polygon.


Leve o mouse dentro de sua rea de desenho segure clicado e faa um
polgono.
Nas propriedades da ferramenta clique na seta da caixa Fill category.
Clique na opo Fill options.

Na caixa que se abre clique na terceira seta de cima para baixo e escolha Violet,
Orange.Observe seu desenho.

Volte na opo Fill category. Clique na opo Fill options.


Escolha outro tipo na caixa.
Feche o Fireworks, sem salvar.

Fireworks 8
19

Entre no Fireworks.

24.Abra um novo arquivo com tamanho 400x200 e transparente.


25.Usando a ferramentas Elipse, Rectangle e Eine, desenhe a bandeira do Brasil.

26.Salve sua bandeira, dentro da pasta meus documentos.


27.Feche o Fireworks.

Bit Point tecnologia & Treinamento


(Rev.04)

20

Fireworks 8

Aula

05
SETAS; TIPOS DE RETNGULOS; LINHA DE CONEXO;
ANEL.
Entre no Fireworks: clique no Menu Iniciar, Todos os
Macromedia Fireworks 8.

programas, Macromedia,

Clique na opo Fireworks File


Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

SETAS
Quando a ferramenta Arrow estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Arrow.


Leve o mouse dentro de sua rea de desenho segure clicado e faa uma
seta.
Nas propriedades da ferramenta clique na seta da caixa Fill category.

Leve o mouse sobre a opo Pattern e clique na opo Metal-Slip. Observe seu desenho.
Observe em sua seta que na ponta dela tem um ponto amarelo leve o mouse sobre ele e
segure clicado e arraste para frente um pouco e solte.

Use os outros pontos amarelos e mude mais sua seta veja nosso exemplo abaixo:

Fireworks 8
21

D um clique na seta para baixo na opo Filters.

Leve a seta do mouse sobre a opo Shadow an Glow.


Clique em Inner Glow como mostra a figura acima.
Na caixa de que se abre clique dentro da caixa Width e digite: 15 e tecle ENTER. Observe
sua seta.

TIPOS DE RETNGULOS
Quando a ferramenta Beleved Rectangle estiver selecionada, a janela de Propriedades ir
exibir as opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Beveled


Rectangle.

Leve o mouse dentro de sua rea de desenho, segure clicado e faa um


retngulo.
D um clique na seta para baixo na opo Filters.
Leve a seta do mouse sobre a opo Blur.
Clique em Radial Blur.

Bit Point tecnologia & Treinamento


(Rev.04)

22

Fireworks 8

Na caixa de que se abre digite: 50 e 40 e clique em OK. Observe seu desenho.

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Chamfer


Rectangle.
Leve o mouse dentro de sua rea de desenho segure clicado e faa um
retngulo.
Observe os pontos amarelos segure clicado sobre eles e mude o estilo do
retngulo.

LINHA DE CONEXO
Quando a ferramenta Connector Line estiver selecionada, a janela de Propriedades ir
exibir as opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e, na caixa que se abre escolha Connector


Line.
Leve o mouse dentro de sua rea de desenho e d um clique.
D um clique na seta para baixo na caixa 1-Pixel Hard.

Fireworks 8
23

Leve a seta do mouse sobre a opo Unnatural.


Clique na opo 3D Glow.

FERRAMENTA ANEL
Quando a ferramenta Doughtnut estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Doughnut.


Leve o mouse dentro de sua rea de desenho segure clicado e faa um
retngulo.
Clique na ala central amarela da direita e arraste a seta do mouse um pouco,
para fora e depois para dentro, em seguida solte o boto do mouse como
segue a figura abaixo.

Clique na seta da caixa de cor e escolha a cor amarela. Esta opo coloca a cor dentro da
elipse.

Clique na seta da caixa de cor e escolha a cor AZUL. Esta opo coloca a cor na linha da
elipse.

Bit Point tecnologia & Treinamento


(Rev.04)

24

Fireworks 8

Ao lado da cor azul tem um caixa digite dentro dela 10 e tecle ENTER. Observe a
espessura da linha de sua elipse.

Feche o Firewoks, sem salvar.


1

Entre no Fireworks.

28.Abra um novo arquivo com tamanho 800x600 e transparente.


29.Crie a tela de um site:
No fundo usou um rectangle de cor vermelha.
No menu esquerdo: Foi colocado um retngulo e usado: na caixa Stroke category Heavy
com espessura 40, No Fill category usamos Metal-Slip.
No menu superior foi usado o estilo de retngulo: Beveled rectangle de cor azul, Foi
aplicado um Filter do estilo drop shadow e espessura 15.
Na parte inferior da tela foi criado um rectangle de cor azul. No Fill category, usamos um
gradiente Folds.
Na parte central foi usado um rectangle de cor Azul. Foram usados os mesmos aspectos da
parte inferior. Foi usada a opo Edge e escolhemos Feather.

30.Salve sua Tela dentro da pasta meus documentos.

Fireworks 8
25

31.Feche o Fireworks.

Bit Point tecnologia & Treinamento


(Rev.04)

26

Fireworks 8

Aula

06
FORMA EM L; TORTA; RETNGULOS ARREDONDADOS;
POLGONOS DINMICOS.
Entre no Fireworks: clique no Menu Iniciar, Todos os programas, Macromedia,
Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

FORMA EM L
Quando a ferramenta L-Shape estiver selecionada, a janela de Propriedades ir
exibir as opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha LShape.


Leve o mouse dentro de sua rea de desenho segure clicado arraste um
pouco e solte.

Fireworks 8
27

FERRAMENTA TORTA
Quando a ferramenta Pie estiver selecionada, a janela de Propriedades ir exibir as opes
mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Pie.


Leve o mouse dentro de sua rea de desenho segure clicado arraste um
pouco e solte.
Segure clicado na esfera amarela da parte superior e arraste at a esfera
amarela da direita.

Observe abaixo como ficou.

D um clique na seta para baixo na opo Filters.

Bit Point tecnologia & Treinamento


(Rev.04)

28

Fireworks 8

Leve a seta do mouse sobre a opo Eye


Candy 4000 L.
Clique na opo Bevel Boss...

Clique na caixa Bevel Width (pixels), apague o valor atual e digite: 22.34, em seguida
pressione a tecla Tab.
Clique na caixa Bevel Heigth Scale, apague o valor atual e digite: 31, em seguida
pressione a tecla Tab.
Clique na caixa Smoothness, apague o valor atual e digite: 89, em seguida clique na
opo Outside marquee.
Clique no boto OK. Observe sua imagem.

Fireworks 8
29

Bit Point tecnologia & Treinamento


(Rev.04)

30

Fireworks 8

RETANGULO ARREDONDADO
Quando a ferramenta Rounded Rectangle estiver selecionada, a janela de Propriedades
ir exibir as opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Rounded


Rectangle.
Leve o mouse dentro de sua rea de desenho segure clicado arraste um
pouco e solte.

POLGONOS DINMICOS
Quando a ferramenta Smart Polygon estiver selecionada, a janela de Propriedades ir
exibir as opes mostradas na figura abaixo:

Leve o mouse dentro de sua rea de desenho segure clicado arraste um pouco e
solte.
D um clique na seta para baixo na opo Filters.
Leve a seta do mouse sobre a opo Eye Candy 4000 L.
Clique na opo Motion Trail...

Observe a janela que se abre:

Fireworks 8
31

Clique na caixa Length (pixels), apague o valor atual e digite: 311.95, em seguida
pressione a tecla Tab.
Clique na caixa Taper, apague o valor atual e digite: 86, em seguida pressione a tecla
Tab.
Clique no boto OK.

Feche o Firewoks, sem salvar.

Bit Point tecnologia & Treinamento


(Rev.04)

32

Fireworks 8

Entre no Fireworks.

32.Abra um novo arquivo com tamanho 800x600 e transparente.


33.Vamos Criar um plano de fundo para ser usado, por exemplo, em apresentaes
do powerpoint.
Faa um retngulo que pegue a rea toda. Use a opo Fill category, escolha Pattern e
escolha Wood 2.
D um clique na seta para baixo na opo Filters.
Leve a seta do mouse sobre a opo Eye Candy 4000 L.
Clique na opo Bevel Boss...

Clique na caixa Bevel Width (pixels), apague o valor atual e digite: 7.68, em seguida
pressione a tecla Tab.
Clique na caixa Bevel Heigth Scale, apague o valor atual e digite: 50, em seguida
pressione a tecla Tab.
Clique na caixa Smoothness. apague o valor atual e digite: 75.
Clique no boto OK
Faa um outro retngulo de cor azul e depois coloque gradiente Satin.

Fireworks 8
33

Clique na opo filter. Leve a seta do mouse sobre a opo Bevel and Emboss. Clique
na opo Raised Emboss.
Na caixa que se abre escolha 5 e tecle ENTER.
Vamos exportar esse arquivo.
Clique no menu File e escolha a opo export.
Digite Tela.gif no nome do arquivo e grave na pasta meus documentos.
Feche o Fireworks
Ele vai solicitar a gravao da imagem, pois nos exportamos a imagem, mas no gravamos
no formato do Fireworks, se voc quiser pode salvar tambm.
Se voc quiser ver seu arquivo entre na pasta meus documentos.

Bit Point tecnologia & Treinamento


(Rev.04)

34

Fireworks 8

Aula

07
ESPIRAL; ESTRELA; ASSETS; IMAGE EDITING; EXPORTAR
Entre no Fireworks: clique no Menu Iniciar, Todos os programas, Macromedia,
Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

ESPIRAL
Quando a ferramenta Spiral estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Spiral.


Leve o mouse dentro de sua rea de desenho segure clicado arraste um
pouco e solte.
Observe.
D um clique na seta para baixo na caixa Cor do preenchimento.
Clique na cor Azul.

Clique na cor azul

Fireworks 8
35

JANELA ASSETS
Esta janela contm alguns modelos de cores prontas.
Clique na janela auxiliar Assets, caso ela no esteja aberta.

Observe quantos estilos de cores tem.

Clique em qualquer um e observe seu desenho, depois clique em outros para ver.

ESTRELAS
Quando a ferramenta Star estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Star.


Leve o mouse dentro de sua rea de desenho segure clicado arraste um
pouco e solte.
Observe.

Bit Point tecnologia & Treinamento


(Rev.04)

36

Fireworks 8

JANELA IMAGE EDITING


Com esta janela voc pode rotacionar, girar seus objetos, e muitos outros recursos

Clique na janela auxiliar Image Editing.

Clique na opo Transform Tools.


Clique na opo Free Rotate.
Observe que em seu objeto foram colocadas algumas alas
pretas, leve o mouse sobre uma delas segure clicado e
mova o objeto.

Agora coloque o mouse prximo a uma ala preta, mas no em cima observe que seu
mouse muda para uma seta giratria, segure clicado e mova o mouse.
Vamos salvar este documento de trabalho.
Clique no menu File.
Clique na opo Save As...
Clique na caixa Nome do arquivo, apague o nome atual e digite: Estrela, em seguida
clique no boto Salvar.
O documento foi salvo com o nome Estrela.png (.png, extenso referente ao
programa Fireworks)

EXPORTAR
Essa opo serve para criar arquivos em outros formatos que possam ser usados por
outros programas.
Clique no menu File.
Clique na opo Export...
Na caixa que se abre clique na seta da caixa export.

Observe os diversos formatos, clique na opo Imagens only, que significa somente
imagens.

Fireworks 8
37

Clique no boto Export.


Feche o Fireworks. Se pedir para salvar responda SIM.
1

Entre no Fireworks.

34.Abra um novo arquivo com tamanho 800x600 e transparente.


35.Use as ferramentas e as janelas que voc aprendeu nesta aula. Tente criar algum
desenho.

Bit Point tecnologia & Treinamento


(Rev.04)

38

Fireworks 8

Aula

08
REVISO
Entre no Fireworks.
Abra um novo arquivo com tamanho 800x600 e transparente.
Neste exemplo iremos criar uma barra de menu para um site.
Clique na ferramenta retngulo e faa um retngulo da largura da rea de desenho de cor
cinza escuro.
Clique na seta da ferramenta Filter.
Coloque o mouse sobre a opo Eye candy 4000 LE, clique em Bevel Boss.

Na caixa que se abre coloque 10, 60,30 e clique em OK.


Clique na ferramenta Text e digite como abaixo.

Use a Janela Assets e escolha um estilo de cor.

Fireworks 8
39

Clique na seta ferramenta Rectangle Hotspot. Observe as opes e clique em Rectangle


Hotspot.

Faa um retngulo sobre o nome Globo. Veja abaixo como ficar.

Nas propriedades clique dentro da caixa Link e digite: http://www.globo.com


Clique na caixa Alt e digite: Clique e entre no site da globo.
Clique na seta da caixa Target e escolha _Blank
Veja abaixo como ficou:

Faa o mesmo com os outros links.


SBT - http://www.sbt.com.br
Charges - http://www.charges.com.br
Band - http://www.band.com.br
Terra - http://www.terra.com.br
Vamos salvar. Clique no menu File, clique na opo Export.
Na caixa nome do arquivo digite: Aula8, na caixa Export veja se est Html and images
se no estiver clique na seta e escolha, escolha os Meus documentos para gravar e depois
clique no boto Export.
Minimize a tela do Fireworks
D um duplo clique na pasta Meus documentos.
Observe que temos o aula8.gif e o aula8.html, d um duplo clique no ula8.html.
Bit Point tecnologia & Treinamento
(Rev.04)

40

Fireworks 8

Observe que foi aberto no navegador, clique nos links para testar.
Feche o navegador.
Clique no Fireworks que est na barra de tarefas.
OBS: Voc pode colocar links de pginas suas tambm, ou seja, se voc estiver criando
seu site, logicamente o menu iro chamar suas pginas.
OBS: Voc pode colocar links em determinadas partes de uma figura tambm, usando a
mesma ferramenta ou as outras ferramentas de Web.
Clique na ferramenta Pointer.
Clique no link Globo, observe que no centro apareceu uma elipse que se parece um
relgio, clique com o boto direito sobre ela.
Na caixa que se abre clique na opo: Add Status bar Message, esta opo serve para
adicionar uma mensagem na barra de status.

Na caixa que se abre digite: Minha mensagem. Clique em OK.


Clique novamente com o boto direito do mouse sobre a elipse que se parece com um
relgio.

Na caixa que aparece escolha: Add Pop-up Menu..., esta opo serve para criar um menu
Pop-up.
Na caixa que se abre digite como abaixo. Para digitar a primeira vez d um duplo clique
dentro da caixa Text.

Clique nas outras guias e mude as cores, tipo de letra, estilos e posio, etc..
Aps terminar clique no Boto Done.
Quando se for testar s colocar o mouse sobre a opo globo que ir aparecer o menu.

Fireworks 8
41

Aula

09
Vamos salvar. Clique no menu File, clique na opo Export.
Na caixa que se abre j est definido o nome e o local, clique no boto Export nas caixas
que aparecerem de substituio clique em OK.
Feche o Fireworks e salve seu projeto dentro da pasta meus documentos com o
nome Aula8.
D um duplo clique na pasta Meus documentos.
Observe que temos o aula8.gif e o aula8.html, d um duplo clique no Aula8.html.
Observe que foi aberto no navegador, coloque o mouse sobre o nome Globo observe que
apareceu seu menu, clique em uma opo para testar.

Feche o navegador
Lembrando que aqui fizemos os menus usando sites, mas voc pode chamar suas
pginas.

TEXT
Entre no Fireworks: clique no Menu Iniciar, Todos os
Macromedia Fireworks 8.

programas, Macromedia,

Clique na opo Fireworks File


Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

FERRAMENTA TEXTO
Quando a ferramenta Text estiver selecionada, a janela de Propriedades ir exibir as
opes mostradas na figura abaixo:

Bit Point tecnologia & Treinamento


(Rev.04)

42

Fireworks 8

Clique na Ferramenta Text.

Clique na caixa tamanho e digite 60.

Clique na caixa cor e escolha Azul.

Clique na caixa Font e escolha Arial Black

Clique dentro da rea de desenho e digite: FIREWORKS 8


Clique na janela Assets, caso ela no esteja aberta.

V clicando nos modelos e veja as alteraes em seu texto,


deixe em um modelo que fique legal.

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha


Elipse.

Fireworks 8
43

Leve o mouse dentro de sua rea de desenho segure clicado e faa um circulo como a
figura abaixo.
Clique na ferramenta Pointer.
Clique no texto Fireworks 8.
Mantenha a tecla Shift pressionada e depois d um clique na elipse, em seguida solte a
tecla shift.
Clique no menu Text.
Clique na opo Attach to Path.
A forma do texto selecionado foi alterada.

Clique fora para desmarcar.


Feche o Fireworks, sem salvar.

Bit Point tecnologia & Treinamento


(Rev.04)

44

Fireworks 8

Entre no Fireworks.:

36.Abra um novo arquivo com tamanho 800x600 e coloque em fundo claro.


37.Vamos criar um carto de natal.
Pegue a Ferramenta Text, escreva no topo: FELIZ NATAL!!! Coloque as propriedades do
texto como abaixo.

Clique na janela Assets e coloque um estilo que fique legal.

Clique no File e clique na opo Import. Na caixa que se abre escolha o caminho:
C:\Arquivos de programas\Onbyte\Fireworks8 e d um duplo clique no arquivo Natal.jpg.
Leve o mouse dentro da rea de desenho e d um clique, deixe como a figura abaixo.

Pegue a ferramenta Text novamente digite a seguinte Frase: A suprema felicidade da


vida a convico de ser amado por aquilo que voc . Ou, mais corretamente,
de ser amado apesar daquilo que voc . (Vitor Hugo). Veja na figura abaixo onde
colocar seu texto.

Fireworks 8
45

Veja as propriedades do texto

Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha Star.


Leve o mouse dentro de sua rea de desenho segure clicado e faa uma
estrela.
Na janela assets coloque o seguinte estilo.

Clique na opo Filters


Escolha Eye Candy 4000 LE e clique em Motion Trail.

Bit Point tecnologia & Treinamento


(Rev.04)

46

Fireworks 8

Na caixa que se abre coloque os valores: 108, 40, 95.


Deixe como a tela abaixo

Pegue a ferramenta Text novamente e digite: Desejamos a todos nossos alunos um


NATAL repleto de felicidades!
Veja a figura abaixo como ficou.

Fireworks 8
47

38.Salve seu carto na pasta meus documentos com o nome de carto.


39.Feche o Fireworks.

Bit Point tecnologia & Treinamento


(Rev.04)

48

Fireworks 8

Aula

10
MANIPULAR OBJETOS; FERRAMENTA KNIFE.
Entre no Fireworks: clique no Menu Iniciar, Todos os
Macromedia Fireworks 8.

programas, Macromedia,

Clique na opo Fireworks File


Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho.
Clique em OK.

ALINHAR, ROTACIONAR E DISTORCER


Estas opes servem para alinhar os objetos, rotacion-los se for preciso ou at mesmo
distorcer o objeto.
Clique na SETA da ferramenta Rectangle e na caixa que se abre escolha
Elipse.
Leve o mouse dentro de sua rea de desenho segure clicado e faa um
circulo. Faa mais 2 crculos, como abaixo.

Clique na ferramenta Pointer.


Observe o ltimo circulo est selecionado segure a tecla Shift apertada e
clique nos outros dois crculos, para seleciona-los tambm
Clique no menu Modify.
Leve a seta do mouse sobre a opo Align.
Clique na opo Center vertical.
Observe como ficou.
Clique no menu Modify.
Leve a seta do mouse sobre a opo Align.
Clique na opo Top.
Observe como ficou.
Clique no menu Edit.
Clique na opo Undo Align.
O alinhamento dos objetos foi desfeito.

Fireworks 8
49
D um clique em qualquer parte vermelha do documento, para desmarcar os objetos
selecionados.
Clique em qualquer uma das Elipses.
Se a janela Assests no estiver aberta clique nela para abrir e clique em um tom de cor
que desejar.
Clique no menu Modify.
Leve a seta do mouse sobre a opo Transform.
Clique na opo Rotate 180.
Observe sua elipse girou 180 graus.
Clique no menu Modify.
Leve a seta do mouse sobre a opo Transform.
Clique na opo Distort.
Observe que apareceram quadrados em volta do objeto segure clicado nos
quadrados e arraste para distorcer o objeto.

AGRUPAR E DESAGRUPAR
Esta opo serve para voc agrupar objetos para que quando mover um todos se movam
juntos ou se desejar desagrup-los.
Clique no menu Select.
Clique na opo Select All
Clique no menu Modify.
Clique na opo Group.
Clique fora para desmarcar os objetos. Tente arraste um dos objetos, observe que
todos so arrastados ao mesmo tempo.
Clique no menu Modify.
Clique na opo Ungroup.
Os objetos foram desagrupados.

COMBINAR OBJETOS SELECIONADOS


Esta opo serve para voc fazer montagens combinado objetos, unindo objetos
etc...
Arraste uma das elipses como a figura abaixo.

Pressione a tecla Shift e depois clique na Elipse que esta junto da outra como a figura
abaixo.

Bit Point tecnologia & Treinamento


(Rev.04)

50

Fireworks 8

Clique no menu Modify


Leve a seta do mouse sobre a opo Combine Paths.
Clique na opo Join.
A parte onde os dois objetos esto juntos foi combinada.
Clique no menu Edit.
Clique na opo Undo Join Paths.
Clique no menu Modify.
Leve a seta do mouse sobre a opo Combine Paths.
Clique na opo Union.

FERRAMENTA KNIFE
Esta ferramenta serve para cortar objetos.
Se sua elipse que voc acabou de unir no estiver selecionada clique nela para selecionar.

Clique na Ferramenta Knife.

Veja na figura abaixo onde fizemos e corte e faa igual.

Clique na ferramenta Pointer.


Clique em qualquer parte vermelha no documento, para desmarcar os objetos
selecionados.

Separe os obietos
Feche o Fireworks, sem salvar.

Fireworks 8
51

Entre no Fireworks.

40.Abra um novo arquivo com tamanho 800x600 e coloque um fundo claro. Use a
paleta Assets e coloque as cores que desejar.
41.Crie uma Elipse como figura abaixo.

42.Faa mais duas elipses como a figura abaixo.

43.Clique na Ferramenta Subselection.

44.Clique na Elipse da esquerda. Observe que temos 4 ncoras em volta do objeto


selecionado, segure clicado na ncora da esquerda e arraste para baixo, como
afigura abaixo. Faa a mesma coisa para a outra Elipse.

45.Faa mais duas Elipses como abaixo da esquerda.

46.Pegue a ferramenta Subselection e distora como a figura da pgina anterior.


47.Faa outra Elipse como a figura abaixo.

Bit Point tecnologia & Treinamento


(Rev.04)

52

Fireworks 8

48.Clique no menu Select e clique na opo Select All.


49.Clique no menu Modify.
50.Leve a seta do mouse sobre a opo Combine Paths.
51.Clique na opo Union.
52.Pegue a ferramenta Elipse e faa dois olhos e a boca, como a figura ao lado.
53.Clique no menu Select e clique na opo Select All.
54.Clique no menu Modify.
55.Clique na opo Group.
56.

Salve seu desenho com o nome de Fantasminha legal.

57.Feche o Fireworks.

Fireworks 8
53

Aula

11
IMPORTAR UM ARQUIVO; MAGIC WAND; CROP;
Entre no Fireworks: clique no Menu Iniciar, Todos os
Macromedia Fireworks 8.

programas, Macromedia,

Clique na opo Fireworks File


Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha Branco
Clique em OK.

IMPORTAR UM ARQUIVO
Esta opo utilizada para trazer arquivos
de outros programas para dentro do
Fireworks.
Clique no menu File.
Clique na opo Import...
Localize o arquivo img20.jpg
Que se econtra no seguinte caminho:

C:\Windows\Web\Wallpaper\Personagens
Ache e clique no arquivo img20.jpg
Clique no boto Abrir.
De volta a tela do Fireworks de um clique na sua rea de desenho.
Observe que apareceu o desenho, segure cucado em uma das alas em volta do desenho e
aumente o tamanho.

Bit Point tecnologia & Treinamento


(Rev.04)

54

Fireworks 8

MAGIC WAND (VARINHA MAGICA)


Esta ferramenta serve para selecionar regies especificas do objeto.

Clique na ferramenta Magic Wand.

Clique na xcara existente na imagem do arquivo que foi importado. Clique no menu Edit e
escolha Copy.
Foi selecionada uma determinada parte da xcara , que possui uma mesma cor. Clique no
menu File.
Clique na opo New.
Clique no boto OK.
Foi criado um novo documento. Clique no menu Edit.
Clique na opo Paste.
A parte que foi selecionada no arquivo importado foi colada no novo documento.
Clique na guia Untitled-1.png.

Clique em qualquer parte vermelha no documento.


Todo o documento e a imagem foram selecionados. Clique em alguma parte da xcara.
Outra parte da imagem foi selecionada.

Fireworks 8
55

CROP
Esta ferramenta serve para voc selecionar partes do objeto.
Clique na seta ferramenta da ferramenta Crop

Clique na ferramenta Export rea


Com a ferramenta selecionada, faa um retngulo como abaixo.

Clique com o boto direito do mouse na rea selecionada na imagem.


Clique na opo Export rea.
Vamos exportar a rea selecionada na imagem. Observe nesta tela na parte superior
esquerda que voc pode alterar a extenso do arquivo cucando na caixa formato. Clique
no boto Export, que fica na parte inferior da tela que se abriu.
Clique na caixa Nome do arquivo, apague o nome atual e digite: telaexportada, em
seguida, clique no boto Export.
Clique no boto Minimizar.
D um duplo clique na pasta Meus documentos.
D um duplo clique na pasta Minhas imagens.
D um duplo clique na imagem telaexportada.jpg.
Olhe a imagem que ns acabamos de cortar e exportar, e depois, clique no boto Fechar
X.
Clique no boto Fechar X.
A janela Minhas imagens foi fechada. Clique no Macromedia Fireworks, na Barra de
tarefas.
Feche o Fireworks, sem salvar.
Bit Point tecnologia & Treinamento
(Rev.04)

56

Fireworks 8

Fireworks 8
57

Entre no Fireworks.

58.Abra um novo arquivo com tamanho 800x600


59.Importe uma figura da pasta Windows.
60.Clique na ferramenta Magic wand
61.Clique em alguma parte de seu desenho.
62.Copie esta parte do desenho
63.Abra um novo arquivo.
64.Cole o desenho copiado.
65.Clique na guia Untitled-1.png.
66.Clique na seta da ferramenta Crop. Clique na ferramenta Export rea
67.Selecione uma regio de seu desenho e exporte.
68.Feche o Fireworks sem salvar.

Bit Point tecnologia & Treinamento


(Rev.04)

58

Fireworks 8

Aula

12
CRIANDO UMA ANIMAO
Entre no Fireworks: clique no Menu Iniciar, Todos os programas, Macromedia,
Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

ANIMAO
Com o Fireworks alm de fazer os desenhos voc pode anim-los tambm, o que vamos
aprender nesta aula.
Clique na ferramenta Text.
Digite o seguinte texto na parte superior da tela, com tamanho 100: FIREWORKS

Clique no menu Window e clique na opo History.


Observe a janela que se abriu do lado direito, clique na
guia Frames.
Clique na seta para baixo da caixa options e clique na
Duplicate Frame...
Na caixa que se abre digite 3 e clique em OK.
Clique em cima do nome Frame 2 para selecionar.
Clique na ferramenta Text.
Digite o seguinte texto com tamanho 100 e cor azul: O MELHOR. Veja abaixo como est.

Aproveitando que o texto esta selecionado clique no menu Edit e clique em Copy

Fireworks 8
59
Clique em cima do nome Frame 3 para selecionar
Clique no menu Edit e clique em Paste
Clique na ferramenta Text
Digite o seguinte texto com tamanho 100 e cor amarela: EM EDIO. Veja abaixo como
est.

Aproveitando que o texto esta selecionado segure a tecla SHIFT apertada e clique no
texto O MELHOR, para selecion-lo. Clique no menu Edit e clique em Copy.
Clique em cima do nome Frame 4 para selecionar.
Clique no menu Edit e clique em Paste.
Clique na ferramenta Text.
Digite o seguinte texto com tamanho 100 e cor cinza: DE IMAGENS, veja abaixo com est.

Clique no menu File.


Agora vamos configurar o arquivo de forma a prepar-lo para a exportao da animao.
Clique na opo Image Preview...
D um clique na seta para baixo na caixa Format.

Bit Point tecnologia & Treinamento


(Rev.04)

60

Fireworks 8

Clique no formato Animated GIF.


Clique na guia Animation.
Clique na linha Frame 1 em cima do nome Frame 1.
Mantenha a tecla Ctrl pressionada, e clique na linha Frame 2, depois no Frame 3,
depois no Frame 4.
Clique na caixa Frame delay localizada abaixo do cone de um relgio, apague o valor
atual e digite: 50, em seguida, clique no boto Export...

Clique na seta da caixa salvar em e escolha meus documentos.


Clique na caixa Nome do arquivo, apague o nome atual, e digite: animao, em
seguida, clique no boto Export.
A animao foi criada. Clique no boto Minimizar.
D um duplo clique na pasta Meus documentos.
D um duplo clique no arquivo Animao.
Observe sua animao depois feche.
Feche a pasta meus documentos.
Clique no Macromedia Fireworks na Barra de tarefas.
Feche o Fireworks sem salvar.

Fireworks 8
61

Entre no Fireworks.

69.Abra um novo arquivo com tamanho 800x600


70.Crie uma animao que faa ir aparecendo seu nome e depois o nome da escola
que voc faz computao. Como fizemos na aula. Na aula nos duplicamos os
frames 3 vezes, mas na sua animao veja quantos frames voc ir precisar.

Bit Point tecnologia & Treinamento


(Rev.04)

62

Fireworks 8

Aula

13
CRIAR ANIMAO AUTOMATIZADA.
Entre no Fireworks: clique no Menu Iniciar, Todos os programas, Macromedia,
Macromedia Fireworks 8.
Clique na opo Fireworks File
Coloque Width 800 e Height 600
Clique na opo Custom.
Clique na seta da caixa de cor e escolha vermelho
Clique em OK.

ANIMAO AUTOMATIZADA
Agora vamos ver como criar uma animao com um recurso muito interessante disponvel
no Fireworks e que chamado de Tweening. Ela funciona da seguinte maneira: cria-se
um objeto (no caso do Fireworks um smbolo) e a seguir, define-se sua forma ou posio
inicial; uma cpia desse objeto ento gerada, alterando-se a forma ou a posio final.
Com base nessas duas informaes (a inicial e a final), o Fireworks cria todos os quadros
intermedirios automaticamente.

Faa uma Estrela do lado esquerdo de sua tela.


Clique no menu Modify.
Posicione a seta do mouse sobre a opo Symbol.
Clique na opo Convert to Symbol...
Clique na caixa Name, apague o nome atual e digite: estrela, em seguida, clique no boto
OK.
Clique no menu Window e clique na opo Library.
Observe na janela que se abriu sua estrela, segure cucado sobre ela e arraste dentro de
sua rea de desenho e solte. Veja na figura na figura abaixo como ficou.
Segure cucado sobre a estrela e leve-a do outro lado da tela. Veja abaixo:

Fireworks 8
63
Segure clicado sobre a estrela e leve-a do outro lado da tela. Veja abaixo:

Segure a tecla Shift apertada e clique na outra estrela para selecionar as duas. ;
Clique no menu Modify.
Posicione a seta do mouse sobre a opo Symbol.
Clique na opo Tween Instances...
Clique na caixa Steps, apague o valor atual e digite: 20, em seguida, clique na caixa da
opo Distribute to frames.
Clique em OK.
Clique na janela auxiliar Frames and History.

Observe que foram criados vinte quadros intermedirios. D um clique na seta para
baixo na opo Onion Skinning.

clique na opo Show All Frames.


Todos os quadros intermedirios da animao foram exibidos.
D um clique na seta para baixo na opo GIF Animation Looping.

Clique na opo No Looping, para desabilitar a caracterstica de repetio automtica da


animao.
Clique no menu File.
Clique na opo Image Preview...
Clique no boto Export.
Clique na caixa Nome do arquivo, apague o nome atual e digite: animao aulal3.
Escolha o local Meus documentos para gravar, em seguida, clique no boto Export.
A animao foi criada. Clique no boto Minimizar.
Abra a pasta Meus documentos.
D um duplo clique na animao aula13
Feche a animao
Bit Point tecnologia & Treinamento
(Rev.04)

64

Fireworks 8

Clique no Macromedia Fireworks, na Barra de tarefas. Feche o Fireworks sem


gravar.
1

Entre no Fireworks.

71.Abra um novo arquivo com tamanho 800x600.


72.Crie uma animao como desejar.

Fireworks 8
65

Aula

14
NESTA AULA IREMOS FAZER UM EXEMPLO
Entre no Fireworks.
Abra um novo arquivo com tamanho 70x60 e transparente.
Vamos criar algumas imagens para ser usado em sites. Neste exemplo ser criado a seta
voltar.

Clique na seta da ferramenta rectangle e escolha a ferramenta Arrow.

Faa uma seta dentro de sua rea de desenho.


Observe os quadrados amarelos segure cucado no quadro superior
central e arraste para deixar como a figura abaixo.

Agora segure clicado


da seta, veja na

no quadrado amarelo superior da parte de traz


figura acima qual . Deixe como abaixo.

Clique na janela Assets e coloque um estilo que voc achar legal.


Clique no menu Modify, coloque o mouse sobre a opo Transform e clique em Rotate
180.
Clique no menu File e escolha Export.
Digite Voltar no nome do arquivo e escolha o local meus documentos e clique em
export.
Sua seta foi exporta agora s usar nos sites.
Clique no menu File e escolha New, coloque o tamanho 150x70 e transparente. Neste
exemplo vamos criar um local para aparecer o relgio e o patrocinador.

Clique na seta da ferramenta rectangle e escolha a ferramenta Beveled


rectangle.

Bit Point tecnologia & Treinamento


(Rev.04)

66

Fireworks 8

Faa um retngulo que pegue a rea toda, ficando apenas um pequena parte em branco,
veja abaixo.

Clique na janela Assets e escolha o estilo 43. Pegue a ferramenta Bevel Rectangle e
faa outro retngulo como abaixo:

Clique na janela Assets e escolha o estilo 43.


Na janela de properties observe que tem o estilo Inner Bevel, d um
duplo clique sobre ele.
Na caixa que se abre clique na seta edge bevel Shape e escolha
Frame 2.
Veja como est:

Clique na ferramenta Elipse. E faa um circulo como na figura abaixo e coloque o estilo 47
da janela Assets.

Copie e cole os crculos e deixe como na figura abaixo.

Pegue a ferramenta Text e digite o texto como abaixo e coloque o estilo 97 da janela
Assets.

Pegue a ferramenta text e digite o nome do patrocinador como


abaixo, coloque o estilo 90 da janela Assets.
Clique no menu File e escolha Export.

Fireworks 8
67
Digite HoraCerta no nome do arquivo e escolha o local meus documentos e clique em
export.

Bit Point tecnologia & Treinamento


(Rev.04)

68

Fireworks 8

Aula

15
NESTA AULA IREMOS FAZER UM ANIMAO
Entre no Fireworks.
Abra um novo arquivo com tamanho 800x600 de cor vermelha.
Clique no menu File e clique em Import, ache pasta: C:\Arquivos de
programas\Onbyte\Fireworks8 e d um duplo clique no arquivo: Nave.jpg. Clique dentro
da rea de desenho para aparecer nave.
Deixe como abaixo:

Clique na janela Frames and History. Caso no estiver aparecendo clique no menu
Window e clique em Frames.

Clique na seta da caixa Options e escolha Duplicate Frame.


Na caixa que aparece digite 10 e clique em OK.
Clique sobre o nome Frame2.
Pegue a ferramenta Rectangle e faa um retngulo como abaixo.

Clique na ferramenta SubSelection.

Clique nos quadrados azuis em volta do retngulo e deixe como abaixo:

Fireworks 8
69

Deixe clicado nesse retngulo que voc acabou de ajustar, clique no menu edit e escolha
copy.
Clique no nome Frame 3 e clique no menu Edit e escolha paste.
Clique no nome Frame 4 e clique no menu Edit e escolha paste.
Clique no nome Frame 5 e clique no menu Edit e escolha paste.
Clique no nome Frame 6 e clique no menu Edit e escolha paste.
Clique no nome Frame 7 e clique no menu Edit e escolha paste.
Clique no nome Frame 2.
Clique no menu File e clique em Import, ache pasta: C:\Arquivos de
programas\Onbyte\Fireworks8 e d um duplo clique no arquivo: Pessoa.jpg. Clique
dentro da rea de desenho para aparecer. Deixe como abaixo.

Deixe clicado no desenho que voc acabou colocar, clique no menu edit e escolha copy.
Clique no nome Frame 3 e clique no menu Edit e escolha paste.
Clique no nome Frame 4 e clique no menu Edit e escolha paste.
Clique no nome Frame 5 e clique no menu Edit e escolha paste.
Clique no nome Frame 6 e clique no menu Edit e escolha paste.
Clique no nome Frame 7 e clique no menu Edit e escolha paste.
Clique no nome Frame 3 e suba um pouco o desenho da pessoa como abaixo:

Clique no nome Frame 4 e suba mais um pouco o desenho.


Clique no nome Frame 5 e suba mais um pouco o desenho.
Clique no nome Frame 6 e suba mais um pouco o desenho.

Bit Point tecnologia & Treinamento


(Rev.04)

70

Fireworks 8

Clique no nome Frame 7 e suba mais um pouco o desenho, seu desenho deve estar como
abaixo nesse frame.

Clique no nome Frame 8, clique na ferramenta Pointer e depois clique na nave.

Clique na ferramenta scale.


Diminua o tamanho da nave e arraste um pouco para cima e para a esquerda, como
abaixo:

Clique no nome Frame 9, Diminua o tamanho da nave mais um pouco e arraste mais para
cima e para a esquerda, como abaixo:

Clique no nome Frame 10, Diminua o tamanho da nave mais um pouco e arraste mais
para cima e para a esquerda, como abaixo:

Clique no nome Frame 11, Diminua o tamanho da nave mais um pouco e arraste mais
para cima e para a esquerda, como abaixo:

Clique no nome Frame 1. Clique no menu File e clique em Image preview. Na caixa que
se abre clique na guia Animation.
Segure a tecla Shift apertada e clique no Frame 2, depois clique no Frame 3 e faa isso
at selecionar o Frame 11, ou seja todos os frames. Na caixa do relgio digite 100. Clique
no boto Export.
Digite o nome Animao escolha a pasta meus documentos para gravar e clique no
boto export.

Fireworks 8
71

Aula

16
Minimize a tela do Fireworks. D um duplo clique na pasta meus documentos. D um
duplo clique em sua animao que se chama Animacao.gif.
Feche a animao, feche a pasta meus documentos. Clique no Fireworks na barra de
tarefas para ele voltar. Feche o Fireworks e salve seu trabalho na pasta meus
documentos com nome de Aula15.

AVALIAO GERAL
1

Entre no Fireworks.

73.Abra um novo arquivo com tamanho 800x600 e transparente.


74.Crie uma tela de entrada de um site com menus que voc passa o mouse e abre
as opes, tipo o que fizemos na aula 8. na aula. Nos exerccios da aula 5 foi
criado uma tela simples. Seja criativo, entre na internet e veja outros sites e crie
o seu.

Bit Point tecnologia & Treinamento


(Rev.04)

72

Fireworks 8

Anotaes
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________