Wednesday, 22 May 2013

Map particles to letters in AS3

I saw a banner advert on a website where the particles formed different letters and shapes then dispersed to create new letters and shapes. The particle letters were made from circles evenly spaced apart to form the outline of the letters.

I will attempt to recreate this effect in two sections. The first section will create a single word and the second section will create a library of letters which can be used to form multiple words.

The process of mapping particles to letters starts with drawing the text on the stage to be mapped. The coordinates of the particles are stored using the Bitmapdata class to work out the width and height spacing of the letters. Once the coordinate data has been stored the particles can be generated and animated.


Single Word

Step 1 – Draw letters on stage

Create a new AS3 file and save it with the name: MapParticles. Select the Text tool with static text, black colour and type your message on the stage. Convert the text into a movie clip (F8) ensuring the top left registration point is selected and the instance name is: letters. Also make sure the movie clip is positioned at (0, 0) coordinates on the stage. Open new AS3 file and save it with the name: MapParticles and add the following setup code.

package 
{
 import flash.display.BitmapData;
 import flash.display.Sprite;
 import flash.display.MovieClip;
 import com.greensock.TweenMax;
 import com.greensock.easing.*;
 
 public class MapParticles extends MovieClip 
 {
  private var positions:Array = [];
  private var SPACING_Y:uint = 5; 
  private var SPACING_X:uint = 5;
  
  private var circlesArray:Array = [];
  private var circleRadius:uint = 3;

private var container:Sprite;

  
  public function MapParticles()
  {

  }
  
  private function shuffle(arr:Array):void 
  {
   var l:int=arr.length;
   var i:int=0;
   var rand:int;
   for(; i < l; i++)
   {
    var tmp:* =arr[int(i)];
    rand=int(Math.random()*l);
    arr[int(i)]=arr[rand];
    arr[int(rand)]=tmp;
   }
  }
  
 }
}


Step 2 – Store letter coordinate

In the constructor add the following code below. This will create a Bitmapdata of the movie clip and adds the x and y positions of the black pixels with a 5 pixel vertical and horizontal spacing. The shuffle function will randomise the positions array and the generateParticles() will creates the particles which will be written in the next step.

//hides the letters movie clip
letters.visible = false;

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

//bitmapdata of letters
var bmd:BitmapData = new BitmapData(letters.width, letters.height, false, 0xffffff);
bmd.draw(letters);

//total rows and total columns 
var rows:int = letters.height / SPACING_Y;
var cols:int = letters.width / SPACING_X;

//add the x and y pixels values to array with a spacing of 5 pixels
for(var i:int = 0; i < cols; i++){
 for(var j:int = 0; j < rows; j++){
  
  var pixelValue:uint = bmd.getPixel(j * SPACING_X, i * SPACING_Y);

  if(pixelValue.toString(16) != 'ffffff' && pixelValue.toString(16) != '0'){
   positions.push({xpos:j * SPACING_X, ypos:i * SPACING_Y });
  }
 }
} 

//randomise positions arrau
shuffle(positions);

//generate particles
generateParticles();


Step 3 – Generate particles

Once the x and y particle positions have been stored, the particles can be generated. I have used the Graphics API to draw circles with random colours and the radius at 3 pixels. The x and y positions of the particles are set by the positions array.

private function generateParticles():void
{
 for(var i:int = 0; i < positions.length; ii++)
 {
  var circle = new Sprite()
  circle.graphics.beginFill(Math.random() * 0xffffff);
  circle.graphics.drawCircle(0, 0, circleRadius);
  circle.graphics.endFill();
  container.addChild(circle);
  circle.x = Math.random() * stage.stageWidth;
  circle.y = Math.random() * stage.stageHeight;
  circle.alpha = 0; 
  circlesArray.push(circle);
 }
}


Step 4 – Animate particles

The particles have been created and are now ready to be animated. I have used the greensock TweenMax class to animate the particles. The particles are animated and dispersed using the animateParticles() and disperseParticles() function.

private function animateParticles():void
{
 for(var i:int = 0; i < circlesArray.length; i++)
 {
  TweenMax.to(circlesArray[i],1, {
      x:positions[i].xpos,
      y:positions[i].ypos,
      alpha: 1,
      delay:i * 0.01,
      ease:Back.easeOut,
      easeParams:[3]});
 }
}

private function disperseParticles():void
{
 for(var i:int = 0; i < circlesArray.length; i++)
 {
  TweenMax.to(circlesArray[i], 1, {
    x: Math.random() * stage.stageWidth,
    y: rath.random() * stage.stageHeight,
    alpha: 0,
    delay:i * 0.01,
    ease:Back.easeIn,
    easeParams:[1]});
 }
}


4 comments:

Russell Bartnick 20 November 2013 at 17:31  

Love this tutorial but unfortunately I'm new to ac3 and after following the directions i can't seem to get this to work. is the first code part of the package(class) or do all of these codes go into the same .as file and how to get this into flash
"import MapParticles."?
Sorry for the dumb questions but I would love to get to know who to do this stuff.
thanks

iliketo 21 November 2013 at 12:48  

@Russell,

Sorry to be blunt, but if you don't know how to use Class files. Then this tutorial is probably too advanced for you at this stage.

Hima Wari 25 May 2014 at 13:58  

hi :)
I am using flash cs6.
i've already retype the code but nothing happened.
I download greensock tweenmax and the others here is it wrong?
http://www.greensock.com/v12/

if it's wrong please give mw the correct link.

if I right to download the files there, what should I do ??

thank you

iliketo 28 May 2014 at 13:13  

@Hima,

Be sure you have completed step 4.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP