18
set

Transição de imagens com Action Script AS3

Vamos ver outros tipos de efeitos possíveis com ActionScript 3.0 que são as transições. O efeito Blinds mostra ou esconde o Movie Clip que está recebendo a transição aos poucos através de áreas retangulares que vão aparecendo ou desaparecendo.
1- Crie um novo arquivo.
2- Importe para o palco do Flash a imagem: transicao.jpg que esta na pasta da lição.
3- Transforme esta imagem em um Movie Clip e coloque o nome de instância da imagem de “imagem”.
4- Crie uma nova camada e no primeiro quadro desta camada abra o painel Actions e digite:
import fl.transitions.*;
import fl.transitions.easing.*;
var transicao:TransitionManager=new
TransitionManager(imagem);
Nas duas primeiras linhas importamos as classes que vamos utilizar.
Na terceira linha criamos uma instância chamada “transição” a partir da classe TransitionManager (classe que está presente somente do Action Script 3.0) que cuida dos efeitos de transição.
5- Numa nova linha digite:
transicao.startTransition({type:Blinds,
direction:Transition.IN,duration:2,easing:Strong.easeOut,
numStrips:10, dimension:1});
O parâmetro numStrips define a quantidade de retângulos e o dimension indica se o efeito será com retângulos na horizontal (valor 1) ou na vertical (valor 0).
Para a instância chamada “transicao” usamos o método starTransition que dará início a transição.
Dentro dos parênteses desse método temos (entre as chaves) os parâmetros que vão orientar a transição, o qual podemos mudar:
direction:Transition.IN que indica que o Movie Clip irá aparecer ou
direction:Transition. OUT que o mostrará se escondendo.
duration:2 é o tempo em segundos que essa transição irá durar até atingir o final.

6- Teste seu arquivo.

Os retângulos aparecem e revelam partes da imagem até mostrá-la por completo.
Temos, também, o PixelDissolve que faz o Movie Clip aparecer ou desaparecer através de um efeito em quadrados que vão aos poucos aparecendo ou desaparecendo.
7- Insira um novo quadro-chave na layer que contém a imagem e insira a imagem transicao.3.jpg que esta na pasta imagens.
8-Transforme esta imagem em um Movie Clip e coloque o nome de instância da imagem de “imagem1”.
9- Na camada das actions insira um novo quadro e digite:
var transicao1:TransitionManager=new
TransitionManager(imagem1);
10- Na próxima linha digite:
transicao1.startTransition({type:PixelDissolve,
direction:Transition.IN, duration:1,
easing:Strong.easeOut,xSections:20,ySections:0});
Temos como parâmetros adicionais xSections (quantidade de quadrados no eixo x) e ySections (quantidade de quadrados no eixo y). A Adobe aconselha valores de
no máximo 50 para estes parâmetros.
Iremos colocar uma função para controlar a passagem das imagens com as transições.
11- No primeiro quadro da layer das ações, digite:
stop();
var tempo = 10000;
function vai():void{
if(this.currentFrame != this.totalFrames)
nextFrame();
else
gotoAndStop(1);
}
setInterval(vai, tempo);
12- Teste o arquivo.

18
set

Como criar um Banner expansível no Flash CS5

1- Crie um novo arquivo.
2- Desenhe um retângulo no palco do Flash e transforme-o em um símbolo Movie Clip. Instancie-o para “ativa”. Renomeie esta layer para “banner”.
3- Dê um duplo clique para entrar em sua edição e escreva “Passe o Mouse” como texto estático.
5- Retorne para a cena principal.
6- Crie um quadrado da mesma largura do retângulo já criado e posicione-o acima do retângulo (na parte de fora do palco) em uma nova layer chamada “animacao”.
7- Transforme essa forma em um símbolo Movie Clip e instancie-o para “tela”.
8- Entre na edição do Movie Clip “tela” e transforme o Shape em um símbolo Gráfico.
9- Crie uma interpolação de movimento e no quadro final desloque o objeto para baixo do símbolo.
10- Ainda dentro do Movie Clip “tela”crie uma nova camada e insira um keyframe no frame 13. Escreva “Adobe Flash”na parte superior fora do palco.
11- Crie uma interpolação de movimento e no quadro final desta layer posicione o texto em cima do outro símbolo.
12- Crie uma nova camada e renomei-a para “acoes”. No seu primeiro frame coloque um comando de Stop:
stop();
13- Retorne a cena principal e crie uma nova camada com o nome de “acoes”.
14- Coloque a ordem das camadas como na imagem. Esta ordem é importante para o funcionamento correto do banner.
15- Habilite o painel Actions no primeiro frame da layer “acoes” e na primeira linha digite:
stop();
ativa.addEventListener(MouseEvent.MOUSE_OVER,Exibe);
ativa.addEventListener(MouseEvent.MOUSE_OUT,Esconde);
ativa.buttonMode = true;
Quando o mouse passar em cima do Movie Clip “ativa” irá chamará a função “Exibe”; e quando o mouse sair de cima do Movie Clip ativa, chamará a função “Esconde”.
16- Na quinta linha digite:
function Exibe(evento:MouseEvent):void{
tela.addEventListener(Event.ENTER_FRAME, Abre);
tela.removeEventListener(Event.ENTER_FRAME,Fecha);
}
function Abre(evento:Event):void{
tela.nextFrame();
if (tela.currentFrame == tela.totalFrames) {
tela.removeEventListener(Event.ENTER_FRAME, Abre);
}
A função “Exibe” quando executa a função “abre” vai para o próximo frame até chegar ao final no Movie Clip Tela, onde está nossa animação.
Na condição (if) temos: se o Frame atual for igual ao numero total de frames, remove a função abrir.
17- Na linha seguinte digite:
function Esconde(evento:MouseEvent):void{
tela.addEventListener(Event.ENTER_FRAME, Fecha);
tela.removeEventListener(Event.ENTER_FRAME,Abre);
}
function Fecha(evento:Event):void{
tela.prevFrame();
if (tela.currentFrame == 1){
tela.removeEventListener(Event.ENTER_FRAME,Fecha);
}
}
Para a função “Esconde” temos a mesma lógica, alterando a condição (if) para: se o frame atual for igual a 1, remove a função fechar da lista.
18- Pronto. Teste seu Movie Clip e veja a funcionalidade do banner.

18
set

Criar um Banner com Flash CS5

Para este tutorial é necessário criar um arquivo .psd com um retângulo com gradiente de transparência.

1- Crie um novo arquivo.
2- Clique no menu: File > Import > Import to stage e selecione o arquivo banner.psd que esta na pasta imagens.
3- Selecione cada layer e marque a opção: Flattened bitmap image, a qual irá ser uma imagem não editável.
Na layer Shape 1 marque a opção: Editable paths and layer styles, que fará com que esta imagem seja editável, deixando, no caso
deste arquivo, a forma separada do preenchimento.
Desmarque a layer background, pois não a usaremos no arquivo fla.
Deixe marcada a opção Flash Layers.
As duas opções abaixo ficam marcadas:
- Place object at original position: os objetos importados para o Flash ficaram na mesma posição que se encontravam no Photoshop;
- Set stage size to same size as Photoshop canvas: o placo do Flash será redimensionado para as mesmas dimensões do Photoshop.
Veja que nossos arquivos estão nas Layers do Flash exatamente como estavam no Photoshop e que na Biblioteca as imagens encontram-se organizadas em uma pasta.
4- Selecione o Movie Clip, localizado na layer Shape 1 e dê um duplo clique para entrarmos em sua edição.
5- Exclua a layer 1, que corresponde à cor de preenchimento do objeto.
6- Importe para a Biblioteca 3 imagens do seu computador.
7- Renomeia-e a layer 2 para mask.
8- Crie uma nova layer e renomeie-a para “imagem1”. Posicione-a abaixo
da layer “mask”.
9- Com a layer “flor1” selecionada arraste a imagem flor1.jpg para o palco do Flash.
Redimensione e posicione a imagem em cima do objeto.
10- Crie uma interpolação de movimento na layer “imagem1” e redimensione os
quadros desta para o quadro 80.
11- Deixe o indicador de tempo posicionada no quadro 1 e diminua o Alpha para 0%.
12- No quadro 10 deixe o Alpha em 100%.
13- No quadro 80 deixe o Alpha em 0%.
14- No quadro 70 deixe o Alpha em 100%.
15- Estenda a layer “mask” até
o quadro 80, também.
16- Teste a animação.
17- Insira uma layer acima da layer “imagem1” e renomei-a para “imagem2″
18- Posicione o indicador de tempo no quadro 70 e insira um quadro-chave (F6) na layer “imagem2”.
19- Arraste a imagem flor2.jpg para o palco e diminua a mesma.
20- Crie uma interpolação de movimento nesta layer e arraste-a até o quadro 160.
21- Prolongue a layer “mask”, também.
22- No quadro 70 na layer “imagem2” deixe o Alpha em 0%.
23- No quadro 80 desta layer deixe o Alpha em 100%.
24- No quadro 160 deixe o Alpha em 0%.
25- No quadro 150 deixe o Alpha em 100%.
26- Teste a animação e veja as imagens passando na máscara.
27- Retorne a Cena principal.
28- Selecione o bitmap correspondente as curvas da parte de baixo do banner e transforme-a em um símbolo Movie Clip.
29- Entre na edição deste MC e crie uma nova layer desenhando um forma ao lado esquerdo da imagem.
30- Crie uma interpolação de movimento e no quadro final da layer aumenta a forma de maneira que cubra toma a imagem.
31- Peça a propriedade de Mask para esta layer.
32- Coloque um stop no quadro final da animação.
33- Retorne a cena principal.
34- Insira uma nova layer e renomei-a para “btnInvisivel”.
35- Clique no menu: Insert > New Symbol e escolha a opção Button.
36- Insira um Keyframe no estado Hit do botão e desenhe um retângulo, configurando a posição X e Y para 0.
37- Retorne a Cena principal.
38- Com a layer “btnInvisivel”selecionada arraste o novo botão criado para o palco do Flash, posicionando-o em cima do banner e redimensionando-o de forma que ocupe toda a extensão do banner.
39- Instancie este botão para “btn”.
40- Crie uma nova layer e renomei-a para “acoes”. Habilite o painel Action e digite:
btn.addEventListener(MouseEvent.CLICK, banner);
function banner(event:MouseEvent):void {
navigateToURL(new
URLRequest(“http://www.google.com”), “_blank”);
}
O método navigateToURL é o responsável por abrirmos uma nova página.

18
set

Preloader no Flash CS5

1- Abra o arquivo desejado.
2- Em todas as layers do seu filme filme avance um frame, deixando-as todas iniciando a partir do frame 2 da Timeline.
3- Crie uma nova layer abaixo da layer “acoes” e renomei-a para “preloader”.
4- Crie um campo de texto dinâmico com o nome de instância de “pct”.
5- Delete o segundo quadro da layer “preloader”, deixando somente o quadro 1 com o objeto de texto.
6- Selecione o quadro 1 da camada “preloader”e habilite o painel Action digitando:
stop();
this.addEventListener(Event.ENTER_FRAME,loaded); function
loaded(EVENT:Event):void
{
var carregando:Number=int(loaderInfo.bytesLoaded/
loaderInfo.bytesTotal*100) pct.text=carregando+”%”;
if(carregando==100)
{
removeEventListener(Event.ENTER_FRAME,loaded);
gotoAndPlay(2);
}
}
Criamos uma função “loaded”que executa o carregamento a partir da classe loaderInfo, responsável pela execução do carregamento, que passa o resultado dos bytes carregados divididos pelos bites totais e multiplicado por 100.
A instância “pct” é do tipo texto que quando carregada mostra o valor em porcentagem
Se carregado todo o arquivo ele remove a função loaded e vai para o frame 2.
7- Desloque o quadro da ações da camada “acoes” para o segundo e coloque um stop na primeira linha.
8- Teste seu filme. Para ver o preloader em funcionamento pressione CTRL + Enter, novamente.
Quando chegar a 100% será carregado nosso filme.
Para adicionar uma barra que vai crescendo juntamente com a porcentagem crie um retângulo de largura de 2 pixels e transforme-a em um símbolo do tipo Movie Clip com nome de instância de “barra”.
9- Habilite o painel Action e digite na 7 linha:
barra.gotoAndStop(carregando);
10- Teste seu arquivo e veja como ficou

18
set

Formulário de contato com Flash AS3

Os Componentes, como já vimos, são Movie Clips com parâmetros que permitem modificar sua aparência.
Ao invés de criamos botões, combos e listas, podemos arrastar esses componentes para o palco do Flash e adicionar funcionalidade a eles, configurando-os a nossa maneira.
1- Abra o arquivo contatenos.fla
2- Habilite o painel Componentes.
3- Selecione o componente TextInput e arraste-o para o palco do Flash colocando o nome de instância de “nome”.
4- Aumente o tamanho deste Componente para 300×20.
Quando arrastamos um componente para o palco, automaticamente é criada um símbolo dele junto a Biblioteca.
5- Selecione o símbolo TextInput da Biblioteca e arraste-o para o palco do Flash, colocando-o logo abaixo do outro, deixando-o com a mesma largura e altura. Dê o nome de instância para ele de “email”.
6- Agora, arraste uma instância do componente TextArea para a palco, colocando abaixo dos outros componentes com a largura de 300×40. Instancie-o para “mensagem”:
7- Arraste uma instância do componente Button para o palco do Flash, posicionando abaixo dos outros componentes.
8- No painel Components Inspector mude o item label para “Enviar” e instancie-o para “btn_enviar”.
9- Arraste outra instância do componente Button para o palco do Flash, colocando-o ao lado do btn_enviar.
10- Mude a opção label para “Limpar”e instancie- o para “btn_limpar”
11- Precisamos agora de um campo de erro. Selecione a ferramenta Text Tool no formato Dynamic Text e clique e arraste uma caixa na parte superior dos componentes.
12- Instancie esta caixa de texto para “mensagemErro”.
13- Crie uma nova camada e renomei-a para “acoes”. Habilite o painel Actions e digite na primeira linha:
btn_enviar.addEventListener(MouseEvent.CLICK, valida);
btn_limpar.addEventListener(MouseEvent.CLICK, limpar);
A função “valida” servirá para verificar se os campos foram digitados, se não retornará uma mensagem.
A função “limpar” servirá para apagar os campos de texto.

14- Na terceira linha digite:
function valida(evento:MouseEvent):void{
mensagemErro.text = “”;
if (nome.text == “”){
mensagemErro.text = “Favor preencher o campo
nome \n”;
}
if (email.text == “”){
mensagemErro.text = String(mensagemErro.text)
+ “Favor preencher o campo email \n”;
}
if (mensagem.text == “”){
mensagemErro.text = String(mensagemErro.text)
+ “Favor preencher o campo mensagem \n”;
}
}
function limpar(evento:MouseEvent):void{
nome.text = “”; email.text = “”; mensagem.text = “”;
}
Caso as caixas de texto estejam vazias retornará uma mensagem no campo de texto instanciado de “mensagemErro”.
Teste o arquivo e veja que os botões estão funcionando.
Melhore o visual desta página inserindo imagens de redes sociais e maiores informações.

 

Configurando o envio de dados do formulário de contato

15- Abaixo dos ouvintes dos botões (na terceira linha) digite:
var nomeArquivo:String;
nomeArquivo = “processa.asp”;
O Flash conversa com o ASP e PHP através de envio e recebimento de variáveis, executando as tarefas.
Neste exercício passaremos os dados para o ASP fazer o envio dos dados por e-mail.
16- Abaixo das condicionais (if) acrescente mais uma para a função “enviar”, digitando:
if (mensagemErro.text = = “”){
this.enviar();
}
17- Abaixo iremos digitar a função “enviar”, responsável pelo envio dos nossos dados do formulário:
function enviar():void {
var req:URLRequest=new URLRequest(nomeArquivo);
req.method=URLRequestMethod.POST;
var vars:URLVariables=new URLVariables;
vars.nome=escape(nome.text);
vars.email=escape(email.text);
vars.mensagem=escape(mensagem.text); req.data=vars;
var loader:URLLoader=new URLLoader();
loader.load(req);
loader.addEventListener(Event.
COMPLETE,onVarsLoaded);
loader.addEventListener(IOErrorEvent.IO_ERROR,
onIOError);
}
function onVarsLoaded(event:Event):void{
var loader:URLLoader = URLLoader(event.target);
mensagemErro.text = “Email enviado com sucesso”;
}
function onIOError(event:IOErrorEvent):void {
mensagemErro.text = “Erro ao enviar o email”;
}
A função enviar pega todos os itens digitados nos campos e envia os dados. São criadas variáveis para os objetos (nome, email,  mensagem) para guardarem o conteúdo dos dados digitados.

18
set

Carregar audio mp3 externo e carregar audio em botões

Vimos como utilizar sons para trabalhar no Flash. Nesta lição veremos a possibilidade do som não precisar ser previamente importado para o filme, mas que isso seja feito através do ActionScript.
Vamos ver um exemplo que buscará um arquivo de som externo.
1- Crie uma nova layer e renomeie para “controlesom”.
2- Nessa layer desenhe dois botões: um que simbolize a Play e o outro o Stop.
3- Selecione o botão correspondente ao stop e transforme-o em um Button e instancieo para “parar”.
4- Selecione o botão correspondente ao play e transforme-o em um Button e instancieo para “tocar”.
Antes de programarmos os botões iremos carregá-lo externamente através de comandos em ActionScript.
5- Selecione o primeiro quadro da camada “acoes” e digite na primeira linha do painel Actions (F9):
var audio:Sound = new Sound();
Nesta linha criamos uma instância chamada áudio a partir da classe Sound,
responsável por trabalhar com som no Flash.
6- Após, em uma segunda linha digite:
Var endereco:URLRequest=new
URLRequest(“sons_site/som_site.mp3”);
audio.load(endereco);
Na primeira linha criamos uma instância chamada “endereço” a partir daclasse URLRequest que armazena o endereço para o arquivo que iremos carregar.
Na segunda linha, para a instância chamada “audio”carregamos o arquivo de som pelo método load.
O arquivo de som já esta carregado, mas só será executado quando mandarmos ele fazer isso.
7- Numa outra linha digite:
audio.play();
Agora sim, mandamos à instância chamada “audio” iniciar a reprodução do som
pelo método play( ).
8- Teste o filme e veja que o som será carregado e executado.
9- No painel Actions altere a linha:
audio.play();

Para:

var
canal_de_som:SoundChannel=audio.play(0,int.MAX_VALUE);
Continuamos a mandar que o arquivo seja executado pelo método play que agora contém uma constante, ou seja, nosso som irá repetir (quando chegar ao final). O método play foi associado a uma instância que foi criada chamada “canal_de_som”, do tipo SoundChannel.
10- Para fazermos o som parar digite no painel Action:
parar.addEventListener(MouseEvent.CLICK,paraSom);
function paraSom(evento:MouseEvent):void {
canal_de_som.stop();
}
12- Para fazermos o som tocar novamente digite:
tocar.addEventListener(MouseEvent.CLICK,tocaSom);
function tocaSom(evento:MouseEvent):void {
canal_de_som = audio.play(0,int.MAX_VALUE);
}
11- Teste o arquivo e veja seu funcionamento.

 

Inserindo áudio em botões

Podemos associar sons aos diversos estados de um símbolo de botão. Como os sons são armazenados junto com o símbolo, eles funcionam em todas as ocorrências do símbolo.
1- Crie um novo arquivo.
2- Arraste uma instância de botão para o palco do Flash através do menu: Window > Common Libraries > Buttons.
3- Dê um duplo clique em cima do botão para entrar em sua edição.
4- Crie uma nova layer renomeando-a para “som”. Insira um qaudro em cada estágio do botão.
5- Importe um som para a Library que está na pasta sons_botoes.
6- Selecione o estágio Down na camada som do botão e clique no item Sound opção Name selecionando o som do botão.
7- Teste o filme e veja que quando o botão é pressionado emite o som.

18
set

Carregar Audio MP3 em Flash CS5

Um dos grandes diferenciais do Flash com relação a outros tipos de animação é a possibilidade de ter som.
1- Crie um novo arquivo.
2- Selecione o menu: File > Import > Import to Library e escolha: sons_site > natureza. mp3
No caso de importação de áudio não tem importância à opção escolhida. Isso ocorre porque ao importamos um arquivo de áudio, ele vai direto para a Library.
3- Observe que o arquivo de som já esta na Library.
Apesar de estar na Library, o arquivo de áudio não é um símbolo e sim um pseudo- símbolo, assim como o vídeo, por exemplo, uma vez que só temos três tipos de símbolos por padrão no Flash (Gráfico, Botão e Movie Clip).
4- Para reproduzirmos o som basta clicarmos no botão Play, localizado na área superior direita da Library.

Configurações do som no Flash

5- Clique duas vezes em cima do ícone do som na Library. A janela Sound Properties se irá abrir.
Clicando no botão Test podemos testar as configurações do som, para parar é só clicar no botão Stop.
Para atualizar o som após alterações feitas externamente ao Flash é só clicar no botão Update. Para importar um novo som usamos o botão Import.
Nossas configurações ocorrem através do item Compression. Quando estivermos usando um arquivo MP3 e estiver marcada a opção Use Imported MP3 quality, o som utilizará a configuração original do MP3:
6- Desmarque a opção Use imported MP3 quality. Agora aparecem novos campos para configurarmos.
No item Compression escolhemos a compressão desejada para o som:
- ADPCM: ideal para sons curtos;
- MP3: mais utilizada para trilhas;
- RAW: geralmente sem compressão;
- Speech: compressão utilizada especialmente para fala.
7- Marque a opção MP3 no campo Compression.
É preciso definir a taxa de amostragem utilizada (Bit rate). Um valor acima de 16kbps produz resultados melhores. No campo quality definimos a qualidade desejada. O valor Fast é uma qualidade mais voltada para a web e suas opções resultam em sons com qualidades melhores.
8- No item Bit rate marque 20 kbps e no campo quality marque a opção Fast.
9- Clique no frame 100 da timeline e insira um Keyframe (F6).
10- Selecione o frame 1 desta layer e no Painel Properties na opção Sound escolha o áudio.
Repare que riscos aparecem na Timeline representando o som. Para melhor visualizarmos estes “riscos” podemos clicar com o botão direito em cima na layer correspondente e na opção properties dela escolher 300% para o item Layer height.
11- Vamos começar a configurar o som do filme no painel Properties. Selecione o quadro 1 e escolha a opção: Stream no campo Sync.
No campo Sync estão às configurações do comportamento do som.
- Event: ao escolhermos este item (no frame selecionado) uma nova instância do som será iniciada quando o indicador de tempo passar por esse Keyframe. Nessa opção o som toca inteiramente de forma semelhante ao Movie Clip, mesmo ocupando um quadro do filme. Neste item temos que ter cuidado, pois podem ser iniciadas novas instâncias do som enquanto a primeira ainda está tocando, causando sobreposições de sons;
- Start: funciona da mesma forma que a Event, diferenciando pelo fato de somente iniciar uma nova instância do som quando a atual já estiver sido finalizada, não sobrepondo os sons;
- Stop: para a instância que está tocando;
- Stream: seus trechos de som são anexados aos quadros do filme, portando só podemos ouvir o som quando houver quadros na Timeline. São carregados somente os trechos de música que aparecem nos quadros. É a melhor opção para um som que desejamos sincronizado a animação.
12- No campo Effect (campo que controla o efeito de volume do som) escolha a opção: Fade Out e clique no botão Edit:
- Left Channel: reproduz o som apenas no canal esquerdo (estéreo);
- Right Channel: reproduz o som apenas no canal direito (estéreo);
- Fade Left to Right: desloca o som do canal esquerdo para o direito;
- Fade Right to Left: desloca o som do canal direito para o esquerdo;
- Fade In: aumenta gradualmente a amplitude do som;
- Fade Out: diminui gradualmente a amplitude do som;
No botão Edit sound envelope, temos uma representação gráfica do som em seus dois canais (esquerda e direita).
Para alterar o volume em algum dos canais, basta clicarmos na janela correspondente e um quadro representativo aparece.
Nesta janela quanto mais próximo da parte inferior de algum canal mais baixo será o som e quanto mais próximo do topo mais alto o volume será.
13- Teste o filme e veja que o filme será reproduzido segundo as configurações e efeitos que configuramos.

18
set

Busca de variáveis em um arquivo de texto

O Flash permite que tenhamos variáveis em um arquivo de texto externo e carregueas no momento que considerarmos viável, facilitando a atualização dos textos utilizados.
1- Vamos abrir o arquivo duvidas.fla (criado anteriormente)
2- Na pasta da lição temos o arquivo texto_para_site.txt. Abra-o e na primeira linha deste arquivo digite: nome=AlfaAdventure
3- Salve o arquivo txt e retorne para o arquivo duvidas.fla
4- Crie uma nova layer e selecione a ferramenta Text Tool com o texto do tipo Dynamic selecionado, colocando seu nome de instância de “valor” e com a opção Multiline marcada na opção Character.
5- Renomeie esta layer para “texto” Ao escolhermos um texto do tipo Dynamic Text, definimos que o texto digitado na área pode mudar de acordo com a programação que viermos a fazer.
6- Crie uma nova layer com o nome de “acoes” e no seu primeiro frame digite:
var endereco:URLRequest=new
URLRequest(“texto_para_site.txt”);
var carregar:URLLoader = new URLLoader();
carregar.dataFormat=URLLoaderDataFormat.VARIABLES;
carregar.load(endereco);
Na primeira linha criamos uma instância chamada endereço a partir da
classe URLRequest para armazenar o endereço onde se encontra o arquivo que será
carregado.
Na terceira linha definimos para a instância chamada carregar sua propriedade
dataFormat que identifica como serão interpretadas as informações que forem
carregadas através do URLLoader. No exemplo as informações serão interpretadas
como variáveis (VARIABLES), ou seja, respeitarão a forma que criamos no txt.
7- Agora em uma nova linha digite:
carregar.addEventListener(Event.COMPLETE,carregou);
function carregou(evento:Event):void{
valor.text=carregar.data.nome;
}
Criamos um ouvinte para a instância carregar que vai observar quando o arquivo estiver carregado (Event.COMPLETE) e depois executa a função “carregou”.
Em seguida criamos a função que será executada quando o arquivo estiver carregado.
Na próxima linha definimos que a caixa de texto chamada valor terá o conteúdo de seu texto (valor.text) recebendo (=) a variável nome (que esta no arquivo txt) entre os dados da instância carregar.
8- Teste o filme e veja que já estamos carregando o texto. Para colocarmos um scroll para o texto iremos usar um componente chamado UIScrollBar, que criará uma barra de rolagem no texto.
9- Selecione o menu: Window > Components e na opção: User Interface escolha o componente: UIScrollBar.
10- Arraste para o palco uma instância deste componente (menu: windows/components) encaixando ao lado da caixa de Texto.

18
set

Rolagem de conteúdo no Flash CS5

A rolagem de conteúdo é muito utilizada quando temos mais informações que espaço disponível.
1- Abra o arquivo verao.fla
2- Crie uma layer e desenhe um retângulo com bordas no palco do Flash e renomeie a layer para “mask”.
3- Dê um duplo clique em cima da borda desta forma e leve-a para uma layer acima, que será chamada “borda”.
4- Crie uma layer acima de todos e dê o nome de “botoes”. Nesta layer desenhe dois triângulos posicionando-os como na imagem.
5- Clique em cima do triângulo de baixo e transforme esta forma em um símbolo do tipo Button.
6- Transforme o triângulo de cima em um símbolo do tipo Button, também.
7- Coloque o nome de instância do botão de baixo de “btdesce” e no botão de cima de “btsobe”.
8- Crie uma nova layer e dê o nome a ela de “mc”. Posicione esta layer abaixo de todas as outras, com exceção da layer “que tem o título”.
9- Na layer “mc” desenhe vários quadrados um abaixo do outro, fazendo com que eles fiquem para fora no quadrado desenhado na tela, juntamente com um texto.
10- Com todos os quadrados e textos selecionados transforme-os em um Movie Clip e dê o nome de instância para eles de “quadrado”.
11- Dê um duplo clique para entrar na edição deste Movie Clip. Selecione todos os quadrados e textos e transforme-os em um símbolo do tipo Graphic.
12- No frame 1 da layer crie uma interpolação de movimento. Desloque o símbolo como uma animação.
13- Crie uma nova camada e coloque um comando de Stop no seu primeiro frame.
14- Retorne para a cena principal.
15- Na camada “mask”crie uma máscara. Agora iremos programar nosso filme para que quando passarmos o mouse sobre os botões role o conteúdo que é o Movie Clip “quadrado” e quando tirarmos o mouse de cima dos botões o conteúdo pare. Para isso usaremos a ação nextFrame e prevFrame.
16- Crie uma nova camada acima de todas e renomei-a para “acoes”. Abra o painel Actions e digite:
btdesce.addEventListener(MouseEvent.ROLL_OVER,desce);
btdesce.addEventListener(MouseEvent.ROLL_OUT,desceRemove);
function desce(evento:MouseEvent):void{
quadrado.addEventListener(Event.ENTER_FRAME, desceFull);
}
function desceFull(evento:Event):void{
quadrado.nextFrame();
}
function desceRemove(evento:MouseEvent):void{
quadrado.removeEventListener(Event.ENTER_FRAME,
desceFull);
}
Para a instância chamada “quadrado” criamos um ouvinte (addEventListener) do tipo evento com atualização constante que será executado a quantidade de frames por segundo do nosso filme, executando uma função chamada “desceFull”.
Essa programação está aos moldes das outras que já fizemos. O que esta aparecendo de novo é a ação nextFrame que está sendo aplicada no símbolo “quadrado”, fazendo com que quando passarmos o mouse (MouseEvent.ROLL_OVER) sobre o botão “btdesce” executará a função desceFull que tem como parâmetro à ação nextFrame.

17- Repetiremos a mesma programação para o btn_sobe. Na próxima linha digite:
btsobe.addEventListener(MouseEvent.ROLL_OVER,sobe);
btsobe.addEventListener(MouseEvent.ROLL_OUT,sobeRemove);
function sobe(evento:MouseEvent):void{
quadrado.addEventListener(Event.ENTER_FRAME, sobeFull);
}
function sobeFull(evento:Event):void{
quadrado.prevFrame();
}
function sobeRemove(evento:MouseEvent):void{
quadrado.removeEventListener(Event.ENTER_FRAME,
sobeFull);
}
18- Teste o filme e veja a animação.

16
set

Navegação na Timeline

Nesta lição iremos criar uma navegação que irá para um determinado frame da Timeline do Flash.
1- Crie um novo arquivo e desenhe dois retângulos: um de cor azul e outro de cor verde:
2- Transforme essas formas em símbolos do tipo Button. Colocando o nome de instância de: btn1 e btn2, respectivamente.
3- Renomeie esta camada para botões e estenda-a (F5) até o frame 60.
4- Crie uma nova layer renomeando-a para conteúdo.
5- No frame 20 desta layer (conteudo) insira um Keyframe e escreva o texto “Azul”.
6- Insira outro Keyframe no frame 40 e escreva o texto “Verde”. Estenda (F5) este conteúdo até o frame 60.
7- Crie uma nova camada renomeando-a para “acoes”.
8- Na camada “acoes” insira um Stop no primeiro e no último frame.
Agora iremos colocar os comandos para os botões.
9- No primeiro frame da camada “acoes” digite:
btn1.addEventListener(MouseEvent.CLICK, botao1); function
botao1(evento:MouseEvent):void{
gotoAndPlay(20);
}
btn2.addEventListener(MouseEvent.CLICK, botao2);
function botao2(evento:MouseEvent):void{
gotoAndPlay(40);
}
Da mesma forma que fizemos anteriormente, criamos um ouvinte para o botão (que está instanciado no palco do Flash) e que executa a função “botao1”. Na terceira linha colocamos a ação gotoAndPlay (20) e (40) que faz com que o filme seja avançado até o frame (20 ou 40, no caso do exemplo) e execute a animação.
Poderíamos ter usado o gotoAndStop, que faria com que o filme fosse avançado até o frame definido e parasse.
9- Teste seu filme.
A navegação dos botões esta funcionando perfeitamente, só que temos que observar um pequeno detalhe. Quando clicamos no botão Azul ele vai até o frame 20 e continua a animação até o frame 60 que é quando temos um comando de Stop (parar).
Isso acontece porque colocamos a ação gotoAndPlay para o botão, podemos resolver esse problema de duas formas:
- Mudando a ação do btn1 para gotoAndStop e nossa programação ficaria assim:
btn1.addEventListener(MouseEvent.CLICK, botao1); function
botao1(evento:MouseEvent):void{
gotoAndStop(20);
}
btn2.addEventListener(MouseEvent.CLICK, botao2);
function botao2(evento:MouseEvent):void{
gotoAndPlay(40);
}
- Ou, ainda, colocando um Stop no frame 39 (antes de começar o texto Verde):
stop ();
Agora teste o filme e veja que esta funcionando corretamente.

Usando labels para a navegação na Timeline

Label no keyframe Flash CS5

Label no keyframe Flash CS5

Iremos trabalhar com o mesmo arquivo que usamos no exercício anterior, só que agora ao invés de colocarmos que a ação gotoAndStop irá para um frame diremos que ela irá para um Label (rótulos) especificado nos frames.
1- Abra o mesmo arquivo da lição anterior.
2- Na camada “acoes” vá até o frame 20 e insira um quadro em branco (F7).
3- Neste frame (20) escreva o Label para o item Frame de “azul”.
Observe que neste frame (20) o Label fica indicado por uma pequena bandeirinha e com o respectivo nome que atribuímos.
4- Agora insira um quadro em branco no frame 40 e coloque o nome do Frame de “verde”.
5- O que teremos que fazer agora é mudar nossa programação, indicando que a ação gotoAndStop e gotoAndPlay irá para o label. Mude a terceira linha de cada botão como no exemplo abaixo:
gotoAndStop(“azul”);
gotoAndPlay(“verde”);