8

Sou programdor Java há um tempo e agora estou criando uma espécie de livro de colorir em Flash baseado nesse video.

Hoje existe uma paleta de cores, ao clicar na cor e depois no desenho aquela parte recebe a cor escolhida usando o código:

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

funcionamento atual

Porém, como fazer o preenchimento através de uma textura? Eu preciso que ao invés de cores na paleta exista texturas e funcione da mesma maneira:

funcionamento desejado

4
  • Olá Dexter, Talvez uma outra abordagem que pode ser feita é adicionar ao objeto (acredito que um movieclip) um objeto (movieclip) dentro dele, este objeto pode ter o tamanho da tela, assim não haverá necessidade de colocar mais de um ou de redimencionar. Uma forma de pensar é assim, ter uma variavel que armazena o valor da paleta (Qual a cor ou textura selecionada) este valor pode ser uma referencia a um movieclip. Quando o evento release for ativado ele usa esta variavel e adiciona o objeto referido nela como único filho da forma que deseja pintar, por exemplo a tromba do elefante.
    – ooredroxoo
    Commented 5/01/2015 às 18:57
  • Isso deve dar a você o efeito desejado, e pode ser feito usando programação, contudo os objetos devem existir em sua biblioteca para que possam ser referenciados no AS.
    – ooredroxoo
    Commented 5/01/2015 às 18:57
  • 1
  • 5
    Não foi solicitado palpite, mas pelo "bem da web" sugeriria você ir pro universo do HTML, SVG, JS e CSS para fazer isso (ou usar alguma tecnologia mais robusta se for para desktop), pois o Flash está se tornando cada vez mais inconveniente com suas falhas de segurança e atualizações constantes (e agora com as tentativas de empurrar um navegador junto da instalação), e já não é mais "levinho" como era antes.
    – Largato
    Commented 7/01/2015 às 21:00

2 Respostas 2

1

Uma solução bem simples para isso é:

Você ter um movieclip onde, em cada frame vc coloque uma textura diferente e o seu botão terá um evento que exiba o frame com a textura desejada:

Exemplo:

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

Nesse caso obj seria o nome dado ao seu movieclipe e 2 seria o frame a ser exibido. Obs: não esqueca de colocar um stop(); na action do seu primeiro frame para não cair em looping o seu movieclip

1

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

  1. 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.')
  2. 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);
    
        }
    
       }
    
  3. 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.

1
  • Algumas informações que citei podem estar distorcidas. Caso estejam, peço que me informem, por favor! Havia um tempo que tinha visto esta pergunta no SOpt, infelizmente pela falta de tempo não pude pesquisar sobre a mesma.. :)
    – bio
    Commented 29/01/2015 às 17:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .