00201 - Flash 5

SumrioINTRODUO _________________________________ 3

TELA DE APRESENTAO __________________________________ 4BARRAS DE FERRAMENTAS _________________________________ 4PALCO (STAGE) _________________________________________ 5LINHA DE TEMPO _______________________________________ 5CAIXA DE FERRAMENTAS __________________________________ 6EDITAR CENA E EDITAR SMBOLOS __________________________ 7

UTILIZANDO AS FERRAMENTAS ________________ 7LINHA ________________________________________________ 7TEXTO ________________________________________________ 9OVAL E RETNGULO _____________________________________ 9LPIS E PINCEL _________________________________________11TINTEIRO _____________________________________________ 13BALDE DE TINTA _______________________________________ 13SOMBREADOR E APAGADOR _______________________________ 14MO E ZOOM _________________________________________ 14SETA ________________________________________________ 14LAO________________________________________________ 18

EDITANDO OBJETOS DO FLASH _______________ 19TRANSFORMAR_________________________________________ 20ORGANIZAR ___________________________________________ 22ALINHAR _____________________________________________ 22DESMEMBRAR _________________________________________ 23INFORMAES E TRANSFORMAR ____________________________ 23CORES _______________________________________________ 24

Celta InformticaTodos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro poder ser reproduzida total ou parcialmente, por qualquer processo, eletrnico, fotocpia, mecnico ou sistema de processamento de dados, sem prvia autorizao por escrito da Trisquel Informtica Ltda. (Celta Informtica).

Temos diversos ttulos, consulte nossa loja virtual em:

www.celtainformatica.com.brE-mail: [email protected]: (11) 4331-1586

CAMADAS ____________________________________ 28PROPRIEDADES_________________________________________ 30COLANDO OBJETOS ENTRE CAMADAS _______________________ 31

TRABALHANDO COM OBJETOS _______________ 33IMPORTANDO ARQUIVOS __________________________________ 36

ANIMAO ___________________________________ 40QUADROS-CHAVE_______________________________________ 40ANIMAO QUADRO A QUADRO ____________________________ 41ANIMAO COM INTERPOLAO ___________________________ 48CAMADA GUIA_________________________________________ 56INTERPOLAO DE FORMA ________________________________ 61

AVANANDO NO FLASH _______________________ 66CENAS _______________________________________________ 66IMPORTANDO SONS______________________________________ 68CLIPE DE FILME _______________________________________ 69BOTES ______________________________________________ 72INTERATIVIDADE _______________________________________ 74

PUBLICANDO _________________________________ 80

EXERCCIOS __________________________________ 82

Pgina: 3

Flash 5

Celta Informtica - F: (11) 4331-1586

INTRODUOO Flash uma tima ferramenta para Internet, porque inclui em um ni-co aplicativo, ferramentas para criar e animar imagens grficas, elemen-tos de interatividade e construir a pgina HTML que permitir a exibiodessas imagens na Internet e total interface de elementos no navegador.

O Flash trabalha com imagens vetoriais, ao invs de Bitmaps. No forma-to bitmap, os grficos so criados como se fossem pontilhados, ondecada ponto, ou bit, significa uma cor, que quando aumentado ou diminu-do, acaba fazendo o desenho perder a definio. J no formato vetorial,as imagens so lidas como linhas e arcos, que podem ser preenchidas eredimensionadas sem perder definio, pois toda vez que o tamanho daimagem alterado os clculos dos vetores so refeitos.

Alm de melhor definidas, as imagens em formato vetorial so mais le-ves, tornando o carregamento das pginas mais rpido, o que d umaenorme vantagem para o Flash, j que velocidade o que conta naInternet, e ningum ficar esperando muito tempo para um site ser car-regado.

Os filmes do Flash so grficos vetoriais compactos; assim, o download rpido e os filmes so rapidamente adaptados ao tamanho da tela dousurio.

O Flash muito utilizado para criar logotipos animados, controles denavegao, grandes animaes com som sincronizado e sites da Internetainda mais chamativos.

Pgina: 4

Flash 5


TELA DE APRESENTAO

Ao abrir o Flash, aparecer a janela abaixo.

BARRAS DE FERRAMENTAS

Principal

Pgina: 5

Flash 5


Controlador

PALCO (STAGE)

nesta rea que montamos os nossos desenhos no Flash, a rea deTrabalho do Programa. Voc pode dar a cor e tamanho que preferir paraele atravs do menu Modificar na opo Filme ou dando duplo-cliqueno nmero de quadros por segundo da Linha de tempo

LINHA DE TEMPO

atravs da Linha de tempo que controlamos as animaes. Ele divi-dida em camadas e quadros onde voc editar as animaes do Flash.

As camadas em que a Linha de tempo se divide, tem cada uma a suaparticularidade em relao s outras. A ordem das camadas a ordemde sua sobreposio, mais adiante entraremos com maiores detalhesem relao s camadas.

Pgina: 6

Flash 5


CAIXA DE FERRAMENTAS

Contm todas as ferramentas do Flash para desenhar e manipular objetos.

Na caixa de Opes encontramos os vrios modos de se trabalhar comalgumas ferramentas. Logo mais, trabalharemos com todas as ferramen-tas e suas opes.

Na caixa Cores temos os controles de Trao e Prenchimento que defi-nem como ser a pintura dos objetos criados com as ferramentas dedesenho e de pintura.

Pgina: 7

Flash 5


EDITAR CENA E EDITAR SMBOLOS

Este dois botes permitem navegar facilmente entre as diferentes cenase nos smbolos da Biblioteca.

UTILIZANDO AS FERRAMENTAS

Antes de comearmos a construir animaes no Flash, vamos utilizar asferramentas para criao de desenhos simples. Para isso daremos umexplicao de cada ferramenta.

LINHA

A funo da ferramenta linha relativamente simples, ela cria segmentosde linha reta, parecida com a ferramenta linha da maioria dos programas.

Pgina: 8

Flash 5


Definimos os atributos da linha atravs do painel Trao. Nele podemosescolher o estilo, cor e espessura da linha que vamos desenhar. Paraexibir o painel Trao, escolha no menu Janelas > Painis > Trao.

Faa desenhos utilizando linhas, com diferentes cores e estilos.

Pgina: 9

Flash 5


Apague o desenho pressionando as teclas Ctrl+A para selecionar todosos objetos e tecle Delete, ou selecione a ferramenta Seta (V), arraste-apelo palco criando uma rea de seleo e Delete.

TEXTO

Para adicionar um texto, basta selecionar a ferramenta Texto e clicar noPalco do Flash e digitar a mensagem que deseja na caixa de texto queaparecer, atravs dos painis Caracter, Pargrafo e Opes de Textomodificamos a aparncia do texto escrito.

OVAL E RETNGULO

Com a ferramenta Oval voc consegue desenhar crculos e elipses dequalquer largura e altura. Eles podem ser desenhados como contorno,como preenchimento, ou ambos.

A ferramenta Retngulo utilizada para desenhar retngulos e quadra-dos que podem ter seus cantos vivos ou arredondados.

Pgina: 10

Flash 5


Para desenhar uma dessas figuras, basta selecionar a ferramenta ade-quada na barra de ferramentas e arrastar o ponteiro do mouse sobre opalco.

Escolha as cores de preenchimento e trao na caixa cores da barra deferramentas, caso queira somente preenchimento ou somente trao,clique no boto Sem cor da mesma caixa cores para a opo seleciona-da - Cor do trao ou Cor do preenchimento.

Para desenhar retngulos com cantos arredondados, selecione a ferra-menta Retngulo e clique no boto Raio do Retngulo Arredondadoque est na caixa de opes da ferramenta, e digite o valor do raio.

Pgina: 11

Flash 5


LPIS E PINCEL

Com a ferramenta Lpis voc consegue desenhar linhas a mo livre,como se voc estivesse usando um lpis de verdade. Nas opes dolpis tem um boto chamado Formato do lpis, ele possui trs outrosbotes que permitem a voc alterar o modo como o Flash ir endireitaras linhas desenhadas.

Com Acertar voc desenha linhas retas e converte aproximaes. Esco-lha Suavizar para desenhar curvas suaves. E utilize Tinta quando noquiser aplicar nenhuma modificao.

Pgina: 12

Flash 5


A ferramenta Pincel utilizada para pintar desenhos e objetos a molivre podendo alterar a cor, formato da ponta do pincel e o tipo de pinturaque define o modo como o pincel ir se comportar em relao aos outrosobjetos desenhados no palco.

Os modos de pintura so:Normal - pinta sobre linhas e preenchimentos.Preenchimento - pinta somente preenchimentos e reas vazias.Atrs - pinta as reas vazias do palco.Seleo - pinta a rea previamente selecionada.Dentro - pinta o preenchimento onde iniciou-se o uso do pincel, deixan-do as linhas intactas.

A figura a seguir mostra o uso dos tipos de pincel: Normal, Prenchimento,Atrs, Seleo e Dentro, respectivamente.

Pgina: 13

Flash 5


TINTEIRO

Modifica a cor, estilo e espessura de um trao, que pode ser o contornode um objeto ou no, tendo as suas caractersticas determinadas nopainel Trao, visto anteriormente na ferramenta Linha.

Para modificar um trao, basta selecionar a ferramenta Tinteiro, esco-lher as novas propriedades (cor,estilo e espessura) do trao e clicar so-bre o objeto que ser modificado. Ou ento selecione vrios traos, cliqueno Tinteiro e modifique os atributos.

Use a ferramenta Tinteiro para alterar os atributos de vrios objetos aomesmo tempo ao invs de selecionar linhas individuais.

BALDE DE TINTA

O Balde de Tinta preenche reas fechadas ou no com uma cores slidas,gradiente ou bitmaps. Ela pode preencher com outra cor reas j pintadasou reas vazias. Para preencher reas no totalmente fechadas, escolhaum dos Tamanhos de Lacuna disponveis na caixa opes.

Pgina: 14

Flash 5


SOMBREADOR E APAGADOR

A ferramenta Sombreador copia atributos preenchimentos e traos deobjetos par serem aplicados imediatamente em outros.

A ferramenta Apagador apaga um objeto inteiro ou parte dele, de acor-do com o modificador Formato de borracha selecionado e podemosalterar tambm o seu tamanho. Para remover segmentos de trao oupreenchimentos clique no modificador Torneira.

MO E ZOOM

A ferramenta Mo permite a voc arrastar a janela, possibilitando al-canar outras partes da imagem, sendo muito til quando a imagemest ampliada, tambm no possui modificador.

Com a Zoom possvel aumentar ou reduzir a visualizao da rea detrabalho, nas opes da ferramenta aparecem o botes Aumentar eReduzir.

SETA

A ferramenta Seta usada para selecionar, mover e modificar os obje-tos, o modificador desta ferramenta possui cinco opes: Encaixar, Sua-vizar, Acertar, Redimensionar e Girar.

Pgina: 15

Flash 5


Dimensionando um retngulo:

Separando o preenchimento do contorno de um retngulo:

Com a ferramenta seta voc consegue alterar os cantos e as curvas deuma forma, distorcendo o desenho para o formato que quiser.

Pgina: 16

Flash 5


Trabalhando com a seta

Pgina: 17

Flash 5


Pgina: 18

Flash 5


LAO

Esta ferramenta seleciona reas irregulares no palco envolvendo um oumais objetos, o modificador apresenta dois modos de operao: VarinhaMgica e Tipo de Polgono. Clique no modificador Tipo de Polgono quandodesejar criar uma seleo com bordas retas.

Voc pode apagar, alterar o tamanho, girar, mover e moldar os objetosda rea selecionada.

Pgina: 19

Flash 5


Com o modificador Vara Mgica usado para alterar o preenchimentodas reas selecionadas de um bitmap.

EDITANDO OBJETOS DO FLASH

Agora vamos tratar da manipulao dos objetos do Flash, como alterarcontorno, cores, agrupamento, transformao e alinhamento.

A maioria das alteraes requer que voc selecione o objeto ou parte dele.

O Flash permite que voc selecione linhas, preenchimentos ou gruposde objetos. Para agrupar objetos, basta seleciona-los e ir no menu Modi-ficar e na opo Agrupar.

Os objetos no Flash podem ser formas livres ou smbolos, as formas livresso desenhos compostos por uma linha e por um preenchimento, j ossmbolos so normalmente mais complexos, formados por agrupamentode imagens. H trs tipos de smbolos: Grfico, Boto e Clipe de Vdeo.

Para selecionar mais de um objeto, voc tem que clicar nos objetos com atecla pressionada, para selecionar todos os objetos voc pode irno menu Editar, na opo Selecionar tudo ou simplesmente +, para deselecionar basta clicar numa rea sem nenhum objeto.

Para selecionar um segmento de linha d um nico clique sobre ela;selecione todo o contorno de uma forma com um duplo-clique sobre alinha da forma; para selecionar o preenchimento de uma forma, d umnico clique sobre o preenchimento; toda a forma e o seu contorno, dum duplo-clique sobre o preenchimento.

Pgina: 20

Flash 5


Para selecionar objetos dentro de uma rea retangular, basta englobarestes objetos com um retngulo de seleo que aparece quando vocclica fora de um objeto e segura o boto do mouse, mas se preferir sele-cionar a mo livre, basta utilizar a ferramenta Lao.

Todos os tipos de objetos podem ser apagados, movidos ou copiados doPalco.

Para mover um objeto basta selecion-lo e arrast-lo para a nova posi-o, se a tecla < S h i f t > for pressionada enquanto o objeto removido,o Flash permitir que o objeto se desloque apenas em um eixo - verticalou horizontal.

Para duplicar o objeto basta dar < C t r l > + < D > com o objeto selecio-nado, se preferir voc pode duplic-lo segurando a tecla < C t r l > en-quanto move o objeto de lugar, que ser removida apenas uma cpia.

Para apagar o objeto basta selecion-lo e em seguida apertar a tecla< D e l e t e > .

TRANSFORMAR

Atravs do menu Modificar, opo Transformar, voc pode Girar, In-clinar, Redimensionar e Espelhar um desenho, basta que o desenhoesteja selecionado. Se preferir voc pode utilizar o modificador da ferra-menta Seta.

Pgina: 21

Flash 5


Pgina: 22

Flash 5


ORGANIZAR

Para mudar a ordem dos objetos em um Quadro, (definiremos o que Quadro mais a frente) basta selecionar um ou mais objetos e ir e naopo Organizar do menu Modificar e escolher em qual posio vocquer colocar o seu objeto, mais frente mis atrs de outros, ou bloque-lo. Para que uma forma possa ser mandada para trs, ela primeiro temque ser agrupada para que o contorno e o preenchimento se juntem emum s objeto.

ALINHAR

Para arrumar os objetos no Palco de forma correta, o Flash oferece aopo de alinhar todos eles, basta ir at o painel Alinhar e escolher suasopes de alinhamento.

Pgina: 23

Flash 5


O objeto pode ser alinhado horizontalmente pela direita, pelo centro oupela esquerda, ou verticalmente pelo topo, pelo centro ou pela base,utilizando o ltimo objeto selecionado ou o Palco (alinhar pela pgina)como base deste alinhamento. Atravs desta caixa de dilogo, voc tam-bm consegue Distribuir e Redimensionar os objetos selecionados.

DESMEMBRAR

Esta opo permite que voc desagrupe objetos agrupados, tranformesmbolos em objetos de forma livre, s no transforma forma livre, que jesto separados em linha e preenchimento.

INFORMAES E TRANSFORMAR

Estes painis nos permite transformar qualquer objeto utilizando valoresmatemticos precisos ao invs de ser desenhado mo livre. Para abri-los v ao menu Janela >> Paineis. Utilize estes paineis sempre quevoc quiser dar um tamanho ou posio para o objeto sendo que X indi-ca a posio na horizontal e Y na vertical, essa posio tem como baseo canto superior esquerdo da pgina. O L se refere a largura do objeto eo H a altura, a unidade de medida normalmente o pixel, mais vocpode alterar para outra unidade no menu Modificar, opo Filme.

Pgina: 24

Flash 5


CORES

Para criar ou alterar uma cor voc ter que abrir os painis Misturador eAmostras.

Se a cor de preenchimento que voc deseja criar for Gradiente. V at opainel Gradiente, escolha o tipo e edite.

Caso deseje modificar o gradiente ainda mais, voc poder utilizar oboto Transformar Preenchimento do modificador da ferramenta Bal-de de Tinta.

Pgina: 25

Flash 5


Exemplo 1 Barco.fla

Agora vamos fazer um desenho de um barco utilizando ao mximo asfunes do Flash aprendidas at agora.

1. Altere o tamanho do Palco para 400 x 300 pixels.

2. Desenhe um retngulo com preenchimento amarelo e trao preto comaltura de 2 pontos. D a esse retngulo um tamanho de 230 x 115pixels, utilize o painel informaes sempre que quiser dar um tama-nho ou uma posio precisos para o objeto.

3. Mova o canto superior direito do retngulo para o lado direito, comomostra a figura a seguir.

Pgina: 26

Flash 5


4. Altere o tamanho do desenho para 150 x 40 pixels.

5. Duplique o desenho (Ctrl+D) e inverta horizontalmente a cpia, atra-vs do menu Modificar >> Transformar >> Inverter Horizontalmente.

6. Una as duas figuras e apague a linha do meio do objeto. Utilize aferramenta Zoom para fazer uma unio perfeita entre elas.

7. Duplique o casco do barco e transforme a parte duplicada em umtringulo, conforme os quatro passos a seguir.

Pgina: 27

Flash 5


8. Para endireitar o lado do tringulo que apresenta um vrtice, selecionea ferramenta Caneta (P). Esta ferramenta ir eliminar o ponto que for-ma o vrtice. D trs cliques sobre o vrtice para selecionar os seg-mentos, ajustar as extremidades e endireitar a reta, respectivamente.

9. Altere o tamanho do casco do barco para 270x40 e do tringulo para150x130.

10. Faa um retngulo de 6 x 165 pixels com cantos arredondados em 5pontos, ele ser o mastro do nosso barco.

11. A partir dos elementos construdos, faa a seguinte figura:

Pgina: 28

Flash 5


12. Transforme as linhas da vela e do barco para que elas fiquem maiscurvadas.

13. O barco ficar da seguinte forma:

14. Salve o arquivo como Barco.fla.

CAMADAS

Os objetos no Flash, alm de serem colocados na posio que vocdeseja no Palco, podem tambm ser empilhados ou divididos em cama-das, de forma que o que voc faz em uma camada no altere a outra.

As camadas criadas no Flash nos ajudam a controlar este empilhamentode objetos, se os objetos pertencerem a camadas diferentes, eles esta-ro impedidos de interagirem entre si sem que voc deseje.

Na barco por exemplo, poderamos criar camadas para o barco, o mar, ocu e outra para uma gaivota voando neste cu, a diviso em camadaspermite movimentar a gaivota sem alterar as outras camadas.

Para podermos aprender melhor sobre as camadas, vamos entendermelhor o funcionamento da Linha do Tempo, ferramenta fundamentalpara criao e manipulao destas camadas.

Pgina: 29

Flash 5


As camadas so empilhadas horizontalmente na Linha de Tempo, a ca-mada na parte inferior do Palco normalmente utilizada como fundo daanimao e a primeira camada que a de primeiro plano no Palco, fican-do sobre todas as outras.

As camadas do Flash oferecem vrios recursos de manipulao que faci-litam o nosso trabalho; a opo Bloquear camada evita que voc editeacidentalmente uma camada, ou Ocultar uma camada que voc no queiraver, Camadas guia ajudam no posicionamento dos objetos e a Camadamascarada permite alguns efeitos de aparecer e revelar outras camadas.

Para inserir uma camada voc primeiro deve selecionar uma camada naLinha de Tempo, no menu Inserir opo Camada ou se preferir cliqueno boto adicionar camada da Linha de Tempo, a nova camada sercolocada acima da camada selecionada e com um nome padro baseiadono nmero de camadas j criadas, por exemplo: Camada 4, Camada 5,e assim por diante. Voc tambm pode inserir uma camada atravs domenu rpido, com o boto direito do mouse sobre a camada e depoisclicar na opo Inserir camada.

Pgina: 30

Flash 5


Para excluir uma camada basta selecion-la e clicar no boto Excluir ca-mada da Linha de Tempo, se preferir voc pode excluir via menu rpido,clicando com boto direito em cima da camada que voc quer excluir.

Para Renomear uma camada, voc pode dar duplo-clique no nome dacamada e depois digitar o novo nome.

PROPRIEDADES

Tambm podemos alterar as propriedades da camada. Elas so padresque definem a aparncia e a funo da camada. Para serem acessadasbasta clicar com o boto direito em cima da camada e escolher a opoPropriedades..., se preferir pelo menu Modificar escolha a opo Ca-mada. Pelas propriedades voc pode atribuir um nome para a camada,ocultar ou mostrar, bloquear uma camada ou visualizar na forma decontornos, apesar destas trs opes j estarem na Linha de Tempomais acessveis na forma de boto.

Pgina: 31

Flash 5


COLANDO OBJETOS ENTRE CAMADAS

Para fazer cpias de objetos na mesma camada, como j vimos, bastamover o objeto a ser copiado enquanto pressiona a tecla C t r l , agoraveremos como copiar objetos entre camadas.

Esta opo funciona exatamente como em qualquer outro programa,primeiro selecione o objeto ou a parte dele que deseja copiar, depois s utilizar um dos seguintes mtodos: menu Editar > Copiar, clique noBoto Copiar ( ) da Barra de Ferramentas ou pressionando as teclasC t r l + C d o t e c l a d o .

Para colar o objeto em outra camada, basta selecionar a camada onde acpia do objeto ser colocada e colar atravs do menu Editar > Colar,clique no Boto Colar ( ),ou pressionando as teclas C t r l + V .

Quando voc cola um objeto, ele colocado automaticamente no centrodo Palco, se voc quiser que ele aparea nesta nova camada exatamen-te na mesma posio, escolha a opo Colar no Local do menu Editarno momento de colar o objeto.

Exemplo 2 Camadas.fla

1. Em um novo arquivo, d ao Palco o tamanho de 400 x 300 pixels.2. Insira mais trs camadas neste arquivo.3. Na Camada 1 faa uma elipse com 110 pixels de largura por 50 de

altura, com, preenchimento e contorno igual figura.

4. Na Camada 2 faa um retngulo de 110x150 pixels, com preenchi-mento e contorno igual a elipse.

Pgina: 32

Flash 5


5. Na Camada 3 copie a elipse da camada 1.6. Na Camada 4 faa faa um corao a partir de quatro retas, de tal

modo que ele caiba dentro do retngulo da camada 2. Terminado,aplique uma cor de preenchimento.

7. Agora renomeie e altere a ordem das camadas, de acordo com osmodelos:

8. Mova as figuras para elas formarem um cilindro decorado. Exclua ocontorno inferior do retngulo, dando mais realismo pea.

Pgina: 33

Flash 5


TRABALHANDO COM OBJETOS

At o momento ns vimos como desenhar no Flash, agora vamos traba-lhar com desenhos j feitos no prprio Flash ou em outros programas.

O Flash oferece um espao que armazena os desenhos, para que possa-mos utiliz-los vrias vezes no mesmo filme ou em vrios outros filmes,este espao chama-se Biblioteca.

Cada arquivo do Flash tem a sua prpria Biblioteca, nela voc podearmazenar textos, sons, objetos grficos, animaes, botes e imagensbitmap ou vetoriais. Os itens armazenados na biblioteca so chamadosde Smbolos.

A utilizar um Smbolo, estamos na verdade utilizando uma Instncia des-te Smbolo. A Instncia representa o Smbolo na animao e quandoexistem vrias instncias do mesmo smbolo, o espao em bytes ocupa-do no arquivo ser do tamanho do Smbolo, independente do nmero deinstncias utilizadas.

Instncia como um clone do smbolo, e ser alterada sempre que oSmbolo original sofrer alguma modificao. Os Smbolos so comoum personagem de um filme ou desenho, apesar de aparecer em vriascenas, ele representa a mesma pessoa.

Pgina: 34

Flash 5


Se voc quiser que uma Instncia transforme-se em um objeto inde-pendente, basta utilizar a opo Desmembrar do menu Modificar.

Para criar um Smbolo, primeiro selecione o objeto que voc desejatransformar em smbolo, e no menu Inserir >> Converter em Smbolo,aparecer uma caixa de Dilogo Propriedades do Smbolo, onde sodefinidos o nome do smbolo e o comportamento desejado para ele.

Os smbolos da biblioteca tanto podem ser objetos complexos e anima-dos como formas simples. H trs tipos de comportamentos de smbolo:Clipe de Filme, Boto e Grfico.

Para a Biblioteca ser visualizada, clique no menu Janela >> Bibliotecaou pressione as teclas C t r l + L . E para abrir o biblioteca de outro arqui-vo do Flash voc utiliza o menu Arquivo >> Abrir como Biblioteca...

Pgina: 35

Flash 5


Caso deseje criar diretamente um smbolo ao invs de transformar umobjeto j existente, basta ir no menu Inserir >> Novo Smbolo, definirum nome e comportamento para este novo smbolo e desenh-lo na telaem branco aberta pelo Flash. Para voc saber se est no filme principalou editando o smbolo, basta olhar no canto superior esquerdo da janelae observar o nome do smbolo que voc est editando, se quiser voltarpara o filme principal basta clicar na Cena que voc pretende ir.

Se voc clicar com boto direito sobre o nome da smbolo da bibliotecade smbolos, surgir vrias opes um menu rpido com algumas op-es que alteram o smbolo.

O smbolo pode ser renomeado, duplicado, apagado e at atualizado, jque qualquer desenho colado no Flash, automaticamente se transformaem um smbolo.

O Flash fornece vrios exemplos de Grfi-cos, Sons, Clipes de filme e Botes. Paraacess-los basta ir ao menu Janela >> Bi-bliotecas Comuns, escolher o tipo deseja-do e arrast-lo para o palco.

Escolha alguns exemplo e arraste-os para oPalco do Flash, alguns esto divididos empastas que se abrem com o duplo-clique so-bre elas. Os exemplos de animao ainda voficar estticos quando voc arrast-los parao Palco, mais isso ser por pouco tempo,daqui alguns tpicos, j estaremos animan-do estes e outros exemplos, mais se vocquiser ter uma prvia de como ser a anima-o ou o som, clique no boto Play que apa-rece na rea de visualizao do item.

Pgina: 36

Flash 5


IMPORTANDO ARQUIVOS

At agora s utilizamos o prprio Flash para criar desenhos, agora vere-mos como importar arquivos de outro programas para serem utilizadosno Flash.

Com o Flash voc pode importar tanto arquivos em formato Bitmap comoVetorial, mais nem todos os recursos originais destes arquivos so fiel-mente traduzidos por ele.

Voc pode importar os arquivos no Flash tanto pela rea de transfern-cia quanto pelo comando Importar do menu Arquivo.

Para importar uma imagem para o Flash voc pode ir ao menu Arquivo>> Importar ou se preferir C t r l + R , na janela importar, procure peloarquivo desejado.

Importe o arquivo C:\WINDOWS\Bolhas.bmp. E observe que a figura colocada no Palco e automaticamente virou um smbolo da bibliotecadeste filme. Caso o arquivo original seja alterado e mantido o mesmonome, utilize o comando Atualizar da biblioteca para modificara a figuraimportada.

Pgina: 37

Flash 5


Se preferir, voc pode usar a rea de transferncia para colar uma ima-gem vetorial ou bitmap. Pelo menu Editar >> Colar voc traz um dese-nho da rea de transferncia para o seu trabalho, se preferir use a opoColar Especial onde possvel escolher um formato diferente para aimagem a ser colada.

Os imagens do tipo BITMAP importadas para o Flash podem servir tam-bm como preenchimento de formas, para isso basta voc Desmembrara imagem pelo menu Modificar e depois copiar o preenchimento com oa ferramenta Seleciona Cor, fazendo isso a cor ficar copiada e qual-quer desenho que voc faa ou pinte com o Balde de Tinta ter comesse preenchimento.

Exemplo 3 Vero.fla

1. Altere tamanho do Palco para 600 x 250 pixels.2. Crie trs mais camadas.3. D os seguintes nomes para as camadas: Cu, Mar, Barco e Avio,

sendo que a camada Cu ser a camada de fundo seguida pela Ca-mada Mar.

Pgina: 38

Flash 5


4. Selecione a camada do fundo e importe a imagem Nuvens.bmp.5. Redimensione a figura para ela ter o mesmo tamanho do Palco e na

posio 0,0.6. Bloqueie a camada Cu.7. Na camada Mar faa um retngulo de 600 x 50, com preenchimento

em gradiente de azul claro para o escuro sem contorno.8. Alinhe este retngulo pela base e centro da pgina.

9. Bloqueie a Camada Mar.10. Abra o arquivo Barco.fla gravado anteriormente exerccio.11. Selecione todo o barco (Ctrl+A) e converta-o em smbolo (F8) com o

nome barco.12. Feche o arquivo Barco.fla salvando as alteraes.

Pgina: 39

Flash 5


13. Selecione a camada Barco.14. Abra o arquivo Barco.fla como biblioteca.

15. Arraste o barco da biblioteca para o Palco de forma que ele fiquesobre a camada Mar.

16. Selecione a camada Avio. E arraste para o palco o clipe de filmeBiplane, atravs do menu Janela >> Bibliotecas Comuns >> Clipesde Filmes.

17. Altere o tamanho do avio para 110 x 50.

18. Salve o filme como Vero.fla

Pgina: 40

Flash 5


ANIMAOO efeito da animao criado quando um objeto se move ou modifica-do ao longo do tempo. No Flash, como num filme tradicional, este efeito criado guando so realizadas modificaes no objeto quadro a quadro.

As animaes em Flash podem ser desenvolvidas de duas maneiras:animao quadro a quadro e animao interpolada. Na animao qua-dro a quadro, o contedo do palco modificado em cada quadro dofilme. Na animao intepolada, cria-se o quadro inicial e final e o Flashse encarrega de criar os quadros intermedirios.

QUADROS-CHAVE

A Linha de Tempo alm de mostrar a diviso das camadas, exibe tam-bm a diviso de quadros. Ela representa a seqncia dos quadros daanimao para todas as camadas.

O quadro-chave o quadro que contm as modificaes da animao.Na animao quadro-a-quadro, todo quadro um quadro-chave, j naanimao por interpolao estes quadros so colocados em pontos im-portantes do filme.

Voc pode inserir quadros-chave e quadros-chave em branco no seufilme, para as duas opes basta selecionar o quadro vazio onde vocqueira inserir estes quadros, e no menu Inserir, escolha se deseja inse-rir um Quadro, um Quadro-chave, um Quadro-chave em branco,Excluir Quadro ou Limpar Quadro-chave.

Pgina: 41

Flash 5


ANIMAO QUADRO A QUADRO

A primeiro forma de animao que vamos utilizar a animao quadro aquadro, est forma semelhante ao processo de criao utilizado pelosdesenhos animados, so criadas diversos quadros seqenciais, que emalta velocidade, mostram determinada ao.

Vamos iniciar criando uma animao quadro-a-quadro bem simples.

Exemplo 4 Elstico.fla

1. Vamos fazer um exemplo da utilizao de quadros, quadros-chave equadros em branco, para isso vamos criar um novo arquivo. O palcoter o tamanho de 300 x 200, com duas camadas - a segunda usare-mos mais tarde. Coloque os nomes de elstico e pedra nestas ca-madas.

2. Na Linha de Tempo, clique com o boto direito sobre o quadro 10 dacamada elstico e escolha a opo Inserir Quadro. Este comandoinsere no filme uma srie de quadros vazios desde o incio.

3. Repare que a Reproduo est sobre o quadro 10, clique com o mousesobre ela e mova at o primeiro quadro.

Pgina: 42

Flash 5


4. Selecione a ferramenta Linha (N) e faa uma linha vertical no palco,ocupando quase toda sua altura. Note que na Linha de Tempo temosum ponto preto no primeiro quadro, este ponto indica que este quadro um quadro-chave e que h algo desenhado nele. No quadro 10 apa-rece uma indicao de final de seqncia, chamada ala, que poderser arrastada para aumentar ou diminuir a quantidade de quadros.

5. Mova a Reproduo com o ponteiro do mouse para a direita e esquer-da, e repare que nada aconteceu com a linha. Deixe a Reproduoposicionada no quadro 2.

6. Insira neste quadro um quadro-chave. Clique com o boto direitosobre e ele e selecione a opo Inserir Quadros-chave.

7. Transforme a linha em um pequeno arco. Agora mova a Reproduoentre todos quadros, e veja que a figura s se modifica entre o 1 e 2,sendo os outros quadros iguais ao 2. Isto acontece porque todos osquadros aps um quadro-chave so iguais a ele.

Pgina: 43

Flash 5


8. Mova a Reproduo para o quadro 3 e pressione F6 par inserir umquadro-chave, e no palco aumente o arco. V para o quadro seguintee faa o mesmo at o quadro 10.

9. Mova a Reproduo com as teclas < e > (menor e maior) do teclado.Para reproduzir automaticamente, pressione a tecla Enter.

10. Salve com o nome de Elstico.fla.

Exemplo 5 Vero Animado.fla

1. Abra o arquivo Vero.fla2. Adicione no quadros at o quadro 40 de todas as camadas. Arraste o

ponteiro do mouse para selecionar todos os quadros ao mesmo tem-po e com o boto direito escolha Inserir Quadro.

Pgina: 44

Flash 5


3. Selecione a camada Avio e no quadro 3 adicione um quadro-chave emude o avio de posio. Adicione mais quadros-chave de dois emdois at o final e a cada quadro, mude a posio do avio.

4. Faa o mesmo para o barco. Movimentando ele sobre o mar. Casoqueira um movimento linear, segure a tecla enquanto o movi-menta com o mouse.

5. Visualize animao no Flash Player atravs do menu Arquivo >>Visualizar Publicao.

6. Note que a hlice do avio est se movendo, isto ocorre porque nspegamos o avio da biblioteca de grficos animados.

7. A avio est passando na frente do barco, isto porque ele est nacamada de primeiro plano, faa o barco ficar na frente. Clique nonome da camada Barco e arraste para cima.

Pgina: 45

Flash 5


8. Salve como Vero Animado.fla.

Papel de Transparncia

Utilizando o recurso chamado Papel de Transparncia podemos ver osquadros anteriores e posteriores ao quadro atualmente selecionado comose estivssemos utilizando vrias folhas transparentes umas sobre asoutras.

Na Linha de Tempo podemos ver trs botes que controlam a transpa-rncia. So eles:

Papel de Transparncia - Faz com que os quadros prximos ao quadroativo aparecem na tela com uma cor mais fraca.Estruturas Seqnciais - Mostra somente os contornos das imagensnos outros quadros.

Pgina: 46

Flash 5


Editar Vrios Quadros - Permite a edio de vrios quadros ao mesmotempo.

A quantidade de quadros mostrados antes ou depois, durante o uso doPapel de Tranparncia, depende da posio dos marcadores de trans-parncia. Arraste as alas Iniciar e Terminar para aumentar ou diminuir onmero de quadros exibidos no Papel de Transparncia. Todos os qua-dros que estiverem dentro da faixa definida pelas duas alas sero exibi-dos e editados ao mesmo tempo caso o boto Editar Vrios Quadrosesteja selecionado.

Abra o arquivo Elstico.fla e observe vrios quadros ao mesmo tempoutilizando o Papel de Transparncia.

Pgina: 47

Flash 5


Exemplo 6 Rato.fla

1. Abra um novo filme e modifique para 8 quadros por segundo e tama-nho 160px x 180px.

2. Em Bibliotecas comuns, escolha Grficos e insira no filme a figura dorato.

3. Desmembre e desagrupe todos os objetos, para permitir a edio dosolhos e do rabo do rato.

4. Clique com o boto direito sobre o quadro 7 e insira mais quadros.5. Mova o Reproduo para o quadro 2 e insira um quadro-chave (F6).

Se voc der um clique no quadro 2, toda a figura ser selecionada,para evitar isso, apenas posicione o Reproduo.

6. Amplie a regio do rabo.

Pgina: 48

Flash 5


7. Ative o Papel de Transparncia e mova a ponta do rabo, estando noquadro 2.

8. Mova o Reproduo para o quadro 3 e insira mais um quadro-chave.9. Mude a posio da ponta do rabo mais uma vez.10. Continue com o mesmo processo at o quadro 7.

11. Adicione mais quadros ao filme e faa o rabo retornar posio inicial.12. Alm da animao de movimento, podemos tambm alterar a cor dos

objetos durante o filme.13. V at o quadro 3, selecione os olhos e mude sua cor. Mude a cor

tambm no quadro 4, para no gerar uma piscada muito rpida.14. Salve o filme e visualize a publicao.

ANIMAO COM INTERPOLAO

H duas grandes desvantagens na animao quadro a quadro: ela muito trabalhosa e deixa o arquivo grande demais.

O Flash tem uma funo que resolve os dois problemas, esta soluo a Interpolao. Interpolar quer dizer alternar, voc fornece apenas osobjetos inicial e final de uma seqncia colocando os objetos em qua-dros-chave que o Flash completar o caminho do primeiro ao segundo.

H dois tipos de interpolao: Interpolao de Movimento e Interpolaode Forma.

No painel Quadro, menu Janela > Painis > Quadro, na lista Interpol.escolhemos o tipo de Interpolao utilizada, se de forma, de movimentoou nenhuma. Este painel pode ser visto tambm dando-se um cliquecom o boto direito no quadro e escolhendo Painis > Quadros.

Pgina: 49

Flash 5


Interpolao de Movimento

Para criar uma interpolao de movimento no filme, clique com o botodireito em um dos quadros pertencentes a uma seqncia e escolha aopo Criar Interpolao Movimento, ou via menu Inserir > CriarInterpolao de Movimento.

Quando uma seqncia de quadros tem interpolao de movimento elafica azul claro e representada por uma linha pontilhada caso estejaincompleta, ou seja, sem um quadro-chave em seu final, ou por umaseta cheia caso esteja completa.

Pgina: 50

Flash 5


Para efetuar alguma mudana na Interpolao de Movimento, basta irao painel Quadro e alterar sua propriedades.

Dim. Se ativo, a interpolao far as mudanas nas dimenses doobjeto durante a animao. Desde que no quadro-chave final exista umamodificao na dimenso do objeto.Girar Gira o objeto durante a interpolao no sentido escolhido. A op-o Auto gira o objeto uma vez na direo que requer menor movimento.As opes Sentido Horrio e Sentido Anti-horrio giram o objeto confor-me indicado e permitem especificar o nmerode rotaes.Atenuao Ajusta a acelerao e desacelerao do movimento, se onmero for maior que zero, o movimento ser mais rpido no incio elento no final e se for menor que zero, mais lento no comeo e rpido nofinal.Orientar trajetria Muda a orientao do objeto durante a trajetriaSincronizar - Certifica se as instncias do objeto vo se repetir devida-mente.Encaixar Ativa o caminho desenhado para a movimentao do objeto.

Pgina: 51

Flash 5


Vamos fazer alguns exemplos utilizando a interpolao de Movimento.

Exemplo 7 Voando.fla

1. Abra o arquivo Vero.fla.2. Exclua a camada Barco.3. Remova todos os quadros-chave selecionando o quadro e atravs do

menu Inserir > Limpar Quadro-Chave ou pressione Shift+F6. E dei-xe apenas o quadro inicial do filme.

4. Mova o avio para X = -120 e Y = 20.5. Insira quadros at a posio 85 em todas camadas.6. Adicione interpolao de Movimento na camada Avio. Os quadros

ficam pontilhados, mostrando que no houve movimento e ainterpolao est incompleta.

7. Mova o Reproduo para o ltimo quadro e arraste o avio para olado direto do palco. Note que ao soltar o boto do mouse, o Flashcria um quadro-chave na posio 85, informando que houve umamudana no objeto.

Pgina: 52

Flash 5


8. Visualize a animao e altere a velocidade de quadros por segundo.9. Vamos modificar o movimento do avio para que ele caia na gua.

Primeiro insira um quadro-chave na posio 40.10. V at o quadro 85 e mova o avio para cima da gua e gire-o 90o no

sentido horrio. Verifique se no painel Quadro a opo Girar = Auto.11. Mova a camada Mar para cima da camada Avio.12. Visualize a animao.

13. Salve o exemplo como Voando.fla

Pgina: 53

Flash 5


Exemplo 8 Esferas.fla

1. Em um novo arquivo, mude a cor do palco para um verde bem claro eo tamanho para 300x200 e desenhe um crculo de 20x20 na posioX=20 e Y=20, com um gradiente radial para dar impresso de esfera.

2. Adicione quadros at a posio 10 e mova a esfera para 20,150 nestequadro.

3. No quadro 20 mova para 90,60.4. No quadro 30 mova para 250,150.5. No quadro 40 mova para a posio inicial.6. Teste a animao no seu navegador.7. Insira mais duas camadas com outras duas esferas, e faa com que

as trs fiquem se batendo e rebatendo pelo palco.

8. Salve o arquivo com o nome de Esferas.fla

Pgina: 54

Flash 5


Exemplo 9 Girar.fla

1. Vamos construir um filme com dois objetos girando um dentro dooutro.

2. Inicie construindo um crculo e um quadrado, com corescontrastantes e em camadas diferentes, conforme o esquemaabaixo.

3. Selecione os dois objetos e alinhe-os pelo centro verticalmente ehorizontalmente.

4. Verifique se a opo Encaixar em Objetos do menu Exibir estativa.

5. Selecione a ferramenta Subselecionar (A) e modifique o crculo de talforma que as suas tangentes encostem nos vrtices do quadrado.

6. Faa um pequeno crculo em uma das pontas do crculo modificado.7. Modifique o retngulo para ficar semelhante a uma oval com cantos

vivos.8. Acrescente quadros at a posio 30 e crie interpolao de movimen-

to nas duas camadas.

Pgina: 55

Flash 5


9. Posicione o Reproduo no quadro 30 e pressione o boto do mousesobre o retngulo at que aparea um quadro-chave nesta posio.Faa o mesmo para o crculo.

10. Abra o painel Quadro e nele defina as rotaes para os dois objetos.Digite tambm um Rtulo para cada uma das interpolaes.

11. Note que o Rtulo das interpolaes aparece escrito na Linha deTempo.

12. Visualize e salve o filme como Girar.fla.

Pgina: 56

Flash 5


Camada Guia

Quando aprendemos sobre camadas, vimos que existe uma camadachamada Camada Guia. Ela utilizada para guiar objetos que possueminterpolao de movimento, guiando-os atravs de uma rota definida porlinhas desenhadas nesta camada.

No prximo exemplo faremos com que um avio siga um caminhopreestabalecido, utilizando uma camada guia.

Exemplo 10 - Caminho.fla

1. Abra um novo arquivo e insira quadros at a posio 80.2. Importe da biblioteca o clipe de filme do avio, colocando-o no canto

superior direito do palco e com um tamanho bem pequeno.3. Clique no boto Adicionar Camada Guia na Linha de Tempo para

adicionar uma camada de ter o desenho do caminho que o aviopercorrer.

Pgina: 57

Flash 5


4. Faa um desenho na camada guia com a ferramenta Caneta seme-lhante ao da figura abaixo, com todos os segmentos sendo segmen-tos de curva.

5. Encaixe o avio neste caminho. Verifique se a opo Encaixar emObjetos est ativa.

6. Crie uma interpolao de movimento para a camada avio.7. V at a posio 20 e arraste o avio at o final da linha superior.8. Na posio 40 desloque o avio para o canto inferior esquerdo, de-

pois em 60 no canto inferior direito e na 80 para a posio inicial. Como avio sempre encaixado na linha guia.

9. Visualize o filme e repare como o avio se comporta diferente do es-perado para esse tipo de caminho. Se a opo Orientar trajetriado painel Quadro estiver marcada, o avio ter um giro catico duran-te seu trajeto porque este comando manda seguir a trajetria, pormno indica que lado o objeto deve girar.

10. Antes de corrigir a rotao, aumente a curvatura do caminho utilizan-do a ferramenta Subselecionar.

Pgina: 58

Flash 5


11. Verifique se no painel Quadro a opo Girar=Auto.12. Nos quadros 40 e 60 gire o avio para ficar de cabea para baixo,

paralelo rota.13. Visualize novamente o filme e salve-o como Caminho.fla.

Pgina: 59

Flash 5


Exemplo 11 Bola.fla

1. Abra o filme Elstico.fla.2. Desenhe uma bola com trs cores em sua camada.3. Adicione mais uma camada e desenhe nela uma espcie de rampa

com a ferramenta caneta e modificando posteriormente.

4. Agora vamos criar o movimento de volta do elstico. Insira quadrosat a posio 15 para todas as camadas.

5. Crie um quadro-chave nesta posio para a camada elstico e modi-fique o elstico de forma a ficar reto.

6. Acrescente uma interpolao de Forma para este objeto. Observe afigura.

7. Adicione um quadro-chave na posio 15 para a camada bola.

Pgina: 60

Flash 5


8. Insira quadros at a posio 40 para todas as camadas.9. Crie uma interpolao de movimento para a bola entre as posies 15

e 40.10. V para a posio 25 e movimente a bola at o incio da rampa,

criando um quadro-chave nessa posio.

11. Adicione uma camada guia que controle a bola. Crie um quadro-cheve na posio 25 e desenhe nela uma curva paralela rampa ata posio 35. Para eliminar os quadros posteriores ao 35, basta inse-rir um quadro-chave em branco na posio 36.

12. No quadro 35, mova e gire a bola at o final da rampa.

13. Na posio 40, mova a bola para cima e a partir da crie um caminhopara a bola retornar ao incio.

14. Execute e salve seu filme.

Pgina: 61

Flash 5


Interpolao de Forma

Neste tipo de Interpolao voc tambm tem que definir o incio e o fimda animao atravs de quadros-chave.

Na interpolao de forma voc consegue alterar as propriedades dosobjetos, desde que no sejam smbolos e nem estarem agrupados.

Com a interpolao de forma voc consegue tambm dar a impressode movimento, como faremos no prximo exemplo.

Dar a impresso de movimento no a principal caracterstica deste tipode animao, e sim transformar um objeto em outro.

Pgina: 62

Flash 5


No painel Quadro temos as seguintes opes para a Interpolao deForma.

Mistura Voc escolhe Distributiva quando os desenhos inicial e finalso mais suaves e curvados e Angular quando possuem mais cantos elinhas retas.

Atenuao Ajusta a acelerao e desacelerao do movimento, se onmero escolhido for maior que zero animao ser mais rpida noincio e lenta no final e se for menor que zero, mais lenta no comeo erpida no final.

Para criar interpolao de forma, voc cria dois quadros-chave, no pri-meiro desenha o objeto em seu estado inicial e no ltimo no seu estadofinal.

Pela painel Quadro voc define o tipo de interpolao Forma.

Os nossos prximos exemplos sero sobre este tipo de interpolao.

Pgina: 63

Flash 5


Exemplo 12 Esfera Pulando.fla

1. Desenhe uma elipse com dimenses 100x50 no quadro 1 de um novoarquivo, com gradiente radial dando a impresso de esfera e centrali-zada no topo do palco.

2. No quadro 10 um crculo de 100pixels de dimetro da mesma cor como centro da esfera alterado, e alinhado ao centro da pgina.

3. No quadro 20 outra elipse igual primeira, centralizada na base dapgina.

4. No quadro 30 um crculo do mesmo tamanho e posio do quadro 10.5. No quadro 40 uma elipse do mesmo tamanho e posio do quadro 1.6. Aplique interpolao de forma e visualize a animao.7. Abaixo vemos uma amostra de toda seqncia com o boto Papel de

Transparncia da Linha de Tempo ativo.

Pgina: 64

Flash 5


Exemplo 13 Transformao.fla

1. Em um novo arquivo, importe as figuras mulher1 e mulher2 em qua-dros-chave diferentes, um aps o outro.

2. Alinhe ambas ao centro e na base do palco. Para que possamos ani-mar estas figuras com interpolao de forma, vamos ter que tornar ogrfico um desenho editvel. Desmembre at que o grfico se torneeditvel, quando ento ficar completamente selecionado.

3. Insira um quadros (F5) at o segundo quadro-chave chegar na posi-o 30.

4. Aplique interpolao de forma entre estes quadros e visualize a ani-mao.

5. O uma mulher se transformar em outra.

6. Salve como Mutao.fla.

Exemplo 14 Fogo.fla

Vamos agora fazer uma animao com interpolao de forma que utilizavrias camadas:

1. Em um novo arquivo insira duas camadas.

Pgina: 65

Flash 5


2. Renomeie a Camada 1 para Chama Grande, a Camada 2 para Cha-ma Mdia e a Camada 3 para Chama Pequena.

3. Na camada Chama Grande desenhe uma elipse 100x200, na Mdiade 60x200 e na Pequena de 20x200. Todas somente preenchimento.

4. Selecione os trs preenchimentos e alinhe-os pelo centro horizontal-mente e margem inferior.

5. A elipse grande ter a cor amarela, a mdia ser laranja e a pequenavermelha, se voc quiser utilizar cores gradiente nelas, o desenhoficar mais interessante.

6. Alinhe todas as formas para o centro e base da pgina.7. De 10 em dez quadros v distorcendo as formas e alternando as cores

entre tons de vermelho e amarelo para que se parea com uma chama.

8. Anime os quadros com interpolao de forma e visualize a animao.9. Salve-a como Fogo.fla

Pgina: 66

Flash 5


AVANANDO NO FLASHNs j aprendemos a trabalhar com vrios objetos e vrias camadas,agora veremos no Flash, como trabalhar com vrias cenas e clipes defilme e sons.

CENAS

As cenas so como captulos de um livro, onde podemos juntar vriasanimaes diferentes em um mesmo filme dividido em cenas.

Os filmes que ns montamos at agora possuem poucos quadros, masno futuro voc poder precisar trabalhar com muito mais quadros e secansar rolar para c e para l a Linha de Tempo.

Na hora de exibir as animaes, o Flash vai apresentando as cenas apsa outra na mesma ordem em que esto listadas no painel Cena.

Utilize o menu Janela > Painis > Cena para exibir o painel Cena.

Este painel lista as cenas existentes no seu documento e permite adicio-nar, excluir alterar e duplicar uma Cena. Alm deste painel, voc poderutilizar o menu Inserir > Cena para adicionar uma nova cena diretamen-te na Linha de Tempo.

Pgina: 67

Flash 5


Vamos agora colocar uma cena em uma animao.

Exemplo 15 Cena.fla

1. Abra o arquivo Caminho.fla2. Insira uma cena.3. O Flash adiciona uma cena em branco. Ao invs de montar outra

seqncia, vamos utilizar o arquivo Esferas.fla.4. Abra este arquivo e selecione todos os quadros.5. Copie os quadros, no menu Editar existe a opo Copiar Quadros,

se voc utilizar simplesmente a opo Copiar, no dar certo.6. Feche o arquivo Esferas.fla, no necessitando salvar as alteraes.7. Clique no primeiro quadro da Cena 2 ,e cole os quadros copiados

anteriormente utilizando a opo Colar Quadros do menu Editar oupelo boto direito do mouse sobre o quadro 1.

8. Pronto j temos um cena adicionada a este Arquivo.9. Volte na Cena 1 e salve o arquivo como Cena.fla.10. Visualize a animao.11. Altere a ordem das cenas arrastando a cena de baixo para cima e

visualize novamente.

Pgina: 68

Flash 5


IMPORTANDO SONS

Voc pode importar sons atravs do opo importar do menu arquivo ouutilizar um dos exemplos da biblioteca de sons. Os sons importados socolocados na biblioteca da mesma forma que qualquer outro arquivo,podendo ser utilizado mais de uma vez no mesmo filme.

Para ouvir o som antes de coloc-lo na animao, clique no boto Playda Biblioteca.

Para inserir um som, primeiro devemos criar uma nova camada e arras-tar o som desejado para o palco com o Reproduo sobre o quadrodesejado para iniciar sua execuo.

Exemplo 16 Sons.fla

1. Abra o arquivo Esferas.fla.2. Crie uma nova camada.3. Na posio onde duas esferas se chocam, insira um quadro-chave e

importe o som preferido da biblioteca de sons.4. Importe o mesmo som para os demais quadros, sempre inserindo

quadros-chave antes de arrastar o som.

Pgina: 69

Flash 5


5. Visualize a animao e salve como Sons.fla.

6. Crie uma nova camada chamada Fundo musical e importe o arquivoBridge.wav. Aps a importao, o arquivo de som vai para a biblioteca epara utiliz-lo, arraste-o para o palco com a camada Fundo musical ativa.

CLIPE DE FILME

Voc poder transformar uma animao do Flash em um clipe de filmepara ser utilizado em outros filmes.

O processo parecido com o que ns usamos para copiar uma cena,voc seleciona os quadros e a camada que deseja tornar um clipe defilme, e no menu Inserir, escolha Novo... Smbolo, atribua um nome parao seu smbolo e define o comportamento como Clipe de Filme para ele.

Basta colar os quadros copiados nesse novo Clipe.

Pgina: 70

Flash 5


Exemplo 17 Meteoros.fla

1. Abra o arquivo Fogo.fla e copie todos os quadros que formam a cha-ma a partir das opes Selecionar Tudo e Copiar Quadros do menuEditar.

2. Crie um novo smbolo (Ctrl+F8) com o nome de Chama e comporta-mento Clipe de Filme.

3. Cole os quadros da chama no quadro 1 da camada do clipe de filmeutilizando a menu Editar > Colar Quadros.

4. Volte ao modo de edio da cena salve o arquivo.5. Se voc abrir a biblioteca deste arquivo, ver o clipe chama.

6. Feche o arquivo e abra o arquivo Voando.flap7. Insira uma nova camada com o nome Meteoro.8. Abra o arquivo Fogo.fla como biblioteca.9. Insira um quadro-chave na posio 30 e arraste o clipe Chama para

um ponto antes do incio do palco no canto superior esquerdo.10. Diminua e gire o clipe.

Pgina: 71

Flash 5


11. Crie uma interpolao de Movimento na camada Meteoro.12. V para a posio 40 e mova a Chama at encontrar com o avio.

Isto dar a impresso que foi ela quem derrubou o avio.13. Coloque outros Chamas no filme em uma mesma camada.14. Agrupe as duas novas Chamas e crie uma interpolao de movimen-

to para elas.15. V para o ltimo quadro do filme e mova o grupo para o Mar.

16. Salve como Meteoros.fla

Pgina: 72

Flash 5


BOTES

muito fcil criar botes atravs do Flash, basta criar um novo smbolodando a ele um comportamento de boto.

Quando um objeto tem comportamento de boto, ele dividido em qua-tro quadros-chave: Normal, Sobre, Pressionado e rea

O quadro Normal mostra como o boto ficar em seu estado normal,sem ser clicado nem apontado; o quadro Sobre o formato do botoquando o ponteiro do mouse estiver sobre ele; o quadro Pressionado a forma que o boto vai adquirir quando for clicado, e o quadro reaindica a rea ativa do boto.

Os botes que so criado no Flash podem ser completamente animados.

Primeiro veremos a criao e um boto simples, logo aps um botoanimado.

Exemplo 18 Botes.fla

1. Em um novo arquivo, crie um novo smbolo com o nome de BotoSimples e comportamento de boto.

2. No quadro Normal, crie um um boto a partir de dois crculos e umretngulo, alinhado no centro do palco.

3. Para indicarmos em que formato est o boto, digite a palavra Nor-mal com fonte Arial Black tamanho 30 em uma outra camada.

Pgina: 73

Flash 5


4. Pronto est feito o estado normal do boto.5. Selecione a posio Sobre e insira um quadro-chave para copiar o

contorno do boto.6. Na camada Texto insira tambm um quadro-chave e digite a palavra

Sobre.7. Altere as cores do quadrado e da letra.8. O estado Sobre do boto est feito.

9. Repita o mesmo processo para os estados Pressionado e rea.

10. Se voc preferir uma melhor impresso de boto, pinte as linhas decima e da esquerda do quadrado no estado Sobre de cinza claro efaa a mesma coisa com a linha debaixo e da direita do estado Pres-sionado.

11. Volte para a edio do filme e arraste o Boto Simples da bibliotecapara o palco.

12. Visualize a animao e repare que o boto muda para o estado So-bre somente quando o ponteiro est sobre ele.

13. Aumente as dimenses do contorno da posio rea e observe navisualizao, que o boto muda para o estado Sobre assim que oponteiro atinge sua rea ativa.

14. Repita os passos anteriores e mude o contorno do boto para cadaum dos estados.

15. Salve o arquivo como Botes.fla

Pgina: 74

Flash 5


16. Experimente inserir clipe de filme em cada um dos estados do boto.

INTERATIVIDADE

Normalmente o Flash reproduz as animaes seguindo a seqncia dequadros e cenas do filme. Nos filmes interativos esta seqncia que-brada pelas aes do usurio, que usa o teclado ou o mouse para deter-minar qual parte do filme ser executada, inserir informaes ou moverobjetos e outras operaes interativas.

Um filme interativo criado quando se usa Aes. Ao um conjuntode instrues escritos no ActionScript e executadas quando ocorrer al-gum evento especfico.Um evento pode ocorrer quando o usurio clica em um boto ou o filmeatinge um determinado ponto durante a execuo.

As aes so configuradas no painel Aes no Modo Normal. Nestecurso veremos como inserir aes sem a necessidade de escrever li-nhas de cdigo em ActionScript, utilizando apenas as opes listadas nopainel Aes.

Pgina: 75

Flash 5


As aes podem ser definidas para um quadro, um boto ou um clipe defilme. Quando selecionamos um destes elementos, o painel Aes ati-vado, alterando seu ttulo para Aes do Quadro ou Aes do Objetoconforme o que for selecionado.

Quando um quadro possuir uma ao ele ser marcado com uma pe-quena letra a na Linha de Tempo.

Pgina: 76

Flash 5


Exemplo 19 Aes.fla

1. Monte um novo arquivo como no exemplo abaixo, criando um cami-nho para o crculo se movimentar sobre ele num intervalo de trintaquadros.

2. Insira um boto oval a partir da biblioteca. Edite o boto. Adicionemais uma camada e escreva o texto Esferas nela.

Pgina: 77

Flash 5


3. Na biblioteca, clique com o boto direito sobre o nome do boto eescolha a opo Duplicar. necessrio duplicar este boto para po-dermos alterar o que est escrito nele e criarmos outra instncia.

4. Arraste a cpia para o palco e muda o texto dela para Girar.

5. Crie outro boto com o texto Voando.6. Insira trs cenas com os seguintes arquivos: Esferas.fla, Girar.fla e

Voando.fla. Selecionando todos os quadros, copiando estes quadrose colando-os no primeiro quadro de cada cena. D para elas o nomede cada arquivo, e a primeira chame de principal.

7. Salve o filme como Aes.fla e visualize a animao. Repare que oFlash exibe uma cena aps a outra sem nenhum controle. Nos prxi-mos passos criaremos aes que iro controlar a exibio deste filme.

8. V para o ltimo quadro da primeira cena e insira um quadro-chave.9. Abra o painel Aes do Quadro e d um clique-duplo na Ao Bsica

Go To, para associ-la ao quadro. Esta ao direciona o fluxo deexecuo do filme para o quadro indicado na propriedade Quadro,que no nosso caso o quadro 1. Isto faz com que o filme fique sendoexecutado somente na cena 1.

Pgina: 78

Flash 5


10. Insira em todas as outras cenas a mesma ao feita anteriormenteno ltimo quadro de cada uma delas.

11. Na cena principal, selecione o um boto, d um clique-duplo na AoBsica Go To e na propriedade Cena digite o nome da cena perten-cente a ele.

Pgina: 79

Flash 5


12. Faa o mesmo para outros dois botes. Na lista de aes notamosque antes da ao goto temos o evento que ira disparar esta ao,que no caso on (release), ou seja quando o boto do mouse forsolto. Selecione este evento e observe no campo de parmetros todosos eventos possveis de serem escolhidos para executar esta ao.

13. Visualize a animao e note que ao entrar em uma das cenas, no possvel mais sair. Vamos corrigir este problema inserindo em cadacena, um boto que volte para a cena principal.

14. Insira dois botes em cada cena. Um boto com a ao GoTo,Cena principal e Quadro 1. E o outro com a ao Stop.

15. Salve e visualize seu filme.

Pgina: 80

Flash 5


PUBLICANDO

Para definir como seu filme ser publicado voc deve ir ao menu Arqui-vo > Configuraes de Publicao..., surge uma caixa de dialogo comtrs guias: Formatos, Flash e HTML.

Pgina: 81

Flash 5


Nesta caixa de dilogo voc escolhe todos as definies para o seu filme.

Agora s publicar o filme pela opo Publicar do menu Arquivo, oupelas teclas < S h i f t > + < F 1 2 > .

Com o arquivo publicado basta abrir atravs de seu navegador, ou sepreferir voc poder pressionar a tecla < F 1 2 > q u e a animao seratualizada e visualizada ao mesmo tempo, automaticamente.

Pgina: 82

Flash 5


EXERCCIOS

1. Crie uma transformao envolvendo dois grficos biblioteca de grfi-cos. Salvando o arquivo como Metamorfose.fla.

2. Crie um animao em que o avio d piruetas no ar. Salvando comoPiruetas.fla.

3. Utilize o clipe da chama para criar a imagem de uma vela acesa.Salve como Vela.fla.

4. Crie um semforo alternando entre o verde, amarelo e vermelho. Salvecomo Semfaro.fla

5. Crie um animao onde o dia comece ensolarado, e transforma-seem uma noite com o cu estrelado e lua cheia. Salve como DiaPerfeito.fla

6. Desenhe um carro que atravessa o palco com as rodas girando. Sefor possvel, importe um carro de algum Clip-Art.

7. No palco do exerccio anterior tero dois botes, um chamado PA-RAR e o outro chamado SEGUIR, adicione um som de freada quan-do o carro parar. Salve como Carro.fla

8. Crie uma animao onde um avio decole, d algumas voltas e de-pois pouse, o avio pode ser de qualquer Clip-Art, ou do prpria bibli-oteca do Flash. No esquecendo que o objeto tem que ser vetorial.

9. Crie uma animao com a frase VAMOS DETONAR COM O FLASH,utilize o mximo de recursos possveis para esta animao. Salvecomo detonar.fla.

10. Duplique a Clipe de Filme do avio biplano e personalize, colocandoum piloto na cabine que pode ser uma foto sua escaneada ou umClip-Art de sua escolha.

Pgina: 83

Flash 5


11. Faa uma animao com este clipe. Salve como Meu avio.fla.12. Crie a animao de um foguete ou avio a jato utilizando o Clipe da

Chama para sair da turbina adicione um som de jato se possvel.Salve com jato.fla.

13. Monte um site com o Flash que venda algum produto, utilize os dese-nhos do Flash ou de outro programa com Clip-Art. Salve com MeuSite.fla

14. No menu Janela voc encontra alguns Exemplos do Flash, abra-os eveja que possvel fazer muitas animaes com esse programa.

15. Procure por sites que utilizem o Flash e tente repetir as animaesencontradas.

Celta Informticahttp://www.celtainformatica.com.br

SumrioINTRODUO Tela de Apresentao Barras de Ferramentas Palco (Stage) Linha de Tempo Caixa de ferramentas Editar Cena e Editar Smbolos UTILIZANDO AS FERRAMENTAS Linha Texto Oval e Retngulo Lpis e Pincel Tinteiro Balde de Tinta Sombreador e Apagador Mo e Zoom Seta Lao EDITANDO OBJETOS DO FLASH Transformar Organizar Alinhar Desmembrar Informaes e Transformar Cores CAMADAS Propriedades Colando Objetos Entre Camadas TRABALHANDO COM OBJETOS Importando Arquivos ANIMAO Quadros-Chave Animao Quadro a Quadro Animao com Interpolao Interpolao de Forma AVANANDO NO FLASH Cenas Importando Sons Clipe de Filme Botes Interatividade PUBLICANDO EXERCCIOS

00201 - Flash 5

Documents

Transcript of 00201 - Flash 5