You are on page 1of 56

Manuais e recursos para desenvolvimento web www.criarweb.

com

Manual de Flash

Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Rubn Alvarez
(9 captulos)

Ludwing Rodriguez
(5 captulos)

Ivett Kelemen
(8 captulos)

Carlos Carmona
http://www.scourdesign.com/ (1 captulo)

Tutoriales-flash.com
http://www.tutoriales-flash.com/ (6 captulos)

Aurelio Franco Fernndez


http://www.studioflash.es (1 captulo)

Miguel Angel Alvarez Traduo de JML


(1 captulo)

Susana Ros Suanes


http://www.delphi.todouy.com/ (1 captulo)

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Prlogo do Manual 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. Esperamos que o manual seja de seu agrado e pedimos que entre em contato conosco se encontrar algum tipo de errata no manual ou em caso de dvidas. Artigo por Rubn Alvarez

O que Flash
Provavelmente, um dos avances mais importantes em matria de desenho no web foi o aparecimento da tecnologia 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,
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 2

Manuais e recursos para desenvolvimento web www.criarweb.com

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. Artigo por Rubn Alvarez

Sobre o trabalho em Flash


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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

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.

Artigo por Rubn Alvarez

Camadas e fotogramas em Flash


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.
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 4

Manuais e recursos para desenvolvimento web www.criarweb.com

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. Artigo por Rubn Alvarez

Bibliotecas em Flash
No captulo precedente introduzimos o conceito de camada e fotograma e ressaltamos a necessidade de utiliz-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 carreg-la. Um dos elementos que contribui para 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, compartilhada por vrias animaes, ou ento permanente (empregada pela totalidade de animaes). Cada um dos elementos que constituem uma biblioteca, so denominados smbolos. Como

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

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 arquivo leve como tambm nos permite uma criao, edio e um delete 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. Artigo por Rubn Alvarez

Minha primeira animao em Flash I


Depois de termos 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: Arquivo > 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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 1

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:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

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 enquanto, no entraremos na explicao da opo comportamento, j o veremos mais adiante.

Ao preencher devidamente a janela anterior e Aceitar, veremos como o cenrio se engrandece e a barra superior do cenrio 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 obra em nosso trabalho artstico! Para desenhar a esfera vamos utilizar as ferramentas de desenho. Comeamos escolhendo a ferramenta oval, representada por um crculo. Uma vez escolhida vamos ao cenrio e apertando a tecla Caps Lock 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 degrade 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 select a opo Radial. Veremos como a janela muda de aspecto se parecendo imagem seguinte:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

O que faremos selecionar duas cores (as que vocs gostarem) para cada um dos campos que se encontram na parte inferior da barra de degrade. Para isso, clicaremos sobre cada um dos campos e a seguir, escolheremos uma cor na paleta select situada na parte superior esquerda do painel. Repetiremos o processo para o outro campo. Uma vez definido o degrade, podemos selecionar a ferramenta de pintura, e clicaremos com o boto esquerdo sobre a parte preenchida do crculo. Funcionando 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 campos 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 pixel por pixel. Artigo por Rubn Alvarez

Minha primeira animao em Flash II


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 imagem 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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 9

Manuais e recursos para desenvolvimento web www.criarweb.com

de um crculo em perspectiva. Esta animao poderia ser definida por trs imagens 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:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

10

Manuais e recursos para desenvolvimento web www.criarweb.com

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. Artigo por Rubn Alvarez

Minha primeira animao em Flash III


Como j dispomos das imagens 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:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

11

Manuais e recursos para desenvolvimento web www.criarweb.com

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 semi-elipses 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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

12

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Rubn Alvarez

Minha primeira animao em Flash IV


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:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

13

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 2

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. Artigo por Rubn Alvarez

Colocar filmes Flash em nossas pginas


Colocar filmes Flash em nossos arquivos html, asp, php, 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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

14

Manuais e recursos para desenvolvimento web www.criarweb.com

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 servidor, j que o .swf e .html no o necessitaro. Artigo por Ludwing Rodriguez

Como fazer botes em Flash


Neste captulo aprenderemos a criar botes e como link-los com nossos arquivos 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 site 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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

15

Manuais e recursos para desenvolvimento web www.criarweb.com

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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 16

Manuais e recursos para desenvolvimento web www.criarweb.com

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 teclas CTRL + Enter. Se depois quiser ver o filme em seu explorador de internet, unicamente pressione as teclas CTRL + F12. Artigo por Ludwing Rodriguez

Linkar pginas web por meio de botes Flash


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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

17

Manuais e recursos para desenvolvimento web www.criarweb.com

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 arquivo, 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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 18

Manuais e recursos para desenvolvimento web www.criarweb.com

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. Artigo por Ludwing Rodriguez

Links e-mails Flash


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:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

19

Manuais e recursos para desenvolvimento web www.criarweb.com

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 mouse. 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 Arquivo > Publicar). O resultado pode ser visto neste link. Artigo por Ludwing Rodriguez

Interpolao de Formas
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 imagem 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 teclas 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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 20

Manuais e recursos para desenvolvimento web www.criarweb.com

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) Artigo por Ludwing Rodriguez

Shape Hint. Interpolao ordenada de formas


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).

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

21

Manuais e recursos para desenvolvimento web www.criarweb.com

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).

Object 4

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

Object 5

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

22

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Ivett Kelemen

Interpolaes de 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.

Object 6

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

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

23

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 7

Artigo por Ivett Kelemen

Efeitos de mscaras com Flash


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 tecla F6 e mova a
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 24

Manuais e recursos para desenvolvimento web www.criarweb.com

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! Artigo por Ivett Kelemen

Onion Skin ( Pele de cebola )


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

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

25

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 8

Artigo por Ivett Kelemen

Importar bitmap e usar como fundo


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
26

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

est formado por pequenos pssaros.

Object 9

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.

Object 10

Artigo por Ivett Kelemen

Modificar Bitmap
Modificar bitmap O Flash no um programa para retocar fotografias, 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 arquivo Passaro.bmp.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

27

Manuais e recursos para desenvolvimento web www.criarweb.com

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:

Object 11

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.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

28

Manuais e recursos para desenvolvimento web www.criarweb.com

Object 12

Color Treshold=50, Minimum Area=5

Object 13

Color Treshold=100, Minimum Area=10

Object 14

Color Treshold=150, Minimum Area=15

Artigo por Ivett Kelemen

Distribute to Layers
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.
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 29

Manuais e recursos para desenvolvimento web www.criarweb.com

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 animlas 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

Object 15

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. Artigo por Ivett Kelemen

Inserir vdeo em 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 arquivos:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

30

Manuais e recursos para desenvolvimento web www.criarweb.com

.avi Quick Time .mpeg Digital video

necessrio que o computador 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. 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.

Agora vamos ver como podemos aplicar as modificaes de smbolos na seqncia de vdeo.

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

Artigo por Ivett Kelemen

Scroll de texto em Flash


Vamos criar um scroll de texto da forma mais simples que h. J ser com voc torn-lo esteticamente mais chamativo ou complic-lo mais. Primero podemos dar uma olhada no exemplo em funcionamento para saber o que vamos criar neste artigo.
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 31

Manuais e recursos para desenvolvimento web www.criarweb.com

Abrimos um novo filme de Flash e vamos usar uma nica camada. Com a ferramenta de texto Criamos um campo de texto do tamanho que quisermos e lhe daremos as seguintes propriedades:

Estas propriedades so: Campo de texto tipo dinmico, multi-linha para que o texto possa ocupar mais de uma linha, criamos a varivel "MeuTexto" que onde, usando ActionScript, meteremos o texto do scroll. Quanto ao tipo de fonte, tamanho e cor, coloquei uma letra Arial, a 14 px e de cor azul, voc pode colocar o que quiser. E por ltimo, temos estes trs botes: O primeiro quer dizer que o texto poder ser selecionado pelo usuario, o segundo, que o texto ler o formato HTML, ou seja, poderemos colocar etiquetas de HTML, e o terceiro que o campo de texto ter uma moldura ao redor. Agora vamos criar 2 botes, para mover o texto para cima e para baixo. Voc pode criar os botes como quiser, para este exemplo, usamos uns dos que vem na biblioteca de arquivos comuns de Flash MX (janela>biblioteca comuns>botoes>circle buttons>menu):

Como se pode ver, o boto de baixo, est invertido; para os que so muito novatos em flash, digo para que para dar a volta ao boto, embora haja vrias maneiras, a mais simples seria selecionar o boto e modificar>transformar>virar verticalmente, e pronto.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

32

Manuais e recursos para desenvolvimento web www.criarweb.com

Bem, a parte do desenho, (o mais simples possvel), j est terminada, agora vamos ver o cdigo que necessitamos. Comecemos pelo cdigo dos botes; selecionamos o boto de cima, clicamos com o boto direito sobre ele e damos a "aes", ento, se abrir o quadro de cdigo, e colocaremos o seguinte:
on (press) { MeuTexto.scroll -= 1; }

E no boto de baixo colocaremos:


on (press) { MeuTexto.scroll += 1; }

Estes cdigos, o que dizem a flash que quando se pressione o boto, a MeuTexto, que a varivel que criamos para o texto anteriormente, na propriedade scroll que j vem definida em ActionScript, lhe diminumos (para subir), ou lhe somamos (para baixar), uma unidade ao que j tnhamos. Por ltimo, nos falta colocar o texto no scroll, selecionamos o primeiro e nico fotograma que temos, clicamos com o boto direito sobre ele e vamos 'aes', e colocamos:

stop(); MeuTexto = "O texto que quiser.";

O cdigo muito fcil, simplesmente, colocamos de entrada um stop, por uma razo, cada vez que se leia este fotograma, se executar este cdigo, como s deve se executar uma vez, (do contrrio o texto no pararia de se carregar no scroll), colocamos um stop e o filme se deter.
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 33

Manuais e recursos para desenvolvimento web www.criarweb.com

A seguir carregamos o texto colocando na varivel MeuTexto que criamos ao criar o campo de texto dinmico. Ateno com um erro muito bobo que pode dar alguma dor de cabea para os mais novatos; para carregar o texto, a estrutura a seguinte: varivel = "texto"; como se pode ver, o texto vai entre aspas, de modo que o texto que colocarmos no poder ter nada entre aspas, ou seja, isto: variavel = "aqui vai o "texto" que quero colocar"; nos daria erro. Neste caso, por ser um texto to curto se v fcil, porm o mais lgico que copissemos e colssemos o texto, tenha em conta que no pode ter aspas intercaladas. E outra coisa que no pode ter so quebras de linha. So as nicas coisas a ter em conta neste tipo de scroll. Se desejar, pode baixar o arquivo do exemplo aqui. Para acabar podemos abrir uma pgina a parte para ver o exemplo funcionando. Artigo por Carlos Carmona

Criar um reprodutor de MP3 em Flash


Neste tutorial vamos aprender a realizar um reprodutor MP3 com Flash, com sua lista de reproduo. Como vamos empregar componentes, vocs vero o fcil que a programao do exemplo. COMO FAZ-LO. Vamos depositar os arquivos MP3 em um diretrio na raiz do servidor web chamado mp3. Se dispusermos da capacidade para executar alguma tecnologia de servidor como ASP ou PHP, criaremos dinamicamente um arquivo XML com os nomes dos arquivos MP3. Se no tivermos nenhuma destas tecnologias ao nosso alcance o melhor criar o arquivo XML manualmente e deposit-lo no servidor. De qualquer forma, o XML que administra os dados dever ter esta estrutura.
<?xml versao='1.0' ?> <exploracao pasta='mp3'> <arquivo nome='2_pi_r.mp3' /> <arquivo nome='Brain_Stew.mp3' /> <arquivo nome='Carrera_Rapida.mp3' /> <arquivo nome='Feel_The_Pain.mp3' /> <arquivo </exploracao>

Em nosso exemplo, empregamos ASP, para isso nos baseamos no tutorial Como ler os arquivos que h em uma pasta do servidor com ASP e pass-lo a Flash.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

34

Manuais e recursos para desenvolvimento web www.criarweb.com

O arquivo que usamos gera esta sada.

J em Flash, arrastamos quatro componentes ao stage atravs do painel de componentes. Primeiro, arrastamos um componente MediaPlayback que vai se encarregar da reproduo dos arquivos MP3, lhe colocaremos como nome de instancia controlador. Com o componente selecionado, clicamos na aba parmetros da barra de propriedades para abrir o Inspetor de componentes. Uma vez aberto, atribumos os parmetros como se mostra na figura. Depois posicionamos no stage um componente do tipo lista e lhe colocamos como nome de instancia temas_list. Este componente ir conter a lista de canes de nosso reprodutor MP3 e nos permitir mudar de tema ao clicar sobre seus elementos. Os outros dois componentes que nos restam so dois do tipo Label, que nos indicaro o ttulo da cano que se est reproduzindo e o nmero de temas na lista. Seus respectivos nomes de instancia so titulo_lb e quantidade_lb. A seguir apresentamos o cdigo comentado que vai na linha de tempo principal, que ademais o nico de todo o filme, exceto umas pequenas linhas associadas ao componente lista.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

35

Manuais e recursos para desenvolvimento web www.criarweb.com

// cdigo em linha de tempo principal // ajustes iniciais System.useCodepage = true; // evitamos problemas com os nodes em branco XML.prototype.ignoreWhite = true; // defino um estilo global para os componentes _global.style.setStyle("fontSize", 10); // neste array armazenarei as canes var array_temp:Array = new Array(); // objeto XML que carrega a lista de arquivos var lista_xml:XML = new XML(); lista_xml.onLoad = carregarLista; // ponho o contedo do XML // no componente lista function carregarLista():Void { array_temp = this.firstChild.childNodes; if (!isNaN(array_temp.length)) { // numero de temas titulo_lb.text = array_temp.length+" temas"; // preencho a lista for (var k:Number = 0; array_temp[k]; k++) { temas_list.addItem(array_temp[k].attributes.nome); } // carrega a primeira cano carregarMP3(0); } } // com esta funo carrego o mp3 dentro do // componente mediaplayback function carregarMP3(indice:Number):Void { controlador.setMedia("/mp3/"+array_temp[indice].attributes.nome, "MP3"); controlador.play(0); } // rotinas para passar seguinte cano // quando termine a atual var listenerObject:Object = new Object(); listenerObject.complete = function(eventObj:Object) { _root.tema_actual++; if (_root.tema_actual>=array_temp.length) { _root.tema_actual = 0; } carregarMP3(_root.tema_actual); }; controlador.addEventListener("complete", listenerObject); // carrego a lista de reproduo lista_xml.load("/asp/verLista.asp"); // esta linha seria do tipo // lista_xml.load("minhaLista.xml"); // se emprego um arquivo de texto // plano com formato XML

Agora s falta o cdigo associado ao componente lista.


on (change) { _root.carregarMP3(this.selectedIndex); }

Pode-se baixar este mesmo exemplo e ver como funciona: mp3player.zip, contm todos os arquivos necessrios para execut-lo em um servidor ASP exceto os prprios MP3, que ocupam vrios megas.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

36

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Tutoriales-flash.com

Filmes Flash que se adaptam ao tamanho da janela


Um dos dilemas que se apresentam a um web designer quando comea um projeto em Flash o tamanho do filme. Normalmente se define um tamanho objetivo e se trabalha em base a essas dimenses, o problema costuma surgir quando se visualiza o swf em tela que tm uma resoluo diferente. Nunca lhe aconteceu isto? Voc desenha uma web com resoluo fixa, a 800 x 600px. por exemplo, e quando o cliente v as primeiras telas com uma resoluo de 1024 x 768 ou inclusive de 1280 x 1024 px. (cada vez mais freqente devido ao boom dos TFT de 17'') se queixa porque considera que h uma rea importante da tela sem utilizar. Chegados a esta situao se apresentam duas alternativas: Alternativa 1. Convencemos a nosso cliente de que o tamanho o adequado, lhe aconselhamos sobre a necessidade de no saturar a tela, falamos das bondades de usar claros na composio, dizemos que tecnicamente a nica opo, bl, bl, bl. Alternativa 2. Desenhamos um website adaptvel resoluo da tela (sempre haver um tamanho mnimo). Se no souber como faz-lo, neste tutorial explicaremos nossa maneira de faz-lo, que certamente no a nica. A web www.ivi-concept.com est desenvolvida empregando o sistema que vamos mostrar neste tutorial. COMO FAZER. Mesmo querendo que os contedos do filme se adaptem ao tamanho da janela do navegador, devemos definir uma largura e uma altura mnima para organizar e desenhar a composio. Trabalharemos com estas dimenses e planejaremos o ajuste para resolues maiores. Em nosso exemplo vamos trabalhar com um filme de 600 x 400px. e lhe atribuiremos comportamentos aos elementos que se executaro quando se detecte uma mudana na rea disponvel para mostrar o filme, ou seja, desenhamos o filme pensando em como se deve reajustar para diferentes tamanhos. Todos os elementos ajustveis tm que ser do tipo movieclip e devem ter sua origem em sua esquina superior esquerda. Se tivermos botes e caixas, sero colocados dentro de um movieclip. Temos que incluir o swf no html com umas dimenses de 100% de largura e 100% de altura, alm de indicar na linha de tempo principal que no queremos que se escale novamente, mas sim que se ajuste esquina superior esquerda. No primeiro frame escreveremos:
Stage.scaleMode = "noScale"; Stage.align = "TL";

Se fizermos isto, quando aumentarmos ou diminuirmos o tamanho da janela, estaremos fazendo o prprio com o tamanho do Stage. Todo o mecanismo do tutorial se baseia neste tamanho do Stage. A seguir definimos as dimenses mnimas:
largura_minima = 600;

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

37

Manuais e recursos para desenvolvimento web www.criarweb.com

altura_minima = 400;

Para armazenar os clips que tm que se ajustar (que sero todos menos os que se ajustam acima esquerda) iremos criar um array ou matriz:
clips_ajustaveis = new Array();

Definimos o objeto detector de eventos que vai detectar a mudana de tamanho e o associamos ao Stage para detectar as mudanas:
myListener = new Object(); Stage.addListener(myListener);

A funo rec a que se executar cada vez que detectarmos uma mudana no tamanho do Stage:
myListener.onResize = rec; function rec() { altura = Stage.height; if (altura<altura_minima) { altura = altura_minima; } largura = Stage.width; if (largura<largura_minima) { largura = larugra_minima; } for (var g = 0; clips_ajustaveis[g]; g++) { clips_ajustaveis[g].alinhar(); } }

Esta funo obtm em primeiro lugar o novo tamanho do Stage, o compara com as dimenses mnimas e se for menor atribui o valor mnimo. Depois executa o mtodo alinhar() para cada um dos elementos do array clips_ajustaveis que so os clips. Com isto o que fazemos ajustar cada clip da maneira que tivermos dito. E como dissemos? Agora veremos... Para continuar vamos definir dois mtodos ou funes para todos os movieclips mediante prottipos, os prottipos nos permitem adicionar mtodos a classes inteiras sem ter que fazlo individualmente, j publicaremos um tutorial falando sobre eles. O primeiro mtodo que implementaremos ser setAjuste(ajuste_x, ajuste_y, ajuste_width, ajuste_height), atravs do qual vamos indicar como queremos que se ajuste cada clip.
// Os valores para ajuste_x so "esquerda", "direita" e "centralizar" // Os valores para ajuste_y so "acima", "abaixo" e "centralizar" // Os valores para ajuste_width so false, um nmero de pixels // de largura ou a porcentagem da largura do clip com respeito cena // O mesmo se aplica para ajuste_height com a altura MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) { this.ajuste_x = ajuste_x; this.ajuste_y = ajuste_y; this.ajuste_width = ajuste_width; this.ajuste_height = ajuste_height; // armazeno a posio e o tamanho // iniciais dos clips ajustveis this.x0 = this._x; this.y0 = this._y; this.w0 = this._width; this.h0 = this._height; this.ajustePersonalizado = false;

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

38

Manuais e recursos para desenvolvimento web www.criarweb.com

// armazeno o clip no array clips_ajustaveis.push(this); this.alinhar(); };

Como se v no final do bloco de cdigo executamos o mtodo alinhar() do clip. Esta funo ser definida de um modo parecido com outro prottipo. Com alinhar() o que fazemos ajustar cada clip dependendo dos ajustes que tivermos passado com setAjuste():
MovieClip.prototype.alinhar = function() { // se passamos o parmetro ajuste_width na funo // setAjuste, significa que devo ajustar a largura do clip // quando escalo novamente a tela if (this.ajuste_width) { if (this.ajuste_width.indexOf("%") != -1) { // se o valor de this.ajuste_width uma porcentagem this._width = (_root.largura*parseInt(this.ajuste_width))/100; } else { // se o valor de this.ajuste_width for um nmero de pixels this._width = this.ajuste_width; } } // o mesmo com o ajuste da altura do clip if (this.ajuste_height) { if (this.ajuste_height.indexOf("%") != -1) { this._height = (_root.altura*parseInt(this.ajuste_height))/100; } else { this._height = this.ajuste_height; } } // ajustes de posio dos clips if (this.ajuste_x == "esquerda") { this._x = this.x0; } if (this.ajuste_x == "direita") { this._x = Math.round(this.x0+(_root.largura-_root.largura_minima)); } if (this.ajuste_x == "centralizar") { this._x = Math.round((_root.largura-this._width)*0.5); } if (this.ajuste_y == "acima") { this._y = this.y0; } if (this.ajuste_y == "abaixo") { this._y = Math.round(this.y0+(_root.altura-_root.altura_minima)); } if (this.ajuste_y == "centralizar") { this._y = Math.round((_root.altura-this._height)*0.5); } // se o clip tiver um ajuste especial executo sua funo ajustar // que definimos no onClipEvent(load) do clip if (this.ajustePersonalizado) { this.ajustar(); } };

Como se pode ver no final do cdigo, se comprova o valor da propriedade ajustePersonalizado, esta propriedade ter um valor igual a true no caso em que quisermos ajustar o clip de um modo personalizado. Ou seja, se observarem no mtodo setAjuste as opes que temos para ajustar um clip so ajustar esquerda, direita ou ao centro no plano horizontal, ajustar acima, abaixo ou ao centro no plano vertical, e definir largura e altura dando um nmero de pixels ou dando uma porcentagem do Stage. Estas opes so bsicas,
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 39

Manuais e recursos para desenvolvimento web www.criarweb.com

por isso muito provvel que queiramos ajustar determinados clips de outra forma. Para isso, no onClipEvent(load) ao invs de executar o mtodo setAjuste, o que vamos fazer atribuir um valor true a sua propriedade ajustePersonalizado, incluir dentro do array clips_ajustaveis e definir sua funo ajustar() que a que lhe ajustar de maneira personalizada. Se aplicar sua imaginao e um pouco de tempo na construo das funes ajustar() poder ampliar este tutorial e desenvolver sites onde tudo se ajustar ao tamanho da tela de um modo impecvel. O cdigo de clip de ajuste personalizado do exemplo :
onClipEvent (load) { this.rodapePagina_txt.autosize = "left"; this.x0 = this._x; this.y0 = this._y; // como quero ajustar o clip // adiciono ao array de clips ajustaveis _root.clips_ajustaveis.push(this); // este clip vai ter um ajuste personalizado, // vai estender a largura da caixa de texto // que tem dentro. Para isso definimos seu // ajuste dentro da funo ajustar ajustePersonalizado = true; function ajustar() { this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26; this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26; this._y = _root.altura-this._height-5; } }

Em compensao, em um clip que se ajusta segundo os critrios padro este cdigo seria mais simples:
onClipEvent (load) { this.setAjuste("direita", "acima", false, false); }

Seguir estas instrues complexo, portanto recomendamos o download do fla com comentrios explicativos. exemplo_ajustePantalla.fla Artigo por Tutoriales-flash.com

Cabealho Flash em Wordpress


Os passos a seguir seriam os seguintes: Definir o tamanho exato que queremos desenhar nosso .swf, logicamente deve de ser o que tenha a imagem do cabealho do WP (wordpress) com o objetivo de ocupar o mesmo espao que ele e no deixar espaos vazios. Para isto, temos que buscar o arquivo que se chama head.jpg, normalmente o teremos nas pasta wpcontent/themes(se usarmos algum)/nomedetheme/images/nomevariante(alguns themes tm distintas formas de poder se visualizar e podem vir diferenciadas por pastas), e assim poderemos ver as dimenses que tem. Uma vez feito o anterior, temos que incrustar o arquivo .swf no lugar onde est tal imagem, e para isso, temos que editar o arquivo header.php, normalmente localizado

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

40

Manuais e recursos para desenvolvimento web www.criarweb.com

em wp-content/themes/nomedelthemequeuses. O que temos que fazer eliminar todo o contedo que encontramos entre a etiqueta div id="headerimg" e sua etiqueta de fechamento e substitu-lo pelo cdigo que se v na imagem, tal cdigo pode ser encontrado em um arquivo de texto para baixar no final do tutorial. Com isso j teramos o swf no cabealho.

H que ter em conta um pequeno detalhe, que pelo menos para mim foi um contratempo. Se observarem o cdigo da imagem, a referncia ao arquivo .swf relativa, ou seja, no do tipo http://. dando a url exata de onde est localizado no servidor, e sim que s pe o nome do arquivo .swf, que deveremos alojar na pasta principal de nosso wordpress. Isto tem uma explicao e h que ter em conta especialmente se usamos botes em swf, como o caso deste blog para se dirigir s sees principais do mesmo. O caso que se usarmos a url no lugar da rota relativa, no IE funciona perfeitamente, mas no Firefox, se visualiza corretamente o .swf, porm os botes no funcionam. Acho que no esqueci de nada, caso no funcione algo, entrem em contato comigo que eu ajudarei no que for possvel. Deixo a seguir o link onde se pode baixar o cdigo que se pe no header.php para incrustar o swf. cdigo para incrustar flash em header.php Por ltimo comentar que bom, se usarmos animaes em tal cabealho, me refiro animaes de entrada, temos que ter em conta que cada vez que mudarmos a seo, se recarregar esse arquivo, portanto ou as fazemos curtas ou no as fazemos porque pode chegar a ser inclusive incmodo, no meu caso, me limitei a animar s os botes. Artigo por Aurelio Franco Fernndez

Como ler os arquivos do servidor com ASP e pass-lo a Flash


Esta tcnica tem mltiplas aplicaes, como por exemplo: Carregar uma galera de imagens que previamente tenhamos depositado via FTP no servidor. Mostrar os links de download de um conjunto de arquivos em uma pasta. (NOSSO CASO) Explorar o contedo do disco rgido do servidor web.

Como Flash no pode realizar esta funo, necessitamos alguma tecnologia de servidor como PHP, ASP, ColdFusion..., neste tutorial vamos empregar ASP. COMO FAZ-LO. Primeiro criamos o arquivo explorar.asp que o que se vai encarregar de mostrar em formato XML a informao dos arquivos, neste exemplo se trata da pasta files situada na raiz de nosso domnio. Nesta pasta esto os arquivos de download que acompanham nossos tutoriais. Contedo de explorar.asp
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 41

Manuais e recursos para desenvolvimento web www.criarweb.com

<% ' tentamos evitar o cache do navegador -------------Response.Expires=0 Response.CacheControl="private" ' ---------------------------------------------------------------Response.ContentType="text/XML" 'Criamos o objeto FileSystemObject Set fso = Server.CreateObject("Scripting.FileSystemObject") ' escolhemos a pasta files atraves da raiz do servidor web ' substituir "/files/" pela que lhes interesse Set folder = fso.GetFolder(Server.MapPath(("/files/"))) Set files = folder.Files ' ' construimos o XML ---------------------------------------Response.Write("<?xml versao='1.0' ?><exploracao pasta='"+folder.Name+"'>") For Each file in files fil=file.Name Response.write("<arquivo nome='") Response.write(file.Name) Response.write("' size='") Response.write(file.size\1024) Response.Write("' />") Next Response.Write("</exploracao>") ' ---------------------------------------------------------------Set files = nothing Set folder = nothing Set fso = nothing %>

Neste cdigo s tm que modificar a linha


Set folder = fso.GetFolder(Server.MapPath(("/files/")))

Onde colocarem a pasta a explorar. Pode-se ver o resultado do documento aqui. Logo, em nosso filme inclumos este cdigo no primeiro fotograma:
XML.prototype.ignoreWhite = true; meuXML = new XML(); meuXML.onLoad = verArquivos; function verArquivos(ok) { pastaEscolhida = this.firstChild.attributes.pasta; if (ok) { var files = this.firstChild.childNodes; for (var k = 0; files[k]; k++) { arquivos.addItem(files[k].attributes.nome+" - "+files[k].attributes.size+" KBytes", files[k].attributes.nome); } } else { //falha no carregamento /> } } function clicLista(component) { getURL("/files/"+component.getSelectedItem().data, "_self"); }

Na primeira linha,

XML.prototype.ignoreWhite = true;

Dizemos a Flash, que ignore os espaos em branco e as tabulaes no momento de analisar qualquer XML que carreguemos. Depois, definimos o objeto XML que vai receber os dados do arquivo ASP e a funo

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

42

Manuais e recursos para desenvolvimento web www.criarweb.com

verArquivos. Esta funo vai percorrer o XML e vai adicionar um elemento ao listBox por cada arquivo que houver na pasta a explorar. A funo clicLista a que se executa quando selecionamos um elemento do listBox, em nosso caso, lana o download do arquivo selecionado. Por ltimo falta o cdigo do boto, que o que carrega os dados XML, o cdigo :
on (release) { //evitamos carregar o XML mais de uma vez if (!meuXML.loaded) { meuXML.load("/asp/explorar.asp"); } }

Recomendamos o download do fla com comentrios explicativos, exemplo_explorar.zip Artigo por Tutoriales-flash.com

Carregamento de clips externos em Flash. A classe MovieClipLoader


At o aparecimento desta classe (em Flash MX 2004), o carregamento de arquivos externos (swf ou jpeg) era um processo muito limitado e com escassas possibilidades de controle. Antes a nica opo era executar a sentena loadMovie ou loadMovieNum e havia que recorrer a chatos loops para comprovar o carregamento completo do arquivo externo. Agora com o uso da classe MovieClipLoader, Flash se encarregar de comprovar o carregamento e executar as aes que lhe indicarmos quando o clip estiver disponvel. Ademais, poderemos executar cdigo em distintos momentos do processo. Ou seja, quando se iniciar o carregamento podemos executar aes, durante o progresso do carregamento, tambm, e como comentamos, quando finalizar a transferncia tambm! Passamos a ter tudo sob controle! A seguir se pode baixar um fla comentado onde se explica de modo simples como empregar a classe MovieClipLoader.zip.
Nota: Para comprovar o funcionamento perfeitamente os arquivos a carregar devem estar alojados em um servidor remoto.

Artigo por Tutoriales-flash.com

Distorcer clips com ActionScript


Entretanto, se queremos distorcer um clip de filme veremos que com as ferramentas que nos proporciona Flash no poderemos faz-lo diretamente.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

43

Manuais e recursos para desenvolvimento web www.criarweb.com

Neste documento iremos facilitar uma maneira de distorcer um clip de filme em tempo de execuo com ActionScript. Na verdade o clip original permanecer inaltervel, o que faremos ser criar outro clip com a distoro aplicada e ocultar o primeiro. O processo se basear na classe bitmapData de ActionScript. A classe bitmapData nos permite armazenar e manipular os pixels que compe um clip. COMO FAZ-LO. A distoro se far segundo este esquema onde cada bloco representa uma coluna de pixels:

Decomporemos a representao grfica do clip original em filas ou colunas segundo seja a distoro horizontal ou vertical. Depois modificaremos as dimenses destes segmentos e se gerar a aparncia de distoro. Vamos explicar s a distoro vertical, j que a distoro horizontal praticamente igual e as diferenas no cdigo so mnimas como se poder comprovar mais adiante. O primeiro passo consiste em armazenar em um objeto bitmapData os pixels do clip a distorcer. Chamaremos de bitmap_1. Depois vamos criar um clip vazio que conter o clip com a distoro aplicada. Seu identificador ser conteiner. Para criar a distoro vamos descompor a rede de pixels do objeto bitmap_1 em suas colunas, de modo que ficar dentro do clip continer uma srie clips de um pixel de largura e a mesma altura que o original. Para copiar estes pixels, nos apoiamos em outros objetos bitmapData, que se correspondem com o identificador bitmap_temp que h dentro do loop no cdigo.
// importamos as classes necessrias import flash.display.BitmapData; import flash.geom.Rectangle; import flash.geom.Point; MovieClip.prototype.distorcerV = function(distorcao:Number) { var largura:Number = Math.round(this._width); var altura:Number = Math.round(this._height); var transparent:Boolean = true; var fillColor:Number = 0x00000000; // objeto bitmapData onde armazenamos a info do clip a distorcer var bitmap_1:BitmapData = new BitmapData(largura, altura, transparent, fillColor); bitmap_1.draw(this); this._visible = false; distorcido_mc.removeMovieClip(); // clip onde criaremos a distoro var conteiner:MovieClip = this._parent.createEmptyMovieClip("distorcido_mc", this._parent.getNextHighestDepth(), {_x:this._x, _y:this._y}); conteiner._x = this._x; conteiner._y = this._y; for (var k:Number = 1; k<largura; k++) { var clip_temp:MovieClip = conteiner.createEmptyMovieClip("clip"+k, conteiner.getNextHighestDepth(), {_x:k, _y:0}); clip_temp._x = k; Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 44

Manuais e recursos para desenvolvimento web www.criarweb.com

var bitmap_temp:BitmapData = new BitmapData(1, altura); bitmap_temp.copyPixels(bitmap_1,new Rectangle(k, 0, k, alto),new Point(0, 0)); clip_temp.attachBitmap(bitmap_temp,clip_temp.getNextHighestDepth(),"auto",true); clip_temp._yscale = ((k/(alto-1))*(100-distorcao))+distorcao; clip_temp._y = (altura-clip_temp._height)*0.5; } // liberamos memria bitmap_1.dispose(); };

Para distorcer um clip simplesmente h que chamar ao seu mtodo distorcerV(distorcao). O valor do parmetro distoro deve estar entre 0 e 100 seno os resultados so imprevisveis (pode-se provar de todos modos). Um exemplo seria:
meuClip.distorcerV(70);

Facilitamos o cdigo em uns arquivos .as de modo que para empreg-los voc ter duas opes: Copiar o cdigo do .as dentro de nosso filme. Usar um #include para dispor de suas funes.

Com esta base o interessante provar novas formas de distoro ou inclusive combinar vrias distores. Nesta imagem se aplicou uma distoro horizontal e logo outra vertical para conseguir um efeito de perspectiva.

Download dos arquivos .as: distorsion.zip Artigo por Tutoriales-flash.com

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

45

Manuais e recursos para desenvolvimento web www.criarweb.com

Tutorial para fazer um livro de visitas com Flash e ASP


Para evitar o uso do banco de dados vamos armazenar os comentrios dos visitantes em um arquivo de texto plano em formato XML.
Nota: Os comentrios fteis ou ofensivos sero eliminados do arquivo pela equipe de tutorialesflash.com.

O mecanismo do livro muito simples, adicionamos os comentrios sequencialmente em um arquivo de texto existente em nosso servidor. Para mostrar todos os comentrios, se l o arquivo e se carregam os dados no filme swf. COMO FAZ-LO. O arquivo que armazena os comentrios, que em nosso caso se chama livro.txt, ter este formato:
<visita data='27/12/2006 12:31:11'> <autor>Usuario%201</autor> <comentario>Este%20es%20un%20comentario%20de%20prueba%2E%20%BFse%20ve%20bien%3F</comentario> </visita> <visita data='27/12/2006 12:31:37'> <autor>Usuario%202</autor> <comentario>Este%20es%20otro%20comentario%20de%20prova%2E%20Pois%20s%ED%2C%20se%20ve%20bem %2E</comentario> </visita>

Como se pode ver, se parece a um documento XML, porm lhe faltam dois elementos imprescindveis em todo XML: A declarao do tipo de documento e o n principal que contm ao resto de ns. Mais adiante veremos o porqu deste formato incompleto. Para editar este arquivo livro.txt cada vez que se inclui um comentrio novo, usamos o objeto FileSystemObject de ASP j que Flash por si s no pode faz-lo. Ademais ter que estar habilitada a permisso de escritura no diretrio que o contenha. Com este arquivo add_comentarios.asp realizamos a operao.
<% On Error Resume Next ' Criamos o objeto FileSystemObject chamado fs Set fs=Server.CreateObject("Scripting.FileSystemObject") ' Abrimos o arquivo para modific-lo e nos posicionamos ao final ' do arquivo, por isso o 2o argumento 8, se fosse 1 se abriria ' em modo s leitura Set f=fs.OpenTextFile(Server.MapPath("/livro_visitas/livro.txt"), 8) ' Inserimos os dados enviados desde Flash f.WriteLine("<visita data='"& Now &"'>") f.Write("<autor>") f.Write(Trim(Request("autor"))) f.WriteLine("</autor>") f.Write("<comentario>") f.Write(Trim(Request("comentario"))) f.WriteLine("</comentario>")

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

46

Manuais e recursos para desenvolvimento web www.criarweb.com

f.WriteLine("</visita>") ' Fechamos e eliminamos os objetos usados f.Close Set f=Nothing Set fs=Nothing ' se Err=0 tudo foi bem, este valor devolvido ' a flash para confirmar a operao Response.write("error="&Err) %>

Se observarem, se adiciona a data do servidor no momento do comentrio, o autor e o comentrio em si. Para ler o arquivo com os comentrios usamos o arquivo comentarios.asp.
<% Response.ContentType="text/xml" ' Abro o arquivo para l-lo Set fs=Server.CreateObject("Scripting.FileSystemObject") Set f=fs.OpenTextFile(Server.MapPath("/livro_visitas/livro.txt"), 1) ' Adiciono a declarao de documento e abro o n principal Response.write("<?xml version='1.0' encoding='ISO-8859-1' ?><visitas>") Response.Write(f.ReadAll) ' fecho o n principal, com o que j tenho ' um XML bem formado Response.write("</visitas>") ' Fechamos e eliminamos os objetos usados f.Close Set f=Nothing Set fs=Nothing %>

A resposta deste arquivo um XML bem construdo que se pode ver aqui. A razo de salvar o arquivo livro.txt em formato incompleto que se facilita sua atualizao de novos comentrios. Com cada comentrio novo simplesmente temos que adicionar ao final os novos dados e esquecermos. Neste ponto, vamos a Flash para ver o cdigo ActionScript necessrio que vai no primeiro fotograma:
// ajustes iniciais ----------------------------------System.useCodepage = true; // evitamos problemas com os ns em branco XML.prototype.ignoreWhite = true; _global.style.setStyle("fontSize", 10); visitas_txt.htmlText = true; // impedimos o uso dos caracteres < e > // que podem dar problemas autor_txt.restrict = "^<>"; comentario_txt.restrict = "^<>"; // fim ajustes iniciais ------------------------------// estilos CSS para os comentrios var my_styles:TextField.StyleSheet = new TextField.StyleSheet(); my_styles.setStyle("autor", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"11px", color:"#99CC00"}); my_styles.setStyle("data", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#006699"}); my_styles.setStyle("comentario", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#666666"}); visitas_txt.styleSheet = my_styles; // objeto LoadVars para enviar comentarios // e comprovar a operao var visitas_lv:LoadVars = new LoadVars(); visitas_lv.onLoad = function() { Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 47

Manuais e recursos para desenvolvimento web www.criarweb.com

if (this.error == 0) { comentarios_xml.load("/asp/comentarios.asp"); } else { visitas_txt.text = "Erro escrevendo comentrio."; } }; // objeto XML que carrega os comentrios var comentarios_xml:XML = new XML(); comentarios_xml.onLoad = carregarComentarios; function carregarComentarios() { visitas_txt.text = ""; var array_temp:Array = this.firstChild.childNodes; if (!isNaN(array_temp.length)) { // numero de comentarios titulo_lb.text = array_temp.length+" comentarios"; // preencho o textArea com os comentarios array_temp.reverse(); for (var k:Number = 0; array_temp[k]; k++) { var autor:String = unescape(array_temp[k].firstChild.firstChild.toString()); var comentario:String = unescape(array_temp[k].lastChild.firstChild.toString()); visitas_txt.text += "<p><autor>Autor: <b>"+autor+"</b></autor></p>"; visitas_txt.text += "<p><fecha>"+array_temp[k].attributes.data+"</data></p>"; visitas_txt.text += "<p><comentario>"+comentario+"</comentario></p>"; visitas_txt.text += "<p></p>"; } } } // funo para mandar um comentrio, comprovo que o autor // tenha pelo menos 3 caracteres e o comentrio 1 function enviarComentario() { if (autor_txt.text.length>=3 && comentario_txt.text.length>=1) { visitas_lv.autor = escape(autor_txt.text); visitas_lv.comentario = escape(comentario_txt.text); visitas_lv.sendAndLoad("/asp/add_comentario.asp", visitas_lv, "POST"); } } // defino a funo que se executar o clicar no boto botao_enviar.addEventListener("click", enviarComentario); // carrego os comentrios sem interveno do usurio // ao entrar na pgina comentarios_xml.load("/asp/comentarios.asp");

Empregamos escape() e unescape() para assegurarmos que no haja problemas com os caracteres empregados no nome de autor e os comentrios. Vocs podem baixar este mesmo exemplo e ver como funciona: livro.zip Artigo por Tutoriales-flash.com

Open Flash Chart


Vamos falar de um componente Flash muito interessante para a criao de grficos de representao de dados. Trata-se de Open Flash Chart, uma ferramenta de cdigo livre, gratuita e livre de uso. Com Open Flash Chart voc poder criar grficos em sua pgina web com facilidade e sem necessidade de ter Flash instalado em seu computador. Nos grficos poder carregar os dados que desejar e escolher entre vrios tipos de grficos, as cores, etc. Uma vez publicados os
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 48

Manuais e recursos para desenvolvimento web www.criarweb.com

grficos em seu website, todos os visitantes que tiverem instalado o plugin de Flash podero v-los, o que quase a totalidade do trfego que poder receber em sua pgina. um projeto muito completo, que no s permite criar variados modelos de grficos, como ademais tem diversos tipos de usos e tem bibliotecas para utilizar e integrar o sistema de grficos Flash com o carregamento de dados em diversos linguagens de programao web como PHP, .NET, Perl, Java, Python, Rubi e Google WebToolkit. Podemos encontrar Open Flash Chart em http://teethgrinder.co.uk/open-flash-chart/ No momento de escrever este artigo est em fase de desenvolvimento a nova verso do produto, Open Flash Chart 2, que tem diversas melhoras, porm principalmente se trata de uma mudana no esquema de desenvolvimento, que segundo o autor, muito mais robusto e permite uma melhor organizao do cdigo e o crescimento do projeto. Podemos encontrar a nova verso em: http://teethgrinder.co.uk/open-flash-chart-2/ O mais destacvel para os desenvolvedores que pretendam utilizar a segunda verso de Open Flash Chart que o carregamento de dados se realiza por JSON, uma notao especial de Javascript para a definio de objetos. Para fazer umas provas do sistema, embora a segunda verso do projeto esteja em fase Beta, em CriarWeb.com achamos que seria melhor ver a segunda verso. Segundo dia o autor ademais, a verso 1 j no seguir sendo atualizada. Utilizar Open Flash Chart A criao de grficos em Flash pode ser feito de uma maneira bastante rpida, ao menos os primeiros exemplos que oferecem. Para isso, ser necessrio que baixemos o sistema atravs da zona de Download da pgina de Open Flash Chart. Com isso, obteremos um arquivo zip que temos que descomprimir em nosso disco rgido. Dentro veremos uma estrutura de diretrios que tem muitos cdigos e componentes, embora no caiba se assustar, porque para os exemplos mais simples no faz falta utilizar mais que um arquivo, que a o filme Flash (arquivo open-flash-chart.swf) que h na raiz do pacote comprimido. Esse filme ou animao Flash o que tem o cdigo para gerar por Flash o grfico. Logo, teremos que configur-lo com um arquivo JSON para lhe indicar os dados que se desejam mostrar. Para incluir em uma pgina web o filme Flash temos que utilizar um cdigo como este:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="600" height="300" id="graph-2" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="open-flash-chart.swf" /> <param name="quality" value="high" /> <embed src="open-flash-chart.swf" quality="high" bgcolor="#FFFFFF" width="600" height="300" name="open-flash-chart"

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

49

Manuais e recursos para desenvolvimento web www.criarweb.com

align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

Este cdigo foi extrado do tutorial 1 da criao de grficos Flash que tm na prpria pgina do projeto. um cdigo normal para incluir um filme Flash em uma pgina web. Pois bem, para que isto funcione voc tem que ter em conta uma srie de coisas que veremos a seguir. 1) Tem que ter a animao Flash (arquivo open-flash-chart.swf) no mesmo diretrio onde est o arquivo com o cdigo HTML anterior. Poderia mudar o arquivo swf ao lugar que desejar, porm ento ter que atualizar a rota a este arquivo no cdigo HTML anterior. Observe que a rota ao arquivo est em dois lugares do cdigo anterior, em uma etiqueta PARAM e em um atributo da etiqueta embed src="open-flash-chart.swf". 2) Tem que criar o cdigo JSON para o carregamento de dados do grfico e coloc-lo no lugar correto, com o nome de arquivo "data.json". Segundo a documentao de Open Flash Chart parece que se busca este arquivo de dados em vrios lugares esse arquivo json, por exemplo, na raiz do domnio, porm, segundo as provas que fiz em criarweb .com, no me funcionou assim. Logo, veremos um exemplo deste cdigo e uma maneira de localiz-lo para que funcione o exemplo, se que no queremos coloc-lo na raiz do domnio. 3) Importante: o exemplo tampouco se visualizar corretamente se no colocar os arquivos em um servidor web. Ou seja, tem que public-los em seu espao de hospedagem que tiver em Internet e no em seu computador local. Ou se tiver um servidor web configurado em seu computador, deve coloc-lo em algum diretrio de publicao e acessar ao exemplo passando ao servidor web. Isto porque o Flash adquire por http o arquivo JSON, por meio de Ajax, o que s funciona se estiver em um servidor web e acessar pgina atravs de http. Arquivo JSON de carregamento de dados do grfico Flash O arquivo JSON deve ser criado para indicar ao filme Flash quais so os dados que se tem que mostrar. Este arquivo se escreve com uma sintaxe especial, na linguagem Javascript. No se assuste porque a sintaxe simples de ler, entender, editar segundo suas necessidades, j que JSON uma notao entendvel pelas pessoas. De qualquer forma, o prprio Open Flash Chart tem uma srie de bibliotecas em diferentes linguagens, como comentei antes neste artigo de CriarWeb.com, para gerar jogos de dados em sintaxe JSON, por isso voc no teria porque conhecer nada sobre JSON para utilizar este componente. Um arquivo JSON que podemos utilizar de exemplo tem esta forma:
{ "title":{ "text": "Grfica de prueba - DesarrolloWeb.com", "style": "{font-size: 20px; color:#999900; text-align: center;}" }, "y_legend":{ "text": "Grfica creada con Open Flash Chart",

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

50

Manuais e recursos para desenvolvimento web www.criarweb.com

"style": "{color: #99cc33; font-size: 12px;}" }, "elements":[ { "type": "line", "alpha": 0.5, "colour": "#0000cc", "text": "Pginas vistas", "values" : [14,12,14,9,10,12,15,12,13] }, { "type": "line", "alpha": 0.5, "colour": "#660033", "text": "Paginas vistas 2", "values" : [9,7,8,10,12,14,13,10,11] } ], "x_axis":{ "stroke":2, "colour":"#d000d0", "grid_colour":"#00ff00" }, "y_axis":{ "stroke": 4, "tick_length": 3, "colour": "#9933ff", "grid_colour": "#0000ff", "offset": 0, "max": 20 } } Tirei isso do tutorial

que oferecem na pgina do produto e s adaptei umas poucas coisas para personaliz-lo e de passo conhecer algumas das funcionalidades deste mdulo. Agora s teramos que indicar o lugar onde est o arquivo com os dados. Para isso, a forma mais simples atravs da URL. Coloque simplesmente o arquivo JSON no mesmo diretrio que colocou tanto a pgina web com o cdigo HTML para invocar ao Flash, como o prprio filme, com nome "data.json". Sendo assim, pois ter nesse diretrio 3 arquivos. O arquivo HTML com o cdigo para incluir o filme Flash O arquivo da animao Flash: open-flash-chart.swf O arquivo com os dados JSON: data.json

Agora acesse a essa pgina indicando na URL o nome do arquivo JSON: http://www.seudominio.com/rota_de_seu_arquivo_html.html?ofc=data.json Colocamos o exemplo em CriarWeb.com para que se possa v-lo. Artigo por Miguel Angel Alvarez - Traduo de JML

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

51

Manuais e recursos para desenvolvimento web www.criarweb.com

Vestir a uma boneca em Flash


A idia e as imagens foram tiradas daqui: www.teacuerdas.com E foi usada na seguinte mostra que quero que vejam para que tenham uma idia clara do que pretendemos fazer. Uma lojinha que se chama "Sol" Nesta loja h em FLASH um provador de roupa que que faremos aqui. O resto PHP e um banco de dados MySql. Comecemos em forma ordenada: 1) Ter uma idia clara do que queremos fazer. Neste caso o melhor entrar lojinha "Sol" e brincar um pouco em vestir e trocar as distintas roupas e botas boneca. Vero que a ao sempre est nos botes que so as roupinhas da vitrine. Na vitrine, clique sobre a roupinha para vestir e o mesmo clique para tirar. Resumindo o funcionamento da aplicao, com exemplos: Ao abrir, a boneca s em malha e as roupinhas (botes) na vitrine. Clique no boto (conjunto amarelo), e vestimos com o conjunto amarelo. Clique no boto (agasalho), e agregamos agasalho boneca. Clique no boto (conjunto amarelo), a boneca fica s com o agasalho.

2) Criar em nosso computador uma nova pasta que podemos chamar provador. 3) Conseguir as imagens necessrias. Como nosso propsito Flash e no o domnio do tratamento de imagens, elas j esto prontas. Porm, qualquer coisa que quiserem perguntar a este respeito, responderei por e-mail com muito prazer. Na pgina http://www.delphi.todouy.com/flash/probador/imagenes.html encontraro todas as que necessitam. Com o boto direito do mouse, clique sobre cada imagem e "Salvar imagem como.." Salve na Pasta que criou o fundo .png e os nove futuros botezinhos b1.png, b2.png,...b9.png... E os nove futuros clips c1.png, c2.png,.... c3.png . Se alterar a extenso .png por .bmp ou .jpg as imagens sairo com o fundo celeste e no transparente como necessitamos. 4) Abrimos o Flash e criamos a aplicao: Arquivo->, Novo->, Documento de Flash. Nossa aplicao ter um s frame(fotograma) e duas camadas na linha do tempo. At agora, temos somente uma camada que nomearemos fundo. Importamos a imagem do fundo desde a mesma Pasta.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

52

Manuais e recursos para desenvolvimento web www.criarweb.com

Arquivo-> Importar-> Importar a biblioteca. E j teremos a imagem na biblioteca. Se a biblioteca estiver fechada, a abrimos com Control L e trazemos o fundo.png cena. Em propriedades vemos que as dimenses dessa imagem so 402 x 500. Se a imagem for fazer parte de outra pgina como no caso da "lojinha Sol" o cenrio deve ser dimensionado 402 x 500 tal como o fundo.

E ajustadas as posies do fundo.png no painel Propriedades zero tanto "x" como "y".

Salvamos o fla que tambm podemos chamar provador.fla e se pode provar com Control Enter . 5) Colocamos o cadeado na primeira camada e criamos a segunda onde vai tudo que falta. 6) Importar biblioteca o resto das imagens (todos os botezinhos e clips), que por enquanto ainda nem so botes, nem clips, e sim imagens "mapa de bits". 7) Primeiro, vamos provar com b1 e c1. Arrastamos a b1 desde a biblioteca ao cenrio e o transformamos em boto com o nome botao1. E trazemos a c1 e o transformamos em clip de filme com o nome clip1. Localizamos a botao1 na vitrine e a clip1 no lugar exato para que fique bem bonequinha. Importante: Em um papel, deve ir anotando a localizao exata de cada clip. No meu caso: clip1, x 238, y 160 8) As aes correspondentes: Clip1, vai estar a, porm no queremos que se veja. Para isto escrevemos a ao no frame 1, (o nico frame que teremos na linha do tempo).
setProperty("clip1", _visible, false);

No botao1 escrevemos a ao para vestir e tirar essa blusinha azul que clip1.
on(press){ if(clip1._visible==false){ setProperty("clip1", _visible, true); }else{ setProperty("clip1", _visible, false); } }

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

53

Manuais e recursos para desenvolvimento web www.criarweb.com

O frame nomeia a clip1, e botao1 nomeia a clip1, em suas aes, que no funcionaro se se esquecer de selecionar clip1, para no Panel de Propriedades escrever seu nome em Nome de Instncia. 9) Agora salve e prove, e se tudo funcionou como esperamos, repita a ao para cada um dos artigos da vitrine. Levar pouco tempo usando Edit, Copiar e Colar, ajustando correes para cada caso. Claro que para saber o lugar exato aonde vai cada pea, ter que tirar a anterior. Afinal ter que coloc-las todas empilhadas e por isso dizia que se deve anotar as localizaes de cada clip. 10) Para que no se esquea de nada, comece com os botes. Transforme a b1.png no botao1, localize na vitrine e escreva a ao. Agora h que transformar a b2.png no clip botao2 e localiz-los na vitrine. Copie a ao de botao1 e cole como ao de botao2. Depois corrija mudando no que colou, "clip1" por "clip2". Fazendo assim at que tenha os nove botes, localizados na vitrine e com a ao referida ao clique com seu mesmo nmero. 11)Os botes esto prontos e na vitrine. Continue com os clips que vestiro a boneca. De cada c1.png, c2.png, etc. crie um clip de filme com os nomes clip1, clip2, etc. e o localize vestindo a boneca para anotar a posio exata nas coordenadas x, y, que correspondem, e o exclua do cenrio para que fique na biblioteca e a boneca fique somente com a roupinha de malha para provar o prximo clip e anotar suas coordenadas. Por enquanto isso tudo! 12) Criar o boto dos clips, cada um segundo a anotao. E ateno: no se esquea de colocar a cada um, seu nome no painel de propriedades.

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

54

Manuais e recursos para desenvolvimento web www.criarweb.com

Ficar assim:

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

55

Manuais e recursos para desenvolvimento web www.criarweb.com

13) Completar a ao do frame para que torne o boto inteiro invisvel:

Artigo por Susana Ros Suanes

Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

56

You might also like