souweb

Desenvolver um site em flash muitas vezes pode parecer complexo… isso pode ser verdade em grandes projetos, mas neste tutorial estaremos desenvolvendo um site básico no Flash CS3 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 eu@souweb.info 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 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 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”);
// 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 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!

Esta semana fiquei muito feliz ao receber a visita da jornalista Marlize da Silveira, do Jornal Semanário, de Bento Gonçalves, a qual procurava dicas e maiores informações sobre como realizar compras seguras na internet. Conversamos mais de uma hora, sobre diversos aspectos, pena que grande parte dos detalhes não foram publicados. Compreensível pelo espaço reduzido. De qualquer forma, deixo publicado aqui meu agradecimento por ter confiado nas informações que lhe foram passadas.

Abaixo o texto publicado na edição do Jornal Semanário de 06 de Fevereiro de 2008.

Modalidade vem ganhando adeptos em todo o país, mas requer cautela do consumidor para evitar prejuízos

É cada vez maior o número de consumidores que realizam compras em lojas virtuais. Os adeptos vêem como vantagens, além do preço, muitas vezes reduzido, a facilidade de adquirir o produto sem sair de casa. Mas é preciso estar atento à idoneidade do fornecedor.

Alguns cuidados podem auxiliar na hora de realizar uma escolha segura. Certificados digitais, dados criptografados e avaliações de outros compradores a respeito dos vendedores e dos produtos podem ser ferramentas para a escolha certa do site em que realizará a compra.

O professor de webdesign, Carlos Alberto Tristacci, acompanha o crescimento da rede de como ferramenta de vendas. “Cerca de 70% dos usuários procuram por produtos ou serviços na internet”, diz. Para ele, navegar não é arriscado, mas sim a finalização da compra, quando o cliente fornece dados pessoais.

Para realizar uma transação com segurança, é importante verificar se há certtificação digital - ’selos’ constantes nas páginas. Também o cadeado que aparece nas áreas de acesso restrito, comprovam que o site está protegido por criptografia - os dados são mesclados com códigos - indicada ainda pelo ’s’ ao final do ‘http’.

Conforme Tristacci, ao utilizar páginas para pesquisa de preços, é importante verificar as avaliações das lojas, ler o que os clientes escreveram sobre a empresa e o bem adquirido. Para as lojas pouco conhecidas, verificar se há telefone, e-mail e formas de contato para solucionar possíveis problemas. No entanto, o professor não indica que se descarte uma empresa apenas por não conhecê-la. Informar-se sobre disponibilidade do produto, políticas de entrega, forma de transporte, trocas e devoluções podem colaborar para uma transação tranquila.

Segundo o coordenador do Procon de Bento Gonçalves, Clóvis Antônio Bedina antes de efetuar uma compra virtual, é preciso verificar se a empresa é idônea. Para isso, ele aconselha a confirmação de dados como endereço, número do Cadastro Nacional de Pessoas Jurídicas (CNPJ), inscrição municipal, além de buscar nos sites dos Procons das grandes cidades por registros e reclamações.

De acordo com Bedina, umas das principais queixas dos consumidores é de não conseguir cancelar o pedido. Nesse caso, a pessoa deve procurar o auxílio do órgão para intermediar a negociação, uma vez que a legislação prevê prazo de sete dias para a desistência da compra. Em relação ao pagamento da compra, ele desaconselha o depósito adiantado.

Web Design é o desenvolvimento de páginas para internet, sendo considerada uma profissão nova e em crescimento, principalmente no Brasil.

Em 2001, quando houve a explosão no mercado na área de desenvolvimento de sites, abriram 1,5 milhão de vagas somente na Europa. Já no Brasil, essa explosão ainda está acontecendo, com um crescimento médio de 20% a cada semestre.

A tendência, com o aparecimento das novas tecnologias, é surgirem novas funções, resultado este da especialização de profissionais que atuam nas diversas áreas como:

Arquiteto da Informação, responsável pela organização de todo o conteúdo/serviço disponível no site/sistema. Designer de Interface, Designer de Interação ou Experience Designer, vários nomes para papéis similares e que se confundem com o Arquiteto de Informação, mas com a responsabilidade de planejar a experiência do usuário, desde os caminhos a serem percorridos por ele até a definição de todos os elementos de interação (menus, botões e caixas de texto). Designer de Branding, responsável por pegar o esqueleto produzido nos passos anteriores e dar seu aspecto final, deixando-o mais atraente.

Entre estes profisionais não existe exatamente uma função principal que seja mais importante que as demais. Mas os Arquitetos de informação e designers de interação/interface e experiência elevaram a qualidade dos projetos (sites). Porém, os Htmlers e os Designers de Branding não deixam de ser importantíssimos, desde que a equipe seja balanceada e unida com formação profissional, o que ajuda a refinar os talentos naturais de qualquer estudante.

Por fim, a separação de funções no projeto (site/sistema), tem em consideração o seu tamanho, prazo e qualidade final. Os projetos menores podem passar por um profissional multifuncional, que ao mesmo tempo é o contato, o gerente, o htmler e o programador. Mas, ao falarmos de grandes projetos na internet, que envolvam a utilização maciça de produtos e serviços, é importante trabalharmos com especialistas, pela questão de tempo e qualidade final do site. É por isso também, que as grandes produtoras de web no Brasil investem em profissionais qualificados em funções especificas.