Apostila web design

of 58 /58

Embed Size (px)

Transcript of Apostila web design

  1. 1. a ' 'f F1I' 'n-'nz-rsic-n 8.0
  2. 2. ndice NDICE . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....2 INTRODUO . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....4 O que Shockwave Flash . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....4 O AMBIENTE DO FLASH . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 4 Barra de ferramentas . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 6 Caixa de Ferramentas . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....7 Linha do Tempo . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 7 Bibliotecas . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....8 Painis . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....9 Area de Trabalho . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 9 Ferramentas de Desenho e suas propriedades . ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 10 Manipulando Objetos . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....17 Trabalhando com objetos externos . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....19 SMBOLOS . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....2o Os tipos de Smbolos:.. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 20 Filtros . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 24 ANIMAO . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....25 Animao Quadro a Quadro . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 25 Animao com Interpolao de Movimento . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 25 Onion Skin . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 27 Propriedades da barra de ferramentas do quadro . ... ... ... ... ... ... ... ... ... ... .....28 Camadas . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....29 Camadas Guia . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 29 Mscaras . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....34 Interpolao de Forma . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 35 Trabalhando com imagens importadas . ... ... ... .. . .35 BOTES . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . .37 CLIPES DE FILME . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . _.38 SONS . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..._.39 VDEOS . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....42 AES . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . .46 O painel Aes . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .....46 PRE-CARREGADORES . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 51 Criando um carregador simples . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 52 APLICAO STAND ALONE . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..... Abaixo seguem os comandos do FS Command . ... ... ... ... ... ... ... ... ... ... ... .....54 CENAS . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... . . . 55 PUBLICAO DO FILME. .CONCLUSO . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. . . 5a
  3. 3. INTRODUOA tecnologia Shockwave Flash,da Macromedia,j esta presente na WEB h alguns anos,e no ltimo ano ganhou um forte impulso com a incluso do plug- in necessrio nos navegadores mais recentes.Cada vez mais utilizado,o Shockwave Flash j est sendo empregado em sites de grandes empresas. 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 caracteristica muito importante:os arquivostransferidos pela Internet so pequenos. O que Shockwave Flash uma ferramenta de autoria e edio de imagens vetoriais com animao,som e interatividade.Baseada em imagens vetoriais,possibilita a criao de efeitos avanados em arquivos bastante pequenos. Alm de imagens vetoriais,ao contedo Flash pode ser acrescentado arquivos bitmaps,sons no formato. au e . wav,e at mesmos GIFS animados. O que so Imagens vetoriais:As imagens vetoriais no so geradas por meio da combinao de pontos de imagem,e sim criadas a partir de clculos 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 dimetro ter exatamente o mesmo tamanho se o crculo tiver 20 centmetros.Outra vantagem que,ao serem ampliadas,no perdem absolutamente nada em qualidade.A desvantagem das imagens vetoriais a impossibilidade de representar imagens mais complexas e realistas com qualidade fotogrfica. O que podemos criar com o FlashDesde simples faixas animadas com anncios para pginas da WEB,menusinterativos,desenhos animados,arquivos executveis,gifs animados,etc. ..O AMBIENTE DO FLASHAo iniciarmos o Flash ele vai apresentar uma tela com as opes que podemos
  4. 4. trabalhar com o Flash. "He _i VPL' nicmetllltfzlOpen a Recent Item Create New Create from Template _) Open. , ,Flash Document _J Advertising,Flash Slide Presentation _J Form Applications, r Flash Form Application J GlobalPhones , j ActionScript File _J Japanese PhonesActionScript Communication File J PDAs j;Flash JavaScript FilePhoto slideshowsFlash Project _'I Presentatlons_J MDC. .. Extend Macromedia Flash Exchange ' Take a quick tour of Flash Get the most out of Flash Professional - Leam about Flash documentation DS and Vide.training.Special Offers and esources more available at macromediacom. - Find authorizedtrainingDon't show againNa coluna da esquerda podemos abrir um projeto existente,os projetos mais recentes vo aparecer logo abaixo do boto "Open.Na coluna do meio podemos iniciar nossos projetos.A verso 8 do Flash permite alm da opo que vamos trabalhar em nosso curso "Flash Document",temos tambm as opes: o Flash Slide Presentationo Flash Slide Applicationo Flash Form Applicationo ActionScript Fileo Flash JavaScript Fileo Flash Project Na coluna da direita temos as opes de modelos de aplicaes Flash.Ao clicar em Flash Document ele mostrar a rea de composta de diversas janelas e opes.No topo temos a barra de menus, esquerda caixa de
  5. 5. ferramentas e no centro a linha do tempo,e na grande rea branca a rea de trabalho. 'o LlyraqdipllyxhNrnia-ql!;umlnaziMa. .. c. , WW.tm. M,cw :n_ A A : I u w ,' _l ; q llwu:Ywe A U e. , n_ _.nwnpal ;f : mv-ev 5K Anllane mu._ . ... ....:e 'it. ..,,em m. ..mm' e. ..,e. ,ol ,_ ei ' ' . ' "u.... . . .u_ . _u' . . V4 l( -. .s *Luau aum . kh ' m.. . a.Barra de ferramentasPara exibir a barra de ferramentas no Flash,clique no Menu ,Window,Toolbars,MainD . .fel? EI Na Barra de ferramentas alm dos botes padres como Novo,Abrir,Salvar,etc. ..,temos botes exclusivos do FLASH como,por exemplo,Encaixar(formato de im) que auxilia no posicionamento dos elementos na tela do filme.
  6. 6. TootsCaixa de Ferramentas A caixa de Ferramentas do Flash 8 composto de quatrosubdivises:Ferramentas (Tools),Exibir (View),Cores (Colors) e Opes (Options). lEl */P0 AO D' A rea de ferramentas composta dos botes de desenho ej j;manipulao dos desenhos feitos na rea de desenho do FLASH. 0 ;A rea Exibir permite modificar a forma de visualizar a rea de J desenho do Flash permitindo mover o desenho ou ampIi-Io com aView' lupa."?Q Na rea de cores podemos definir cores de linhas e cores depreenchimento dos desenhos feitos no FLASH. i i' Opes tratam das opes de desenho selecionado.' Ainda com relao caixa de ferramentas,ao posicionar a ponta do : Em:mouse sobre uma ferramenta ela mostra o nome da ferramenta e @uns uma letra entre parnteses ,ao pressionar a tecla correspondente letra ela ser marcada como ativa automaticamente. Linha do Tempo A Linha do tempo utilizada na criao de animaes.Atravs dela podemosdefinir qual ser a mudana e/ ou caminho a ser especificado pelo objeto do filme.Podemos travs de a linha tempo utilizar camadas para melhoragrupamento e movimento dos objetos.MLPuzzlelIa' - ' 3TIITEIHE Scene 1 _ _ 10W vm D::Il I: IIJ%I'Z 1 10.0595 aos 4A Timeline composta dos seguintes elementos,na parte superior temos onome do arquivo aberto.Na direita temos o boto de controle de cenas - ede controle de objetos do Flash '- e no final a opo de ZOOM da rea de
  7. 7. edio *'' ' . Abaixo temos as opes de visualizao de camadas:mostrar /ocultar, bloquear/desbloquear e visualizar somente traos:a . Abaixo temos as camadas criadas: *viii* . 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 vazio e quando o mesmo apresentar um "a" significa que nesse quadro temos aes (aes so blocos de cdigos dentro de nossa animao). 3 ~ j:c No final do empilhamento de camadas temos os botes que nos permitem criar as camadas do Flash.Criar uma camada normal,criar uma camada GUIA,criaruma pasta (permite armazenar camadas dentro delas e no final da linha excluiruma [email protected] lA barra da linha do tempo exibe os quadros da animao onde esto cursor vermelho na barra indica o quadro selecionado, possvel clicar sobre o quadro para selecionar o mesmo.No canto direito da barra temos o boto ondepodemos definir a aparncia da barra da Timeline l.Na parte de baixo temos as opes de "Onion Skin" (veremos mais a frente) o nmero do frame selecionado,a velocidade de nosso filme (12fps),12 Framesper second (Quadros por segundo).Significa que nosso filme apresenta 12quadrosdeanimao porsegundo. V H 1 M '5Caso voc venha a produzir um lme em flash para ser exibidoem um DVD,TV ou para ser introduzido em algum filme.Sernecessrio mudar a sua velocidade para 30FPS.Animaes quecontenham muito brilho,ou efeitos de com objetos piscando aconselhvel utilizar 24FPS. Bibliotecas As Bibliotecas do Flash so objetos armazenados que podem ser utilizadosposteriormente.Existem as Bibliotecas do Flash que podem ser usadas em qualquer filme e existe a biblioteca do filme atual,ou seja,smbolos criados
  8. 8. para o filme atual. Para poder visualizar as Bibliotecas do Flash,escolha Menu Window,Common Library e escolher o tipo de objeto a ser utilizado. E para chamar as bibliotecas do filme atual escolha Menu Window,Library ousomente a combinao das teclas CTRL+L.V Library - My_Puzzle. flavil84 items background pattern Piece actionsPiece actions (nested) Piece number circlePiece numbers Rotate instructions Puzzle imageB Puzzle patternB Puzzle piecesir;lr?l! ";|Iri ir?ll* ll": |PainisA forma de trabalhar com os objetos do Macromedia Flash atravs de Painis,quando aberto o programa estes painis localizam-se na direita de sua rea de Trabalho e podem ser redimensionados,arrastados e retirados da tela. Para poder chamar os painis use o Menu Window. rea de TrabalhoUma das primeiras coisas a serem feitas ao iniciar um lme do Macromedia Flash definir as propriedades de sua tela,como tamanho,cor e velocidade ao qual o seu filme vai trabalhar,estas propriedades pode ser alteradas atravs dabarra de propriedades abaixo de sua tela.Esta barra muda conforme o objeto
  9. 9. que est selecionado.v Properties_ m:'ararrret Af Document Size:550 x 400 pixels l Badground:_ Frame rate:12 fps I 'a Unhdedi Publish:Settings. .. l Playerzs ActionScript:Z Profile:Default Device: Settings. .. l .Properties -_ Shape //v E] f? )v ,_ Miter : w 117.0 x;95.0E H 91.0 Y 38.0 'V7 Properties . , : A r i j_ Movie Clip v Instante of:Symbol 1 color:[None v A' ~ lSvi-ap. .. lW:117-0 X:95-0 Blend:lNormal vH 91.0 Y 38.0 i Use runtime bitmap cadiingFerramentas de Desenho e suas propriedades kA primeira ferramenta a ferramenta seta utilizada para selecionar os objetos de sua rea de trabalho,podemos selecionar os objetos clicando sobre eles ou simulando um contorno em forma de retngulo sobre o objeto a ser selecionado.Os objetos no Flash diferenciam contorno de preenchimento ento se voc clicar no meio de um objeto voc apenas selecionar o preenchimento.Para poder selecionar ambos necessrio um duplo clique ou simular um contorno sobre ambos com a ferramenta seta.A ferramenta ao lado da seta em forma de uma flecha branca a ferramentalsubselecionar que permite trabalhar com os ns de seu objeto. Abaixo temos a ferramenta FreeTransform m.Ao clicar sobre ela ,ser mostrado alas de dimenso em volta de seu objeto.Na parte de Options dacaixa de ferramentas ele mostra as opes da ferramenta. 10
  10. 10. rZ7 'm ] 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 um lado ele faz a mesma dimenso para o outro lado.A terceira opo a opo Distort que permite distorcer seu objeto em perspectiva.A ltima opo a Envelope que vai permitir editar o objeto com curvas de bezier.Caso voc j tenha convertido seu objeto em smbolo as opes disponveissero somente "Rotate and Skew" e Scale. 6-0 Ao lado temos a ferramenta Gradient Transform Tool" 3 ,veremos o usodessa ferramenta posteriormente. Abaixo temos a ferramenta Linha /que permite que se trace linhas e podemos tambm unir os ponto de uma linha criando assim polgonos. Estando com o a ferramenta encaixar (Im) ligada - o mesmoencontra-se caixa de propriedades e na barra de ferramentas -ao traar ele mantm uma "bolinha" na extremidade da linha equando encaixar ele tambm a mostrar,isso far tambm com que as linhas sempre saiam retas na vertical e diagonal.Esta ferramenta tambm auxiliar na criao de quadrados e circunferncias.Tambm manter uma grade invisvel em sua tela - o que muitas vezes atrapalha - para o posicionamento de objetos.Para evitar o uso do "im" voc pode deslig-Io ou ento utilizar as setas de seu teclado para o posicionamento. A verso 8 do Flash trouxe uma nova ferramenta que permite desenhar osobjetos como grupos a ferramenta "Object Drawing" Caso essa ferramenta esteja desligada ao desenhar um objeto sobre um existente o novo objeto substituiria a parte sobreposta. Ao lado da ferramenta linha temos a ferramenta Lao que permite fazerselees irregulares em nossos objetos. 11
  11. 11. Na linha de baixo a ferramenta da esquerda a ferramenta caneta que permite criar curvas Bezier no Flash e alterar os pontos de um objeto do Flash.Abaixo temos um retngulo e depois do mesmo ter sido alterado com a ferramentacaneta. Ao lado da ferramenta caneta temos a ferramenta Texto. As opes de Texto podem ser Esttico,Dinmico e de Entrada. Texto Esttico: o texto simples com todas as possibilidade de Formatao.V Properties gA starjcText 7 A 'limesNewRoman v 12 vB IText TOP 55!' 0 jvj A5 jNormal v j jAn-alias for readability vj E N!J Auto kem Q Target: Texto Dinmico:E o texto que recebe informaes de uma varivel,ou seja,ele l o texto de um arquivo qualquer que contenha uma varivel igual 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 derolagem.t' PropertiesIf!" ' ~ A DynamicText v A Times New Roman v 12 v . . H I ? E l TEXTPD ^', V 0 v A?Normal vj jAntiwalias for readablity vj j Embed. .. j E Single line v N! El Var:J Auto kern Target: Texto de Entrada:Permite que se crie uma caixa de texto e que a mesmo comporte-se como campo de formulrios,ele permite que o usurio insirainformaes que sero repassadas tambm atravs de variveis. Properties . _ "nv, ...-,.etA InputText A Times New Roman v 12 vB I l TEXTOO 5) 0 v A?jNormal vj jAn-aliasforreadability vjj Embed. .. j W jSingle line v Var:JjAutokernMaximum characters: 12
  12. 12. Ferramenta Elipse O :Permite desenhar crculos e elipses no seu filme. Bv: RetnguloO retngulo possui como mais uma opo a possibilidade de sedesenhar um retngulo com cantos arredondados.Ao selecionar a ferramentaretngulo estaopo aparece na caixa de opes a. . Esta mesma opoaparece ao dar-se um duplo clique na ferramenta retngulo. QuandoE!.T. j Cancel jn Rectangle Settingsgamer radius: 50 Points cantosdesenharprecisar um retngulo comarredondados e no souber seu ngulo desenhe seu retngulo esem soltar o mouse v arredondando seus cantos com as setasdirecionais. Junto ferramenta retngulo temos a ferramenta "Polystar Tool"Ovquepermite desenhar polgonos e estrelas.Essa mudana pode ser feita atravsdo boto Options na barra de propriedades.Tool SettingsStyle: Numberof Sides:5 D.5DStar point size: l Cancel Ao chamar as ferramentas Oval e retngulo e polgono na caixa de propriedades sero mostradas as propriedades de cor decontorno,cor de preenchimento e tipo de linha.Ao clicar noboto personalizar ser aberto uma nova janela onde teremos mais algumasopes da ferramenta Trao. 13
  13. 13. Properties . _O PolystarTool j E 1 v solid vCap:E) 6 Stroke hinting Scale:lklormal v Miter:Join:43v l Options. .. l n Stroke Style Type:Solid Vl0K l l Cancel l Ihidmess:1.00 v pts_ harp corners A ferramenta lpis j permite desenhar linhas em sua rea de desenho ao selecionar a ferramenta linha na caixa de opes abrem-se as opes delinhas:Acertar,Suavizar e Tinta. Options o L. , VStraighten S Smooth 'Ti InkA ferramenta ao lado temos a ferramenta pincel j) que permite traos com de preenchimentos,na caixa de opes abre-se s possibilidades de preenchimento,tipos de pinceis e dimetros de pinceis. As opes dessa ferramenta so: 9_ i o Paint Normal:Pinta o objeto por onde o pincel for V @l Paint Normal passado?e Pam FMS o Paint Fills:Pinta somente preenchimentos;O Pam Behind o Paint Behind:Pinta somente fora do objeto;B:paint selemon o Paint Selection:Pinta somente o que est G Paint Inside Selecionado; 14
  14. 14. o Paint Inside:Permite pintar somente dentro. zAbaixo temos a ferramenta Tinteiro e;que permite pintar a cor de contorno dos objetos.Basta seleciona-Ia e aplicar a cor desejada diretamente na linhade contorno de seus objetos. Ao lado dela temos a ferramenta Balde de Tinta * que permite modificar a cor de preenchimento dos objetos O Flash possui para preenchimento as cores da paleta WEBSAFE e tambm alguns gradientes existentes.Na caixa de opes tambm podemos definir como deve ser aplicado o preenchimento,em todo o objeto ,ou com lacunas. Quando se trabalha com preenchimentos necessrio que se chame paleta Misturador de Cores,Nesta paleta podemos definir se o preenchimento ser slido,linear,radial ou bitmap.Podemos tambm atribuir a cor atravs de seu cdigo RGB,ou hexadecimal,alm de aplicar um canal Alpha. Color Mixer j _ Type:Solid Vl i5 [ j?E 531I R:0 V TG O vI B:255 l y I Alpha:100% v =0000FF =II : I I IIl IUDIIIIINa paleta "Color" a opo padro inicial Solid onde podemos definir as cores de contorno e preenchimento pela escolha da cor,cdigos RGB e Hexadecimal.A opo Alpha define o grau de transparncia da cor.Na opo TYPE temos como padro SOLID,ao clicar nessa opo podemos mudar para linear que aplicar ao objeto selecionadoAo escolher opo SOLID ,ser mostrado na opo COLOR a barra de coresgradiente. 15
  15. 15. Voc pode observar que temos na opo gradiente duas alas de cores,para alterar a cor de qualquer uma das alas de gradiente,basta clicar sobre ela e escolher a cor desejada.Podemos acrescentar uma ala de gradiente a nossapaleta de cores basta clicar entre uma delas,ele vai criar as outras alas deC0 FGS. Para retirar uma das alas basta apenas clicar sobre a ala,manter o mouse pressionado e arrastar para fora da linha. 4" .3, permite alterar aAo clicar na ferramenta "Gradient Transform Tool" 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 umaredonda em volta do gradiente. g A ala quadrada permite aproximar /afastar as cores gradientes,a ala em crculo permite rotacionar o gradiente. Podemos tambm escolher a opo RADIAL,ao escolher opo RADIAL16
  16. 16. podemos aplicar as mesmas opes do gradiente LINEAR.Podemos tambmdefinir a opo de gradiente e preencher nosso objeto com o balde de tinta. A ultima opo chama-se Bitmap,que permite com o conta-gotas 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 comopreenchimento. A ferramenta conta-gotas ? Vpermite capturar a cor de um objeto e aplicar dentro de outro,por exemplo,se voc importar um bitmap para dentro do flash e depois desejar aplicar este bitmap como preenchimento de um objeto clique sobre o bitmap com o conta gotas,a ferramenta modifica-se imediatamentepara o balde de tinta e voc pode preencher onde desejar. A ferramenta ao lado o apagador *'57 funciona como uma borracha,o cuidado como apagar necessrio utilizar as opes desta ferramenta ,onde voc poder apagar somente contornos,somente preenchimentos.A torneira paga todo um preenchimento ou todo um trao.Para apagar todos os objetos existentes em sua rea de Trabalho,basta dar um duplo clique sobre aferramenta borracha. Manipulando Objetos Ao desenhar no Flash,podemos manipular nossos objetos,tanto na forma, como contorno e preenchimentos.Ao desenharmos linhas,polgonos,retngulos e elipses,podemos alterar a sua forma facilmente com a ferramenta seta. Por exemplo,se clicarmos diretamente na linha a mesma ser selecionada, 17
  17. 17. mas se aproximarmos o cursor da linha o mesmo se transformar em uma curva,ao pressionarmos o boto do mouse e arrastarmos transformaremos nossa linha em uma curva,o mesmo vale para todos os objetos.Em retngulos ao aproximarmos de suas extremidades ele tambm apresentar um vrtice permitindo que se crie pontas. Ao manipular textos necessrio um processo um pouco mais detalhado,os textos no so criados como vetores,e para que se possam alterar as formas dos textos necessrio primeiro transform-Ios em vetores.Aps criar o seu texto,basta seleciona-Io com a ferramenta seta e desmembr-Io (Menu 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 transformar em Vetor. O seu texto passou a ser um vetor ento podemos acrescentar gradientes,e alterar a sua forma. Importante:Depois de convertido em vetor no mais possvel alter-Io como texto. Il5) llT. .' liNo logotipo acima alm de aplicarmos cores de preenchimento gradiente em um texto desmembrado,tambm utilizamos a opo de agrupar (Menu Modificar) e de Ordem,(Menu Modificar). Outra opo de manipulao muito importante a manipulao de alinhamento de objetos (Menu Window,Align ou Menu Modify Align),pois quando iniciarmos o nosso trabalho com animaes ,existe um cuidado muito grande com posio de nossos objetos. A opo "To Stage" da paleta Align permite alinhar e /ou distribuir oselementos de acordo com o palco. 18
  18. 18. "zlDistribute:stage: lJl=# Ill# D Matd1 size:Space: El D Ela ? dl: Trabalhando com objetos externos No Flash alm de criar seus prprios objetos podemos tambm inserir novosobjetos dentro de nossos filmes. O Flash importa quase todos os formatos grficos,tendo como destaque o PNG (Melhor formato para arte no Flash,isso permite uma integrao muito forte como Macromedia Fireworks),O PSD (Photoshop),Formatos de bitmaps (BMP,GIF,JPG,etc. ..) arquivos de udio como WAV,MP3, AU,formato de video AVI,MOV,MPEG,imagens vetoriais como criadas pelo Adobe Illustrator,Macromedia Freehand,AutoCAD,alm de programas que permitem criar em SWF como Discreet Plasma,ToomBoom e Swift 3D. Ao importar um objeto o mesmo ser colocado na biblioteca de smbolos do programa. Ao importa vetores e metaarquivos (WMF),voc pode desmembr-Io e trat-Io como um objeto do Flash.J arquivos Bitmaps ser necessrio trat-los como bitmap,se for necessrio convert-los em vetores necessrio Traar o Bitmap",ou seja,transform-lo em vetor.A perca de qualidade na imagem infelizmente ocorrer. Na prxima imagem temos um imagem Bitmap e depois de ser traada.e ao lado temos um carro em WMF que importado como objetos agrupados edepois de desmembrada. 19
  19. 19. I SMBOLOSPara podermos trabalhar com animaes no FLASH necessrio que quase todos os elementos sejam convertidos para smbolos,pois atravs desmbolos que podemos definir qual o comportamento do simbolo: Os trs simbolos do FLASH so Grficos E,Botes e Clipes de Filme .Voc pode criar o objeto e depois convert-Io em Smbolo ou atravs do menu Insert Convert to Symbol cri-lo e depois adicionar ao filme.Ao criar um smbolo ele vai automaticamente para a Biblioteca de Smbolos. Para converter um objeto existente em simbolo basta apenas apertar a tecla de funo F8.V Library- Untitled-1 5?. *me3 itens Name T e Usei E!Symboll Graphic SymboI2 Button Symbol 3 Movie Clip jli5ijOs tipos de Smbolos:Grfico:Este o tipo mais bsico de smbolo,pois ele praticamente esttico, 20
  20. 20. embora possa receber aes para ele, muito utilizado tambm dentro dosoutros simbolos. 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 simbolo com a vantagem de que ele carrega todo o clipe de filme primeiro emostra o mesmo no filme todo de uma vez. Convert to Symbol [E Name:MC poligono 0K Iype:0 Movie dip Registration:l cante,Button Graphic lLinkageLinkge:Export for AconSUipt :Expgrt for runtime sharingIwrt for runtime sharingSource_ :. File: ,, .Symbol name:Symbol 4Enable guides for 9-slice scaling Ao desenhar seu objeto e pressionar F8, (Menu ,Modify Convert to Symbol) ele abre a tela acima,onde necessrio dar um nome ao smbolo (ele sempre trar um nome genrico ,como symbol? ?),o nome aconselhvel manter uma nomenclatura que facilite a sua identificao.Por exemplo Grficos colocar GRnome,boto BTnome,Clipe de Filme MCnome.No caso do clipe de filme usa-se MC (Movie Clip), dessa forma que a comunidade de designers eprogramadores em Flash chama o Clipe de Filme.Abaixo do nome temos a21
  21. 21. escolha do tipo de simbolo.Ao lado do tipo de smbolo temos a posio de seu centro de Registro,ao padro e no canto superior esquerdo,esse centro de registro necessrio,pois a partir dele que seu objeto carregado.Ao clicar na opo Advanced,abre-se as opes de exportao de nosso objeto para cdigo.Usaremos esse recurso mais a frente.Mesmo depois de pronto podemos alterar as propriedades de nossos smbolos atravs da biblioteca (atalho CTRL+L ou Menu Window Library),ou mesmo ele 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 edit-Io tambm no local e em uma nova janela. Embora a funo inicial do Clipe de Filme era conter animaespara se evitar timelines extensas quando fosse necessrio umaanimao de repetio e grficos para objetos estticos,atualmente convencionou-se utilizar somente Clipes de Filme mesmo para objetos estticos.A razo para essa mudana pelo fato de que posso controlar meu Clipe de Filme atravs de programao (linguagem actionscript) e aplicao de filtros e mistura de camadas. Ao criar um smbolo,podemos manipula-Io pela barra de propriedades.V Properties Parameters E lMovie ClID V Instante of:MCpoligono Color:lNone v _' lSWD---l ^J:213-1 X:249-0 Blend:jNormal Vl H 228.2 y 194.4 Use runhme bitmap cad1ingNa barra de propriedades podemos definir a posio X e Y de nosso objeto,a sua largura (W) e altura (H),o comportamento do objeto.Onde est instance Name", um campo utilizado para dar nome de instncia ao objeto,esse campo ser utilizado em actionscript.A opo SWAP permite substituir osmbolo na rea de edio por outro existente na biblioteca. 22
  22. 22. Swap Symbol0 MCpoligono A opo Color permite modificar as propriedades de cor e transparncia do smbolo.As opo so: o 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%). o Tint Preenchimento,permite preencher o seu objeto com qualquer cor com grau de transparncia. o Alpha Permite acrescentar transparncia aos smbolos. o Advanced Permite trabalhar as cores RGBA do smbolo. Advanced Effect '35' Red = ( v x R) + o v Green =( 100% v x c) + 0 v Blue=( 100% v x B) + 0 v Alpha =( IOCP/ n v x A) + 0 V A opo Blend permite aplicar mistura de objetos. necessrio que cada objeto esteja em sua camada. Use Runtime Bitmap Caching,permite criar um bitmap de seu objeto em tempo de execuo. 23
  23. 23. Filtros A verso 8 do Flash trouxe uma inovao esperada h muito tempo que sofiltros para serem aplicados aos smbolos.Uma nica observao,os filtros spodem ser aplicados a Clipes de Filme e Textos.Para aplicar um filtro,selecione seu smbolo e clique no boto Add Filter .As opes so: o Drop Shadow Aplica uma sombra ao seu objeto. ' Proemes Fmers a Blur X:O v _ Color:I_ Knod= _totaIframes) Verifica se os quadros carregados de seu filme maior ou igual ao total de quadros de seu filme. gotoAndPlay (2); Caso a ao acima seja real ele direciona para o quadro 2onde temos nossa animao. 52
  24. 52. l else f gotoAndPlay (1 );] Caso a quantidade de quadros ainda no tenha sido toda carregada elevolta ao quadro 1. Isso se repete at que o lme tenha sido todo carregado. APLICAO STAND ALONEPodemos utilizar o Flash para aplicaes executveis,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. Publish SettingsCurrentprole:Default v @V + : l Ol Forme-ts 'Flash ! HTML Type:File:J aaa.(swf) testeswfJ;HTML (hm) testehtml_QIF Image (. gif) testegif_JPEG Image (. jpg) teste-JPG_ENG Image (. png) teste-mgMacintosh hinrli:.' z 'hqxguidmme. mov l Use Default Names l A ao utilizada pelo Flash para esse recurso FSCOMMAND que est dentro do painel de aes na pasta Browser/Network. A instruo FS Command nos permite enviar comandos de dentro do FLASH53
  25. 53. para outros programas externos a ele. Com ele podemos controlar o Stand-Alone Player do Flash e qualquer outra aplicao que possuir controles Active X como o . JavaScript na WEB,o Director,O Visual Basic,o C++ e outros. O FS Command nos permite especificar dois parmetros:commands e arguments.Existem comandos e argumentos pr-definidos que podemos usar sem termos que digitar e que funcionam somente para o Stand Alone Player. O Stand Alone e Player um recurso do Flash que nos permite basicamente visualizar uma animao sem precisar utilizar o Flash. Esse recurso reproduz as animaes exatamente como elas iro aparecer num 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,sem abrir o Flash.Esta janela chamada de PROJETOR. Podemos tambm publicar o filme como projetor,este assunto veremos maisadiante. Abaixo seguem os comandos do FS CommandQuit - Fecha o ProjetorFullscreen (true ou false) - True exibe a animao em tela cheia,False retorna ao tamanho normalAllowscale (true ou false) - True permite que a animao seja escalada de forma que ela preencha todo o tamanho do projetor.False a animao sempre ser exibida em seu tamanho original sem poder ser escalada. Showmenu (true ou false) - True permite a exibio completa do boto direito no projetor.False exibe somente a opo about flash player" no projetor. Exec (caminho do arquivo) - Executa um aplicativo do projetor. 54
  26. 54. v Actions ~ Button 5,: fscommand :Sends FSComrnand to movies container[] Global Funcbaris[ 'melirie cmmi gato Paramehers:Expression @ pav stop sxaAlsciurids() BrenserlNetwork 4h =_Q A v '*""' o:(release) q : :'37 Command:qui!_ ExofessioriCormriands for stzndalorie Mayer:_quit vm saci/ arabe. . near-imau pnneing Functions ) hhscellareousFurinons Mathematical Funciona v 2 a CLrrerritSelenmri CENASPodem ser entendidas como partes de uma animao.Cada cena pode conter seus prprios objetos/personagens,e automaticamente se colocam em ordem uma aps outras,podem tambm ser chamadas atravs de botes ou atravs de aes colocadas diretamente nos quadros.Depois de criada a cena podemos nomear as cenas de forma que ela possa identificar sua funo dentro da animao.Para criar uma nova cena clique no Menu Insert Scene,e para alterar o nome de uma cena Menu Modify,Scene.Para um entendimento maior das cenas ser necessrio trabalhar tambm com aes.Atualmente o uso das cenas tem sido mais A/restritos a animaes Flash para multimdias em CDs,HD,etc. ..,para swfs a serem apresentados na WEB,elas vo consumir muito espao,ento ela tem sido substituda por aes de carregamentos de filme,por este motivo no ser dada uma nfase maior sobre este elemento do Flash. PUBLICAO DO FILMEA publicao resultado final de seu trabalho no Flash ,para publicar o seu trabalho,basta apenas clicar no Menu File,Publish.O resultado ser um documento HTML com o cdigo de insero do para o arquivo swf do Flash.Para podermos definir quais as propriedades de nossa publicao,clique no Menu File,Publish Settings. 55
  27. 55. Publish Settings ]Currentprole:Default VI ,'I' -d 9Formats , Flash IHTML IType:File:7555) (mf) Unhded-lswf a Ltn-ML Lhunl) Urihded-lhtml a QIF Image (. glf) Unuded-lglf a E ; pec Image (jpg) Untitled-Bang 'ENG Image (png) UIIEIJLPDQ a 4 windows Prtnector Lexe) Unhdedexe a I Macintosh Projector Unded-hx a QuickTime (mov) Unuded-lmov' aUse Default NamesPublish I T Cancel A primeira guia trs a possibilidade dos formatos a serem definido como projeto final de seu trabalho: Flash (swf) Este o formato do arquivo de filme como resultado final; HTML:Gera o documento HTML de seu filme ; GIF:este formato permite gerar de seu filme gifs estticos e gifs animados do mesmo,sendo que quando estticos podemos definir qual ser o Iooping e a qualidade final. JPG:Permite que seja gerado de sua animao uma imagem em JPG,e qualidade de exportao. PNG:Permite exportar o filme neste formato que embora seja menos utilizado pode ser utilizado para imagens em seu cdigo HTML , o formato padro do Fireworks. Windows Projector:Aqui podemos gerar um arquivo executvel de seu filme o que dispensa a necessidade de plug-ins e do Flash para se visualizar aanimao ,este projetor somente para Windows. 56
  28. 56. Macintosh Projector:Funciona da mesma maneira que para o Windows ,s que para a plataforma MAC. Quick Time:Permite gerar de sua animao um filme no formato . mov. A guia Flash permite definir a verso do Flash Player para seu filme,ordem de carregamento do filme,verso de actionscript.Em options podemos,gerar um relatrio do lme,proteger contra importao (Quando essa opo est desmarcada possvel importar um SWF dentro de outro filme),omitir aes de rastreamento,permitir debug dos cdigos do filme,comprimir o lme,proteger seu filme com senha,definir a qualidade do JPEG e qualidade doudio. Publish Settings Current profile: Format:Flash HTMLyersion:Flash Player 8 vLoad order:Bottom upActionscriptverslon:AconScriptzo v Settings. .. lOptions:_ Generahe size geport j Protect om import j Omlt trace actions Debugglng pennitted 7j Compress moviePassword: JPEG Quality: 8 O 100 Audio stream:MP3, 15 kbps,Mono Set- -- l Audio event:MP3, 16 kbps,Mono Set. .. l : Override sound settings _i Export device soundslLocal playback security:Access local les onlyl Publish ,l Cancel l A terceira guia HTML,permite definir para qual sada Flash ser o filme,permite detectar a verso do Flash.Dimenses do filme,definir a exibio filme (playback),qualidade do filme,modo de janela (Window mode),alinhamento,escala do swf no HTML. 57
  29. 57. Publish Settings currentwob:lfawt, Formats Flash FWMLIemplate:_Flasljnlv '1"f > l _ Detiect Flash VELSIOH Version:B .gmensions:Matdi Movie v Lidth:Height:' X ,, pixelsPlaybadc Eaused at start ; VJ Display menu u( ,;ooo Device fontQuality:l-ligh v il/ indow Mgde: l-l'l'MLalignmentz Default iv cale:VHorizontal:xenical: Flashalignment:lienter V Center VJ ' Show warning messagesPublish l l OK l CancelCONCLUSOComo pode ser visto nas pginas acima o Flash uma poderosssima ferramenta de criao multimdia.O objetivo do material foi ensinar as principais caractersticas do software como ferramenta de design e animao para web.O flash possui um recurso poderosssimo que dever estar sendocada vez mais explorado pelos novos recursos WEB disponiveis. 58