Saturday, September 19, 2009

Imitate the Flash CS4 Color Palette in Actionscript 3








Open your .fla file and hit Ctrl+J to bring up the Document Properties window. Change the height and width to 400 and 240 pixels respectively and the Background color to 0x000000(Black)
Select the first frame and Hit F9 to bring up the Actions window. Copy and Paste the following code

/*size of each small square representing a color*/
var squareSize=13;

/*number of small squares in each side of a color set*/
var paletteSize = 6;

/*parent sprite container*/
var palette:Sprite = new Sprite();
palette.x = 10;
palette.y = 45
addChild(palette);

/*the square whose color is to be changed*/
var colorSampler:Sprite = new Sprite();
colorSampler.graphics.beginFill(0xFFFFFF);
colorSampler.graphics.drawRect(280,80,100,100);
colorSampler.graphics.endFill();
addChild(colorSampler);

/*create the palette*/
for(var k=0;k<paletteSize;k++)
{
for(var i=0;i
<paletteSize;i++)
{
for(var j=0;j
<paletteSize;j++)
{
var square:Sprite = new Sprite();
square.graphics.beginFill(0xFFFFFF);
square.graphics.drawRect(0,0,squareSize,squareSize);
square.graphics.endFill();
square.x = (squareSize+1)*paletteSize*(k%3)+i*(squareSize+1);
square.y = (squareSize+1)*paletteSize*(Math.floor(k/3))+j*(squareSize+1);
/*add a gradual color to each small square.
By this distribution, the palette will have 6
color sets each made up of 6x6 small
squares. In all of these color sets there will
be an increasing amount of the GREEN mask along
the horizontal direction, and the BLUE mask along
the vertical direction. The red mask is distributed
over these 6 sets.
*/

var color:ColorTransform = new ColorTransform();
color.greenMultiplier = i/(paletteSize-1);
color.blueMultiplier = j/(paletteSize-1);
color.redMultiplier = k/(paletteSize-1);
square.transform.colorTransform=color;

palette.addChild(square);

/*listen for a click on the small square*/
square.addEventListener(MouseEvent.CLICK,clickHandler);
}
}
}


/*change the color of the square*/
function clickHandler(e:MouseEvent) {

/*the color masks are actually found by processing
the position of the clicked small square*/

var X=e.currentTarget.x;
var Y=e.currentTarget.y;
X=X/(squareSize+1);
Y=Y/(squareSize+1);
var Z=Math.floor(X/paletteSize)+Math.floor(Y/paletteSize)*3;
X=X-Math.floor(X/paletteSize)*paletteSize;
Y=Y-Math.floor(Y/paletteSize)*paletteSize;

/*apply the new color*/
var color:ColorTransform = new ColorTransform();
color.greenMultiplier =X/(paletteSize-1);
color.blueMultiplier =Y/(paletteSize-1);
color.redMultiplier = Z/(paletteSize-1);
colorSampler.transform.colorTransform=color;
}

Thats it!! Hit Ctrl+Enter to Test your movie.
Change the code to make the palette more detailed and sensitive.
Just like the color palette in Flash CS4, you can add a slider that darkens any given color. This can be achieved by gradually decreasing all the color masks simutaneously.

Wednesday, September 16, 2009

Create a very Realistic, custom Class, Dynamic Smoke Effect in Actionscript 3












In the root directory of the .fla file create a new folder and name it script. Now open your favourite text editor and copy and paste the following code

/*
*The smoke effect is achieved by creating small circles
*They are continuously moved upwards
*A BlurFilter is applied to make them look realistic
*As they float above their dimensions are increased and the alpha reduced
*Actually only 40 particles are present and they are continuosly
recycled to prevent the main memory occupied by the .swf file
from increasing.
*/


package script{

import flash.display.Sprite;
import flash.display.Shape;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.filters.BlurFilter;
import flash.utils.Timer;


public class Smoke extends Sprite
{
/*this will be the parent container*/
private var smoke_mc:MovieClip = new MovieClip();

/*color of the smoke*/
private var color:uint;

/*radius of each smoke particle*/
private var partRadius:Number = 1;

/*BlurFilter for the smoke particles*/
private var blur:BlurFilter = new BlurFilter(8,8,2);

/*timer to attach smoke particles*/
private var timer:Timer = new Timer(100);


/*
the constructor takes 3 parameters-
X and Y coordinates of the point of origination
and the color of the smoke
*/

public function Smoke(xc:Number,yc:Number,col:uint)
{
/*attach the parent movieClip*/
smoke_mc.x=xc;
smoke_mc.y=yc;
addChild(smoke_mc);

/*assign the color*/
color=col;

/*start the timer*/
timer.start();

/*listener for the timer. the function startSmoke
is called every 100 miliseconds*/

timer.addEventListener(TimerEvent.TIMER,startSmoke);
}

/*attaches one smoke particle to the stage*/
private function startSmoke(e:TimerEvent)
{
/*if 40 particles has been attached
stop attaching any more */

if(smoke_mc.numChildren>40)
{
/*stop the timer*/
timer.stop();

/*remove the timer listener*/
timer.removeEventListener(TimerEvent.TIMER,startSmoke);
}

/*atach a particle to the parent movieclip*/
smoke_mc.addChild(smokeParticle());
}


/*Create and return a fully formed smoke particle*/
private function smokeParticle():Sprite
{
var smokePart:Sprite = new Sprite();

smokePart.graphics.beginFill(color);

/*create the particle at a random point
between +2 and -2 pixels from the given
X coordinate*/

var randX = -2+Math.random()*4;
smokePart.graphics.drawCircle(randX,0,partRadius);

smokePart.graphics.endFill();

/*blur the particle*/
smokePart.filters=[blur];

/*add more randomness to the X coordinate*/
var randDist = -10+Math.random()*20;
smokePart.x+=randDist;

/*move the particles*/
smokePart.addEventListener(Event.ENTER_FRAME,moveUp);

return smokePart;
}


/*
move and resize the particles
change the values to see their
effects on the smoke
*/

private function moveUp(e:Event)
{
/*if the particle is visible*/
if(e.currentTarget.alpha>0)
{
/*move it upwards*/
e.currentTarget.y-=1;

/*increase the width*/
e.currentTarget.width+=0.5;

/*incraese the height at a lesser rate*/
e.currentTarget.height+=0.3;

/*reduce the alpha*/
e.currentTarget.alpha-=.004;
}
/*if the particle is not visible
restore Y to 0 ,X to a random
value, width and height to the
original radius and the alpha to 1*/

else
{
e.currentTarget.y=0;

var randDist = -5+Math.random()*10;
e.currentTarget.x+=randDist;

e.currentTarget.width=partRadius;

e.currentTarget.height=partRadius;

e.currentTarget.alpha=1;
}
}
}
}

This will be your custom class. Save this file in the folder named "script", with the name "Smoke.as". Now open

your .fla file and hit Ctrl+J to bring up the Document Properties window and set the Width and Height to 200

and 300 and the Background Color to 0x000000 (Black).
Click on Ok and then select the first frame of the layer and hit F9. In the Actions window that pops up, Copy

the following lines of code

/*import the custom class*/
import script.Smoke;

/*call the constructor to create a new instance of the Smoke class
change the X and Y coordinates and the Color of the smoke here.
*/

var smoke:Smoke=new Smoke(100,150,0xBBBBBB);

/*add the instance to the stage*/
addChild(smoke);

Thats it. Hit Ctrl+Enter to test your movie.
**
Add Objects to your movie and create multiple instances with different colors for a more complicated effect

Download the source files here