Tuesday, 2 April 2013

Pixel text effect in Actionscript 3

In this post I will create a pixel text effect in Actionscript 3. I will use the Bitmapdata class to get the pixel data from the text, then store the individual x, y and alpha properties of the pixels in an Array. Lastly, I will use the Greensock TweenNano class to animate the pixels back into position.

Step 1

Open a new AS3 file and save it with the name: Pixel text effect. Select the Text tool (T) and type a message on the stage. Convert the text into a movie clip (F8) and give it the instance name: letters with the top left registration point selected. Make sure the movie clip is positioned at (0,0) coordinates on the stage.

Step 2

Insert a new layer on timeline with the name: Actions. Then open up the Actions panel and enter the following code.

import com.greensock.TweenNano;
import com.greensock.easing.*

var positions:Array = [];
var particles:Array = [];

//hide movie clip
letters.visible = false;

//particle container
var container:Sprite = new Sprite();
addChild(container);

//bitmapdata of letters 
var rect:Rectangle = letters.getRect( this );
var bmd:BitmapData = new BitmapData(rect.right, rect.bottom, true, 0);
bmd.draw(letters);

//add pixels values to array
for(var i:uint = rect.left; i < rect.right; i++){
 for(var j:uint = rect.top; j < rect.bottom; j++){
  
  var pixelValue:uint = bmd.getPixel32(i,j);
  var alphaValue:uint = pixelValue  >> 24 & 0xFF;
  
  if(pixelValue !=0){
   positions.push({xpos:i, ypos: j, alpha: (alphaValue/255)*1});
  }
 }
}

//position pixel values
for(var k:uint=0; k< positions.length; k++)
{
 var s:Sprite = new Sprite();
 s.graphics.beginFill(0x000000, positions[k].alpha);
 s.graphics.drawRect(0,0, 1, 1);
 s.graphics.endFill();
 s.alpha = 0;
 s.x = Math.random() * stage.stageWidth;
 s.y = Math.random() * stage.stageHeight; 
 particles.push(s);    
 container.addChild(s);
}

//animate pixels
function animInPixels():void
{
 for(var i:int=0;i < particles.length; i++) 
 {
  TweenNano.to(particles[i], 2 ,{ 
     alpha:1, 
     x:positions[i].xpos, 
     y:positions[i].ypos, 
     delay: i / 500,
     ease:Strong.easeOut
     });
 }   
}



I have currently set the pixels to be randomly placed on the stage. By changing the x, y, time and delay properties different animation effects can be created. It is also possible to a dispersion pixel effect by reversing the pixel animation. I have used the following code.
function animOutPixels():void
{
 for(var i:int = 0; i < particles.length; i++) 
 {
  TweenNano.to(particles[i], 1 ,{ 
     alpha:0, 
     x:0, 
     y:Math.random() * stage.stageHeight, 
     delay: i / 500,
     onComplete:removePixels,
     ease:Strong.easeIn
     });
 } 
 
}

var count:uint = 0;

function removePixels():void
{
 count++;

 if(count == particles.length)
 {
  count = 0;
  
  for(var i:int = particles.length-1; i>=0; i--) 
  {
   container.removeChild( particles[i] );
   particles.splice(i,1);
  }
 }
}

7 comments:

Shabnum Amin Khan 24 June 2013 at 00:22  

Excellent tutorial.

Rosa 19 August 2013 at 10:33  

I will use the Greensock TweenNano class to animate the pixels back into position.

Please help!
Where can I download Greensock TweenNano?
How can I add?
Using Flash Professional CS 5.5

iliketo 19 August 2013 at 13:59  

@Rosa,

greensock.com

Zetta 24 August 2013 at 03:11  

I want ask about value of pixelValue.
why I get 0 when I trace it bmd.getPixel32(i,j)?
How to solve it?

iliketo 26 August 2013 at 02:44  

@Zetta,

Firstly, you have to understand that the getPixel32() returns a ARGB pixel value from the x an y position. If a '0' is returned it means it is a white pixel. I assume you have a trace statement before the code shown below.

if(pixelValue !=0){
positions.push({xpos:i, ypos: j, alpha: (alphaValue/255)*1});
}

Yoseph 30 December 2013 at 08:38  

Hello,

How can i change the position of the text from the left top corner os the stage?

bst grds, josé

iliketo 2 January 2014 at 04:27  

@Yoseph,

The contents of the pixel text effect are added inside the container sprite. You can move the container sprite.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP