Professional Documents
Culture Documents
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)
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
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
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
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.
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.
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.
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
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.
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.
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
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
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
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
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
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
13
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
14
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
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
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
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
17
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
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
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
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
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
21
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
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
Object 7
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:
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
25
Object 8
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.
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
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
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
Object 12
Object 13
Object 14
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
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
30
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.
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
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; }
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:
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
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
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
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
// 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
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
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
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
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
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
40
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 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
<% ' 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 %>
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
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
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
43
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
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.
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
45
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
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
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
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
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
"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
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
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
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
Ficar assim:
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
55
Manual de Flash: http://www.criarweb.com/flash/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
56