O primeiro de tudo (e um conselho particular meu) é você fazer este tipo de programação em ActionScript 3.0, levando em consideração a praticidade no tratamento dos cliques na tela, já que o AS3 é orientado à eventos, e possivelmente você estará mais familiarizado.
Seguindo a lógica do vídeo em questão, preparei uma classe singela, que realiza as duas operações, tanto preenchimentos com cores sólidas GraphicsSolidFill
como texturas bitmap GraphicsBitmapFill
.
Entendendo o preenchimento de objetos
Todo e qualquer desenho que você realiza com preenchimentos, possui um objeto chamado Shape
(ref.). Neste objeto, uma propriedade chamada graphics
(ref.) controla as formas e linhas do seu "desenho", o que significa que você pode mudar qualquer propriedade do seu objeto.
Este desenho nada mais é do que uma imagem em Desenho Vetorial. O que significa que a medição da mesma não é em Pixels, mas sim em Coordenadas Matemáticas. Ref.
Vamos utilizar exatamente este objeto para tratar todas as modificações dos nossos movieclips.
Respondendo a pergunta
- Faça um desenho no palco e cada parte do seu desenho converta-a em um
MovieClip
. (Assim como no vídeo. É importante instanciá-los. Ex.: braco_mc, perna_mc, cabeca_mc... 'Supondo que seja um boneco.')
Criaremos nossa função, vamos chamá-la de fillTo();
que recebe um MovieClip
e um objeto, seja Bitmap
ou cor hexadecimal uint
:
var colortransform:ColorTransform = new ColorTransform(); //Criamos o objeto que aplica a transformação de cores no nosso desenho;
var shapeGD:Vector.<IGraphicsData>; //Objeto vetor que contém os dados da nossa imagem
var newGD:Vector.<IGraphicsData>; //Irá contém os novos dados do nosso desenho
function fillTo(mc:MovieClip, obj:*):void {
var shape:Shape = (mc.getChildAt(0) as Shape); //Recupera o desenho dentro do movieclip
shapeGD = shape.graphics.readGraphicsData(); //Recupera os dados do nosso objeto Shape (curvas e linhas)
newGD = new Vector.<IGraphicsData>;
//Para cada objeto dentro do nossos objeto vetor, recuperamos apenas a propriedades de linhas e curvas, deixando de lado as de preenchimento
shapeGD.forEach(function(it:*, i:int, vec:Vector.<IGraphicsData>):void {
if(!(it is GraphicsBitmapFill) && !(it is GraphicsGradientFill) && !(it is GraphicsSolidFill)) {
newGD.push(it); //Adicionar somente as propriedades citadas
}
});
//Verificamos se a propriedade passada é um Bitmap ou cor hexadecimao uint
if(obj is Bitmap) {
//Recupera o bitmap (no caso a textura)
var bitmapData:BitmapData = (obj as Bitmap).bitmapData;
//Objeto responsável por adicionar o preenchimento em bitmap ao nosso desenho
var graphicsbitmap:GraphicsBitmapFill = new GraphicsBitmapFill(bitmapData);
newGD.push(graphicsbitmap); //Puxa este objeto para nosso vetor
//Adiciona as novas propriedades ao nosso desenho
shape.graphics.beginBitmapFill(bitmapData, null, true, true);
shape.graphics.drawGraphicsData(newGD);
}
else if(obj is uint) {
//O procedimento é o mesmo, mas o objeto é diferente
//aplicamos apenas a cor sólida ao nosso objeto
var graphicscolor:GraphicsSolidFill = new GraphicsSolidFill(obj);
newGD.push(graphicscolor);
shape.graphics.beginFill(obj);
shape.graphics.drawGraphicsData(newGD);
}
}
Para realizar o preenchimento aos nossos movieclips, basta você chamar a função assim:
fillTo(perna_mc, 0xFF0000); //Pintando a perna de vermelho
fillTo(perna_mc, textura_bitmap); //Pintando a perna com a textura em bitmap
Fiz uma classe chamada Filler, para simplificar o tutorial.