FFllaasshhMódulo IIParabéns por adquirir um curso dos Cursos 24Horas. Você está investindo no seu futuro! Nósesperamos que...
2IImmaaggeennss IImmppoorrttaaddaassVocê pode também importar imagens de outros arquivos e emoutros formatos através do me...
3OOrrggaanniizzaannddooDesenhando no Flash você deve ter reparado que muitas vezes éimpossível fazer um desenho sem altera...
4SSíímmbboolloossPara começarmos a utilizar os recursos de animação do Flash, épreciso antes aprender a trabalhar com Símb...
5BBiibblliiootteeccaaQuando criamos um símbolo, este é arquivado na biblioteca dofilme, a partir dela é possível gerenciar...
6Dicas:- É possível arrastar símbolos de outras bibliotecas para seu filme.- É possível abrir um arquivo Flash, como uma b...
7Onion skinsObserve a alteração na timeline:A quantidade de frames de uma animação, como já foi dito anteriormente,determi...
8FFrraammee--BByy--FFrraammee (Quadro-a-quadro)É a mais simples, porém a mais trabalhosa. Para criar animaçõesquadro-a-qua...
9- Salve seu exercício.TTwweeeenniinngg SShhaappee::Transforma uma forma livre em outra, criando um efeito de “morph”.O pr...
10BBoottõõeessOs botões no Flash, assim como os gráficos, são símbolos quepossuem características especiais. Um símbolo do...
11AAççõõeess bbáássiiccaass(controle de reprodução)Para começarmos a controlar nossa animação e até mesmo paraque o uso de...
12O seu filme será testado dentro do próprio Flash.PPuubblliiccaaççããooComo já foi mencionado, o filme em Flash exportado ...
13- Generate Size Report: especifica se você quer que um arquivo textoseja gerado ou não. Este arquivo contém informações ...
14- Scale: essa opção só funciona se você definir um tamanho diferente dotamanho do filme. Ela especifica como será a disp...
15CCoonncclluussããooEsperamos que você tenha aprendido Flash durante o curso.É normal que você tenha algumas dúvidas, mas ...
Upcoming SlideShare
Loading in …5
×

CURSO DE FLASH

472 views
415 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
472
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CURSO DE FLASH

  1. 1. FFllaasshhMódulo IIParabéns por adquirir um curso dos Cursos 24Horas. Você está investindo no seu futuro! Nósesperamos que o curso traga os melhoresresultados possíveis.AtenciosamenteEquipe Cursos 24 Horas
  2. 2. 2IImmaaggeennss IImmppoorrttaaddaassVocê pode também importar imagens de outros arquivos e emoutros formatos através do menu File>Import (Arquivo>Importar). Dentre osformatos disponíveis, é possível escolher entre importar o conteúdo de umoutro arquivo flash, imagens vetoriais em outros formatos (freehand,ilustrator, wmf) e imagens bitmaps (.jpg, .gif, .bmp).AA TTiimmeeLLiinneeOs elementos que compões a timeline são:- Scene: representa a cena atual na qual estamos trabalhando.- Layer: representa a camada que estamos trabalhando. Um filme pode tervárias camadas, sendo que a animação de uma camada não interfere naoutra (exceto em casos onde há interações).- Frames: são chamados de quadros. Os quadros terão o conteúdo da animação.A seqüência de quadros forma a animação final.- Keyframes: são chamados de quadros-chaves. Eles são inseridos dentrode um frame somente quando houver modificação no conteúdo do frame emalgum elemento ou inserção de alguma ação.
  3. 3. 3OOrrggaanniizzaannddooDesenhando no Flash você deve ter reparado que muitas vezes éimpossível fazer um desenho sem alterar ou confundir-se com outro jápronto. Uma das maneira de começar a organizar seu conteúdo éagrupando as formas assim como nos softwares comuns de edição deimagens. Para tal, selecione as formas que pretende agrupar e clique emModify > Group (Modificar > Agrupar) ou pressione Ctrl+G. Para editarfiguras agrupadas, basta dar um duplo-clique sobre a imagem.Assim como os principais programas de gráficos, o Flash tambémtrabalha com layers (camadas), controle e operações com as camadas,que podem ser acessados pelos atalhos:É fundamental que se esteja familiarizado a trabalhar com camadas,sua utilização facilita a criação e manutenção de seu projeto.Exercícios:04)- Comece um novo filme e desenhe uma casa, aplicando osconceitos desenvolvidos nos exercícios anteriores.- Desenhe um cenário de fundo para sua casa.- Salve seu exercício.Dicas:- Procure identificar quais são os elementos de seu desenho etrabalhar cada um em uma camada diferente.- Dê nomes sugestivos às camadas- É possível ocultar ou travar as camadas que desejar, experimente!
  4. 4. 4SSíímmbboolloossPara começarmos a utilizar os recursos de animação do Flash, épreciso antes aprender a trabalhar com Símbolos.Para o Flash interagir com um elemento, é preciso que este elementoseja definido como um objeto, um Símbolo. Como objeto, os símbolospossuem propriedades, ações e comportamentos, que poder ser definidose/ou alterados no decorrer da animação.Ao inserir um símbolo em uma animação, você está inserindo umainstância do objeto definido. É como se fosse uma cópia, porém comcaracterísticas diferentes. Instâncias de um mesmo símbolo possuemmesmo conteúdo, porém podem possuir propriedades e característicasdiferentes.TTiippooss ddee ssíímmbboolloossExistem três tipos possíveis de símbolos: Graphic, Movie Clip e Button(Gráfico, Clipe de Filme e Botão), que se diferenciam pelo comportamentoe pelas propriedades que conheceremos mais adiante.Para transformar uma forma em um símbolo, selecione alguma formaem seu palco e clique em Insert>Convert to Symbol (Inserir>Converter paraSímbolo), escolha o nome do objeto e o tipo do símbolo: Graphic.Descrição dos tipos de Símbolos:Graphic(gráfico): Ideal para elementos que não interagem com ofilme, a linha de tempo dos símbolos do tipo gráfico correm juntocom a linha de tempo principal. Não realizam ação, nem recebeminteração.Movie Clip(clipe de filme): Semelhante ao gráfico, porém possui linhade tempo independente, um clipe de filme se comporta como umarquivo flash a parte, pode executar ações e receber controle einteração externa.Button(botão): Um símbolo do tipo botão, responde a eventos domouse(up, over, down, e hit) e executa ações.Conheceremos melhor as características de cada tipo de símbolo quandoprecisarmos aplicar os conceitos.
  5. 5. 5BBiibblliiootteeccaaQuando criamos um símbolo, este é arquivado na biblioteca dofilme, a partir dela é possível gerenciar os objetos de seu filme,organizando, alterando referências e visualizando o conteúdo existente.Você acessa a biblioteca de seu filme através do menuWindow>Library (Janela>Biblioteca), ou através do atalho Ctrl+L.exemplo de bibliotecaObserve que as imagens importadas também aparecem nabiblioteca.Exercícios:05)- Abra o arquivo biblioteca.fla e copie o símbolo Mouse para umnovo filme.- Crie instâncias do Mouse, diferenciando uma de outra, apliqueefeitos, redimensione.- Edite agora o conteúdo do símbolo e veja o que acontece!Símbolo “Mouse” do tipo Gráfico- Salve seu exercício.
  6. 6. 6Dicas:- É possível arrastar símbolos de outras bibliotecas para seu filme.- É possível abrir um arquivo Flash, como uma biblioteca,experimente.- Procure o painel de Instâncias e o de efeitos.AAnniimmaaççõõeessFinalmente o que interessa, Animar!Dizemos que o Flash cria conteúdo 3D, isso porque como já deve terobservado, temos o plano de desenho (2D) e tudo o que acontece nesteplano acontece em função de um Tempo (a terceira dimensão), que érepresentado pela timeline ou linha-do-tempo, conheça:Cada caixinha na timeline representa um frame (quadro) de suaanimação, que roda por default a 12fps (frames-por-segundo). Quandoiniciamos uma animação, esta contém apenas um frame, ou seja, ainda éestática.Exercícios:- Comece uma nova animação;- Insira o símbolo “Biplane” disponível em biblioteca.fla- Insira 30 quadros em seu filme.Quadro nº:PosicionadorEscala da timelineQuadro atualTaxa de reproduçãoTempo decorrido
  7. 7. 7Onion skinsObserve a alteração na timeline:A quantidade de frames de uma animação, como já foi dito anteriormente,determinará o tamanho da animação. Em outras palavras, isso significaque se um filme tiver 10 frames e um segundo filme tiver 90 frames, o primeirofilme será executado mais rapidamente do que o segundo.Você provavelmente já deve ter brincado de "fazer cinema" com um blocode papel. A idéia era desenhar em cada folha do bloco uma seqüência demovimento. No final, as folhas eram passadas rapidamente dando a sensaçãodo filme.Voltando ao Flash, o que estaremos fazendo seria exatamente isso: cadafolha do bloco de papel seria equivalente a um Frame. O conjunto de Frames(o bloco), seria uma cena ou o próprio filme.Inserindo FramesPara inserir frames na timeline, clique 1X no frame 1 (ou se o layer tivermais frames, clique a partir do frame que você quer inserir) e pressione F5quantas vezes forem necessárias.Outra maneira é através do menu principal Insert -> Frame.A terceira opção é clicar com o botão direito do mouse sobre o frame 1 eclicar, em seguida, na opção Insert Frame.Apagando FramesPara apagar um frame, clique com o botão direito do mouse sobre oframe que quer apagar e em seguida na opção Remove Frame.Além dessa opção, você pode ir ao menu principal Insert -> RemoveFrame ou ainda apertar as teclas SHIFT + F5.O Quadrado com a bolinha preta representa um Key Frame e indicaos quadros-chave da animação, ou seja, onde existe mudança noconteúdo da mesma, o restante dos quadros cinzas são Frames(quadros),e indicam que o conteúdo do KeyFrame imediatamente anterior continuapresente. O quadradinho no fim da animação indica o último quadro emque o conteúdo do KeyFrame aparece.É possível desenvolver basicamente dois tipos de animações noFlash, elas são explicadas a seguir:
  8. 8. 8FFrraammee--BByy--FFrraammee (Quadro-a-quadro)É a mais simples, porém a mais trabalhosa. Para criar animaçõesquadro-a-quadro (como o próprio nome sugere), é necessário que sedefina todos os quadros da animação, ou seja, todo quadro é um quadrochave(keyframe).Exercícios:07)- Faça uma animação quadro-a-quadro utilizando um símbolo ouuma forma livre.(sugestão: utilize o símbolo “boneco” do arquivobiblioteca.fla)Dicas:- Utilize Modify>Break Apart (Ctrl+B) para quebrar um símbolo emformas novamente.- Depois de pronto, explore as opções de “Onion Skin”TTwweeeenniinngg (Animação Linear)O Tweening é a principal forma de animação no Flash, é umamaneira mais fácil de se animar, basta definir o quadro chave inicial e oquadro chave final e comandar ao Flash que realize o tweening. O Flashdetecta a mudança e “tenta adivinhar” qual era o movimento desejado.Existem duas formas de Tweening:TTwweeeenniinngg MMoottiioonn::Utilizado para animar símbolos. Para a correta utilização do Tweeningmotion é preciso alguns cuidados:- Somente Símbolos podem ser animados.- Somente um Símbolo por Keyframe/Layer deve ser utilizado.- O mesmo Símbolo deve estar presente no keyframe inicial e final.Exercícios:08)- Importe o símbolo “águia” de biblioteca.fla e faça umaanimação dela sobrevoando o seu palco.- Explore as configurações do Tweening (procure o painel Frame)o Scaleo Rotateo Easing- Adicione efeitos na instância animada e confira o resultado naanimação.- É possível fazer a águia percorrer um caminho sinuoso?
  9. 9. 9- Salve seu exercício.TTwweeeenniinngg SShhaappee::Transforma uma forma livre em outra, criando um efeito de “morph”.O procedimento de criação é semelhante ao do Tweening Motion, porémos quadros chaves só devem conter formas livres.Exercícios:09)- Importe os símbolos da pasta ex9 de biblioteca.fla e façaanimações de forma, fazendo uma figura virar outraconsecutivamente. (Primeiro transforme os símbolos em formas!)- Salve seu exercício.Dica:- Uma dica de forma: É possível adicionar Shape Hints ao tweeningshape através do menu Modify>Transform>Add Shape Hint oupelo atalho Ctrl+H.
  10. 10. 10BBoottõõeessOs botões no Flash, assim como os gráficos, são símbolos quepossuem características especiais. Um símbolo do tipo botão possui 3estágios, Up (levantado), Over (em cima) e Down (abaixado), querepresentam os comportamentos possíveis de um botão com relação aocursor do Mouse:- UP : botão solto- Over: cursor sobre o botão- Down: botão clicando;e um quarto frame, Hit, que representa a área clicável do botão.Observe:Exercícios:09)- Crie três botões distintos que sugiram a idéia de Play, Pause, eVolta, com todos os estados definidos.- Salve seu exercício.
  11. 11. 11AAççõõeess bbáássiiccaass(controle de reprodução)Para começarmos a controlar nossa animação e até mesmo paraque o uso de botões faça sentido, é hora de aprendermos como inserirAções no Flash. Através de Ações é possível controlar a reprodução de umfilme, planejar navegação de uma aplicação, configurar o modo devisualização, criar interações das mais diversas com o usuário, programareventos e menus, definir variáveis, interagir com aplicativos externos e atémesmo gerar uma animação. É possível definir ações em Frames, emsímbolos do tipo Movie Clip e em botões.Para visualizar as ações disponíveis, clique em Window>Actions(Janela>Ações ), ou clique no atalho no canto inferior direito da tela doFlash:Para Inserir uma ação, basta selecionar um objeto válido e a açãoque deseja atribuir.Exercícios:09)- Escolha uma das animações feitas- Insira os Botões criados no último exercício- Adicione as respectivas ações aos botões, de modo a criar umcontrole da animação.Testando o filmePara testar o filme acione o comando Control -> Test Movie ou utilize oatalho CRTL+ Enter.
  12. 12. 12O seu filme será testado dentro do próprio Flash.PPuubblliiccaaççããooComo já foi mencionado, o filme em Flash exportado contém a extensão.swf. Essa extensão é a que será incorporada em um arquivo html para quepossa ser visualizada pelos navegadores dos usuários que contenham o pluginFlash Player.O Flash contém um comando que publica o filme em uma página HTML,ou seja, ele mesmo cria a página automaticamente!Para acioná-lo vá ao menu principal File -> Publish.O HTML será criado no diretório onde o arquivo .fla e o .swf foram salvose exportados.Além do HTML você pode especificar se quer gerar o .swf e outros arquivosautomaticamente com o mesmo comandoPara definir, vá no meu File -> Publish Settings. A janela chamada PublishSettings é aberta contendo:- Formats: determina os formatos da publicação. A configuração padrão jávem com os itens Flash (swf) e HTML marcados. Se você quiser gerar umarquivo com outros formatos, basta marcar a caixa de seleção correspondente.- Flash: Neste ítem ficam as configurações do filme Flash (.swf) a ser gerado.- Load Order: especifica a ordem que as camadas serão carregadas naInternet. Claro que esta opção funcionará se o seu filme tiver mais do que 2camadas. As opções são: Bottom up (de baixo para cima) e Top Down (Decima para baixo).
  13. 13. 13- Generate Size Report: especifica se você quer que um arquivo textoseja gerado ou não. Este arquivo contém informações do tamanho dos elementosusados em seu filme. Com isso, pode-se tentar reduzir o tamanho dealguns elementos e, conseqüentemente, 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 código embusca 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 seraberto apenas com a senha.- Debugging Permited: determina se você quer ativar o depurador embusca de erros em scripts.- Password: define a senha para proteger o arquivo swf.- Jpeg Quality: todas as imagens usadas no Flash serão gravadas noformato jpeg. Nessa opção, você define a qualidade das imagens.- Audio Stream e Audio Event: define a taxa de compressão do formatode áudio.- Override Sound Setting: permite que as configurações feitas no ítemAudio Stream e Audio Event substituam as definidas dentro do filme, emProperties (ítem aberto com o botão direito do mouse sobre o arquivo desom, na biblioteca do filme).- Version: define a versão do filme exportado.- HTML: neste ítem ficam as definições em relação à página HTML gerada.- Template: define um tipo de html que será gerado. Os principais são:„Flash Only (default)‟ que cria um HTML compatível com o Internet Explorer eNetscape e „User Choice‟, onde um script de detecção do plug-in Flash Playeré inserido automaticamente verificando se o usuário tem ou não 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‟, é possível determinar um outro tamanho para o filme,digitando os novos valores em Width (largura) e Height (altura). E, por fim, seselecionar „Percent‟, pode-se determinar um valor relativo em porcentagem.- Playback: define a execução do filme, se quer executar em loop, sequer que apareça o menu (Display Menu), entre outros.- Quality: define a qualidade do filme. Quanto mais baixa a qualidade, aexecução do filme ocorrerá sem problemas, porém a qualidade pode ficarcomprometida. O padrão do Flash é High.- Window Mode: esse ítem funciona apenas no Internet Explorer e podedefinir a transparência de um filme, entre outros.- Alignment: especifica o tipo de alinhamento do filme em relação à páginaHTML.
  14. 14. 14- Scale: essa opção só funciona se você definir um tamanho diferente dotamanho do filme. Ela especifica como será a disposição do filme no espaçodisponível. O padrão é default, onde todo o filme será visível no espaçoespecificado.- Flash Alignment: define o alinhamento do filme.- Show Warning Messages: especifica se quer exibir mensagens de errose conflitos que possam surgir na hora da publicação..Em seguida clique em Publish (Publicar). Os arquivos selecionadosserão gerados no diretório em que a animação está salva.Abra e veja o resultado!SitesA seguir alguns sites onde você pode obter maiores informações sobre oFlash mx e recursos para usar nos seus projetos:Empresa:- Macromedia: site do fabricante: http://www.macromedia.com.brSites para desenvolvedores:Contém 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.htmlImagens: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/
  15. 15. 15CCoonncclluussããooEsperamos que você tenha aprendido Flash durante o curso.É normal que você tenha algumas dúvidas, mas consultando alguns tutoriais sobreFlash e fazendo suas perguntas em nossos fóruns de dúvidas, você verá seuaprendizado evoluir rapidamente.Quando sentir-se preparado(a), faça a prova referente ao 2º módulo.AtenciosamenteEquipe Cursos 24 Horas.

×