Tutorial Tirado do Site www.baboo.com.br Transformado Em PDF Por: Joais Buriti do Nascimento                        30/07/...
O que há de novo Flash MX 2004Estudo de camadas no FlashSom no FlashLinha guiaCursor personalizadoPainel propriedadesFazen...
O que há de novo Flash MX 2004O que veremos neste tutorial?Neste tutorial veremos o que há de novo na nova versão do Flash...
Com este painel podemos escolher entre abrir um documento recente, criar umnovo ou ainda criar um novo arquivo através de ...
Agora clique em Templates e perceba a diferença:Note que na opção Templates o Flash nos fornece além da descrição, uma pré...
Como você pode notar, a diferença deste painel de ferramentas para o da versãoanterior é a aparência, que mudou para melho...
Trabalhando com novos recursosO Flash MX 2004 (conforme já vimos) trouxe uma série de mudanças em termosde aparência mas e...
Esta janela de edição do efeito é aberta logo após aplicarmos o efeito em umacamada ou objeto, basta configurar e clicar e...
Este painel Behavior - também presente no Dreamweaver - foi uma ótima idéia daMacromedia pois reúne algumas das princiipai...
Além disso, é possível modificar o evento que acionará o comportamento, assimcomo é feito no Dreamweaver. Ainda falando so...
Quer controlar um vídeo inserido no Flash? Basta utilizar um Componenteprontinho! Agora, clique em UI Components e veja a ...
Ah, você quer editar as propriedades deste calendário para deixá-lo exclusivo oupara que ele se adapte às suas necessidade...
Perceba o número de ações disponíveis para utilização - todas divididasperfeitamente em seções. Como se não bastasse, temo...
Além da aparência nova, temos novas opções para configuração e otimização:                                                ...
Note que podemos inclusive setar a versão do ActioScript! Configurações HTML éque não faltam:                             ...
Deu pra perceber que melhorou bastante! Mas um software bom não pode deixarde ter um Help digno não é mesmo? Pensando niss...
Você pode conferir sobre as tarefas comuns, utilizar a opção How Do I... (Como eufaço para...) e atualizar seu Help entre ...
ainda quando trabalhamos com os novos efeitos da linha de tempo. É uma pena, jáque a versão MX (6.0) era tão leve.Mas afin...
Para deletar uma camada, primeiro selecione-a e logo em seguida clique no botãoda lixeira:É importante ressaltar que o Fla...
A Pasta é criada:Para colocar uma camada dentro da pasta, simplesmente clique na camada earraste-a para dentro da pasta:De...
Para ocultar a visualização deste objeto basta clicar no local indicado:E pronto, o objeto está ocultado! Há casos ainda e...
O objeto foi exibido em uma determinada cor, facilitando sua distinção do restantedos objetos. Para definir a cor do conto...
Agora aperte F8 para criar um Movie Clip:Defina o nome do símbolo e seu comportamento (Clipe de Filme ou Movie Clip):Agora...
Selecione aquele que será o botão Play e aperte F8 mas agora defina ocomportamento como Botão (Button). Faça o mesmo para ...
Coloque a ação stop(); para o Frame e feche o painel:Agora precisamos criar mais um Clipe de Filme, que conterá a ação do ...
Agora abra o painel de Ações para digitar a seguinte ação:Esta ação define o objeto som e agora precisamos definir a ação ...
Agora, a ação para o Stop:Essa ação pára qualquer som que esteja sendo tocado.Importando o som e definindo o vínculo      ...
Agora vem o mais fácil: basta importar o som clicando em Arquivo > Importar ouCtrl+R:Selecione o arquivo e clique em Abrir...
Agora é só dar o nome de som:Pronto, teste seu filme (Ctrl+Enter) e use a criatividade para inovar!Linha guia no Flash MXO...
Vamos fazer uma interpolação de movimento com esta pena, para isso, clique noFrame 10 e aperte F6 para criar um Keyframe:A...
Com a Interpolação já criada, já podemos criar uma camada guia clicando no seurespectivo botão:                           ...
Agora vamos desenhar uma linha guia com o Lápis, selecionando o primeiroFrame da Camada Guia:E desenhando a linha:        ...
Veja o caminho que a pena percorrerá:Ao darmos um Zoom você pode perceber que a pena - que é um Gráfico - estácentralizada...
Se quisermos por exemplo que ela percorra a linha através da ponta, basta editar oGráfico e colocá-la na ponta:           ...
Veja como ela percorrerá agora:Agora é só testar seu filme e usar a imaginação!Cursor personalizado com Flash MXVocê já vi...
Agora vamos exibir as Réguas para podermos utilizar as linhas guias, clicando emExibir > Réguas:Para criar uma linha guia,...
Os locais indicados em preto na imagem serão os vértices do triângulo! Agora,selecione a ferramenta caneta:Desenhe seu ret...
Volte para o zoom de 100% para ver o triângulo em seu tamanho real, selecione otriângulo e logo depois pressione a tecla F...
Após ter convertido-o em um Clipe de Filme, clique com o botão direito do mouse eescolha a opção Ações:Definindo as ações ...
Em destino devemos colocar /ponteiro e habilitar a opção Bloquear mouse nocentro para que o mouse fique no centro do Clipe...
Dê o nome de ponteiro para que o Flash possa fazer a ação rodar normalmente.Agora, se você testar seu filme - Ctrl+Enter -...
Painel propriedades no Flash MXNeste tutorial veremos qual a função do Painel propriedades do Flash MX, umpainel extremame...
Agora, clique no outro botão para modificarmos configurações de publicação:Você ainda pode modificar a cor de fundo do fil...
Trabalhando com propriedades de ferramentasAlém de trabalhar com as propriedades do documento que estamos trabalhando,pode...
Propriedades de TextoO painel facilita nossa vida quando trabalhamos com texto. Podemos definir todo otipo de formatação n...
Veja a definição de caracteres:Esta opção é extremamente útil para formulários por exemplo, onde podemosdefinir se ele ace...
Na Rectangle podemos modificar as mesmas propriedades:Com a ferramenta Pencil podemos modificar a cor do contorno, espessu...
Modificando propriedades de objetosCom o painel de propriedades podemos modificar os objetos criados no palco. Noexemplo a...
Basta clicar no Movie Clip para que suas propriedades apareção no painel. Acimafoi modificada a transparência!Propriedades...
3. Pode ser que o seu Temporary internet files esteja oculto: caso esteja, abra oWindows Explorer e vá em Ferramentas > Op...
4.1 Vá até o seu Temporary internet files e escolha a opção de exibição emdetalhes (ver figura abaixo)4.2 Clique em Acessa...
Criando Efeitos Fade-In/Out em texto com o SWiSHo SWiSH é um programa que cria animações em textos, criando arquivos flash...
Agora clique com o botão direito do mouse sobre Scene 1 e clique sobre Insert >Text:                                      ...
Surgirá uma tela onde você digitará seu texto: escolha seu texto, fonte e tamanho.A tela onde você digitará o texto é esta...
Em Duration: coloque 25 frames e logo após clique em Close. O efeito já está noseu texto. Agora vamos adicionar outra cena...
Agora vamos criar o efeito Fade-Out em outro texto.   Criando efeito Fade-Out em textoClique com o botão direito do mouse ...
Surgirá uma tela onde você digitará seu texto. Escolha seu texto, fonte e tamanho.A tela onde você digitará o texto é esta...
Surgirá esta tela:Clique em Close e o efeito já foi adicionado aos dois textos. Você poderá testar aduração dos frames uti...
A imagem acima já foi agrupada e pronta para ser animada mas antes de animarvamos ver o por quê de agrupar as camadas em u...
Clique em OK e perceba que agora seu painel de camadas está um poucodiferente do inicio:Repare na imagem acima o número de...
Neste painel você pode controlar desde número de frames por segundo atécompressão de imagem. Ao terminar a configuração, c...
Muito bem, você acaba de fazer sua animação dentro do Freehand e exportá-lacomo um SWF! Caso queira adicioná-la em um proj...
Nesta janela devemos configurar nossa animação de acordo com nossa vontade.Neste tutorial, utilizei 5 Frames mas você pode...
utilizar a opção Export SWF, portanto clique nela para obter a janela deconfiguração:Quando clicamos em Export SWF o Firew...
Ao clicar na figura o Fireworks será aberto e a figura pode ser editada de acordocom suas necessidades. Quando a edição es...
1. Clicando neste ícone poderá instalar novas extensões, apenas uma por vez.2. Ao selecionar uma extensão já instalada, cl...
7. Nesta área é mostrada informações adicionais sobre a extensão como, porexemplo, a descrição de uso e sua função explica...
Integrando Flash com Dreamweaver MXUma das muitas vantagens de se trabalhar com a suíte para Web da Macromedia éa integraç...
Feito isso nós teremos o filme em modo de edição, bastando alterar o que fornecessário e clicar no botão Done localizado n...
Agora só falta você praticar ... Sempre que precisar alterar um filme, bastaproceder desta forma! ;) ...Componentes do Fla...
Ao clicar em um dos components, você verá suas propriedades no Painel"Propriedades" e poderá alterar a sua cor, dados e ou...
O painel de Ações será aberto e você pode definir quais utilizar. Se você quiserutilizar o ComboBox, por exemplo, você ter...
Cenas (Scenes) já está aberto. Caso não esteja, basta abri-lo procedendo daseguinte forma:Clique em Window e depois em Sce...
um pouco necessária - e ela ainda pode atrapalhar, aumentando o tamanho doarquivo e/ou demorando na hora do Flash carregar...
Basicamente, é isto! Quando precisar de uma maior organização ou precisar dividira animação em Capítulos, basta utilizar o...
Na aba Flash temos várias opções: na primeira podemos escolher qual a versão doFlash que exportaremos. A segunda indica a ...
Clique em Set (o 1° ) e você terá a seguinte tela:Nela, o Flash nos dá a opção de modificarmos a "compressão" do arquivo d...
Esta aba tem várias opções interessantes e poucas pessoas conhecem/utilizamesta "mão na roda". Para este tutorial, o que n...
Provavelmente você já viu a maioria das ferramentas deste painel em algumsoftware gráfico, como Photoshop e Corel Draw, ap...
imagem. Clicando nesta ferramenta, o flash ainda nos dá a possibilidade deescolhermos por exemplo a opção varinha mágica. ...
Lock Fill: Serve para travarmos um determinado preenchimento                  O painel ao lado nos mostra as opções de pre...
Eyedropper Tool (I) - a ferramenta Eyedropper ou simplesmente "conta gotas"serve para capturarmos uma determinada cor de u...
Transformação - Serve para transformação de objetos. Transformar uma linhareta em curva por exemplo.Bom, é isso aí! Espero...
Upcoming SlideShare
Loading in...5
×

Tutorial de macromedia flash

5,106

Published on

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

No Downloads
Views
Total Views
5,106
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
110
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Tutorial de macromedia flash"

  1. 1. Tutorial Tirado do Site www.baboo.com.br Transformado Em PDF Por: Joais Buriti do Nascimento 30/07/04Tutorial deMacromedia Flash Tutorial Tirado do Site www.baboo.com.br Transformado Em PDF Por: Joais Buriti do Nascimento 30/07/04 1
  2. 2. O que há de novo Flash MX 2004Estudo de camadas no FlashSom no FlashLinha guiaCursor personalizadoPainel propriedadesFazendo download de animações FlashCriando Efeitos Fade-In/Out em texto com o SWiSHIntegrando Freehand ao FlashIntegrando Fireworks ao FlashMacromedia Extension Manager Integrando Flash com DreamweaverComponentes do Flash MXCenas no Flash MXOtimizando arquivosPainel Tools 2
  3. 3. O que há de novo Flash MX 2004O que veremos neste tutorial?Neste tutorial veremos o que há de novo na nova versão do Flash MX, que já émuito comentada entre os profissionais que trabalham com este maravilhososoftware da Macromedia. Veremos as principais mudanças em relação a versãoanterior - MX apenas - e também alguns recursos que são novos, exclusivos daversão 2004. Ao final, uma conclusão sobre o software.Conhecendo o programaBaixe a versão Trial do site da Macromedia e instale em seu PC. Após ainstalação, abra o software clicando em seu ícone e veja que o Flash mostrará aseguinte tela:Esta tela nos pergunta se já temos um número serial válido ou se queremosexperimentar o software, opção que será utilizada neste tutorial! Selecione a opçãoe clique em Continue para que o Flash MX 2004 Professional seja carregado.Quem já conhece ou trabalha com o programa, notará logo de cara uma mudança -pra melhor inclusive - nesta versão, o painel mostrado abaixo: 3
  4. 4. Com este painel podemos escolher entre abrir um documento recente, criar umnovo ou ainda criar um novo arquivo através de um modelo. Para conhecermosmelhor o painel e as novas opções, clique em Photo Slideshows:Ao clicarmos na opção desejada, uma janela é aberta nos fornecendo duasopções: General (geral) ou Templates (modelos). Clique primeiro em General paraconhecer: 4
  5. 5. Agora clique em Templates e perceba a diferença:Note que na opção Templates o Flash nos fornece além da descrição, uma préviado arquivo modelo que estamos escolhendo. Clique em OK e esqueça um poucoagora os templates e vamos ver o que há de novo no painel de ferramentas: 5
  6. 6. Como você pode notar, a diferença deste painel de ferramentas para o da versãoanterior é a aparência, que mudou para melhor com toda a certeza! Além disso,nossa área de trabalho também foi modificada, deixando-nos mais à vontade epoupando tempo. Uma das mudanças foi quanto aos documentos abertos, queagora ficam como uma espécie de ficha no topo da tela, bastando clicar nodocumento desejado para mudar: 6
  7. 7. Trabalhando com novos recursosO Flash MX 2004 (conforme já vimos) trouxe uma série de mudanças em termosde aparência mas engana-se quem pensa que parou por aí. Inteligentemente, aMacromedia modificou muita coisa em termos de recursos, preocupando-seprincipalmente com o fato de poupar o máximo de tempo possível dodesenvolvedor. Prova disso são os efeitos que podem ser aplicados com um cliqueatravés do menu que é exibido com o clique direito do mouse:Lembra-se daquele efeito de Blur que você demorava alguns minutos pra executar,utilizando várias camadas e frames? Pois é, agora é possível executar esse Blurcom um clique e configurar suas propriedades: 7
  8. 8. Esta janela de edição do efeito é aberta logo após aplicarmos o efeito em umacamada ou objeto, basta configurar e clicar em OK. O Flash fará tudo por você:Veja os frames com o efeito que o próprio Flash criou! Achou que o efeito de Blurnão é o bastante? Então que tal por exemplo, poder aplicar a ação para arrastarum Movie Clip com um clique, dispensando o painel de ações? Aqui está: 8
  9. 9. Este painel Behavior - também presente no Dreamweaver - foi uma ótima idéia daMacromedia pois reúne algumas das princiipais funções utilizadas pelosdesenvolvedores - e que agora estão disponíveis com apenas um clicar de mouse!Ao aplicar um comportamento em um Movie Clip por exemplo, o Flash exibe ajanela para que o Movie Clip seja indicado:Percebeu como tudo ficou muito mais fácil, poupando muito trabalho? Basta indicaro Movie Clip e clicar em OK para que o comportamento seja aplicado: 9
  10. 10. Além disso, é possível modificar o evento que acionará o comportamento, assimcomo é feito no Dreamweaver. Ainda falando sobre comportamentos, para quêperder tempo escrevendo ações para sons se temos isso - mais uma vez - a umclique do mouse? Veja:Extremamente fácil não é? Mas prepare-se por que isso ainda não é tudo que háde novo (ainda bem!): não podemos deixar de falar dos Components, aquelescomponentes que foram utilizados pela primeira vez no Flash MX. Só que destavez eles estão ainda melhores e separados por áreas:Para agradar à Gregos e Troianos, o Flash MX 2004 oferece componentes paratodos os gostos! Clique em Data Components e veja a lista:Com componentes prontos fica ainda mais fácil trabalhar com dados! Agora cliqueem Media Components: 10
  11. 11. Quer controlar um vídeo inserido no Flash? Basta utilizar um Componenteprontinho! Agora, clique em UI Components e veja a "pequena" lista:Emocionante não é mesmo? Veja o número de componentes que podemos utilizar,desde formulários até inserção um calendário feito em XML: 11
  12. 12. Ah, você quer editar as propriedades deste calendário para deixá-lo exclusivo oupara que ele se adapte às suas necessidades? Sem problemas, basta utilizar oComponent Inspector para isso:Agora é só mudar aquilo que não lhe agrada !Finalizando o TourJá vimos muita coisa nova nesta versão mas ainda não é tudo! Não poderia deixarde mencionar as mudanças de um painel extremamente importante para quemtrabalha com Flash: O painel de ações! Com um visual um pouco diferente e aindamais funcional, é com certeza uma das melhorias que mais me agrada: 12
  13. 13. Perceba o número de ações disponíveis para utilização - todas divididasperfeitamente em seções. Como se não bastasse, temos ainda uma indicação dacena e seleção que estamos aplicando a ação! Só pra você ter uma idéia donúmero de ações disponíveis:Incrivel, não ? :) ... Agora, de que adiantaria tantas mudanças se na hora depublicarmos nosso trabalho não pudessemos configurá-lo perfeitamente? Este éum trabalho para o Publish Settings que foi reformulado: 13
  14. 14. Além da aparência nova, temos novas opções para configuração e otimização: 14
  15. 15. Note que podemos inclusive setar a versão do ActioScript! Configurações HTML éque não faltam: 15
  16. 16. Deu pra perceber que melhorou bastante! Mas um software bom não pode deixarde ter um Help digno não é mesmo? Pensando nisso, a Macromedia elaborou umdos Helps mais eficazes já vistos, totalmente intuitivo: 16
  17. 17. Você pode conferir sobre as tarefas comuns, utilizar a opção How Do I... (Como eufaço para...) e atualizar seu Help entre outras opções.Deja vúDeixei esta novidade especialmente para o final do tutorial, pois é bastanteinteressante. Veja a imagem abaixo:Você já viu isso antes ou então este layout não te lembra algo? Pois é, parece quea Macromedia - percebendo que o Flash faz sucesso em apresentações, graças asua interatividade - resolveu investir na área de apresentações. Com umaaparência que se assemelha ao PowerPoint, o usuário pode adicionar e removerSlides, adicionar interações com usuários, utilizar XML, componentes e váriasoutras opções que tornam a apresentação no mínimo interessante! É dar tempo aotempo pra ver se essa investida "pega".ConclusãoÉ claro que ainda é muito cedo para avaliar o software completamente e dizer seele é bom ou ruim. Pelo que pude notar, o Flash MX 2004 traz recursos muitointeressantes e úteis aos desenvolvedores, principalmente quando o assunto époupar tempo! Demora um pouco até que o usuário se familiarize com tudo o que énovo mas isso não será problema para a grande maioria! Alguns tópicosinteressantes:- Para a tristeza de muitos, não foi desta vez que foi incluído um recurso 3D aosoftware - e a meu ver será muito difícil disso acontecer, já que de acordo com aMacromedia existem outros softwares no mercado que fazem esse trabalho muitobem, exportando um formato compatível com o Flash. Mas como a esperança é aúltima que morre, fica aí a expectativa - afinal a Macromedia já resolveu investir nosegmento de apresentações (dominado pelo PowerPoint) e para a linha de vídeo...- Um dos problemas que pude perceber ao utilizar a nova versão: é pesadodemais! Rodando num Athlon XP 2000+ com 512DDR, o software "pede água"muitas vezes, principalmente quando trabalhamos com vídeo, testamos a cena ou 17
  18. 18. ainda quando trabalhamos com os novos efeitos da linha de tempo. É uma pena, jáque a versão MX (6.0) era tão leve.Mas afinal, o Upgrade vale a pena? Bom, se você tem um PC "generoso" e utilizamuito o Flash, com certeza o Upgrade vale a pena, já que muito trabalho époupado. Porém, se seu PC é um pouco mais modesto ou então se seu trabalhocom Flash resume-se à animações simples, é melhor ficar com a versão MXmesmo, pelo menos por enquanto.Estudo de camadas no FlashAs camadas são indispensáveis para o Flash pois com elas podemos organizarmelhor nosso projeto e utilizar efeitos. Neste tutorial veremos um pouco sobreCamadas no Flash, como trabalhar com uma camada e quais são suas opções deedição e visualização.Entendendo as camadasEssa é a visualização que temos das camadas no Flash:Pelo que se pode ver, temos várias opções e dentre elas o nome da camada quepode ser trocado:Basta dar um duplo clique no nome e alterá-lo. Quando precisarmos criar umanova camada, basta clicar no botão indicado abaixo:A outra camada é criada com o nome padrão de Camada 2, seguindo anumeração: 18
  19. 19. Para deletar uma camada, primeiro selecione-a e logo em seguida clique no botãoda lixeira:É importante ressaltar que o Flash não pede a confirmação para que a camadaseja deletada - portanto tenha cuidado !Camada GuiaO Flash possui um tipo de camada chamada Guia que permite que utilizemos umalinha como guia para símbolos e objetos em geral. Para criar uma camada guia,simplesmente clique no botão indicado:Desta forma a camada é criada e possui uma aparência um pouco diferente:Como indicação, em seu nome sempre temos: Guia: Nome da Camada.Agrupando camadas em PastasEsta opção é muito interessante quando temos um projeto com diversas camadas,dificultando o trabalho já que a lista é grande. Para facilitar na organização, o Flashpossui a possibilidade de colocarmos uma ou mais camadas dentro de uma pasta,clicando no ícone: 19
  20. 20. A Pasta é criada:Para colocar uma camada dentro da pasta, simplesmente clique na camada earraste-a para dentro da pasta:Desta forma a organização é maior, facilitando o trabalho.Opções de visualização e travamentoQuando estamos trabalhando com uma camada, um ícone de Lápis é exibido paraindicar que aquela camada está sendo editada:Temos a opção de ocultar a visualização de uma camada e isso é feito geralmentequando se quer ver o conteúdo das camadas que estão abaixo. Veja um exemploaonde a camada que está sendo editada possui um objeto no palco: 20
  21. 21. Para ocultar a visualização deste objeto basta clicar no local indicado:E pronto, o objeto está ocultado! Há casos ainda em que queremos que o conteúdode uma camada seja travado, ou seja, não possa sofrer modificações. Basta clicarno local indicado:Desta forma o objeto não será modificada ao menos que a camada sejadestravada.Outras opçõesQuando se tem várias camadas, fica difícil saber qual o conteúdo de cada umadelas já que está tudo misturado no palco. É justamente por isso que existe aopção de visualização em aramado. Veja um exemplo: 21
  22. 22. O objeto foi exibido em uma determinada cor, facilitando sua distinção do restantedos objetos. Para definir a cor do contorno, dê um duplo clique no local indicadoacima para que a janela seja aberta:Agora é só definir a cor do contorno desejada. Perceba ainda que outras opçõespodem ser modificadas, desde nome até o tipo e altura da camada!Som no Flash MXQuando começamos a mexer com o Flash, desejamos aprimorar os nossosprojetos utilizando som. Neste tutorial aprenderemos a construir um controlador desom - Play e Stop - para um MP3 da Biblioteca do Flash!Construindo o controladorFaça o desenhe do que será o botão de Play e Stop e selecione os dois logo emseguida: 22
  23. 23. Agora aperte F8 para criar um Movie Clip:Defina o nome do símbolo e seu comportamento (Clipe de Filme ou Movie Clip):Agora dê dois cliques para abrir a edição do Clipe de Filme: 23
  24. 24. Selecione aquele que será o botão Play e aperte F8 mas agora defina ocomportamento como Botão (Button). Faça o mesmo para o Stop:Agora, crie mais um Frame na linha de tempo - simplesmente clique no Frame 2e pressione a tecla F6:Clique com o botão direito no Frame 1 e escolha a opção Ações: 24
  25. 25. Coloque a ação stop(); para o Frame e feche o painel:Agora precisamos criar mais um Clipe de Filme, que conterá a ação do som. Façaum quadrado qualquer e defina-o como Clipe de Filme:Para que este Clipe de Filme não fique visível, selecione-o e defina sua cor comoAlpha 0% na barra de propriedades: 25
  26. 26. Agora abra o painel de Ações para digitar a seguinte ação:Esta ação define o objeto som e agora precisamos definir a ação de cada um dosbotões. Selecione o Frame 1, abra o painel de Ações para o botão Play e digitea ação: 26
  27. 27. Agora, a ação para o Stop:Essa ação pára qualquer som que esteja sendo tocado.Importando o som e definindo o vínculo 27
  28. 28. Agora vem o mais fácil: basta importar o som clicando em Arquivo > Importar ouCtrl+R:Selecione o arquivo e clique em Abrir para que o Flash importe o som para aBiblioteca (Ctrl+L para abrir a biblioteca). Clique com o botão direito do mouseno arquivo de Som e escolha a opção Vinculação: 28
  29. 29. Agora é só dar o nome de som:Pronto, teste seu filme (Ctrl+Enter) e use a criatividade para inovar!Linha guia no Flash MXO que aprenderemos?Você alguma vez já viu um site em Flash onde um objeto fazia uma trajetória em Spor exemplo? Muita gente se pergunta como foi feito o efeito, já que teoricamentesó podemos fazer Interpolações de movimento horizontais, verticais ou diagonais.Muito bem, é justamente isso que aprenderemos neste tutorial, utilizando a camadaguia!Aprendendo na práticaPara fazermos uma trajetória diferente, vamos utilizar a camada guia e depois criaruma linha guia que servirá como guia para o objeto animado. Não confunda essalinha guia com a linha guia que utilizamos com réguas! Ainda não é hora mas saibaque para acrescentar uma linha guia basta clicar no botão indicado:Este é o objeto que faremos a animação, uma pena: 29
  30. 30. Vamos fazer uma interpolação de movimento com esta pena, para isso, clique noFrame 10 e aperte F6 para criar um Keyframe:Agora é só selecionar tudo e clicar com o botão direito para escolher a opção CriarInterpolação de Movimento:Selecione o último Frame e desloque a pena para outro local do palco: 30
  31. 31. Com a Interpolação já criada, já podemos criar uma camada guia clicando no seurespectivo botão: 31
  32. 32. Agora vamos desenhar uma linha guia com o Lápis, selecionando o primeiroFrame da Camada Guia:E desenhando a linha: 32
  33. 33. Veja o caminho que a pena percorrerá:Ao darmos um Zoom você pode perceber que a pena - que é um Gráfico - estácentralizada e percorre a linha guia através do ponto do centro: 33
  34. 34. Se quisermos por exemplo que ela percorra a linha através da ponta, basta editar oGráfico e colocá-la na ponta: 34
  35. 35. Veja como ela percorrerá agora:Agora é só testar seu filme e usar a imaginação!Cursor personalizado com Flash MXVocê já viu provavelmente em algum site produzido em Flash um cursorpersonalizado no lugar da velha "setinha" que temos como padrão. O Flash nospossibilita a crição de um cursor personalizado - como o logotipo de nossaempresa por exemplo - proporcionando um efeito diferente e exclusivo ao site! Éjustamente isso que aprenderemos neste tutorial, como criar os famosos cursorespersonalizados...Criando o cursorVamos criar um cursor simples, constituído de um triângulo de cor cinza. Antes decomeçar a desenhar, vamos habilitar a opção para visualizar a grade no Flashclicando em Exibir > Grade > Mostrar Grade: 35
  36. 36. Agora vamos exibir as Réguas para podermos utilizar as linhas guias, clicando emExibir > Réguas:Para criar uma linha guia, basta clicar na régua e arrastar a linha para o localdesejado. Como vamos criar um cursor que é um triângulo, precisamos configuraras linha-guia para que o desenho seja o mais perfeito possível. Dê um zoomgrande na tela para que você possa ver bem a grade e configure sua linha guia: 36
  37. 37. Os locais indicados em preto na imagem serão os vértices do triângulo! Agora,selecione a ferramenta caneta:Desenhe seu retângulo com a caneta, clicando nos pontos mostrados acima. Apóster feito o desenho, retire as linha guia para ver como ficou: 37
  38. 38. Volte para o zoom de 100% para ver o triângulo em seu tamanho real, selecione otriângulo e logo depois pressione a tecla F8 para convertê-lo em um Clipe deFilme: 38
  39. 39. Após ter convertido-o em um Clipe de Filme, clique com o botão direito do mouse eescolha a opção Ações:Definindo as ações do CursorEsta é a parte onde definimos a programação que fará com que o Flash simule oefeito de cursor. Clique no + e escolha o caminho Ações > Controle do clipe defilme > startDrag (ou simplesmente aperte Esc+dr):Selecione a linha startDrag e configure-a: 39
  40. 40. Em destino devemos colocar /ponteiro e habilitar a opção Bloquear mouse nocentro para que o mouse fique no centro do Clipe de Filme. Agora selecione alinha onClipEvent e configure-a:Devemos escolher a opção Mouse moviment para que o Clipe de Filme comece aser arrastado quando o mouse for movimentado. Feche o painel de ações eselecione seu Clipe de Filme. Quando selecionamos o Clipe de Filme podemos darum nome de instância à ele através do painel de Propriedades do Flash: 40
  41. 41. Dê o nome de ponteiro para que o Flash possa fazer a ação rodar normalmente.Agora, se você testar seu filme - Ctrl+Enter - verá que o Clipe de Filme é arrastadojunto ao mouse quando o movimentamos mas o cursor "setinha" ainda estápresente. Para eliminar o cursor "setinha" vamos utilizar mais uma vez as ações,portanto, clique com o botão direito no Clipe de Filme e escolha a opção Ações.Escolha o caminho Objetos > Filme > Mouse > Métodos > hide:Agora é só testar o filme e ver seu novo cursor!! 41
  42. 42. Painel propriedades no Flash MXNeste tutorial veremos qual a função do Painel propriedades do Flash MX, umpainel extremamente útil, que poupa muito trabalho e tempo. Com ele, podemosmodificar desde propriedades de ferramentas até propriedades do filme ou timeline!Conhecendo o painelVamos começar abrindo o painel de propriedades do Flash MX. Clique emWindow>Properties conforme indica a figura:Quando abrimos o painel, ele nos indica as propriedades do filme que estamostrabalhando. Na imagem abaixo podemos ver que o painel indica o tamanho dofilme, o plugin de publicação, a cor de fundo e a taxa de Frames por segundo:Caso você não queira que o painel fique "flutuando" na tela, você pode acoplá-lo àinterface do Flash, bastando arrastar o painel para o local desejado:Mudando as configurações do filmePara vermos na prática o funcionamento do painel de Propriedades, vamos alteraralgumas configurações do filme. Clique no local indicado abaixo para modificarmosalgumas opções: 42
  43. 43. Agora, clique no outro botão para modificarmos configurações de publicação:Você ainda pode modificar a cor de fundo do filme e o FPS no próprio painel: 43
  44. 44. Trabalhando com propriedades de ferramentasAlém de trabalhar com as propriedades do documento que estamos trabalhando,podemos modificar as propriedades das ferramentas do Flash. Veja no exemploabaixo, a mudança de propriedades da ferramenta Linha:Podemos modificar sua cor, tamanho do contorno, tipo de contorno com os préestabelecidos pelo Flash e ainda customizarmos clicando no botão indicado acima.Veja como podemos modificar o tipo de Linha:Com isso podemos ter um maior controle da ferramenta, setando-a de acordo comnossa necessidade.Pen ToolA Pen Tool também pode ter suas propriedades modificadas:Podemos mudar cor de preenchimento, contorno e tipo de contorno! 44
  45. 45. Propriedades de TextoO painel facilita nossa vida quando trabalhamos com texto. Podemos definir todo otipo de formatação necessária para o texto:Clicando em Format podemos definir por exemplo o espaçamento entre linhas eoutras formatações:Além da formatação, podemos definir o tipo de texto que estaremos utilizando (seele será estático, dinâmico ou para entrada de dados):Caso queira definir se o texto será de uma linha, inserir variáveis e definir oscaracteres que o campo aceita e muito mais, é pelo painel de propriedades que"faremos o serviço": 45
  46. 46. Veja a definição de caracteres:Esta opção é extremamente útil para formulários por exemplo, onde podemosdefinir se ele aceitará qualquer tipo de caracter ou não.No exemplo abaixo o texto foi formatado com um espaçamento de linha de 2pontos:Já neste, o campo de texto recebeu o comportamento de Texto para entrada dedados, utilizado em formulários:Oval, Rectangle e Pencil ToolSeguindo a linha da maioria das ferramentas, a Oval também pode ter suaspropriedades modificadas. Com ela podemos modificar preenchimento, contorno etipo de contorno: 46
  47. 47. Na Rectangle podemos modificar as mesmas propriedades:Com a ferramenta Pencil podemos modificar a cor do contorno, espessura e tipo decontorno:Brush, Ink Bottle, Paint Bucket ToolCom a ferramenta Brush selecionada, podemos modificar a cor do preenchimento:Já com a Ink Bottle podemos mudar a cor do contorno, espessura e tipo:Podemos modificar a cor de preenchimento da Paint Bucket: 47
  48. 48. Modificando propriedades de objetosCom o painel de propriedades podemos modificar os objetos criados no palco. Noexemplo abaixo, a linha foi criada com a ferramenta Pen (caneta) e teve suaspropriedades modificadas - no caso o tipo de contorno e seu tamanho:Ao criarmos um retângulo, podemos modificar suas propriedades:Perceba que tudo foi modificado, desde cor de preenchimento até tipo de contorno!Modificando propriedades de símbolosComo não poderia deixar de ser, os símbolos também têm seu espaço garantidono painel de propriedades! Muitas vezes precisamos modificar propriedades de umMovie Clip (como transparência, por exemplo) e é pelo painel que devemosproceder: 48
  49. 49. Basta clicar no Movie Clip para que suas propriedades apareção no painel. Acimafoi modificada a transparência!Propriedades da timelineEvidentemente a timeline não poderia ficar de fora! Ao selecionarmos um ou váriosFrames (quadros) o painel de propriedades exibe as opções existentes, que éclaro, podem ser modificadas.Propriedades como interpolação, efeitos, som e várias outras podem sermodificadas através do painel com um simples clique do mouse! Isso facilita muitoa vida do desenvolvedor, poupando tempo e trabalho!Fazendo download de animações FlashVocê com certeza já jogou algum jogo em Flash ou viu boas animações pelaInternet e quis salvá-las - mas nunca soube como ? Então este tutorial ajudarámuito você !1. Primeiramente crie uma pasta chamada Flash para salvar as suas animações.2. Precisamos saber onde está localizada a pasta Temporary internet files, poissua localização varia de acordo com o sistema operacional usado: abra o InternetExplorer e clique em Ferramentas > Opções da internet.Em "Arquivos de Internet temporários" clique em Configurações e você verá alocalização da pasta Temporary Internet files. 49
  50. 50. 3. Pode ser que o seu Temporary internet files esteja oculto: caso esteja, abra oWindows Explorer e vá em Ferramentas > Opções de pasta (Windows XP ousimilar) ou Menu iniciar > Configurações > Opções de pasta (Windows 98 ousimilar).Em Opções de pasta, vá na aba Modo de exibição, desmarque a opção Ocultararquivos protegidos do sistema operacional e marque Mostrar pastas earquivos ocultos. 50
  51. 51. 4.1 Vá até o seu Temporary internet files e escolha a opção de exibição emdetalhes (ver figura abaixo)4.2 Clique em Acessado em, para definir uma ordem na data em que os arquivosforam acessados4.3 É só ir para o começo da lista que você verá os últimos arquivos que foramacessados. A extensão destas animações ou jogos em Flash é swf e quando vocêlocalizar um arquivo swf recentemente acessado, abra-o.Se for o arquivo que você queria copiar, copie-o para a pasta Flash ! Agora você játem o arquivo Flash e pode acessá-lo quando quiser : ) 51
  52. 52. Criando Efeitos Fade-In/Out em texto com o SWiSHo SWiSH é um programa que cria animações em textos, criando arquivos flash(*.swf). O SWiSH está disponível para download em http://www.swishzone.com nasua versão Trial (30 dias para expirar).O termo Texto escolhido é o efeito Fade-In e o termo Texto 2 será o efeito Fade-Out :) ... Criando efeito Fade-In em textoAbra o SWiSH: 52
  53. 53. Agora clique com o botão direito do mouse sobre Scene 1 e clique sobre Insert >Text: 53
  54. 54. Surgirá uma tela onde você digitará seu texto: escolha seu texto, fonte e tamanho.A tela onde você digitará o texto é esta:Agora vamos aplicar o efeito Fade-In sobre o texto. Clique com o botão direito domouse sobre o texto na animação e clique em Effect > Fade In: 54
  55. 55. Em Duration: coloque 25 frames e logo após clique em Close. O efeito já está noseu texto. Agora vamos adicionar outra cena para podermos criar o efeito Fade-Out: clique com o botão direito do mouse sobre Scene 1 e clique em Insert >Scene: 55
  56. 56. Agora vamos criar o efeito Fade-Out em outro texto. Criando efeito Fade-Out em textoClique com o botão direito do mouse sobre Scene 2 e clique sobre Insert > Text: 56
  57. 57. Surgirá uma tela onde você digitará seu texto. Escolha seu texto, fonte e tamanho.A tela onde você digitará o texto é esta logo abaixo:Agora vamos aplicar o efeito Fade-Out sobre o texto: clique com o botão direito domouse sobre o texto na animação e clique em Effect > Fade Out, como na telaabaixo: 57
  58. 58. Surgirá esta tela:Clique em Close e o efeito já foi adicionado aos dois textos. Você poderá testar aduração dos frames utilizando esta barra logo abaixo:Clique em > para visualizar a animação, e caso queira aumentar a duração dotempo dos efeitos, aumente os frames de cada efeito (Fade-In e Fade-Out) ;) ...Integrando Freehand ao FlashDo que trata esse tutorial?Neste tutorial veremos como tornar o trabalho entre o Freehand e o Flash - ambosda Macromedia - mais fácil e rápido, utilizando as opções de integração que elesnos oferecem! Vamos ver como fazer uma animação e exportar como SWF dentrodo próprio Freehand :) ...Começando a animaçãoComece fazendo seu gráfico/objeto no Freehand e em seguida aperte Ctrl+G paraagrupar todas as camadas. Neste tutorial, fiz uma capa de CD - extremamentesimples - apenas para ilustrar. Veja: 58
  59. 59. A imagem acima já foi agrupada e pronta para ser animada mas antes de animarvamos ver o por quê de agrupar as camadas em uma só para só depois seguirmoscom a animação. É muito simples: o Freehand só fará a animação se as camadasestiverem agrupadas - caso contrário será exibida uma janela de aviso pedindo queas camadas sejam agrupadas.Para fazer a animação, selecione o objeto e depois clique em Xtras > Animate >Release to Layers para que o Freehand distribua todos os objetos em camadas daanimação. A figura abaixo indica onde fica o menu Xtras:Quando clicamos em Release to Layers, o Freehand nos mostra uma janela paraconfigurarmos o tipo de animação que queremos e alguns parâmetros destaanimação. Neste tutorial, utilizarei animação do tipo Build (construir). Veja aconfiguração abaixo: 59
  60. 60. Clique em OK e perceba que agora seu painel de camadas está um poucodiferente do inicio:Repare na imagem acima o número de camadas que foi utilizado para fazer aanimação. Logo após fazer a animação, aperte Ctrl+Enter para testá-la (issomesmo: da mesma forma que se testa no Flash). Ao testar a animação o Freehandnos "leva" para uma outra tela, onde podemos encontrar o painel de comando daanimação juntamente com os botões de exportação e configuração:Caso esteja satisfeito com sua animação e queira exportá-la sem uma préviaconfiguração (número de frames por segundo por exemplo), basta clicar nosegundo botão da direita para a esquerda. Caso queira fazer uma configuração,clique no botão com o símbolo do Flash destacado em vermelho e veja a seguintetela: 60
  61. 61. Neste painel você pode controlar desde número de frames por segundo atécompressão de imagem. Ao terminar a configuração, clique em OK e exporte seutrabalho: 61
  62. 62. Muito bem, você acaba de fazer sua animação dentro do Freehand e exportá-lacomo um SWF! Caso queira adicioná-la em um projeto Flash, basta abrir o Flash edepois importar o SWF.Integrando Fireworks ao FlashEste tutorial trata sobre a integração entre duas ferramentas da Macromedia: oFireworks e o Flash. Provavelmente você já fez algum objeto no Fireworks eprecisou exportá-lo para o Flash para fazer a animação, não é mesmo? Estetutorial mostra exatamente como integrar estes dois aplicativos de forma rápida efácil: você poderá construir o objeto e até mesmo animá-lo dentro do Fireworks esimplesmente exportar como um SWF do Flash!Começando no FireworksNeste tutorial, utilizei o logo do Fórum do BABOO como objeto para a animaçãodentro do Fireworks:Para começar a animação, clique com o botão direito em cima do objeto e escolhaa opção Animation>Animate Selection ou simplesmente aperte Alt+Shift+F8.Você verá a seguinte janela: 62
  63. 63. Nesta janela devemos configurar nossa animação de acordo com nossa vontade.Neste tutorial, utilizei 5 Frames mas você pode utilizar quantos quiser! Apósconfigurar, clique em OK e perceba que seu objeto ficará semelhante ao daimagem abaixo:Estas "bolinhas" indicam o número de Frames da animação e a bolinha vermelhaindica a posição final do objeto no final da animação. Posicione-a como quiser eteste a animação clicando no botão Play posicionado perto da barra depropriedades. Depois de configurar e testar a animação, basta exportar o SWF ouentão "chamar" o Flash para fazer qualquer tipo de edição. A imagem abaixomostra o menu:Perceba que você pode abrir o Flash clicando em Launch Macromedia Flash ouentão exportar o SWF escolhendo a opção Export SWF. Neste tutorial iremos 63
  64. 64. utilizar a opção Export SWF, portanto clique nela para obter a janela deconfiguração:Quando clicamos em Export SWF o Fireworks nos apresenta a janela paraindicarmos o local onde salvaremos o arquivo e seu respectivo nome. Além disso,existe um botão Options - indicado na figura acima - que serve para configurarmosalgumas opções do SWF a ser exportado, como por exemplo a qualidade do JPEGe o número de frames. Configure o SWF e clique em OK e logo em seguida salveseu trabalho. Pronto: você acaba de fazer uma animação SWF dentro do Fireworks!Editando no Fireworks e exportando de volta para o FlashVocê já deve ter se deparado com a seguinte situação: Importou uma imagem parao Flash (um GIF, por exemplo) e percebeu que ela estava um pouco maior do queo necessário ou então com as cores erradas. Neste caso, você não precisa abrir aimagem em um editor de imagens, alterá-la, exportá-la e importá-la novamente noFlash: basta você selecionar a imagem e clicar no botão Edit: 64
  65. 65. Ao clicar na figura o Fireworks será aberto e a figura pode ser editada de acordocom suas necessidades. Quando a edição estiver pronta, basta clicar no botãoDone localizado no canto superior esquerdo da tela, perto da aba Preview:A tela voltará para o Flash e você pode seguir seu trabalho normalmente!Macromedia Extension ManagerUma grande ferramenta da Macromedia é o Extension Manager, um pequenoaplicativo que "turbina" os outros programas (Dreamweaver, Flash, Fireworks) e épossível baixar "extensões" na Web e instalá-las nos programas para obteralgumas funções adicionais. Saiba como usá-lo:Antes de tudo iniciar o Extension Manager......e então, a primeira e única janela do Extension Manager se abrirá: 65
  66. 66. 1. Clicando neste ícone poderá instalar novas extensões, apenas uma por vez.2. Ao selecionar uma extensão já instalada, clicando nesse ícone é possível deletá-la.3. Nesse menu, estará presente todos os programas da Macromedia instalados.4. Clicando nesse ícone será direcionado para o site de intercâmbio daMacromedia e lá é possível baixar novas extensões.5. Abrir o arquivo de ajuda do Extension Manager.6. De acordo com o programa escolhido no menu acima (campo 3), é mostradonesta área todas extensões já instaladas para tal aplicativo:- Ativo/Inativo: Desmarcando essa "checkbox" poderá remover parcialmente aextensão do programa. Caso queira ativar novamente a mesma depois de umtempo marca-se essa caixa novamente.- Extensões instaladas: Mostra o nome da extensão.- Versão: Mostra a versão de determinada extensão.- Tipo: Exibe o gênero da extensão, sendo estes: Comportamento(Behaviors) ouComando.- Autor: Por último é exibido o autor de determinada extensão. 66
  67. 67. 7. Nesta área é mostrada informações adicionais sobre a extensão como, porexemplo, a descrição de uso e sua função explicada detalhadamente.Clicando no menu Arquivo, temos:Instalar a extensão: Já descrito acima.Empacotar extensão: Quando se cria uma nova extensão usa-se este recursopara criar um pacote da mesma e pode distribuí-la mais facilmente na Web.Enviar a extensão: Ao clicar sobre este menu, será direcionado para uma páginano site da Macromedia aonde se obtém mais informações de como enviar suaextensão.Remover extensão: Já descrito acima.Importar extensões: Usa-se quando desejar importar muitas extensões de uma sóvez.Ir para o intercâmbio da Macromedia: Já descrito acima.Sair: Sairá do Extension Manager.Vale lembrar que, para que as extensões instaladas apareçam no programadesejado, é preciso fechá-lo, caso esteja aberto, e iniciá-lo novamente. 67
  68. 68. Integrando Flash com Dreamweaver MXUma das muitas vantagens de se trabalhar com a suíte para Web da Macromedia éa integração fácil e rápida entre os softwares: neste tutorial eu abordarei umarápida integração entre o Flash e o Dreamweaver MX, que poupará muito tempo etrabalho! Vamos começar:Ao inserir um arquivo do Flash (usualmente um swf) no Dreamweaver, você notaráque na barra de Propriedades (Properties / Ctrl + F3) você tem algumasinformações sobre o arquivo além de algumas opções adicionais de configuração.Veja a figura abaixo:Note que este painel nos informa o tamanho do filme (circulado de vermelho acima)e uma série de botões de configuração. Vejamos a função de cada um deles:Loop: Deixe esta opção marcada caso queira que seu filme fique dando Loop, ouseja, não pare de "tocar";Autoplay: Deixe esta opção caso queira que seu filme começe a "tocar", ou inicie,automaticante;V Space: Espaçamento vertical;H Space: Espaçamento horizontal;W: Largura (width) do filme;H: Altura (Height) do filme;File: Indica o local em que o filme se localiza;Quality: Escolha a qualidade que você quer para o filme;Scale: Determine a escala do filme;Align: Define o alinhamento do filme na página;Bg: Determina a cor do fundo;Parameters: Caso queira adicionar alguns parametros ao filme;Play: Tocar/demonstrar o filme;Reset Size: Resetar o tamanho;Finalmente, perceba na imagem acima que o botão EDIT está marcado emvermelho para destacar: é neste botão que devemos clicar caso seja preciso fazeralguma alteração no filme. Clique nele: o Dreamweaver abrirá o Macromedia Flash.O Flash então pedirá para que você indique o arquivo de edição do swf. Indique eclique em Abrir: 68
  69. 69. Feito isso nós teremos o filme em modo de edição, bastando alterar o que fornecessário e clicar no botão Done localizado no canto superior esquerdo da janela.Após clicar em Done, o Flash exportará o filme de volta para o Dreamweaver epronto: a edição está feita! 69
  70. 70. Agora só falta você praticar ... Sempre que precisar alterar um filme, bastaproceder desta forma! ;) ...Componentes do Flash MXHoje estaremos aprendendo um pouco sobre mais um recurso extraordinário que aMacromedia nos traz: os Componentes do Flash MX! Você provavelmente jáprecisou utilizar um Radio Button ou então fazer uma barra de rolagem na versão 5(ou anteriores) não é mesmo?! Você se lembra que era preciso fazer tudo na mão? Pois é... agora temos alguns destes recursos prontos para uso! Vejamos:Ao clicar em Window / Components (Ctrl+F7) você encontra o seguinte painel:No painel acima temos os seguintes componentes:Check Box: a famosa "Caixinha de marcação" que você utiliza em FormsComboBox: a caixa de "Seleção", também conhecida como menu DropDownListBox: uma caixa com uma lista...PushButton: o botão que você utiliza nos forms (submit, reset... lembra?)RadioButton: o Botão de rádio que você utiliza, por exemplo, em enquetesScrollBar: a tão desejada Barra de Rolagem chega ao Flash MX!Para utilizar um componente do Flash, basta arrastá-lo para o palco. Veja abaixocada um deles, já no palco: 70
  71. 71. Ao clicar em um dos components, você verá suas propriedades no Painel"Propriedades" e poderá alterar a sua cor, dados e outras características. Clique nafigura abaixo para ampliar a imagem e ver a propriedade de um dos components:Para colocar os dados nos components "List Box" e "Combo Box" você deve ir atéo Painel de Propriedades e clicar em "Data". Aparecerá então a seguinte tela:Nesta janela, basta preencher os dados e clicar em OK. Caso você queira definiras ações para estes components, basta clicar no seguinte botão da Barra dePropriedades: 71
  72. 72. O painel de Ações será aberto e você pode definir quais utilizar. Se você quiserutilizar o ComboBox, por exemplo, você terá de utilizar ações para o Flashreconhecer quando o usuário clicar em um item e assim redirecioná-lo.Vejamos:Após definir os itens "Data" e "Labels" no painel de propriedades, defina emChange Handler o nome "Teste": este Change Handler serve para que o Flashreconheça cada vez que o item é modificado, ou seja, que o usuário clique em umnovo item do ComboBox. Depois, clique no botão para definir as ações e coloque aação:function Teste() {getURL(dropdown.getSelectedItem().data);}Perceba que este código diz ao Flash que ao selecionarmos um item ele deve nosredirecionar para a URL que foi pré-definida em Data.Para que os components "ScrollBar" e "ScrollPane" funcionem, você deve definir o"Scroll Content" (Conteúdo do Scroll). Se você quiser colocar como conteúdo do"ScrollPane" um texto, faça da seguinte forma:Crie um novo MovieClip. Coloque o nome e clique na Aba Advanced e defina oIdentifier ("texto" por exemplo... sem as aspas) marcando as opções "Export forActionScript" e "Export in first Frame" e clique em OK.Arraste o "ScrollPane" para o palco. Clique em cima dele para alterar suaspropriedades, clique em "Scroll Content" e coloque o mesmo que você colocou noIdentifier do Movie Clip ("texto" no nosso caso).Teste o filme e veja que funcionou! ;) O mesmo vale para a "ScrollBar"! Agora quevocê já conhece um pouco mais sobre os componentes do Flash, é só colocar amão na massa e começar a praticar!Cenas no Flash MXNeste tutorial abordaremos as cenas do Flash MX. O que são?! Quando e por queutilizar?! Veremos tudo isso adiante...O Flash nos permite uma maior organização do trabalho quando utilizamos Cenas:com elas podemos orientar/planejar um trabalho facilmente, sem que nossaTimeline fique "congestionada". Ao executar o Flash MX, normalmente o painel de 72
  73. 73. Cenas (Scenes) já está aberto. Caso não esteja, basta abri-lo procedendo daseguinte forma:Clique em Window e depois em Scene, conforme indica a figura acima ousimplesmente aperte Ctrl+F2 e você abrirá o painel de Cenas, parecido com o dafigura abaixo:Veja que na figura acima que neste painel encontramos 3 botões:- Duplicar: serve para duplicarmos uma cena- Adicionar (+): Serve para adicionarmos uma nova cena- Apagar: Apaga a cena selecionada Quando utilizar Cenas?Você já sabe o que é Cena, a sua utilidade mas não sabe quando utiliza-las não émesmo!? Esta é uma pergunta bastante comum e sua resposta é: depende! Issomesmo, depende! Isso porque em muitos casos a utilização de cenas não é nem 73
  74. 74. um pouco necessária - e ela ainda pode atrapalhar, aumentando o tamanho doarquivo e/ou demorando na hora do Flash carregar a cena quando esta é"chamada".O ideal é que se utilize as Cenas quando temos um filme muito grande e que sedivide em "Capítulos". Para explicar melhor, imagine o seguinte: Você precisa fazeruma apresentação que se divide em 5 capítulos:- Introdução- O Produto- O Preço- A Praça- ConclusãoImagine ainda que cada um destes capítulos se divida em mais 5 Sub-Capítulos.Já imaginou o tamanho da Timeline e o número de Camadas que você deveriacriar para fazer toda esta apresentação?! Pois bem, neste caso o uso de Cenas éabsolutamente recomendado - sendo praticamente obrigatório - para que nossotrabalho fique mais leve e organizado!Observe a figura acima e perceba que o número de camadas e o tamanho daTimeline podem ser reduzidos: basta dividir em Cenas, deixando o trabalho maisorganizado. Abaixo segue um exemplo: note como fica mais organizado,principalmente na hora de editarmos o trabalho e direcionarmos algum botão! 74
  75. 75. Basicamente, é isto! Quando precisar de uma maior organização ou precisar dividira animação em Capítulos, basta utilizar o painel de Cenas :) ...Um exemplo em que a utilização de cenas é útil é quando precisamos construir um"Loading" para um site produzido em Flash: basta criar uma cena antes da principale colocar a ação de "Loading" nela - desta forma enquanto o filme é carregado,visualizamos o conteúdo da Cena do "Loading" e quando ele é liberadovisualizamos a Cena Principal !Agora é só treinar e utilizar mais um recurso do Flash!Otimizando arquivos de Flash MXNeste tutorial, estaremos aprendendo como otimizar um arquivo produzido noFlash MX. Por incrivel que pareça, há pessoas que acreditam - equivocadamente -que para optimizar um arquivo desenvolvido em Flash basta utilizar imagens combaixa resolução / tamanho pequeno em Kb que já é suficiente! Se fosse assim, nãoteriamos - graças à Macromedia - a opção de exportação/publicação do Flash.Para começar, abra o painel de configuração de exportação do filme, conformeindica a figura abaixo (ou simplesmente aperte Ctrl + Shift + F12):Perceba (conforme figura abaixo) que o painel nos fornece três abas neste caso,pois estamos utilizando os tipos de arquivo: Flash e HTML, ou seja, nosso site seráexportado como por exemplo site.htm e dentro deste HTML estará o arquivo flash.Clique na aba Flash. 75
  76. 76. Na aba Flash temos várias opções: na primeira podemos escolher qual a versão doFlash que exportaremos. A segunda indica a ordem de carregamento e logo abaixotemos várias opções (como "Proteger contra importação" por exemplo). No nossocaso, devemos ficar atentos as opções marcadas:JPEG Quality: Aqui você pode escolher a qualidade dos JPEGS que contém emseu filme. Caso ache que estão carregando demais, experimente diminuir umpouco a qualidade das mesmas, sempre atentando é claro, quanto a qualidadefinal. De que adiante um site que carrega extremamente rápido mas possui asimagens mais "medonhas" da web não é mesmo!?Depois temos a opção de configurarmos o Audio do site (que veremos a seguir): 76
  77. 77. Clique em Set (o 1° ) e você terá a seguinte tela:Nela, o Flash nos dá a opção de modificarmos a "compressão" do arquivo deAudio, o seu Bit Rate e sua qualidade. Em muitos casos, essa opção nos poupavários Kb na versão final do filme, desde que bem utilizada! Mais uma vez,devemos ficar atentos quanto a qualidade final do Audio. ;)Agora, vamos ver a aba HTML: 77
  78. 78. Esta aba tem várias opções interessantes e poucas pessoas conhecem/utilizamesta "mão na roda". Para este tutorial, o que nos interessa nesta aba é a opção"Quality" (qualidade) marcada na figura acima. Nela, podemos definir se aQualidade será Alta (High), Baixa (Low) e assim por diante.Agora que já ensinamos você a pescar, trate já de começar a colher os frutos, oumelhor, pegar os peixes hehehe .... Explore bastante este painel de configurações,pois com certeza você encontrará muita coisa útil!Tutorial produzido utilizando Flash MX versão em InglêsPainel Tools Flash MXMuitas pessoas que trabalham ou pretendem trabalhar com o Flash não sabempara que serve cada uma das ferramentas do Painel Tools (ferramentas) do FlashMX e nem quando utilizar uma ou outra.Este tutorial tem como objetivo esclarecer o uso e função de cada uma delas.Analise a figura abaixo atentamente: 78
  79. 79. Provavelmente você já viu a maioria das ferramentas deste painel em algumsoftware gráfico, como Photoshop e Corel Draw, apenas para citar como exemplos.Mas será que você sabe realmente a função de cada uma delas?! Bem, éexatamente isto que veremos a seguir:Arrow Tool (V) - também conhecida popularmente como "ferramenta de seleção".Como o próprio nome já diz, serve para selecionarmos os objetos no palco e temcomo atalho, a tecla "V".Subselection Tool (A) - ferramenta de Sub-seleção, ao contrário do que muitospensam, não faz a mesma coisa que a de seleção que vimos acima. Experimenteclicar com esta ferramente em cima de um quadrado por exemplo. Você perceberáque poderá manipular os vetores deste quadrado. Serve também para trabalhar emconjunto com a ferramenta "Pen" que veremos a seguir. Tem como tecla de atalho,a letra A.Line Tool (N) - ferramenta utilizada para construir linhas que tem como tecla deatalho a letra N.Lasso Tool (L) - a ferramenta lasso serve para selecionarmos partes de uma 79
  80. 80. imagem. Clicando nesta ferramenta, o flash ainda nos dá a possibilidade deescolhermos por exemplo a opção varinha mágica. Tem como tecla de atalho aletra L.Pen Tool (P) - ferramenta também conhecida como "Caneta". Você já precisoufazer uma linha com curvas?! Pois é, com a ferramenta caneta você faz este tipode trabalho facilmente! Ainda com a ferramenta subselection, você pode manipularesta linha. Tem como atalho a tecla P.Text Tool (T) - ferramenta de texto do Flash MX. Nos dá a possibilidade detrabalharmos com: Static Text (texto estático), Dinamyc Text (texto dinâmico) eInput Text (texto de entrada). Tem como atalho, a tecla T.Oval Tool (O) - a ferramenta Oval, também conhecida como círculo, serve paraconstruirmos/desenharmos circunferências. Tem como atalho, a tecla O.Rectangle Tool (R) - a ferramenta Rectangle, ou simplesmente retângulo, servepara desenharmos retângulos, quadrados...tem como atalho a tecla R. Ainda nosdá as seguintes opções: O Botão indicado na figura ao lado serve para configurarmos as bordas do retângulo. Se você quiser um retângulo com bordas arredondadas por exemplo, é ali que deve configurar.Pencil Tool (Y) - a ferramenta pencil (lápis) serve para desenharmos livremente nopalco. Ainda nos dá as seguintes opções: Endireitar: serve para o Flash endireitar automaticamete o traçado O Flash fará com que seu traçado seja suave O Flash será o mais fiel possível em seu traçadoBrush Tool (B) - a ferramenta Brush serve para pintarmos uma determinadaimagem ou até mesmo para desenharmos. Esta ferramenta - assim como algumasoutras - ainda nos dá algumas opções no painel "Options" conforme indica a figura: Opções: opções de preenchimento Tamanho: opção para modificarmos o tamanho do brush Formato: opção para modificarmos o formato do brush 80
  81. 81. Lock Fill: Serve para travarmos um determinado preenchimento O painel ao lado nos mostra as opções de preenchimento, que podem ser: Paint normal: pintar normalmente Paint fills: Pintar preenchimentos Paint Behind: Pintar atrás de um objeto Paint Selection: Pintar uma seleção Paint Inside: Pintar dentro de um objetoFree Transform (Q) - ferramenta de transformação livre do Flash. Se você tem porexemplo um retângulo e quer aumentar seu tamanho, esta é a ferramenta a serutilizada. Tem como atalho a letra Q e nos fornece as opções:Fill Transform (F) - a ferramenta de transformação de preenchimento é muito útil,principalmente quando utilizamos um gradient em algum objeto e queremos mudaras propriedades deste gradient, que no caso é o preenchimento. Tem como atalhoa letra F.Ink Bottle (S) - a ferramenta Ink Bottle (garrafa de tinta ou mais conhecida comonanquim) serve para contornarmos um objeto com uma determinada cor. Imagineque você possui um quadrado e cortou o meio deste quadrado. Este quadradoficou com o meio "vazado" e você quer colocar uma cor de contorno nele. Bastautilizar esta ferramente que possui como tecla de atalho a letra S.Paint Bucket Tool (K) - a ferramenta paint bucket, ou simplesmente balde de tinta,serve para preenchermos determinadas áreas/objetos. Ela possui a tecla de atalhoK e nos fornece ainda as seguintes opções: Don´t Close Gaps: não fechar "lacunas/buracos" * Close Small Gaps: fechar pequenas "lacunas/buracos" Close Medium Gaps: fechar "lacunas/buracos" médias Close Large Gaps: fechar grandes "lacunas/buracos" * Quando por exemplo você fez um quadrado mas não ofechou completamente. 81
  82. 82. Eyedropper Tool (I) - a ferramenta Eyedropper ou simplesmente "conta gotas"serve para capturarmos uma determinada cor de uma determinada área/objeto.Imagine que você quer selecionar uma cor de uma determinada imagem mas nãosabe exatamente qual o código hexadecimal dela. Basta utilizar o conta gotas etudo se resolve. Possui como tecla de atalaho a letra I.Eraser Tool (E) - a ferramenta Eraser, também conhecida como "borracha" servepara apagarmos uma determinada área ou um objeto. Tem como tecla de atalho aletra E e possui as seguintes opções: Modo: mostra os modos da borracha (veja figura abaixo) Torneira: apaga todo o objeto selecionado- Formato: mostra os formatos disponíveis para a borracha Erase normal: modo normal da borracha Erase Fills: apaga preenchimentos Erase Lines: apaga apenas linhas Erase Selected Fills: apaga preenchimentos selecionados Erase Inside: apaga o interior de um objetoHand Tool (H) - esta ferramenta serve para "navegarmos" pelo palco ou objeto.Basta seleciona-la, pressionar o botão do mouse e segurar para "navegarmos".Possui como atalho a tecla H.Zoom Tool (Z / M) - Serve para darmos zoom na imagem/palco/objeto/filmeenquanto trabalhos. É extramamente útil e possui como teclas de atalho as letras Ze M.Stroke Color - Cor do contornoFill Color - Cor do preenchimentoImã - com esta ferramenta "ligada" o Flash "cola" os objetos na grade. Muitasvezes ela é bastante útil, porém, dependendo do caso pode irritar o usuário! 82
  83. 83. Transformação - Serve para transformação de objetos. Transformar uma linhareta em curva por exemplo.Bom, é isso aí! Espero que agora você possa aproveitar este tutorial e praticarbastante em sua casa e/ou trabalho! Com o tempo você vai se acostumando comcada uma das ferramentas e decorando suas respectivas teclas de atalho, quepoupam um tempo precioso!(este tutorial foi produzido utilizando Flash MX na versão em Inglês) &6B¤1864¤1)©$ ! ©§ ¦¤¢  9 #5 A @ 9 0 2 753 2 0 ( % # § ¨ ¥£ ¡ $b$Y UP ¤V8U¢SQ¦HG¤E©C a a Y ` X D WE IG T R P I D F D 83

×