um pouco sobre flash

8/7/2019 Um pouco sobre Flash

1/65

Um pouco sobre Flash

Prlogo do Manual de FlashComeamos o tutorial de Flash...

PorRubn Alvarez

Publicado em: 22/12/04Valorize este artigo:

4 votosBem-vindo ao manual de Flash de CriarWeb.

O objetivo deste manual proporcionar os fundamentos necessrios para que vocpossa 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 edescobriremos o emprego das ferramentas mais utilizadas normalmente.

Este tutorial no pretende ser uma descrio exaustiva da aplicao Flash. Desejamosmais deixar sentadas as noes que os ajudaro a ter as idias claras na hora de planejarseu projeto. Portanto, deixamos a vocs mesmos a oportunidade de ver a fundo todas aspossibilidades que este programa oferece, algo que se pode descobrir medida que secria suas prprias animaes.

A parte deste manual, os elementos que voc necessita para criar suas animaes sopoucos: a aplicao Flash, que pode ser baixada em verso de prova nosite deMacromedia, um navegador web e um editor de texto como o bloco de notas deWindows.

Esperamos que o manual seja de seu agrado e pedimos que entre em contato conosco seencontrar algum tipo de errata no manual ou em caso de dvidas.

O que Flash

Descrio desta tecnologia vetorial.

PorRubn Alvarez


2 votosProvavelmente, um dos avances mais importantes em matria de desenho no web foi oaparecimento da tecnologia desenvolvida porMacromedia denominada Flash.

Flash a tecnologia mais utilizada no Web que permite a criao de animaesvetoriais. O interesse no uso de grficos vetoriais que estes permitem realizar
http://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.macromedia.com/downloads/http://www.macromedia.com/downloads/http://www.macromedia.com/downloads/http://www.criarweb.com/contato/http://www.criarweb.com/artigos/282.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/282.phphttp://www.macromedia.com/http://www.criarweb.com/artigos/282.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.criarweb.com/artigos/281.phphttp://www.macromedia.com/downloads/http://www.macromedia.com/downloads/http://www.criarweb.com/contato/http://www.criarweb.com/artigos/282.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/282.phphttp://www.macromedia.com/http://www.criarweb.com/artigos/282.php


2/65

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...). Aqualidade deste tipo de grficos no depende do zoom ou do tipo de resoluocom o qual se esteja olhando o grfico. Por muito que nos aproximemos, ogrfico no se pixeliza, j o computadortraa automaticamente as linhas paraesse nvel de proximidade.

As imagens em mapa de bits. Estes tipos de grficos se assemelham a umaespcie de quadrculo no qual cada um dos quadrados (pxels) mostra uma cordeterminada. A informao destes grficos salva individualmente para cadapxel e definida pelas coordenadas e cor de tal pxel. Estes tipos de grficosso dependentes da variao do tamanho e resoluo, podendo perder qualidadeao modificar sucessivamente suas dimenses.

Sendo assim, Flash se serve das possibilidades que oferece trabalhar com grficosvetoriais, facilmente redimensionveis e alterveis por meio de funes, portanto de umarmazenamento inteligente das imagens e udios empregados em suas animaes pormeio de bibliotecas, para otimizar o tamanho dos arquivos que contm as animaes.

Esta otimizao do espao que ocupam as animaes, combinada com a possibilidadede carregar a animao ao mesmo tempo em que esta se mostra no navegador (tcnicadenominada streaming), permite fornecer elementos visuais que do vida a uma websem que para isso o tempo de carregamento da pgina se prolongue at limitesinsuportveis para o visitante.

Ademais deste aspecto meramente esttico, Flash introduz em seu entorno apossibilidade de interagir com o usurio. Para isso, Flash invoca uma linguagem deprogramao chamada Action Script. Orientado a objetos, esta linguagem tem clarasinfluncias do Javascript e permite, entre outras muitas coisas, organizar opreenchimento de formulrios, executar distintas partes de uma animao em funo deeventos produzidos pelo usurio, ir a outras pginas, etc.

Deste modo, Macromedia pem a nossa disposio uma tecnologia pensada parafornecer 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 vetorialaplicada ao Web, mas sem dvida, trata-se da mais popular e mais completa delas.

Sobre o trabalho em FlashDescrevemos a interface da aplicao Flash MX.

PorRubn Alvarez

http://www.criarweb.com/artigos/282.phphttp://www.criarweb.com/artigos/282.phphttp://www.criarweb.com/artigos/214.php?manual=11http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/282.phphttp://www.criarweb.com/artigos/214.php?manual=11http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6


3/65

3 votosAsanimaes Flash so produzidas em uma aplicao de desenho. Pode-se baixar talaplicao 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 poroutra, uma aplicao inteligentedos recursos que nos oferecem. Neste manualtentaremos insistir no segundo deixando ao leitor a possibilidade de descobrir pouco apouco a aplicao.

Para a redao deste manual, servimos de Flash MX. Cabe esperar que o dito para estaverso seja aplicvel em grande medida s verses precedentes e as que saiam em umfuturo.

Logo aps instalar e abrir a aplicao pela primeira vez, acessaremos a uma janela dedilogo que nos prope trs modos de uso distintos:

Modo desenhista, destinado a criar animaes e grficos Modo geral, no qual vamos dispor de todas as opes de Flash ademais da

ajuda. Modo desenvolvedor, enfocado criao de aplicaes com formulrios, botes

e outros componentes.

Este menu aparecer unicamente na primeira vez que abrirmos Flash, no obstante,poderemos acess-lo atravs da barra de ferramentas na seo Ajuda>Bem-vindo.

J dentro do programa, aps haver fechado alguns painis com o objeto de dispor deespao de trabalho, faremos frente a uma interface como a que se mostra na figura:
http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/283.phphttp://www.macromedia.com/downloads/http://www.macromedia.com/downloads/http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/283.phphttp://www.macromedia.com/downloads/http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/283.php


4/65

Dentro desta interface, podemos distinguir trs partes principais:

O palco Trata-se do espao no qual realizaremos todas as tarefas de edio degrficos. 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 umadas imagens desenhadas no palco. Podemos subdividi-la em duas partes: A parteesquerda, onde poderemos organizar as camadas e a parte da direita que fica

reservada a gesto dos fotogramas. Ambos elementos, camadas e fotogramassero tratados mais adiante.

A caixa de ferramentas Aqui encontraremos as ferramentas de edio grficaque Flash coloca a nossa disposio. Como pode se observar, estas so muitoparecidas as que podemos encontrar em outros programas de edio grfica queseja vetorial ou no.

Camadas e fotogramas em Flash

Explicamos os conceitos de camadas e fotogramas e seu uso.

PorRubn Alvarez


2 votosComo dissemos nocaptulo anterior, a linha de tempo onde poderemos organizar asucesso deimagens que do lugar a uma animao. Neste captulo introduziremos osconceitos de camada e fotograma, vitais para uma compreenso do funcionamento de

Flash.
http://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/283.phphttp://www.criarweb.com/artigos/284.php


5/65

De certa forma, Flash trabalha como se fosse um filme. Uma animao uma sucessode imagens fixas que, ao passar rapidamente umas atrs das outras, do a impresso deum movimento. Cada uma destas imagens fixas chamada tambm fotograma. Osfotogramas so representados sob a forma de retngulos na parte direita do palco.

Nestes retngulos podemos alojar trs tipos diferentes de imagens:

Imagens chaves Trata-se das imagens que ns mesmos desenharemos Imagens fixas So as imagens chaves copiadas nos fotogramas seguintes ao da

primeira imagem chave de forma a produzir um efeito de objeto esttico. Imagens de interpolao Trata-se de imagens calculadas por Flash que

permitem a transio gradual entre duas imagens chaves. Este tipo de imagensmuito teis j que se geram automaticamente e proporcionam um efeito suave demovimento ou transformao.

Por outro lado, uma animao est geralmente constituda de uma variedade de objetosdiferentes, cada um dos quais se introduz em um momento diferente e apresenta umcomportamento independente ao resto dos objetos. De forma a organizar e editar todosestes 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. Estascamadas nos permitem trabalhar a animao em distintos planos independentes.

Por padro, ao comear uma nova cena encontraremos em nossa linha de tempo uma scamada. Progressivamente iremos introduzindo mais camadas que permitam separarcada um dos elementos da animao: objetos, fundo, udios ou trajetrias.

Um uso inteligente das camadas a base para criar animaes de qualidade.

Bibliotecas em FlashO uso de bibliotecas. Conceito de smbolo e ocorrncia.

PorRubn Alvarez


2 votosNo captulo precedente introduzimos o conceito de camada e fotograma e ressaltamos a

necessidade de utiliz-los inteligentemente. Outro elemento de Flash que necessita umagesto mais sbia a biblioteca.
http://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/artigos/284.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/284.php


6/65

Como dissemos previamente, Flash permite a otimizao do espao ocupado pelaanimao, ou o que mesmo, do tempo que o usurio demora em carreg-la. Um doselementos que contribui para isso as denominadas bibliotecas.

Uma biblioteca no mais que um armazm de objetos (grficos ou udios) quepodero ser utilizados em uma mesma animao em uma ou ocasies. Dependendo daposio que apresente esta biblioteca, esta pode ser prpria animao, compartilhadapor vrias animaes, ou ento permanente (empregada pela totalidade de animaes).

Cada um dos elementos que constituem uma biblioteca, so denominados smbolos.Como dissemos, estes elementos podero ser utilizados em nossa animao quantasvezes 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 dasocorrncias que aparecem na animao. Contrariamente, a modificao de umaocorrncia 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 levecomo tambm nos permite uma criao, edio e um delete rpidos de cada uma dasocorrncias.

Nos captulos posteriores abordaremos com mais detalhes a gesto de bibliotecassmbolos e ocorrncias. Passaremos a seguir aplicao do aprendido a partir da criaode uma animao.

Minha primeira animao em Flash ICriao de um smbolo em nossa biblioteca flash.

PorRubn Alvarez


Depois de termos introduzido os conceitos bsicos de Flash, vamos colocar em prticaalguns 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
http://www.criarweb.com/artigos/285.phphttp://www.criarweb.com/artigos/285.phphttp://www.criarweb.com/artigos/285.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/285.phphttp://www.criarweb.com/artigos/285.phphttp://www.criarweb.com/artigos/285.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6


7/65

um nico fotograma representado por um retngulo com um crculo. Este crculosignifica que se trata de um fotograma que contem uma imagem chave vazia.

A animao que pretendemos criar consiste em um movimento de translao de umaesfera com uma trajetria elptica. Sendo assim, o primeiro que devemos fazer

desenhar a esfera. Entretanto, para comear com os bons costumes, no desenharemos aesfera diretamente sobre nosso fotograma vazio, e sim, criaremos um smbolo em nossabiblioteca.

Para criar nosso smbolo na biblioteca:

Janela > Biblioteca

Chegado a este ponto veremos aparecer na tela uma janela como a que se v nailustrao.

Para inserir o smbolo podemos fazer a partir do boto com uma cruz situada na parteinferior esquerda da janela da biblioteca, ou ento ir barra de menus e fazer:

Inserir > Novo Smbolo


8/65

Uma nova janela de dilogo aparece diante de nossos olhos (ver figura abaixo). Nelapoderemos definir o nome (para este caso a chamaremos esfera) e o comportamento(escolheremos grfico). Por enquanto, no entraremos na explicao da opocomportamento, j o veremos mais adiante.

Ao preencher devidamente a janela anterior e Aceitar, veremos como o cenrio seengrandece 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 podemoseditar o smbolo que quisermos criar. Portanto, colocamos mos obra em nossotrabalho artstico!

Para desenhar a esfera vamos utilizar as ferramentas de desenho. Comeamosescolhendo a ferramenta oval, representada por um crculo. Uma vez escolhida vamosao cenrio e apertando a tecla Caps Locke clicando o boto esquerdo do mouse (onico para os usurios Mac), deslocaremos o mouse para qualquer direo. Veremosaparecer 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 janelamuda de aspecto se parecendo imagem seguinte:


9/65

O que faremos selecionar duas cores (as que vocs gostarem) para cada um doscampos 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 naparte superior esquerda do painel. Repetiremos o processo para o outro campo.

Uma vez definido o degrade, podemos selecionar a ferramenta de pintura, e clicaremoscom o boto esquerdo sobre a parte preenchida do crculo. Funcionando tudocorretamente, deveremos obter uma esfera similar a da figura mostrada:

Sugerimos repetir este processo de preenchimento do crculo com um degradebrincando com as opes que nos oferece o painel de mistura de cores. Podemos verque possvel acrescentar mais campos para conseguir um efeito de coroas ou entomudar o tipo de degrade a lineare 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 dealinhamento do smbolo. Para isso, escolheremos a ferramenta seta e selecionaremos a


10/65

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 lugarapropriado mantendo o boto esquerdo pressionado. Podemos tornar preciso odeslocamento usando as setas do cursor que nos permitiro deslocarmos pixel por pixel.

Minha primeira animao em Flash IIVamos comear a trabalhar com a animao propriamente dita. Criao deimagens chave.

PorRubn Alvarez


4 votosOk, j definimos o smbolo na biblioteca. Agora vamos comear a trabalhar com aanimao propriamente dita. A primeira coisa que devemos fazer sair do espao decriao do smbolo e irmos para o palco da animao. Para isso, clicaremos na palavraPalco 1 que aparece na parte superior esquerda do palco.

J dentro do palco, vamos incluir no primeiro fotograma o smbolo que acabamos decriar. Antes de nada, iremos janela biblioteca (se tiver fechada poder ser aberta comJanela > Biblioteca) e selecionaremos o smbolo esfera. A seguir, clicamos earrastamos o smbolo at o palco. O resultado deveria ser algo como o que se mostra naimagem inferior:

Podemos observar que o crculo vazio do primeiro fotograma se converteu agora em umcrculo cheio, o que significa que a imagem chave no esta vazia.

Passamos agora a estudar o tipo de animao que vamos fazer. Como dissemos,
http://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/artigos/290.phphttp://www.criarweb.com/artigos/290.php


11/65

pretendemos simular um movimento de translao da esfera com uma trajetria elptica,dando a impresso de um crculo em perspectiva. Esta animao poderia ser definidapor 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 segundano lugar aproximado que lhe corresponderia. Para isso, realizamos as seguintesoperaes:

Inserimos uma imagem chave na camada 1, mais ou menos sobre o fotograma15.Para isso, nos situamos na camada 1, no fotograma 15. Clicamos no botodireito 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 denosso primeiro fotograma..

Modificamos este novo fotograma chave.Para isso, situados nesse fotograma, selecionamos o objeto (ou ocorrncia) emodificamos sua posio e tamanho. Modificamos a posio empurrando paracima com a tecla do cursor ou ento, clicando e arrastando, como vimosanteriormente. Para modificar el tamao, seleccionaremos la herramientatransformao livre. Uma vez feito isto, selecionaremos a opo escalar, quenos permitir bloquear as propores do objeto e reduziremos o tamanho daesfera clicando e arrastando em um dos pontos das esquinas da marca que rodeiaa esfera.


12/65

A figura seguinte ilustra a tarefa de redimensionamento e d uma idia do aspecto quedeve ter o fotograma uma vez modificado:

A seguir vamos criar o terceiro e ltimo fotograma chave, correspondente ao momentoem 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, esim que est perto de consegui-lo. Realizaremos os seguintes passos:

Inserimos um fotograma chave vazio no fotograma 29 (Inserir>Fotogramachave 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 aocorrncia esquerda, algo que faremos mais tarde.

Minha primeira animao em Flash IIICriao de um guia de movimento.

PorRubn Alvarez


1 voto

Como j dispomos das imagens chave que definem a animao, o que necessitamosagora definir uma trajetria elptica que as uma. Esta trajetria tem de ser definida em
http://www.criarweb.com/artigos/294.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/294.phphttp://www.criarweb.com/artigos/294.phphttp://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/artigos/294.php


13/65

uma camada especial chamada guia de movimento. O movimento no nada mais doque uma camada que contm uma linha sobre a qual podemos colocar nossos objetos deforma que tal objeto se mova de uma posio a outra respeitando a trajetria definidapor esta linha.

No nosso caso, dado que o que buscamos uma trajetria cclica, para no confundir aoobjeto definiremos duas linhas distintas, correspondentes a cada meia volta. Se notomssemos esta precauo, o objeto teria dois possveis sentidos para chegar a umamesma posio. Passemos ento a definir estas linhas:

Criamos o guia de movimento. Para isso, selecionamos a camada 1 (ou ondetivermos 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 umaelipse sem preenchimento. Podemos nois servir da ferramenta oval utilizada para

a criao da esfera, mas desta vez no escolhemos nenhuma cor na paleta depreenchimento (a ausncia de cor vem simbolizada por um quadro brancobarrado em diagonal por uma faixa vermelha). O resultado uma figura talcomo esta:


14/65

Com a ferramenta lao, selecionamos a metade (esquerda ou direita, comopreferir) e a cortamos (Editar>cortar). O resultado a obteno de uma semi-elipse.

Vamos ao fotograma 15 desta mesma camada e o convertemos em umfotograma chave vazio (Inserir>fotograma chave vazio)

Colamos a outra meia elipse, que ficar desnivelada em relao a outra. Paraajustar as semi-elipses podemos, claro, fazer a olho manuseando entre ofotograma 14 e o 15 at que as duas se completem corretamente. Entretanto,uma opo mais interessante a de usar a edio simultnea de vriosfotogramas. Esta opo, disponvel na linha de tempo (ver figura), nos permite avisualizao e edio simultnea de vrios fotogramas. Deste modo, podemosselecionar uma das semi-elipses e mov-la por meio dos cursores at faze-lacoincidir com a outra metade. Logo, tiramos este modo que foi selecionado, umavez finalizada a operao.

Minha primeira animao em Flash IVCriando uma interpolao.

PorRubn Alvarez


2 votos

Chegando a este ponto, podemos comear a definir a primeira meia volta da esfera. Paragerar o movimento existente entre os fotogramas chave, temos que criar o que sedenomina uma interpolao de movimento. Como j dissemos, isso algo que Flash
http://www.criarweb.com/contato/contacta.php?destinatario=6http://www.criarweb.com/contato/contacta.php?destinatario=6


15/65

calcula automaticamente, evitando a modificao sistemtica de cada um dosfotogramas intermdios que formam parte da seqncia. Para criar a interpolao demovimento, 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 ofotograma 1 e 15 e outra entre o 15 e o 29. Se agora vamos a algum dos fotogramasintermdios, veremos que a imagem que contm no a mesma que a dos fotogramaschave 1 ou 15, e sim, um intermdio de posio e tamanho entre elas. Como se podever, o objeto se deslocaria desde 1 at 15 e seguidamente de 15 a 29 seguindo uma linhareta. Para obrig-lo a dotar uma trajetria elptica como a definida no guia demovimento, teremos que ir a cada uma das imagens chave (1, 15 y 29) e , usando aferramenta seta, colocaremos o centro do objeto sobre a linha da elipse em cada uma dasextremidades correspondentes.

Podemos comprovar que o objeto est bem colocado na trajetria ao tentar mov-lo forada linha, volta a se colocar automaticamente sobre ela.

Agora s nos resta ocultar a camada da trajetria. Isto pode ser feito selecionando-a eclicando sobre o ponto que se encontra abaixo. O ponto se converte em uma cruz, quesignifica 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 averamos na realidade. Esta janela nos oferece mltiplas possibilidades que j seroabordadas em outros captulos. No obstante, aconselhamos dar uma olhada aos tipos deopes que prope.

O resultado uma animao como esta:
http://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/295.php


16/65

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 Flashoferece para a criao de animaes e, o que mais importante, estaro maisfamiliarizados com o tipo de tcnicas e conceitos que emprega.

Colocar filmes Flash em nossas pginasUm pequeno truque para conseguir o cdigo necessrio para incrustar um filmeFlash dentro de uma pgina web.

PorLudwing Rodriguez


0 votosColocar filmes Flash em nossos arquivos html, asp, php, etc; poderia ser uma dasprincipais 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 funcionecorretamente. Quando criamos um filme com Flash, este gera umarquivocom extenso".fla", este nos permite criar o filem e modific-lo. Outro arquivo que se gera o quetem a extenso ".swf", este se compe no momento que provamos o filme e nos ajuda aver o resultado das criaes e modificaes dos arquivos ".fla".

Finalmente podemos gerar um arquivo "html", que se compe quando publicamosnossos filmes e nos ajuda a ter uma idia mais clara de como sero vistos naweb.

1. Quando seu filme Flash esteja terminado, salvo e testado (CTRL+Enter), vocdeve 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 nosmostrar o cdigo html dos filmes.3. Dentro do contedo do Bloco de notas, voc deve procurar as etiquetas

..., copie o contedo que se encontra entre essas etiquetas(logicamente as etiquetas devero ser includas) e finalmente cole em seusarquivos.

Isso tudo, mas lembre-se que se seguir este truque e se no editar a etiqueta ,voc dever s arquivos .swf e .html no mesmo diretrio do servidor ou do disco rgidode 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 pelaempresa Macromedia. Em tal programa existe um boto, na janela de objetos
http://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/299.phphttp://www.criarweb.com/artigos/295.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/298.phphttp://www.criarweb.com/artigos/299.php


17/65

comuns, que nos permite selecionar o arquivo Flash (Com extenso .swf) quedesejarmos inserir na pgina web.

No necessrio subir o arquivo .fla ao seu servidor, j que o .swf e .html no onecessitaro.

Como fazer botes em FlashExplicao passo a passo sobre a criao de botes no programa Flash.



0 votosNeste captulo aprenderemos a criar botes e como link-los com nossosarquivos oucom outras pginas web, que no esto em nosso servidor.

Flash nos permite criar botes personalizados, de maneira muito rpida; e ainda nosajuda a dar vida a nossas pginas web; em poucas palavras, nos ajuda a tornar maisatrativo nosso site e logicamente isso o que queremos para aumentar o nmero devisitas 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 criarexatamente 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 aopo 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.
http://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/302.php


18/65

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 tempoda 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 estadosde um boto. Vejamos a seguir, o que representa cada estado.

Repouso: quando o mouse no est colocado sobre nosso boto ou no se clicou sobreele.

Sobre: quando o mouse est colocado sobre o boto, mas ainda no se clicou sobreele.

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.


19/65

3- Clique sobre a ferramenta de Retngulo (Rectangle Tool), que se encontra no Painelde 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 tempopasse ao estado Sobre.

Como poder se notar, o boto se copia, portanto no ser necessrio fazer um novodesenho.

6- Ainda estamos no estado Sobre, se no tiver selecionado o boto, faa-lo (com aferramenta Seta e clique duas vezes sobre nosso desenho), logo dirija-se aoPreenchimento de Cor que se encontra na seo cores do Painel de Ferramentas, eescolha a cor vermelha, como se mostra a seguir:

7- Depois pressione novamente a tecla F6, para que a cabea leitora passe ao estadoPressionado, e mude a cor de preenchimento da mesma forma que fizemos no passo 7; eescolha uma cor verde. Finalmente pressione pela ltima vez F6 para passar ao estadoZona 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 realizaros Estados dos botes anteriormente descritos.

Nosso boto foi criado, portanto voc j pode voltar para a Cena 1, abrir a biblioteca ever que a est o smbolo chamado "boto 1", poder arrasta-lo ao palco as vezes quequiser para fazer vrias cpias dele.

Pegue a Ferramenta de Texto (A), e escreva o que desejar, depois coloque o texto sobreo 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 pressioneas teclas CTRL + F12.

Linkar pginas web por meio de botesFlash

Como fazer com que ao clicar um boto se acesse a outra pgina nonavegador.

http://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/302.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7


20/65


1 votoSe criamos botes, logicamente porque queremos link-los com outras pginas web no

nossoservidor, ou pginas web em outros servidores. Para este captulo necessitaremosdo boto que criamos no captulo anterior.

Para fazer os links, devemos utilizar o painel de Aes de Flash. Para poder visualizartal painel, dirija-se ao menu principal e clique na Janela > Aes.

Aparecer a seguinte imagem:

O painel de Aes, nos servir para trabalharcom ActionScript.

O que ActionScript?, a linguagem de criao de scripts de Flash. Pode utilizarActionScript para controlar objetos nos filmes de Flash com o fim de criar elementosinterativos e de navegao, e para ampliar Flash com o fim de criar filmes altamenteinterativos e aplicaes Web. Em outras palavras, ActionScript a linguagem deprogramao 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 sedesdobrar 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
http://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.phphttp://www.criarweb.com/artigos/304.php


21/65

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 escrevero 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 temque 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 sercarregado 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, seusa para formulrios, portanto em nosso caso no so necessrias as variveis; entoselecionamos 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 coleno painel de Aes)

Pode-se ver que na primeira linha do script aparece escrito: "on (release)". uma aoutilizada nos botes, que indica que a ao que aparece entre "{ }" se executarimediatamente depois de clicar sobre o boto, ou seja, ao liberar o boto do mouse.

Links e-mails FlashComo linkar um boto flash com um endereo de correio eletrnico.

http://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/contato/contacta.php?destinatario=7


22/65


0 votosPor 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 einstalados corretamente)

Como fazer isto?

1- Criamos um boto.2- Clique com o boto direito > Aes3- Copie as seguintes aes e cole no painel de Aes:

on (release) {getURL("mailto:[email protected]");}

Expliquemos o anterior:

on (release), uma ao utilizada unicamente para botes, e indica que a ao seexecutar imediatamente depois de haver pressionado e liberado o boto domouse.

getURL: Ao; carrega umdocumento de uma URL especfica em uma janelaou 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 principalArquivo > Publicar).

O resultado pode ser visto neste link.

Interpolao de Formas

Como mudar a forma fsica de um objeto no palco de Flash.PorLudwing Rodriguez


1 votoA interpolao de formas, consiste em fazer com que um objeto no palco de Flash mudea sua forma fsica. Por exemplo, podemos fazer que um crculo se transforme em umretngulo.

Para realizar uma interpolao de formas, temos que fazer uso de "Fotogramas chaves
http://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/artigos/307.phphttp://www.desarrolloweb.com/articulos/ejemplos/flash/botonemail/boton.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=7http://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/artigos/307.phphttp://www.criarweb.com/artigos/307.phphttp://www.desarrolloweb.com/articulos/ejemplos/flash/botonemail/boton.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=7


23/65

vazios", j que este nos permitecriarum vazio na linha do tempo, o qual nos permitircriar 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, dacamada 1.

2- Clique no fotograma 4, depois pressione atecla F6, para criar fotogramas chaves.

3- Depois, clique no fotograma 17 e pressione a tecla F7 para criar um fotograma chavevazio.

Observe a linha do tempo, e ver que a cabea leitora est sobre um fotograma que nocontem nada; exatamente nesse fotograma vazio onde criaremos a imagem na qual setransformaro os retngulos anteriormente desenhados.

4- Clique na "Ferramenta de texto" do painel de ferramentas e na parte direita debaixodo palco, escreva a palavra "WEB", depois clique na "Ferramenta Seta", com o textoselecionado, 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 Flashinterprete 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 deos 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, (seno puder visualizar v ao menu principal, clique em Janela>Propriedades); nomencionado painel existe uma opo chamada "Interpolao"(Tween), pode desdobrar abarra 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 setaque deve se estender desde o fotograma 4 at o 17; a exatamente onde se realiza ainterpolao de formas; como mostra a seguinte imagem:

Agora j se pode provar o filme (CTRL + Enter)
http://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.phphttp://www.criarweb.com/artigos/308.php


24/65

Shape Hint. Interpolao ordenada deformas

A interpolao de formas um processo que leva consigo idia de ordenao. Nestecaptulo veremos como podemos consegui-lo usando Shape Tweening.

PorIvett Kelemen


0 votos

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 opoInterpolao (Tween) Desdobramos a barra de opes e escolhemos a opo Forma

(Shape). Provamos o filme (Ctrl+Enter)

Podemos ver que a transformao bastante desordenada. Queremos que a base semprefique em seu lugar.
http://www.criarweb.com/artigos/310.phphttp://www.criarweb.com/artigos/310.php


25/65

No primeiro fotograma clicamos no menu Modify>Shape>Add Shape Hint. Deslocamoso ponto vermelho ao ngulo esquerdo do retngulo e no fotograma 25 ao nguloesquerdo do tringulo.

Acrescentamos outro Shape Hint ao ngulo direito das formas. Provamos o filme

(Ctrl+Enter).

Podemos ver que a transformao j muito mais ordenada.

Acrescentamos outro Shape Hint metade da base das formas E provamos o filme(Ctrl+Enter).

Interpolaes de smbolos


26/65

Com este captulo, o usurio aprender a fazer interpolaes com objetoscomplexos como grupos e smbolos.

PorIvett Kelemen


0 votosNeste pargrafo aprenderemos a criar interpolaes com objetos complexos comogrupos 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. Nopainel "Propriedades" formatamos. Regressamos cena e clicamos no "Sceen1" debaixoda linha do tempo. Clicamos no menu Janela/Biblioteca. Na janela que aparece pegamoso 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 sejatransparente. Inserimos um fotograma chave Inserir> Fotograma Chave no fotograma25. 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 finalda interpolao. Falta agora criar os fotogramas intermedirios. Clicamos na linha do

tempo. No painel de "Propriedades" na opo "Interpolao"(Tween) desdobramos abarra de opes e escolhemos a opo "Movimento" (Motion). Provamos o filme:Ctrl+Enter. Tudo funciona perfeitamente.

Retornamos rea do desenvolvimento para ajustar outro parmetro. No painel de"Propriedades" no campo "Ease" podemos ajustar a acelerao daanimao.
http://www.criarweb.com/artigos/314.phphttp://www.criarweb.com/artigos/314.phphttp://www.criarweb.com/artigos/314.phphttp://www.criarweb.com/artigos/314.phphttp://www.criarweb.com/artigos/314.phphttp://www.criarweb.com/artigos/314.phphttp://www.criarweb.com/artigos/314.php


27/65

Escolhemos -100: assim a velocidade aumenta durante a animao. Provamos o filme:Ctrl+Enter

Efeitos de mscaras com FlashComo poder usar as mscaras para obter uma animao web.

PorIvett Kelemen


1 votoAs mscaras so um efeito utilizado freqentemente em pginas web que contm filmesFlash.

Tal efeito consiste em ocultar objetos que se encontram no palco de Flash, e mostr-lospouco a pouco, por algum objeto que tenha uma interpolao de movimento ouqualquer outro efeito que seja produto de sua imaginao. A mscara no somentepara ocultar objetos completamente, um exemplo poderia ser mostrar os objetos corcinza e que um objeto com interpolao de movimento os mostre de outra cor quandopasse 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, utilizeum tamanho de fonte grande para que o texto abranja grande parte do palco...

2- Dirija-se ao fotograma (frame) nmero60 da "camada 1", clique sobre ele, e
http://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.phphttp://www.criarweb.com/artigos/317.php


28/65

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

4- Clique com o boto direito sobre o nome da "camada 2" e no menu que sedesdobrar, 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 emova a figura oval como quiser, agora voc j um Flasher, portanto deve ter muitaimaginao.

Nossa linha do tempo teria que ser parecida com a seguinte imagem:

Agora prove o filme!

Onion Skin ( Pele de cebola )Existe outro tipo de animao chamada "fotograma por fotograma". Nestecaptulo veremos como fazer este tipo de animao.

PorIvett Kelemen

Publicado em: 06/3/05

Valorize este artigo:0 votosNeste captulo trataremos da animao "fotograma por fotograma".

Para realizar este tipo de animao temos de modificar manualmente os smbolos. Porexemplo, simularemos o movimento de um pincel. Criamos um smbolo de pincel e ocolocamos no nvel 1. Criamos um smbolo de listra e a colocamos no nvel 2. Emambos nveis selecionamos o fotograma 4 e clicamos F6, inserimos 2 fotogramaschaves. No nvel do pincel, movemos o pincel. No nvel da listra com a "Transformaolivre" 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


29/65

"Onion skin" e movemos at o primeiro fotograma. Isto nos permite ver os fotogramasanteriores, que aparecem semi-transparentes. Inserimos fotogramas chaves nofotograma 10. Movemos o pincel, e alongamos a listra.

Provamos o filme: Ctrl+Enter

Importar bitmap e usar como fundoComo escolher uma imagem e poder us-la como fundo ou preenchimento de umamaneira simples.

PorIvett Kelemen


0 votosDo menu File escolhemos Import, e escolhemos o arquivo Passaro.bmp. A imagemaparece no palco e est na Library (menu Window/Library ou F11).


30/65

A imagem se comporta como um smbolo, e podemos reutiliz-la vrias vezes no filmesem que o tamanho do arquivo cresa excessivamente.Todos os bitmaps inseridos esto no painel Cor Mixer (menu Window/ Color Mixer ouShift+F9) e podem ser utilizados como preenchimento.

Como se faz?

Abrimos o painel das cores (menu Window/ Color Mixer ou Shift+F9). Na barra deopes escolhemos Bitmap. No quadro debaixo aparecem todos os bitmaps que

podemos utilizar. Escolhemos Passaro.bmp, e com o Rectangle Tool desenhamosum retngulo. O retngulo est formado por pequenos pssaros.

No Tool Box painel clicamos Fill Transform e clicamos dentro do retngulo. Um

dos pssaros fica selecionado. Podemos mudar seu tamanho ou gir-lo clicando com omouse no smbolo correspondente. A totalidade dos pssaros que formam o recheio ficamodificado da mesma forma.

Modificar BitmapVemos como modificar uma imagem importada com o programa Flash.

PorIvett Kelemen


31/65


0 votosModificar bitmap

O Flash no um programa para retocar fotografias, e por isso no to fcil modificaras imagens importadas. Podem se modificar parcialmente atravs da diviso,transformar a desenhos vetoriais.- Primeiro, trataremos da diviso:No menu File/Importselecionamos o arquivo Passaro.bmp.

Selecionamos a imagem com a seta preta e escolhemos o menu Modify/Break Apart. Aimagem selecionada fica marcada com pontos. A partir deste momento j possvelmodificar por partes a imagem com os instrumentos de desenho.

Por exemplo, selecionamos o Lasso Tool E depois o Magic Wand e clicamos nofundo 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 dofundo sem afetar a imagem em primeiro plano. Podemos ver o resultado na seguinteimagem:

Como podemos ver na imagem, a capacidade de selecionar do Flash no to perfeitacomo 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, aimagem na livraria intacta e no foi afetada pelas modificaes que fizemos com suacpia 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


32/65

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.

Color Treshold=50, Minimum Area=5



Distribute to LayersNeste artigo, englobado dentro do manual de Flash, vamos aprender a fazeranimaes com objetos complexos.

PorIvett Kelemen



33/65

0 votosEm Flash, em 1 linha de tempo pode-se animar somente 1 objeto. Mas se quisermos queum texto, por exemplo, se espalhasse, como podemos fazer?

Na verso MX de Flash temos a resposta.

Com o Type Toolescrevemos 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 mesmonvel. Para anim-las teramos que estar em nveis diferentes.

Quando a palavra estiver selecionada escolhemos o menu: Modify / DistributeTo 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 deopes e escolhemos a opo Motion.Isto cria, em todos os fotogramas intermedirios entre o 1 e o 10, as imagensnecessrias para dar sensao de movimento progressivo entre o texto legvelque temos no 1 e as letras distribudas que temos no 10.

Provamos o filme: Ctrl+Enter

Isto o que queramos conseguir: um texto onde todas as letras esto animadas.

Provamos o Distribute to layers em um texto. possvel usar este menu em todos osobjetos complexos que possam ser divididos em objetos individuais.
http://www.criarweb.com/artigos/329.phphttp://www.criarweb.com/artigos/329.phphttp://www.criarweb.com/artigos/329.phphttp://www.criarweb.com/artigos/329.php


34/65

Inserir vdeo em FlashInsero egesto de filmes nos projetos Flash.

PorIvett Kelemen


0 votosImportar vdeo

Uma dasnovidades de Flash MX a melhora na importao e gesto das seqncias devdeos (video-clip). Flash capaz de manejar os seguintes arquivos:

- .avi- Quick Time- .mpeg- Digital video

necessrio que o computadortenha o Quick Time 4 ou o Director 7 (ou versesposteriores) instalados.

Vamos criar um smbolo, e dentro deste smbolo inserimos uma seqncia de vdeo.

Escolhemos o menu Insert / Create New Symbol(name=ruela, behavior=MovieClip). Do menu; File escolhemos Importe escolhemos rua.avi. Flash apresentauma nova janela de dilogo onde podemos ajustar a importao do vdeo.Flash comprime as seqncias de vdeo com o codex 'Sorenson Spark' o quepermite 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 asrie de fotogramas chave que sero inseridos na seqncia. Colocamos Scale =70% para reduzir o tamanho do vdeo. A importao pode demorar vriosminutos - dependendo do tamanho do vdeo. Antes de inserir definitivamente a

seqncia de vdeo, Flash nos informa que este necessita por sua reproduototal um nmero de fotogramas superior ao que temos atualmente. Portanto, necessrio aumentar o nmero de fotogramas (neste exemplo: 84).O procedimento est completo.

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

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
http://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.phphttp://www.criarweb.com/artigos/334.php


35/65

painel abrimos o menu desdobrvel de Colore escolhemos cor = Alpha. Damosum valor de 0%.

Criamos uma interpolao (clicando em um fotograma intermedirio), e noProperties painel, menu desdobrvel "Tween", escolhemos a opo "Motion").

Clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions oF9), e escrevemos stop(). Dando um clique duplo no vdeo, e clicando nofotograma 84 abrimos o painel Actions (menu Window / Actions o F9), eescrevemos stop(). Assim, no se repete infinitamente o filme.

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

Scroll de texto em FlashComo criar um scroll de texto simples com Flash.

PorCarlos Carmona


0 votos

Vamos criar um scroll de texto da forma mais simples que h. J ser com voc torn-loesteticamente mais chamativo ou complic-lo mais.
http://www.criarweb.com/artigos/scroll-de-texto-em-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.html


36/65

Primero podemos dar uma olhada no exemplo em funcionamento para saber o quevamos criar neste artigo.

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 asseguintes propriedades:

Estas propriedades so: Campo de texto tipo dinmico, multi-linha para que o textopossa 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 serselecionado 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 umamoldura ao redor.

Agora vamos criar 2 botes, para mover o texto para cima e para baixo. Voc pode criaros botes como quiser, para este exemplo, usamos uns dos que vem na biblioteca dearquivos 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
http://www.criarweb.com/artigos/exemplos/flash/scroll-texto-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.htmlhttp://www.criarweb.com/artigos/exemplos/flash/scroll-texto-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.html


37/65

flash, digo para que para dar a volta ao boto, embora haja vrias maneiras, a maissimples seria selecionar o boto e modificar>transformar>virar verticalmente, e pronto.

Bem, a parte do desenho, (o mais simples possvel), j est terminada, agora vamos vero 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 oquadro de cdigo, e colocaremos o seguinte:

on (press) {MeuTexto.scroll -= 1;

}

E no boto de baixo colocaremos:

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

}

Estescdigos, 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 vemdefinida 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 nicofotograma que temos, clicamos com o boto direito sobre ele e vamos 'aes', ecolocamos:

stop();
http://www.criarweb.com/artigos/scroll-de-texto-em-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.htmlhttp://www.criarweb.com/artigos/scroll-de-texto-em-flash.html


38/65

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 executaruma vez, (do contrrio o texto no pararia de se carregar no scroll), colocamos um stop

e o filme se deter. A seguir carregamos o texto colocando na varivel MeuTexto quecriamos ao criar o campo de texto dinmico. Ateno com um erro muito bobo quepode 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 otexto que colocarmos no poder ter nada entre aspas, ou seja, isto: variavel = "aqui vaio "texto" que quero colocar"; nos daria erro. Neste caso, por ser um texto to curto se vfcil, porm o mais lgico que copissemos e colssemos o texto, tenha em conta queno pode ter aspas intercaladas. E outra coisa que no pode ter so quebras de linha. Soas 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.

Criar um reprodutor de MP3 em FlashComo criar um reprodutor de mp3 em flash e asp.

PorTutoriales-flash.com


0 votosNeste tutorial vamos aprender a realizar um reprodutor MP3 com Flash, com sua

lista de reproduo. Como vamos empregar componentes, vocs vero o fcil que aprogramao do exemplo.
http://www.scourdesign.com/articulos/tutoriales/flash/descargas/10.ziphttp://www.criarweb.com/artigos/exemplos/flash/scroll-texto-flash.htmlhttp://www.criarweb.com/artigos/criar-reprodutor-mp3-em-flash.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.scourdesign.com/articulos/tutoriales/flash/descargas/10.ziphttp://www.criarweb.com/artigos/exemplos/flash/scroll-texto-flash.htmlhttp://www.criarweb.com/artigos/criar-reprodutor-mp3-em-flash.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137


39/65

COMO FAZ-LO.

Vamos depositar os arquivos MP3 em um diretrio na raiz do servidor web chamadomp3. Se dispusermos da capacidade para executar algumatecnologia de servidor comoASP ou PHP, criaremos dinamicamente um arquivo XML com os nomes dos arquivosMP3. Se no tivermos nenhuma destas tecnologias ao nosso alcance o melhor criar oarquivo XML manualmente e deposit-lo no servidor. De qualquer forma, o XML queadministra osdados dever ter esta estrutura.


40/65


41/65

// evitamos problemas com os nodes em brancoXML.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 arquivosvar lista_xml:XML = new XML();lista_xml.onLoad = carregarLista;// ponho o contedo do XML// no componente listafunction carregarLista():Void {array_temp = this.firstChild.childNodes;if (!isNaN(array_temp.length)) {// numero de temastitulo_lb.text = array_temp.length+" temas";

// preencho a listafor (var k:Number = 0; array_temp[k]; k++) {temas_list.addItem(array_temp[k].attributes.nome);}// carrega a primeira canocarregarMP3(0);}}// com esta funo carrego o mp3 dentro do// componente mediaplaybackfunction carregarMP3(indice:Number):Void {controlador.setMedia("/mp3/"+array_temp[indice].attributes.nome, "MP3");controlador.play(0);}// rotinas para passar seguinte cano// quando termine a atualvar 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 reproduolista_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.


42/65

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

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

Filmes Flash que se adaptam ao tamanhoda janela

Como criar filmes Flash que se adaptem ao tamanho da janela do navegador.



0 votosUm dos dilemas que se apresentam a um web designer quando comea um projeto emFlash o tamanho do filme. Normalmente se define um tamanho objetivo e se trabalhaem base a essas dimenses, o problema costuma surgir quando se visualiza o swf emtela 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 768ou inclusive de 1280 x 1024 px. (cada vez mais freqente devido ao boom dos TFT de17'') 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, lheaconselhamos sobre a necessidade de no saturar a tela, falamos das bondades de usarclaros na composio, dizemos que tecnicamente a nica opo, bl, bl, bl.

Alternativa 2. Desenhamos um website adaptvel resoluo da tela (sempre haverum tamanho mnimo). Se no souber como faz-lo, neste tutorial explicaremos nossamaneira de faz-lo, que certamente no a nica.

A web www.ivi-concept.com est desenvolvida empregando o sistema que vamosmostrar neste tutorial.

COMO FAZER.Mesmo querendo que os contedos do filme se adaptem ao tamanho da janela donavegador, devemos definir uma largura e uma altura mnima para organizar edesenhar a composio. Trabalharemos com estas dimenses e planejaremos o ajuste

para resolues maiores. Em nosso exemplo vamos trabalhar com um filme de 600 x400px. e lhe atribuiremos comportamentos aos elementos que se executaro quando se
http://www.criarweb.com/artigos/exemplos/flash/mp3player.ziphttp://www.criarweb.com/artigos/exemplos/flash/mp3player.ziphttp://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.ivi-concept.com/http://www.criarweb.com/artigos/exemplos/flash/mp3player.ziphttp://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.criarweb.com/artigos/filmes-flash-adaptam-tamanho-janela.htmlhttp://www.ivi-concept.com/


43/65

detecte uma mudana na rea disponvel para mostrar o filme, ou seja, desenhamos ofilme pensando em como se deve reajustar para diferentes tamanhos. Todos oselementos ajustveis tm que ser do tipo movieclip e devem ter sua origem em suaesquina superior esquerda. Se tivermos botes e caixas, sero colocados dentro de ummovieclip.

Temos que incluir o swf no html com umas dimenses de 100% de largura e 100% dealtura, alm de indicar na linha de tempo principal que no queremos que se escalenovamente, mas sim que se ajuste esquina superior esquerda. No primeiro frameescreveremos:

Stage.scaleMode = "noScale";Stage.align = "TL";

Se fizermos isto, quando aumentarmos ou diminuirmos o tamanho da janela, estaremosfazendo 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;altura_minima = 400;

Para armazenar os clips que tm que se ajustar (que sero todos menos os que seajustam 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 oassociamos 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 tamanhodo Stage:

myListener.onResize = rec;function rec() {altura = Stage.height;if (altura


44/65

}

Esta funo obtm em primeiro lugar o novo tamanho do Stage, o compara com asdimenses mnimas e se for menor atribui o valor mnimo. Depois executa o mtodoalinhar() 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 movieclipsmediante prottipos, os prottipos nos permitem adicionar mtodos a classes inteirassem ter que faz-lo individualmente, j publicaremos um tutorial falando sobre eles. Oprimeiro mtodo que implementaremos ser setAjuste(ajuste_x, ajuste_y,ajuste_width, ajuste_height), atravs do qual vamos indicar como queremos que seajuste 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 alturaMovieClip.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 ajustveisthis.x0 = this._x;this.y0 = this._y;this.w0 = this._width;this.h0 = this._height;this.ajustePersonalizado = false;// armazeno o clip no arrayclips_ajustaveis.push(this);this.alinhar();};

Como se v no final do bloco de cdigo executamos o mtodo alinhar() do clip. Estafuno ser definida de um modo parecido com outro prottipo. Com alinhar() o quefazemos ajustar cada clip dependendo dos ajustes que tivermos passado comsetAjuste():

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 telaif (this.ajuste_width) {

if (this.ajuste_width.indexOf("%") != -1) {// se o valor de this.ajuste_width uma porcentagem


45/65

this._width = (_root.largura*parseInt(this.ajuste_width))/100;} else {// se o valor de this.ajuste_width for um nmero de pixelsthis._width = this.ajuste_width;}

}// o mesmo com o ajuste da altura do clipif (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 clipsif (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 clipif (this.ajustePersonalizado) {this.ajustar();

}};

Como se pode ver no final do cdigo, se comprova o valor da propriedadeajustePersonalizado, esta propriedade ter um valor igual a true no caso em quequisermos ajustar o clip de um modo personalizado. Ou seja, se observarem no mtodosetAjuste as opes que temos para ajustar um clip so ajustar esquerda, direita ouao centro no plano horizontal, ajustar acima, abaixo ou ao centro no plano vertical, edefinir largura e altura dando um nmero de pixels ou dando uma porcentagem doStage. Estas opes so bsicas, por isso muito provvel que queiramos ajustardeterminados 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 suapropriedade ajustePersonalizado, incluir dentro do array clips_ajustaveis e definir sua


46/65

funo ajustar() que a que lhe ajustar de maneira personalizada. Se aplicar suaimaginao e um pouco de tempo na construo das funes ajustar() poder ampliareste tutorial e desenvolver sites onde tudo se ajustar ao tamanho da tela de um modoimpecvel. 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 cdigoseria mais simples:

onClipEvent (load) {this.setAjuste("direita", "acima", false, false);}

Seguir estas instrues complexo, portanto recomendamos o download do fla comcomentrios explicativos.exemplo_ajustePantalla.fla

Cabealho Flash em WordpressNo seguinte tutorial, veremos como mudar a imagem de cabealho de umwordpress por um arquivo .swf de Flash.

PorAurelio Franco Fernndez


0 votosOs passos a seguir seriam os seguintes:
http://www.tutoriales-flash.com/files/ejemplo_ajustePantalla.flahttp://www.criarweb.com/contato/contacta.php?destinatario=139http://www.tutoriales-flash.com/files/ejemplo_ajustePantalla.flahttp://www.criarweb.com/contato/contacta.php?destinatario=139


47/65

Definir o tamanho exato que queremos desenhar nosso .swf, logicamente devede ser o que tenha a imagem do cabealho do WP (wordpress) com o objetivo deocupar o mesmo espao que ele e no deixar espaos vazios. Para isto, temosque buscar o arquivo que se chama head.jpg, normalmente o teremos nas pastawp-content/themes(se usarmos

algum)/nomedetheme/images/nomevariante(alguns themes tm distintasformas de poder se visualizar e podem vir diferenciadas por pastas), e assimpoderemos ver as dimenses que tem.

Uma vez feito o anterior, temos que incrustar o arquivo .swf no lugar onde esttal imagem, e para isso, temos que editar o arquivo header.php, normalmentelocalizado em wp-content/themes/nomedelthemequeuses. O que temos quefazer eliminar todo o contedo que encontramos entre a etiqueta divid="headerimg" e sua etiqueta de fechamento e substitu-lo pelo cdigo que sev na imagem, tal cdigo pode ser encontrado em um arquivo de texto parabaixar 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 umcontratempo. 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 noservidor, e sim que s pe o nome do arquivo .swf, que deveremos alojar na pastaprincipal de nosso wordpress. Isto tem uma explicao e h que ter em contaespecialmente se usamos botes em swf, como o caso deste blog para se dirigir ssees principais do mesmo. O caso que se usarmos a url no lugar da rota relativa, noIE funciona perfeitamente, mas no Firefox, se visualiza corretamente o .swf, porm osbotes no funcionam.Acho que no esqueci de nada, caso no funcione algo, entrem em contato comigo queeu ajudarei no que for possvel. Deixo a seguir o link onde se pode baixar o cdigo quese 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 refiroanimaes de entrada, temos que ter em conta que cada vez que mudarmos a seo, serecarregar esse arquivo, portanto ou as fazemos curtas ou no as fazemos porque podechegar a ser inclusive incmodo, no meu caso, me limitei a animar s os botes.

Como ler os arquivos do servidor comASP e pass-lo a FlashNeste tutorial vamos explicar como obter o nome e o tamanho em KBytes dosarquivos alojados em determinado diretrio do servidor web. Logo, passaremosesta informao a Flash em formato XML.


Publicado em: 21/8/08
http://www.studioflash.es/sfblog/recursosflash/cabecera_flash_wordpress/img_codigo_header.jpghttp://www.studioflash.es/sfblog/recursosflash/cabecera_flash_wordpress/codigo_header_swf.txthttp://www.studioflash.es/sfblog/recursosflash/cabecera_flash_wordpress/codigo_header_swf.txthttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.studioflash.es/sfblog/recursosflash/cabecera_flash_wordpress/img_codigo_header.jpghttp://www.studioflash.es/sfblog/recursosflash/cabecera_flash_wordpress/codigo_header_swf.txthttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137


48/65

Valorize este artigo:1 votoEsta 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 servidorcomo 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 emformato 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 acompanhamnossos tutoriais.

Contedo de explorar.asp
http://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.htmlhttp://www.criarweb.com/artigos/como-ler-arquivos-servidor-com-asp-passar-flash.html


49/65

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 deanalisar qualquer XML que carreguemos.

Depois, definimos o objeto XML que vai receber os dados do arquivo ASP e a funoverArquivos. Esta funo vai percorrer o XML e vai adicionar um elemento ao listBoxpor cada arquivo que houver na pasta a explorar.

A funo clicLista a que se executa quando selecionamos um elemento do listBox, emnosso 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 vezif (!meuXML.loaded) {meuXML.load("/asp/explorar.asp");}}

Recomendamos o download do fla com comentrios explicativos, exemplo_explorar.zip
http://www.tutoriales-flash.com/files/ejemplo_explorar.ziphttp://www.tutoriales-flash.com/files/ejemplo_explorar.zip


50/65

Carregamento de clips externos emFlash. A classe MovieClipLoader

A classe MovieClipLoader nos permite gerenciar de um modo excelenteocarregamento de filme.



0 votosAt o aparecimento desta classe (em Flash MX2004), o carregamento de arquivosexternos (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 querecorrer a chatos loops para comprovar o carregamento completo doarquivoexterno.

Agora com o uso da classe MovieClipLoader, Flash se encarregar de comprovar ocarregamento 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 docarregamento, 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 comoempregar a classeMovieClipLoader.zip.

Nota: Para comprovar o funcionamento perfeitamente os arquivos a carregardevem estar alojados em um servidor remoto.

Distorcer clips com ActionScriptEm Flash as transformaes bsicas que podemos aplicar a um clip so mudar a

posio, a rotao e a escala.PorTutoriales-flash.com


0 votosEntretanto, se queremos distorcer um clip de filme veremos que com as ferramentas

que nos proporciona Flash no poderemos faz-lo diretamente.

Nestedocumento iremos facilitar uma maneira de distorcer um clip de filme em tempode execuo com ActionScript. Na verdade o clip original permanecer inaltervel, o
http://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.tutoriales-flash.com/files/MovieClipLoader.ziphttp://www.tutoriales-flash.com/files/MovieClipLoader.ziphttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.criarweb.com/artigos/distorcer-clips-com-actionscript.htmlhttp://www.criarweb.com/artigos/distorcer-clips-com-actionscript.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.criarweb.com/artigos/carregamento-clips-externos-em-flash.htmlhttp://www.tutoriales-flash.com/files/MovieClipLoader.ziphttp://www.criarweb.com/contato/contacta.php?destinatario=137http://www.criarweb.com/artigos/distorcer-clips-com-actionscript.html


51/65

que faremos ser criar outro clip com a distoro aplicada e ocultar o primeiro. Oprocesso se basear na classe bitmapData de ActionScript. A classe bitmapData nospermite armazenare manipular os pixels que compe um clip.

COMO FAZ-LO.

A distoro se far segundo este esquema onde cada bloco representa uma coluna depixels:
http://www.criarweb.com/artigos/distorcer-clips-com-actionscript.htmlhttp://www.criarweb.com/artigos/distorcer-clips-com-actionscript.html


52/65

Decomporemos a representao grfica do clip original em filas ou colunas segundoseja a distoro horizontal ou vertical. Depois modificaremos as dimenses destessegmentos 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 mnimascomo se poder comprovar mais adiante.

O primeiro passo consiste em armazenar em um objeto bitmapData os pixels do clip adistorcer. Chamaremos de bitmap_1. Depois vamos criarum clip vazio que conter oclip com a distoro aplicada. Seu identificador ser conteiner. Para criar a distorovamos descompor a rede de pixels do objeto bitmap_1 em suas colunas, de modo queficar dentro do clip continer uma srie clips de um pixel de largura e a mesma alturaque 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 nocdigo.

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

um pouco sobre flash

Documents