DESIGN

TodososDireitosReservadosaoApostilando.com,proibidoareproduototal ouparcialdestematerial,comsanesprevistasemlei.

NDICE
NDICE .....................................................................................................................................2 INTRODUO..........................................................................................................................6

OCurso .......................................................................................................... 6 Nomenclatura ................................................................................................. 7 DownloaddeProgramas ................................................................................ 7

INTRODUOAODESIGNER ................................................................................................8

FormatosdeImagens ..................................................................................... 8 Escolhadeumapaletadecores ................................................................. 9

ADOBEFIREWORKSCS4.....................................................................................................11

OAMBIENTEDETRABALHO..................................................................... 12 ABARRADEFERRAMENTAS .................................................................... 13 OusodePainis....................................................................................... 14 Aberturadegrficosdeoutrosaplicativos ................................................ 15 CaixadeFerramentas .................................................................................. 17 readeTrabalho .......................................................................................... 19 Formasdevisualizao............................................................................. 20 RguaseLinhas........................................................................................... 20 Rguas ......................................................................................................... 20 LinhasGuias................................................................................................. 21 Modificandoareadesuatela..................................................................... 21 UtilizaodasFerramentasVetoriais ........................................................... 22 Linha ............................................................................................................. 23 Canetas ........................................................................................................ 25 FerramentaRetnguloesuasdivises......................................................... 26 FerramentaTexto ......................................................................................... 30 MenuText ................................................................................................. 31 Ferramentasdetransformao..................................................................... 32 Faca.............................................................................................................. 33 TrabalhandocomnossasFormas................................................................ 34 Alinhamentoedistribuio ........................................................................ 34 Grupos ...................................................................................................... 35 Empilhamentodeobjetos.......................................................................... 35 TransformaodeCaminhos .................................................................... 35 Preenchimentos............................................................................................ 39 Preenchimentos............................................... Erro!Indicadornodefinido. Efeitos........................................................................................................... 42 PainelEstilos ................................................................................................ 50 Camadas ...................................................................................................... 51 Mscaras ...................................................................................................... 53 Smbolos....................................................................................................... 55 CriandoAnimaes....................................................................................... 59

Bitmaps......................................................................................................... 65 MascarandoBitmaps .................................................................................... 65 Ferramentasdedesfoque............................................................................. 67 Ferramentasdeseleo ............................................................................... 68 Criandoumesfumaamento ..................................................................... 68 RubberStampTool....................................................................................... 69 AplicaesparaWEB ................................................................................... 71 Criandoumlayout ..................................................................................... 71 Exportaoemfatias................................................................................. 80 Exportandoumaartefatiada. .................................................................... 82 Rollovers....................................................................................................... 85 CriandoMenusPopUP ................................................................................ 88 CriandoumaGaleriadeimagens ................................................................. 91 MapasdeImagens ....................................................................................... 97 Consideraes.............................................................................................. 98
ADOBEPHOTOSHOP ...........................................................................................................99

readeTrabalho .......................................................................................... 99 BarradePropriedades................................................................................ 102 AsFerramentas .......................................................................................... 102 Painis ........................................................................................................ 105 Criando,abrindo,salvandoeexportando ................................................... 105 Redefinindoumaimagem ........................................................................... 109 Trim ......................................................................................................... 113 Selees ..................................................................................................... 114 Seleoretangular .................................................................................. 114 ElipticalMarquee..................................................................................... 115 GruposdeFerramentaLao ................................................................... 116 FerramentaVarinhaMgica.................................................................... 117 MenuSelect ............................................................................................ 118 Feather.................................................................................................... 119 Camadas .................................................................................................... 123 OpainelLayer......................................................................................... 124 Duplicandocamadas............................................................................... 127 Mesclandocamadas ............................................................................... 127 ModosdeMesclagem ............................................................................. 128 EstilosdeCamada .................................................................................. 132 PainelStyles ........................................................................................... 138 Textos ......................................................................................................... 140 TextodeMscara.................................................................................... 142 Rasterizandootexto ............................................................................... 145 DemarcadoreseShapes ............................................................................ 146 Tiposdedemarcadores........................................................................... 146 Cores .......................................................................................................... 148 Ferramentasdeutilizaodecores ........................................................ 149 ComandoFill ........................................................................................... 153 Traos ..................................................................................................... 155 Pincis ........................................................................................................ 156

FerramentaBrush ................................................................................... 156 Pencil ...................................................................................................... 157 Blur(desfoque)........................................................................................ 158 Sharpen(Nitidez) .................................................................................... 158 Smudge(Borrar)...................................................................................... 158 Dodge(Subexposio)............................................................................ 158 Burn(Superexposio)............................................................................ 158 Sponge(Esponja).................................................................................... 159 Restauraoetransformao..................................................................... 159 CloneStamp(Carimbo)........................................................................... 159 SpotHealingBrush,HealingBrush,PatcheRedEye ............................ 160 Eraser...................................................................................................... 161 Transformao. ....................................................................................... 161 Filtros .......................................................................................................... 164 FilterGallery............................................................................................ 165 Noise ....................................................................................................... 173 Sharpen................................................................................................... 174 Render .................................................................................................... 174 Vdeoe3D.................................................................................................. 175 Vdeo .......................................................................................................... 176 Abrindoovdeo ....................................................................................... 176 Renderizandoovdeo ............................................................................. 179 3D............................................................................................................ 182 Importandoummodelo3D...................................................................... 182 Ferramentasdeajusteecorreodecores ............................................... 185 Invert ....................................................................................................... 186 HueSaturation ........................................................................................ 186 Levels...................................................................................................... 191 Curves..................................................................................................... 192 BrilhoeContraste.................................................................................... 193 CriandoeexportandoumLayoutnoPhotoshop......................................... 194 ImportandoarquivodoCorelDraw.......................................................... 196 ExercciosdecriaocomPhotoshop ............. Erro!Indicadornodefinido.
ADOBEFLASH ....................................................................................................................207

Introduo................................................................................................... 207 OqueShockwaveFlash ...................................................................... 207 OAMBIENTEDOFLASH ....................................................................... 208 Preferncias ............................................................................................ 209 Atalhos .................................................................................................... 210 TeladeAbertura...................................................................................... 212 Configurandosuareadetrabalho......................................................... 213 Barradeferramentas .............................................................................. 215 CaixadeFerramentas............................................................................. 215 FerramentasdeDesenhoesuaspropriedades ...................................... 215 ManipulandoObjetos .................................................................................. 230 Trabalhandocomobjetosexternos............................................................. 232 Importandobitmaps................................................................................. 232

ImportandoarquivosemPSD ................................................................. 234 ImportandoarquivosdoIllustrator........................................................... 236 Importandoumarquivodeudio............................................................. 237 Importandovdeos................................................................................... 240 Smbolos..................................................................................................... 244 OstiposdeSmbolos: ............................................................................. 245 Filtros ...................................................................................................... 248 LinhadoTempo .......................................................................................... 250 Animao.................................................................................................... 251 AnimaoQuadroaQuadro ................................................................... 251 AnimaocomInterpolaodeMovimento ............................................ 252 MotionEditor ........................................................................................... 255 OnionSkin............................................................................................... 256 Propriedadesdabarradeferramentasdoquadro................................... 258 Suavizaodaanimao. ....................................................................... 259 Camadas .................................................................................................... 260 CamadasGuia ........................................................................................ 262 Exemplo .................................................................................................. 264 Mscaras................................................................................................. 266 InterpolaodeForma ............................................................................ 268 Trabalhandocomimagensimportadas ................................................... 269 ShapeHints............................................................................................. 270 TraceBitmap ........................................................................................... 271 Botes......................................................................................................... 272 BibliotecadeBotes................................................................................ 273 CLIPESDEFILME...................................................................................... 274 CinemticaInversa ..................................................................................... 277 BindTool ................................................................................................. 280 MotionPresetsespraybrushtool.............................................................. 281 MotionPresets ........................................................................................ 281 SprayBrushTool..................................................................................... 282 Aes.......................................................................................................... 285 OpainelAes........................................................................................ 285 UtilizandooScriptAssist......................................................................... 287 AesbsicasdoFlash .............................................................................. 290 Exemplodeutilizaodeactions ............................................................ 290 ProgramaoCentralizadaeDescentralizada ........................................ 293 PRECARREGADOR.................................................................................. 296 Criandoumcarregadorsimples .............................................................. 297 AplicaoStandAlone................................................................................ 298 AbaixoseguemoscomandosdoFSCommand ..................................... 299 CENAS....................................................................................................... 300 PUBLICAODOFILME........................................................................... 300 Concluso................................................................................................... 303

INTRODUO
AtualmentemuitosefalasobreserumWebdesigner,masafinaloqueisso. A forma de ser designer atualmente viaja por muitos campos, impresso, moda, produto, etc..., o Web Designer basicamente um desenhista de Internet.Eissoumtrabalhodemuitaresponsabilidade,sim,WebDesigner umaprofisso,noapenasumcursoligaracategoriadeInformtica. Para ser um Web Designer, necessrio conhecimento de cores, diagramao, clareza visual, e principalmente dois itens que hoje so muito cobradosusabilidadeeacessibilidade. Pela prpria situao de mercado hoje em dia, tentase fundir na criao de sites a funo de designer e desenvolvedor, importante ressaltar que so assuntos que embora ligados, so diferentes. Um desenvolvedor de sites precisa ter os mesmos requisitos de um desenvolvedor de sistemas, ou seja, saberlgicadeprogramao,orientaoaobjetos,estruturadedadosetc... Mas entoqual a funo doWeb Designer? Sua funo criar a parte visual respeitando as normas de um bom designer e montar o site de forma que respeiteasemnticadaWeb.

OCurso
Emnossocursotrataremosdapartetericaeprticadecomocriarumprojeto de site corporativo, desde o comeo do projeto, montagem do layout, diagramaoepublicaodosite. Paraqueissovenhaaserpossvel,vamostrabalharcomalgunsprogramasda empresaAdobehttp://www.adobe.com.br,pelagrandeintegraoquepossui entre os aplicativos e por ter as tecnologias que dominam o mercado. Os programassero: AdobeFireworksCS4:Permiteacriaodeelementoselayoutspara seusite,almdacriaodeelementosanimados. Adobe Photoshop CS4: Tratamento de imagens, otimizao de imagens,criaodeelementos. AdobeFlashCS4:Animaovetorialmultimdia.

 Adobe Dreamweaver CS4: Montagem e diagramao do site e publicaodomesmo.

Nomenclatura
Emnossocursoutilizaremosconesparadestacaritensimportantesduranteo curso.Anomenclaturasegueabaixo: Representaqueoassuntoasertratadodegrandeimportnciae requermuitaateno. Ferramentaoucomandojexistente,masquetenhamudanaou atualizao. Ferramentaoucomandodeversesanterioresdoprograma. FerramentaoucomandodisponvelapenasnaversoCS4 (utilizadanocurso).

AssuntoouexemplodisponvelemvdeoaulanoCDROM.

Arquivoaserutilizadonoexemplodaapostila,disponvelnoCD ROM.

DownloaddeProgramas
AAdobedisponibilizaversesdetesteparaosprogramasquevamosabordar em nosso curso, atravs do endereo http://www.adobe.com/downloads/ (versesemingls)ehttp://www.adobe.com/br/downloads/paraasversesem portugus.

INTRODUOAODESIGNER
AntesdeiniciaroaprendizadonasferramentasdecriaoWEB,importante conheceralgunsrecursosedicasimportantessobreomundodacriao.

FormatosdeImagens
GIF, ou Graphics Interchange Format, um formato grfico popular para a Web. GIFs contm um mximo de 256 cores. Alm disso, os GIFs podem conter uma rea transparente e vrios quadros para animao. Imagens com reas de cor slida podem se compactar mais ao serem exportadas como GIFs. Um GIF geralmente ideal para desenhos, logotipos, imagens com reastransparenteseanimaes. JPEG, desenvolvido pelo Joint Photographic Experts Group especificamente para imagens fotogrficas ou com cores de alta densidade. O formato JPEG suporta milhes de cores (24 bits). Esse formato o melhor para fotografias digitalizadas,imagensqueusamtexturas,imagenscomtransiodecoresem dgrad e qualquer imagem que exija mais de 256 cores. PNG, ou Portable NetworkGraphic,umformatogrficoverstilparaaWeb.Porm,nemtodos osnavegadoresdaWebpodemvisualizargrficosPNG.OformatoPNGpode suportar cores de at 32 bits, conter transparncia ou um canal alfa e ser progressivo. PNG o formato de arquivo nativo do Fireworks. Porm, arquivos PNG Fireworks contm informaes especficas do aplicativo que no so armazenadas em um arquivo PNG exportado ou em arquivos criados em outrosaplicativos.

WBMP, ou Wireless Bitmap, um formato grfico criado para dispositivos de computao mveis, como telefones celulares e PDAs (Personal Digital Assistant, assistente pessoal digital). Esse formato usado especificamente em pginasWAP (Wireless Application Protocol,protocolo de aplicaes sem

fio). O WBMP um formato de 1 bit, portanto, s duas cores ficam visveis: pretoebranco. TIFF, ou Tagged Image File Format, um formato grfico usado para armazenar imagens bitmap. TIFFs so usados com maior freqncia em publicaes impressas. Muitos aplicativos de multimdia tambm aceitam grficos TIFF importados. BMP, o formato de arquivo grfico do Microsoft Windows,umformatodearquivocomumusadoparaexibirimagensbitmap. BMPs so usados primariamente no sistema operacional Windows. Muitos aplicativospodemimportarimagensBMP.

Escolhadeumapaletadecores
GIFs e outros formatos de imagem de 8 bits contm uma paleta de cores. A paleta de cores uma lista de at 256 cores disponveis para o arquivo. Somente as coresdefinidasna paleta decores aparecem na imagem grfica, porm algumas paletas de cores contm cores que no esto no grfico. As seguintespaletasestodisponveisnoFireworks: Adaptive(Adaptativa)umapaletapersonalizadaderivadadascoresreaisdo documento.Aspaletasadaptativas,emgeral,produzemasimagensdemelhor qualidade. OBSERVAO Os arquivos JPEG no so exceo. Para mais informaessobrecontrolesdeotimizaodeJPEG.OBSERVAOUsandoa caixadedilogoSaveAs(Salvarcomo)doFireworks8possvelsalvartodos os tipos de arquivos mencionados acima (exceto PICT, que s suportado pela verso do Fireworks para Macintosh) nos formatos originais. O que no ocorrianasversesanterioresdoFireworks. Web Adaptive (Adaptativa Web) uma paleta adaptativa na qual as cores parecidas com cores web safe so convertidas para a cor web safe mais prxima.Ascoreswebsafesoaquelasqueseoriginamdapaleta Web216.Web216umapaletacomas216corescomunsaoscomputadores Windows e Macintosh. Essa paleta muitas vezes denominada paleta web

safe ou prova de navegador, pois produz resultados razoavelmente consistentesemvriosnavegadoresdaWebemqualquerplataforma,quando exibidasemmonitoresde8bits. Exact (Exata) contm as cores exatas usadas na imagem. Somente as imagenscontendo256coresoumenospodemusarapaletaExact(Exata).Se aimagemcontivermaisde256cores,apaletaseralternadaparaAdaptive. O Windows e o Macintosh contm 256 cores definidas pelos padres da plataformaWindowsouMacintosh,respectivamente. Grayscale (Tons de cinza) uma paleta de 256 ou menos tons de cinza. A escolhadessapaletaconverteraimagememtonsdecinza.

Black and White (Preto e branco) uma paleta que consiste somente em duascores:pretoebranco.

Uniform (Uniforme) uma paleta matemtica baseada em valores de pixels RGB. Custom (Personalizada) uma paleta que foi modificada ou carregada de uma paleta externa (arquivo ACT) ou um arquivo GIF. O ajuste da paleta de cores durante a otimizao afeta as cores da imagem. possvel otimizar e personalizarpaletasdecorescomousodatabeladecoresnopainelOptimize.

10

ADOBEFIREWORKSCS4

O Fireworks a soluo para produo e projetos grficos profissionais na Web.oprimeiroambientedeproduoquesuperaosdesafiosespeciaisque seapresentamaosdesenvolvedoreseprojetistasgrficosdaWeb. UseoFireworksparacriar,editareanimarimagensgrficasnaWeb,adicionar interatividade avanada e otimizar imagens em um ambiente profissional. O Fireworks combina ferramentas de edio de bitmap e vetorial. No Fireworks, tudo editvel, o tempo todo. E voc pode automatizar o fluxo de trabalho relativosatualizaesealteraes. OFireworksumaplicativodeltimageraoparaelaborargrficosparausar na Web. Suas solues inovadoras atacam os principais problemas com que sedeparamosprojetistasgrficosemestresdaWeb. OFireworksumaferramentadedesenhoincrivelmenteverstilparagrficos eprojetistasdaWeb.Suaamplavariedadedeferramentaspermiteavoccriar imagens grficas utilizando alguns dos melhores recursos de aplicativos grficos vetoriais e de bitmap em um nico aplicativo. Voc pode editar com flexibilidadedevetoreaplicarefeitosbitmapinclusivechanfros,brilhos,aplicar sombrase,agora,filtrosdoPhotoshopqueredesenhamenquantofazaedio. OadventodoFireworkslibertouoscriadoresdaWebdasidasevindasdeuma

11

srie de aplicativos especficos para essa tarefa. Os Efeitos ao Vivo no destrutivoseliminaramafrustraodeterquerecriargrficosdaWebdesdeo incio, depois de qualquer edio simples. O programa gera Java Script, facilitando a criao de rollovers. Os recursos de otimizao reduziram o tamanhodoarquivodegrficosdaWebsemprejudicaraqualidade. Como a primeira ferramenta a ser trabalhada em nosso curso o Adobe Fireworks, importante aprender sobre as ferramentas, painis, interface do programa, pois em toda a sute os comandos somuitosemelhantes.

OAMBIENTEDETRABALHO
Ao abriro Fireworks, ser mostrada uma tela onde no meio voc deve definir ser quer abrir um documento existente (open), criar um novo documento (Create New) ou acessar ao Fireworks Exchange, com uma barra de ferramentas,umacaixadeferramentasnalateralesquerdaepainisnalateral direitaenorodapserexibidaacaixadepropriedades.

Ao clicar sobre o boto Create New e pedir para criar um novo documento, ser mostrada uma janela onde se deve dar informaes de tamanho de tela (largura WealturaH),resoluoasertrabalhadaecordatela.

12

Para uma resoluo segura para um site de 800x600 voc deve utilizar 760x420px para uma resoluo de 1024x768 use 955x600. Issosedevepelareatildeummonitor.

ABARRADEFERRAMENTAS
A Barra de Ferramentas possui dezenas de ferramentas, algumas das quais esto organizadas em grupos de ferramentas. Um grupo de ferramentas representadoporumpequenotringulonocantoinferiordireitodaferramenta. Cliqueem uma ferramenta para escolhla.Ou, pressione as teclas de atalho paramudarrapidamentedeumaferramentaparaaoutra.

Na imagem ao lado ao manterse pressionado o mouse sobre a ferramenta CROP (recortar) ele apresenta as opes de ferramenta.Osatalhosparaacessoaferramentaestodentrodosparnteses, no caso, a letra C. Ao pressionar uma vez ele disponibilizaria a ferramenta crop,aoserpressionadonovamenteelemudaparaaferramentaExportArea tool.

13

OusodePainis
Painis so controles flutuantes que o ajudam a editar diferentes aspectos de umobjetoselecionado.Ospainispermitemtrabalharemmolduras,camadas, smbolos,exemplosdecor,emuitomais.Porexemplo,useopainelEfeitopara selecionarumefeitoaseraplicadoemumobjeto. Elesficamdispostosnalateraldireitadoaplicativo(importanteressaltarque esseformato,aplicaseatodaasutedeaplicativosAdobe).

Quandofornecessrioutilizarumpainelquenoestejadisponvelnalateral, possvelchamlopelomenuWindow.

14

Podese tambm expandir / retrair um painel. Basta dar um duplo clique em seu nome. Podese tambm arrastar o painel para fora da barra da direita, bastaclicarnaabacomseunomeearrastarparaatela. Para voltar configurao inicial, basta clicar na opo EXPANDED MODE queficanotopodateladireita.

Aberturadegrficosdeoutrosaplicativos
ComoFireworks,vocpodeabrirarquivosdeoutrosaplicativosouformatosde arquivo, inclusive arquivos do Adobe Photoshop, Macromedia FreeHand, AdobeIllustrator,descompactadodoCorelDRAWeGIFanimados. Quando abrir um formato de arquivo diferente do PNG (Formato padro do Fireworks) usando Arquivo > Abrir ser criado um novo documento do Fireworks. Enquanto que se o novo documento for um arquivo PNG, o documentooriginalpermanecerinalterado. Abra o arquivo garage.psd que se encontra na pasta Adobe FireworksdentrodapastamatrizesemseuCDROM. Por se tratar de um documento criado no Adobe Photoshop e ter utilizado

15

camadas,elemostraaseguintetela.

Ondeeleapresentaasdimensesdoarquivo,aresoluo,permiteaopode umpreview.CliqueemOK Aoabrir,cliquenopainelLayers(queestudaremosposteriormente),eobserve queelemantmaestruturadecriaoquefoifeitanoPhotoshop.

16

CaixadeFerramentas
A Caixa de Ferramentas agrupa praticamente todas as ferramentas que precisamos para nosso projeto. Observe que algumas destas ferramentas possuiumapequenasetapretaapontandoparabaixo.Essasetaindicaquea ferramenta possui uma subdiviso. Abaixo vamos apresentar as principais ferramentas,enaseqnciafaremosautilizaodelas. Selecionar(Select):Possuiasferramentasdeseleo, comasubdivisoselecionaratrs(Selectbehindtool),a ferramenta selecionar secundrio (flecha branca), a ferramenta Dimensionar com as divises Inclinar e distorcer e a ferramenta cortar com a subdiviso selecionarparaexportao. Bitmap: Aqui se encontram as ferramentas destinadas ao trabalho com imagens, temos as ferramentas de seleo:MarqueeToolquetemjuntoaelaaopoOval Marquee Tool, Lasso Tool quetem junto a ela a opo PoligonLassoTooleMagicWandTool. Lpis Pencil Tool, Brush Tool, Erase Tool (borracha), ferramentas de desfoque e suavizao (Blur tool), carimbo (ruber stamp tool) que tem como subdiviso a ferramenta Replace Color Tool (permite substituir a cor e Red Eye Removal Tool (permite remoo de olhos vermelhosdeimagens). Vetorial (Vector): Aqui temos as ferramentas de desenho vetorial como ferramenta linha (line tool), caneta (pen tool), retngulo (rectangle tool) e suas divises, ferramenta texto (text tool), ferramentas de transformao (freeform tool) e ferramenta de fatiamento (Knife tool) que aparece desabilitada, essa

17

ferramentaficarahabilitada,aosedesenharumaforma evocprecisarcortla. WEB: Ferramentas destinadas a preparo de sua arte paraweb. Ferramentas de Hotspot (Rectangle Hotspot tool), ferramenta de fatiamento (slice tool) e subferramentas paraocultarmostraroshotspot

Colors:Ferramentasdepreenchimentosetraos. Ocontagotas(Eyedroppertool),permitecapturaracor de qualquer local dentro de sua rea til de trabalho , inclusivecapturarcoresdebitmaps. Balde de tinta (Paint Bucket tool), permite preencher objetos, um detalhe, caso seu objeto no esteja selecionado ele vai preencher todo o palco com a cor escolhida,noseumenususpensoestferramentade preenchimentogradiente. Abaixo temos ferramenta cor de contorno e cor de preenchimento. A ltima linha temos a ferramenta que volta s cores padres do programa contorno preto e preenchimento branco(Set Default Stroke /FillColors). Nomeiotemosaopodedeixarsempreenchimentoe ou contorno (No Stroker or Fill), para usar essa ferramenta clique primeiro na opo contorno ou preenchimento e clique nesse boto, voc poder observar que a cor ficara com o cone da linha vermelha. O ultimo boto permite inverter as cores de contorno e preenchimento(SwapStroke/FillColors)

18

View: Ferramentas de visualizao de seu trabalho. A ferramenta Hand (mo), permite que voc mova a tela. Umatalhoparaessaferramentapressionarabarrade espaos e manter ela pressionada, observe que o mouse se transforma em uma mo, ai com a barra de espaos pressionada e com o boto esquerdo do mouse, possvel mover a tela. A ferramenta Zoom (lupa) tambm pode ser substituda pela combinao das teclas CTRL + (aumentar zoom) e CTRL (diminuir Zoom).

Abaixotemosabarradepropriedades,eladinmica,ouseja,asinformaes que ela apresenta, modificamse conforme o objeto a ser selecionado. No exemplo da imagem ele apresenta informaes referentes ao projeto. Na segundaimagemeleapresentainformaesemrelaoimagemdoprojeto.

readeTrabalho
AreadetrabalhodoFireworks,apresentaareadedesenho,areacinzaao ladoondepodemosutilizarparadispornossosgrficosparausoposterior,pois oqueestivernessareanoserexportado.Temosasformasdevisualizao e o rodap que nos mostra o tipo de documento, os frames (quando em animao)adimensodatelaeozoom.

19

Formasdevisualizao

Permite que possamos visualizar nosso documento no formato original, como ele ficar no formato de bitmap, duas visualizaes de bitmap e quatro visualizaes de bitmap. Essas opes sero teis na exportao, pois podemosiracertandoaqualidadexpesodoarquivo,recursomuitoimportante em imagensparaWEB.

RguaseLinhas
ParafacilitarnossotrabalhooAdobeFireworkspossuiquasetodososrecursos dos softwares de computao Grfica elogicamente que as grades, rguase linhas guias fariam parte desse processo. Todas estas opes esto disponveisatravsdomenuView.

Rguas
MenuViewRullers

20

Logicamente que por se tratar de um programa focado em WEB as suas medidasseroempixels.

LinhasGuias
Paracriarlinhasguiasemseudocumento,bastaclicarsobrearguaearrastar alinhaparadentrodesuareadedesenho.AtravsdoMenuViewpossvel congelar suas linhas guias, ocultlas de sua tela e modificar suas propriedades(MenuEdit,Preferences,GuidesandGrids).

Modificandoareadesuatela
Podemosalterarotamanhodenossodocumentoaqualquermomentoatravs doMenuModify,Canvas.

21

A opo Image, permite alterar o tamanho de seu projeto, nessa opo ser modificadoareadeseuprojetoeoelementosquejconstemnele.Aopo Canvas permite alterar o palco de seu projeto, ou seja, os elementos que j estejam no palco no sofrero alterao, essa opo vlida quando se precisaaumentaroudiminuiropalcoparaadio/cortedealgumelemento.

AopoColor,permitealteraracordefundo. Asdemaisopespermitemgirarateladetrabalho.

UtilizaodasFerramentasVetoriais
Uma das maiores vantagens do AdobeFireworks que podemos dentro dele trabalharcomacriaovetorialequandosalvamosodocumentoelegravado

22

comoumbitmap(PNG).Asferramentasdedesenhodomasosemelhantesa dosdemaissoftwaresdedesenhovetorial.

Linha
Permite desenhar linhas retas. Voc deve clicar em sua tela e arrastar para definiradimensodesualinha.SevocarrastarseumousecomateclaShift pressionada, suas linhas sero sempre horizontais, verticais ou diagonais em 45. Ao clicar na ferramenta linha, voc pode observar que na barra de propriedades no rodap do programa as opes da barra de ferramentas modificamseparaasconfiguraesdaferramentalinha.

Asopesapresentadasnabarradepropriedadesparaoobjetolinhaso: Path:onomeparaoobjeto. W:width,larguradoobjeto. H:height,alturadoobjeto. X:posicionamentodoobjetoemrelaoaoeixox(pontozeroentreasrguas) Y:posicionamentodoobjetoemrelaoaoeixoy(pontozeroentreasrguas). Cordepreenchimento:comooobjetoselecionadoumalinha,elanopossui preenchimento,veremosposteriormenteasopesdisponveis. Contorno: A primeira opo, referese cor da linha, como o foco do Adobe Fireworks criao para Internet, ele apresenta inicialmente uma paleta de coreseaopassaromousesobreascores,possvelobservarqueelemostra oscdigoshexadecimaisdascores.

23

Porm muitas vezes voc recebe para a criao de seu projeto as cores a seremutilizadas,paraquerespeitemascoresutilizadaspeloseucliente,caso isso ocorra, na janela de opes de cores clique no boto sys color picker, queseabreumanovajanelaondeserpossvelacessarumagamamaiorde coreseatribuirascoresRGBasuaescolha.

Ao lado possvel alterar a espessura da linha, pelo controle deslizante, s possvelcolocarat100pontos,mastambmpossvelclicardentrodacaixa de valores, apagar o contedo e colocar a espessura at 999, mas acredito issoserdesnecessrio. Ao lado podemos alterar as opes de nossa linha, existem diversas categorias,edentrodessacategoriassubcategorias

Ao clicar em stroke options, abrese uma janela com todas as opes de alteraodesualinha.

24

A opo Edge permite suavizar o traado, e a opo Texture aplicar uma texturaaocontorno.

AcesseapastaFerramentaLinhanapastavdeosdoFireworks,eveja aspropriedadesemvdeo.

Canetas
Apentoolpermitetrabalharcomcaminhoretosecurvos(Bezier)comatecla ALTpossvelmudaracurvadeumponto.Elapossuimaisduassubdivises que so as ferramentas Vector Path Tool e Redraw Path Tool (Ambas funcionamcomopinceisdecanetas). A ferramenta caneta umas das mais complexas ferramentas de desenho, masodomniodelavaipermitirumamaiorqualidadeemseusdesenhos. Ela funciona da seguinte forma. Aps selecionar a ferramenta Caneta , clique emumpontoesempressionaromousemovaopelasuatela,observequeele far uma linha, ao clicar, mantenha pressionado o mouse e arraste formando assim a curva que deseja, continue clicando e arrastando at formar o que deseja.Parafecharseudesenho,oudeseuultimocliquenomesmopontoem

25

que voc iniciou. Se seu desenho no for fechado voc pode dar um duplo cliquequeelefinalizaousodacaneta.

Acesse a pastafirecaneta na pasta vdeos do Fireworks, e veja as propriedadesemvdeo. Para acertar a sua forma desenhada com a caneta voc deve utilizar a ferramentasubselectiontool comaferramenta. elapermitealterarospontosdodesenhofeito

Um detalhe no preciso que todo o desenho fique dentro do palco, no exemploacimaobservequeodesenhoultrapassaasdimensesdareatil.

Acesse a pasta Fire_caneta_subselection na pasta vdeos do Fireworks,evejaaspropriedadesemvdeo.

FerramentaRetnguloesuasdivises
Atravsdaferramentaretngulopodemos,desenharretngulos,simples,com

26

cantosarredondados,elipses,polgonoseestrelas. Retngulo: Essa ferramenta desenharretngulos e quadrados (basta desenhar com a tecla SHIFT pressionada). Ao finalizar o desenho voc poder editar as propriedades do desenho pela barra de propriedades.

Nabarravocpodealteraralargura(W)ealtura(H) e o posicionamento X e Y do objeto. possvel alterar as cores de preenchimento e contorno Abaixo das opes de contorno existe a opo Rectangle Roundness, essa opo permite arredondar os cantos do retngulo / quadrado desenhado.

Na terceira coluna temos as opes de mesclagem e filtros a serem aplicado no retngulo / quadrado (estudaremosesseassuntoposteriormente).

Podemos tambm alterar a forma de nosso objeto, dimensionando ele pelas alasdedimenso(pequenospontosnoscantosdoobjeto).

27

Podemos tambm mudar a forma de nosso retngulo, ao clicar nas alas de dimenso com ferramenta subselecion (flecha branca) ele vai perguntar se voc quer desagrupar seu objeto e o transformar em vetor. Clique em OK, e vocpoderotransformaroseuobjeto.

PodemostambmalterarnossoobjetoatravsdogrupodeferramentasScale Tool. Essa ferramenta permite escalar a imagem, se voc posicionar o mouse um pouco acima das alas de dimenso dos cantos o cursor do mouse ficar no formato de uma ala de giro, isso vai permitir rotacionarseuobjeto. Para poder definir o ponto de ncora de rotao, observe que ao selecionar essa ferramenta no centro do objeto, aparece um pequeno crculo, este o pontodencora,aomudareledelocal,serondeficaropontocentralpara

28

rotaoedistoro. Essaferramentapermiteaosecolocarocursordomouse nas alas dos cantos deixarem nossos objetos em perspectiva e pelas alas dosmeiosdaslinhaspermitedistorceroobjeto. AferramentaDistort,permiteadistorolivre

As opes de alterao que foram explicadas com a ferramenta retnguloseaplicamatodasasdemaisferramentasdedesenhosdo Fireworks.

Acesse a Retngulo na pasta vdeos do Fireworks, e veja as propriedadesemvdeo. Elipse: Permite desenhar elipses e circunferncias, para que sua circunferncia fique perfeita desenhea com a tecla SHIFT pressionada. Para alterarassuaspropriedadesaltereasconfiguraesnabarradepropriedades.

Polgonos: A ferramenta polgono permite desenhar formas poligonais e estrelas.Parapoderdefinirsevocvaidesenharpolgonoseestrelasequala quantidadedelados,vocdevedefinirnabarradepropriedadesantesdefazer o seu desenho. Ateno necessrio definir as propriedades de shape, quantidadedeladosengulo,antesdedesenharseuobjeto.

Ferramentas Interativas: O segundo grupo de ferramentas, possuem

29

ferramentasquefacilitamacriaoformasparasuaarte,todaselaspossuem um caracterstica que so alas auxiliares para mudana da forma que tem a forma de pequenos losangos amarelos, essas alas permite a mudana de formadoobjeto.

AcesseapastaFerramentasnapastavdeosdoFireworks,evejaas propriedadesemvdeo.

FerramentaTexto
A ferramenta texto uma das mais simples de ser manipulada, pois praticamenteigualaqualqueroutroprograma,comavantagemquevocpode terminardedigitarapalavraeredimensionla.

Para poder alterar o texto escrito basta apenas dar um duplo clique sobre o texto, na barra de propriedades podemos definir as dimenses da caixa de

30

nosso texto, o posicionamento X e Y. Na segunda coluna, podemos definir o tipodafonte,otamanhodafonte,cor,negrito,itlicoesublinhado.Nasegunda linha dessa coluna temos Kerning (permite acertar o espaamento entre as letrasdeumapalavra,necessrioselecionarasletrasqueprecisamdemais ou menos espaos entre elas), Leading (permite aumentar o espaamento verticalentreaslinhas),Orientaodotexto,ealinhamentos.Naterceiralinha temos as endentaes de pargrafos, cor de contorno do texto e forma de suavizaodeserrilhadodasfontes.Naquartalinhatemosescalahorizontale espao entre pargrafos. Na terceira coluna temos as opes de filtros que veremosposteriormente.

MenuText
Alm das configuraes bsicas de criaoe configurao de textos, o menu Text, possui algumas opo adicionais para os textos. As primeiras opes como Font, size, style e align so as mesmas que temos na barra de propriedades. AopoConvertotoPaths,permitetransformarnotextoemcurvas.Umtexto precisar ser convertido em curvas para que possa ser manipulado. Ao converterumtextoemcurvas,elenopodemaisretornarasereditvelcomo texto,entocasoprecisefazerissoesevocnosabeseprecisardelecomo textoposteriormente,faaumacpiadeseutextoedeixedeforadopalcode edio.Assimcasoprecisedelenovamentevoctemumacpiadesegurana. As opes Attach in Path e Attach to Path, s ficaro disponveis caso voc desenheumcaminhoparaqueotextoseguir. AopoAttachInpath,preencheaformacomotexto.

31

Aopoattachtopath,fazcomotextosigaumacaminho.

Acesse a pasta Caneta na pasta vdeos do Fireworks, e veja as propriedadesemvdeo.

Ferramentasdetransformao
Permitemtransformaasuaarte,soasferramentasfreeformTooleReshape reaTool.

32

Ambas possuem configuraes que podem ser alteradas na barra de propriedades. Ao utilizlas em suas formas certifiquese que o objeto est desagrupado (boto direito do mouse a opo UNGROUP) se for um texto, clique no Menu Text, Convert to Path para convertlo em caminhos. Desagrupetambmseuobjeto. As outras ferramentas que fazem parte deste grupo so utilizadas quando se necessitamadicionarousubtrairpontosdesuaforma.

AcesseapastaTransformacaonapastavdeosdoFireworks,eveja aspropriedadesemvdeo.

Faca
Como o prprio nome a diz serve para que se possa cortar a arte. O nico detalhe certificarse de que o corte deve ser feito clicando e mantendo pressionadoforadaforma,esomentesendosoltotambmforadoobjeto.

33

Acesse a pasta Facas na pasta vdeos do Fireworks, e veja as propriedadesemvdeo.

TrabalhandocomnossasFormas
Ao trabalharmos com mais de um objeto ser necessrio a manipulao de nossosobjetos.

Alinhamentoedistribuio
necessrio que ao trabalharmos com nossos desenhos sempre tenhamos cuidado com o posicionamento dos mesmos em nosso trabalho, e para isso podemos fazer uso das opes de alinhamento e distribuio do Adobe Fireworks. Podemos utilizar os botes da barra de ferramentas, do menu Modify ou podemoschamarapaletaAlign,ouatravsdabarradeferramentassuperior

Importante lembrar que para que os comandos fiquem disponveis preciso quesetenhamdoisoumaisobjetosselecionados. Opainelpossuitrsdivises:Alinhamentoquerpermitealinharpelaesquerda, pelocentroverticalmenteepeladireita,pelotopo,pelocentrohorizontalmentee pelabase.

34

Emrelaodistribuio,podemosdefinirporacertaroespaamentoverticale horizontal. A opo Match Size, faz com que seu objeto tenha o tamanho de seupalco,paraissoprecisoverificarseaopopositionqueestlocalizada nocantosuperiordireitoestejapressionada.Estebotopermitequeosdemais comandosalternementreaseleoouemrelaoaopalco.

Grupos
Quando trabalhamos com muitos objetos aconselhvel que se agrupe os objetos que no momento no ser utilizados e que so partes do mesmo projeto, podemos utilizar para isso nossa barra de propriedades ou o menu Modify. Voc pode tambm quebrar um objeto agrupado, atravs do menu Modify,utilizeaopoUngroup.Casovocpreciseeditarumobjetoagrupado, cliquesobreseuobjetocomateclaALTpressionada,eobservequeapenaso objetoclicadoficarselecionado.

Empilhamentodeobjetos
Quando temos objetos sobrepostos, podemos mudar a ordem de empilhamentodosmesmos,atravsdoMenuModify,Arrange.

As opes so: Bring to Front (Avana para o nvel mais alto), BringForward (Avanaumnvel),SendBackward(Recuaumnvel),SendtoBack(recuapara onvelmaisbaixo).

TransformaodeCaminhos
Aotermosdoisoumaisobjetospodemostrabalharcomestescaminhos.

35

ParaissoselecioneseusobjetosecliquenomenuModify,CombinePaths... Union:Unificaoscaminhosselecionados. Intersect:deixavisvelapenasparteondeosobjetosestointerseccionados. Punch:Oobjetosuperiorcortaoobjetoinferior. Crop:Semelhanteinterseco,masdeixavisvelacordoobjetodefundo.

NasltimasversesdoFireworks,foiintroduzidoumnovopainelque permite trabalhar diversas propriedades nas formas. Menu Window, OyhersPath.

O primeiro grupo de ferramentas, Combine Paths, tem funes muito semelhantessapresentadasacima. OgrupoAlterPathspermitequesealtereosseusobjetos. A primeira opo a Simplify Paths, permite como o nome diz, simplificar o caminho,aoclicarnaferramentaelapermitequesedefinaasuavizaoentre 1 e 25. A segunda opo, Expand Stroke permite expandir o contorno. A terceiraopoCovertStrokestoFillspermitequevocconvertaseucontorno

36

empreenchimento.AquartaopoInset/ExpandPaths,permiteexpandirseu objeto. A opo Invert Paths permite inverter as propriedades do objeto. Reverse Gradients permite inverter o efeito de gradiente aplicado. Open/Close Paths permite abrir ou fechar caminhos. Na linha de baixo a primeira opo chamase Extrude Paths, permite criar extruses de seus objetos(necessrioantesdeaplicaroefeitodesagruparoobjeto).

Blend Paths, permite que se faa misturas entre os objetos. necessrio desenhar os dois objetos, selecionlo, e clicar no boto. Ser mostrada uma telasolicitandoonmerodeetapas.

OFireworksfaramistura

37

Dependendo do objeto selecionado ser necessrio desagruplo primeiro antesdeaplicaramistura.AopoFisheyeyePath,permiteaplicarumefeito deolhodepeixeaumvetor.necessriodesenharumaelipsenolocalonde seraplicadooefeitodeolhodepeixe.Depoisselecioneoobjetoeaelipsee cliquenoboto,sernecessriodefinirovalor.

Deform to Path, tambm precisa de dois objetos selecionados, ao selecionar ambosemclicarnobotosernecessriodefinirovalor.

38

As opes Edit Points e Select points, so referentes manipulao de pontos.

Preenchimentos
Quando se desenha no Adobe Fireworks podemos observar na caixa de ferramentas a possibilidade de se trabalhar com cores de preenchimentos e cores e opes de traos. Traos vimos anteriormente, vamos ento nos atentaraospreenchimentos. Como no caso do trao o quadrado com um risco no meio significa sem preenchimento,asoutrasopesso: Cor:Temoscoresslidas,Gradientes,CoresWEBePadres. Certamente a parte mais interessante destas cores so os gradientes e padres, que podem ser Linear, Radial, Elipse, Retangular, Cone, Starburst, Barras, Ripples, Waves, Satin e Folds. Temos ainda a possibilidade de se modificarmanualmenteagradiente,bem definirassuascores.

39

Observe que ao traar o gradiente ele mostra uma linha com um pequeno circulo em uma extremidade da linha e um pequeno retngulo na outra extremidade. O crculo permite definir onde inicia o gradiente, o quadrado permitegirarogradiente. Najaneladegradiente,aferramentamostrainicialmenteduasopesdecores uma em cada extremidade, para poder mudar a cor, basta clicar na cor que apareceemudaracor.

Podemos tambm acrescentar mais cores a nossa rgua de gradiente. Para queissosejapossvelbastaclicaremumareavaziaentreasduascores.

40

Para retirar uma cor adicionada, basta clicar sobre a cor a ser retirada e arrastarparafora. Podemos ainda aplicar desfoque e texturas junto a nossos preenchimentos atravsdabarradepropriedades.

Acesseapastapreenchimentos,evejaaspropriedadesemvdeo.

Vocpodesalvarosefeitosdepreenchimentoecontorno,parausoposterior. Chame o painel Syles (Menu, Window, Styles), com o objeto selecionado, no painelcliquenobotoNewStyle(rodapdopainel).

41

DumnomeparaseuestiloecliqueemOK.

Veremosasdemaisopesdeestilosposteriormente.

Efeitos
Voc pode observar que na barra de propriedades, alm dos traos e contornos,existeaindaumaterceiradivisoondepodemostrabalharosmodos de combinao entre os elementos, grau de transparncia e efeitos a serem aplicadoneles.

Paraaplicarumefeitoemsuaarte,bastaapenasclicarsobreosinaldemais

42

(+)eescolheroefeito. Osefeitosso: Adjust Color Permite trabalhas o ajuste de cores de seu objeto, as opesdentrodessefiltroso: o AutoLevelsPermitedefinirosnveisdecoresdaimagem. o Brightness/ContrastPermiteajustarobrilhoecontrastedeseu objetoouimagem

o ColorFillPermitepreencherseuobjetocomoutracor,entreas suas propriedades esto transparncia e o Blend Mode (Modo deTransparncia).

o CurvesPermitetrabalharnascurvasdecoresdeseuobjeto

43

o Hue Saturation Permite trabalhar a Matiz da cor (HUE) e a saturao da mesma (Saturation), marcandose a opo colorizeserpermitidotrabalharnoobjetoalterandoseacor. o InvertPermiteinverterascoresdeseuobjeto(negativo) o LevelsPermitetrabalharmanualmenteosnveisdecores.

Paraocultarumdosfiltrosaplicados,bastavocclicarnosmboloemformade (V) que fica na frente do nome do efeito, ao clicar no (V) o mesmo ficar em formadeum(x)vermelho.

44

Para excluir qualquer filtro aplicado, basta apenas clicar no nome do filtro e depoisclicarnosinaldemenos(). BevelandEmbossPermiteaplicarChanfroeentalhenosobjetos.Ao acessaraspropriedadesdeBevelandEmboss,existemvriasopes. Inner Bevel, Inset Boss, Outer bevel e Raised Emboss. Alm das opes, possvel definer, suavizao, largura (W), contraste, suavizaoengulo.

Acesseapastaefeitos,evejaaspropriedadesemvdeo.

BlurPermiteaplicardesfoquenasimagens.Asprincipaisopesso, Motion Blur (desfoque de movimento), Gaussian Blur (desfoque Gaussiano), Radial Blur (desfoque radial) e Zoom Blur (desfoque de Zoom).

45

 Noiseaplicaumrudoemseuobjeto/imagem.

Other Permite transformar seu objeto em Alpha, assim ele estando em uma camada acima de qualquer objeto ele ficar como uma mscara.

46

 Shadow and Glow Permite aplicar no seu objeto uma sombra ou brilho. o Drop Shadow Permite aplicar uma sombra simples em seu objeto,possvelconfiguraradistnciadela,acoraopacidade, suavizao e ngulo. A opo Knockout permite far com que o objetodesapareadeixandosomenteasombra.

o Glow Aplica um brilho em seu objeto tambm pode ser configurado.

47

o InnerGlowobrilhoInternonoobjeto

o InnerShadowasombrainterna.

48

o Solid Shadow Aplica uma sombra slida, pode ser utilizada parasimularobjetostridimensionais.

TemostambmnessegrupooPhotoshopLiveEffects,quesoefeitos de camada herdados do Adobe Photoshop. Para quem utiliza as versesanterioresdoFireworks,antesdacompradaMacromediapelaAdobe, noteressaopo,ternolugarumpacotedaAlienSkin.

49

PainelEstilos
O Adobe Fireworks possui um painel chamado styles onde podemos armazenar algum estilo criado e reaproveitlo em nosso projeto sempre que fornecessrio. Basta desenhar seu objeto, aplicar seu efeitos e com seu objeto selecionado, cliquenobotoNewStyle,conformevimosanteriormente.

Observe que na criao de nosso estilo eu posso definir o que eu quero que fiquedisponvelnacriaodosestilos,quandosetratardeumestiloparatexto temos tambm os atributos de texto. Aps definir o nome do estilos e suas propriedades, basta clicar em OK. Agora cada vez que precisar aplicar esse estilo em outro objeto basta desenhar seu objeto e clicar no estilo dentro da paletaStyles.

50

Paraexcluirumestiloexistentebastaclicarsobreeleedepoisclicarnalatade lixonocantoinferiordireitodapaleta.Paraalteraraspropriedadesdeumestilo existentebastadarumduplocliquesobreelenapaletaStyles.

Camadas
AodesenharumobjetonoAdobeFireworksautomaticamentesercriadauma camada para acomodar seu objeto. Isso permite uma melhor organizao ea possibilidadedeseocultarobjetostemporariamenteemseutrabalho.

Ascamadasfuncionamparaempilharaordemdosobjetos,sempreumobjeto deumacamadasuperiorficarsobreainferior. A paleta camadas possui duas divises a opo Web Layer definida para quando se trabalha com a possibilidade utilizao para Web, veremos as caractersticasposteriormente. Acima das opes de camadas temos a opacidade da camada, estando em 100%elaesttotalmentepreenchida

51

Ao lado da opacidade temos os modos de mesclagem entra as camadas (Blend Mode), ou seja, a camada de cima pode ter as suas caractersticas alteradas, criando assim um efeito como se fossem lentes. Para aplicar um mododemesclagem,deixeoobjetoqueservirdelentenacamadasuperiore aplicarummododemistura.

Abaixoalgunsmodosdemistura.

Average

Darken

Multiply

ColorBurn

InverseCorlorBurn

SoftBurn

JuntopaletaLayersnocantosuperiordireitotemosobotoOptions,atravs desse boto podemos criar novas layers, unirlayers, duplicarlayers, ocultar / mostrar layers, bloquear / desbloquear layers.Definir tamanho das miniaturas

52

daslayers.

A WEB Layer uma propriedade de camada quando um elemento do FireworkspossuiumatributodecamadadaWEB.Veremososobjetosdaweb maisafrente.

Mscaras
Como o nome sugere,as mscaras ocultam ou mostram partes de um objeto ou imagem. Diversas tcnicas de mascaramento podem ser usadas para se obter vrios tipos de efeitos criativos com objetos. O usurio pode criar uma mscara para funcionar como uma estampa de biscoito, cortando objetos ou imagens subjacentes. Ou tambm criar uma mscara para obter o efeito de umajanelaenevoada,revelandoouocultandoporesdoobjetoabaixo.Esse tipo de mscara usa tons de cinza para tornar objetos selecionados mais ou

53

menos visveis. Outra alternativa criar uma mscara que use sua prpria transparnciaparaafetaravisibilidade. Para criar uma mscara, usase o painel Layers ou os menus Edit (Editar), Select (Selecionar) ou Modify (Modificar). Depois de criada a mscara, ser possvel ajustar a posio da seleo com mscara na tela ou modificar a aparncia da mscara editando o objeto de mscara. Alm disso, existe a opo de aplicar transformaes mscara como um todo ou a seus componentesindividuais. Para criar a mscara pelo Menu Modify , desenhe a sua forma e importe o objetoasermascarado.

Selecioneoseudesenhoerecorteo(menuEdit,Cut,ouCTRL+X),cliqueem sua imagem, e depois clique no Menu Modify, Mask, Past as Mask. Observe quenapaletaLayers,elemostraamscaraaplicadaaoseuobjeto.

54

Para poder arrastar sua mscara sobre a sua imagem necessrio primeiro clicar no elo de corrente, isso far com que eles possam ser manipulados de formaindependente. Para desativar a mscara, voc pode clicar no Menu, Modify, Mask, Disable Mask, para remover a Mscara, Menu Modify, Mask, Delete Mask. Ambas as opesestotambmdisponveisnasopesdapaletaLayers. Voc pode tambm modificar as propriedades de sua mscara pela barra de propriedadesnorodapdoFireworks.

Ao modificar o tipo de mscara para Grayscale appearance, ele far um sombreado em seu desenho, possvel tambm aplicar modos de mistura e efeitos.

Acesseapastamascaras,evejaaspropriedadesemvdeo.

Smbolos
Quando se cria uma arte no Adobe Fireworks podemos atribulas como smbolos.

55

Ossmbolosaseremcriadosso:GrficosboteseAnimaes. Para criar seu smbolo, desenhe a sua arte formatea e depois, clique com o botodireitosobreelaeescolhaConverttoSymbol,ouselecioneasuaartee cliquenobotonovosmbolodapaletaLibrary,oupressioneF8.

VamosescolherButton. Aoconverternossoobjetoemboto,observequeeleaparecenabibliotecade smbolos(DocumentLibrary),enareadedesenhoeledefineareaclicvel doboto.Nomeiodobotoelemostraumcirculobranco,sevocclicarnesse smbolo,podemosadicionarcomandosaonossoboto.

Parapodertrabalharemnossoboto,deumduplocliquesobreele. Ele abre o boto para edio. Sempre ao criar um smbolo, se fornecessrio qualqueralteraonomesmo,precisoeditloprimeiro. Em verses anteriores do Fireworks, ao editar um smbolo de boto,

56

eleapresentavaabasparaeditarmososestadosdoboto.Imagemabaixo.

Atualmenteexisteumpainelchamadostatesquepermitetrabalharnosestados dosbotes.possveltambmnavegarpelorodapdajanela.

Copieseuobjetoecliquenostate2,depoiscoleoobjeto. Apliqueumefeitodiferenteaoseuboto.Essesegundoestadoconsiderado comooefeitoderolaromousesobreoboto.

O terceiro estado referente situao aos ser pressionado, no muito comum mudar o estado do boto nessa situao. Ento copie o boto do estado2ecolenostate3enostate4.Ostate4consideradaareaclicvel doboto,emcasodaconversodetextosessencialnesseestadocriarum

57

retnguloquecubraotexto,esseretngulonoaparecenavisualizao. Aps ter finalizado as edies no boto, observe que no topo da janela ele mostraabarradenavegaodosmbolo,cliquenaopoPage1paravoltar telaprincipal. Vamosagoraadicionarumlinkparanossoboto.Cliquesobreseusmboloe observe a barra de propriedades. Nela podemos definir um nome para nosso smbolo, esse processo chamase instanciar um objeto. Na barra existe tambm um campo para que venha a ser colocado o link para onde o boto deverserdirecionado. Estudaremosacriaodelinksemtodasasetapasdenossocurso, com maior destaque no em codificao, porm, algumas instrues precisam ser respeitadas. Todo arquivo pode ser acessado por um boto, apenas preciso que o navegador do usurio de suporte ao que ser aberto.SevocquiserchamarumarquivonoformatoHTMLquefaapartede seu projeto basta apenas colocar o nome completo dele. Exemplo: meuarquivo.html, se o arquivo a ser chamado estive dentro de uma pasta em seu projeto como por exemplos imagens, swf, pdf, coloque da seguinte forma imagens/minhaimagem.jpg. Para acessar a outro endereo na Internetprecisocolocaroendereocompletocomocabealhodoprotocolo. Exemplo:http://www.apostilando.com. Abaixo do campo de link, temos o campo ALT, que permite adicionar uma descrioaimagem,essecampoconsideradootextoalternativo,ouseja, no obrigatrio preencheresse campo, mas altamente recomendvel que ele seja preenchido, pois assim seu cdigo ficar em acordo com as normas vigentedeAcessibilidade. Abaixo do campo ALT, teremos o campo TARGET, esse campo deve ser preenchido caso voc queira que olink em questoabra em umdeterminado local, por enquanto vamos apenas utilizar a opo _blank, que far com que seu link abra em uma nova janela. Em navegadores que permitam abas, ele abrirolinkemumanovaaba.

58

Apsterfeitotodasasalteraes,vocpodetestarseuexemplopressionando ateclaF12.

Acesse a pasta Smbolo_Botao, e veja as propriedades em vdeo.

CriandoAnimaes
Um dos smbolos que podemos criar uma animao do tipo GIF Animado. EmboraatualmentequandosepensaembannerdepublicidadenaInternet,a primeira idia que se pensa em contedo produzido em flash, algumas situaes porquesto de praticidade, velocidade e mesmo de tempo, um GIF Animado mais vivel. Voc pode criar seus prprios banners no Fireworks, comoimportarbannerscriadosemoutrosaplicativos.

59

Para esse exemplo vamos utilizar um arquivo produzido no Adobe Illustrator.Abraoarquivobanners.ai

Aoabriroarquivoelemostraraseguintetela.

O Adobe Illustrator, um software de criao vetorial, e permite tambm o trabalhocomlayers.Aoabriroarquivoeletrardiversosbanners.

Iremosutilizarapenastrsdestesbanners.

60

Selecione um dos banners, no caso selecionei o primeiro (por estar em diversascamadas,comaferramentadeseleonecessriofazerumacaixa deseleocomaferramentadeseleo)ecopie. Sem fechar o arquivo inicie um novo arquivo (boto novo/new) ou Menu File, New.OFireworksidentificaasdimensesdoobjetoselecionadoparaacriao donovoarquivo.

Coleo,sefornecessrio,ajusteassuasdimenses. Deixe visvel o painel State e observe que ele mostra ao lado do state1 o nmero 7, esse nmero representa o tempo que ele fic disponvel antes da mudanadeestado.Casoqueiramudaressevalorbastadarumduploclique nonmero.

Ao abrir dois ou mais arquivos no Fireworks, observe que ambos so mostrados em forma de abas no topo, isso facilita muito a navegao entre arquivosabertos.

61

Volteaoarquivodebanners,selecioneosegundobannerecopie.Navegueao arquivo da animao. Crie um novo state para isso basta clicar no boto New/Duplicatestate,norodapdopainelelecriarosegundoestado.Coleo bannercopiadoeajusteoseutamanho.

Repitaoprocessoparaoterceiroestado. Paratestaravelocidadedobanner,bastaclicarnobotodeplaynorodap dajanela.

Voc observar que est muitorpido, poiseleest a7dcimos de segundo, paraqueobannerfiqueporexemplocom2segundosparacadaetapa,mudeo valorpara200,repitaoprocessoparaastrsetapasdobanner.Depoisfaao testenovamente. Para transformar sua animao em um GIF Animado necessrio exportar a arte. CliquenoMenuFile,ExportWizard,NaprimeiraetapacliqueemContinue,Na segundaetapanecessrioinformarcomodevemserexportadososquadros, escolhaAnimatedGIFecliqueemContinue.

62

Naprximaetapatemosateladeconfiguraesdeexportao.

Na opo Options (que abre automaticamente) temos a opo Format, que permite que possamos exportar nossa arte em todos os formatos grficos compatveiscomaWEB.Palette:nessaopopodemosdefinirotipodepaleta decores.PodemosdeixarnaopoAdaptivequepadro.Loss:Essaopo trabalhaoserrilhamentodeimagens.Nacaixaaoladoqueemnossoexemplo

63

mostra 128, aquantidade mxima de cores a ser aplicada em nossa arte. Abaixo temos a opo Alpha Transparency a opo que permite que imagensgifspossuamtambmfundotransparente. Na parte da direita da tela ,temos a visualizao do banner ea possibilidade deanimarobanner. Ainda na tela de exportao temos a guia File que permite o redimensionamentodobanner. AterceiraguiaAnimationpermitetrabalharosframesdenossaanimao. Parafinalizarecriarmosogifanimado,cliquenobotoExport,definaonome eolocaldeseugifanimado.NaopoexportabaixodeNome,porpadroele trs Images Only, que a opo mais comum, visto que podemos posteriormente adicionar a imagem em um cdigo HTML. Mas ao clicar nas opesdeexportao,temosdiversasoutrasformas.

Vamos exportar nosso banner na opo HTML and Images, com isso ele vai geraroHTMLcontendoainserodobanner. AbraoHTMLpeloseunavegadorevejaoresultado.

64

Acesseapastagifanimado,evejaaspropriedadesemvdeo.

Bitmaps
O Modo de edio de Bitmaps do Adobe Fireworks permite trabalhar as imagensparausoemWebsites. Aosetrabalharcombitmaps,importantesalientarqueasalteraes debitmapspoderoserdesfeitas,atravsdeocomandodesfazer CTRL+Z, ou atravs da paleta History. Caso os danos de sua imagem ultrapassem a quantidade mxima do comando desfazer ou do histrico, possvel retornar a ultima verso salva de seu objeto atravs do comandoReverter(MenuFile,Revert).

MascarandoBitmaps
Abraumaimagemoucomeceumnovoarquivoeimporteumaimagem(Menu File Import). Ao importar uma imagem observe que o cursor muda de forma, isso permite dimensionar a imagem na importao. Se voc apenas clicar na tela,eleinsereaimagememseutamanhonatural,pormsevocclicarmanter

65

pressionadoearrastaromouse,vocpoderdefinirotamanhodaimagem. Apsterinseridoaimagem,desenheumaformaqualqueremcimadaimagem. Desenheumaformaporcimadesuaimagem.

Recorteseuobjeto. Cliquenaimagemdefundo MenuModify,Mask,PasteasMask

PodemosaindaaplicarefeitosdoAdobeFireworksemnossamscara.

66

Ferramentasdedesfoque
Asferramentasdedesfoquepermitemquepossatrabalharemsuaimagem. AsferramentassoBlur,Sharpen,Dodge,BurneSmudge.

As propriedades da ferramenta podem ser alteradas pela barra de propriedades.

AopoSIZE,permitemudarotamanhodopincelquevaiaplicaraferramenta, AopoEDGEreferentesuavidadedaferramenta.AopoShapepermite mudarapontadeseupincel.EmintensidadecontroloapressodoPincel. Ousodessasferramentascumulativo,sevocpassarvriasvezessobreo

67

mesmolocalelevaireaplicaroefeito.

Imagemoriginal

Imagemcomefeitosaplicados

Ferramentasdeseleo
As opes de ferramentas de seleo que temo so retangular, Oval, lao e laopoligonalevarinhamgica.

Criandoumesfumaamento
Abraumaimagemqualqueredesenheaoredordelaumretngulodeseleo.

Clique no Menu Select e escolha Feather, defina a quantidade de pixels que desejaesfumaar.

68

Clique novamente no menu select e escolha Select Inverse, depois pressione DELETE.Depoisdeselecione(Menuselect,deselect)

RubberStampTool
Almdaferramentademesmonomeelapossuimaisduasopes,aReplace ColoreRedEyeRemovaltool

A Rubber Stamp tool certamente a principal das trs, tambm conhecida

69

comocarimbo,elapermitequesecopieumapartedeumaimagemparaoutra parte facilmente Basta posicionar o mouse onde quer capturar, pressionar a teclaALTeclicar. Depoissircopiando.

A opo Replace Color tool permite mudar uma cor da imagem por outra. Ao selecionar a ferramenta, pela barra de propriedades podese configurar a ferramenta.

AopomaisimportantecomcertezaFrom,quepermiteescolhercomocor dedestinoSwatchouImage.AopoSwatchpermiteescolherumacoraser substituda.Sevocclicarnasopesdecoresecomocontagotasclicarna parte da imagem a ser alterada ele captura a cor dominante. Em To, voc deve definir a cor a seraplicada. Em Shape podemos definir o tipo de pincel, emelipseouretangular,almdepodermosconfiguraratolernciaeopeso.

70

AterceiraferramentadessegrupoRedEyeremovaltool,comoonome jdiz temcomoobjetivoaremoodeolhosvermelhosdeimagens.Aoselecionara ferramentapelabarradepropriedadespossvelacertaratolernciaeafora dopincel. Pararemoveroolhovermelho,bastaselecionaraferramentaefazerumacaixa deseleoaoredordeondedeveserretiradoosolhosvermelhos.

NonosaplicaremosafundoemmanipulaodeBitmapspeloFireworks,visto queesseassuntosertratadomaisdetalhadamentenoAdobePhotoshop

AplicaesparaWEB
Quando se trata de web, podemos cria layouts, botes e smbolos como j vimos,menuspopup,rollovers,etc...

Criandoumlayout
Nossolayoutfinalficardaseguinteforma.

Comece um novo documento com 780x780 para desenharmos nosso layout. Vamoscriarumlayoutparaumcafrestaurante,asimagensparao

71

layout esto na pasta do Fireworks no CDROM. Caso queira pode criar um layoutdiferente,seguindodepoisaofinalosprocessosdeexportao. Primeirovamosdefinirumacordefundo.

Vamosagoramontarotopodenossolayoutcomasfotos. Primeirovamosimportaraimagemqueficarnotopodenossolayout.

Para facilitar o processo crie linhas guias em seu layout. No caso criei uma

72

linhaverticalem340pxapartirdopontozero.

Vamosagoracomearaimportarasimagensquefaroacomposionotopo. Importeaprimeiraimagemearedimensioneparacriarmosacomposio.

Crie agora um retngulo um pouco maior que a imagem que acabou de importar.Eleficaremumnvelacimadesuaimagem.Observepelopainelde layers.

73

Vamos deixar ele abaixo de nossa imagem. Podemos fazer isso de duas formas. A primeira forma clicar sobre ele com o boto direito do mouse e escolher Arrange, Send Backward. A segunda forma mover a layer de posio.Depoisdemoveroretnguloparatrs,selecioneosdoisealinheos peloscentros.

Como nosso layout ter trs imagens no topo, e essas imagens tero as mesmas dimenses, duplique seu retngulo duas vezes (menu, Edit, Duplicate).Deixeascpiasdeladoparausarmosposteriormente. Selecione a imagem e o primeiro retngulo e agrupeos (Boto direito do mouseeopoGroup,ouMenuModifyGroup). AcrescenteaogrupoumefeitodeDropShadow(barradepropriedades).

74

Rotacioneseugrupoeoposicionenotopodolayout.

Importe as demais imagens e repita os passos deixando seu layout como abaixo.

75

Oprximopassocriaranossabarrademenus.Crieumretngulodecantos arredondados.

Selecione seu retngulo de cantos arredondados e preenchao com uma cor gradientelinear.

76

Apliquetambmum efeitodeDropShadow.

Vamos agora criar uma elipse que ser o logo central de nosso layout. Crie umeelipseepreenchaacomumacorgradienteradial.

77

Dupliqueasuaelipse,coloqueumacordecontorne,definaaespessuradesse contornoem5eretireopreenchimento,depoisdiminuaumpoucootamanho dessanovaelipse,selecioneasduaselipses

Acrescente a sombra elipse, lembrese de que uma sombra somente vai existir seincidiruma luz sobreo objeto, ento, em nossos objetos a sombras devemsempreestarprojetadasparaomesmongulo. Agora com a ferramenta texto vamos acrescentar um texto para o ttuloe um paraosubttulo.

Vamosagoraacrescentaralgunsdetalhesaologodosite. Importeparanossolayoutoarquivoartes.aidapastadematrizesdo CDROM.

O arquivo importado possui muito elementos que vamos simplesmente eliminar.PorserumvetorcriadonoAdobeIllustrator,elemantmaestrutura

78

criada. Redimensione,altereascoreseapliqueefeitosnosgrosdecafenoramo.

Acrescenteostextosparaomenu.

Vamosagoracriarapartedebaixodenossolayoutcommaisalgunsretngulo, ttuloseimagens.

79

No vamos no momento preencher os espaos vazios com textos, pois isso serfeitoposteriormentenomdulodecodificao.

Exportaoemfatias
Poderamosexportarnossolayoutbsicodestaforma,masissovaigeraruma imagem muito pesada e que demoraria em ser carregada. Um dos recursos queoAdobeFireworkstemofatiamentodeumaarteparalayout. NaopoWebdacaixadeferramentastemosaopoSlicetool( ).

80

Cliquesobreelaefatiaasuaimagemconformeimagem.Cadaparterecortada serumaimagemnaexportaodolayout.

EmborapossamoscriartodoocontedodositeatravsdoFireworks, bemcomumcriarmososelementosnoFireworks,masexportarem partes e montar o layout pelo Adobe Dreamweaver quando em HTML/XHTML,ouparaoAdobeFlash Observequena barra de propriedades, podemos dar um nome a nossa fatia, definirassuasmedidas,atribuirlinks,etc...

81

Exportandoumaartefatiada.
Apsdefinirquaisseriamasdivisesdesuatabela,necessrioagorafazera exportaodatabela. CliquenoMenuFile,ExportWizard. NaprimeiraetapaapenascliqueemOK.Nasegundaetapadefinaparaqualo tipo de aplicativo vamos exportar nosso Layout, em nosso caso marque a opoDreamweaver.

SerdadaumateladeavisosobreutilizarGifouJPEGemseuHTML,clique emExit.Aprximatelaelemostraraodesenhodeseulayout.

82

Cliqueemexport. Na janela de salvar o objeto, voc deve observar o seguinte onde diz HTML, deve estar marcado a opo HTML and Images, e caso seja necessrio marqueaopoPutImagesinSubfolderedefinaparaqualpastaasimagens devemir.

83

AbraoseuarquivoHTMLnonavegadorWeb.

Acesseapastaslices,evejaaspropriedadesemvdeo.

84

Rollovers
PodemosdefinircomportamentosdetrocadeimagensfacilmentenoFireworks. Vimoscomofazerissoatravsdesmbolosvamoscomoissofeitoatravsde comportamentos. Vamos utilizar o layout feito anteriormente. Vamos aplicar um efeito de alteraonotexto,aopassaromouse,oefeitochamadorollover. SelecioneapalavraHomeeabarramarromecopieas. No painel State, crie um novo estado e cole. Certifiquese que o texto Home estejaemumalayeracimadabarra,verifiqueissopelopainelLayers.

Volte ao estado 1,selecione a palavra Home e depois clique sobre ela com o botodireitodomouse.CliquenaopoInsertSlice

85

Emvoltadeseutextoelecriarumretngulo,quenoFireworksechamadode camadadewebLayer.

Nocentrodeseuslicepossuumsmbolosemelhantecomumrelgio. Cliquecomobotodireitoeescolha,AddSimpleRolloverImage.

86

ParapodermosverificarpeloFireworksoprocesso,chameopainelBehaviors (Comportamentos).

Certifiquesequeestejanoestado2ealtereacorouefeitodeseutexto. Repitaoprocessoparaosdemaistextosdenossomenu. PressioneF12paratestaroefeitoemseunavegador Nas versesanteriores do Fireworks, para que fosse possvel utilizar essa tcnica no havia o painel STATE, mas sim o painel FRAME, ento sempre que voc ler sobre o painel STATE, e estiver em veres anteriores,useopainelFRAME.

87

Acesseapastarollover,evejaaspropriedadesemvdeo.

CriandoMenusPopUP
UmdosmaioresrecursosdoAdobeFireworksapossibilidadesecriarMenus PopUP. Vamosusarparaoexemplootextocafs,vamoscriarparaeleassubdivises: Tradicional,ExpressoeCapuccino. Cliquecomobotodireitodomouseeescolha,IsertSlice. DentrodasopesdaWebLayer,escolhaAddPopupMenu. Preencha os campos text com o texto que deve aparecer no menu e o link a seraberto.

NaguiaAppearance,devemosdefinirqualseraaparnciadosbotes.

88

Aquivocdevedefinirascoresdeseumenu,seofundoseremHTMLouem Image. Uma observao importante sobre a utilizao desse tipo de efeito. Emboraelesejatil,vejodoisgrandesproblemas.Umemrelao ferramentaFireworks.Observequeelenopermiteautilizaode qualquer fonte, isso para que o HTML seja compatvel com todos os navegadores. O segundo problema em relao acessibilidade que o seu site ter, hoje se evita a utilizao de menus POPUP, pois eles no so acessveisaodiversospblicos,comoporexemploadeficientesvisuais. Na guia Advanced podemos definir as propriedades de clulas e bordas de nossoMenu.

89

EnaguiaPosition,podemosdefinircomoseraposiodoMenuemrelao aobotoprincipal.

90

Aotestarnonavegador,vocpodertestaroefeito.

CriandoumaGaleriadeimagens
Paracriarumagaleriadeimagens,aconselhvelpreparartodasasimagens. Primeiro,crieumapastachamadagaleriaoucomoutronomeaocritriodeseu projeto.Vamostrabalharcom5(cincoimagens)evamosdefinirparaelasuma PodemosacertarotamanhodenossasimagenspeloprprioFireworks.Abraa primeiraimagem(MenuFile,open).DepoiscliquenaferramentaCROP( AcerteotamanhodocortenabarradePropriedades. ).

Essaferramentapermitecortaraimagem,maselaocasionaperca naimagem.Casopreciseminimizaressaperca,primeirodiminuao tamanho de sua imagem (Menu , Modify, Canvas, Image Size) e depoisfaaocorte. Vamosgerarimagensde600x400. Basta apenas digitar o tamanho do corte em W (width), H (height), pressione ENTERparaconfirmarosvaloresedepoisnovamenteENTERparacortar. Salveasuaimagemefechea. Repitaoprocessoparaasdemaisimagens. Inicieagoraumnovoarquivocom760x420pixels. Definaumacordefundoparaseuprojeto(Casoqueiraalteraracordefundo, Menu,Modify,Canvas,CanvasColor).

91

Desenheumslice(

)de600x400.

Observequeatribuiaeleonomederepositrio,emboraoprprioFireworks j houvesse atribudo um nome, importante esse nome, pois para ele fazer com que as miniaturasque vamos agoraadicionar anossa galeria funcionem chamandoasimagensmaiores,elevaigerarumcdigoemJavascript. Vamosagoracriarasnossasminiaturas. V ao Menu File, Import, importe a primeira imagem e definaa com uma largura de 100 pixels, mantenha a tecla SHIFT pressionada e diminua a imagem,nocasonossaimagemasmesmasficarocom100x66. Importeasdemais. Caso voc tenha muitas imagens ser necessrio retrabalhar a galeria posteriormentediretamentepelocdigofonte,ouporseuprogramadeautoria HTML,comoporexemplooAdobeDreamweaver. Com auxilio da paleta Align (Menu, Window, Align), alinhe e distribua as miniaturas.

92

Selecione todas as suas imagens e clique com o boto direito do mouse e clique em Insert Rectangular Slice, como temos mais de um item selecionado ele vai perguntar se voc quer criar um nico slice ou mltiplos, clique na opoMultiple.

93

Renomeie cada um dos slices para nomes fceis de serem identificados posteriormentecomoimagem01,imagem02eassimpordiante. Clique sobre a primeira imagem e depois arraste o boto de behavior (boto branco) at o slice repositorio. Abrese uma janela de swap Image, clique no botoMoreOptions.

MarqueaopoImageFileedirecioneparaasuaimagem.CliqueemOK

94

Repitaoprocessoparatodasassuasimagens.

Observe que o Fireworks mostra linhas direcionando das miniaturas para o slicerepositorio. PressioneF12emseutecladoparapodervisualizaraanimaononavegador.

95

No caso em questo nossas imagens aparecem apenas com o passar do mousepodemosmudaressetipodecomportamentoparaqueelasesperemo cliquenaimagemparafazeromesmo. Selecione a primeira miniatura, e chame a paleta Behaviors (Menu, Window, Behaviors).ObservequeocomportamentoonMouseOver,quesignificaao passar o mouse. Clique na fecha ao lado do Comportamento e mude para onClick. Ainda temos os eventos, onMouseOut, que executa o processo ao retiraromousedosliceeonLoad,queexecutaocomandoaoabrirapgina.

96

Esses comportamentos so eventos da linguagem Java script, programas como o Fireworks, possuem uma interface visual para a criaodecomandoJavascript. Observequeaosairdaimagemamesmasaidajanela,deixandoatelavazia atquesecliquenovamenteemoutraimagem.Paracorrigirisso,cliquesobre aprimeiraminiaturaenapaletabehaviorsdeumduplocliqueondeestescrito Swap Image, abrese a tela de edio de Swap Images, desmarque a opo RestoreImageonMouseOut,essaopodesmarcada manteraimagemna telaatquesejaclicadoemoutraminiatura. Paraqueasuagaleriatambmnoiniciecomareadeimagensembranco,

MapasdeImagens
Podemos criar de nossas imagens reas clicveis para que venham a ser nossosmapasdeimagens. Crieumaimagemmaiscomplexaouimporteumaimagemqualquer. JuntoaobotodeslicetemosasopesdeHotspot.

As opes so, retangular, elptica e poligonal. Basta desenhar o objeto em

97

voltadoqueserconsideradolinknaimagem.

Aoterminardesefazerodesenhopossvelmodificaraspropriedadesdeseu mapadeimagens.Definindolink,nomeedestino. importantetambmdarumnomeaoHotspot,poispodemostermaisdeum grupodemapadeimagensemumanicapgina.

Acesseapastamapa,evejaaspropriedadesemvdeo.

Consideraes
Com isso finalizamos o nosso estudo ao Adobe Fireworks, vimos que possvelcomelecriarmostodoumwebsite,emboraissonosejacomum. Nosso prximo passo agora como integrar o contedo criado nele com as demais ferramentas da sute. Nossa prxima ferramenta ser o Adobe Photoshop,quecertamentejuntocomoAdobeFlashsoasmeninasdos olhosdedesignparaWEB.

98

ADOBEPHOTOSHOP

OPhotoshopnoapenasumaaplicaodeediodeimagensqualquer,a maisavanadaemaisabrangenteaplicaodeediodeimagemprofissional. O Photoshop no apenas lder do mercado, ele permite um integrao fantstica com as demais ferramentas da Adobe, tanto na rea de Internet, comoimpressos,vdeo,emultimdia. Como qualquer editor de imagens, o Photoshop permite alterar fotografias e outros tipos de arte final digitalizada. Voc pode retocar uma imagem, aplicar efeitos especiais, trocar detalhes entre fotos, introduzir textos e logos. Ele tambm oferece tudo o que voc precisa para criar arte a partir do zero, incluindo um conjunto de ferramentas de desenho vetorial e paleta de pintura altamenteespecializada.NessanovaversoaCS4,almamudanaparaum layout mais moderno e compatvel com as demais ferramentas Adobe, podemosimportarvdeoseadicionarefeitos,eelementostridimensionais.

readeTrabalho
Aps concluir o processo de inicializao, a rea de trabalho ocupar todo o primeiro plano. A maioria dos elementos que compe a rea de trabalho do Photoshop bem conhecida das pessoas que esto familiarizadas com o

99

ambiente Windows ou Mac. Voc tambm ver um grande semelhana em diversas ferramentas a serem utilizadas com as ferramentas do Adobe Fireworks. Abaixo uma viso geral da rea de trabalho com uma imagem aberta.

Paraquesepossaabrirumaimagem:MenuFile,Open. Para quem j usa alguma verso do Photoshop at a CS3, com certeza vai observar diversas mudanas, e a principal com certeza serqueaoabrirduasoumaisimagens,elasnoficamempilhadas,masque agoraabrememABAS.

Se voc est acostumado com as verses anteriores e quer que as imagens abram empilhadas, pode desmarcar essa opo. Clique no menu Edit, Preferences, Interface, Na janela que se abre desmarque a opo Open DocumentsasTabs.

100

Caso queira deixar uma imagem empilhada temporariamente, possvel tambmcomaabadaimagemselecionada,cliquenomenuWindow,Arrange, Float inWindow, quando apenas a selecionada dever flutuar, ou Float All in Window,quandotodasasimagensabertasdevem flutuar. Quantoaosdemaisitensdareadetrabalho Ajanelacentraljaneladenossaimagem. Norodaptemosozoomutilizadoeasinformaessobreoarquivoaberto. Acaixadeferramentasquevamosexplorarmaisadiante. Ospainisdireita. Para quem j usurio do Adobe Photoshop e quer saber mais detalhes das novidades do programa. Clique no menu Window, Workspace,WhatsNewinCS4.Aoclicaremqualquermenu,tudoque novidadeouquetevealteraonessaversoestarsendomostradonacor azul.

101

Atravs do Menu Window, Workspace, possvel alterar a forma de distribuiodepainisecomandosparaoquemaisseutiliza.

BarradePropriedades
A barra de propriedades do Photoshop dinmica, ela muda conforme a ferramentaselecionada.Elaficaposicionanapartesuperiordatela.

AsFerramentas
Ferramentadeseleo,permiteselecionar os objetos. No Photoshop importante verificar se voc est com a Layer (camada) de seu objeto selecionado. Ou voc pode marcar na barra de

PropriedadesaopoAutoSelect. Ferramentasdeseleofechadas.

FerramentasdeseleodogrupoLao.

Ferramentas de seleo do grupo da varinhamgica Ferramenta CROP (recortar) e

ferramentasdefatia. Ferramenta de contagotas, medidas e anotaes.

102

Grupodeferramentasdecorreo.

Grupodeferramentasdepincel(brushes).

Grupodaferramentacarimbo.

Pinceisdaferramentahistrico.

Grupodeferramentasdaborracha

Ferramentasdepintura.

Ferramentasdedesfoque

Ferramentasdesaturaoedesaturao.

Grupodeferramentascaneta

GrupodeferramentasdeTexto

Ferramentasdeseleodevetores.

103

Grupo de ferramentas de vetores. No PhotoshopsochamadasdeShapes.

Grupodeferramentasdemanipulao3D.

Grupodeferramentasdemanipulao3D

Ferramenta de movimento da rea (pode ser substituda pela tecla ALT

pressionada,comonoAdobeFireworks). Ferramenta Zoom (pode ser substituda por CTRL++ aumentar CTRL+ diminuir). Abaixo dela onde tenho os quadrados preto e branco pequenos, permite zerar as cores, ou seja, ao se definir uma cor de primeiro plano e ou segundo plano, ao clicar nesse boto ele volta a deixar cor branca no segundo plano e cor preta no primeiro plano. A flechinha em curva ao lado dela permite inverterascores. Os quadrados maiores permitem mudar a cordeprimeiroplanoedesegundoplano. O ltimo boto permite mudar a fora de visualizaodareadetrabalho.

104

Painis
Os painis no Photoshop, funcionam de forma bem semelhante aos do Fireworks, para chamar algum painel que esteja visvel, clique no menu Window.Nocantosuperiordireitodopainel,eleapresentaopesutilizao dopainel.

Criando,abrindo,salvandoeexportando
Embora na maioria das vezes voc vai abrir um imagem e depois alterla, podemos comear tudo do zero, ou seja,podemos desenhar tudo dentro do Photoshop. Parainiciarumnovoarquivo,cliquenomenuFileNew.

Nessa tela o mais importante definir a largura (Width), altura (Height) e resoluodenossoprojeto.QuandosetrabalhacomaplicaesparaInternet, queocasodenossocursoaresoluorecomendadade72pixels/inch.

105

Em Background Contents o padro White, porm em muito projetos web, ser necessrio deixar como transparent. Veremos isso em alguns exemplos posteriormente. Comoobservaoseoobjetivoformdiaimpressa,oprojetodeve comearcomresoluode300. Isso importante porque, poder ocorrer de voc precisar criar a mesma arte do site para uma peaimpressa. Em casos como esse, faa sua arte em 300DPI e depois quando adaptar ela para WEB,voc trabalha a resoluo, pois do contrrio, comear com 72DPI e aumentar para 300DPI, emborapossvel,noficarbom. Ao confirmar as dimenses, ele apresenta a sua rea de trabalho com o espaonasdimensesparasuaarte.

No Photoshop no possvel importar uma imagem como fizemos no Fireworks, no Photoshop embora exista o comando Import, ele mais relacionadoaoutroselementos,comoaoterumscanneremseuequipamento, atravsdelequeseobtmaimagemdigitalizada. NocasodoPhotoshopnecessrioabriraimagemasertrabalhada.Paraisso cliquenomenuFileOpen.

106

O Photoshop abre praticamente todo tipo de imagem, arquivos em PDF no caso se o PDF tiver mais de uma pgina, ser necessrio definir qual pgina ser aberta, vetores do Illustrator, vdeos, e arquivos 3D em alguns formatos comoOBJ,Colladae3DS. Voc pode transferir uma parte ou toda a imagem para outra, criando assim umacomposio,faremosesseprocessoposteriormente. Ao salvarum arquivo oformato padro oPSD, mas AL escolher salvar, ele permitediversosoutrosformatos.

107

O Photoshop possui tambm umas opo chamada Save for web e Device. Nas verses anteriores no existia a opo Devices, essa uma opo que comeounaversoCS3,pelapossibilidadedesercriarcontedoparaPDAS etelefonescelulares. AopoSaveforWebotimizaaexportaodesuaarte.

108

AopoExport,permitequevocenviesuaartecomocaminhosparaoAdobe Illustrator,nessecasoimportantetrabalharcomasferramentasvetoriaisdo Photoshop. A opo Render Vdeo, somente ficar disponvel quando voc tivertrabalhandocomoumaanimao.AopoSendVideoPreviewtoDevice, verificaseuvdeoemumdispositivo.VdeoPreviewcomoonomejdizexibe uma previso do vdeo e a opo Zoommify, permite gerar uma imagem em miniatura que possibilita zoom sem perder a qualidade. Ideal para apresentar provasdaarteparaocliente.

AcesseapastaAbrir_Salvar,evejaaspropriedadesemvdeo.

Redefinindoumaimagem
Normalmente quando se fala em redimensionar uma imagem, isso significa aumentar ou reduzir uma imagem. O Photoshop trabalha de diversas formas paraalteraodesuaimagem. Aformamaisclssica,cliquenoMenuImage,ImageSize

Nacaixaqueseabretemos,otamanhodaimagememlarguraealtura,onde eleapresenta asdimenses em pixels. E na parte do meio as dimenses em cm que so referentes ao documento, alm da resoluo. Abaixo temos as opes de Scale Styles, que ao estar marcada far com os estilos aplicados sejam redimensionados (veremos estilos posteriormente), est marcada a opo Constrain Proportions, que mantm a proporo da imagem. Para

109

definirasnovasdimensescliqueemOK. Sempre que for trabalhar com imagens em grande formato, e precise adaptlas em um layout, altamente recomendvel redimensionlasantesaumvalorprximodoqueprecisa,issofar comoPhotoshopconsumamenosmemriadeseuequipamento. Voc pode tambm aumentar a rea de uma imagem ou diminuir a rea recortandoaimagematravsdocomandoCanvasSize. Vejaaimagemoriginal.

CliquenoMenuImage,CanvasSize

110

A caixa de dilogo mostra as dimenses originais da imagem, e permite que voc possa adicionar as novas dimenses, definindo tambm um ponto de ncora.NocasovoualteraroWidthpara800ecolocarcomopontodencora omeiodireita.

AoclicaremOK,oPhotoshoppedirumaconfirmao.

Casopreciseretornar,utilizeocomandodesfazer(CTRL+Z).Umaobservao

111

importante,oPhotoshopnopossuicomandosdedesfazercumulativos,caso preciseretornarmaisdeumcomando,utilizeMenuEdit,StepBackward. OutraformadeserecortarumaimagematravsdaferramentaCROP cliquesobreaferramentaeobserveabarradepropriedades. ,

Podemos utilizar para ela um corte livre, ou podemos pela barra de propriedades definir altura, largura e resoluo. Estes dados ficam armazenados na memria do Photoshop, ento caso venha a utilizar essa ferramentaeprecisedecortelivre,bastaclicarnobotoClear. Para utilizao da ferramenta basta clicar onde comea o recorte mover o mousecomobotoesquerdopressionado.

Observequeaosoltaromouseeleaindanofazocorteeapresentaalasde dimensoparaquesepossaalterarareadecorte.Aodefinirareadecorte desejada, clique no boto de confirmao na parte superior da tela (canto superiordireito,botoemformadeV).Parafacilitarautilizaodaferramenta decorteemreasdepreciso,pressioneateclaCapsLock(maiscula)deseu teclado que o cursor do mouse transformase em uma cruz, facilitando o processo.

Acesse a pasta Redimensionamento, e veja as propriedades em

112

vdeo.

Trim
Esse comando utilizado quando se tem uma imagem onde a rea vazia ao redordelamaiorquesuarea.Elecalculaoespaoefazocorte.

Ao abrir uma imagem com uma rea maior que a imagem, clique no menu Image,Trim.

ConfirmeasreasaseremcortadasemcliqueemOK.

113

Selees
Se voc deseja editar uma parte de uma imagem sem medo de que poderia danificar acidentalmente outra parte, necessrio primeiro selecionla. Para selecionar uma parte de uma imagem em um programa de pintura, voc a envolvecomumcontornodeseleoouumamarcadeseleo,oquedizao Photoshop onde aplicar suas instrues de edio. O contorno de seleo aparececomoumpadrodemovimentodemarcasdelinhastracejadas.

Seleoretangular
Degrandeimportnciaparaosprogramasdepintura,essaferramentapermite quevocselecionepartesretangularesouquadradasdeumaimagem. Aoselecionaraferramenta,nabarradepropriedadestemos:

Botodeseleodaferramenta,aoladotemososbotesdemanipulaode nossa seleo. O que est selecionado o boto natural, onde, ao se fazer uma seleo e soltar o mouse e clicar novamente ele descarta a seleo anterioreiniciaumanova,osegundobotopermitesomarumanovaseleoa que j est feita, esse comando pode ser substitudo pela tecla SHIFT pressionada. O terceiro permite subtrair a seleo com a nova seleo, pode ser substitudo pela tecla ALT, o ltimo boto desse grupo permite fazer a intersecodasselees,podesersubstitudopelasteclasSHIFT+ALT. Podemos definir um enevoamento de nossa seleo atravs do comando Feather. Em style podemos definir valores para nossa seleo. Fixed Ratio, far sempre que a seleo possa ser escalar, mas respeitando os valores ali

114

descritos,eFixedSize,farcomaseleosejafeitapelosvaloresalidigitados.

ElipticalMarquee
A ferramenta Eliptical Marquee funciona como a Retangular Marquee, exceto pelofatodequeelaselecionaparteselpticasoucircularesdaimagem.

Quando precisar selecionar um objeto circular perfeito, no oval, posicione a seleo ao centro da imagem e faa a seleo com as teclas SHIFT+ALT pressionadas, isso quando ainda no houvernenhumaseleo,casocontrrio,elefaraintersecodasselees.

115

GruposdeFerramentaLao
A primeira ferramenta do grupoda ferramenta Lao laolivre,embora voc possautilizaressaferramentaparselecionarqualquerrea,necessriouma preciso muito grande na seleo, ento ela mais utilizada para selees livres.

Asegundaferramentalaolaopoligonal,elepermiteaseleoemngulos retos.

O lao magntico que a terceira ferramenta de seleo do grupo Lao, permite criar selees de acordo com os pixels de suaimagem. Conforme se vaiarrastandooumouseelevaicriandopontos.Vocpodeacrescentarpontos

116

clicando,epodevoltarpontosusandoateclaBACKSPACEdeseuteclado.

FerramentaVarinhaMgica
A primeira das ferramentas a Quick Select Tool, que permite selecionar os objetos da seguinte forma. Clique em uma parte de sua imagem, mantenha pressionado e continue arrastando, em reas como a imagem com grande destaquedecores,ficafcildefazeraseleo.

Asegundaferramentaavarinhamgica,elaverificaopixelecapturatodos os pixels semelhantes e ligados a rea clicada. Voc pode configurar a

117

tolerncia da ferramenta atravs da barra de propriedades. Ela muito til a selecionarreasquetenham destaqueemrelaoaofundodaimagem.

Emqualquerumadasformasdeseleovistas,comoasqueainda seroensinadas,podemserdescartadas,pressionandoCTRL+D.

AcesseapastaSelecoes,evejaaspropriedadesemvdeo.

MenuSelect
Podemos tambm manipular as selees em nossa imagem atravs desse menu.Asopesso: AllSelecionatodaaimagem. DeselectDesfazqualquerseleocriada,podesersubstitudopeloCTRL+D. ReselectRetornaaltimaseleofeita. InverseInverteaseleoatual.

118

AllLayersSelecionatodasasLayers. DeselectLayersDescartaaseleodetodasasLayers. SimilarLayersSelecionaLayerssimilares. Color Range Permite selecionar em sua imagema partir de pixels em uma seleojexistenteouatravsdetodaaimagem.

Feather
Permitefazerumenevoamentonaimagem,baseadopelaseleofeita. Abraumaimagem,faaporexemplo,umaseleoretangularemsuaimagem.

CliquenomenuSelect,Modify,Feather

119

DefinaovalordoenevoamentoecliqueemOK Se voc pressionar DELETE, ele apaga o que est selecionado, mantendo o enevoamento.

Pormvamosfazercomqueeleenevoeemvoltadaseleoedeixeaimagem comfundotransparente. PressioneCTRL+Zparavoltarseleo. CliquenoMenuSelectInverse. Observe agora na paleta de Layers que na Layer da imagem aparece um cadeado.

Issosignificaqueobackgrounddaimagemestbloqueado.Paradesbloquear obackground,dumduplocliquenalayer.

120

PressioneOKevejaqueagoraaimagemestdesbloqueada. PressioneDELETE.

Sobre as demais opes do Menu Select, Modify: Border Acrescenta uma bordaemsuaseleo.SmoothSuavizaaseleo.ExpandAumentaasua seleo.ContractDiminuiasuaseleo. Asdemaisopesdomenuselectso: Grow Seleciona os pixel vizinhos de uma seleo existente e tem cores semelhantessincludasnaseleo,deacordocomovalordetolerncia. SimilarFuncionademaneirasimilaraopoGrowexcetoqueospixelsno precisamseradjacentes,quandoacionadoocomando,eleselecionaqualquer pixelqueestejadentrodafaixadetolerncia,independentedolocaldopixelna imagemdeprimeiroplano. Transform Selection Permite alterar a forma de sua seleo atravs da

121

barradepropriedades.

Atravs do Menu Edit, Transform, podemos tambm modificar a forma de nossaseleo,inclusiveadicionandoPerspectiva. AindanabarrasdepropriedadesnofinaldabarratemosobotodeWARP,ele permitetrabalharaseleocomosefosseumenvelope. Edit in Quick Mak Mode Permite editar a seleo em mascara rpida. Ao selecionar essa opo, ele preenche toda a tela na cor vermelha. Com a ferramentapincelvocpodealteraraseleo.

Observequeolocaldaseleoficacomascoresnaturais.Comaferramenta pincel, pinte dentro da rea da seleo, depois desmarque a opo Edit in QuickMaskMode.Eobservequesemudouaseleo.

122

SaveSelectionPermitesalvarumaseleo.Aosalvaraseleo,elasalva comoumnovocanal(estudaremoscanaisposteriormente).

LoadSelectionPermitecarregarumaseleosalva.

Camadas
As camadas abrem um mundo novo deliberdade artstica e possibilidades de projeto. Ao utilizar camadas, a arte digital que voc imaginou, mas nunca pensou ser possvel,estar ao seu alcance.As camadas o liberam de muitas restries impostas por possibilidades de projeto sem ter de gastar horas selecionando. Quando voc trabalha em uma camada como se estivesse editando uma imagem em uma folha de acetato: imagens sob acetato podem aparecer atravs de reas transparentes. Se voc possuir camadas mltiplas, poder reorganizlas em qualquer ordem. Se voc apagar um objeto em uma camada, ele ser mostrado atravs das imagens do plano de fundo. Se voc mover uma camada, todos os objetos na camada iro se mover juntos, como umgrupoindependentedasoutrascamadas. VocadministrarsuascamadascomomenuLayereapainelLayer.

123

OpainelLayer

O painel layer possui em seu cabealho o menu de escolha de modos de mesclagem de camadas, o grau de opacidade da camada, na segunda linha temos, a opo de bloqueio (transparncia, Pintura, movimento e total) e porcentagemdepreenchimentodacamada. Abaixotemosoempilhamentodascamadas. No rodap temos os botes delinkar camadas , para que ele fique ativo,

necessrioterduasoumaiscamadaseelasprecisamestarselecionadas. O boto de efeitos de camada . Boto de adicionar uma mscara a , Boto de criao de grupos de

imagem . Boto de Adjustment Layer

camada .Botodenovacamada ebotodeexcluircamada . Para criar novas camadas, alm do boto de New Layer, podemos usar a mesmaopoatravsdoMenuLayer.

124

Quando se seleciona uma parte de uma imagem e cola isso na mesma imagem,ouemoutraimagem,amesmaadicionadaemumanovalayer. Podemosarrastarumalayerdeum arquivoparaoutroarquivo. Vamosentoaumexemplo,temosasduasimagensabaixo.

Vamosadicionarosanducheimagemdocaf. Comavarinhamgica,selecioneapartebrancadaimagemdosanduche.

Como selecionamos a parte branca, mas o que nos interessa o sanduiche ,vamosinverteraseleo(MenuSelect,Inverse).DepoiscliquenomenuEdit Copy. Abraouretorneaimagemcomocafecole.Aimagemsercoladanocentro

125

daimagem. Vamosredimensionaraimagememovereladelocal.PressioneCTRL+Tpara queeledeixeaimagemparaessetipodeedio.

Redimensioneeposicioneosanduicheemsuaimagem.

126

Observe que no painel de Layers, aimagem do sanduiche aparece acima da layerdocaf.

AcesseapastaCamadas,evejaaspropriedadesemvdeo.

Duplicandocamadas
Para duplicar uma camada, basta voc selecionar a camada que deseja duplicar e utilizar a opo do Menu Layer, Duplicate Layer, podese tambm usar a combinao das teclas CTRL+J. Se voc selecionar uma parte de sua camada e pressionar CTRL+J, ser duplicado somente o que foi selecionado. Podese tambm arrastar a camada selecionada ao boto New Layer, isso tambmfarcomqueaLayersejaduplicada.

Mesclandocamadas
O Photoshop permite que voc mescle as camadas como nenhum outro programa. O painel Layers fornece quatro modos de mesclar pixels entre camadas.Nenhumadessastcnicasmudapermanentementetantoquantoum pixelequalquercamada. OvalorOpacityDigiteumvalornacaixaOpacityprximapartesuperiorda paleta Layers para alterar a opacidade da camada ativa ou da seleo

127

flutuante. O valor Fill A opo Fill permite voc ajustar a opacidade das informaes depixelnacamada,sem afetaraopacidadedenenhum dosefeitosdecamada quepossam seraplicados.

ModosdeMesclagem
Escolhaumadasopesdomenupopupparamisturarcadapixeldacamada ativacomospixelsdacamadaabaixodela. Osmodosdemesclagem:

Normal

Dissolve

Darken

Multiply

128

ColorBurn

LinearBurn

DarkenColor

Lighten

Screen

ColorDodge

129

LinearDodge

LighterColor

Overlay

SoftLight

HardLight

VividLight

130

LinearLight

PinLight

HardMix

Difference

Exclusion

Hue

131

Saturation

Color

Luminosity

AcesseaPastaMesclagem,evejaaspropriedadesemvdeo.

EstilosdeCamada
Soefeitosparaautomatizaraaplicaodeefeitosemcamadas,efeitoscomo sombras,chanfros,brilhos,etc... Paracriarumefeitodecamada,bastaapenasqueacamadanoestejavazia. Existem diversas formas de se aplicar os efeitos de camada. Voc pode acessar ao menu Layer, Layer Style, ele mostrara as opes de Mesclagem. Esse comando pode ser substitudoporum duplo cliqueno cone da camada (no no nome). Podemos tambm n boto add layer style rodapdopainelLayers. Sermostradaaseguintetela. que fica no

132

Se voc apenas marcar a caixa de checagem da opo, ele aplica as configuraes padres da opo. Ao clicar no nome da opo ele mostra as opesdisponveis. Asopesso: Blending Options Default Permite trabalhar os modos de mistura da camada,bemcomosuaopacidadeeseupreenchimento. DropShadowAplica uma sombra projetada comum. Podese especificar a cor,sombra,opacidade,modode mesclagem,posio,tamanhoeocontorno dasombra.

133

Inner Shadow Aplica uma sombra projetada interna. Simula o tipo de sombraquevocobteriaseacamadativessecadodoplanodefundoisto, o plano de fundo parece que est frente, projetando uma sombra sobre a camada.

OuterGlowCriaumhalotradicional,comoumbrilhoemvoltadosobjetosda layer.

134

Inner Glow Aplica o efeito de Glow internamente, ou seja, para dentro dos objetos.

Bevel and Emboss Produz cinco efeitos de aresta distintos, conforme definidonomesmostyle.Podeseaplicarumaarestachanfradatridimensional aoredordaparteexternadacamada.OefeitoinnerBevelproduzumaaresta chanfrada dentro da camada. O efeito emboss combina chanfros internos e externos.OefeitoPillowembossreverteochanfrointernoparaqueaimagem apareaocultae,emseguida,surjanovamenteaolongodacamada.

135

ContoureTexturesosubopesdeBevelandEmboss.Asconfiguraes da opo Contour criam ondas na superfcie da camada que resultam em ondulaesdeefeitosluminosos.

Satin Cria ondas de cor. Voc define o comportamento das ondas, usando asopesContour.

Color, Gradient e Pattern Overlay Preenchem a camada com uma cobertura de cor slida, um degrade ou um padro de repetio respectivamente. Elas funcionam de modo quase idntico aos trs

136

preenchimentosdinmicosdisponveisparaascamadasdeforma.

StrokeUseessaopoparatraarumcontornoaoredordeumacamada.

Aps a personalizao de seu estilo, voc tambm pode salvlo para uso posterior, ele ser salvo junto aos estilos do Photoshop, para isso clique no botoNewStyle.

137

AcesseapastaEstilos,evejaaspropriedadesemvdeo.

PainelStyles
Atravs do painel Styles podemos facilitar a aplicao de efeitos de camada. Quando salvamos anteriormente o nosso estilo ele tambm armazenado dentrodessepainel.

Quando for necessrio aplicar um estilo di painel em uma camada do Photoshop,bastaclicarnoestiloqueomesmoseraplicadoacamada. Almdosefeitoapresentados,possveladicionareousubstituirestilos,basta clicar no canto superior direito do painel, ele apresentar as opes da camada.

138

AoclicarporexemplonaopoButtons,oPhotoshopirperguntarqualao devesertomada.

OK para confirmar a substituio, CANCEL para abandonar a substituio ou APPEND que adiciona os demais botes, sem remover os que esto disponveis.

139

AcesseaPastaPainelEstilos,evejaaspropriedadesemvdeo. O processo de adicionar mais elementos ao Photoshop semelhante ao que fizemos para o painel estilos. Podemos tambm obter arquivos externos e adicionar ao programa. No casodosestilososarquivostemaextenso.asl.Vocpodeobterestilospara oPhotoshopatravsdoAdobeExchange(http://www.adobe.com/br/exchange/)

Textos
Quando se trata de textos no Photoshop podemos dimensionar o texto conforme necessrio, aplicar formatao de pargrafo, fazer ajustes de cor, largura,altura,espaamentoedeslocamentodelinhadebase,distorcerotexto usandocaixasdedilogoefiltrosdedistoro,convertercaracteresemformas para que se possa ento editar, preencher e traar exatamente como se faz com objetos, converter o texto em bitmap para que se possa aplicar filtros e ferramentasaplicveisscamadasdeimagensusuais. Podemoscriartextosnormaisnahorizontalenavertical,etextosdemscara. Paracriarumtextonormal,bastaselecionaraferramentatexto,clicarondese deveiniciarotextoedigitar.

140

Para poder alterar seu texto, voc deve chamar o painel Character e ou Paragraphdeacordocomoqueforalterar.

AsopespadrodeCaracteressotipodafonte,tamanhodafonte,leading (altura de letra), kerning (espaamento de correo entre as letras), tracking (espaamento entre o bloco de texto), escala vertical,escala horizontal, altura dalinha de base, cor da fonte, estilos de texto,idioma. Nas opes do painel vocpodeaindaadicionarsublinhadosetraados,sobrescritoesubscrito. As opes de pargrafos so, alinhamentos, identamentos, espaamentos antes de depois dos pargrafos, hifenizao. Nas opes do painel podese configurarajustificaoeahifenizao. Quando for necessrio construir um bloco de texto, voc precisa criar uma caixadetexto.

Observe que a caixa possui alas de redimensionamento para que se possa aumentaroudiminuiroespaoparaotexto.

141

Enquantosedigitaotexto,tantodettulos,quantodepargrafos,enquantoem edio(aindacomaferramentatextoativa),abarradepropriedadesmostraas principaisconfiguraesparaaotexto.

Mais ao final da barra existe um cone que possui a letra T, com um arco embaixo,chamasewarped,elepermitecriardistoresnotexto.

AcesseapastaTexto,evejaaspropriedadesemvdeo.

TextodeMscara
Otextode mscarafuncionacomoumaseleo.Paraentendermelhoroseu funcionamentovamosaumexemplo. Abraumaimagemdesuapreferncia,dupliqueaimagem(CTRL+J).

142

CliquenaferramentadetextodeMscara.Aoclicaremsuaimagem,elaficar emvermelho,poissetratadeumamscara.Configureseutextoedigiteasua palavra. Ao confirmar a edio ele mostrar o texto como uma seleo na imagemduplicada.

CliquenomenuSelect,InverseepressioneDELETE,depoisdesfaaaseleo (CTRL+D).Pelopainellayersvocpoderobservarqueaimagemdalayerde cimaagorasomenteaimagemdotexto. CliquenoMenuLayer,LayerStyleBlendOptions.Configuredaseguinteforma: DropShadow

143

OuterGlow

BevelandEmboss

144

Stroke

AcesseapastaTextodeMascara,evejaaspropriedadesemvdeo.

Rasterizandootexto
Em algumas situaes ser necessrio, rasterizar o texto, ou seja, ele precisardeixardesertexto. Essa situao ser necessria quando voc precisa usar as ferramentas de transformao, alguns filtros, etc..., comando que no so permitidos em textos. Pararasterizarumtextooprocedimento:MenuLayerRasterizeType.

145

DemarcadoreseShapes
As ferramentas de demarcao do Photoshop fornecem maneiras mais flexveiseprecisasparadefinirumapequenaseleodemscaras. Podemos criar demarcadores a partir do zero usando vrias ferramentas de formaoucaneta,oupodemosfazerusodogrupodeelementosprontos. Os demarcadores diferem das selees normais porque eles existem no equivalente a uma camada distinta e orientada para objeto que est posicionada na frente da imagem. Essa configurao permite que voc edite umdemarcadorcomumaprecisopontoapontosemmedodeacidentalmente danificaraimagem.

Tiposdedemarcadores
Canetas

OfuncionamentodascanetasidnticoaoquevimosnoFireworks. Ao clicar em qualquer ferramenta de demarcao a barra de propriedades mostraraspossibilidadesdecriao.

Ele mostra a ferramenta selecionada, ao lado temos a opo de desenhar nossaforma(shapelayer)emumanovacamadacomumamscara.

Voc pode manipular sua forma normalmente. Voc pode transformar seu demarcador em uma seleo de duas formas. Voc pode clicar no cone de

146

seudemarcadoreelefaraseleo,oupodeacionaropainelpaths

OunorodapdopainelclicarnobotoLoadpathasselection. Ainda pela barra de propriedades, o segundo boto permite que se faamos caminhos,pormnalayerativa. Aindapelabarrapodemosacionarasdemaisferramentasdedemarcadores. FreeFormPenToolPermitetrabalharcomacanetadeformalivre. RectangleToolPermitedesenharretngulosequadrados Rounded Rectangle Tool Permite desenhar retngulos com cantos arredondados. Observe que ao selecionar a ferramenta na barra de propriedadeselehabilitaumanovapropriedadeRadiusquepermitedefiniro arredondamentodoretngulo. ElipsePermitedesenharelipsesecrculos. Polgono Permite desenhar polgonos, ao clicar sobre o cone dessa ferramenta, na barra de propriedades ele habilita a opo de quantidade de lados. Trao Permite desenhar traos, ao clicar no cone dessa ferramenta ele habilitanabarradepropriedadesapossibilidadedeespessuradotrao. CustomShapeToolltimaferramentadedesenho.Aoclicarnelaelahabilita aopoShape.

147

Ao selecionar as opes dessa ferramenta ela apresenta os demarcadores possveis. Elapermiteaindaquesepossaadicionarmaisdemarcadorescomoexplicado nopainelstyle.

PodemosadicionarmaisshapesatravsdaopoLoadShapes.

Cores
Acortoimportantenoselementosgrficosdecomputadornosdiasdehoje que voc poderia achar que o conceito de uma imagem em tons de cinza, preenchida apenas com pixels preto, branco e cinza uma noo extica e antiquada. ObotodeaplicaodecoresnoPhotoshop nabarradeferramentas: .

O quadrado em vermelho representa o Foregound ou cor de primeiro plano. Indica a cor a ser aplicada quando voc usa as ferramentas de pintura, pinceis,etc... Obrancorepresentaobackgroundoucordesegundoplano. Ao clicar no cone do primeiro plano ou do segundo plano, ele abre o Color Picker.

148

O Photoshop permite trabalhar com os padres de cores HSB, LAB, RGB , CMYKehexadecimal.Emnossocursodevemosnosatentarprincipalmenteas coresRGBeaseusrespectivoscdigoshexadecimais. Quandoseestemumprojetoejsesabeascoresaseremutilizadas,aose escolhera core podese enviar a mesma para apaleta de swatches, clicando nobotoAddToSwatches.

Ferramentasdeutilizaodecores
Eyedroper Permite capturar a cor de qualquer elemento e

149

automaticamenteadeixacomoacorpadroparaoprimeiroplano. Color Sample Tool Faz parte do grupo de ferramentas Eyedroper, ela

possuiinclusiveumconesemelhanteacrescidodeumalvodemira.Elatema funodecapturarasinformaesdecoreseexibirnopainelINFO.

Paint Bucket Tool

Ou simplesmente balde de tinta, ferramenta de

pintura padro do Photoshop, funciona da seguinte forma, caso haja uma seleo ele pinta dentro da seleo, caso contrrio preenche toda a layer. Possuiconfiguraonabarradepropriedades.

As propriedades so preenchimento com cor de foreground ou padres de preenchimento. Ao escolher padres ele habilita a janela de escolha de padres,mododemesclagemdecores,nveldeopacidadeetolerncia. Gradiente Tool Ferramenta que faz parte do grupo da Paint Bucket Tool, permite criar preenchimentos gradientes. Ao selecionar essa ferramenta a barradepropriedadesficapersonalizadaparaaferramenta.

A primeira opo se clicada na flecha de opes trs algumas opes de gradiente.

150

A primeira faz a mistura do primeiro e segundo plano, a segunda mistura referente cor deprimeiro plano com transparncia,a terceira em relao s corespretoebranco,depoistemosalgunspadresdegradiente. Aoclicarnacorgradienteabreseateladeconfiguraodogradiente.

Almdospresetsjprontos,abaixotempoabarradeediodogradiente.Os marcadores de baixo, permitem trabalhar com as cores de seu gradiente. Os marcadores de cima trabalham a opacidade de seu gradiente. Aps a modificaodogradientevocpodesalvar,clicandoemNEW.

151

Osegundogrupodeferramentasreferenteaplicaodogradientes,linear, radial, em ngulo, refletido e diamante. As demais opes so referentes a mododemisturaegraudeopacidade. Apsaescolhaaplicarogradientecomaferramenta.

AcesseapastaCores,evejaaspropriedadesemvdeo.

152

ComandoFill
Podemos preencher tambm uma seleo ou layer atravs do comando Fill. CliquenomenuEditFill.

As opes de preenchimento com o comando Fill so. Foreground Color, BackgroundColor,Color,Padres,History,Black,50%BlackeWhite. AoescolheraopoPadroelehabilitaaescolhadopadro.

Vocpodeadicionarpadrescomofizemoscomestiloseshapes. Podemostambmcriarnossosprpriospadres. Crieumanovaimagemde10x10pixelscomfundotransparente.

153

Aumenteozoomparaquevocpossavermelhorsuaimagem. Faa uma seleo retangular utilizando o fundo quadriculado do fundo transparente.

Preenchasuaseleocomacordesejadaedepoisrefaaaseleoondeela passe pela linha que ficou preenchida e linhas sem preenchimento acima e abaixo.

CliquenomenuEdit,DefinePattern

154

Agoravocpodeadicionaropadroemsuasimagens.

Traos
Traossoteisparaacriaodemoldurasecontornos. OcomandoStrokepodeseraplicadoaseleesecamadasinteiras.

Na caixa de dilogo stroke, voc pode especificar a espessura do traado na caixa de opo Width. Podese definir tambm a cor do trao, se trao ser internoapartirdocentroouexterno.PossuitambmasopesMode,Opacity

155

ePreserveTransparency.

Pincis
OPhotoshopforneceduasvariedadesbsicasdeferramentasBrush.Existem as ferramentas Paint que permitem aplicar cores a uma imagem. Depois existem ferramentas de edio, que modificam as cores existentes em uma imagem. De uma maneira ou outra, voc opera a ferramenta arrastando o cursordentrodaimagem,muitoparecidocomoquevocfariacomumpincel realemumafolhadepapel. Existemduasferramentasprincipais:aBrusheaPencileseisferramentasde edio:Blur,Sharpen,Smudge,Dodge,BurneSponge.

Cada ferramenta pode ter suas propriedades alteradas pela barra de propriedades.

FerramentaBrush
Pintaumalinhaqualquerconformevocdesenha.Vocpodeescolheraforma deseupincelatravsdabarradepropriedades.

VejaumexemplodeaplicaodoBrush.

156

Pencil
Pinta uma linha de qualquer espessura na cor de primeiro plano. Entretanto, enquanto as linhas da ferramenta Brush so sempre suaves, as linhas da ferramenta Pencil so sempre de arestas slidas, sem nenhuma interao entrealinhadolpiseascoresdoplanodefundo. QuandovocselecionaaferramentaPencil,umanicacaixadeseleo,Auto Erase aparece na barra options. Quando selecionada, essa opo instrui ao Photoshopparapintarcomacordeplanodefundo,apagandoassim,sempre quevoccomeaapintaremumareajcoloridacomacordeprimeiroplano. Voc pode aplicar a ferramenta Brush, arrastando o mouse, ou pode apenas dar um clique, o que far com que ele desenhe apenas um brush. Ao trabalhar com o tamanho e Brush certo, possvel criar artes bem interessantes. Voc pode adicionar mais brushes da mesma forma que fizemos com os estilos. Quase todas as ferramentas do Photoshoppermitemadiodecontedo.

AcesseapastaBrushes,evejaaspropriedadesemvdeo. No CDROM dentro da pasta do Photoshop existe uma pasta chamadaBrushescomalgunsexemplosquepodemseradicionados aoseuPhotoshop.

157

Blur(desfoque)
A primeira das ferramentas de foco, a ferramenta Blur desfoca uma imagem diminuindoocontrasteentreospixelsadjacentes. importanteestarcomalayerqueserdesfocadaselecionada.

Sharpen(Nitidez)
A segunda ferramenta de foco define a nitidez seletivamente aumentando o contrasteentreospixelsadjacentes.

Smudge(Borrar)
Borraascoresdaimagem.Oefeitomuitosemelhantecomoesfregardetinta fresca.

Dodge(Subexposio)
Aprimeiradastrsferramentasdeaplicaodetons,permitequevocclareie umapartedeumaimagem.

Burn(Superexposio)
o oposto da ferramenta Dodge, escurecendo medida que voc arrasta sobreela.

158

Sponge(Esponja)
A ferramenta Sponge, retira a saturao de uma imagem quando trabalha dentrodeumaimagemcoloridaouretiraocontrastequandotrabalhaemtons decinza. Podemos tambm acessar aos brushes e suas configuraes pelo boto ToogletheBrush napartesuperiordoPhotoshop.

Restauraoetransformao
O Photoshop possui tambm diversas ferramentas e opes de manipulao, restauraoetransformaodesuaarte.

CloneStamp(Carimbo)
A ferramenta carimbo permite copiar pixels de uma rea para outra. Isso faz comquevocpossa,repararpequenosdefeitos,copiarreasdeumaimagem. Paraqueaferramentafuncione,bastaclicarnareaasercopiadacomatecla ALT pressionada. Conforme voc arrasta o mouse ele mantm um sinal de

159

mais(+)nareaasercopiada.

Na verso boto CS4, foi implantado um novo recurso a essa ferramentaqueaconfiguraodaferramentacarimbo.Paraacessar essas propriedades voc pode clicar na barra de propriedades no boto em forma de carimbo carimbo. , ou na paleta lateral direita no boto de

AcesseapastaCarimbo,evejaaspropriedadesemvdeo.

SpotHealingBrush,HealingBrush,PatcheRedEye
A ferramenta Spot Healing funciona de forma semelhante ao carimbo, ela permitemesclarreasdeumaimagem,vejaumexemplodeusodelaabaixo.

A ferramenta Healing Brush, funciona de forma semelhante a Spot, mas precisaquesepressioneateclaALTcomoocarimbo. AferramentaPath,permitecopiarumareacomosefosseumaseleo.

160

Aochamaraferramentaelahabilitaalgumasopesnabarradepropriedades.

Quandomarcadoaoposource,vocfazaseleoeaoarrastaraseleo, elecopiaondevocsoltaromouseparaondefoifeitaaseleoanteriormente.

Se a opo ao Destination estiver selecionada ele ento copia o que foi selecionadoparaondevocarrastaraseleo. A ferramenta Red Eye Tool , como o nome diz, permite a remoo de olhos vermelhosdefotografias.

AcesseapastaHealing,evejaaspropriedadesemvdeo.

Eraser
Quandousadaemumaimagemdecamada nicaounacamadadeplanode fundo,aferramentaeraserpintanacordeplanodefundo.Quandoaplicadaa uma camada, ela apaga os pixels para revelar as camadas de baixo. Possui duas variaesa Background Eraser e a Magic Eraser, que extraem detalhes automaticamentedoplanodefundodeumacamada.

Transformao.
AlmdapossibilidadedoatalhoCTRL+Tparaediodeobjetos,oPhotoshop possui tambm as propriedades de transformao atravs do menu Edit, Transform

161

AprimeiraopoScale,comoonomediz,permitetrabalharasdimensesdo objetonalayer. AsegundaopoRotate,permiterotacionarosobjetosdalayer. Skewpermiteinclinarosobjetos. Distort, permite distorcer os objetos, ao distorcer por exemplo o lado direito inferior e manter pressionado o SHIFT e ALT, ele tambm distorce o lado direitosuperior.Simulandoumaperspectiva

Perspective,permitedarperspectivaaosobjetosdalayer Warp, uma ferramenta nova que foi disponibilizada com a verso CS3. Ela funcionadeformasemelhanteaWARPparatextos,pormcommaisliberdade eemobjetosdoPhotoshop. Observeoexemplo.Foiadicionadoumshapeemumobjeto, mesmoapster sidorasterizado,oshapenoficoubom.

162

Comalayerdoshapeselecionada,acioneocomandowarp.

Observequeelecriaumamalhacompontosdemanipulao.Bastaclicarnos pontosedeixarcomqueaformaacompanheaformadoobjeto.

Confirme a alterao clicando no boto de confirmao no canto superior direito .

Apliqueumestiloouumacorparadarmaisdestaque.

163

AcesseapastaTransform,evejaaspropriedadesemvdeo.

Filtros
Os filtros foram criados para fazer o que a maioria dos dispositivos de digitalizaonoconsegue:aprimorarumaimagemedisfararsuafalhas.Um filtropodefazercomqueoscontornosdesfocadosefracostornemsentidose bem definidos ou pode suavizar uma imagem com contornos irregulares ou rspidos. Cada filtro do Photoshop produz um efeito diferente. Alguns filtros trabalham analisandocadapixelemumaimagemouselecionandoaaplicandoalgoritmos matemticos para criar formas predefinidas ou aleatrias, como ladrilhos, blocostridimensionaisetc... Como os filtros do Photoshop so muitos e alguns deles raramente voc vai utilizar vamos mostrar alguns dos principais filtros do Photoshop. Existem empresas que se tornaram grandes fabricantes de filtros para Photoshop, esses filtros so chamados de filtros de terceiros pela comunidade de Photoshop. Osfiltrossodestrutveis,ouseja,umavezaplicadoselessomentepoderser revertidospeloscomandosedesfazeroupelopainelhistrico.Umavezsalvoo arquivo e fechado, mesmo em formato PSD, no h mais como retornar ao formatosemofiltro.ParasanaresseproblemaoPhotoshoppossuiumaopo chamada Smart Filters, ele permite que se aplique os filtros em um objeto e possaligar/desligarofiltropelopainelLayer. CliquenoMenuFilter,ConverttoSmartFilter.Elepedirumaconfirmao

ElecolocaummarcajuntoaoconedacamadanapaletaLayers,sevocder

164

umduplocliquenoconeeleapresentaumacaixadedilogo,indicandocomo deveserfeitoparaeditaraimagem.

AoclicaremOKeleabrealayerdaimagemcomoumanovaaba. AoconverteremSmartFilternoserpossvelutilizarosfiltrosLiquifyeVanish Point.

FilterGallery

naverdadeajanelapadrodeaplicaodagrandemaioriadosfiltros,voc podeobservarnomeiodela,aspastasArtistic,BrushStrokes,Distort,Sketch, Stylize e Texture, ao chamar qualquer um destes filtros, seria exibida essa janela. Ao escolher por exemplo o grupo Artistic e a opo PlasticWrap, ele mostra

165

umavisualizaodaaplicao.

Na direita podemos tambm trabalhar as variaes da ferramenta. A caixa DropDow,permitealterarentreosfiltrosexistentes,asopesdebaixovariam deacordocomofiltroselecionado. AoclicaremOK,eleaplicaofiltroenopainelLayerselemostraofiltrocomo umsmartfilter.

AcesseapastaFiltros,evejaaspropriedadesemvdeo. BlurumdosfiltrosquenoaparecemnoFilterGallery,elepermiteaplicar desfoque nos objetos. Entre as opes de Blur, esto, Radial, Motion, Gaussian.

166

Vejaoexemplo Abraumaimagemcomooexemplo

UsandoaferramentadeseleoLaomagntico,faaumseleonocarro.Ao trmino da seleo pressione CTRL+J para duplicar somente o que foi selecionado.

SelecioneacamadadefundoeapliqueofiltroBlur,BoxBlur.

167

CliqueemOK. LiquifyEle mais um utilitrio de distoro do que um filtro, ele permite alterarsuaimagem,esticando,torcendo,inflandoetc...,suaimagem.Cliqueno menuFilterLiquify.

168

Vanishing Point O recurso Ponto de Fuga (Vanishing Point) permite preservaraperspectivacorretanasediesdeimagensquecontmplanosem perspectiva, por exemplo, os lados de um edifcio ou qualquer objeto retangular. Abraumaimagemquepermitaperspectiva.

CliquenomenuFilter,VanishingPoint.

169

Asferramentasdabarradeferramentasso: Edit Plane Tool (V) Ferramenta para selecionar, editar e mover os planos criadoscomaferramentaCreatePlane. Create Plane Tool (C) Ferramenta para criar os planos. Para utilizla s clicarsobrequatropontosdistintosdaimagemformandoumaperspectiva. Marquee Tool (M) Ferramenta para selecionar algo dentro de uma perspectiva pronta ou selecionar mais de uma perspectiva criada com a ferramentaquecriaplanos.Comelavocpodemesclarcaractersticasdedois planosdistintosnaimagemousimplesmenteselecionaralgoestrategicamente dentrodaperspectivaaplicada. Stamp Tool (S) J conhecida de verses antigas do Adobe Photoshop, ela funcionacomoumaferramentadeclonagemOndevocdeveseguraratecla ALTparaescolheropontopadrodaferramentaedepoisirclonandocomao click esquerdo do mouse. Obs.: Pressiona as teclas [e] para aumentar e diminuirotamanhodoBrushaoaplicartalferramenta. Brush Tool (B) Tambm conhecida, ela tem a funo de pintar reas j selecionadasoucasonofeitas,todaaimagem. Transform Tool (T) Como diz o prprio nome, ferramenta para movla e transformarvrticesdoplano. Eye Dropper Tool (I) Ferramenta para voc selecionar a cor para usar na ferramentaBrush.sclicarsobreacordaimagemeelaserselecionada.

170

HandTool(H)Ferramentaparamoveraimagemcasoelasejamaiordoque areadetrabalhodaferramenta. ZoomTool(Z)FerramentadeZoom,simplesdeseusarCliquecomoboto esquerdo do mouse sobre a imagem para ampliar e segure ALT + click para diminuirozoom. Vamosaproveitarnossaimagemecriarumanovajanelaeumaporta. Com a ferramenta Create Plane (atalho C), faa um retngulo em volta da janela.

Com a ferramenta de seleo faa uma seleo em volta da janela, e copie, depoiscole.Depoisarrasteajanelaparaolado,observequequantomaisvoc afastaajanela,elaescalaemperspectiva.

171

Vamos agora criar uma porta na parede lateral. Faa um plano em volta da porta.

Crieumnovoplanoondequerquefiqueaporta.Apenasdesenhedecimapara baixo.CasoaconteaalgumerrouseateclaBACKSPACEparavoltar.

Vamosagoracomaferramentaclonecopiaraportaparaaoutraparede.

172

Noise
Osfiltrosdenoise(rudo)mesclamorudocomospixelsadjacentesparaque ele fique menos aparente. Voc pode usar tambm o filtro Add Noise para cobrir rapidamente uma imagem com tanto rudo a ponto de ser empregado para criar rapidamente segundos planos com texturas diferentes e interessantes.

173

Sharpen
Osfiltrosdenitideztornamaimagemmaisclaracriandomaiorcontraste,eso usadoscomfreqnciaparaaumentaroscontornosdasimagensdigitalizadas. Aaplicaodestefiltrocostumasertilapsareduodasimagensouapsa distoro dasimagens que foram editadas com os comandos Edit Transform. Os filtros de nitidez reduzem o desfoque que pode ocorrer aps a interpolarizao.

Render
Os filtros de acabamento funcionam de duas maneiras. Por exemplo, o filtro Cloudssimplesmentecriaefeitoscomaspectodenuvemnatela.Poroutrolado oLightingEffectspermiteat16fontesdeluzdiferentesemumaimageme capazatmesmodeaplicaraimagemuma texturaqueatornaparecidacom umapaisagemlunar. ExemplodeusodoLightingEffects.

174

Vdeoe3D
OPhotoshopapartirdaversoCS3,possuiduasversesparaseususurios, a verso padro e a verso estendida (extended). A verso extended, possui alguns novos recursos como a possibilidade de importar vdeo e manipular arquivosdeformatridimensional. Se voc no possui a verso extended do Photoshop, no ser possvelutilizarnaprticaocontedodestecaptulo.

Novamosnosaprofundarsobreesseassunto,pormalgunsrecursospodem serbeminteressantes.

175

Vdeo
O Photoshop permite importar ou abrir vdeos nos formatos MOV, AVI, MPG, MPEG,MP4EM4V. NspodemostrabalharcomvdeosdentrodoPhotoshopdeduasformas. Podemosabrirovdeoouimportar. NoCDROMdentrodapastamatrizesdoPhotoshop,vocpodeusar doisarquivosemMOV.

Abrindoovdeo
Para abrir o vdeo, o processo o mesmo de quando abrimos um arquivo, menufile,open. Escolha seu vdeo e ele ser apresentado como uma imagem, com exceo quenopaineldelayersoconeteraformadeumfilme. Parapodernavegarpelofilme,deixevisvelopainelAnimation(menu,window, animation).EleficanorodapdatelaprincipaldoPhotoshop.

ObservequenessepainelvocpossuiumTIMECODEnaesquerdaerelao FPS (frames per second). A layer de vdeo e uma opo chamada Global Lightning. Junto a essa opo possui um cone de relgio, isso permite que sejam criados quadros chaves dentro de nosso filme. Onde podemos fazer correesnomesmo Vamos a um exemplo simples para entendermos como o Photoshoplida com vdeos. Se voc precisa trabalhar de forma profissional com vdeos. A Adobe possui em sua gama de produtosdiversos aplicativos para edio e composio de vdeos como Adobe Premiere e Adobe AfterEffects. Aps ter aberto seu vdeo, na painel de layers, clique no cone de New AdjustmentLayerseescolhaaopoPhotoFilter.

176

ObservequenabarraAnimation,elecriaacamadadePhotoFilter.

Mudeofiltro,oualtereacoredeslizeocontrolededensidade,eobserveque eletrabalhaemseufilme.

Podemosfazerasalteraesdeformaanimada.Observequejuntoacamada deajustedeseuvdeo,possuiumaflechaparaadireita,aoclicarnessaflecha eleexpandeasopesdetrabalhocomofilme.

177

Vamosalteraraopacidadedenossoefeito. Defina uma posio inicial e coloque o controle deslizante. Clique sobre o cronmetrodeOpacity.

Ele vai criar um quadro chave, observe o losango em amarelo na linha do tempo.Coloqueaopacidadeem0(zero). Arrasteocontroledeslizanteatondequeraalteraodeopacidade.Observe queocronometrojestmarcado,porm,antesdeletemumlosangovazado. Cliquesobreeleparacriarosegundoquadrochave.

Coloqueaopacidadeem100%.

178

Comissoaopacidadeficaranimada.Testeoutrosefeitosemseufilme,dentro mesmodePhotoFilter,temosalgunsfiltrosinteressantescomoporexemploo Spia. Faa alguns testes, cria numa nova layer, aplique um preenchimento, aplique filtrosevejaaquantidadedeopesquepodemosaplicaremumvdeo

AcesseapastaVdeo,evejaaspropriedadesemvdeo.

Renderizandoovdeo
Aofinalizaroseuprocesso,necessriorenderizarovdeo. CliquenomenuFile,export,RenderVideo.

179

Nessajanelanecessriodefinironomedoarquivo,localaserexportado,em FileOptions,podemosexportaremarquivodevdeo,ouemumaseqnciade imagens. No vamos nos adentrar nessas configuraes. Clique no boto Render.

Podemostambmimportarumvdeocomoumaanimaoemframes. Clique no Menu File, import, Video Frames to Layer, escolha o filme e clique emLoad.

180

CliqueemOK. Casoofilmesejamuitolongoeledaumavisosobreolimitedelayerspossveis

NopaineldeanimaesenopaineldeLayers,agoratemosframesecamadas quepodemsertrabalhadasdeformaindependente.

181

3D
Na verso extended do Photoshop possvel tambm manipular objetos 3D, alm de poder transformar sua arte em objetos 3D, possvel importar arquivosnosseguintesformatos3DS,OBJ,U3D,KMZeCOLLADA,deforma quevocpossaimportar,visualizareinteragircomamaioriadosmodelos3D.

Importandoummodelo3D
Clique no Menu, file Open, e escolha um modelo de arquivo 3D. Se seu equipamentonopossuirumaplacagrficacompatvel,oPhotoshoplhedaro aviso.

Na pasta do Photoshop no CDROM, existem diversos modelos em 3D para uso nos exerccios, voc pode criar os seus, ou baixar no sitehttp://www.meshfactory.com,versesfreedemodelosem3D. Aoimportarseuelemento3D,eleapresentanopaineldelayers,alayer3Ddo objetoeassublayersdetexturas.Enabarradepainisobotode3DScene.

182

Na barra de ferramentas temos tambm dois botes que permitem a

manipulaodenossoarquivo3D. Ao clicar sobre um dos modelos ele tambm personaliza a barra de propriedades.

Atravsdestesbotespossvelmanipularseuobjeto.

Atravsdopainel3D,podemosmanipularastexturaseiluminao. Voc pode ocultar as camadas de textura e mudar as cores das texturas de

183

seuobjeto.

Podemostambmtransformarobjetos2Demformastridimensionais Abraumaimagemqualquer. Clique no menu 3D, depois clique na opo NEW 3D POSTCARD FORM LAYER,comissovocpodemanipularsuaimagemem2Dcomoseestivesse em um ambiente em 3D, ou seja, com as mesmas ferramentas que manipulamososobjetos3D.

Podemos tambm usar uma imagem em 2D, para ser utilizada como uma texturaemumobjeto3D. Abra uma imagem em 2D, depois clique no menu 3D, NEW SHAPE FROM LAYER,escolhaumadasopesdeformas3Dprontas.

184

Ferramentasdeajusteecorreodecores
Porque voc deveria alterar as cores? Por uma razo, para conseguir efeitos especiais.Arazomaiscomumparamapearcoresmelhoraraaparnciade umaimagemdigitalizadaoudeumafotografia. OscomandodeajustedeimagensestodisponveisatravsdoMenuImage, Adjustmensts. Na verso CS4 do Photoshop, a Adobe criou um painel chamado Adjustments, ele permite aplicar ajustes de imagem, sem alterar o arquivooriginal,elecriaumacamadadeajusteaoseuarquivo. O funcionamento das duas formas so muito semelhantes, vamos aprender quais os principais ajustes. Paras as verses anteriores, devese clicar no paineldeLayernaopoNewLayerAdjustments .

185

Invert
Quando voc escolhe Image, Adjustments, Invert, o Photoshop converte cada cor da sua imagem na sua cor exatamente oposta, como um negativo de fotografia.

HueSaturation
Proporciona duas funes. Primeiro, ele permite que voc ajuste as cores de uma imagem de acordo com seus matrizes e nveis de saturao. Voc pode aplicarasalteraesaescalasespecificasdecoroumodificartodasascores igualmente atravs do espectro. Em segundo, o comando permite que voc colora as imagens aplicando novos valores de matiz e saturao enquanto mantmasinformaesprincipaisemtonsdecinza.

186

Aoutilizaroajustepelopainelalgumasopescomoporexemploo HueSaturationexibeumbotoemformadeumamocomumaseta deduaspontasnocantosuperioresquerdodopainel ,esseboto

permitequeaoclicarsobreele,vocpossainteragirdiretamentenaimagem.

AcesseapastaAjustes,evejaaspropriedadesemvdeo. Esse ajuste possui tambm uma opo chamada colorize, que permite colorir todaaimagemoupartedela. Vamosaumexemplo: Vocprecisafazerumagaleriadefotosdevendasdecamisetas,pormseu Cliente,enviouapenasumafotodomanequim,pormelepossuioutrascores enohavertempodefotograflas. Abraomodelodacamiseta.

Na pasta Photoshop que est no CDROM, temos o modelo utilizadonoexemplo(camisetafem.jpg). Ofundodaimagemestbloqueado.DumduplocliqueedepoiscliqueemOK paradesbloquelo. Comavarinhamgicadumduplocliquenareaembrancoparaselecionla e depois pressione DELETE, assim ficaremos somente com a camiseta e o manequim,semofundo.

187

PressioneCTRL+D,paradeselecionar. Ou pelo painel Adjustments, ou pelo boto de New Adjustment Layers, crie umalayerHueSaturation.

Marque a opo COLORIZE, e observe que a camiseta j sofrer uma mudanadecor.

188

Pormelemudatambmacordomanequim,nossoobjetivoapenasmudara cordacamiseta. Observe que a camada criada cria doiscones, o primeiroreferenteao ajuste escolhido,osegundoumretnguloembranco. DeixeascoresdeBackgroundeForegroundzeradas(Backgroundembranco

eForegroundempreto) Cliquenaferramentapincel,escolhaumapontaarredondadaepequena. CliquenoconeembranconopaineldeLayerepinteareaondeapareceo manequim. Observe que ele pinta a mscara e conseqentemente limpa o manequim.

Observetambmquenopaineldelayers,ondeestamscara,areapintada

189

apareceempreto,ouseja,vocacaboudepintar.

Ao arrastar os controles deslizantes, voc poder modificar as cores da camiseta.

Vamos exportar essa imagem com fundo transparente para uma utilizao posterior. CliquenoMenu,File,SaveforWeb. Se voc for colocar a imagem em um documento HTML com fundo branco, exporteemJPG,seforumdocumentocom fundoemcoresoutexturas,voc podeexportaremGIFcomtransparncia,ouemPNG24,pormimportante lembrarquePNG24novisvelnoNavegadorInternetExplorer6.0,somente nasversesposteriores. VamosexportaremPNG24.

190

Paragerarasdemaiscamisetas,bastamodificarascoreserepetiroprocesso deexportao.

AcesseoHueSaturation,evejaaspropriedadesemvdeo.

Levels
Ao acionar o comando, o Photoshop abre uma caixa de dilogo com um histograma e algumas opes de ferramentas Eyedroper (contagotas) no cantoesquerdo.Vocpodecompactareexpandiraescaladevaloresdebrilho emumaimagemmanipulandoasopesOutputLevels

191

Curves
Para poder mapear qualquer valor de brilho em uma imagem acione o comando Curves, automaticamente abrese a caixa de dilogo Curves, que ofereceacessosmaiscomplexasepoderosasopesdecorreodecor.

192

BrilhoeContraste
OBrightness/Contrast(Image>Adjustments)umcomandomuitosimplesde serutilizado.OPrimeirocontrolealteraobrilho.Quandoodeslocamosparaa direita, ou seja, atribumos um valor positivo, a cor branca adicionada aos pontosdaimagemparaaumentaranitidez.

Se o deslocarmos para a esquerda, o resultado o inverso. As cores so aproximadasdopretopuroparaaumentaraobscuridade. O segundo controle altera o contraste, que o choque entre as tonalidades claras e escuras. Quando deslocamos este controle para a direita, as tonalidadesescurassetornammaisescuraseasclarasaindamaisclaras.Isto

193

aumentaocontrastedaimagem,tambmchamadocontrastedetonalidades. Nosentidoinverso,astonalidadesficam maisprximasdatonalidadecentral, queocinza128. Existem diversos outros ajustes de imagem, porm como o foco de nosso cursoWebDesign,vamosnosateraosqueforamapresentados.

CriandoeexportandoumLayoutnoPhotoshop
Atravs dos conceitos aprendidos vamos criar um layout de um site no Photoshop. Inicialmentevamosdefinirotamanhodenossoprojeto. Paraqueseusitefiquebemvisvelemumaresoluoem800x600,vocpode montarumlayoutcom760x420.Pormessetamanhoprendemuitoacriao. Umalargurade780pxvistonamaioriadosnavegadoresequantoaltura,eu aconselho a no ficar preso a ele, pois visto que o usurio no enfrenta problemasemrolaratelaabaixoeacima,diferenteseomesmoprecisarrolar paraesquerdaedireita. Vamosiniciarumprojetocom900x1000px.

Vamosrenomearacamadaatualcomofundo

194

D um duplo clique na cor de Foreground e escolha a cor a ser aplicada ao fundo.

Apsaescolhadacor,cliquenaferramentaPaintBucket(BaldedeTinta),que ficajuntoaferramentagradiente.

195

Vamos definir agora a rea de nosso site, clique na ferramenta de seleo retangular.MarqueaopoFixedSizeedefinaotamanho,nocaso780x900px ecrieaseleo.

Aps feita a seleo crie um grupo e de um nome a ele, depois crie uma camadaepreenchaacamadacomaseleoaindaativa.

ImportandoarquivodoCorelDraw
Muitas vezes, voc receber algum arquivo de seu cliente em formato Corel

196

Draw,issomuitocomumemsetratandodelogotipos. ComoarquivoabertonoCorelDraw.

FaaumaseleoemvoltadeseuobjetoecliquenoMenuArquivo,exportar. Na caixa que se abre, escolha a opo PSD Adobe Photoshop, marque tambmaopoSomenteselecionados,definaolocalecliqueemExportar

Naprximaetapa,vocprecisadefiniradimenso,aresoluo(nocasousei

197

150dpi,oacertopara72serfeitodepoisnaexportaodolayout),verifiquese estmarcadoaopoFundoTransparente.

CliqueemOK AbraoarquivonoPhotoshop.

Para quem est usando a verso CS4, o arquivo abrir em abas no Photoshop,comovamosutilizareleemnossoLayout,faaoseguinte, clique no menu Window, Arrange, Float in Window, isso far com a janelasedesloque. Arrasteeposicioneoseulogo. Crieumanovalayer,aposicioneabaixodologoepreenchaacomumacor. Crietambmoutrogrupointernocomonomedetopo.

198

Nologotipovamosaplicarumefeitodecamada

199

CliquenoMenuFilesave,parasalvarseulayout.

Abra o arquivo floral.psd. Vamos utilizar a imagem da Layer 8, o mantenha em float , e arraste essa layer para seu layout, depois redimensione o seu

200

floral.

Crie uma nova layer com o nome de faixa e faa uma faixa, no caso com o contagotaseucaptureiacorusadanaLayer. Vamos tambm mudar a cor de nosso floral. Clique com a tecla CTRL pressionada no cone da Layer do floral. Isso far com que o floral fique selecionado.CliquenomenuEdit,Fill,Foreground(nocasodoexemplocomo captureiacordologonopassoanterior,acorjestavacomoForeground).

Vamosrecortartambmofloralqueestsaindodareadenossolayout. DumCTRL+Cliquenoretnguloverde.MantenhaaLayerFloralselecionada.

Inverta a seleo (Menu Select, Inverse). Caso queira manter uma cpia dos florais para uma correo posterior, duplique a camada e mantenhaa oculta (CTRL+J).

201

Agoravamoscriarasabasdenossomenuprincipal. Comaferramentadedemarcadordecantosarredondados,crieosretngulos, eselecioneos. Ao selecionar os botes na barra de propriedades, clique no boto de espaamento,paradeixarosespaosiguais.

RasterizeosShapesepreenchacomumacor.Noexemplocrieiumgradiente comascoresdotextoPedraChatadologotipo.

Acrescenteosttulosdeseumenu.

202

Crieumnovogrupochamadomioloecriedentrodeleumanovalayer. Preencha essa novalayer com um CRO, no caso utilizei uma composio de gradientecomacordapalavraRestaurante.

No canto direito, colocaremos uma foto maior e dentro dessa foto algumas menores,dandoaidiadeumminilbumdefotos.

203

VamoscolocartambmumamensagemdeBoasVindas.

Utilizandoosmesmosprocedimentosquefizemosato momentofinalizeseu layout. Vejacomoficounossoexemplo.

204

 comum ao finalizar um layout, enviar o mesmo em JPG para o clienteaprovarantesdecomeara montagem.Issofazcomquese eviteumretrabalho. Vamosexportarnossaarte. Cliquenomenu,file,SaveforWeb&devices.

205

Verifique se est no formato JPG e com qualidade 72 dpi. Depois clique em Save. ComissofinalizamosnossoestudodoPhotoshopvoltadocriaoweb.

206

ADOBEFLASH

Introduo
AtecnologiaShockwaveFlash,daAdobe,jestapresentenaWEBhalguns anosehojepresenteempraticamente98%doscomputadoresexistentes. O grande sucesso do Flash se deve ao seu poder de processamento multimdia, limitado somente pela criatividade de designers e criadores de contedo, tudo isto aliado a uma caracterstica muito importante: os arquivos transferidospelaInternetsopequenos. AnovaversoCS4queesttotalmenteremodeladafazcomqueoFlashatinja um patamar nunca alcanado para uma ferramenta de criao a animao web.

OqueShockwaveFlash
uma ferramenta de autoria e edio de imagens vetoriais com animao, som e interatividade. Baseada em imagens vetoriais, possibilita a criao de efeitosavanadosemarquivosbastantepequenos. Almdeimagensvetoriais,aocontedoFlashpodeseracrescentadoarquivos bitmaps,sons,vdeos,etc... OquesoImagensvetoriais:Asimagensvetoriaisnosogeradaspormeio da combinao de pontos de imagem, e sim criadas a partir de clculos

207

matemticos executados pelo computador. Isto significa que os arquivos que contm essas imagens armazenam somente as frmulas matemticas que representam formas, curvas e cores, e, portanto so muito pequenos. Assim, um arquivo que contenha o desenho de um crculo com 1 centmetro de dimetroterexatamenteomesmotamanhoseocrculotiver20centmetros. Outravantagemque,aoseremampliadas,noperdemabsolutamentenada em qualidade. A desvantagem das imagens vetoriais a impossibilidade de representarimagensmaiscomplexaserealistascomqualidadefotogrfica. OquepodemoscriarcomoFlash Desde simples faixas animadas com anncios para pginas da WEB, menus interativos,desenhosanimados,arquivosexecutveis,gifsanimados,etc...

OAMBIENTEDOFLASH
AoiniciarmosoFlashelevaiapresentarumatelacomasopesquepodemos trabalharcomoFlash.

Para quem j utiliza ou utilizou alguma verso anterior do Flash a primeira mudana que pode ser observada de distribuio de sua Workspace. A

208

Timeline (linha do tempo), agora est embaixo como maioria dos programasdeanimaoajanelacentralmostraseummenuinicial,nadireita temosalgumaspaletascomoPropertieseLibraryeacaixadeferramentas. possvel mudar a Workspace, para isso basta clicar no menu Window, WorkspaceeescolherumadasopesqueoFlashdisponibiliza.

Voc pode tambm modificar sua workspace, e salvla. Basta definir a posio de suas paletas, Timeline, etc... E depois clicar no menu Window, Workspace,NewWorkspace.

Preferncias
Voc pode tambm definir alteraes na exibio de componentes dentro do Flash,cliquenomenu,Edit>Preferences(CTRL+U).

209

Na primeira opo General podemos alterar as configuraes gerais do programacomoaocarregar(onLauch)oquedevesermostradoopadro ateladeboasvindas.Quantidadedeopesdedesfazer,coresdeelementos visveis,etc... Podemos definir tambm as preferncias relativas linguagem ActionScript, auto formatao. opes de objetos a serem colados no Flash, como se comportar com as ferramentas de desenho, preferncias de texto, avisos e importaodePSDeAIparadentrodoFlash.

Atalhos
OFlashtambmdisponibilizaumgrandequantidadedeatalhosparafacilitara sua utilizao, a grande maioria segue os padres dos programas grficos como CRTL+S para salvar, CTRL+A para selecionar todos os objetos. Os principaisatalhosvocpodeobservaraoselecionarumitemdemenu.

210

Na barra de ferramentas lateral aoposicionar o mouse sobre uma ferramenta ele mostra o nome e entre parnteses a letra correspondente ao atalho dela. Para saber sobre todos os atalhos do Flash, clique no menu Edit> Keyboard Shortcuts.

Nessatelatambmpossveladicionarnovosatalhosaoprograma.

211

TeladeAbertura
Na tela de abertura podemos verificar os ltimos filmes abertos, ou abrir um arquivojexistente.NaopodomeiopodemoscriarumnovofilmedoFlash utilizando a linguagem ActionScript 3, ActionScript 2, documento AIR, Flash Mbile,ActionsScriptFile,ActionScriptCommunicationFile,FlashJavaScripte FlashProject.NadireitadatelatemosAopodeusarmosumTemplateede adicionarmosumaextensoaoFlash. AsgrandesnovidadesdoFlashCS4paraquepossamserutilizadas precisaroqueseusprojetosestejamemactionscript3. InicieumnovoprojetoActionScript3

212

Configurandosuareadetrabalho
Sempre que for criar sua animao em Flash necessrio configurar as dimensesdeseufilme,avelocidadedofilme,cordefundo,etc... ParaissonadireitadatelacliquenobotoProperties,eleabreumaabaonde vocpodealteraraspropriedades.

InicialmenteelemostraaopoPublish,masobservequeexisteaiumabarra de rolagem para demais configuraes. Voc pode tambm aumentar a dimenso dessa janela, posicionando o mouse no final dela e aumentando a janela.

213

Observequeseufilmetemumataxadequadrosde24fps(framespersecond framesporsegundo)eumadimensode550x400pxefundodetelabranco. A taxa de quadros de um filme de extrema importncia, at a versoanterioroFlashtraziacomopadroumataxadequadrosde 12fps, a mudana para 24fpf melhora a visualizao de sua animao,masdeixaofilmemaispesadoemsuaexibio.Umfilmecomtaxa de quadros de 24 fps significa que para que sua animao tenha algum movimento de um segundo ela vai precisa se deslocar 24 quadros em sua Timeline.SesuaanimaosercriadapararodaremumCDROMouTVvoc precisacriarasuaanimaoem30fps. VocpodealterartodasaspropriedadesclicandonobotoEdit.

Voc pode chamar essa tela tambm atravs do clique com o boto direito e depoisaopoDocumentProperties.

214

Barradeferramentas
Para exibir a barra de ferramentas no Flash, clique no Menu, Window, Toolbars,Main

Na Barra de ferramentas alm dos botes padres como Novo, Abrir, Salvar, etc..., temos botes exclusivos do FLASH como, por exemplo, Encaixar (formatodeim)queauxilianoposicionamentodoselementosnateladofilme.

CaixadeFerramentas
A caixa de Ferramentas do Flash CS4 composta de quatro subdivises: Ferramentas(Tools),Exibir(View),Cores(Colors)eOpes(Options). Areadeferramentascompostadosbotesdedesenhoemanipulaodos desenhosfeitosnareadedesenhodoFLASH. A rea Exibir permite modificar a forma de visualizar a rea de desenho do Flashpermitindomoverodesenhoouamplilocomalupa. Na rea de cores podemos definir cores de linhas e cores de preenchimento dosdesenhosfeitosnoFLASH. Opestratamdasopesdedesenhoselecionado. Ainda com relao caixa de ferramentas, ao posicionar a ponta do mouse sobre uma ferramenta ela mostra o nome da ferramenta e uma letra entre parnteses, ao pressionar a tecla correspondente letra ela ser marcada comoativaautomaticamente.

FerramentasdeDesenhoesuaspropriedades
A primeira ferramenta a ferramenta seta utilizada para selecionar os

objetosdesuareadetrabalho,podemosselecionarosobjetosclicandosobre eles ou simulando um contorno em forma de retngulo sobre o objeto a ser selecionado.TecladeatalhoV. Ao selecionar um objeto e clicar na aba Properties, voc poder alterar as propriedadesdoobjetoselecionado.

215

Podemos definir a sua posio X e Y no palco, definir suas dimenses (w largura e h altura), se voc precisar que dimensionamento seja uniforme necessrioclicarnoeladecorrenteparafechlo. Na opo Fill (preenchimento) e stroke (contorno), voc pode alterar as propriedadesdecoresenocasodocontornoaespessuradocontorno,otipo dalinhaecomosocantosabertos(cap)quandoosobjetosnoforemforma fechadasefechados(join)quepermitearredondarecortarocontorno.

216

Os objetos no Flash diferenciam contorno de preenchimento ento se voc clicar no meio de um objeto voc apenas selecionar o preenchimento. Para poderselecionarambosnecessrioumduplocliqueousimularumcontorno sobreamboscomaferramentaseta.

Naimagemacimaaprimeirabolatemosapenasopreenchimentoselecionado, nasegundasomenteocontornoenaterceiraambos. Aferramentaemformadeumaflechabrancaaferramentasubselecionar quepermitetrabalharcomosnsdeseuobjeto.

AcesseapastaFerramentasdeDesenho,evejaaspropriedadesem vdeo. Abaixo temos a ferramenta FreeTransform . Ao clicar sobre ela, ser

mostrado alas de dimenso em volta de seu objeto. Na parte de Options da caixadeferramentaselemostraasopesdaferramenta.

217

A primeira opo a Rotate and Skew, que permite rotacionar e inclinar a ferramenta. A segunda opo Scale permite dimensionar a forma selecionada. Se redimensionar seu objeto com a tecla ALT pressionada ao dimensionar para umladoelefazamesmadimensoparaooutrolado. A terceira opo a opo Distort que permite distorcer seu objeto em perspectiva.AltimaopoaEnvelopequevaipermitireditaroobjetocom curvasdebezier. Caso voc j tenha convertido seu objeto em smbolo as opes disponveis serosomenteRotateandSkeweScale. FreeTransformTool:Essaferramentatemjuntoaelaumpequenaflechano canto inferior direito, ferramentas que contm essa flecha contm outras ferramentasnomesmogrupocasonoaferramentaGradientTransformTool ,veremosousodessaferramentaposteriormente. AferramentaseguintefazpartedasnovasferramentasdaversoCS4,quea ferramenta3DRotationTool .Paraqueessaferramentapossaserutilizada

necessrio que seu objeto j esteja convertido em smbolo. Veremos como converter um objeto em smbolo e funcionamento da ferramenta posteriormente. Junto a ela temos a 3D Translation Tool tambmposteriormente. Ao lado da ferramenta linha temos a ferramenta Lao seleesirregularesemnossosobjetos. Depois temos o grupo da ferramenta Pen Tool (caneta) que permite que permite fazer , veremos o funcionamento dela

desenharlinhasecurvas,elatambmpossuiumgrupo,quesoasopesde adicionarpontos,apagarpontoseconverterospontos.

218

O funcionamento da ferramenta caneta no Flash idntico a qualquer outra ferramentadedesenho.Vocclicaeelemarcaumponto,depoisaoclicarem outropontoemoveromouseelefarcurvaconformevocmoveomouse,ao clicaremumterceiropontoelecrianovacurva.

Vocpodeobservarqueaocriarospontoselegeraalasquepoderodepois comferramentasubselecionar(setabranca)seremtrabalhadosacentuandoas curvas conforme a sua necessidade. Caso seja necessrio criar algum ponto novo, voc pode usar a ferramenta Add Anchor Point Tool que faz parte do grupo da ferramenta caneta. Ao selecionar essa ferramenta voc poder observar que o cursor fica no formato da caneta com um sinal de mais (+) permitindo criar o novo ponto. Para retirar um ponto basta selecionar a ferramentaDeleteAnchorPointTool.ComaferramentaConvertAnchorPoint vocpodertambmtrabalhardiretamentenospontos. AferramentaTexto edeEntrada. EssasopespodemsermodificadaspelopainelProperties possuitrsopes.quepodemserEsttico,Dinmico

219

TextoEsttico:otextonormal.UtilizamosessetipodetextonoFlashpara fraseseblocosdetexto.Parasecriarumblocobastaclicaremanteromouse pressionado para definir o tamanho de sua caixa de texto. Ele permite formataodecaractereepargrafo,opesdeaplicaodelinkdiretonelee filtros(veremosposteriormentejuntocomsmbolos). TextoDinmico:otextoquerecebeinformaesdeumavarivel,ouseja, elel o texto de um arquivoqualquer que contenha uma variveligual a sua, exemplo de usos para leitura de variveis de scripts, ASP, PHP, HTML e at mesmo de arquivos TXT, como por exemplo, para textos em barras de rolagem. Texto de Entrada: Permite que se crie uma caixa de texto e que a mesmo comportese como campo de formulrios, ele permite que o usurio insira informaesqueserorepassadastambmatravsdevariveis. Abaixo temos a ferramenta Linha que permite que se trace linhas e

podemostambmunirospontodeumalinhacriandoassimpolgonos. Estando com o a ferramenta encaixar (Im) ligada o mesmo

220

encontrase caixa de propriedades e na barra de ferramentas ao traar ele mantmumabolinhanaextremidadedalinhaequandoencaixareletambm amostrar,issofartambmcomqueaslinhassempresaiamretasnavertical e diagonal. Esta ferramenta tambm auxiliar na criao de quadrados e circunferncias. Tambm manter uma grade invisvel em sua tela o que muitas vezes atrapalhapara oposicionamento de objetos. Para evitar ouso doimvocpodedesligloouentoutilizarassetasdeseutecladoparao posicionamento. Grupodeferramentasdedesenho,aprimeiraferramentaoretngulo .Para se desenhar com o retngulo o processo simples, clicase na ferramenta e comomousepressionadoarrasteseomesmopelatela.Enquantosedesenha nocantoinferiordireitoapareceumapequenabolinha,quandooretngulofica uniformecomoumquadradoabolinhaficamaisforte,issofacilitamuitoparase criar objetos perfeitos, outra forma de se criar se criar um quadrado pressionarateclaSHIFTenquantosedesenha. Paradesenharseuretngulocomcantosarredondadosexternoseinternos,ao selecionar a ferramenta retngulo, voc chama o painel Properties, nele voc pode alterar tanto cor de contorno e preenchimento como definir o arredondamentodoscantos.

221

Quandoprecisardesenharumretngulocomcantosarredondadose nosouberseungulodesenheseuretnguloesemsoltaromouse varredondandoseuscantoscomassetasdirecionais. AferramentaElipse permitedesenharcircunferncias,ovais,eapartirda

versoCS4podemostambmngulosdeinicio,fimealteraroraiointerno.

Ferramenta Polystar Tool

que permite desenhar polgonos e estrelas.

Essa mudana pode ser feita atravs do boto Options na barra de propriedades.

222

A ferramenta lpis

permite desenhar linhas em sua rea de desenho ao

selecionar a ferramenta linha na caixa de opes abremse as opes de linhas:Acertar,SuavizareTinta.

Aferramentapincel

quepermitetraoscomdepreenchimentos,nacaixa

223

de opes abrese s possibilidades de preenchimento, tipos de pinceis e dimetrosdepinceis. Asopesdessaferramentaso: PaintNormal:Pintaoobjetoporondeopincelforpassado PaintFills:Pintasomentepreenchimentos PaintBehind:Pintasomenteforadoobjeto PaintSelection:Pintasomenteoqueestselecionado PaintInside:Permitepintarsomentedentro. Abaixo dessas opes temos o tamanho do pincel e abaixo dele a forma do pincel. Para quem utiliza uma Tablet ao selecionar a ferramenta pincel ele habilitamaisumaopoqueaconfiguraodepressodopincel.

UmadasgrandesnovidadesdaversoCS4aferramentaDecoTool . Essa ferramenta funciona como um spray dentro do Flash, Ao selecionar essa ferramenta a janela Properties permite uma srie de configuraes. Comoessaumaferramentaquepermiteautilizaodesmboloscompincel espalhador,novamosnosaprofundarnelanomomento. Mas na janela de propriedades temos o efeito de desenho (Drawing Effect), abaixo temos as opes de utilizar ou no smbolos como est marcada a opoDefaultShapeobotoEditestadesabilitadopodemosmudarascores doefeito Nas opes avanadaspodemos mudar o ngulo e oescalamento do padro depreenchimento. Podemos tambm definir se o efeito ser esttico ou podemos animar o padro.

224

Vamosaumexemplobsico. Em um documento em branco do Flash, chame a ferramenta Deco Tool. Na janeladepropriedadesdefinasaspropriedadesdospray,mudeascores.Mude algumasconfiguraes. MarqueaopoAnimatepatternedefinacomoframestepem6. Depoiscliquenomeiodesuareadedesenho. Observe que na Timeline ele criou todos os quadros necessrios para que o preenchimentofiqueanimado.

225

AcesseapastaDecoTool,evejaaspropriedadesemvdeo.

MaisumagrandenovidadedaversoCS4aferramentaBonTool e a ferramenta Blind Tool , como so duas ferramentas que para

seremutilizadasprecisaseentendersobresmboloseanimao,veremosseu funcionamentoposteriormente. Aprximaferramentatratadepreenchimentosecontornos. Abaixo temos a ferramenta Tinteiro que permite pintar a cor de contorno

dos objetos. Basta selecionla e aplicar a cor desejada diretamente na linha decontornodeseusobjetos. Ao ladodela temos a ferramenta Baldede Tinta que permite modificar a

cordepreenchimentodosobjetosOFlashpossuiparapreenchimentoascores da paleta WEBSAFE e tambm alguns gradientes existentes. Na caixa de opestambmpodemosdefinircomodeveseraplicadoopreenchimento,em todooobjeto,oucomlacunas. Aoclicarnacoratualeleabreaopodeescolhadecores.

Para trabalharmos com cores gradientes, nvel de alpha da cor necessrio clicarnomenuWindow>Color

226

NapaletaColoraopopadroinicialSolidondepodemosdefinirascores de contorno e preenchimento pela escolha da cor, cdigos RGB e Hexadecimal.AopoAlphadefineograudetransparnciadacor.Naopo TYPEtemoscomopadroSOLID,aoclicarnessaopopodesemudarpara linearqueaplicaraoobjetoselecionado Ao escolher opo SOLID, ser mostrado na opo COLORa barra de cores gradiente.

Vocpodeobservarquetemosnaopogradienteduasalasdecores,para alteraracordequalquerumadasalasdegradiente,bastaclicarsobreelae escolheracordesejada.Podemosacrescentarumaaladegradienteanossa paleta de cores basta clicar entre uma delas, ele vai criar as outras alas de cores.

Para retirar uma das alas bastaapenas clicar sobre a ala, manter o mouse pressionadoearrastarparaforadalinha. Ao clicar na ferramenta Gradient Transform Tool , permite alterar a

posio do gradiente dentro de nosso objeto. Ao selecionar o objeto com o gradiente e clicar na ferramenta ele vai mostrar uma ala quadrada e uma

227

redondaemvoltadogradiente.

A ala quadrada permite aproximar / afastar as cores gradientes, a ala em crculopermiterotacionarogradiente. Podemos tambm escolher a opo RADIAL, ao escolher opo RADIAL podemosaplicaras mesmasopesdogradienteLINEAR.Podemostambm definiraopodegradienteepreenchernossoobjetocomobaldedetinta.

A ultima opo chamase Bitmap, que permite com o contagotas capturar o bitmap. Caso no exista uma imagem dentro do Flash, ao escolher a opo Bitmap ele vai solicitar que se escolha a imagem para servir como preenchimento. A ferramenta contagotas permite capturar a cor de um objeto e aplicar

228

dentrodeoutro,porexemplo,sevocimportarumbitmapparadentrodoflash edepoisdesejaraplicarestebitmapcomopreenchimentodeumobjetoclique sobre o bitmap com o conta gotas, a ferramenta modificase imediatamente paraobaldedetintaevocpodepreencherondedesejar. A ferramenta apagador funciona como uma borracha, o cuidado como

apagar necessrio utilizar as opes desta ferramenta. Ao selecionar essa ferramentaeleabrealgumasopesdeutilizao.

Aprimeiraopopermitequeseescolhaoquedeveserapagado.

EraseNormalApagacomoumborrachamesmo,ondeforpassadoocursor eleapaga. EraseFillsApagasomentepreenchimentos. EraseLinesApagaapenaslinhas. EraseSelectedFillsApagasomentepreenchimentosselecionados. EraseInsideApagasomentededentroparaforadoobjetoselecionado.

A opo Faucet (cone em forma de uma torneira) apaga todo o objeto que estejacomasmesmaspropriedades. Altimaopopermitemodificaroformatodaborracha. AferramentaHand permitearrastaratela.AtecladeatalhooH, mas

voc pode utilizar ela sem mudar de ferramenta pressionando a barra de espaos. A ferramenta lupa permite aumentar e diminuir o Zoom de rea de

desenho.Aoselecionaressaferramentaelahabilitaasduasopes.Asteclas deatalhoparaelasoCTRL++notecladodecaractereseCTRL+,tambm

229

notecladodecaracteres. Um dica muito til atravs da personalizao de atalhos, definir tambmosinalde+e,juntocomCTRLnotecladonumrico.A personalizaodeteclasdeatalhojfoivistanoiniciodessaapostila. A ultima opo permite alternar entre as cores de preenchimento e

contornoedefinirascorespadro.

ManipulandoObjetos
Ao desenhar no Flash, podemos manipular nossos objetos, tanto na forma, comocontornoepreenchimentos. Aodesenharmoslinhas,polgonos,retnguloseelipses,podemosalterarasua formafacilmentecomaferramentaseta. Por exemplo, se clicarmos diretamente na linha a mesma ser selecionada, mas se aproximarmos o cursor da linha o mesmo se transformar em uma curva, ao pressionarmos o boto do mouse e arrastarmos transformaremos nossalinhaemumacurva,omesmovaleparatodososobjetos.Emretngulos ao aproximarmos de suas extremidades ele tambm apresentar um vrtice permitindoquesecriepontas.

Acesse a pasta Manipulando Objetos, e veja as propriedades em vdeo. Ao manipular textos necessrio um processo um pouco mais detalhado, os textosnosocriadoscomovetores,eparaquesepossamalterarasformas dos textos necessrio primeiro transformlos em vetores. Aps criar o seu texto, basta selecionlo com a ferramenta seta e desmembrlo (Menu

230

Modificar, Desmembrar ou CTRL+B). A primeira vez que se desmembrar um texto ele vai quebrar em letras, retira o processo de desmembrar para ele se transformaremVetor.

AcesseapastaTextos,evejaaspropriedadesemvdeo. Aodesmembrarotextoapenasumavez,elequebraemletras,para colocar cada letra em uma layer separada, com todas as letras selecionadas, clique com o boto direto sobre uma delas e escolha DistributetoLayers. Essa dica no valida somente para textos, basta apenas ter dois ou mais elementosemseupalcoselecionadosparaqueissopossaserutilizado.

O seu texto passou a ser um vetor ento podemos acrescentar gradientes, e alterarasuaforma. Importante:Depoisdeconvertidoemvetornomaispossvelalterlocomo texto.

No logotipo acima alm de aplicarmos cores de preenchimento gradiente em um texto desmembrado, tambm utilizamos a opo de agrupar (Menu Modificar)edeOrdem,(MenuModificar). Outraopodemanipulaomuitoimportanteamanipulaodealinhamento deobjetos(MenuWindow,AlignouMenuModifyAlign),poisquandoiniciarmos

231

onossotrabalhocomanimaesexisteumcuidadomuitograndecomposio denossosobjetos.

A opo To Stage da paleta Align permite alinhar e / ou distribuir os elementosdeacordocomopalco.

Trabalhandocomobjetosexternos
No Flash alm de criar seus prprios objetos podemos tambm inserir novos objetosdentrodenossosfilmes. O Flash importa quase todos os formatos grficos, tendo como destaque o PNG,oPSD(Photoshop),AIAdobeIllustratorformatosdebitmaps(BMP,GIF, JPG, etc...) arquivos de udio como WAV, MP3, AU, formato de vdeo AVI, MOV,MPEG,FLV. Ao importar um objeto o mesmo ser colocado na biblioteca de smbolos do programa.

Importandobitmaps
Oprocessodeimportaosimples,bastaclicarnomenuFileImport,assub opesdessemenuso: TostageImportaparaopalco ToLibraryImportaoobjetodiretamenteparaabiblioteca ToExternalLibraryImportaabibliotecadeoutroarquivoFLA. VdeoImportaumvdeo. Escolhaaprimeiraopoeadicioneumaimagemaoseufilme

232

Ao ser importado o objeto ele fica na palco e mantm uma instncia dele na biblioteca.

Casovocprecisealterarsuaimagememalgumprogramadeedio deimagensedepoisatualizarnoFlash,bastaapenaspelabiblioteca cliquecomobotodireitonaimagemeescolherUpdate.Casovoc queira substituir a imagem, clique com o boto direito, depois escolha Properties,dentrodajanelaqueseabreescolhaImportefaaasubstituio.

233

ImportandoarquivosemPSD
UmadasgrandesnovidadesqueveiocomaversoanteriorCS3equefacilitou muitoacriaodesitesepeastotalmenteemFlash. Ao importar um PSD ele permite que voc possa importar o PSD de forma chapada,oucommesmasestruturadeLayersdooriginal.Permitetambmque seimporteaslayers,jsendoconvertidasparasmbolosdoFlash.

234

AopoSetstagesizetosamesizeasPhotoshopcanvaspermitequese dimensioneopalcodoFlashpelotamanhodeseuPSD.

235

 possvel observar pela imagem que ao importar ele criar uma pasta com o nomedegroupeadicionacadalayerdoPSDdentrodeumalayerdoFlash.

Acesse a pasta Importando Photoshop, e veja as propriedades em vdeo.

UmanicaressalvasobreaimportaodePSDquandodentrodele voc criou elementos de sombra, brilho, enevoamento,

transparnciasquesobreponhamsimagens,poiseleimportacomo se a imagem de baixo fizesse parte da layer. Nesses casos, aconselhvel que pelo Photoshop voc oculte as layers debaixo da imagem desejada e exporteacomoumPNGtransparenteedepoisimporteessePNGnoFlash.

ImportandoarquivosdoIllustrator
O processo de importao de imagens em formato AI (Adobe Illustrator) muitosemelhanteimportaodoPSD. Ele vai mostrar as layers dentro do arquivo Ai e vai permitir que voc possa transformaraslayersemsmbolosedarnomeaelas. Como no Illustrator podemos tambm criar smbolos, ele da opo de importarsmbolosnousadosnoAI.

236

AoimportarumarquivodoAI,elevemparaoFlashcomoumvetor,mascaso queiravocpodetransformareleemumbitmapparaaimportao.

Importandoumarquivodeudio
NoFlash,possvelutilizarossonsdevriasmaneiras.Vocpodecriarsons reproduzidoscontinuamente,independentementedaLinhadeTempo,oupode sincronizar a animao com uma trilha sonora. Voc pode anexar sons a botesparatornlosmaisinterativosefazlosaumentarediminuirparaobter umatrilhasonoraapurada. possvel usar sons em bibliotecas compartilhadas para vincular um som de uma biblioteca a vrios filmes. Tambm possvel usar sons em objetos de somparacontrolarsuareproduocomoActionScript. O Flash armazena os sons na Biblioteca juntamente com os bitmaps e smbolos. Como nos smbolos, basta uma cpia de um arquivo de som para utilizlodevriasmaneirasnofilme. Para adicionar o som ao seu filme aps importar ele para dentro do FLASH,

237

arrasteeleparaoquadroondeeledeverseriniciado.

Aoadicionarumsomasualinhadotempo,podemoscontrolarasuaexecuo pelabarradepropriedades.Cliquenoquadroondefoiinseridooudio.

Observequeelemostraroarquivodeudioqueestsendocarregado,caso tenha mais de um arquivo de udio em sua biblioteca voc poder alterar o arquivoporessaopo. Podemostambmaplicarefeitosemnossosom AopoNonenoaplicaquaisquerefeitosaoarquivodesom.Escolhaessa opopararemoverosefeitosaplicadosanteriormente. A opo Left Channel/Right Channel reproduz o som somente no canal esquerdooudireito. A opo Fade Left to Right/Fade Right to Left desloca o som do canal esquerdoparaodireitoedodireitoparaoesquerdo. A opo Fadein aumenta gradualmente a amplitude de um som pela sua durao. A opo Fadeout diminui gradualmente a amplitude de um som pela sua

238

durao. AopoCustompermitequevoccrieseusprpriospontosdeentradaede sadadosomusandoEditarEnvelope.

EscolhaumaopodesincronizaonomenupopupSinc: AopoEventsincronizaosomcomaocorrnciadeumevento.Umevento de som reproduzido totalmente quando o respectivo quadrochave inicial exibidopelaprimeiravez,independentementedaLinhadeTempo,mesmoseo filme parar. Os sons de evento so misturados quando voc reproduz o filme publicado. Um exemplo de evento de som um som reproduzido quando um usurioclicaemumboto. AopoStartidnticaEvent,excetopelofatodeque,seosomjestiver emreproduo,seriniciadaumanovainstnciadessesom. AopoStopsilenciaosomespecificado. AopoStreamsincronizaosom,aoseimportarumvdeoeprecisarincluira trilhasonora,deixaressaopomarcada. Embora se torne fcil conseguir sons na Internet e em CDS multimdia hoje em dia, muitas vezes voc precisar editar o seu prprio som, por exemplo, uma frase, a ser dita ao clicar sobre um

239

boto, ou uma parte de uma msica para introduo de seu site, aconselhvelparaissoousodeprogramasexternos,deixandoparaoFlasho somjprontoparaserutilizado.

Importandovdeos
Entre os diversos formatos populares para vdeo digital que o Flash importa esto o QuickTime, MPEG, AVI e DV. Alm de importar possvel adicionar interatividade, animaes e figuras do Flash e em alguns casos possvel aplicarinterpolaesdemovimento. Porm para poder exibir um vdeo dentro do padro de Flash Vdeo ser necessrioconvertereleparaFLV Para importar um vdeo, Menu File Import, Import Vdeo e vai aparecer uma caixa de dilogo, onde voc deve selecionar o seu filme. Caso o seu filme venhaaserpuxadodeumservidordeStreamingFlashnecessriomarcar asegundaopoedirecionarocaminhodoservidor.

ComonossofilmeumvdeonoformatoMOV,cliquenobotoLaunchAdobe

240

MediaEncoder.

Se precisar cortar, definir qualidade, etc... em seu vdeo clique flecha de Preset,eletemostraumasriedeopespredefinidasetambmumaopo EditExportSettings,ondevocpoderdefinircomoquerseuvdeo.

241

CliqueemOkedepoisemStartQueue.

SerfeitaaconversodofilmeparaoformatoFLV. VolteteladeimportaodovdeoemudeparaimportaroFLV NovamosalterarnenhumapropriedadeecliqueemNEXT. DefinaagoraoSKIN(pele)quedesejaparaseroplayerdeseufilme.

242

CliqueemNextedepoisfinalize.

Observe que ao selecionar o objeto na barra de propriedades aparece um botochamadoComponentInspectorpainel.Aoclicarnessebotoeleabrea paletacomasconfiguraesdocomponentedevdeo.

Atravs dessa janela voc pode mudar o nome ou o caminho de seu arquivo

243

FLVeconfiguraroseuplayer. importantelembraqueaoenviarqueaopublicarseufilmeemswf no servidor de hospedagem, Serpa necessrio tambm enviar o arquivoFLV.

AcesseapastaVideos,evejaaspropriedadesemvdeo.

Smbolos
Para podermos trabalhar com animaes no FLASH necessrio que quase todos os elementos sejam convertidos para smbolos, pois atravs de smbolosquepodemosdefinirqualocomportamentodosmbolo: OstrssmbolosdoFLASHsoGrficos ,Botes eClipesdeFilme .

VocpodecriaroobjetoedepoisconvertloemSmboloouatravsdomenu Insert Convert to Symbol crilo e depois adicionar ao filme. Ao criar um smboloelevaiautomaticamenteparaaBibliotecadeSmbolos. Paraconverterumobjetoexistenteemsmbolobastaapenasapertarateclade funoF8.

244

OstiposdeSmbolos:
Grfico:Esteotipomaisbsicodesmbolo,poiselepraticamenteesttico, embora possa receber aes para ele, muito utilizado tambm dentro dos outrossmbolos. Boto: Este smbolo pode receber valores diferentes para estado do boto, normal, ao rola sobre, pressionado e oculto, muito utilizado para chamar aes. Clipe de Filme: Este tipo de smbolo permite que se crie um filme dentro do smbolo com a vantagem de que ele carrega todo o clipe de filme primeiro e mostraomesmonofilmetododeumavez. AodesenharseuobjetoepressionarF8,(Menu,ModifyConverttoSymbol)ele abre a tela acima, onde necessrio dar um nome ao smbolo (ele sempre trarumnomegenrico,comosymbol??),onomeaconselhvelmanteruma nomenclatura que facilite a sua identificao. Por exemplo, Grficos colocar GRnome, boto BTnome, Clipe de Filme MCnome. No caso do clipe de filme usase MC (Movie Clip), dessa forma que a comunidade de designers e

245

programadores em Flash chama o Clipe de Filme. Abaixo do nome temos a escolhadotipodesmbolo.Aoladodotipodesmbolotemosaposiodeseu centro de Registro, ao padro no canto superior esquerdo, esse centro de registronecessrio,poisapartirdelequeseuobjetocarregado. Ao clicar na opo Advanced, abrese as opes de exportao de nosso objetoparacdigo. Mesmodepoisdeprontopodemosalteraraspropriedadesdenossossmbolos atravsdabiblioteca(atalhoCTRL+LouMenuWindowLibrary),oumesmoele estando dentro do filme principal, em ambos os casos basta apenas clicar sobre o smbolo com o boto direito do mouse e depois escolher editar para ambos os casos, e estando o smbolo no filme podemos editlo tambm no localeemumanovajanela. EmboraafunoinicialdoClipedeFilmeeraconteranimaespara seevitartimelinesextensasquandofossenecessrioumaanimao de repetio e grficos para objetos estticos, atualmente convencionouse utilizar somente Clipes de Filme mesmo para objetos estticos.Arazoparaessamudanapelofatodequepossocontrolarmeu ClipedeFilmeatravsdeprogramao(linguagemactionscript)eaplicaode filtrosemisturadecamadas. Aocriarumsmbolo,podemosmanipullopelabarradepropriedades.

246

NabarradepropriedadespodemosdefiniraposioXeYdenossoobjeto,a sualargura(W)ealtura(H),ocomportamentodoobjeto.OndeestInstance Name, um campo utilizado para dar nome de instncia ao objeto, esse campo ser utilizado em actionscript. A opo SWAP permite substituir o smbolonareadeedioporoutroexistentenabiblioteca. A opo 3D Position and View um recurso que veio com a verso CS4, e permite voc trabalhar os eixos X, Y e Z do objeto. Permite trabalharongulodeperspectiva. AopoColorEffectpermitemodificaraspropriedadesdecoretransparncia dosmbolo.Asoposo: Brightness Brilho, o brilho natural do objeto 0%, ao colocar em 100% ele retira todo o brilho (preto) e 100% ele adiciona todo o brilho (100%). TintPreenchimento,permitepreencheroseuobjetocomqualquercor comgraudetransparncia. AlphaPermiteacrescentartransparnciaaossmbolos.

247

 AdvancedPermitetrabalharascoresRGBAdosmbolo.

AopoDisplayBlendingpermiteaplicar misturadeobjetos.necessrio quecadaobjetoestejaemsuacamada. Use Runtime Bitmap Caching, permite criar um bitmap de seu objeto em tempodeexecuo.

AcesseapastaSimbolos,evejaaspropriedadesemvdeo.

Filtros
A partir da verso8, o Flash trouxe uma inovao esperadah muito tempo quesofiltrosparaseremaplicadosaossmbolos.Umanicaobservao,os filtrosspodemseraplicadosaClipesdeFilmeeTextos. Paraaplicarumfiltro,selecioneseusmboloecliquenobotoAddFilter. Asopesso: Drop Shadow Aplica uma sombra ao seu objeto. Permite alterar diversaspropriedadesdoefeitocomodesfoque,cor,qualidade,etc...

248

A opo Blur permite trabalhar o sombreamento do smbolo, o cadeado fechadofazcomqueaoalterarseumadasopesmudamseasduas.Ao clicar no cadeado, o mesmo ficar aberto e assim ser possvel alterar o Blur de forma independente. A opo Strenght trabalha a disperso da sombra. Podemos alterar a qualidade da sombra em Quality, podemos alteraracor,onguloeadistnciadasombra.AopoKnockouttrabalha a mscara do smbolo. Inner Shadow aplica a sombra Interna e a opo HideObject,ocultaosmbolodeixandosomenteofiltrosendomostrado. Blur Permite desfocar seu smbolo, podemos alteraras propriedades dedesfoqueequalidadedomesmo. GlowPermiteaplicarbrilhoaoseusmbolo. Bevel Atravs dessa opo podemos aplica chanfros e entalhes em nossosmbolo.NaopoType,podemosdefinirelecomoInner,Outere Full. GradienteGlowPermiteaplicarumbrilhogradienteaossmbolos. GradienteBevelPermiteaplicarChanfrosGradienteaossmbolos. Adjust Color Permite trabalhar os ajustes de cores do smbolos comoBrilho,Contraste,SaturaoeMatiz(Hue). AterceiraguiaParameters,serutilizadacomcomponentes.

AcesseapastaFiltros,evejaaspropriedadesemvdeo.

249

LinhadoTempo
ALinhadotempoutilizadanacriaodeanimaes.Atravsdelapodemos definir qual ser a mudana e/ou caminho a ser especificado pelo objeto do filme. Podemos travs de a linha tempo utilizar camadas para melhor agrupamentoemovimentodosobjetos.

Temos as opes de visualizao de camadas: mostrar / ocultar, bloquear / desbloquearevisualizarsomentetraos: Abaixotemosascamadascriadas: . .

Ao lado de cada camada temos os quadros de nossa animao, quando um quadro possui um objeto observe que o mesmo apresenta uma bolinha preenchida, quando o mesmo apresentar uma bolinha vazada um quadro
a vazioequandoomesmoapresentarum significaquenessequadrotemos

aes(aessoblocosdecdigosdentrodenossaanimao).

Nofinaldoempilhamentodecamadastemososbotesquenospermitemcriar ascamadasdoFlash.Criarumacamadanormal,criarumapasta(permite armazenarcamadasdentrodelasenofinaldalinhaexcluirumacamada.

A barra da linha do tempo exibe os quadros da animao onde esto cursor vermelho na barra indica o quadro selecionado, possvel clicar sobre o quadroparaselecionaromesmo.Nocantodireitodabarratemosobotoonde podemosdefiniraaparnciadabarradaTimeline .

NapartedebaixotemosasopesdeOnionSkin(veremosmaisafrente)o nmerodoframeselecionado,avelocidadedenossofilme(12fps),12Frames per second (Quadros por segundo). Significa que nosso filme apresenta 12 quadrosdeanimaoporsegundo.

250

Caso voc venha a produzir um filme em flash para ser exibido em umDVD,TVouparaserintroduzidoemalgumfilme.Sernecessrio mudar a sua velocidade para 30FPS. Animaes que contenham muitobrilho,ouefeitosdecomobjetospiscandoaconselhvelutilizar24FPS.

Animao
AnimaoQuadroaQuadro
A animao quadro a quadro funcionade maneira semelhante a um desenho animado, ou seja, para cada movimento do objeto dever ser colocado o mesmodentrodequadro. Para entendermos melhor este processo crie uma circunferncia na sua rea dedesenho.ObservequeaodesenharoobjetonofilmedoFlash,noprimeiro quadroapareceumabolinhapreta,mostrandoquenoquadroexisteumobjeto. Parainserirumainstnciadestemesmoobjetonoprximoquadro,cliquecom o boto direito do mouse no prximo quadro e escolha Inserir Quadro Chave (tecladeatalhoF6).Elerepeteomesmosmbolo.

Modifique a cor de seu smbolo. Repita este processo at o quadro 12, alterandoacordeseuobjetoacadaquadro.Istofarcomquesuaanimao possua1segundo.ParatestaraperteasteclasCTRL+ENTER,issotestaoseu filmeegeraumarquivocomaextensoSWF. O arquivo de projeto do Flash possui a extenso FLA, ou seja, ao salvar seu arquivo ele ser salvo com essa extenso. Para poder incluirseuarquivoemumapginaHTMLsernecessriotransform lo para o formato SWF, isso pode ser feito atravs do teste de seu filme (CTRL+ENTER). Caso voc utilize o Dreamweaver ele possui um recurso de insero do SWF na pgina que vai gerar todo o cdigo necessrio para a exibio do SWF. Podemos tambm gerar todo o HTML pelo prprio Flash atravsdorecursodepublicaoqueveremosmaisadiante. Quando se trabalhar com animao quadro a quadro no se converte os objetosemsmbolos.

251

Acesse a pasta Animao Quadro a Quadro, e veja as propriedades emvdeo.

AnimaocomInterpolaodeMovimento
Aanimaoquadroaquadroperfeita,poisvoctemumtotalcontrolesobreo filme,masaomesmotempoelademorada,poismuitasvezessuaanimao ter 200 quadros ou mais ento isso se tornaria demorado e com mais possibilidades de erro, embora em muitos filmes seja necessrio que as animaessejamfeitasquadroaquadro. Uma forma de se automatizar este processo atravs da animao com Interpolao,ouseja,podemosdefiniraposioinicialeafinaldenossoobjeto edepoispodemosfazeraanimao. Comece um novo filme e cria uma circunferncia com preenchimento ao seu gostoetransformeaemumsmbolo. Crieumnovoquadronoquadro12.

Parapodermoscriarainterpolaodemovimentopodemosclicarcomoboto direitonoquadro1eescolherCreateClassicTween.

252

Observe na timeline que ele preenche os quadros com uma cor lils. Ele tambm apresenta como quadros preenchidos somente o primeiro e o ltimo quadro de sua animao. Clique no ltimo quadro e mude seu smbolo de posio na rea de desenho. Se voc arrastar o cursor vermelho pela animao voc poder ver como est sua animao. Estando no primeiro quadroepressionandoENTEReletambmapresentasuaanimao.Paraver a animao em looping pressione CTRL+ENTER. Para poder andar quadro a quadro de sua animao, voc pode pressionar as teclas com sinal de maior (>)emenor(<)noteclado.

Acesse pasta Interpolaode Movimento, e veja as propriedadesem vdeo. Na vero CS4 podemos criar tambm nossas animaes de outra forma. Ela permite um maior controle sobre a sua animao, por isso aoladodeTimeline,temosaopoMotionEditor.

253

Vamosaumexemplo CrieumaformaouimportealgoeconverteemMovieClip. CliquenaTimelinenoFrameemqueoseuMC(MovieClip)est. Clique com o boto direito e escolha Create Motion Tween. Ele automaticamentevaicriarquadrosemazulclaroatoquadro24(seasuataxa dequadrosforessa). Arraste seu objeto para o outro canto da janela e observe que ele cria uma linhapontilhada.

Ele tambm cria o segundo quadro chave para o movimento de seu objeto. Aumenteumpoucooseuobjeto. Rotacioneseuobjeto. Voc pode com a ferramenta de seleo direta (seta branca) ou com a ferramentaConvertAnchorPoint(grupodacaneta),trabalharemqualqueruma dasduaspontasdalinha. J com a ferramenta de seleo, voc pode ao aproximar da linha deixar ela emcurva,eaoselecionarelamovertodaaanimao.

254

AcesseapastaMotionEditor,evejaaspropriedadesemvdeo.

MotionEditor
QuandotrabalhamoscomMotionTween,podemosmanipularanossa animaoatravsdoMotioneditor,abaqueficaaoladodaTimeline.

EsserecursomuitosemelhanteformacomooAdobeAfterEffectstrabalha, atravs do Motion editor podemos trabalhar com posio x e y, rotao z. TransformaoemSkew. Podemos aplicar transformaes de cores como Alpha, Tint, etc..., Podemos aplicarfiltros,opesdeEasy(suavizaodaanimao). Voc pode ampliar ou reduzir a sua timeline posicionando o mouse

255

na extremidade direita da animao e ao cursor mudar para um cursos de flecha de duas pontas pressionar e arrastar. Voc pode tambm acrescentar quadroschavesintermedirios,bastandoparaissoclicarcomobotodireitona quadrodesejadoeescolhendoInsertKeyframeedefinindooquequermudar, ouentopressionandoF6.

OnionSkin
Quandosecriaumaanimaomuitasvezestemosanecessidadedeficarindo e vindo atravs dos quadros para termos uma idia melhor de como est ficando a animao, o que causa uma grande perca de tempo. mas para facilitartodoesteprocessooFLASHpossuiumprocessochamadoOnionSkin. Com ele podemos editar o quadro atual enquanto observamos o quadro que estlogoabaixodeleouatmesmoeditardiversosquadrossimultaneamente. Oquadroatualaparececomascoresnormais,enquantoosquadrosanteriores aparecemcomascoresapagadas,comoseestivssemossendovistosatravs de uma folha de papel vegetal. Somente o quadro atual pode ser modificado, osquadrosapagadosnopodemseralterados. ParautilizaroefeitobastaclicarsobreobotoPapeldeTransferncia.

Os botes so Papel de Transparncia, Estruturas Seqenciais em Papel de Transparncia, Editar Vrios Quadros e Modificar Marcadores de Transparncia.

256

Caso precise mudar a trajetria de sua animao, clique no quadro a ser alterado e arraste seu smbolo de posio. Observe que ele cria um novo quadrochavenoquadroondevocmodificouatrajetriadosmbolo.

VisoOutlines

257

Propriedadesdabarradeferramentasdoquadro
Aoselecionarumquadrochave,podemosdefinirsuaspropriedadespelabarra deferramentas. A barra de ferramentas de quadro mostra alguns contedos diferentes de acordocomotipodeTweenqueutilizamos.

258

QuandooTweenatravsMotion,eletrabalhaaspropriedadesdaanimao. QuandoClassiceletrabalhaaspropriedadesdoFrame.

Suavizaodaanimao.
Podemostrabalharasuavizaodenossaanimao. Ao utilizarmos Animao do tipo Motion, isso deve ser feito atravs da aba MotionEditor.

259

Ela fica no rodap da paleta. Observe que o Simple(Slow) o padro e seu valor0zero.Aosetrabalharcomelaem100,aanimaocomearpidae suaviza na chegada. Ao se colocar 100 ele comea devagar e termina de formarpida. NaversoCS4dentrodeMotionEditortemosalgumasoutrasopes deEasyqueestodisponveisaoclicarnosinaldemais(+)daaba. J o Easy da animao Clssica funciona de forma semelhante. Podemosdefinirvaloresentre100e100epodemostambmeditaracurvade nossa animao clicando no boto em forma de lpis na janela de propriedades.

TestesuaanimaocomumEasysemelhanteaodaimagemacimaevejaque eledaumefeitodeBounce.

Camadas
AscamadasfuncionamnoFlashparaquepossamostrabalharoempilhamento deobjetosdentrodenossaanimao. Noconfundircomasopesdeempilhamentodentrodeumanica

260

camada onde podemos definir as posies de empilhamento atravs das opesBringtoFront,BringForward,SendBackwardeSendtoBackTrazer para frente, Subir um Nvel, Descer um Nvel e Enviar para Trs que podem ser acessadosatravsdo botodireito do mouse ou atravs do menu Modify Arrange. Atravsdascamadaspodemosanimarnossosobjetosdeformaindependente. Nopodemosterdiobjetosanimadosnamesmacamada. ParacriarumanovaCamada,najaneladeTimelinecliquenobotoNewLayer norodapdajanela ,ouentopelomenuInsert,TimelineLayer.

Ao criar uma layer ela automaticamente posicionada acima da Layer selecionada.Nspodemosrenomearnossaslayer,bastandoparaissodarum duplocliqueemseunome.

Ao lado da Layer aparecem trs botes

. O primeiro deles permite

ocultaraLayer,osegundopermitetravaralayereoterceiropermiteveralayer emformaOutline. Ainda sobre a paleta de layers no rodap ao lado do boto de New Layer temosmaisdoisbotes,umpermitecriarumapasta,esseumrecursotilem animaes que utilizem muitas layers em situaes distintas, pois permite separar elas dentro destas pastas, o terceiro boto permite excluir uma layer existente.

261

Observe acima que na animao temos duas circunferncias e a vermelha aparecesobreaverdedevidoordemdeempilhamento.

CamadasGuia
Um dos grandes atrativos da animao com Interpolao possibilidade de criar caminhos para a animao do objeto este processo chamado Linha Guia. Paraespecificarestecaminhoexistemdoiscuidadosimportantes,quandovoc criaumsmbolovocpodeobservarquenapartecentraldosmboloaparece umsinaldemais(+)estesinaldevecoincidircomalinhaguia.

O segundo cuidado que a linha dever ser criada na camada da linha guia paranoocorrerdefeitosnaanimao. Paracriarumacamadaguiaprocedadaseguinteforma. Crieseusmboloquedeverseguiraguia

262

Renomeieacamadacasoqueira. Ecrieumanova,elaautomaticamenteficaracima.

CliquenacamadadecimacomobotodireitoeescolhaProperties

Essa janela mostra as propriedades da camada, atravs dela vamos criar mascars, podemos definir uma cor diferente para o outline das camadas, podemosbloquearacamadaeemnossocasovamosmarcaraopoGuide.

Observequeoconedaguiateveumamudana,comissodefinimosqueela umaguia,precisamosagoradefinirqueacamadadebaixoserumacamada guiada.

263

Arrasteacamadadebaixoparacimadacamadaguiapuxandoumpoucopara adireitaeobservequevaiaparecerumabarrinhacomumabolinhanaponta, podesoltaromouse

Observequeagoraoconedacamadaguiatambmmudoudeforma.

Clique agora no primeiro frame da camada guia e com o lpis ou com a ferramentalinhacrieasuaguia. Depois crie sua animao tipo Classic Tween. Na camada guia apena preenchaosframes(F5),nonecessriocriarquadroschaves. Reforandooquefoiditoanteriormentenecessrioqueoscentros deseuobjetoestejamemcimadalinhaguianosquadroschavesde suaanimaoparaqueelepossaseguiralinha.

Acimaobserveaposiodosmbolonoprimeiroenoltimoquadrochave.

Exemplo
Vamos criar uma animao que far o desenho de uma bola "quicando" no filme. Primeiro, crie um smbolo no formato de uma circunferncia e crie uma interpolaoatoquadro40. Crieasuacamadaguiaseguindoospassosdescritosacima,depoiscliqueno primeiro quadro da camada guia (observe que ela mostra um arco) e com a ferramentalpisfaaretasconformeabaixo.

264

Umcuidadosemprecertificarsequealinhaguiafoidesenhadanacamada guia,poiscomumdesenharalinhanacamadaguiada. Posicioneabolacomcentroemcimadesualinha,arrasteanoquadro40no finaldesuaslinhasetesteoseufilme.Paradarumpoucomaisderealismoao seumovimentoenvergueaslinhas. Alinhaguianoapareceemseufilme.

Podemosfazercomquedoisoumaisobjetossigamaslinhasguiase podemostambmalteraropontocentraldenossosmbolo.Bastadar um duplo clique sobre o mesmo e mudar o smbolo de posio em relaoaopontocentral.

265

AcesseapastaCamadaGuia,evejaaspropriedadesemvdeo.

Mscaras
Criar mscaras uma maneira simples de revelar seletivamente partes da camada acima ou abaixo da cena. Isso requer marcar uma camada como camadademscaraeascamadasabaixocomocamadasmascaradas. Para criar a sua mscara desenhe ou importe algum objeto para seu palco. Crie uma nova camada e desenhe o objeto que vai mascarar o objeto da camadadebaixo.

NacamadadecimacliquecomobotodireitodomouseeescolhaMASK.

266

Observe que ele deixa visvel somente onde os objetos se interceptam. Veja abaixoareadeedionaturaledepoiscomamscaraaplicada.

267

Aoaplicaramscaraassuascamadassobloqueadaseacamadadebaixo

fazumrecuo. EssacamadarecuadachamadadecamadaMascarada(MASKED). Caso voc precise alterar algo em sua mscara, ou no objeto que est mascarando, necessriodesbloquear a mscara, clicando no coneemformadecadeado. Caso voc queira voltar s camadas ao estado normal, necessrio clicar comobotodireitodomousenacamadaeescolheraopoProperties

AcesseapastaMascara,evejaaspropriedadesemvdeo.

InterpolaodeForma
A interpolao de forma uma tcnica usada nos efeitos de morfismo que podem ser feitos usandose transformaes de instncias, como rotao, redimensionamento ou distoro. Preenchimento, contorno, gradientes e alfa sotodosatributosquepodemseraplicadosnaInterpolaodeforma. Como exemplo bsicoinicial, crie um retngulo no palco de seu filme, depois crie um quadro chave no quadro 24 e apague o retngulo e desenhe uma circunferncia.

268

Cliquenoquadro1desualinhadotempo.Nacaixadepropriedadesabaixoda tela, no campo interpolao onde est none escolha SHAPE, observe que nalinhadotempoaoinvsdeaparecerumacorlilsapareceumacoreverde claro,issoidentificaumainterpolaodeforma.

A interpolao de forma ao contrrioda Interpolaode movimento, os objetos no devem ser convertidos em smbolos. Imagens vetoriaisimportadascomo,porexemplo,clipartsemwmf,devemser desmembradoseimagensbitmaps,devemsertraadas.

AcesseapastaForma,evejaaspropriedadesemvdeo.

Trabalhandocomimagensimportadas
Inicialmente vamos importar duas imagens em wmf (por exemplo, podemos utilizarclipartsdoMSOfficesevocotiverinstaladoemseucomputador). OudesenhosvetoriaisdoAdobeIllustrator.

AmbasasimagensacimaforamarquivosAI(AdobeIllustrator)importadas.Ao importar imagens do AI elas so incorporadas ao Flash de forma agrupada, ento necessrio quebrar a imagemuma vez (CTRL+B) para que ela fique

269

desagrupada e depois quebrar ela novamente para que ela fique como um desenhoFlash.

Clique no menu Modify, Shape, Add Shape Hint, Vai aparecer em ambas s imagensumabolinhavermelhacomaletraa,estassoasreferncias,voc podearrastlasparaqualquerposiodentrodeseudesenhoeistofarcom queasuaformamudeatrajetriaduranteamodificao. Depois coloque uma forma no primeiro frame e outra no frame 30 e faa a InterpolaodeForma.

ShapeHints
Shape Hints so referncias que podemos adicionar aos elementos de nossa Interpolao de Forma, com isso eu posso forar determinada rea a ser transformadaemoutra. Comoprimeiroframeselecionado,cliquenomenu,Modify,Shape,AddShape Hint, voc vai observar que aparece no meio de seu desenho uma bolinha vermelha com a letra a, se voc for ao prximo quadro chave, poder observarqueneleabolinhaverde. Basta posicionar a bolinha vermelha no ponto a ser transformado, e fazer o mesmo com a bolinha verde. Os shape hints reposicionados ficaro na cor amarela.

270

Podese acrescentar quantas referncias de forma forem necessrias. entre um objeto e outro. Uma refernciade forma somente para dois objetos, se, por exemplo, voc tem um objeto que se transforma em outro e depois este segundo transformase em um terceiro, a referncia de forma colocada no primeiro, serve somente para o primeiro e o segundo, para o terceiro necessrioacrescentardosegundoparaoterceiro.

TraceBitmap
Quandovocpretendeaplicarrefernciadeformaembitmaps,aconselhvel programas externos ao flash como, por exemplo, o Winmorph que permite fazeramudanadeformaentreduasfotoseexportlacomoswf. Masoprprioflashpossuiumapossibilidadedesetrabalharcomformas,que a possibilidade de se traar obitmap. Aps inseriraimagem, Menu Modify, Bitmap,TraceBitmap.

271

Se a sua imagem for, por exemplo, uma caricatura, voc ainda conseguir bonsresultados,masseforumafotografiadevesetermuitocuidado.

Botes
Na verdade, os botes so clipes de filme interativos compostos por quatro quadros.Quandovocselecionaocomportamentodebotoparaumsmbolo, o Flash cria uma Linha de Tempo com quatro quadros. Os primeiros trs exibemostrsestadospossveisdoboto,enquantooquartodefinasuarea ativa.Narealidade,aLinhadeTemponoreproduzida,simplesmentereage aomovimentodoponteirosaes,passandoparaoquadroapropriado. Paratornarumbotointerativoemumfilme,coloqueumainstnciadosmbolo dobotonoPalcoeatribuaaesinstncia.Vocpodeadicionaraesaos botesdiretamentenosmbolo,ounalinhadotempo,sendoquenessecaso necessriodarumnomedeinstnciaaosmbolodeboto. Cada quadro na Linha de Tempo de um smbolo de boto tem uma funo especfica:

272

 O primeiro quadro o estado UP (Para cima), representa o boto que ser visvelaoabrirofilmedoflash. OsegundoquadrooestadoOVER(Sobre),representaaaparnciadoboto quandooponteiroestasobreele. OterceiroquadrooestadoDOWN(Parabaixo),querepresentaaaparncia dobotoaoserclicado. OquartoquadrooestadoHIT(rea),quedefinaareaqueresponderao cliquecomomouse.Essareainvisvelnofilme. Ao transformar um texto em boto essa rea devera sempre ser preenchida com um objeto como, por exemplo, um retngulo cobrindo o texto para que todootextofiqueclicvel.

BibliotecadeBotes
Voc pode utilizar qualquer elemento do Flash como um boto, podemos acrescentarbotesestticos,comclipesdefilmescomoelementosdosbotes, podemosacrescentarudioaoboto,etc... MasoFlashtambmtemumasriedebotesprpersonalizadosquepodem ser utilizados como botes. Para ter acesso a eles, clique no Menu Window, CommonLibrary,Buttons

AoarrastarumbotocomoodaimagemrcadeButtonblue,paraopalcoele

273

apresentaaformademonstrada.Dumduplocliqueneleparapodermosvera formadecomooicriado

Observe que dentro do boto foram criadas vrias camadas para que ele ficassecomaaparnciaatual. At a verso MX do Flash algumas aes somente eram permitidas serem colocadas em botes, mas a partir da verso MX 2004 as aes podem ser adicionadas a Clipes de Filmes. Atualmente aconselhvelutilizarmosClipesdeFilme

CLIPESDEFILME
Clipes de Filme mais conhecidos como Movie Clips ou somente MC so pequenos trechos de animao que funcionam independentes da linha do tempo do filme principal. Podem conter sons, controles interativos, instncias de outros MCS. Podem ser controlados atravs de botes, por aes de quadros,ouporoutrosMCS,podemaindaserutilizadosnacriaodebotes animados. Uma das grandes vantagens dos MCS voc pode editlos separadamente dofilmeprincipal,facilitandoaorganizaodaanimao,almdequeoMC carregadoporcompletonofilme. Atualmente embora o Flash possa criar smbolos do tipo grfico, botes e clipes de filme, os clipes de filme esto substituindo os demais smbolos em suautilizao. Comocriarumclipedefilme. Desenhe um crculo. Imaginemos que esse circulo venha a ser roda de um veculo.Podemosconformeoveiculosemovimentarcomarodagire.Imagine agora se isso fosse ser aplicado a um caminho com seis eixos, seriam seis

274

crculos sendo animados. Se formos pensar em fazer isso diretamente na Timeline,almdotempodecriao,ofilmeficarbempesado. Entocomsuarodadesenhada.

Selecione todos oselementos e converta em Movie Clip. Com isso temos um smboloaseranimado.SefossemosanimarelenaTimeline,bastariacriaros quadros chaves e fazera animao. Como vamos fazer com que eles fiquem rodando independenteda quantidadede quadros. D um duplo clique no seu clipe de filme, selecione tudo novamente e transforme em um novo clipe de filme.

Nocasoeunomeeiosfilmesparapaiefilho

NaminhaTimelinecrieiumaanimaodeClassicTweenedefiniumarotao no sentido horrio de uma volta em 24 frames (1 segundo). Isso dentro do

275

ClipedeFilmePai

NaTimelineprincipaltemosapenasumacamadacomnossoobjeto.

PressioneCTRL+ENTERevejaaanimao.

276

CinemticaInversa
Comtodaacertezaumadasferramentas maisesperadasnessanovaverso do Flash foi ferramenta de Bones . Ela permite se possa criar um

esqueleto em seu objeto para que se possa animar seu objeto de forma independente. Essa uma ferramenta muito comum em softwares de animaotridimensional. Para as verses anteriores do Flash existia um PLUGIN que permitia essa conexo. Para vermos o funcionamento da ferramenta, desenhe um importe um objeto paradentrodoFlash.Seoobjetoaserimportadoformuitocomplexo,noser possvelcriaracinemticainversa. Crieentoseudesenho

277

SelecioneaferramentaBoneToolecliqueondesercriadooprimeiroeixode seuesqueleto.

Repitaoprocessoparacriarasoutraspartesoesqueletodeseudesenho.

278

Crie seu quadro chave mais a frente e pelos ns de sua armadura mude a formadeseudesenho,aanimaosercriadaautomaticamente.

Ao criar sua cinemtica inversa, o Flash vai criar uma camada chamada armature, ao clicar no quadro chave dessa layer abrese as propriedades dessalayer.

279

Em Easy temos as opes de suavizao dos movimentos da armadura, em OptionpodemosdefiniremStylesequeremosverosnsdenossoesqueleto emformadewireframe,slidoousomentelinhas.

AcesseoCinemticaInversa,evejaaspropriedadesemvdeo.

BindTool
AopoBindToolquefazpartedoconjuntodeferramentasBoneToolpermite quesecontroleospontosdeseubone. Crieumafiguraecrieosnsdesuaarmadura.

ComaferramentaBindToolvocpodemanipularospontosdeacordocoma suaarmadura.

280

MotionPresetsespraybrushtool
MotionPresets
Outra grande novidade na verso CS4 do Flash so os Motion Presets, que soesquemasdeanimaoprontos. O objetivo desses presets so facilitar ao usurio a criao de algumas animaes. Para que voc possa ter acesso a esses esquemas de animao, clique no menuWindow,MotionPresets.

281

Para que voc possa aplicar o efeito em seu objeto, basta apenas desenhar seu objeto ou importlo, escolher o efeito na janela de efeitos e clicar em Apply. Automaticamenteserocriadososquadroschavesdesuaanimao.

AcesseapastaMotionPresents,evejaaspropriedadesemvdeo.

SprayBrushTool
A ferramenta Spray Brush Tool funciona de forma semelhante ferramenta Deco Tool, mas ao invs de ser utilizada como um lpis ela permite que se espalheumpincelemsuatela. AferramentaestnomesmogrupodaferramentaBrush. Vamosaumexemplodeutilizaodaferramenta Crieummovieclipqualquer,nocasofoicriadoumestrelacomumaanimao deClassicTween.

282

VoltecenaprincipalecliquenaferramentaSprayBrushTool

Na aba de propriedades podemos definir qual ser o smbolo a ser utilizado comosprayclicandonobotoEdit

283

Voc pode tambm a largura e altura de seu pince em Scale widthe Scale heigth. Vocpodetambmescalarerotacionardeformarandmicaseubrush. ApsdefiniraformadeseuBrush,bastaapenasespalharosprayemsuatela.

284

AcesseapastaSprayBrush,evejaaspropriedadesemvdeo.

Aes
O Flash vem atravs de suas verses se aprimorando cada vez mais como ferramenta de criao e desenvolvimento para web e aplicaes ricas. A verso CS3 trouxe junto com ela um amadurecimento de sua linguagem de programao o ACTIONSCRIPT para a verso 3 que est estruturada como uma linguagem madura e utilizando recursos que somente eram comuns a linguagenscomoJAVA,CEC#. Em nossa apostila vamos estudar o flash de forma programvel utilizando o actionscript2. NaversoCS4aindapossvelprogramaremAS(ActionScript)2.0. Umcuidadoquesedeveteraquiotipodeprojetoasercriado,pois bemcomum,iniciarumprojetodeformaerrada.Casovocqueira um projeto AS2 e tenha iniciado um projeto AS3, clique no meu File>PublishSettings>abaFlashemudenaopoActionScriptversion.

OpainelAes
ParapodermosaplicaroscdigosactionScriptemnossoprojetonecessrio utilizarmosopainelactions.Vocpodechamaropainelactionsatravsdo menu,windowactions,ouatravsdatecladeatalhoF9oporecomendada.

285

OpainelActionsdivideseemduaspartes,naesquerdatemosumabiblioteca deaes.Vocpodeobservarquenotopotemosonveldeactionscriptque estamosutilizandoenadireitatemosajaneladecdigo. Na parte superior da parte direita do painel de aes temos alguns botes, vamosverosprincipais: Permiteadicionaraesdeacordocom asuanecessidade.

Permitelocalizarumapalavradentrodocdigo. Insert a target path Permite adicionar ao cdigo um objeto ou varivel criada. Verificadordesintaxeverificaseexistealgumerrodesintaxedocdigo. Caso ocorra algum erro ele dar um erro eo mesmo ser mostrado na barra CompilererrosnorodapdoFlash

286

Casonohajaerro.

um habito correto, ao se desenvolver qualquer cdigo sempre trabalhar comendentaodenveis,deixandoassimocdigomaisorganizado,mascs voc no o tenha feito Durant a digitao dos cdigos, voc pode usar esse botoparareorganizarocdigoparavoc. Permitemadicionarcomentriosdebloco(/*textodocomentrio*/), comentriodelinha(//textodocomentrio)eremoveroscomentrios.Todos os nossos cdigos tero comentrios. Esse um bom costume de ser ter ao criarseuscdigos,poistornafciloentendimentodoqueseestfazendo. Esse boto liga / desliga o assistente de cdigo do Flash. Em nosso curso vamos trabalhar com ele praticamente desligado. Vamos ns mesmosdigitarosnossoscdigos.

UtilizandooScriptAssist
Para quem est iniciando no Flash a forma recomendvel para se adaptar a utilizaodoSatravsdoScriptAssistance. Desenheumobjetoemsuatelaeconvertaoemsmbolodotipoboto. Aps ter convertido seu objeto para smbolo do tipo boto, clique sobre ele e pressioneF9 Najaneladeactionscliquenobotocomosinaldemais(+),depoisnavegue porGlobalFunctions,TimelineControl,goto,cliquenaopogoto

287

Nopaineldeaesvaiaparecernateladeblocodeaes:

on(release){ gotoAndPlay(1) }
Explicandooqueestescrito on(release)oeventoqueexecutaaao,nocasoseriaaosoltar. gotoAndPlay(1)Aoserexecutada,nocasovaoquadro1einicie QuandoseusaoScriptAssistancenapartesuperiorabresealgumasopes demudanaemsuasactions.

288

EstandocomaaogotoAndPlay(1)selecionadaasopesnajanelaso: GotoandplayVaoumdeterminadolocaleinicie GotoandstopVaoumdeterminadoquadroepare SceneQualacenaemquedeveocorreraao FrameParaqualquadrodeveocorrerao. Aoclicarnoeventoon(release),asopessuperioresseroasseguintes:

OsprincipaiseventosaseremadicionadosaboteseMovieClipsso: PressAopressionar ReleaseAosoltar releaseOutsidepressionadosobreobotoesoltoforadele rollOverrolarsobre rollOutrolarfora dragOverArrastarparacimadoboto dragOutArrastarparaforadoboto keyPressAlgumateclapressionada. importantelembrarqueasopesqueforammostradasacimaso referentessaesdeTimelinegoto.

289

AesbsicasdoFlash
play() Instrui o SWF a reproduzir o filme a partir do ponto onde ele se encontra stop()InstruioSWFapararofilme gotoAndPlayegotoAndStop()InstruemoFlashparairaumdeterminado frameoucenaecontinuar(gotoAndPlay)ouparar(gotoAndStop). getURLSemelhante funo de link do HTML, como o nome diz, pegue a URL,suasintaxesimples:getURL(http://www.adobe.com.br,_blank) importantesempredefinirotipodejanelaaserabertonaaction,no exemploa mesmaestava_blank,quefarolinkabriremumanova janela, caso voc queira que o link abra na mesma janela, ser necessrioapenasabrirefecharaspas. As aes que foram apresentadas acima podem ser aplicadas diretamente a boteseemquadrosemsuaTimeline.

Exemplodeutilizaodeactions
Vamoscriarumexemplosimplesondeteremosumbotoanimadodoquadro1 aoquadro30,noquadro30elepara,seeleforclicadoeleandaatoquadro 60eparanovamente,seeleforclicadonoquadro60,eleabreositedaadobe. Entocrieumobjetoqualquereconvertaoemboto. DepoiscrieumaanimaodeClassicTweenentreosquadros1e30e30e 60.

CrieumanovacamadaacimadesuacamadaatuaerenomeieelaparaAS

290

Se pressionarmos CTRL+ENTER para ver nossa animao, a objeto ser animado conforme foidefinido naTimeline,mas precisamos que ele pare nos quadros30e60. Entocliquenoquadro30dacamadaASepressioneF6paracriarumquadro chave

CliquenessequadroepressioneF9paraabriropaineldeactions Na esquerda do painel de actions, abra a opo Timeline Control e d um duplocliquenaopostop.

Issofarcomqueaochegaraoquadro30aanimaopare.Repitaoprocesso noquadro60. Observe que ao colocarmos aes em quadros os mesmos apresentam junto aoquadroumpequenoa,indicandoquenoframeexistemaes.

Vamosagoraacrescentaraesaonossoboto. Vatoquadro30ecliquenoseuboto.

291

Chameopaineldeactions(F9)edumduplocliquenaopoplay,issofar comqueaanimaocontinue.

Vagoraaoframe60eselecionenovamenteoboto. Na esquerda da tela agora abra a opo Browser/Network, depois de um duplocliquenaopoGETURL Napartesuperiordajaneladeactions,sernecessriopreencheroendereo doquedeveserabertoetipodejanela.

Vamos fazer tambm com que o boto ao ser clicado nesse quadro inicie

292

novamenteaanimao. CliquenoblocodeaesnalinhadegetURLparaselecionla,depoisdum duplo clique na opo goto na esquerda da janela, automaticamente ser acrescentadaanovalinhaabaixodegetURL.

Testeasuaanimao.

ProgramaoCentralizadaeDescentralizada
Programaocentralizadaaquelaondeoobjetoinstanciadodentrodoflash e a ao para ele feita na timeline. Isso poupa a redigitao e leitura de cdigo. Programao descentralizada aplicada diretamente no objeto, conforme utilizamosatomomento.aconselhvelqueaosefamiliarizarcomasaes doFlashutilizarsomenteaprogramaocentralizada. Em AS3 no existe programao descentralizada, ou seja, no se podeprogramardiretamentenoobjeto.

Vamos a um exemplo para ver como aplicarmos as duas formas. Em novo filme do Flash crie duas formas e as transforme em Botes. (Desenhe sua forma,pressioneateclaF8,escolhaotipoButtoneconfirmeacriao).

293

CliquesobreobotocinzaepressioneF9.DesligueaopoScriptAssistance, assimpodemosdigitarnossasaes.Adicioneaseguinteao:

on(press){ trace(Esseummodelodeprogramaodescentralizada) }

Explicando o cdigo acima: on(press){ define o evento ao pressionar, ou seja,estoudizendoaoFlashquealgoserfeitoaoobjetoserpressionado.Os nicosobjetosquepermitemAS,sooButtoneMovieClips. Trace(Esse...) Aqui deve ficar a ao que deve ser feita quando oboto for pressionado. No caso usei o trace que um comando de testes, ele no apareceemnenhumlugarforadoFlash.PressioneCTRL+ENTERparatestar seufilmeeobservenabarradeOutputqueelevaiescreveroquevocpediu,

294

quandoobotoforpressionado.

Vamos agora usar o mesmo texto, mas no outro boto (vermelho) como programaocentralizada.Aprimeiracoisaaserfeitainstanciaresseboto. Cliquesobreele,enocampoinstancename,coloquebotao_btn.

Semprequeforinstanciarumobjetoaconselhvelcolocaraterminaopara ele. Por exemplo boto colocar _btn, Movie Clips colocar _mc, Objetos de textocolocar_txt. Porqueinstanciar?Quandoinstanciamosumobjeto,emqualquerframequeeu precisardaralgumaaoaele,eupossochamlo. Vamosprogramarentoobotoinstanciado. Criemaisumalayeredeaelanomedeactions.

Clique sobre o primeiro frame da layer actions e pressioneF9 para chamar o paineldeaes:Digiteoseguinte:

botao_btn.onPress=function(){ trace("Esseummodelodeprogramaocentralizada") }

295

Aotestarseufilmevocpodeobservarqueeleescrevetambmna janelade sadaoutput Explicando o cdigo: botao_btn.onPress = function(){ boto_btn nosso botoinstanciadoquerecebeoeventoonPresseexecutaumafuno.Otrace ocontedoaserexecutadoquandoobotoforpressionado.

PRECARREGADOR
Todo o cuidado que voc investe na criao de interatividade complexa com vrias linhas de Tempo ser desperdiado caso o seu usurio tenha que esperar muito tempo para que seja feito o download da animao atravs da WEB,muitasvezesfazendocomqueousuriodesistadeabrirapgina. Podemos evitar a perca de usurios criando animaes curtas que os entretenha e dispare o filme principal somente quando o filme tiver sido carregado. Os prcarregadores devero ser pequenos j que voc quer que eles sejam carregados quase que instantaneamente e devem ser informativo, deixando seusespectadorescientesdoqueosesperaoudequantotempoelesterode aguardar.

296

Criandoumcarregadorsimples
Vamos criar um carregador simples. O primeiro quadro deve ser destinado animaodopreloader.Crieumclipedefilmequedeveconterasuaanimao dopreloader,lembrandoqueessaanimaodeveserleve.Crieduascamadas emseufilme,umaparaaeseoutraparaofilme.

No painel de aes desligue a opo script assistance e coloque a seguinte ao:

if(_framesloaded>=_totalframes){ gotoAndPlay(2) }else{ gotoAndPlay(1) }

Explicandoaao: if(_framesloaded>=_totalframes){Verificaseosquadroscarregadosdeseu filmemaiorouigualaototaldequadrosdeseufilme. gotoAndPlay(2)Casoaaoacimasejarealeledirecionaparaoquadro2 ondetemosnossaanimao. }else{

297

gotoAndPlay(1) } Caso a quantidade de quadros ainda no tenha sido toda carregada ele voltaaoquadro1.Issoserepeteatqueofilmetenhasidotodocarregado.

Acesseoarquivo,evejaaspropriedadesemvdeo.

AplicaoStandAlone
Podemos utilizar oFlash paraaplicaesexecutveis, ou seja, podemos usar todos os recursos do Flash para criao de aplicaes executveis. Esse recurso muito utilizado para criao de CD multimdia. Basta apenas aps terminar o seu filme no assistente de publicao marcar a opo Windows Projector.

AaoutilizadapeloFlashparaesserecursoFSCOMMANDqueestdentro dopaineldeaesnapastaBrowser/Network. A instruoFS Command nos permite enviar comandos de dentro do FLASH

298

paraoutrosprogramasexternosaele. Com ele podemos controlar o StandAlone Player do Flash e qualquer outra aplicao que possuir controles Active X como o JavaScript na WEB, o Director,OVisualBasic,oC++eoutros. O FS Command nos permite especificar dois parmetros: commands e arguments.Existemcomandoseargumentosprdefinidosquepodemosusar semtermosquedigitarequefuncionamsomenteparaoStandAlonePlayer. O Stand Alone e Player um recurso do Flash que nos permite basicamente visualizarumaanimaosemprecisarutilizaroFlash. Esserecursoreproduzasanimaesexatamentecomoelasiroaparecernum Browser ou em uma aplicao Active X. Quando clicamos sobre um arquivo com extenso SWF o Stand Alone Player abre uma janela e reproduz a animao,semabriroFlash.EstajanelachamadadePROJETOR. Podemos tambm publicar o filme como projetor, este assunto veremos mais adiante.

AbaixoseguemoscomandosdoFSCommand
QuitFechaoProjetor Fullscreen (true ou false) True exibe a animao em tela cheia, False retornaaotamanhonormal Allowscale (true ou false) True permite que a animao seja escalada de formaqueelapreenchatodootamanhodoprojetor.Falseaanimaosempre serexibidaemseutamanhooriginalsempoderserescalada. Showmenu(trueoufalse)Truepermiteaexibiocompletadobotodireito noprojetor.Falseexibesomenteaopoaboutflashplayernoprojetor. Exec(caminhodoarquivo)Executaumaplicativodoprojetor.

299

CENAS
Podemserentendidascomopartesdeumaanimao.Cadacenapodeconter seusprpriosobjetos/personagens,eautomaticamentesecolocamemordem umaapsoutras,podemtambmserchamadasatravsdebotesouatravs deaescolocadasdiretamentenosquadros. Depois de criada a cena podemos nomear as cenas de forma que ela possa identificarsuafunodentrodaanimao.Paracriarumanovacenacliqueno MenuInsertScene,eparaalteraronomedeumacenaMenuModify,Scene. Paraumentendimentomaiordascenassernecessriotrabalhartambmcom aes. Atualmente o uso das cenas tem sido mais restritos a animaes Flash para multimdias em CDs, HD, etc..., para swfs a serem apresentados na WEB, elas vo consumir muito espao, ento ela temsidosubstitudaporaesdecarregamentosdefilme,porestemotivono serdadaumanfasemaiorsobreesteelementodoFlash.

PUBLICAODOFILME
A publicao resultado final de seu trabalho no Flash , para publicar o seu trabalho, basta apenas clicar no Menu File, Publish. O resultado ser um documentoHTMLcomocdigodeinserodoparaoarquivoswfdoFlash. Para podermos definir quais as propriedades de nossa publicao, clique no

300

MenuFile,PublishSettings.

Aprimeiraguiatrsapossibilidadedosformatosaseremdefinidocomoprojeto finaldeseutrabalho: Flash(swf)Esteoformatodoarquivodefilmecomoresultadofinal HTML:GeraodocumentoHTMLdeseufilme GIF:esteformatopermitegerardeseufilmegifsestticosegifsanimadosdo mesmo, sendo que quando estticos podemos definir qual ser olooping e a qualidadefinal. JPG: Permite que seja gerado de sua animao uma imagem em JPG, e qualidadedeexportao. PNG:Permiteexportarofilmenesteformatoqueemborasejamenosutilizado podeserutilizadoparaimagensemseucdigoHTML,oformatopadrodo Fireworks.

301

WindowsProjector:Aquipodemosgerarumarquivoexecutveldeseufilmeo que dispensa a necessidade de plugins e do Flash para se visualizar a animao,esteprojetorsomenteparaWindows. Macintosh Projector: Funciona da mesma maneira que para oWindows , s queparaaplataformaMAC. AguiaFlashpermitedefiniraversodoFlashPlayerparaseufilme,ordemde carregamento do filme, verso de actionScript. Em Images and Sounds podemosdefiniraqualidadedesadadasimagensedosarquivosdeudio. A terceira opo permite definir as propriedades de seu SWF como compresso,inclusodecamadasocultas,incluirmetadados,etc... EmAdvancedpodemosgerarumrelatriodepublicao,protegeroswfcontra importao,etc...

302

A terceira guia HTML, permite definir para qual sada Flash ser o filme, permitedetectaraversodoFlash.Dimensesdofilme,definiraexibiofilme (playback), qualidade do filme, modo de janela (Window mode), alinhamento, escaladoswfnoHTML.

Concluso
ComcertezaaversoCS4doAdobeFlashestbemamadurecida,permitindo a designer, animadores edevelopers explorar a ferramenta em seus projetos, sejaeleumwebsite,umaaplicaomultimdia,umbanner,etc...

303