Sunday, January 23, 2011

Pixelated Picture

Today I will be sharing how to have a pixelated effect
with photos using Flash and calling it
with xml.

Step 1

a. Open flash and create new file.

b. create 2 new layers.

name top layer "action" and f9 to
open the actions panel
and input the following meat!

import fl.transitions.*;
import fl.transitions.easing.*;
import fl.transitions.TransitionManager;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.utils.Timer;

var count:Number = 0;
var tween_duration = 1;
var myTween:Tween;
var imgGroup:MovieClip = new MovieClip();
loading.visible = false;
var total:Number = 0;
var pic:Number = 0;
var i:int;
var imgArray:Array = new Array();
var current_no:Number = 0;
var previous_no:Number = 0;
var imgLoader:Loader;
var delay:Number = 5; //this changes image delay.
var timer:Timer;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var xmlPath:String = "xml/images.xml";

xmlLoader.load(new URLRequest(xmlPath));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
xml = new XML(;
xmlList = xml.children();
total = xmlList.length();

for(i = 0; i < total; i++)
image: xmlList[i].image.toString()



timer = new Timer( 5 * 1000);
timer.addEventListener(TimerEvent.TIMER, autoSlide);


function loadImage():void
for(i = 0; i < total; i++)
imgLoader = new Loader();
imgLoader.load(new URLRequest(xmlList[i].image));
imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingP);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);



function imageLoaded(event:Event):void

var imgBm:Bitmap = new Bitmap();
var mc:MovieClip = new MovieClip();
imgBm = Bitmap(;
imgBm.smoothing = true;
mc.addChild(imgBm); = "img_" + imgGroup.numChildren;
//trace(" "
mc.x = 0;
mc.y = 0;
if(imgGroup.numChildren > 0)
mc.alpha = 0;
loading.visible = false;
count = count + 1;
if(count == total)
//trace("i am working")


function loadingP(event:ProgressEvent):void
loading.visible = true;
var percent:Number = Math.round(event.bytesLoaded / event.bytesTotal * 100);
loading.loadText.text = percent + "%";
function autoSlide(event:TimerEvent):void
if(current_no >= total)
current_no = 0;
function effect():void

var prevMc:Object;
prevMc = imgGroup.getChildAt(previous_no);
var myTM:TransitionManager = new TransitionManager(prevMc as MovieClip);
myTM.startTransition({type:PixelDissolve, direction:Transition.OUT, duration:1, easing:None.easeOut, xSections:200, ySections:200});

myTween = new Tween(prevMc,"alpha",Regular.easeIn,1,0,1,true);

var nextMc:Object;
nextMc = imgGroup.getChildAt(current_no);
myTween = new Tween(nextMc,"alpha",Regular.easeIn,0,1,1,true);

previous_no = current_no;


Step 2

a. creat from rectangle tool a simple
black vertical bar and f8 it! converts to a movieClip.

b. double click the new movie click and add

c. 6 new layers and name the top one
script and a label at key 20 and name
it loop and at key 40 open up the actions panel
and add the following script..


d. Then on the rest of the layers on a sequence
of 3,5,7 key timelines and "eco1" bar movieClip
that you need to make from steo "a". and give it
motion tweens and 1, 10 and 20 keyframes.

on frame 10 use transform tool and squeeze the bar
down to 2 pixels and open the color panel
and bring the alpha level down to 0%. keep
keyframe 20 the same as on. this will give it the
fade on transitioning.

e. ok then back to scene one with layer 1 with
the "eco_stage1" MC in it, double click on the
MC and add the loading text "100%" give it an
instance name of "loadText" and use Dynamic
Text option on the pull down menu.

f. whallaa! publish this baby to the same folder
with "img" folder and xml markup.

Now onward to the XML!

Open Dream Weaver and create a new xml document and add the following code and save as "images.xml"

click to enlarge

That's it!

View this in action at

Sunday, January 16, 2011

Visit for further information.

Saturday, January 15, 2011

Smoke and Flames with actionScript 3.0

Ahhh, Quest for fire! Good song by the way..

Smoke/Flames Script using AS 3.0. It uses a mixture of .png's as well as Flash's (CS) blending modes to create a realistic fire effect similarly found in popular FX programs like Particle Illusion. All this creates flames that not only look real and respond to mouse movements, but is also completely random in form.

I used different brush effect within PS to create .png's to import to Flash.

The script is very adaptable and greatly commented. For the adventurous, one could create other fun and realistic elements from this script.

Enjoy! ~kb

On Scene 1 add an actions layer and add the following meat!

F9 >AS 3.0

// an array in which to store our particles
var particles:Array = new Array();

// add a blur filter to our stage
filters = [new BlurFilter(0,0,0)];

// call frameLoop every frame
addEventListener(Event.ENTER_FRAME, frameLoop);

function frameLoop(e:Event)
var particle:Particle;

// loop through the array of particles and update each one
for(var i : int = 0; i < particle =" new" yvel =" 0;" drag =" 1;" gravity =" randRange(-0.5,-0.4);" scalex =" particle.clip.scaleY" shrink =" +1;" fade =" 0.015;" alpha =" randRange(0.4,0.6);">40)
particle = particles.shift();



// returns a random value between min and max
function randRange(min:Number, max:Number)
return Math.random()*(max-min)+min;

Then set up your movieClips imported by PS png's

Then on set a scene up for the smoke/spark/flame movieClips added on separate layers, then add an actions layer and add the following code.

sparks.x *= Math.random()+0,-5;
smoke.x = smoke.y = Math.random()*-8,+8;
flame.x = flame.y = Math.random()*-4,+4;

smoke.scaleX = smoke.scaleY = Math.random()+0.2, +0.1;
flame.scaleX = flame.scaleY = Math.random()+0.6, +0.65;
sparks.scaleX = sparks.scaleY = Math.random()-0.001, +0.001;

sparks.rotation *= Math.random()+0,+5;
flame.rotation *= Math.random()+0,+5;
smoke.rotation *= Math.random()+0,+90;

That's it!! Publish this baby and let some magic roll!

see the file in action at

stay tuned for more!

Tuesday, January 4, 2011

Blog Archive