Em uma época dessas onde o nosso queridinho pássaro azul perde espaço para um 'f' também em azul, decidi fazer uma pequena homenagem com o queridinho Larry. Isso mesmo o nome do nosso passarinho é Larry.

    Vamos aqui explicar um pouco a respeito da nossa ave. Esse nome surgiu devido a um grande ex-jogador de basketball do Boston Celtics, o Larry Bird, time da cidade natal do co-fundador do microblog. Então devido a circunstancia do sobrenome do ex-jogador ser "Bird" eles homenagearam-no colocando o seu nome na ave.

    A ave já sofreu alguns redesenhos porem hoje ele tem uma imagem bem interessante. Basta olharmos o antigo para o atual desenho da ave.

logo antiga

logo atual

     Então vamos falar sobre a homenagem, e para isso eu entrei em um site de um animador muito bom por sinal que utiliza-se de flash para animar suas obras. Para ver o site clique aqui

    Eu vi uma animação cujo havia uma ave que voava pelos céus e passava por cidades morros, entre outros. Com isso eu vetorizei algumas das imagens dele pelo flash ou pelo illustrator, logo apos comecei a anima-lo no flash. E a obra você pode ver clicando na imagem logo abaixo:

     Para fazer download do editavel basta clicar aqui

   Bem hoje vamos fazer uma pequena animação com uma musica infantil bastante famosa chamada "meu pintinho amarelinho". 

   Essa animação sera feita toda em flash e photoshop, mas também podemos utilizar de illustrator, pois o mesmo é ótimo para vetorização. Começamos fazendo o fundo, depois do fundo vamos criar a ave, e na ave faremos parte a parte para pôr movimentação no mesmo.

     Mais a frente faremos os detalhes.

O resultado encontra-se logo abaixo:

     Agora vamos fazer uma animação em flash com espaçonave, porem já temos um script pré-definido, e vamos ter que segui-lo. Segue o roteiro abaixo o nosso famoso stroyboard.

    Como se dará a animação é por conta de você caro leitor, mas tem que seguir o roteiro, com os detalhes de cenário e deve existir sonoplastia para as ações. 

   Eu irei fazer a animação com pixel art, e essa animação cada parte será feita com photoshop, desde a nave, a cidade e o céu. Depois de feito, transfiro para o flash e os transformo em "movieclip" e coloco-os na biblioteca do flash.

     Depois de colocado, o resto é animar o video. A sonoplastia capturei o audio por videos do "youtube", mas você pode pegar de qualquer outro lugar, isso cabe ao critério de cada um.

      O resultado você confere logo abaixo:

    Bem pessoal hoje vamos fazer uma animação utilizando uma técnica muito famosa chamada mickeymousing.

      Agora você se pergunta "o que raios é mickeymousing?", vamos fazer uma explicação bem simples. Mickeymousing é uma técnica de composição para a imagem que se originou, como o nome sugere, em desenhos animados, mais especificamente nas produções de estúdios americanos do final dos anos 1920, utilizando o som como guia da animação.

        Vamos utilizar dessa técnica para criar uma abertura de três porquinhos, com um áudio da narrativa e uma imagem de uns desenhos, como mostra a imagem abaixo:

       Com essa imagem, vamos recorta-las no photoshop, parecendo como se fossem recortes de criança, deixando um pouco de espaçamento branco nas bordas. Assim a animação vai ficar com cara meio de stopmotion.

             Logo apos isso, vamos pegar o áudio que vai se combinar com as imagens fazendo a animação. Som da animação.

          Com todas as ferramentas você já tem "a faca e o queijo na mão" e já pode fazer a animação com o flash e depois veja o resultado.      

              Então agora vamos ver como ficou o resultado final dessa animação com o vídeo logo abaixo:

     Bem dessa vez vamos brincar um pouco com arduíno, e juntamente nessa experiência vamos precisar dos seguintes componentes:

• Um Arduíno;
• Uma protoboard;
• Um resistor (90 ohm);
• Um led;
• Um controle remoto de infra-vermelho (IR);
• Um receptor de IR;
• Alguns fios.

arduino

controle remoto

sensor IR

protoboard

led

   Com esses componentes precisaremos montar todo o equipamento, para isso segue essa pequena ilustração logo abaixo como dica de montagem. 

esquema de conexão

    Nessa experiência faremos um jogo bem simples, onde você apertará um botão do controle, e na tela mostrará 4 quadrados, e a cada clique um dos quadrados acenderá como um toque de magica, porem quando apertado o mesmo botão novamente outro quadrado poderá acender no lugar do primeiro. Algo relativamente simples, porem foi muito trabalhosa.

        Agora vamos aos códigos tanto do processing quanto do arduíno.

Código do Processing

import cc.arduino.*;

import processing.serial.*;



//#define R1 FF28CF
//#define G2 FF10E7
//#define B3 FF7285
//#define Y4 FF08EF

Serial myPort;
int val;

//variáveis das cores
float r = 0;
float g = 0;
float b = 0;
boolean button = false;
boolean flashred = false;
boolean flashgreen = false;
boolean flashblue = false;
boolean flashyellow = false;
boolean redpress = false;
boolean greenpress = false;
boolean bluepress = false;
boolean yellowpress = false;

//variáveis do sorteio;


int R1 = 54;
int G2 = 50;
int B3 = 57;
int Y4 = 53;

//int R1 = 16724175;
//int G2 = 16718055;
//int B3 = 16743045;
//int Y4 = 16716015;
//int [] cor = { R1, G2, B3, Y4 };


//int [4] cor = { R1, G2, B3, Y4};

//int [] sequencia = new int [100];

//int rodada_atual = 0;

//int passo_atual = 0;

//int perdeu = false;

void setup(){

  size (700, 700);
  frameRate (120);
 //background
   
  //select port
  println(Serial.list());
 
  myPort = new Serial(this, Serial.list()[1], 9600);
  myPort.bufferUntil('\n');
  
  
  }


void draw(){
    
 println(val);
  
 
  //fundo
  background (r, g, b);
  fill(255,150,150);
  rect(0, 0, width/2, height/2);
  fill(150,255,150);
  rect(width/2, 0, width/2, height/2);
  fill(150,150,255);
  rect(0, height/2, width/2, height/2);
  fill(255,255,150);
  rect(width/2, height/2, width/2, height/2);
     
     
     //recebe os valores da serial e armazena na variável. Se ficar posicionado nessa parte do código, as cores apenas piscam.
   //if( myPort.available() > 0) {
  //val = myPort.read();
  //}
   //Compara o valor das variáveis

  if ( val == R1 ){
  flashred = true;
  redpress = true;
  }
  
  else if ( val == G2 ){
  flashgreen = true;
  greenpress = true;
  }
  
  else if ( val == B3 ){
  flashblue = true;
  bluepress = true;
  }
  
  else if ( val == Y4 ){
  flashyellow = true;
  yellowpress = true;
  }

  //muda a cor dos quadrados
if (flashgreen) {
    fill(0,255,0);
  rect(width/2, 0, width/2, height/2);
 
  flashgreen = false;
      }

else if (flashred) {
   fill(255,0,0);
  rect(0, 0, width/2, height/2);
   
  flashred = false;
   }

else if (flashblue) {
   fill(0,0,255);
  rect(0, height/2, width/2, height/2);
 
  flashblue = false;
     
}

else if (flashyellow) {
  
  fill(255,255,0);
  rect(width/2, height/2, width/2, height/2);
  
  flashyellow = false;
 }
}

void serialEvent (Serial myPort){
  
  //recebe os valores e armazena na variável. Se ficar nessa parte do código, pode ocorrer da cor só mudar quando um botão for pressionado, como também pode piscar uma cor e outra ficar fixa.
  
 if( myPort.available() > 0) {
  val = myPort.read();
  }
  
} 

Alguns detalhes do código do processing:

1. Linha 61. Ele começa a ler a porta serial do arduíno. Resumindo, ele se prepara para receber os dados que o arduíno vai mandar para ele;
2. Linha 93. Começa a fazer comparativos, para iniciar a piscar ou não se apertar o botão;
3. Linha 114. Muda a cor dos quadrados;
4. Linha 145. Recebendo os valores e armazenando para deixar aceso o quadrado ou não do joguinho.

Código do Arduíno

int RECV_PIN = 2;
IRrecv irrecv(RECV_PIN);
decode_results results;

void setup()
{
  Serial.begin(9600);
  irrecv.enableIRIn(); // Start the receiver
}

void loop() {
  if (irrecv.decode(&results)) {
    Serial.println(results.value, DEC);
    irrecv.resume(); // Receive the next value
  }
}

Detalhes do código arduíno

1.  Linha 5. Recebe os dados do botão apertado de decodifica para computar os valores referente ao botão do controle; 
2.  Linha 12. Inicia o recebimento de dados do receptor IR;
3.  Linha 17. Decodifica para decimal o código hexadecimal formado;
4.  Linha 18. Deixa pronto para receber os próximos valores.

Uma breve conclusão do que esta acontecendo: 

    O processing ficou responsável por rodar o jogo em si, desde de criar os quadrado e acendê-los, agora o arduíno fica responsável por decodificar os códigos e mandar para o processing decodificado. 

 Um pequeno vídeo demonstração:

     Pegando uma imagem do patrick estrela em esboço para pode praticar um pouco. A que esta logo abaixo:

     Na qual iremos escolher umas das poses do patrick e ir para o photoshop escurecer a imagem, e cortar com  deixando apenas a desejada. Como na imagem abaixo:

       Com essa imagem vetorizei no illustrator e peguei o vetor e pus novamente no photoshop, para finalizar a imagem.

        No caso a imagem ficou da seguinte maneira na ordem:

    Esse sprite surgirá de um pequeno vídeo infantil da galinha pintadinha, a dos elefantinhos. Caso não conheça o video assista no link "Galinha pintadinha"
     usei o 5º elefante e não fiz o desenho dele detalhado, apenas representei seu movimento principal em 8 sprites. Ficou assim, como mostra a figura abaixo:

      Para esse resultado usei o flash combinado com o photoshop.

    Vamos agora fazer uma reconstrução de imagem e colorir depois. Para isso vamos pegar uma imagem qualquer da internet para poder brincar.

    Bem eu peguei essa:

     Começando a tratar a imagem, algo bastante trabalhoso, que requer bastante atenção, e nessa imagem necessita bastante para o nariz.

       Depois de restaurar ela fica mais ou menos assim:

    

      Apos a restauração é hora para pintar a imagem, pintamos parte a parte. Existem vários métodos, porem eu preferi usar o "hue/saturation" para pintar. E ficou assim:

     Também chamada de Paralax é uma técnica muito usada em comerciais de televisão. A técnica consiste de vários modos, mas o paralax é feito de um modo bem simples, e vamos usar o modo de diminuir e aumentar a imagem, e também de mudar o posicionamento.
      Para isso vamos pegar duas imagens de ótima qualidade para poder distorcer sem perder qualidade gráfica. Procure uma para background, e outra para ser alguem ou algo que vai ficar no cenário mas mudando separado dele.
      Depois de pegue a imagem, abra o flash, e importe as imagens, depois de importadas no cenário tranforme-as em simbolos do tipo "movieclip" e faça as alterações que deseja. Após as alterações iniciais, mude para algum frame distante qualquer faça-o ter um "keyframe" mude novamente como deseja, e faça o "shape tween". 

       Veja como o meu ficou:

   Comece procurando uma imagem de plantações (folhas em geral) como essa por exemplo:

Com essa imagem você vai fazer um contorno de uma folha usando a caneta, e transforma em brush, mais ou menos assim:

    Com a mesma imagem de plantação você cria um texto e mescla o texto com a imagem deixando o texto como mascara da imagem.

     Depois altere as caracteristicas do brush para ficar aleatorio entre outras coisas ao seu desejo, e pinte nas bordas do texto que deseja (meu caso foi o nome Green). Após tudo isso coloque sombra para dar realismo na imagem, e tbm coloque alguns animais para deixar algo mais belo de se ver, mas tome cuidado com o que e quantos colocar para não deixar uma coisa forçada e poluido de enxergar (eu coloquei uma joaninha e uma flor).

     O resultado final foi esse logo abaixo: 

Green PACCE®

   Vetorizaremos novamente com o flash, mas dessa vez pegaremos uma imagem finalizada e dessa vez será o personagem de um desenho famoso (que eu não conheço, não assisto esse desenho) o Gir na sua roupa de cão e vamos pegar a imagem perdida pela internet, uma qualquer dele 

     Para tal fim vamos abrir o flash e importar a imagem acima e começar a fazer caminhos com a caneta por cima contornando. Separe as partes por camadas mais ou menos assim:

e depois de fazer pedaço a pedaço, vai ser a hora de colorir o boneco feito

ficando a copia dessa maneira:

Não esqueça de fazer a sombra dele, para dar um realismo maior.

  Bem vamos hoje vetorizar um carrinho antigo que eu possuo apenas o "concept art" dele.

Que no caso é essa belezura aí em cima

   Essa minha vetorização vai ser um pouco diferente pois eu usarei o flash para vetorizar. No caso é bem pratico, mas não é o convencional para se vetorizar.

    

    Para tal fim é bom criar no minimo 3 camadas para na hora que estiver desenhando os caminhos(paths) não se unam, ficando mais ou menos assim.

Depois de tudo o desenho final o carro ficará assim.

Que tal dar umas voltinhas nele agora.