Boas práticas de programação

Organização da timeline

Este é o primeiro artigo de uma série sobre as melhores práticas para programação ActionScript e organização de projetos utilizando a ferramenta Flash. Boas práticas de programação podem, e muito, ajudar o programador, agilizar seu serviço e facilitar sua vida.

Assim como muitos outros aspéctos de um projeto de desenvolvimento Flash são muito importantes para o resultado final, a organização da linha do tempo, ou TimeLine, como preferirem, merece a devida atenção.

Tratarei sobre esses aspéctos da forma mais simples e objetiva possível, já que o objetivo principal não é ensinar a fundo e muito menos dar lições sobre um assunto que pode ser melhor estudado na própria documentação do Flash.

Vamos então ao que interessa?

Quando você começa o desenvolvimento de um aplicativo, animação, jogo, ou qualquer outro objeto no Flash você se preocupa com a organização do documento? Não? Pois deveria.

Imagine você, com todo o conhecimento que possui sobre a ferramenta, desenvolvendo seja lá o que estiver desenvolvendo. Agora imagine que esse projeto ficou enorme mas você conseguiu terminar a tempo, ou dentro do prazo previsto, sem maiores problemas. Agora imagine que você deve realizar uma alteração em um projeto que terminou há um mês e que já não tem tanto contato assim, pois uma coisa é você ter terminar hoje e outra é ter terminado há um mês, nossa mente não guarda informações relativamente irrelevantes tão bem quanto deveria.

O que quero dizer, é que você encontrará muitos problemas em uma grande quantidade de aspéctos se não aprender a organizar seus projetos de forma que fiquem mais legíveis e editáveis.

Uma boa prática, usada pelos melhores programadores Flash, é a organização da timeline.
















Essa imagem ilustra bem o que quero dizer.

A organização da timeline envolve três aspéctos principais.

O primeiro deles diz respeito aos layers. É considerada uma boa prática renomear as layers do seu projeto, dando a elas nomes que façam alusão ao conteúdo de seus frames. Assim, se você tiver o desenho de um retângulo no palco e ações nos frames, você deve colocá-los em frames separados e renomear o frame que contém o retângulo para "retangulo", por exemplo, e o frame com as ações para "actions", com letra maiúscula, ou não. Outra coisa importante nesse contexto, é a ordem das layers, pois, usa-se muito, quando trabalhamos com ActionScrip, colocar sua layer "actions" sobre todas as outras.

O segundo se refere à criação de pastas. Quando você possui várias layers para objetos que pertencem a outro objeto ou objetos parecidos, geralmente agrupa-se esses objetos em pastas. As pastas devem seguir a mesma prática aplicada às layers, ou seja, renomeá-las empregando nomes sugestivos.

Por último, mas não menos importante, a organização das ações nos frames. Essa última parte tem sua importância ligada ao fato de que uma vez que uma ação é colocada em um frame com outros objetos esses podem entrar em conflito com o código do projeto. Por isso, deve-se criar uma layer separada somente para as ações. Outra boa prática de programação e desenvolvimento encontra-se na premissa de que quanto menos frames tiverem actions tanto melhor.

Bom, espero que tenha sido proveitosa a leitura. Até o próximo.

Trocando cursor do mouse

Bom dia a todos, esse tutorial tem como objetivo ensinar como trocar o cursor do mouse.
Ele possui duas partes principais. A primeira consiste em desenhar o objeto que você queira transformar no cursor do mouse. Isso depende muito da aplicação que você estiver desenvolvendo. Assim, se estiver desenvolvendo um aplicativo para colorir paças ou objetos, você pode desenhar um balde de tinta ou um pincel, caso queira apenas mudar a seta comum para uma mais bacana, desenhe então uma seta de sua preferência.
A segunda parte, consiste em criar a lógica para esconder a setinha do mouse e atribuir o seu desenho a ele. O código é bem simples, como veremos daqui a pouco.
Após concluir o desenho do seu novo cursor, selecione o e transforme-o em um movieclip com o nome que deseja. Dê a ele um nome de instância, como "cursor_mc".
Crie outra Layer e renomei-a como actions. A primeira layer você pode renomear como cursor. Criamos duas layers, uma para cada coisa e tudo para deixar mais organizado.
Na layer actions, você colocará o seguinte código:

_root.onLoad = function() {
Mouse.hide();
}
_root.onEnterFrame = function() {
_root.seta_mc._x = _root._xmouse;
_root.seta_mc._y = _root._ymouse;
updateAfterEvent();
}

Assim você define que quando o seu filme for carregado, ou seja, no evento onLoad, cursor padrão do mouse é escondido, ou fica invisível, usando Mouse.hide().
Logo depois, ao entrar no frame, ou seja, no evento onEnterFrame, o seu movieclip cursor_mc irá receber os parâmetros x e y do mouse. Assim, o seu movieclip seguirá o mouse por onde ele for e dará a impressão de que é o próprio mouse.

Pronto, agora você pode tentar criar várias formas de cursos e se divertir. Dá para fazer muitas outras coisas.

Colorindo imagens

Neste tutorial apresentaremos uma maneira simples para criar uma estrutura que possibilite ao usuário colorir desenhos na tela.
Bom, primeiramente, como de praxe, devemos configurar o nosso palco e opções de publicação, de acordo com as nossas preferências. Eu, geralmente, configuro o palco em 1024 x 768 e nas opções de publicação desmarco html e deixo .swf e .exe. Mas fica a critério de cada um.
Você pode criar um preloader para treinar e verificar se realmente aprendeu. Basta usar o tutorial que criei para desenvolver um preloader simples.

Vamos então criar nosso aplicativo para colorir objetos.
É importante ressaltar que para possibilitar que imagens, como uma foto de família por exemplo, sejam coloridas você deve importá-las para o Flash e criar delimitações nas divisões principais e que ache mais interessantes. Nosso exemplo não será baseado nesse tipo de imagem, mas sim nas formas criadas dentro do próprio Flash ou importadas do Illustrator, pois essas já possuem suas delimitações.
Delimitações nesse caso, refere-se às divisões das partes das imagens. São geralmente linhas em preto.
Agora, desenhe ou importe para o Flash, um pincel, ou algum outro desenho que denote pintura - já que iremos pintar objetos. Depois que seu pincel estiver pronto transforme-o em movieclip com o nome mc_pincel. Dê a ele o instance name (nome de instância) de "pincel_mc" (sem as aspas).
Iremos substituir nosso mouse (mãozinha ou setinha) pelo nosso pincel. Para isso basta consultar esse tutorial que fiz.
Agora, crie quatro quadrados 20x20, com borda preta em 1.0, pinte o preenchimento do primeiro de verde, do segundo quadrado de vermelho, do terceiro de preto e o último de azul. Coloque o código das cores na frente de cada um. Para isso abra o painel de cores e observe um código parecido com este: 0x00ff00, quando selecionar as cores acima. Selecione a ferramenta Text Tool, clique na frente de cada quadrado e digite esse código. Isso serve para você saber qual o código dessa cor, mas não é tão relevante assim, se não quizer colocar não tem problema. No entanto, você precisará desses códigos quando começarmos a parte da programação, então pelo menos anote-os.
Posicione esses quadrados do lado esquerdo da sua tela.
Até o momento, já temos o mouse modificado e os quadrados das cores.
Agora criaremos botões com esses quadrados de cores. Para isso, de dois cliques em cada um deles por vez e transforme em botão com os seguintes nomes: mc_verde, mc_preto, mc_vermelho e mc_azul. Dê a eles os seguintes nomes de instância: green_mc, black_mc, red_mc e blue_mc respectivamente.
Precisamos agora das estruturas que serão coloridas.
Crie objetos no palco como: um retângulo, um circulo e um poligono que tenham contorno e preenchimento. Transforme todos em MovieClips e de os seguintes nomes de instância para eles: rect_mc, circ_mc e poly_mc.
Bom, a parte grafica está pronta. Agora iremos à programação que é relativamente simples.
É definida primeiro um variável para a cor inicial do pincel.
Digite: fillColor = 0x000000; Onde é atribuído o código da cor preta à variável.
Em seguida vamos ao eventos dos botões das cores. Nesse ponto, devemos atribuir os códigos das cores que usamos à variável fillColor quando o botão pressionado for solto.
O código usado para os botões é o seguinte:

green_mc.onRelease = function() {
fillColor = 0x00FF00;
}
red_mc.onRelease = function() {
fillColor = 0xFF0000;
}
black_mc.onRelease = function() {
fillColor = 0x000000;
}
blue_mc.onRelease = function() {
fillColor = 0x0033FF;
}

Agora criaremos uma função que será responsável pelo colorimento dos objetos.

function colorir() {
iColor = new Color(this);
iColor.setRGB(_root.fillColor);
delete iColor;
}

Apesar de já termos a função ela ainda não está sendo chamada por nenhum objeto. Então devemos atribuir a função aos objetos que serão coloridos, mais especificamente a um evento de clique deles, neste caso usaremos onRelease.
Essa atribuição fica assim:

rect_mc.onRelease = colorir;
circ_mc.onRelease = colorir;
poly_mc.onRelease = colorir;

Nesse ponto nosso aplicativo já funciona. No entanto, nosso pincel ainda não está mudado, ele ainda é o ponteiro padrão. Isso porque não dissemos ao nosso aplicativo que nosso mouse agora deve ser o pincel que criamos e instanciamos no princípio desse tutotial.
Para realizar essa mudança, verifique o nome de instância que deu ao seu pincel e coloque o seguinte código:

_root.onLoad = function() {
Mouse.hide();
}
_root.onEnterFrame = function() {
_root.seta_mc._x = _root._xmouse;
_root.seta_mc._y = _root._ymouse;
updateAfterEvent();
}

Note que o nome de instância do pincel deve ser seta_mc. Se quizer alterar não tem problema, é só mudar também no código acima.
Ok? Então pronto!!! Agora você já pode fazer qualquer aplicativo aplicando cores a objetos.
Até o próximo.

Preloader

Contruindo um Preloader simples

Boa tarde, hoje vou ajudar a criar um preloader simples usando ActionScript 2.0.
A estrutura é bem simples.
Primeiramente, vamos organizar o nosso filme. Abra o Flash, vá em File -> new. Depois configure seu Stage de acordo com a sua preferência. Por padrão as medidas do Stage vem 550 x 400, você pode deixar assim se quizer.
Bom... mãos à massa!
Depois de organizar nosso filme iremos criar a primeira estrutura do nosso preloader. Vá até a ferramenta Rectangle e a selecione. Faça um retângulo mais comprido do que largo da cor que preferir.
Assim:

Depois, vá até a timeline e crie outra layer para a barra. Faça outro retângulo para ser a barra do preloader. Agora já temos o fundo e a barra. A barra você pode fazer usando linear gradiente para ficar bacana o esquema de cores.
Para que a timeline fique mais organizada é uma boa prática renomeá-las colocando nomes que façam referência às estruturas que cada uma comporta. Por exemplo, na layer do fundo renomeie a layer como fundo e na da barra renomeie para barra e assim por diante.

Agora, selecione a barra e crie um MovieClip como o nome mc_barra e atribua barra_mc como Instance Name (nome de intância).

Pronto, a estrutura principal já está pronta. Agora vamos às actions para da funcionalidade ao nosso preloader.

Cria uma nova layer e ronomeie para actions. Clique no primeiro frame dessa layer e pressione F9 para abrir o painel de Actions.
O primeiro comando que devemos colocar é o stop();. Isso porque se não houver esse comando, nosso filme iria começar e seguir adiante. Com o stop(); o filme começa e para ainda no primeiro frame.
A seguir colocaremos um evento de frame, o onEnterFrame = function(), para que o filme fique em um loop até que uma condição seja atendida ou que o loop seja interrompido.
O que devemos fazer dentro desse bloco é o seguinte: pegar o tamanho total do arquivo flash e o tamanho carregado até o momento do mesmo - o tamanho carregado é atualizado a cada loop que o filme tiver, é assim que o preloader funciona. Com essas informações devemos realizar uma regra de três, calculando o tamanho carregado dividido pelo tamanho total multiplicado por 100, para obter a porcentagem momentânea. Essa porcentagem deve ser atribuída a uma varíavel porcentagem.
Então atribuímos essa porcentagem à propriedade _xscale da nossa barra_mc.
A seguir, devemos varificar se o arquivo já foi carregado para que nosso filme seja encaminhado para o scene principal. Isso será feito através de um if que verifica se o tamanho total é igual ao tamanho carregado. Se isso tiver acontecido é só dar um gotoAndPlay("principal", 1); onde "principal" é o nome da nossa cena principal.
As cenas ficariam assim: primeiro a cena do preloader - você pode dar o nome que quiser a ela -, e depois a cena principal. Então teremos duas cenas.

Você pode querer colocar um campo de texto para mostrar a porcentagem enquanto a barra_mc é carregada. Para isso basta criar um campo de texto dinâmico e atribuir a porcentagem à propriedade text dele. Coloque percent como nome de instância do seu campo de texto.

O código completo ficaria assim:

stop();
onEnterFrame = function() {
// pegando tamanho total e tamanho carregado
totalSize = getBytesTotal();
atualSize = getBytesLoaded();

// calculo da porcentagem
porcentagem = Math.floor((atualSize / totalSize) * 100);
// atribuindo porcentagem à barra
barra_mc._xscale = porcentagem;
// atribuindo porcentagem ao campo de texto
percent.text = "Loading...  " + porcentagem + " %";
if (totalSize == atualSize) {
 gotoAndPlay("principal", 1);
}
}

Para testar o seu preloader basta ir até a sua cena principal e importar uma imagem para o stage. Agora basta dar ctrl + enter para testar. Note que a imagem importada apareceu logo de cara. Não pense que seu preloader não está funcionando, de outro ctrl + enter que ele vai aparecer. Caso isso não acoteça releia o tutorial.

Agora que já podemos viajar um pouco e inventar. Existe uma infinidade de preloader que se pode fazer.