Desenvolver um site em flash muitas vezes pode parecer complexo. E pode ser verdade em grandes projetos, mas neste tutorial estaremos desenvolvendo um site básico no Flash com ActionScript 2.0, de forma objetiva e simples. E 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. E devido as várias turmas de webdesign que ministrei com esta versão da linguagem, para os quais tenho a expectativa deste tutorial ser esclarecedor.
Não estarei entrando em detalhes básicos, como por exemplo, como importar um arquivo para o Flash ou como converter um objeto em MovieClip. Caso alguém, fique com dúvida quanto a parte mais básica, sinta-se à vontade em mandar um e-mail para carlos@tristacci.com.br ou para 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 estaremos nos focando totalmente no arquivo principal.fla.
Mas, futuramente estaremos tornando 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 estarei aplicando layout neste exemplo, mas fique à vontade em aplicar no seu desenvolvimento o layout que quiser.
Caso queira baixar os arquivos deste tutorial 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 e 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 iremos colocar 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) e 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 tutorial, 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 especifico (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 ou Insert > New Symbol 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,
// o qual é responsável por carregar arquivos externos (.swf e .jpg).
var listener : Object = new Object();
// Este objeto da classe Object será responsável por monitar 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”);
/* 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 este post… mas não se desespere, já estou preparando o próximo, no qual torno este arquivo animado. Além, da sequência de posts, que detalho o desenvolvimento dos arquivos empresas, produtos e contato.
Espero que continuem lendo.
Um abraço!
