Desenvolver em Flash muitas vezes pode parecer complexo. Isso pode ser verdade em grandes projetos, mas neste artigo nosso desafio será criar um projeto web de forma simples e objetiva, com Flash CS3 e ActionScript 2.0.

Mas antes que alguém envie uma mensagem pedindo por que ActionScript 2.0 e não ActionScript 3.0? A resposta é simples… pretendo alcançar pessoas que procurem desenvolver sites em Flash compatíveis com versões anteriores do Flash Player, as quais ainda se encontram em uso em muitos clientes.

Não entrarei em detalhes básicos, como por exemplo, importar um arquivo para o Flash ou converter um objeto em MovieClip. Caso alguém fique com dúvida quanto à parte mais básica, sinta-se à vontade em mandar um e-mail para eu@souweb.info ou deixar um comentário.

O projeto será composto por 4 arquivos. O principal.fla que será o recipiente para os outros 3 arquivos que armazenam o conteúdo: empresa.fla, produtos.fla e contato.fla. Estes 3 arquivos inicialmente serão totalmente estáticos, sem nenhum evento de interação ou animação, pois focaremos totalmente no arquivo principal.fla.

Futuramente deixaremos este site mais dinâmico, com animações e com carregamento de arquivos externos. Estes arquivos serão no formato XML para os dados (textos e outras informações) e imagens JPG para as fotos utilizadas no conteúdo. Esta dinamização do site tornará mais fácil nosso trabalho de atualização e o site será mais leve e rápido.

Também não aplicarei layout neste exemplo, mas fique à vontade em aplicar no seu desenvolvimento o layout que quiser.

Caso queira baixar os arquivos deste artigo para utilizar no seu desenvolvimento ou poder verificar como foram desenvolvidos, clique aqui.

Inicialmente vamos criar os 3 arquivos que armazenam o conteúdo para que, durante o processo de desenvolvimento do arquivo principal.fla, possamos ver tudo funcionando.

1. Crie um novo arquivo Flash File (ActionScript 2.0) e salve com o nome empresa.fla.

1.1. Vamos configurar o documento. Clique no menu Modify > Document e na janela Document Properties, configure as dimensões para 700px de largura por 450px de altura e Frame rate de 20fps, conforme Imagem 1.

Imagem 1 – Configuração dos arquivos que serão responsáveis pelo conteúdo.

1.2. Monte seu arquivo com o título EMPRESA, uma imagem ilustrativa e um texto institucional de exemplo, conforme Imagem 2.

Imagem 2 – Arquivo empresa.swf

1.3. Depois de concluído, pressione as teclas CTRL+ENTER para conferir se tudo foi publicado conforme esperado e para gerar o arquivo SWF, que será carregado pelo arquivo principal.fla.

2. Crie um novo arquivo Flash File (ActionScript 2.0) e salve com o nome produtos.fla. Configure conforme passo 1.1.

2.1. Este arquivo terá o título PRODUTOS, 9 imagens ilustrativas, sendo 8 miniaturas medindo 105px de largura por 79px de altura e 1 ampliada medindo 447px de largura por 335px altura. Abaixo da foto ampliada, colocaremos uma descrição do produto. Pressione CTRL+ENTER e verifique o resultado é semelhante a Imagem 3.

Imagem 3 – Arquivo produtos.swf

3. Crie um novo arquivo Flash File (ActionScript 2.0), salve com o nome contato.fla e configure conforme passo 1.1.

3.1. Este arquivo terá o título CONTATO, 1 formulário e informações de contato, conforme Imagem 4:

Imagem 4 – Arquivo contato.swf

4. Vamos para a parte mais importante deste artigo, o arquivo principal. Crie um novo arquivo Flash File (ActionScript 2.0) e salve como principal.fla.

4.1. Vamos configurar o documento. Clique no menu Modify > Document e na janela Document Properties configure as dimensões para 700px de largura por 580px de altura e Frame rate de 20fps, conforme imagem 5.

Imagem 5 – Configuração do arquivo principal.fla

4.2. O arquivo principal.fla, como você pode reparar, tem a mesma largura que os demais documentos, mas a sua altura é maior, isto para que possamos acomodar no topo o logotipo do site e o menu de navegação. Neste menu, cada botão irá carregar um arquivo específico (empresa.swf, produtos.swf ou contato.swf). Montei o layout conforme imagem 6, com o logotipo do meu blog e 3 botões (que na verdade são instâncias de MovieClip, isso devido aos maiores recursos de animação que o MovieClip disponibiliza).

Imagem 6 – Arquivo principal.swf

4.3. Os elementos na tela devem estar organizados em layers separadas para mantermos o arquivo organizado, o que irá facilitar possíveis alterações, pela praticidade que teremos em selecionar os elementos e pela facilidade de entendermos a estrutura do mesmo.

Então Separe os itens conforme a Imagem 7, criando uma layer para o ActionsScript chamada “AS”. Crie a layer “logo” onde será colocado o logotipo, os itens da navegação ficam na layer “menu” e crie também uma layer “alvo” para armazenar o MovieClip “alvo”, que é um MovieClip vazio, responsável por receber e armazenar o arquivo externo que será carregado via ActionScript.

Imagem 7 – Organização dos elementos na Timeline.

4.3.1.1. Vamos criar o MovieClip “alvo”, pressione CTRL+F8 e nomeio como mc_alvo. Você irá perceber na parte inferior da Timeline, conforme Imagem 8, que ao criar um novo MovieClip, ficamos localizados dentro deste. Depois de criado retorne para a “Scene 1´´ e com layer “alvo” selecionada, arraste da Library o MovieClip vazio para o Stage com o Instance Name “alvo_mc”.

Imagem 8 – Criando MovieClip \”alvo\”

4.4. Forneça um Instance Name (Nome de Instância) para cada botão conforme segue: empresa_mc, produtos_mc e contato_mc, onde este sufixo “_mc” colocado depois do nome do botão tem como objetivo ativar a janela de auto-completar assim que digitar após do sufixo o ponto final “.”. (Imagem 9).

Imagem 9 – Instanciando o MovieClip btn_empresa, como \”empresa_mc\”.

4.5. Vamos para a janela do Flash onde tudo acontece… Selecione o KeyFrame na posição 1 da layer “AS” e abra o painel Actions (tecla F9).

4.6. Nesta janela escreva o seguinte código:

var mcl : MovieClipLoader = new MovieClipLoader();
// Instanciamos um objeto da classe MovieClipLoader, a qual é responsável por carregar arquivos externos (.swf e .jpg) .
var listener : Object = new Object();
// Este objeto da classe Object será responsável por monitorar o carregamento dos arquivos externos.
mcl.addListener(listener);
// Relacionamos os dois objetos, o que fará que o objeto "listener" monitore o objeto "mcl"
// Nota: Sempre que possível crie funções para organizar seus blocos de código... lembrando que funções são blocos de códigos mais legíveis e reutilizáveis.
function carregar(arquivo){
mcl.loadClip(arquivo, alvo_mc);
}
// A função "carregar" tem como objetivo facilitar alterações no nome da instância do MovieClip alvo do carregamento do arquivo externo, o qual iremos perceber sua real utilidade enquanto desenvolvemos.
carregar("empresa.swf");
// Chamo a função carregar para iniciar com o arquivo empresa aberto.
function ativarPreloader(ativar){
preloader_mc._visible = ativar;
}
// A função "ativarPreloader" tem o objetivo semelhante ao da função carregar, facilitando alterações no nome de instância do MovieClip "preloader".
/* EVENTOS DO MENU */
empresa_mc.onRelease = function(){
carregar("empresa.swf");
}
produtos_mc.onRelease = function(){
carregar("produtos.swf");
}
contato_mc.onRelease = function(){
carregar("contato.swf");
}

Bom pessoal, termino aqui o artigo, mas não se desespere, já estou preparando o próximo, no qual torno a este arquivo animado. Espero que continuem lendo.

Um abraço!