Download - Fireworks Exemplos
-
7/24/2019 Fireworks Exemplos
1/52
1
..: Usando blend mode : Difference:..
::Objectivo::
Mostrar uma maneira simples de se obter um interessante efeito em um texto com uso docomando differencedo painel layers.
::Novo documento::
Abra o FW - (bvio!) :-)
ecle trl " #ou selecione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovodocumento*$ conforme mostrado na fiura abaixo.
A+uste as dimens,es de Canvas(palco$ rea de trabalo$ tela$ etc...) para:
arura: /00 pixels - Altura: /00 pixels
or da ela: 1000000. ecle 23.
::Desenhe um rectngulo::
4-) 5efina a cor de preencimento vermela6
7-) li%ue na ferramenta rect8nulo6
9-) li%ue e arraste o cursor no palco para desenar um rect8nulo.
-
7/24/2019 Fireworks Exemplos
2/52
2
::O texto::
4-) 5efina a cor do texto iual a cor do rect8nulo: vermela6
7-) li%ue na ferramenta texto6
9-) li%ue e arraste o cursor no palco para definir um rect8nulo para o texto na posi;o entreas duas cores$ conforme mostrado abaixo e diite um texto.Nota:A+uste os par8metros da fonte (tipo$ tamano$ nerito$ espaamentos$ etc..) conformesuas prefereleccione o texto diitado6
7-) #o painel *ayers* abra o menu *?lend Mode* e6
9-) cli%ue na op;o *5ifference*6
2 texto assume as cores opostas do fundo$ conforme mostrado na fiura.
-
7/24/2019 Fireworks Exemplos
3/52
3
::O retoque final::
@ronto! amos aparar as sobras.
4-) >eleccione a ferramenta rop6
7-) li%ue e arraste o cursor no palco para definir um rect8nulo de corte em volta do texto6
Becorte o rect8nulo definido.
::O efeito final::
5epois de recortado o rect8nulo$ conforme acima seu texto ficar assim:
-
7/24/2019 Fireworks Exemplos
4/52
4
..: Fireor!s: "feitos de relevo em textos:..
-
7/24/2019 Fireworks Exemplos
5/52
5
::Objectivo::
Apresentar uma tCcnica para aplica;o de efeitos de relevo em textos$ com uso do Fireor!s.
::#$resenta%&o::
A proposta C a de examinar passo a passo as etapas para se obter os efeitos *Belevo elevado*
e *DnterioriEar relevo*em dois textos distintos.=ste tutorial sup,e %ue voc< tem no,es bsicas de manipula;o das ferramentas doFireorGs.
::'o.(asso::
Abra o FW - (bvio!) :-)
ecle trl " #ou seleccione$Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovodocumento*$ conforme mostrado na fiura abaixo.
A+uste as dimens,es de anvas (palco$ rea de trabalo$ tela$ etc...) para:arura: 700 pixels
Altura: 4H0 pixels
or da ela: ransparente.
ecle 23.
::)o.(asso::
4-) >eleccione a ferramenta B=I#JK26
7-) desene um rect8nulo preencendo toda a tela (canvas). Bect8nulo de 700 x 4H0px6
9-) com o rect8nulo seleccionado$ a+uste a cor de preencimento para 1LLLLLL - slido (umtom cinEa mCdio).
-
7/24/2019 Fireworks Exemplos
6/52
6
::*o.(asso::
4-) >eleccione a ferramenta =N26
7-) defina o estilo$ o tamano a cor e o peso (nerito ou n;o) do texto6
9-) diite o texto na metade superior do rect8nulo$ mas n;o se preocupe com o luar exactodo texto aora. #o fim acertamos tudo!
::+o.(asso::
2 primeiro texto est na rea de trabalo do FW. amos ao seundo texto.
Bepita os passos acima$ diitando outro texto$ aora na metade inferior da tela$ mas n;o sepreocupe com o luar exacto do texto aora. #o fim acertamos tudo!
@ara faEer com %ue este seundo texto ocupe uma extens;o iual ao do primeiro texto faa oseuinte:
-
7/24/2019 Fireworks Exemplos
7/52
7
a-) Arraste as alas do bloco de texto (em aEul no deseno abaixo) atC alinar as suas bordases%uerda e direita com o texto de cima.
b-) li%ue no bot;o *esticado*para o texto ocupar todo o bloco de texto.
::,o.(asso::
4-) >eleccione o primeiro texto e abra o menu *=feitos*6
7-) desliEe atC *anfro e relevo*para abrir o sub-menu69-) cli%ue no efeito*Belevo elevado*$ para abrir a caixa de diloo dos par8metros desteefeito.
-
7/24/2019 Fireworks Exemplos
8/52
8
::-o.(asso::
#a caixa de diloo %ue voc< acabou de abrir:
4-) a+uste as defini,es de relevo elevado para os par8metros mostrados na fiura abaixo6
7-) mude a cor do texto para 1LLLLLL.
::o.(asso::
2 primeiro texto est 23 por en%uanto. amos ao seundo texto.
Bepita os passos descritos anteriormente para o primeiro texto aplicando aora o efeito*DnterioriEar relevo*.
-
7/24/2019 Fireworks Exemplos
9/52
9
::/o.(asso::
5e modo semelante ao procedimento anterior$ a+uste as defini,es do relevo conformemostrado na fiura abaixo.
::0o.(asso::= para concluir vamos aos a+ustes finais.
>eleccione os dois textos ao mesmo tempo6
Abra o menu Modificar &&&' Alinar &&&' 5istribuir alturas. om isso voc< a+usta os doistextos na vertical.
Aora descubra voc< mesmo como a+ust-los na O2BDP2#A.
5ica: C pelo mesmo menu *Modificar*$ mas se n;o conseuir$ poste sua dQvida em um frumFW!
-
7/24/2019 Fireworks Exemplos
10/52
10
::O efeito final::
>e voc< usou as mesmas defini,es deste tutorial$ vai terminar com um deseno iualEino aeste ai em baixo!
-
7/24/2019 Fireworks Exemplos
11/52
11
..: "feito de anel em texto :..
?aseado em tutorial publicado no site Meteor Webdesin
::Objectivo::
1ostrar uma t2cnica de constru%&o de um anel decorativo em uma letra.
::3is&o anteci$ada::
@ara uma vis;o antecipada do efeito$ ve+a no final desta pina$ textos decorados com o anelna primeira letra.
::(rimeiros $assos::Acompane as etapas 4 a / na fiura mostrada abaixo:
4-) onstrua duas elipses de cores e tamanos diferentes6
7-) olo%ue uma elipse sobre a outra6
9-) >eleccione as duas elipses v ao menu Modify &' ombine @ats &' @unc6
/-) A elipse menor deve ter RfuradoR a maior como mostrado. =st pronto o anel.
::4eguindo em frente::
amos novamente acompanar os passos da fiura a seuir:
http://meteorwebdesign.net/http://www.maujor.com/fw/textoanel.php#effinalhttp://www.maujor.com/fw/textoanel.php#effinalhttp://meteorwebdesign.net/ -
7/24/2019 Fireworks Exemplos
12/52
12
4-) >eleccione a elipse furada$ v ao menu Modify &' ransform &' >Ge
Aparece um rect8nulo preto com %uadradinos em volta como mostrado.
4egure a tecla>ifte posicione o ponteiro do mouse %ue aora tem a forma de uma flexina
redonda$ no lado direito do %uadrado %ue apareceu e ire no sentido anti-orrio.
oc< notar %ue o rect8nulo ira aos pulos de uma amplitude iual a 4Ho6
7-) 5< 9 pulos e voc< ter irado o anel /Ho
como mostrado6
9-) 5esene uma letra. =u desenei um 1de Mau+or. @osicione a letra #5674do anel
>e voc< seuiu a se%u
-
7/24/2019 Fireworks Exemplos
13/52
13
Aora voc< trabalar com dois ar%uivos contendo a letra e o anel.
4-) seleccione a letra e o anel e tecle trl " (copiar)em seuida tecle trl " # (novodocumento). Dsto faE abrir uma +anela popup para as dimens,es do novo palco. Aceite asdimens,es clicando 23 na +anela %ue se abriu e voc< ter um palco vaEio na tela.
li%ue em %ual%uer luar no palco e em seuida tecle trl " (colar)Aora voc< tem dois ar%uivos iuais mostrando a letra e o anel. #este ar%uivo %ue vocplit (ou tecle trl " >ift " U). Aora sim apaue$ seleccione o
%ue restou e tecle trl " (copiar). Aora volte ao ar%uivo %ue tem a letra e o a nel e tecletrl " (colar).
9-) FaEendo tudo isto voc< obtCm o %ue est mostrado no nQmero 9 da fiura acima.
/-) 5< um Eoom onde acaba de ser RcoladoR o %ue voc< copiou e colou.
H-) 2 Eoom aparece como neste nQmero da fiura. rabale no Eoom com a ferramenta RlpisR
para limpar o vermelo %ue ficou na frente do branco.
::Usando a letra com anel::
-
7/24/2019 Fireworks Exemplos
14/52
14
A seuir uma aplica;o da letra com anel %ue acabei de construir.
=screvi o nome Mau+or usando a mesma fonte e tamano %ue usei no tutorial.
>eleccionei a letra com o anel copiei e colei em cima do M de Mau+or.
>eleccionei tudo (Mau+or " letra com anel) fui ao menu Modify &' Flatten >election (ou teclerlt " >ift " Alt " Punindo tudo em um bitmap Qnico.
Apli%uei efeitos =ffects &' ?evel and =mboss &' Baised =mboss e depois Filters &' Ad+ustolor &' OueS>aturation.
-
7/24/2019 Fireworks Exemplos
15/52
15
..: "feito chocolate em textos :..
::Objectivo::
Mostrar a constru;o de um efeito simulando a aparelection:
::#$licando os efeitos::
seleccione o texto e v ao menu: Filters =ye andy /00 = ?evel ?ossconforme mostrado abaixo.
::Os $armetros::
A escola no menu$ abrir uma +anela para voc< confiurar as op,es para o filtro$ conformemostrado na fiura abaixo.
2bserve %ue no topo desta existem tr
-
7/24/2019 Fireworks Exemplos
16/52
16
A seuir$ passe para a aba ?evel @rofilee escola arve.
li%ue 23 no bot;o da +anela e pronto$ t feito o efeito cocolate no texto.
=ste foi bem simples X
::"feito final::
2 efeito final C conforme mostrado abaixo:
Aora voc< pode usar sua criatividade e obter varia,es leais
#a primeira usei uma fonte diferente da usada no tutorial e nas duas seuintes apli%uei o filtro5ripdaAlien >Gin =ye andy H: #ature$ %ue n;o C defaultdo FW$ voc< precisa instalar.
-
7/24/2019 Fireworks Exemplos
17/52
17
-
7/24/2019 Fireworks Exemplos
18/52
18
..: "feito fogo :..
::Objectivo::
Mostrar uma tCcnica de constru;o de efeito foo.
::3is&o anteci$ada::
=ste tutorial mostra uma tCcnica para se obter o efeito foo conforme mostrado nesta
D>Y2 A#=D@A5A.
::Novo documento::
Abra o FW
ecle trl " #ou seleccione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovo
documento*.
A+uste as dimens,es de Canvas(palco$ rea de trabalo$ tela$ etc...) para:
arura: /H0 pixels - Altura: 7H0 pixels
or da ela: @reta - 1000000
ecle 23.
::# forma inicial::
onstrua$ ocupando a metade inferior do palco$ um rect8nulo com cor de preencimentobranca e sem lina de contorno$ conforme mostrado na fiura abaixo.
om o rect8nulo seleccionado transforme-o em bitmap teclando >ift " trl " Alt " P 6ouuse o menu Modify &&' Flatten >election 6
::#$licando o $rimeiro efeito 9 4mudge 5ool::
seleccione o rect8nulo e escola a ferramenta >mude tool a+ustando os par8metros >iEe$=de$ >ape e @ressure conforme mostrado
http://i79.photobucket.com/albums/j152/maujor/fw/fogo7.jpghttp://i79.photobucket.com/albums/j152/maujor/fw/fogo7.jpg -
7/24/2019 Fireworks Exemplos
19/52
19
om a ferramenta escolida arraste sobre a parte superior do rect8nulo branco para cima emdirec;o ao palco preto e para os lados.
@rati%ue um pouco e voc< conseuir facilmente obter as *lZnuas de foo* em cima dorect8nulo branco . onstrua alumas poucas destas lZnuas espaadas uma da outra.
Altere o valor >iEeda ferramenta para 7He construa mais alumas lZnuas espaadas.
Altere novamente o valor >iEeda ferramenta aora para 4He construa mais alumas lZnuas.
oc< ir perceber %ue para cada valor >iEevai obter *linuas* menores.
@rati%ue um pouco e procure acertar o aspecto das *lZnuas* o mais prximo possZvel do real.
#o fim voc< obter alo talveE atC melor do %ue eu obtive e mostro a seuir:
::#$licando o segundo efeito 9 ue;4aturation::
seleccione o rect8nulo e abra o menu: Filters (Alt " i) &&' Ad+ust olor &&'OueS>aturation6
A+uste os par8metros do efeito conforme mostrado na fiura e tecle 23
-
7/24/2019 Fireworks Exemplos
20/52
20
::Du$licando o laia a numera;o na fiura
4-) li%ue no trianuloEino do painel ayer para abrir um menu suspenso.
#o menu %ue se abre escola 5uplicate ayer...
7-) Mar%ue ?efore current layer(antes do layer atual)
9-) ecle 23
/-) 2bserve %ue foi criada uma cpia do ayer 4 Rem cimaR (antes dele) camada ayer 7
::#$licando o terceiro efeito 9 ue;4aturation no =a
-
7/24/2019 Fireworks Exemplos
21/52
21
Abra o menu: Filters (Alt " i) &&' Ad+ust olor &&' OueS>aturation6
A+uste os par8metros do efeito conforme mostrado na fiura e tecle 23.
::#$licando o quarto efeito 9 Color::
seleccione o ayer 76
Abra o menu suspenso$ indicado pela seta vermela na fiura$ do painel ayer e escola olorpara o ayer 7.
::Finali>ando::
=scola a ferramenta rope recorte como mostrado a seuir.
#ota: [uanto maior sua abilidade na manipula;o da ferramenta >mude ooltanto mais real
ser o resultado final do efeito.@ois$ como voc< deve ter notado foi com esta ferramenta %ue criamos as labaredas do foo.
-
7/24/2019 Fireworks Exemplos
22/52
22
..: ?ot@es com chanfro externo :..
::Objectivo::
Mostrar o uso do efeito *canfro externo* e suas 7\ op,es em rect8nulos$ para construir
bot,es.
::Novo documento::
Abra o FW - (bvio!) :-)
ecle trl " #ou seleccione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovodocumento*$ conforme mostrado na fiura abaixo.
A+uste as dimens,es de Canvas(palco$ rea de trabalo$ tela$ etc...) para:
arura: 700 pixels - Altura: 4H0 pixels
or da ela: ransparente. ecle 23.
::O rectngulo::
om o palco para constru;o do novo documento na tela$ vamos comear desenando umrect8nulo nas dimens,es do bot;o a construir.
4-) li%ue no Zcone da ferramenta *Bet8nulos e =lZpses*6
7-) #o menu %ue se abre$ cli%ue em *Ferramenta Bet8nulo Arredondado*
-
7/24/2019 Fireworks Exemplos
23/52
23
2bserve a fiura abaixo:
4-) om a ac;o descrita no item anterior o ponteiro do mouse transforma-se em uma*cruEina*$ pronto para desenar o rect8nulo pela ac;o de arrastar e soltar.
5esene um rect8nulo sem se preocupar com as dimens,es!6
7-) om o rect8nulo desenado e seleccionado$ a+uste a cor do preencimento para sua corescolida. #este tutorial usei a cor A000000B
9-) Mantena o rect8nulo seleccionado e nas +anelinas W (larura)e O (altura)diite asdimens,es do rect8nulo6
/-) =scola o raio de arredondamento dos cantos do rect8nulo.
::O menu do chanfro::
4-) seleccione o rect8nulo (cli%ue em cima dele). *Aparece* um contorno em lina aEul combolinas nos cantos conforme mostrado na fiura6
7-) li%ue em cima do sinalEino de =feitospara abrir o menu dos canfros6
9-) 5esliEe o mouse atC *anfro e relevo*e no sub-menu %ue se abre cli%ue e
m /-) *anfro externo*6
-
7/24/2019 Fireworks Exemplos
24/52
24
::#$lica%&o do chanfro::
om a ac;o descrita no item anterior abre-se um caixina de diloo para aplica;o decanfros6
4-) @or default ser aplicado no nosso rect8nulo um canfro.
7-) =scola uma cor para o canfro. #este tutorial apli%uei uma cor iual a cor do ret8nuloA000000.
oc< pode escoler uma cor diferente.
9-) =scola uma espessura para o canfro6
/-) #estas 9 +anelinas a+uste os detales de sombras e orienta,es para o canfro. Faatestes variando os valores6
H-) e V-) por default estas +anelinas devem estar com o canfro Acatadoe em Alto Belevo.
Abra estas +anelinas clicando na setina ao lado delas.
]-) A +anelina onde esta escrito Alto relevo abre-se e voc< tem mais 9 op,es6
\-) A +anelina aberta com as / op,es possZveis.
-
7/24/2019 Fireworks Exemplos
25/52
25
::1ais o$%@es::
4-) seleccione o rect8nulo6
7-) li%ue na setina e +anelina onde est escrito Acatadoabre-se e voc< tem mais Vop,es6
9-) A +anelina aberta com as ] op,es possZveis.
::Os )/ bot@es::
oc< pode ent;o combinar cada uma das / op,es de uma +anelina com as ] op,es daoutra6
om isso voc< obtCm ] x / & 7\ tipos de bot,es$ mostrados abaixo.
-
7/24/2019 Fireworks Exemplos
26/52
26
::Nota final::
Mostrei neste tutorial a tCcnica bsica para constru;o de bot,es com canfro externo.
Mas$ isto n;o C tudo.
5< asas a sua criatividade e ao dominar esta tCcnica$ altere e combine cores$ faapreencimentos derad
-
7/24/2019 Fireworks Exemplos
27/52
27
..: "feito met8lico cromado :..
::Objectivo::
Mostrar uma tCcnica de constru;o de efeito cromado em superfZcie metlica.
::3is&o anteci$ada::
=ste tutorial mostra a tCcnica se obter o efeito cromado conforme mostrado nesta
D>Y2 A#=D@A5A.
::Novo documento::
Abra o FW
ecle trl " #ou selecione$ Ar%uivo &&&' #ovopara abrir a caixa de diloo *#ovo
documento*$ conforme mostrado na fiura abaixo.
A+uste as dimens,es de Canvas(palco$ rea de trabalo$ tela$ etc...) para:
arura: 700 pixels - Altura: 700 pixels
or da ela: 1FF.
ecle 23.
::# forma inicial::amos construir nosso efeito cromado em um rect8nulo de 4H0px x 4H0 px com cantosarredondados.
Assim$ desene no palco um rect8nulo com cantos arredondados$ cor de preencimentobranca e sem lina de contorno$ conforme mostrado na fiura abaixo.
::#$licando o $rimeiro efeito 9 nner ?evel::
seleccione o rect8nulo %ue voc< construiu e abra o menu =ffects:"$ localiEado na parte direitainferior loo abaixo do palco e mostrado na fiura6
http://i79.photobucket.com/albums/j152/maujor/fw/cromo8.gifhttp://i79.photobucket.com/albums/j152/maujor/fw/cromo8.gif -
7/24/2019 Fireworks Exemplos
28/52
28
4-) #o menu %ue se abre escola: ?evel and =mboss &&' Dnner bevel6
7-) A+uste os par8metros do efeito conforme mostrado na fiura6
9-) oc< obter o primeiro efeito no rect8nulo$ como mostrado.
::#$licando o segundo efeito 9 Curves::
seleccione o rect8nulo e abra o menu =ffects:"$ outra veE6
#o menu %ue se abre escola: Ad+ust olor &&' urves6
A+uste os par8metros do efeito conforme mostrado na fiura6
li%ue e arraste os pontos da curva para as posi,es mostradas6
oc< obter o seundo efeito aplicado no rect8nulo$ como mostrado.
-
7/24/2019 Fireworks Exemplos
29/52
29
::#$licando o terceiro efeito 9 Curves::
seleccione o rect8nulo e abra o menu =ffects:"$ outra veE6
#o menu %ue se abre escola: Ad+ust olor &&' urves6
A+uste os par8metros do efeito conforme mostrado na fiura6
li%ue e arraste os pontos da curva para as posi,es mostradas6
oc< obter o terceiro efeito aplicado no rect8nulo$ como mostrado.
::#$licando o quarto efeito 9 nner 4hado::
seleccione o rect8nulo e abra o menu =ffects:"$ outra veE6
-
7/24/2019 Fireworks Exemplos
30/52
30
#o menu %ue se abre escola: >ado and Jlo &&' Dnner >ado6
A+uste os par8metros do efeito conforme mostrado na fiura6
oc< obter o %uarto efeito aplicado no rect8nulo$ como mostrado.
::#$licando o quinto efeito 9 Dro$ 4hado::
seleccione o rect8nulo e abra o menu =ffects:"$ outra veE6
#o menu %ue se abre escola: >ado and Jlo &&' 5rop >ado6
A+uste os par8metros do efeito conforme mostrado na fiura6
oc< obter o %uarto efeito aplicado no rect8nulo$ como mostrado.
::O 5exto::
Finalmente para concluir o trabalo vamos escrever o texto.
Ksei fonte Arial ?lacG$ nerito de 90 px na cor 1 (cinEa claro).
escreva o texto e apli%ue =ffects &' ?evel and =mboss &' Dnner ?evel
Auste os par8metros do efeito conforme mostrado e pronto!
=st terminado o efeito cromado metlico.
-
7/24/2019 Fireworks Exemplos
31/52
31
-
7/24/2019 Fireworks Exemplos
32/52
32
..: Constru%&o de menu $o$9u$ 9 (arte ' :..
::ntrodu%&o::
Menu pop-up C um elemento de interface muito usado para solucionar o problema deacomodar uma rande %uantidade de linGs de navea;o em um espao reduEido.
#este tipo de navea;o o desenvolvedor tem a possibilidade de pro+ectar uma barra denavea;o oriEontal com submenus.
#este tutorial mostrarei como construir uma barra de navea;o oriEontal para abriar um$dois ou mais nZveis de navea;o$ abrindo na vertical.
2s subnZveis opcionalmente podem ser pro+ectados para abrir na oriEontal.
Ksarei o FireorGs para erar o OM e o respectivo +avascript para funcionamento do menu emostrarei como exportar para uma pina eb.
::Uma vis&o anteci$ada::
5esenvolverei o tutorial construindo uma barra de navea;o com / linGs %ue abrem umsubnZvel nos linGs inG - 4 e inG - 7$ tr
-
7/24/2019 Fireworks Exemplos
33/52
33
o inG - 4./
o inG - 4.H
2 inG - 7um subnZvel contendo 9 linGs:
o inG - 7.4
o inG - 7.7
o inG - 7.9
2 inG - 9com tr
-
7/24/2019 Fireworks Exemplos
34/52
34
Km rect8nulo de /\0 x 4]px com fundo na cor 1eeeeee (cinEa claro) e bordas de 4pxna cor 1cccccc (cinEa escuro)6
r
-
7/24/2019 Fireworks Exemplos
35/52
35
Aora no palco uma rade de \0 x 4Hpx.
>e voc< nunca trabalou com Jrid tente o seuinte para treinar$ antes de prosseuir:
ecle trl " Alt " Jpara RdesliarR o rid$ tecle outra veE para RliarR.
5< um Eoom de 700^$ peue a ferramenta rect8nulo e desene aluns rect8nulos parasentir como C fcil colocar os vCrtices sobre os pontos de interse;o do rid.
Dsto C devido ao R>nap to JridR. ecle trl " Alt " >ift " Jpara RliarR e RdesliarR o >nap toJrid.
erminando de treinar confira se o R>nap to ridR est liado.
::Construindo os lin!s e as fatias slicesG::
2bserve a se%u
-
7/24/2019 Fireworks Exemplos
36/52
36
4.onstrua / (%uatro) ret8nulos de \0 x 4Hpx sem bordas e com a cor do fundo
1eeeeee$ um ao lado do outro sobre o rid6
7.=screva o nome dos linGs com fonte Arial$ tamano 44$ nerito e cor 1cc9900 e
posicione sobre os ret8nulos. @or en%uanto esconda os textos dos linGs$ para n;o
atrapalar$ indo ao painel layers (a teclaF7 mostraSesconde o painel) e desliando o
olo dos textos6
9.li%ue sobre cada um dos %uatro ret8nulos com a tecla >iftpressionada$ paraselecionar os / ao mesmo tempo.
/. ao menu =dit &' Dnsert &' >liceou tecle Alt " >ift " K . ai aparecer uma +anela
popup6
H.@ressione o bot;o Multiplena +anela %ue se abriu$ ou tecle a letra M6
V.>;o criadas / fatias (verde com um cZrculo) sobre os / ret8nulos como mostrado na
fiura.
-
7/24/2019 Fireworks Exemplos
37/52
37
::Construindo o conteHdo do subnEvel do =in! 9 '::
Acompane as etapas 4 a / na fiura mostrada abaixo:
-
7/24/2019 Fireworks Exemplos
38/52
38
4. li%ue no palco$ fora das fatias para sumir os cZrculo das fatias. li%ue no rect8nulo
do inG - 4 para aparecer o cZrculo da sua fatia. li%ue sobre o cZrculo para aparecer
um menu e escola Add @op-up menu (adicionar um menu pop-up). Dsto far aparecer
a +anela R@op-up Menu =ditorR.
7. li%ue no ret8nulo loo abaixo de RextR e diite o nome do primeiro linG6
9. Faa o mesmo no ret8nulo loo abaixo de RinGR diitando o endereo do linG$ repita
para o ret8nulo abaixo de RaretR escolendo onde abrir o linG6
/. Bepita os passos acima para os demais linGs do subnZvel.
::Definindo a a$arIncia do submenu do =in! 9 '::
Acompane na fiura mostrada abaixo:
endo concluZdo a etapa anterior cli%ue na aba RAppearanceR do =ditor aberto6
A%ui voc< define a apar
-
7/24/2019 Fireworks Exemplos
39/52
39
::1ais defini%@es de a$arIncia do submenu do =in! 9 '::
Acompane a fiura mostrada abaixo:
A%ui voc< define mais itens de apar
-
7/24/2019 Fireworks Exemplos
40/52
40
A%ui voc< define o local onde ser aberto o submenu e as coordenadas N e _ en rela;o aoinG principal.
2bserve no caso deste tutorial defini x & -4 para comear na borda es%uerda de 4px doprimeiro linG e y&4] para posicionar loo abaixo do rect8nulo de /\0 x 4]px.
erminado cli%ue em R5oneR no =ditor.
@ara conferir seu trabalo faa o seuinte:
embra %ue loo aps diitar o texto dos / linGs voc< desapareceu com eles clicando no RoloRdo painel layersX
@ois bem$ vamos traE
-
7/24/2019 Fireworks Exemplos
41/52
41
..: ?ot&o 3eerle :..
#este tutorial mostro como criar um bot;o$ com o uso do FireorGs.
::# forma inicial::
5esene um rect8nulo com cantos arredondados nas dimens,es do bot;o a construir eapli%ue um radiente com os par8metros mostrados na fiura a seuir:
::Dividindo a forma inicial em dois::
A seuir vamos dividir a forma construZda cortando-a na oriEontal com a ferramenta faca.
4.seleccione a forma e peue a ferramenta faca (indos - >ift " _)
@ressione a tecla >ifte *corte* a forma no meio e na oriEontal6
7.arue a ferramenta faca e seleccione a parte inferior da forma. 5efina as cores de
preencimento do radiente como mostrado6
9.A+uste o par8metro de radiente como mostrado6
/.seleccione a parte superior da forma e a+uste o par8metro de radiente como
mostrado6
-
7/24/2019 Fireworks Exemplos
42/52
42
::Criando o detalhe su$erior::
rie uma cpia do bot;o construZdo$ seleccione a parte superior e com a ferramenta faca corteuma tira em cima como mostrado.
Apaue tudo abaixo e fi%ue com a tira %ue voc< acabou de criar.>eleccione a tira e reduEa suas dimens,es para LH^.
-
7/24/2019 Fireworks Exemplos
43/52
43
::Colocando sombra no bot&o::
5eixe a tira de lado. seleccione o bot;o construZdo e apli%ue uma sombra (5rop >ado) comomostrado.
::(osicionando o detalhe su$erior::
@eue a tira %ue voc< construiu e colo%ue em cima do bot;o como mostrado. Apli%ue fundobranco 1FFFFFFe reduEa a opacidade da tira para 4H.
Nota: se voc< deslocar a tira ela ficar por baixo do bot;o$ ent;o tena o cuidado de antes dedeslocar a tira traE
-
7/24/2019 Fireworks Exemplos
44/52
44
..: Divis&o de um cErculo :..
::Objectivo::
Mostrar uma tCcnica para dividir um cZrculo em um nQmero %ual%uer de partesiuais.
::O cErculo::
5esene o cZrculo. #este tutorial usei inicialmente um cZrculo de 4H0 x 4H0pxna cor verde.
2 cZrculo C desenado com a ferramenta =lipse arrastando-a no palco
en%uanto se mantCm pressionada a tecla >ift.
2pcionalmente voc< pode arrastar a ferramenta no palco$ desenando umaelipse %ual%uer e a seuir com a elipse seleccionada a+ustar no @ainel@roperties(loo abaixo do palco) as dimens,es em W iual a 4H0px e O iual a4H0px.
::# estrela::
A seuir vamos desenar uma estrela com a ferramenta @olyon. =staferramenta serve para desenar polZonos c`ncavos (no FW denominados depolyon) e estrelas denominadsas >tar.
5epois %ue voc< seleccionar a ferramenta v no painel @roperties e no menupopup escola >ape: >tar- >ides: 4H(nQmero de partes a dividir o cZrculo$eu usei 4H) - Anle:4
-
7/24/2019 Fireworks Exemplos
45/52
45
li%ue e arraste no palco para desenar uma estrela prxima ao cZrculo.
A+uste no painel @roperties as dimens,es da estrela para 40px maior %ue ocZculo$ no meu caso a+ustei para 4V0 x 4V0px.
::4obre$ondo as formas::
amos a seuir colocar a estrela em cima do cZrculo$ faEendo coincidir o centrode ambas. @ara isto$ seleccionamos as duas formas e usamos o Menu Modify Alin enter erticale a seuiur Modify Alin enter OoriEontal.
2pcionalmente voc< poder usar teclas de atalo para alinar trl " Alt " 7ea seuir
trl " Alt " H.
-
7/24/2019 Fireworks Exemplos
46/52
46
::# divis&o::
5epois de sobrepor as formas e estando com elas seleccionadas vamos faEer adivis;o do cZrculo.
ao Menu Modify ombine @ats @unc e a seuirModify ombine @ats >plit e pronto t feita a divis;o.
Aora voc< poder escoler cada uma das divis,es e mudar a cor ao seuosto.
::#lguns efeitos::
A seuir mostro aluns efeitos obtidos com esta tCcnica de divis;o do cZrculo.
-
7/24/2019 Fireworks Exemplos
47/52
47
..: 5exto com imagem :..
#este tutorial vou mostrar T voc
-
7/24/2019 Fireworks Exemplos
48/52
48
Feito isto ir surir loo abaixo outro drop don. li%ue e abrir uma *tira de op,es* deimaens. Bole a *tira* atC em baixo e escola *2ter(2utra)*.
Ao clicar em *2ter*$ se abrir a +anela para %ue voc< seleccione a imaem com a %ual vocobre o texto diitado$ desene um rect8nulo na cor preta e com aferramenta *scre* *sGe* distora o rect8nulo dando-le a forma de um
paraleloramo como mostrado na fiura abaixo:
=m 700H-47-04: oc< pode *pear* a ferramenta sGe assim: seleccione orect8nulo e tecle duas veEes a tecla *[*.
::Colando a m8scara::
Aora vamos colar o paraleloramo como mscara no texto:
seleccione o paraleloramo e tecle trl " Npara recort-lo do palco6
seleccione o texto %ue est no palco e menu Modify &&' @aste as MasG
oc< obter o mostrado na fiura abaixo
::Desvinculando a m8scara::
2bserve no painel *ayers* da fiura acima um sZmbolo em forma de *\* (oito)entre o texto e a mscara.
D[K= no sZmbolo e ele vai desaparecer$ desvinculando o texto da mscara6
@eue a ferramenta de selec;o seta branca e cli%ue dentro do paraleloramo%ue aora est com uma lina de contorno e sem preencimento (cor amarelaneste tutorial) para seleccion-lo e arraste para um lado e para outro paraconstatar %ue voc< pode mov
-
7/24/2019 Fireworks Exemplos
51/52
51
::Criando frames::
@osicione o paraleloramo no inZcio do texto como mostrado abaixo6
Abra o painel *Frames* >ift " F7
li%ue para abrir o menu suspenso do painel *Frames*
5uplicate Frames &&' #umber 79 &&' 23
::#nimando no $ainel Frames::
li%ue sobre Frame 7 e deslo%ue o paraleloramo uns 7 pixel para a direita6
li%ue sobre Frame 9 e deslo%ue o paraleloramo uns / pixel para a direita6
li%ue sobre Frame / e deslo%ue o paraleloramo uns V pixel para a direita6
li%ue sobre Frame H e deslo%ue o paraleloramo uns \ pixel para a direita6
-
7/24/2019 Fireworks Exemplos
52/52
repetido a opera;o atC atinir o Qltimo Frame %ue dever coincidir com aceada do paraleloramo no final do texto.
::O efeito final::
A%ui est o texto animado %ue voc< + avia visualiEado no inZcio deste
tutorial.
::Nota::
A %uantidade de Frames e o tempo de cada frame depender do tamano dotexto e da velocidade dese+ada para a anima;o.
[uanto maior o texto maior ser a %uantidade de Frames e em conse%u