Filling Flash objects with solid colors and textures

Question

I’ve been a Java programer for a while and now I’m creating a kind of Flash based coloring book in that video.

Today there is a color palette, when clicking on the color and then in the drawing that part receives the color chosen using the code:

 on(release){
   fillcolor=(0xFF0000) 
 }

However, how to fill a texture? I need that instead of colors in the palette there are textures and work the same way:

Answer 1

First of all (and a private advice from me) is you do this kind of programming in Actionscript 3.0, taking into account the practicality in the treatment of on-screen clicks, since AS3 is event-oriented, and possibly you will be more familiar.

Following the logic of video in question, I have prepared a simple class, which performs both operations, both fills with solid colors GraphicsSolidFill like bitmap textures GraphicsBitmapFill.

Understanding the filling of objects

Every and every drawing you perform with fillers, has an object called Shape (ref.). In this object, a property called graphics (ref.) controls the shapes and lines of your "drawing", which means you can change any property of your object.

This drawing is nothing more than an image in Vector Drawing. Which means that the measurement is not in Pixels, but in Mathematical Coordinates. Ref.

We will use exactly this object to handle all modifications of our movieclips.

Answering the question

1. Draw a picture on stage and each part of your drawing converts it into one MovieClip. (Just like in the video. It is important to instantiate them. Ex.: braco_mc, perna_mc, cabeca_mc... 'Supposing it is a doll.')

2. We will create our function, we will call it fillTo(); who receives a MovieClip and an object, whether Bitmap or hexadecimal color 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);
   
       }
   
      }
   

3. To carry out the filling to our movieclips, you just call the function so:

   fillTo(perna_mc, 0xFF0000); //Pintando a perna de vermelho
   fillTo(perna_mc, textura_bitmap); //Pintando a perna com a textura em bitmap
   

I took a class called Filler, to simplify the tutorial.

Answer 2

A very simple solution to this is:

You have a movieclip where in each frame you put a different texture and your button will have an event that displays the frame with the desired texture:

Example:

on(release){
    obj.gotoAndPlay(2);
}

In that case obj would be the name given to your movieclipe and 2 would be the frame to be displayed. Obs: do not forget to put a stop(); in the action of your first frame to not fall into looping your movieclip