Flash

Mdulo II

Parabns por adquirir um curso dos Cursos 24 Horas. Voc est investindo no seu futuro! Ns esperamos que o curso traga os melhores resultados possveis. Atenciosamente Equipe Cursos 24 Horas

Voc pode tambm importar imagens de outros arquivos e em outros formatos atravs do menu File>Import (Arquivo>Importar). Dentre os formatos disponveis, possvel escolher entre importar o contedo de um outro arquivo flash, imagens vetoriais em outros formatos (freehand, ilustrator, wmf) e imagens bitmaps (.jpg, .gif, .bmp).

Os elementos que compes a timeline so: - Scene: representa a cena atual na qual estamos trabalhando. - Layer: representa a camada que estamos trabalhando. Um filme pode ter vrias camadas, sendo que a animao de uma camada no interfere na outra (exceto em casos onde h interaes). - Frames: so chamados de quadros. Os quadros tero o contedo da animao. A seqncia de quadros forma a animao final. - Keyframes: so chamados de quadros-chaves. Eles so inseridos dentro de um frame somente quando houver modificao no contedo do frame em algum elemento ou insero de alguma ao.

Desenhando no Flash voc deve ter reparado que muitas vezes impossvel fazer um desenho sem alterar ou confundir-se com outro j pronto. Uma das maneira de comear a organizar seu contedo agrupando as formas assim como nos softwares comuns de edio de imagens. Para tal, selecione as formas que pretende agrupar e clique em Modify > Group (Modificar > Agrupar) ou pressione Ctrl+G. Para editar figuras agrupadas, basta dar um duplo-clique sobre a imagem. Assim como os principais programas de grficos, o Flash tambm trabalha com layers (camadas), controle e operaes com as camadas, que podem ser acessados pelos atalhos:

fundamental que se esteja familiarizado a trabalhar com camadas, sua utilizao facilita a criao e manuteno de seu projeto. Exerccios: 04) - Comece um novo filme e desenhe uma casa, aplicando os conceitos desenvolvidos nos exerccios anteriores. - Desenhe um cenrio de fundo para sua casa. - Salve seu exerccio. Dicas: - Procure identificar quais so os elementos de seu desenho e trabalhar cada um em uma camada diferente. - D nomes sugestivos s camadas - possvel ocultar ou travar as camadas que desejar, experimente!

Para comearmos a utilizar os recursos de animao do Flash, preciso antes aprender a trabalhar com Smbolos. Para o Flash interagir com um elemento, preciso que este elemento seja definido como um objeto, um Smbolo. Como objeto, os smbolos possuem propriedades, aes e comportamentos, que poder ser definidos e/ou alterados no decorrer da animao. Ao inserir um smbolo em uma animao, voc est inserindo uma instncia do objeto definido. como se fosse uma cpia, porm com caractersticas diferentes. Instncias de um mesmo smbolo possuem mesmo contedo, porm podem possuir propriedades e caractersticas diferentes.

Tipos de smbolos
Existem trs tipos possveis de smbolos: Graphic, Movie Clip e Button (Grfico, Clipe de Filme e Boto), que se diferenciam pelo comportamento e pelas propriedades que conheceremos mais adiante. Para transformar uma forma em um smbolo, selecione alguma forma em seu palco e clique em Insert>Convert to Symbol (Inserir>Converter para Smbolo), escolha o nome do objeto e o tipo do smbolo: Graphic. Descrio dos tipos de Smbolos: Graphic(grfico): Ideal para elementos que no interagem com o filme, a linha de tempo dos smbolos do tipo grfico correm junto com a linha de tempo principal. No realizam ao, nem recebem interao. Movie Clip(clipe de filme): Semelhante ao grfico, porm possui linha de tempo independente, um clipe de filme se comporta como um arquivo flash a parte, pode executar aes e receber controle e interao externa. Button(boto): Um smbolo do tipo boto, responde a eventos do mouse(up, over, down, e hit) e executa aes. Conheceremos melhor as caractersticas de cada tipo de smbolo quando precisarmos aplicar os conceitos.

Quando criamos um smbolo, este arquivado na biblioteca do filme, a partir dela possvel gerenciar os objetos de seu filme, organizando, alterando referncias e visualizando o contedo existente. Voc acessa a biblioteca de seu filme atravs do menu Window>Library (Janela>Biblioteca), ou atravs do atalho Ctrl+L.
exemplo de biblioteca

Observe que as imagens importadas tambm aparecem na biblioteca.

Exerccios: 05) - Abra o arquivo biblioteca.fla e copie o smbolo Mouse para um novo filme. - Crie instncias do Mouse, diferenciando uma de outra, aplique efeitos, redimensione. - Edite agora o contedo do smbolo e veja o que acontece!
Smbolo Mouse do tipo Grfico

- Salve seu exerccio.

5

Dicas: - possvel arrastar smbolos de outras bibliotecas para seu filme. - possvel abrir um arquivo Flash, como uma biblioteca, experimente. - Procure o painel de Instncias e o de efeitos.

Finalmente o que interessa, Animar! Dizemos que o Flash cria contedo 3D, isso porque como j deve ter observado, temos o plano de desenho (2D) e tudo o que acontece neste plano acontece em funo de um Tempo (a terceira dimenso), que

representado pela timeline ou linha-do-tempo, conhea:

Cada caixinha na timeline representa um frame (quadro) de sua animao, que roda por default a 12fps (frames-por-segundo). Quando iniciamos uma animao, esta contm apenas um frame, ou seja, ainda esttica.

Exerccios: - Comece uma nova animao; - Insira o smbolo Biplane disponvel em biblioteca.fla - Insira 30 quadros em seu filme.
Quadro n: Posicionador Escala da timeline Quadro atual Taxa de reproduo Tempo decorrido 6

Onion skins

Observe a alterao na timeline:

A quantidade de frames de uma animao, como j foi dito anteriormente, determinar o tamanho da animao. Em outras palavras, isso significa que se um filme tiver 10 frames e um segundo filme tiver 90 frames, o primeiro filme ser executado mais rapidamente do que o segundo. Voc provavelmente j deve ter brincado de "fazer cinema" com um bloco de papel. A idia era desenhar em cada folha do bloco uma seqncia de movimento. No final, as folhas eram passadas rapidamente dando a sensao do filme. Voltando ao Flash, o que estaremos fazendo seria exatamente isso: cada folha do bloco de papel seria equivalente a um Frame. O conjunto de Frames (o bloco), seria uma cena ou o prprio filme. Inserindo Frames Para inserir frames na timeline, clique 1X no frame 1 (ou se o layer tiver mais frames, clique a partir do frame que voc quer inserir) e pressione F5 quantas vezes forem necessrias. Outra maneira atravs do menu principal Insert -> Frame. A terceira opo clicar com o boto direito do mouse sobre o frame 1 e clicar, em seguida, na opo Insert Frame. Apagando Frames Para apagar um frame, clique com o boto direito do mouse sobre o frame que quer apagar e em seguida na opo Remove Frame. Alm dessa opo, voc pode ir ao menu principal Insert -> Remove Frame ou ainda apertar as teclas SHIFT + F5.

O Quadrado com a bolinha preta representa um Key Frame e indica os quadros-chave da animao, ou seja, onde existe mudana no contedo da mesma, o restante dos quadros cinzas so Frames(quadros), e indicam que o contedo do KeyFrame imediatamente anterior continua presente. O quadradinho no fim da animao indica o ltimo quadro em que o contedo do KeyFrame aparece.
7

 possvel desenvolver basicamente dois tipos de animaes no Flash, elas so explicadas a seguir:

Frame-By-Frame (Quadro-a-quadro)
a mais simples, porm a mais trabalhosa. Para criar animaes quadro-a-quadro (como o prprio nome sugere), necessrio que se defina todos os quadros da animao, ou seja, todo quadro um quadrochave (keyframe). Exerccios: 07) - Faa uma animao quadro-a-quadro utilizando um smbolo ou uma forma livre.(sugesto: utilize o smbolo boneco do arquivo biblioteca.fla) Dicas: - Utilize Modify>Break Apart (Ctrl+B) para quebrar um smbolo em formas novamente. - Depois de pronto, explore as opes de Onion Skin

Tweening (Animao Linear)

O Tweening a principal forma de animao no Flash, uma maneira mais fcil de se animar, basta definir o quadro chave inicial e o quadro chave final e comandar ao Flash que realize o tweening. O Flash detecta a mudana e tenta adivinhar qual era o movimento desejado. Existem duas formas de Tweening:

Tweening Motion:
Utilizado para animar smbolos. Para a correta utilizao do Tweening motion preciso alguns cuidados: - Somente Smbolos podem ser animados. - Somente um Smbolo por Keyframe/Layer deve ser utilizado. - O mesmo Smbolo deve estar presente no keyframe inicial e final. Exerccios: 08) - Importe o smbolo guia de biblioteca.fla e faa uma animao dela sobrevoando o seu palco. - Explore as configuraes do Tweening (procure o painel Frame) o Scale o Rotate o Easing - Adicione efeitos na instncia animada e confira o resultado na animao. - possvel fazer a guia percorrer um caminho sinuoso? - Salve seu exerccio.

Tweening Shape:
Transforma uma forma livre em outra, criando um efeito de morph . O procedimento de criao semelhante ao do Tweening Motion, porm os quadros chaves s devem conter formas livres. Exerccios: 09) - Importe os smbolos da pasta ex9 de biblioteca.fla e faa animaes de forma, fazendo uma figura virar outra consecutivamente. (Primeiro transforme os smbolos em formas!) - Salve seu exerccio. Dica: - Uma dica de forma: possvel adicionar Shape Hints ao tweening shape atravs do menu Modify>Transform>Add Shape Hint ou pelo atalho Ctrl+H.

10

Os botes no Flash, assim como os grficos, so smbolos que possuem caractersticas especiais. Um smbolo do tipo boto possui 3 estgios, Up (levantado), Over (em cima) e Down (abaixado), que representam os comportamentos possveis de um boto com relao ao cursor do Mouse: - UP : boto solto - Over: cursor sobre o boto - Down: boto clicando; e um quarto frame, Hit, que representa a rea clicvel do boto.

Observe: Exerccios: 09) - Crie trs botes distintos que sugiram a idia de Play, Pause, e Volta, com todos os estados definidos. - Salve seu exerccio.

11

(controle de reproduo) Para comearmos a controlar nossa animao e at mesmo para que o uso de botes faa sentido, hora de aprendermos como inserir Aes no Flash. Atravs de Aes possvel controlar a reproduo de um filme, planejar navegao de uma aplicao, configurar o modo de visualizao, criar interaes das mais diversas com o usurio, programar eventos e menus, definir variveis, interagir com aplicativos externos e at mesmo gerar uma animao. possvel definir aes em Frames, em smbolos do tipo Movie Clip e em botes. Para visualizar as aes disponveis, clique em Window>Actions (Janela>Aes ), ou clique no atalho no canto inferior direito da tela do

Flash: Para Inserir uma ao, basta selecionar um objeto vlido e a ao que deseja atribuir.

Exerccios: 09) - Escolha uma das animaes feitas - Insira os Botes criados no ltimo exerccio - Adicione as respectivas aes aos botes, de modo a criar um controle da animao.

12

Testando o filme Para testar o filme acione o comando Control -> Test Movie ou utilize o atalho CRTL+ Enter. O seu filme ser testado dentro do prprio Flash.

Como j foi mencionado, o filme em Flash exportado contm a extenso .swf. Essa extenso a que ser incorporada em um arquivo html para que possa ser visualizada pelos navegadores dos usurios que contenham o plugin Flash Player. O Flash contm um comando que publica o filme em uma pgina HTML, ou seja, ele mesmo cria a pgina automaticamente! Para acion-lo v ao menu principal File -> Publish. O HTML ser criado no diretrio onde o arquivo .fla e o .swf foram salvos e exportados. Alm do HTML voc pode especificar se quer gerar o .swf e outros arquivos automaticamente com o mesmo comando Para definir, v no meu File -> Publish Settings. A janela chamada Publish Settings aberta contendo:

- Formats: determina os formatos da publicao. A configurao padro j vem com os itens Flash (swf) e HTML marcados. Se voc quiser gerar um arquivo com outros formatos, basta marcar a caixa de seleo correspondente. - Flash: Neste tem ficam as configuraes do filme Flash (.swf) a ser gerado. - Load Order: especifica a ordem que as camadas sero carregadas na Internet. Claro que esta opo funcionar se o seu filme tiver mais do que 2 camadas. As opes so: Bottom up (de baixo para cima) e Top Down (De cima para baixo).
13

- Generate Size Report: especifica se voc quer que um arquivo texto seja gerado ou no. Este arquivo contm informaes do tamanho dos elementos usados em seu filme. Com isso, pode-se tentar reduzir o tamanho de alguns elementos e, conseqentemente, o tamanho final do filme. - Omit Trace Actions: especifica se quer omitir o Trace. Esse Trace uma ferramenta para auxiliar o programador na hora de depurar o cdigo em busca de falhas. - Protect From Import: protege o arquivo exportado de ser aberto no Flash. Voc pode especificar uma senha para que o arquivo exportado possa ser aberto apenas com a senha. - Debugging Permited: determina se voc quer ativar o depurador em busca de erros em scripts. - Password: define a senha para proteger o arquivo swf. - Jpeg Quality: todas as imagens usadas no Flash sero gravadas no formato jpeg. Nessa opo, voc define a qualidade das imagens. - Audio Stream e Audio Event: define a taxa de compresso do formato de udio. - Override Sound Setting: permite que as configuraes feitas no tem Audio Stream e Audio Event substituam as definidas dentro do filme, em Properties (tem aberto com o boto direito do mouse sobre o arquivo de som, na biblioteca do filme). - Version: define a verso do filme exportado. - HTML: neste tem ficam as definies em relao pgina HTML gerada. - Template: define um tipo de html que ser gerado. Os principais so: Flash Only (default) que cria um HTML compatvel com o Internet Explorer e Netscape e User Choice , onde um script de deteco do plug-in Flash Player inserido automaticamente verificando se o usurio tem ou no o plug-in. - Dimensions: determina o tamanho do filme dentro do HTML. Se voc selecionar Match Movie , o tamanho ser aquele definido em Movie Properties. Se selecionar Pixels , possvel determinar um outro tamanho para o filme, digitando os novos valores em Width (largura) e Height (altura). E, por fim, se selecionar Percent , pode-se determinar um valor relativo em porcentagem. - Playback: define a execuo do filme, se quer executar em loop, se quer que aparea o menu (Display Menu), entre outros. - Quality: define a qualidade do filme. Quanto mais baixa a qualidade, a execuo do filme ocorrer sem problemas, porm a qualidade pode ficar comprometida. O padro do Flash High. - Window Mode: esse tem funciona apenas no Internet Explorer e pode definir a transparncia de um filme, entre outros. - Alignment: especifica o tipo de alinhamento do filme em relao pgina HTML. - Scale: essa opo s funciona se voc definir um tamanho diferente do tamanho do filme. Ela especifica como ser a disposio do filme no espao
14

disponvel. O padro default, onde todo o filme ser visvel no espao especificado. - Flash Alignment: define o alinhamento do filme. - Show Warning Messages: especifica se quer exibir mensagens de erros e conflitos que possam surgir na hora da publicao.. Em seguida clique em Publish (Publicar). Os arquivos selecionados sero gerados no diretrio em que a animao est salva. Abra e veja o resultado!

15

Sites
A seguir alguns sites onde voc pode obter maiores informaes sobre o Flash mx e recursos para usar nos seus projetos: Empresa: - Macromedia: site do fabricante: http://www.macromedia.com.br Sites para desenvolvedores: Contm tutoriais, artigos, arquivos .fla, entre outros recursos. - Flash Planet: http://www.flashplanet.com/ - Flash Zone: http://www.flashzone.com/ - Flash Kit: http://www.flashkit.com/ - Extreme Flash: http://www.extremeflash.com/ Sons: Arquivos de sons para download. - WavCentral: http://www.wavcentral.com - Sound America: http://soundamerica.com/ - WavList: http://www.wavlist.com/index.html Imagens: Arquivos de imagens, figuras e desenhos para downloads. - Free Graphics: http://www.free-graphics.com/ - ClipArt Warehouse: http://www.clipart.co.uk/ - Animation Factory: http://www.animfactory.com/

Concluso
Esperamos que voc tenha aprendido Flash durante o curso. normal que voc tenha algumas dvidas, mas consultando alguns tutoriais sobre Flash e fazendo suas perguntas em nossos fruns de dvidas, voc ver seu aprendizado evoluir rapidamente. Quando sentir-se preparado(a), faa a prova referente ao 2 mdulo. Atenciosamente Equipe Cursos 24 Horas.

16