Prlogo do Manual de Flash

Comeamos o tutorial de Flash... Bem-vindo ao manual de Flash de CriarWeb. O objetivo deste manual proporcionar os fundamentos necessrios para que voc possa se desenvolver facilmente em torno do trabalho de Flash. Ao longo dos artigos, vamos abordar os conceitos bsicos necessrios para o bom uso desta tecnologia e descobriremos o emprego das ferramentas mais utilizadas normalmente. Este tutorial no pretende ser uma descrio exaustiva da aplicao Flash. Desejamos mais deixar sentadas as noes que os ajudaro a ter as idias claras na hora de planejar seu projeto. Portanto, deixamos a vocs mesmos a oportunidade de ver a fundo todas as possibilidades que este programa oferece, algo que se pode descobrir medida que se cria suas prprias animaes. A parte deste manual, os elementos que voc necessita para criar suas animaes so poucos: a aplicao Flash, que pode ser baixada em verso de prova no site de Macromedia, um navegador web e um editor de texto como o bloco de notas de Windows.

O que Flash
Descrio desta tecnologia vetorial. Provavelmente, um dos avances mais importantes em matria de desenho no web foi o aparecimento da Error! Hyperlink reference not valid. desenvolvida por Macromedia denominada Flash. Flash a tecnologia mais utilizada no Web que permite a criao de animaes vetoriais. O interesse no uso de grficos vetoriais que estes permitem realizar animaes de pouco peso, ou seja, que demoram pouco tempo para ser carregadas. Como talvez vocs saibam, existem dois tipos de grficos: Os grficos vetoriais, nos quais uma imagem representada a partir de linhas (ou vetores) que possuem determinadas propriedades (cor, espessura...). A qualidade deste tipo de grficos no depende do zoom ou do tipo de resoluo com o qual se esteja olhando o grfico. Por muito que nos aproximemos, o grfico no se pixeliza, j o computador traa automaticamente as linhas para esse nvel de proximidade. As imagens em mapa de bits. Estes tipos de grficos se assemelham a uma espcie de quadrculo no qual cada um dos quadrados (pxels) mostra uma cor determinada. A informao destes grficos salva individualmente para cada pxel e definida pelas coordenadas e cor de tal pxel. Estes tipos de grficos so dependentes da variao do tamanho e resoluo, podendo perder qualidade ao modificar sucessivamente suas dimenses. Sendo assim, Flash se serve das possibilidades que oferece trabalhar com grficos vetoriais, facilmente redimensionveis e alterveis por meio de funes, portanto de um armazenamento inteligente das imagens e udios empregados em suas animaes por meio de bibliotecas, para otimizar o tamanho dos arquivos que contm as animaes. Esta otimizao do espao que ocupam as animaes, combinada com a possibilidade de carregar a animao ao mesmo tempo em que esta se mostra no navegador (tcnica denominada streaming), permite fornecer elementos visuais que do vida a uma web sem que para isso o tempo de carregamento da pgina se prolongue at limites insuportveis para o visitante. Ademais deste aspecto meramente esttico, Flash introduz em seu entorno a possibilidade de interagir com o usurio. Para isso, Flash invoca uma linguagem de programao chamada Action Script. Orientado a objetos, esta linguagem tem claras influncias do Javascript e permite, entre outras muitas coisas, organizar o preenchimento de formulrios, executar distintas partes de uma animao em funo de eventos produzidos pelo usurio, ir a outras pginas, etc. Deste modo, Macromedia pem a nossa disposio uma tecnologia pensada para fornecer um bom visual a nossa web e ao mesmo tempo, nos permite interagir com nosso visitante. Obviamente, no se trata da nica alternativa de desenho vetorial aplicada ao Web, mas sem dvida, trata-se da mais popular e mais completa delas.

Sobre o trabalho em Flash

Descrevemos a interface da aplicao Flash MX. As animaes Flash so produzidas em uma aplicao de desenho. Pode-se baixar tal aplicao em verso-prova no site de Macromedia. Uma vez baixada e instalada, j podemos trabalhar. Evidentemente, aprender a fazer animaes com este programa requer por uma parte um conhecimento do software e por outra, uma aplicao inteligente dos recursos que nos oferecem. Neste manual tentaremos insistir no segundo deixando ao leitor a possibilidade de descobrir pouco a pouco a aplicao. Para a redao deste manual, servimos de Flash MX. Cabe esperar que o dito para esta verso seja aplicvel em grande medida s verses precedentes e as que saiam em um futuro. Logo aps instalar e abrir a aplicao pela primeira vez, acessaremos a uma janela de dilogo que nos prope trs modos de uso distintos: Modo desenhista, destinado a criar animaes e grficos Modo geral, no qual vamos dispor de todas as opes de Flash ademais da ajuda. Modo desenvolvedor, enfocado criao de aplicaes com formulrios, botes e outros componentes.

Este menu aparecer unicamente na primeira vez que abrirmos Flash, no obstante, poderemos acess-lo atravs da barra de ferramentas na seo Ajuda>Bem-vindo. J dentro do programa, aps haver fechado alguns painis com o objeto de dispor de espao de trabalho, faremos frente a uma interface como a que se mostra na figura:

Dentro desta interface, podemos distinguir trs partes principais: O palco Trata-se do espao no qual realizaremos todas as tarefas de edio de grficos. De certa forma como o papel no qual desenharemos o que faa falta. A linha de tempo Esta seo onde poderemos organizar no tempo cada uma das imagens desenhadas no palco. Podemos subdividi-la em duas partes: A parte esquerda, onde poderemos organizar as camadas e a parte da direita que fica reservada a gesto dos fotogramas. Ambos elementos, camadas e fotogramas sero tratados mais adiante. A caixa de ferramentas Aqui encontraremos as ferramentas de edio grfica que Flash coloca a nossa disposio. Como pode se observar, Estas so muito parecidas as que podemos encontrar em outros programas de edio grfica que seja vetorial ou no.

Camadas e fotogramas em Flash

Explicamos os conceitos de camadas e fotogramas e seu uso. Como dissemos no captulo anterior, a linha de tempo onde poderemos organizar a sucesso de imagens que do lugar a uma animao. Neste captulo introduziremos os conceitos de camada e fotograma, vitais para uma compreenso do funcionamento de Flash. De certa forma, Flash trabalha como se fosse um filme. Uma animao uma sucesso de imagens fixas que, ao passar rapidamente umas atrs das outras, do a impresso de um movimento. Cada uma destas imagens fixas chamada tambm fotograma. Os fotogramas so representados sob a forma de retngulos na parte direita do palco. Nestes retngulos podemos alojar trs tipos diferentes de imagens: Imagens chaves Trata-se das imagens que ns mesmos desenharemos Imagens fixas So as imagens chaves copiadas nos fotogramas seguintes ao da primeira imagem chave de forma a produzir um efeito de objeto esttico. Imagens de interpolao Trata-se de imagens calculadas por Flash que permitem a transio gradual entre duas imagens chaves. Este tipo de imagens muito teis j que se geram automaticamente e proporcionam um efeito suave de movimento ou transformao.

Por outro lado, uma animao est geralmente constituda de uma variedade de objetos diferentes, cada um dos quais se introduz em um momento diferente e apresenta um comportamento independente ao resto dos objetos. De forma a organizar e editar todos estes elementos, Flash permite o uso de camadas ou decalques. Assim, uma animao Flash est composta de uma superposio de camadas em cada uma das quais introduziremos um objeto que ter sua prpria linha de fotogramas. Estas camadas nos permitem trabalhar a animao em distintos planos independentes. Por padro, ao comear uma nova cena encontraremos em nossa linha de tempo uma s camada. Progressivamente iremos introduzindo mais camadas que permitam separar cada um dos elementos da animao: objetos, fundo, udios ou trajetrias. Um uso inteligente das camadas a base para criar animaes de qualidade.

Bibliotecas em Flash
O uso de bibliotecas. Conceito de smbolo e ocorrncia. No captulo precedente introduzimos o conceito de camada e fotograma e ressaltamos a necessidade de utiliza-los inteligentemente. Outro elemento de Flash que necessita uma gesto mais sbia a biblioteca. Como dissemos previamente, Flash permite a otimizao do espao ocupado pela animao, ou o que mesmo, do tempo que o usurio demora em carrega-la. Um dos elementos que contribui a isso as denominadas bibliotecas. Uma biblioteca no mais que um armazm de objetos (grficos ou udios) que podero ser utilizados em uma mesma animao em uma ou ocasies. Dependendo da posio que apresente esta biblioteca, esta pode ser prpria animao, compartida por vrias animaes, ou ento permanente (empregada pela totalidade de animaes). Cada um dos elementos que constituem uma biblioteca, so denominados smbolos. Como dissemos, estes elementos podero ser utilizados em nossa animao quantas vezes desejarmos. No obstante, cada uma destas utilizaes no chamada, sim, ocorrncia. Portanto, uma ocorrncia cada uma das ocasies nas quais um smbolo armazenado em nossa biblioteca utilizado em nossa animao. Mudando as propriedades de um smbolo da biblioteca, mudamos cada uma das ocorrncias que aparecem na animao. Contrariamente, a modificao de uma ocorrncia no altera ao smbolo da biblioteca nem as outras ocorrncias da animao. Como podemos observar, o uso das bibliotecas no s nos ajuda a tornar o Error! Hyperlink reference not valid. leve como tambm nos permite uma criao, edio e um apagar rpidos de cada uma das ocorrncias. Nos captulos posteriores abordaremos com mais detalhes a gesto de bibliotecas smbolos e ocorrncias. Passaremos a seguir aplicao do aprendido a partir da criao de uma animao.

Minha primeira animao em Flash I

Criao de um smbolo em nossa biblioteca flash. Depois de haver introduzido os conceitos bsicos de Flash, vamos colocar em prtica alguns deles de forma a comear a familiarizarmos com a interface. Para comear, geraremos um documento em branco por meio de: Error! Hyperlink reference not valid. > Novo Como podemos observar na linha de tempo, nossa animao consta de uma s camada e um nico fotograma representado por um retngulo com um crculo. Este crculo significa que se trata de um fotograma que contem uma imagem chave vazia. A animao que pretendemos criar consiste em um movimento de translao de uma esfera com uma trajetria elptica. Sendo assim, o primeiro que devemos fazer desenhar a esfera. Entretanto, para comear com os bons costumes, no desenharemos a esfera diretamente sobre nosso fotograma vazio, e sim, criaremos um smbolo em nossa biblioteca.

Para criar nosso smbolo na biblioteca: Janela > Biblioteca Chegado a este ponto veremos aparecer na tela uma janela como a que se v na ilustrao.

Para inserir o smbolo podemos fazer a partir do boto com uma cruz situada na parte inferior esquerda da janela da biblioteca, ou ento ir barra de menus e fazer: Inserir > Novo Smbolo Uma nova janela de dilogo aparece diante de nossos olhos (ver figura abaixo). Nela poderemos definir o nome (para este caso a chamaremos esfera) e o comportamento (escolheremos grfico). Por agora no entraremos na explicao da opo comportamento, j o veremos mais adiante.

Ao preencher devidamente a janela anterior e Aceitar, veremos como o palco se engrandece e a barra superior do palco nos mostra a palavra Esfera. O que aconteceu que samos de nossa primeira animao para irmos para um espao no qual podemos editar o smbolo que quisermos criar. Portanto, colocamos mos a obra com nosso trabalho de artistas. Para desenhar a esfera vamos nos servir das ferramentas de desenho. Comeamos por escolher a ferramenta oval, representada por um crculo. Uma vez escolhida vamos ao palco e apertando a tecla maisculas e clicando o boto esquerdo do mouse (o nico para os usurios Mac), deslocaremos o mouse para qualquer direo. Veremos aparecer um crculo com as cores definidas na seo cores da barra de ferramentas. Agora, para dar a sensao de perspectiva esfera, vamos colori-la em seu interior usando um degradado radial. Para isso, visualizamos o painel mistura de cores: Janela > Mistura de cor Chegando aqui, veremos uma janela como a da figura:

Neste painel, selecionaremos no menu desdobrvel a opo Radial. Veremos como a janela muda de aspecto se parecendo imagem seguinte:

O que faremos selecionar duas cores (as que vocs gostarem) para cada uma das casinhas que se encontram na parte inferior da barra de degrade. Para isso, clicaremos sobre cada uma das casinhas e a seguir, escolheremos uma cor na paleta desdobrvel situada na parte superior esquerda do painel. Repetiremos o processo para a outra casinha. Uma vez definido o degrade, podemos selecionar a ferramenta balde de pintura, e clicaremos com o boto esquerdo sobre a parte preenchida do crculo. Se funciona tudo corretamente, deveremos obter uma esfera similar a da figura mostrada:

Sugerimos repetir este processo de preenchimento do crculo com um degrade brincando com as opes que nos oferece o painel de mistura de cores. Podemos ver que possvel acrescentar mais casinhas para conseguir um efeito de coroas ou ento mudar o tipo de degrade a linear e mais coisas... Depois de nos deixarmos levar por nossa veia criativa podemos nos voltar a coisas mais srias. Para comear, podemos alinhar a esfera com a cruz que define o ponto de alinhamento do smbolo. Para isso, escolheremos a ferramenta seta e selecionaremos a esfera deslocando o mouse ao mesmo tempo que mantemos clicado o boto esquerdo. Para mover a esfera faremos da mesma forma, deslocando o mouse at o lugar apropriado mantendo o boto esquerdo pressionado. Podemos tornar preciso o deslocamento usando as setas do cursor que nos permitiro deslocarmos pxel por pxel.

Minha primeira animao em Flash II

Vamos comear a trabalhar com a animao propriamente dita. Criao de imagens chave. Ok, j definimos o smbolo na biblioteca. Agora vamos comear a trabalhar com a animao propriamente dita. A primeira coisa que devemos fazer sair do espao de criao do smbolo e irmos para o palco da animao. Para isso, clicaremos na palavra Palco 1 que aparece na parte superior esquerda do palco. J dentro do palco, vamos incluir no primeiro fotograma o smbolo que acabamos de criar. Antes de nada, iremos janela biblioteca (se tiver fechada poder ser aberta com Janela > Biblioteca) e selecionaremos o smbolo esfera. A seguir, clicamos e arrastamos o smbolo at o palco. O resultado deveria ser algo como o que se mostra na Error! Hyperlink reference not valid. inferior:

Podemos observar que o crculo vazio do primeiro fotograma se converteu agora em um crculo cheio, o que significa que a imagem chave no esta vazia. Passamos agora a estudar o tipo de animao que vamos fazer. Como dissemos, pretendemos simular um movimento de translao da esfera com uma trajetria elptica, dando a impresso de um crculo em perspectiva. Esta animao poderia ser definida por trs Error! Hyperlink reference not valid. chave: A esfera situada em primeiro plano ao princpio de seu movimento. A esfera situada em segundo plano na metade de seu ciclo de translao. A esfera chegada ao final do ciclo, aproximadamente na mesma posio que a primeira esfera.

Podemos ver quais seriam estas trs imagens chave no seguinte esquema:

De modo que j dispomos da primeira imagem chave. Agora, introduziremos a segunda no lugar aproximado que lhe corresponderia. Para isso, realizamos as seguintes operaes: Inserimos uma imagem chave na camada 1, mais ou menos sobre o fotograma 15. Para isso, nos situamos na camada 1, no fotograma 15. Clicamos no boto direito do mouse e selecionamos Inserir fotograma chave. Podemos observar como, uma vez realizada a operao, um novo crculo aparece nesse fotograma, indicando a presena de outra imagem chave que ser idntica imagem de nosso primeiro fotograma.. Modificamos este novo fotograma chave. Para isso, situados nesse fotograma, selecionamos o objeto (ou ocorrncia) e modificamos sua posio e tamanho. Modificamos a posio empurrando para cima com a tecla do cursor ou ento, clicando e arrastando, como vimos anteriormente. Para modificar el tamao, seleccionaremos la herramienta transformao livre. Uma vez feito isto, selecionaremos a opo escalar, que nos permitir bloquear as propores do objeto e reduziremos o tamanho da esfera clicando e arrastando em um dos pontos das esquinas da marca que rodeia a esfera. A figura seguinte ilustra a tarefa de redimensionamento e d uma idia do aspecto que deve ter o fotograma uma vez modificado:

A seguir vamos criar o terceiro e ltimo fotograma chave, correspondente ao momento em que a esfera est a ponto de completar o ciclo. Este fotograma deveria princpio se parecer ao primeiro com a diferena de que a esfera no chegou a completar o ciclo, e sim que est perto de consegui-lo. Realizaremos os seguintes passos: Inserimos um fotograma chave vazio no fotograma 29 (Inserir>Fotograma chave vazio) Voltamos ao fotograma 1 e o copiamos (Editar>copiar) Voltamos ao fotograma 29 e o colocamos (Editar>colar) O resultado um fotograma idntico ao 1 no qual deveremos mover ligeiramente a ocorrncia esquerda, algo que faremos mais tarde.

Minha primeira animao em Flash III

Criao de um guia de movimento. Como j dispomos das Error! Hyperlink reference not valid. chave que definem a animao, o que necessitamos agora definir uma trajetria elptica que as uma. Esta trajetria tem de ser definida em uma camada especial chamada guia de movimento. O movimento no nada mais do que uma camada que contm uma linha sobre a qual podemos colocar nossos objetos de forma que tal objeto se mova de uma posio a outra respeitando a trajetria definida por esta linha. No nosso caso, dado que o que buscamos uma trajetria cclica, para no confundir ao objeto definiremos duas linhas distintas, correspondentes a cada meia volta. Se no tomssemos esta precauo, o objeto teria dois possveis sentidos para chegar a uma mesma posio. Passemos ento a definir estas linhas: Criamos o guia de movimento. Para isso, selecionamos a camada 1 (ou onde tivermos criado nossas imagens chave ) e fazemos Inserir>guia de movimento. Constatamos o aparecimento de uma nova camada Guia: Camada 1 (ver figura).

Selecionamos o primeiro fotograma desta nova camada e desenhamos uma elipse sem preenchimento. Podemos nois servir da ferramenta oval utilizada para a criao da esfera, mas desta vez no escolhemos nenhuma cor na paleta de preenchimento (a ausncia de cor vem simbolizada por um quadro branco barrado em diagonal por uma faixa vermelha). O resultado uma figura tal como esta:

Com a ferramenta lao, selecionamos a metade (esquerda ou direita, como preferir) e a cortamos (Editar>cortar). O resultado a obteno de uma semi-elipse. Vamos ao fotograma 15 desta mesma camada e o convertemos em um fotograma chave vazio (Inserir>fotograma chave vazio) Colamos a outra meia elipse, que ficar desnivelada em relao a outra. Para ajustar as semielipses podemos, claro, fazer a olho manuseando entre o fotograma 14 e o 15 at que as duas se completem corretamente. Entretanto, uma opo mais interessante a de usar a edio simultnea de vrios fotogramas. Esta opo, disponvel na linha de tempo (ver figura), nos permite a visualizao e edio simultnea de vrios fotogramas. Deste modo, podemos selecionar uma das semi-elipses e mov-la por meio dos cursores at faze-la coincidir com a outra metade. Logo, tiramos este modo que foi selecionado, uma vez finalizada a operao.

Minha primeira animao em Flash IV

Criando uma interpolao. Chegando a este ponto, podemos comear a definir a primeira meia volta da esfera. Para gerar o movimento existente entre os fotogramas chave, temos que criar o que se denomina uma interpolao de movimento. Como j dissemos, isso algo que Flash calcula automaticamente, evitando a modificao sistemtica de cada um dos fotogramas intermdios que formam parte da seqncia. Para criar a interpolao de movimento, selecionaremos os fotogramas da camada 1 e faremos: Inserir>Criar interpolao de movimento. Feito isso, poderemos constatar o aparecimento da camada 1 de uma seta entre o fotograma 1 e 15 e outra entre o 15 e o 29. Se agora vamos a algum dos fotogramas intermdios, veremos que a imagem que contm no a mesma que a dos fotogramas chave 1 ou 15, e sim, um intermdio de posio e tamanho entre elas. Como se pode ver, o objeto se deslocaria desde 1 at 15 e seguidamente de 15 a 29 seguindo uma linha reta. Para obrig-lo a dotar uma trajetria elptica como a definida no guia de movimento, teremos que ir a cada uma das imagens chave (1, 15 y 29) e , usando a ferramenta seta, colocaremos o centro do objeto sobre a linha da elipse em cada uma das extremidades correspondentes. Podemos comprovar que o objeto est bem colocado na trajetria ao tentar mov-lo fora da linha, volta a se colocar automaticamente sobre ela. Agora s nos resta ocultar a camada da trajetria. Isto pode ser feito selecionando-a e clicando sobre o ponto que se encontra abaixo. O ponto se converte em uma cruz, que significa que a camada no visvel, embora, claro, que segue existindo. J temos a animao construda. Para prov-la podemos fazer rapidamente: Controle>Provar cena Veremos como saltamos para outra nova janela que nos mostra a cena criada, tal como a veramos na realidade. Esta janela nos oferece mltiplas possibilidades que j sero abordadas em outros captulos. No obstante, aconselhamos dar uma olhada aos tipos de opes que prope. O resultado uma animao como esta:

Se desejar ver a animao diretamente no navegador, possvel faze-lo selecionando: Arquivo>Pr-visualizao da publicao>HTML Chegando at aqui, vocs descobriro algumas das muitas possibilidades que Flash oferece para a criao de animaes e, o que mais importante, estaro mais familiarizados com o tipo de tcnicas e conceitos que emprega.

Colocar filmes Flash em nossas pginas

Um pequeno truque para conseguir o cdigo necessrio para incrustar um filme Flash dentro de uma pgina web. Colocar filmes Flash em nossos arquivos html, asp, Error! Hyperlink reference not valid., etc; poderia ser uma das principais perguntas que fazemos, quando comeamos a conhecer grandioso programa, e faze-lo mais simples do que parece. Antes devemos ter em conta que devemos seguir algumas regras para que tudo funcione corretamente. Quando criamos um filme com Flash, este gera um arquivo com extenso ".fla", este nos permite criar o filem e modific-lo. Outro arquivo que se gera o que tem a extenso ".swf", este se compe no momento que provamos o filme e nos ajuda a ver o resultado das criaes e modificaes dos arquivos ".fla". Finalmente podemos gerar um arquivo "html", que se compe quando publicamos nossos filmes e nos ajuda a ter uma idia mais clara de como sero vistos na web. 1. Quando seu filme Flash esteja terminado, salvo e testado (CTRL+Enter), voc deve public-lo (CTRL + F12). 2. No menu principal de nosso explorador, devemos clicar em "Ver", depois clicar em "Cdigo fonte", isto faz com que se execute o "Bloco de notas", o qual nos mostrar o cdigo html dos filmes. 3. Dentro do contedo do Bloco de notas, voc deve procurar as etiquetas <object>...</object>, copie o contedo que se encontra entre essas etiquetas (logicamente as etiquetas devero ser includas) e finalmente cole em seus arquivos. Isso tudo, mas lembre-se que se seguir este truque e se no editar a etiqueta <object>, voc dever s arquivos .swf e .html no mesmo diretrio do servidor ou do disco rgido de seu computador, do contrrio os filmes Flash no se carregaro. Nota: Outra maneira muito simples para inserir uma animao Flash em uma pgina web utilizar o programa Dreamweaver, tambm desenvolvido pela empresa Macromedia. Em tal programa existe um boto, na janela de objetos comuns, que nos permite selecionar o arquivo Flash (Com extenso .swf) que desejarmos inserir na pgina web. No necessrio subir o arquivo .fla ao seu Error! Hyperlink reference not valid., j que o .swf e .html no o necessitaro.

Como fazer botes em Flash

Explicao passo a passo sobre a criao de botes no programa Flash. Neste captulo aprenderemos a criar botes e como link-los com nossos Error! Hyperlink reference not valid. ou com outras pginas web, que no esto em nosso servidor. Flash nos permite criar botes personalizados, de maneira muito rpida; e ainda nos ajuda a dar vida a nossas pginas web; em poucas palavras, nos ajuda a tornar mais atrativo nosso Error! Hyperlink reference not valid. e logicamente isso o que queremos para aumentar o nmero de visitas em nosso website. Por meio de linguagens de programao (por exemplo, Javascript), tambm poderamos criar botes, mas seria um pouco mais complicado; ademais no poderamos criar exatamente os mesmos efeitos que podemos fazer com Flash. Comecemos: 1- Primeiro, criaremos um novo smbolo, fazendo a seguinte combinao de teclas: CTRL+F8. Aparecer o seguinte quadro:

2- Em Nome (Name), escreva "boto 1", em Comportamento (Behavior) selecione a opo Boto (Button), finalmente clique em Aceitar (OK). Automaticamente, seremos enviado desde a Cena 1 ao palco do smbolo "boto 1"; a onde criaremos um boto que ser includo em nossa biblioteca. O palco unicamente para a criao de botes, ser parecido a seguinte imagem:

Olhe para a linha do tempo (Timeline), como se pode notar diferente linha do tempo da Cena 1. A linha do tempo, do palco para criar botes parecida a seguinte imagem:

Expliquemos o grfico anterior: Devemos entender que Repouso, Sobre, Pressionado e Zona ativa so os quatro estados de um boto. Vejamos a seguir, o que representa cada estado. Repouso: quando o mouse no est colocado sobre nosso boto ou no se clicou sobre ele. Sobre: quando o mouse est colocado sobre o boto, mas ainda no se clicou sobre ele. Pressionado: logicamente, quando se clica sobre o boto. Zona Ativa: como o prprio nome indica, quando o boto est ativo. Continuemos com a criao de nosso "boto 1". A cabea leitora, na linha do tempo tem que estar assinalando o estado de Repouso. 3- Clique sobre a ferramenta de Retngulo (Rectangle Tool), que se encontra no Painel de Ferramentas. 4- Desenhe um retngulo no centro da rea de trabalho, e coloque a cor azul. 5- Depois pressione a tecla F6; isto far com que a cabea leitora na linha do tempo passe ao estado Sobre. Como poder se notar, o boto se copia, portanto no ser necessrio fazer um novo desenho. 6- Ainda estamos no estado Sobre, se no tiver selecionado o boto, faa-lo (com a ferramenta Seta e clique duas vezes sobre nosso desenho), logo dirija-se ao Preenchimento de Cor que se encontra na seo cores do Painel de Ferramentas, e escolha a cor vermelha, como se mostra a seguir:

7- Depois pressione novamente a tecla F6, para que a cabea leitora passe ao estado Pressionado, e mude a cor de preenchimento da mesma forma que fizemos no passo 7; e escolha uma cor verde. Finalmente pressione pela ltima vez F6 para passar ao estado Zona ativa, isto far com que se copie o boto. Para este ltimo estado, no realmente necessrio mudar a cor de fundo. Com as cores que aplicamos, faremos com que o boto mude de cor, quando se realizar os Estados dos botes anteriormente descritos. Nosso boto foi criado, portanto voc j pode voltar para a Cena 1, abrir a biblioteca e ver que a est o smbolo chamado "boto 1", poder arrasta-lo ao palco as vezes que quiser para fazer vrias cpias dele. Pegue a Ferramenta de Texto (A), e escreva o que desejar, depois coloque o texto sobre o boto criado; para provar o filme faa a tradicional combinao de Error! Hyperlink reference not valid. CTRL + Enter. Se depois quiser ver o filme em seu explorador de internet, unicamente pressione as teclas CTRL + F12.

Linkar pginas web por meio de botes Flash

Como fazer com que ao clicar um boto se acesse a outra pgina no navegador. Se criamos botes, logicamente porque queremos link-los com outras pginas web no nosso servidor, ou pginas web em outros servidores. Para este captulo necessitaremos do boto que criamos no captulo anterior. Para fazer os links, devemos utilizar o painel de Aes de Flash. Para poder visualizar tal painel, dirija-se ao menu principal e clique na Janela > Aes. Aparecer a seguinte imagem:

O painel de Aes, nos servir para trabalhar com ActionScript. O que ActionScript?, a linguagem de criao de scripts de Flash. Pode utilizar ActionScript para controlar objetos nos filmes de Flash com o fim de criar elementos interativos e de navegao, e para ampliar Flash com o fim de criar filmes altamente interativos e aplicaes Web. Em outras palavras, ActionScript a linguagem de programao utilizada por Flash. Comecemos a fazer o link. 1- Na biblioteca de Flash, arrastamos Cena 1 o boto criado no captulo anterior. Mantemos o boto selecionado, se no estiver, clique sobre ele com a ferramenta seta. 2- No menu principal, clique em Janela > Aes. 3- No painel de Aes, clique na palavra Aes (Actions), automaticamente se desdobrar uma espcie de sub-menu onde se dever clicar em Explorador (Browser/Network), depois clique duas vezes em getURL. getURL a ao que nos permitir navegar entre pginas web, tambm permite passar variveis a outras aplicaes numa URL definida. Um exemplo de URL http://www.criarweb.com 4- Como se pode notar, ao clicar duas vezes sobre getURL, em cima do quadro que est direita do painel de Aes, aparecem os seguintes campos de texto: URL: aqui voc especificar o endereo o qual o boto far o link. Se for fazer um link com uma pgina web dentro do seu servidor voc tem que escrever o nme do Error! Hyperlink reference not valid., por exemplo: nome_de_arquivo.html Se for fazer um link com uma pgina web que no est dentro do seu servidor voc tem que escrever http://, mais o nome do arquivo, por exemplo: http://www.criarweb.com Janela: Este opcional (se quiser pode deix-lo vazio). Especifica de que forma ser carregado o documento ou o fotograma. As formas na qual se carregam so: _self: especifica o fotograma atual da janela ativa. _blank: indica que a pgina se abrir ou carregar em uma nova janela.. _parent: especifica o elemento principal do fotograma atual. _top: especifica o fotograma de nvel superior da janela atual. Variveis: POST e GET, especifica a maneira na qual se enviar a informao etc, se usa para formulrios, portanto em nosso caso no so necessrias as variveis; ento selecionamos No enviar.

Um exemplo de como teria que ficar o script no quadro direito do painel de Aes : on (release) { getURL("http://www.criarweb.com", "_blank"); } (se tiver problemas em seguir as instrues, simplesmente copie o cdigo anterior e cole no painel de Aes) Pode-se ver que na primeira linha do script aparece escrito: "on (release)". uma ao utilizada nos botes, que indica que a ao que aparece entre "{ }" se executar imediatamente depois de clicar sobre o boto, ou seja, ao liberar o boto do mouse.

Links e-mails Flash

Como linkar um boto flash com um endereo de correio eletrnico. Por meio de botes feitos em Flash, podemos executar nossos programas de envio de correios eletrnicos (Outlook por exemplo), para enviar mensagens . (Seus programas de envio de correios eletrnicos tm que estar configurados e instalados corretamente) Como fazer isto? 1- Criamos um boto. 2- Clique com o boto direito > Aes 3- Copie as seguintes aes e cole no painel de Aes: on (release) { getURL("mailto:seu_e-mail@dominio.com"); } Expliquemos o anterior: on (release), uma ao utilizada unicamente para botes, e indica que a ao se executar imediatamente depois de haver pressionado e liberado o boto do Error! Hyperlink reference not valid.. getURL: Ao; carrega um documento de uma URL especfica em uma janela ou passa variveis a outra aplicao em uma URL definida. Mailto: mtodo utilizado para enviar correios eletrnicos. Prove seu filme (CTRL+Enter). Depois voc pode public-lo (em menu principal Error! Hyperlink reference not valid. > Publicar).

O resultado pode ser visto neste link.

http://www.desarrolloweb.com/articulos/ejemplos/flash/botonemail/boton.html

Interpolao de Formas
Como mudar a forma fsica de um objeto no palco de Flash. A interpolao de formas, consiste em fazer com que um objeto no palco de Flash mude a sua forma fsica. Por exemplo, podemos fazer que um crculo se transforme em um retngulo. Para realizar uma interpolao de formas, temos que fazer uso de "Fotogramas chaves vazios", j que este nos permite criar um vazio na linha do tempo, o qual nos permitir criar outras formas ou objetos. Para este captulo, faremos um exemplo simples, comecemos: 1- Acima, na parte esquerda do palco, desenhe 3 retngulos com a ferramenta "Retngulo"(Rectagle tool). Na linha do tempo, pode se observar que estamos fazendo uso do fotograma 1, da camada 1. 2- Clique no fotograma 4, depois pressione a tecla F6, para criar fotogramas chaves. 3- Depois, clique no fotograma 17 e pressione a tecla F7 para criar um fotograma chave vazio. Observe a linha do tempo, e ver que a cabea leitora est sobre um fotograma que no contem nada; exatamente nesse fotograma vazio onde criaremos a Error! Hyperlink reference not valid. na qual se transformaro os retngulos anteriormente desenhados. 4- Clique na "Ferramenta de texto" do painel de ferramentas e na parte direita debaixo do palco, escreva a palavra "WEB", depois clique na "Ferramenta Seta", com o texto selecionado, faa a seguinte combinao de teclas: CTRL + B, duas vezes. A combinao de Error! Hyperlink reference not valid. CTRL + B, far com que o texto se separe, para que Flash interprete cada letra como uma imagem individual, do contrrio Flash interpretar palavra "WEB" como uma s imagem e a interpolao de formas no funcionar. 5- Agora dirija-se ao fotograma 30 e pressione F6 para alongar o tempo de durao de os objetos na linha do tempo. 6- Regresse ao fotograma 4, clique sobre ele, e v em direo ao painel de "Propriedades" que normalmente encontra-se na parte debaixo em torno de Flash, (se no puder visualizar v ao menu principal, clique em Janela>Propriedades); no mencionado painel existe uma opo chamada "Interpolao"(Tween), pode desdobrar a barra de opes e escolher a opo "Forma"(shape). Pode-se ver que na linha do tempo da camada 1, aparece a cor verde junto com uma seta que deve se estender desde o fotograma 4 at o 17; a exatamente onde se realiza a interpolao de formas; como mostra a seguinte imagem:

Agora j se pode provar o filme (CTRL + Enter) Um exemplo parecido de nossa interpolao de formas :

Shape Hint. Interpolao ordenada de formas

A interpolao de formas um processo que leva consigo idia de ordenao. Neste captulo veremos como podemos consegui-lo usando Shape Tweening. Neste captulo nos ocupamos do Shape Tweening para controlar e ordenar a interpolao das formas. Primeiro, preparamos a interpolao a modificar: transformamos um retngulo em um tringulo. No primeiro fotograma desenhamos um retngulo. Copiamos sua base Edio Copiar. Inserimos um fotograma Chave vazio Inserir Fotograma Chave Vazio no fotograma 25, e colamos Inserir Colar em lugar (paste in place). Para ver o original retngulo clicamos o boto Onion Skin e completamos o tringulo. Vamos para algum dos fotogramas intermdios. No painel de propriedades na opo Interpolao (Tween) Desdobramos a barra de opes e escolhemos a opo Forma (Shape). Provamos o filme (Ctrl+Enter)

Podemos ver que a transformao bastante desordenada. Queremos que a base sempre fique em seu lugar. No primeiro fotograma clicamos no menu Modify>Shape>Add Shape Hint. Deslocamos o ponto vermelho ao ngulo esquerdo do retngulo e no fotograma 25 ao ngulo esquerdo do tringulo. Acrescentamos outro Shape Hint ao ngulo direito das formas. Provamos o filme (Ctrl+Enter).

Podemos ver que a transformao j muito mais ordenada. Acrescentamos outro Shape Hint metade da base das formas E provamos o filme (Ctrl+Enter).

Interpolaes de smbolos
Com este captulo, o usurio aprender a fazer interpolaes com objetos complexos como grupos e smbolos. Neste pargrafo aprenderemos a criar interpolaes com objetos complexos como grupos e smbolos. Primeiro, criamos um smbolo: Inserir / Smbolo Novo. Damos um nome: 'hello' e escolhemos o boto de opo "Grafica". Com o "type tool" escrevemos HELLO. No painel "Propriedades" formatamos. Regressamos cena e clicamos no "Sceen1" debaixo da linha do tempo. Clicamos no menu Janela/Biblioteca. Na janela que aparece pegamos o smbolo 'hello' e o arrastamos ao palco. Movemos o smbolo parte de cima do palco, mais ou menos ao centro. No painel de "Propriedades" na opo "Cor" desdobramos a barra de opes e escolhemos a opo "Alpha", e damos um valor de 0%. Com isso, conseguimos que o texto seja transparente. Inserimos um fotograma chave Inserir> Fotograma Chave no fotograma 25. Aqui selecionamos o smbolo. No painel de "Propriedades" mudamos o valor "Alpha" a 100% para que seja opaco. Deslocamos o smbolo ao fundo do palco. Com o boto "Free transform"

alongamos o texto. Assim definimos a situao inicial e final da interpolao. Falta agora criar os fotogramas intermedirios. Clicamos na linha do tempo. No painel de "Propriedades" na opo "Interpolao"(Tween) desdobramos a barra de opes e escolhemos a opo "Movimento" (Motion). Provamos o filme: Ctrl+Enter. Tudo funciona perfeitamente.

Retornamos rea do desenvolvimento para ajustar outro parmetro. No painel de "Propriedades" no campo "Ease" podemos ajustar a acelerao da Error! Hyperlink reference not valid.. Escolhemos -100: assim a velocidade aumenta durante a animao. Provamos o filme: Ctrl+Enter

Efeitos de mscaras com Flash

Como poder usar as mscaras para obter uma animao web. As mscaras so um efeito utilizado freqentemente em pginas web que contm filmes Flash. Tal efeito consiste em ocultar objetos que se encontram no palco de Flash, e mostr-los pouco a pouco, por algum objeto que tenha uma interpolao de movimento ou qualquer outro efeito que seja produto de sua imaginao. A mscara no somente para ocultar objetos completamente, um exemplo poderia ser mostrar os objetos cor cinza e que um objeto com interpolao de movimento os mostre de outra cor quando passe sobre eles. Para ter tudo mais claro, faamos um exemplo fcil: 1- Em Flash, na cena 1, pegue a ferramenta de texto (A) e escreva o que desejar, utilize um tamanho de fonte grande para que o texto abranja grande parte do palco... 2- Dirija-se ao fotograma (frame) nmero 60 da "camada 1", clique sobre ele, e pressione F6, para que o tempo de durao do filme seja mais prolongado. 3- Crie outra camada (camada 2), depois use a ferramenta "oval" e desenhe uma figura oval. 4- Clique com o boto direito sobre o nome da "camada 2" e no menu que se desdobrar, selecione a opo "Mscara" (Mask) 5- Agora, dirija-se ao fotograma nmero 1 da "camada 2" ( onde est a figura oval), clique com o boto direito, e depois na opo "Criar interpolao de movimento". 6- Finalmente clique no fotograma nmero 60 da "camada 2" e pressione a Error! Hyperlink reference not valid. F6 e mova a figura oval como quiser, agora voc j um Flasher, portanto deve ter muita imaginao. Nossa linha do tempo teria que ser parecida com a seguinte IMAGEM.

Agora prove o filme!

Onion Skin ( Pele de cebola )

Existe outro tipo de animao chamada "fotograma por fotograma". Neste captulo veremos como fazer este tipo de animao. Neste captulo trataremos da animao "fotograma por fotograma". Para realizar este tipo de animao temos de modificar manualmente os smbolos. Por exemplo, simularemos o movimento de um pincel. Criamos um smbolo de pincel e o colocamos no nvel 1. Criamos um smbolo de listra e a colocamos no nvel 2. Em ambos nveis selecionamos o fotograma 4 e clicamos F6, inserimos 2 fotogramas chaves. No nvel do pincel, movemos o pincel. No nvel da listra com a "Transformao livre" alongamos a listra. Inserimos fotogramas chaves no fotograma 7. (F6). Agora queremos que o movimento seja fluido. Como faremos? Clicamos o boto "Onion skin" na barra de estado da linha de tempo. Pegamos a borda esquerda da "Onion skin" e movemos at o primeiro fotograma. Isto nos permite ver os fotogramas anteriores, que aparecem semitransparentes. Inserimos fotogramas chaves no fotograma 10. Movemos o pincel, e alongamos a listra. Provamos o filme: Ctrl+Enter

Importar bitmap e usar como fundo

Como escolher uma imagem e poder us-la como fundo ou preenchimento de uma maneira simples. Do menu File escolhemos Import, e escolhemos o arquivo Passaro.bmp. A imagem aparece no palco e est na Library (menu Window/Library ou F11).

A imagem se comporta como um smbolo, e podemos reutiliz-la vrias vezes no filme sem que o tamanho do arquivo cresa excessivamente. Todos os bitmaps inseridos esto no painel Cor Mixer (menu Window/ Color Mixer ou Shift+F9) e podem ser utilizados como preenchimento. Como se faz? Abrimos o painel das cores (menu Window/ Color Mixer ou Shift+F9). Na barra de opes escolhemos Bitmap. No quadro debaixo aparecem todos os bitmaps que podemos utilizar. Escolhemos Passaro.bmp, e com o Rectangle Tool desenhamos um retngulo. O retngulo est formado por pequenos pssaros.

No Tool Box painel clicamos Fill Transform e clicamos dentro do retngulo. Um dos pssaros fica selecionado. Podemos mudar seu tamanho ou gir-lo clicando com o mouse no smbolo correspondente. A totalidade dos pssaros que formam o recheio fica modificado da mesma forma.

Modificar Bitmap
Vemos como modificar uma imagem importada com o programa Flash. Modificar bitmap O Flash no um programa para retocar Error! Hyperlink reference not valid., e por isso no to fcil modificar as imagens importadas. Podem se modificar parcialmente atravs da diviso, transformar a desenhos vetoriais. - Primeiro, trataremos da diviso: No menu File/Import selecionamos o Error! Hyperlink reference not valid. Passaro.bmp.

Selecionamos a imagem com a seta preta e escolhemos o menu Modify/Break Apart. A imagem selecionada fica marcada com pontos. A partir deste momento j possvel modificar por partes a imagem com os instrumentos de desenho. Por exemplo, selecionamos o Lasso Tool E depois o Magic Wand e clicamos no fundo da imagem. Com isto conseguimos que s o fundo da imagem fique selecionado (marcado com pontos). Agora, podemos mudar a cor, ou editar qualquer parmetro do fundo sem afetar a imagem em primeiro plano. Podemos ver o resultado na seguinte imagem:

Como podemos ver na imagem, a capacidade de selecionar do Flash no to perfeita como poderamos desejar. Mesmo assim, pode ser til em muitos casos. Outra maneira de manejar os bitmaps convert-los em reas vetoriais. Para provar esta facilidade, eliminamos a imagem que temos no palco e copiamos nele, arrastando pela janela de livraria, a imagem do pssaro original. Como podem ver, a imagem na livraria intacta e no foi afetada pelas modificaes que fizemos com sua cpia no palco. Selecionamos a imagem com a seta preta e escolhemos o menu: Modify/Trace Bitmapp. Na janela que aparece damos os seguintes valores: ColorTreshold: 50. Isto significa que se a diferena entre os valores RGB de 2 pixels for menor de 50, ento a cor dos 2 pixels se considera igual. Minimum Area: 5 Deixamos invarivel os valores Curve fit= Normal, e Corner Tresholder=Normal. A imagem do pssaro j um desenho vetorial, e podemos edit-lo como tal.

Distribute to Layers
Neste artigo, englobado dentro do manual de Flash, vamos aprender a fazer animaes com objetos complexos. Em Flash, em 1 linha de tempo pode-se animar somente 1 objeto. Mas se quisermos que um texto, por exemplo, se espalhasse, como podemos fazer? Na verso MX de Flash temos a resposta. Com o Type Tool escrevemos o texto 'Ciao bello'. Selecionamos com a seta preta e escolhemos o menu: Modify / Break Apart. Assim, ainda no podemos anima-la porque todas as letras esto no mesmo nvel. Para anim-las teramos que estar em nveis diferentes. Quando a palavra estiver selecionada escolhemos o menu: Modify / Distribute To Layers. Flash automaticamente cria para cada letra um nvel diferente. Agora apagamos a linha de tempo "layer 1" que fica vazia. Em todas as linhas de tempo do fotograma 10 inserimos um fotograma chave. Selecionamos o fotograma 10. Vemos no palco as letras do texto "Ciao bello". Distribumos as letras pelo palco, procurando coloca-las perto da borda. Agora vamos a um fotograma intermedirio entre o 1 e o 10, selecionando todas as linhas de tempo. No painel Property, na opo Tween desdobramos a barra de opes e escolhemos a opo Motion. Isto cria, em todos os fotogramas intermedirios entre o 1 e o 10, as imagens necessrias para dar sensao de movimento progressivo entre o texto legvel que temos no 1 e as letras distribudas que temos no 10. Provamos o filme: Ctrl+Enter

Isto o que queramos conseguir: um texto onde todas as letras esto animadas. Provamos o Distribute to layers em um texto. possvel usar este menu em todos os objetos complexos que possam ser divididos em objetos individuais.

Inserir vdeo em Flash

Insero e gesto de filmes nos projetos Flash. Importar vdeo Uma das novidades de Flash MX a melhora na importao e gesto das seqncias de vdeos (video-clip). Flash capaz de manejar os seguintes Error! Hyperlink reference not valid.: - .avi - Quick Time - .mpeg - Digital video necessrio que o Error! Hyperlink reference not valid. tenha o Quick Time 4 ou o Director 7 (ou verses posteriores) instalados. Vamos criar um smbolo, e dentro deste smbolo inserimos uma seqncia de vdeo. Escolhemos o menu Insert / Create New Symbol (name=ruela, behavior=Movie Clip). Do menu; File escolhemos Import e escolhemos rua.avi. Flash apresenta uma nova janela de dilogo onde podemos ajustar a importao do vdeo. Flash comprime as seqncias de vdeo com o codex 'Sorenson Spark' o que permite reduzir notavelmente o tamanho do arquivo. Os parmetros Quality, Keyframe e Scale permitem ajustar este processo. Deixamos 40 o valor de Quality, e 24 o de Keyframe. Este parmetro indica a srie de fotogramas chave que sero inseridos na seqncia. Colocamos Scale = 70% para reduzir o tamanho do vdeo. A importao pode demorar vrios minutos - dependendo do tamanho do vdeo. Antes de inserir definitivamente a seqncia de vdeo, Flash nos informa que este necessita por sua reproduo total um nmero de fotogramas superior ao que temos atualmente. Portanto, necessrio aumentar o nmero de fotogramas (neste exemplo: 84). O procedimento est completo. Agora vamos ver como podemos aplicar as modificaes de smbolos na seqncia de vdeo. Regressamos ao palco. Inserimos um fotograma chave na posio 84. Regressamos ao fotograma 1. Selecionamos o Movie Clip, e o movemos ao canto esquerdo, e com o Free Transform

o giramos um pouco. No Properties painel abrimos o menu desdobrvel de Color e escolhemos cor = Alpha. Damos um valor de 0%. Criamos uma interpolao (clicando em um fotograma intermedirio), e no Properties painel, menu desdobrvel "Tween", escolhemos a opo "Motion"). Clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions o F9), e escrevemos stop(). Dando um clique duplo no vdeo, e clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions o F9), e escrevemos stop(). Assim, no se repete infinitamente o filme.

Provamos o filme (menu Control / Test Movie o Ctrl+Enter)