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.