Welcome to wonderful world of Flash ActionScript

Create a Dynamic and Interactive Message Board in ActionScript 3

2009-10-26T09:33:00.000+05:30

This tutorial is on a project made by my friend Peter Blaho(warloxk@gmail.com)
The message board will be dyanmic in the sense that it will load the text from an external XML file.
To start hit Ctrl+J to bring up the Document properties window. Set the width to 400 pixels and the heigh to 60. Set any background color.It won't be visible
Draw a 400x60 Rectangle with the color #F4EED4. Align its centre so that it completely covers the stage.
Create a new layer and name it Actions.

Now Hit Ctrl+F8 to bring up the New Symbol window. Set its name to trigger_left and select Export For Actionsript.Go to the Color Window and set the type to Linear.Set the color of the left end color marker to #F4EED4 and alpha to 100%. Set the right one to #F4EED4 and this time the alpha to 0%.

Draw a 60x60 square and go to the Align panel to align the left edge. It should look like this

Now repeat the same process but instead of the left orientaion, it should be right. Set the name as trigger_right. This should look like this

Open the New Symbol window again and set the name to trigger_bottom. Remember to select Export For Actionscript. Draw a 300x60 rectangle of any color. Align its centre and set its alpha to 0.

Now select the first frame of the Actions Layer and copy and paste the following code

//////////////////////////////////////////////
// FlashVars
var flash_vars:Array = new Array();

var keyStr:String;
var valueStr:String;
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (keyStr in paramObj) {
    valueStr = String(paramObj[keyStr]);
    flash_vars[keyStr] = valueStr;
}
//////////////////////////////////////////////

var text_array:Array = new Array();
var curr_text_id:int = 0;
var text_speed:int = 2;
var text_speed_s:int = text_speed;
var margin:int = 10;

////////////////////////////////////////////////
var myTextField:TextField = new TextField();
addChild(myTextField);
var myFormat:TextFormat = new TextFormat();

var trigger_left_t:trigger_left = new trigger_left;
trigger_left_t.x = 0;
trigger_left_t.y = 30;
addChild(trigger_left_t);

var trigger_bottom_t:trigger_bottom = new trigger_bottom;
trigger_bottom_t.x = 200;
trigger_bottom_t.y = 30;
addChild(trigger_bottom_t);

var trigger_right_t:trigger_right = new trigger_right;
trigger_right_t.x = 400;
trigger_right_t.y = 30;
addChild(trigger_right_t);
////////////////////////////////////////////////

////////////////////////////////////////////////
// load xml
var xml_loader:URLLoader; //the xml loader
flash_vars['xml_path'] = 'message.xml';
//loadXML(flash_vars['xml_path'] + "?ticker=" + Math.random() * 1.000000E+010); //load the xml
loadXML(flash_vars['xml_path']); //load the xml

function loadXML(Uri:String):void {
    xml_loader = new URLLoader();
    xml_loader.addEventListener(Event.COMPLETE, on_complete);
    xml_loader.addEventListener(IOErrorEvent.IO_ERROR, on_error);
    xml_loader.load(new URLRequest(Uri));
}
////////////////////////////////////////////////

function on_error(evt:ErrorEvent):void {
    trace("cannot load xml file");
}

function on_complete(evt:Event):void {
    text_array = get_xml_data(xml_loader.data.toString());
    myTextField.htmlText = text_array[curr_text_id].msg;
    myTextField.width = 0;
    myTextField.x = 400 + margin;
    myTextField.y = 16;
    myTextField.selectable = false;
    myTextField.autoSize = TextFieldAutoSize.LEFT;

    myFormat.color = 0x000000;
    myFormat.size = 24;
    myTextField.setTextFormat(myFormat);
}

function get_xml_data(XMLData:String):Array {

    var menuXML:XML = new XML(XMLData);
    //just in case
    menuXML.ignoreWhitespace = true;

    //get XML item's entrys
    var XMLItems = menuXML.descendants("core");

    //load all items into an array
    var itemsArray:Array = new Array();
    var itemObj:Object;
    for(var i in XMLItems) {
        itemObj=new Object();
        itemObj.msg = str_replace('[', '<', str_replace(']', '>', XMLItems[i].@msg));
        itemObj.msg_link = XMLItems[i].@msg_link;
        itemsArray.push(itemObj);
    }
    return itemsArray;
}

function main_function(event:Event) {
    var max:int = myTextField.width;

    if (myTextField.x <= ((0 - max) - margin)) {

        if ((text_array.length - 1) > curr_text_id) {
            curr_text_id++;
        }
        else {
            curr_text_id = 0;
        }

        myTextField.x = 700 + margin;
        myTextField.htmlText = text_array[curr_text_id].msg;
        myTextField.setTextFormat(myFormat);
        myTextField.autoSize = TextFieldAutoSize.LEFT;
    }

    if (myTextField.x > 710) myTextField.x = 710;
    myTextField.x -= text_speed;
}

function text_speed_up(event:MouseEvent):void {
    text_speed *= 2;
}

function text_reverse(event:MouseEvent):void {
    text_speed = 0 - text_speed;
}

function text_normal(event:MouseEvent):void {
    text_speed = text_speed_s;
}

function text_stop(event:MouseEvent):void {
    text_speed = 0;
}

function str_replace(search, replace, string):String {
    var array = string.split(search);
    return array.join(replace);
}

addEventListener(Event.ENTER_FRAME, main_function);
trigger_left_t.addEventListener(MouseEvent.MOUSE_OVER, text_reverse);
trigger_left_t.addEventListener(MouseEvent.MOUSE_OUT, text_normal);
trigger_bottom_t.addEventListener(MouseEvent.MOUSE_OVER, text_stop);
trigger_bottom_t.addEventListener(MouseEvent.MOUSE_OUT, text_normal);
trigger_right_t.addEventListener(MouseEvent.MOUSE_OVER, text_speed_up);
trigger_right_t.addEventListener(MouseEvent.MOUSE_OUT, text_normal);

Hit Ctrl+Enter to test the movie.

Download the .fla file here

Upload your files for free at www.fileden.com

Create an Advanced Explosion/Fireworks Effect

2009-09-22T19:34:00.001+05:30

I will be using a 400x400 Stage with a background color of 0x222222.
In the root directory of the .fla file create a new folder and name it script. Now open you favourite text editor and copy and paste the following code

package script
{
import flash.display.Sprite;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;

public class Spark extends Sprite
{
private var spark:Sprite = new Sprite();

/*origination coordinates of the spark*/
private var X;
private var Y;

/*the Y coordinate at which the spark will busrst*/
private var burstPoint;

/*sppeds along the X and Y axes*/
private var xSpeed;
private var ySpeed;

/*whether the spark will burst or jus fade away*/
private var willBurst;

/*the size(width) of the spark*/
private var size;

/*gravity will be acting on all sparks.*/
private var gravity = 0.15;

/*flag the spark for removal*/
private var removeSpark = false;

/*
*The Constructor takes parameters in the following order
X Coordinate,
Y Coordinate,
burstPoint,
vertical Speed,
Horizontal Speed,
willBurst,
size.

Only the first three are mandatory
*/
public function Spark(xc:Number,yc:Number,brstPnt:Number,ySd:Number=2,
xSd:Number=0,burst:Boolean=false,sz:Number=2)
{
X=xc;
Y=yc;
burstPoint=brstPnt;
ySpeed=ySd;
xSpeed=xSd;
willBurst=burst;
size=sz;

spark.x=X;
spark.y=Y;

addChild(spark);
spark.addEventListener(Event.ENTER_FRAME,moveDown);
}

private function moveDown(e:Event)
{
/*if the spark is flagged for removal*/
if(removeSpark)
{
spark.graphics.clear();
spark.removeEventListener(Event.ENTER_FRAME,moveDown);
spark=null;
return
}

/*Increment the Y axis speed to simulate gravity*/
ySpeed+=gravity;

/*Move the spark*/
spark.y+=ySpeed;
spark.x+=xSpeed;

/*
Draw the spark and simulate the trail.
If the spark will ultimately burst it
has a shorter trail. The trail also
depends on the speed of the spark;
*/
spark.graphics.clear();
if(willBurst)
{
for(var i=0;i<5;i+=1)
{
spark.graphics.lineStyle(size,0xFFFFFF,1/(i+1));
spark.graphics.moveTo(-xSpeed*i/3,-ySpeed*i/3);
spark.graphics.lineTo(-xSpeed*(i+1)/3,-ySpeed*(i+1)/3);
}
}
else
{
/*reduce the alpha*/
spark.alpha-=0.02;
if(spark.alpha<=0)
removeSpark=true;

/*
the trail length will reduce as the
alpha falls to simulate a
simutaneous fade out and slow down
effect
*/
for(i=0;i<15*spark.alpha;i+=1)
{
spark.graphics.lineStyle(size,0xFFFFFF,1/(i+1));
spark.graphics.moveTo(-xSpeed*i,-ySpeed*i);
spark.graphics.lineTo(-xSpeed*(i+1),-ySpeed*(i+1));
}
}

/*If the burst Point has been reached*/
if(spark.y<=burstPoint)
{
/*
if the spark does not have to burst
flag it for removal
*/
if(!willBurst)
removeSpark=true;
/*
the burst effect will be obtained by
creating a random number of instances
of the Spark class and sending them
in random directions;
*/
else
{ /*number of fragments will range from 20-40*/
var burstFragments = 20+Math.ceil(Math.random()*20);
for(var j=0;j<burstfragments;j++)>
{
var d:Spark =new Spark(spark.x,burstPoint,burstPoint-100,-7+Math.random()*14,-7+Math.random()*14,false,2)
addChild(d);
}
/*flag the original spark for removal*/
removeSpark=true;
}
}

}

//class ends
}
//package ends
}

This will be your custom class. Save this file in the folder named "script", with the name "Spark.as". Now open your .fla file and hit Ctrl+J to bring up the Document Properties window and set both the Width and Height to 400 and the Background Color to0x222222 (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 script.Spark;
function showSpark() {
/*random X coordinate of origin*/
var X = Math.random()*400;

/*
variable xSpeed so that sparks originating
from the left side of the stage move towards
the right and vice-versa
*/
var xSpeed = 0.05*(200-X);

/*
random burst point so that each spark
bursts at a different level
*/
var burstPoint = 50+Math.random()*100;

var d:Spark = new Spark(X,350,burstPoint,-15,xSpeed,true,3);
addChild(d);

/*add a random shade to the spark*/
var color:ColorTransform = new ColorTransform();
color.blueMultiplier = Math.random();
color.greenMultiplier = Math.random();
d.transform.colorTransform = color;

}
showSpark();

Hit Ctrl+Enter To test the movie. The code will add only one instance of the Spark class to the stage. Add your own method to add more instances

Download the orginal source code files here

You can improve the code by adding sounds to each explosions

Imitate the Flash CS4 Color Palette in Actionscript 3

2009-09-19T08:34:00.000+05:30

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.

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

2009-09-16T20:20:00.000+05:30

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

Create a 3-D Image Reflection Effect with and advanced apllication of Bitmaps

2009-09-12T12:00:00.000+05:30

This tutorial is insprired by the one i saw here but my application is actually different. I will use flters instead of masks
The 3-D effect is achieved with the application of the flash.display.BitmapData class and various Filters.

First we import an image on to the libray Through File->Import->Import to Library.. .here I am using a 200x200 album cover of Flipsyde's first album "We the People".

Now go to the library and right click on the image and select Properties. In the Linkage properties select Export For Actionscript and set the class name as pic;

Create a new movieclip to rotate your image and its reflection. Mine looks like this

Drag two instances of this on to the stage and rotate one to point to the right. give them instance names "l_mc" and "r_mc".

That done select the first frame of the Layer and copy and paste the following code

/*image dimensions*/
var imageHt=200;
var imageWd=200;

/*indicates the magnitude of rotation*/
var rot=0;

/*flags the direction of rotation*/
var goLeft:Boolean = false;
var goRight:Boolean = false;

/**load the image from the library into a bitmap data*/
var bitmap:BitmapData=new pic(imageHt,imageWd);

/*declare the container Sprites. "actual" will hold the image
"reflection" will hold the reflection and "container" will
hold these two*/
var container:Sprite = new Sprite();
var actual:Sprite = new Sprite();
var reflection:Sprite = new Sprite();

/*load the bitmap data into two bitmaps to
display the image and its reflection resp.*/
var imgage:Bitmap= new Bitmap(bitmap);
var refl:Bitmap = new Bitmap(bitmap);

/*
Filters for the reflection. the parameters are
Blur Filter - (blurX,blurY,quality).
Bevel Filter - (distance, angle, highlight color,highlight alpha,
shadow color,shadow alpha,blurX,blurY,quality,
strength,type).
notice the filter is applied just to the container bitmap,
not the bitmap data itself.
*/
var _blur:BlurFilter = new BlurFilter(3,3,1);
var _bevel:BevelFilter = new BevelFilter(50,90,0x000000,1,0x003366,.2,1,70,1,1,"inner");
refl.filters=[_blur,_bevel];

/*attach the image to the top Sprite container*/
actual.addChild(imgage);
actual.x = -imageHt/2;
actual.y = 0;
container.addChild(actual);

/*flip the reflection along the X axis and attach
the image to the top Sprite container*/
reflection.rotationX = 180;
reflection.addChild(refl);
reflection.x = -imageHt/2;
reflection.y = 2*imageWd+1;
container.addChild(reflection);

/*attach the top level container to the stage*/
container.x=175;
container.y = 40;
addChild(container);

/*this creates an improved rotational effect.
change the value of pp.fieldOfView to see
what happens*/
var pp:PerspectiveProjection=new PerspectiveProjection();
pp.fieldOfView=15;
container.transform.perspectiveProjection=pp;

/*add listeners*/
addEventListener(Event.ENTER_FRAME,rotate)
l_mc.addEventListener(MouseEvent.MOUSE_OVER,rotLeft);
r_mc.addEventListener(MouseEvent.MOUSE_OVER,rotRight);

l_mc.addEventListener(MouseEvent.MOUSE_OUT,stopLeft);
r_mc.addEventListener(MouseEvent.MOUSE_OVER,stopRight);

/*start left rotation*/
function rotLeft(e:MouseEvent)
{
goLeft=true;
}

/*start right rotation*/
function rotRight(e:MouseEvent)
{
goRight=true;
}

/*stop left rotation*/
function stopLeft(e:MouseEvent) {
goLeft=false;
}

/*stop right rotation*/
function stopRight(e:MouseEvent) {
goRight=false;
}

/*rotate by the given amount*/
function rotate(e:Event) {
container.rotationY=rot;
if(goLeft)
rot+=4;
else if(goRight)
rot-=4;
}

Hit Ctrl+Enter to test your movie. Change the background to suit your visual needs.

Download the .fla file here

Enjoy.

Create a Funky Menu

2009-09-10T21:12:00.000+05:30

We will create a nice menu with an advanced mouseOver handler for the buttons.

This tutorial is actually inspired by the pretty cool one I saw
here
But there the person used a special pre-scripted class called "TweenMax". I will try to do it with my own custom class. The animation is a little different because I haven't used the Tween Class at all.

To begin create a New Folder in your .fla root directory and name it "script". Inside it create a file with the name "menuButton.as". Copy and paste the follwing code in it. This will give you the custom class

package script{

import flash.display.Sprite;
import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.DisplayObject;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.geom.ColorTransform ;
import flash.utils.Timer;

public class menuButton extends Sprite
{
/*the parent movie clip*/
private var button:MovieClip = new MovieClip();

/*name of the button*/
private var buttonName:String;

/*X coordinate of the button*/
private var X:Number;

/*X coordinate of the button*/
private var Y:Number;

/*text field to display the name*/
private var buttonText_txt:TextField=new TextField();

/*timer to monitor the random movements*/
private var timer:Timer = new Timer(100);

/*the constructor takes 3 parameters,the button
name and the x and y coordinates */
public function menuButton(str:String, xc:Number, yc:Number)
{
buttonName=str;
X=xc;
Y=yc;
}

/*create the button*/
public function getButton()
{
/*assign x and y coordinates*/
button.x = X;
button.y = Y;

/*create the background of a 8x4 array of
small squares*/
for(var i=0;i<4;i++)
{
for(var j=0;j<8;j++)
{
var rect:Sprite = new Sprite();
rect.graphics.beginFill(0x896434);
rect.graphics.drawRect(j*9,i*9,8,8);
rect.graphics.endFill();
button.addChild(rect);
}
}

/*format in which to display the name*/
var format:TextFormat = new TextFormat();
format.font = "verdana";
format.color = 0xFFFFFF;
format.size = 18;

/*create the text field and display the
button name*/
buttonText_txt.selectable = false;
buttonText_txt.x=2;
buttonText_txt.y=5;
buttonText_txt.text = buttonName;
buttonText_txt.setTextFormat(format);
buttonText_txt.autoSize = TextFieldAutoSize.LEFT;
button.addChild(buttonText_txt);

/*attach the button to the stage*/
addChild(button);

/*create mouse listeners*/
button.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
button.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
}

private function mouseOverHandler(e:MouseEvent) {
/*start the timer to start the random
movement of the background squares*/
timer.start();
timer.addEventListener(TimerEvent.TIMER,moveRandom);

/*loop through each of the small squares
set it to a random color and an alpha of 0.6*/
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);
var color:ColorTransform = obj.transform.colorTransform;
var randx = -30+Math.random()*60;
var randy = -30+Math.random()*60;
obj.x=randx;
obj.y=randy;
color.color=0x00000;
/*multiplying by 2 gives brighter colors*/
color.redMultiplier = Math.random()*2;
color.blueMultiplier = Math.random()*2;
color.greenMultiplier = Math.random()*2;
obj.transform.colorTransform = color;
obj.alpha =0.6;
}
}

private function mouseOutHandler(e:MouseEvent) {
/*stop the timer and the random movements*/
timer.stop();

/*restore previous values of x and y coordinates
and the color*/
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);
var color:ColorTransform = obj.transform.colorTransform;
color.color=0x896434;
obj.transform.colorTransform = color;
obj.x = Math.floor((i%8)/9);
obj.y = Math.floor(Math.floor(i/8)/9);
alpha = 1;
}
}

/*move the background squares randomly*/
private function moveRandom(e:TimerEvent) {
for(var i=0;i<button.numChildren-1;i++)
{
var obj:Object = button.getChildAt(i);

/*find random values for x and y coordinates*/
var randx = -1+Math.random()*2;
var randy = -1+Math.random()*2;

/*assign the random coordinates*/
obj.x-=randx;
obj.y-=randy;
}
}

}

}

Now open your .fla file and hit Ctrl+J to bring up the Document Properties window.Change the height to 150 and the background color to 0x00000.
That done, select the first frame and hit F9. Copy and paste the following script

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

/*this array will contain the names of all the buttons you want in your menu*/
var labels:Array=["Home","Gallery","Login","Submit"];

/*display the buttons*/
for(var i=0;i<labels.length;i++)
{
var b:menuButton = new menuButton(labels[i],100*(i+1),60);
b.getButton();
addChild(b);
}

Hit Ctrl+Enter to test your movie!

Download the .fla file

Create a XML Driven, dynamic Word Jumble Puzzle

2009-09-09T17:31:00.000+05:30

We will make a game where the player has to unjumble a given jumbled word. The words will be stored in an external XML file so that words can be easily changed and/or added.

First we create the XML file. open your favourite text editor and copy in the following.

<?xml version="1.0"?>

<gamedata>

<word>raffle</word>

<word>elephant</word>

<word>diamond</word>

<word>centre</word>

<word>giraffe</word>

<word>papyrus</word>

<word>dominate</word>

<word>raccoon</word>

<word>lizard</word>

<word>monitor</word>

<word>country</word>

<word>forest</word>

<word>bottle</word>

<word>carton</word>

<word>transfer</word>

<word>calendar</word>

<word>cricket</word>

<word>football</word>

<word>spoken</word>

<word>terminate</word>

<word>trailer</word>

<word>acoustic</word>

<word>bubble</word>

<word>yellow</word>

<word>national</word>

<word>language</word>

<word>shampoo</word>

</gamedata>

Save it as words.xml and then open your new .fla file. Remeber the .swf and .xml files should be in the same directory.

Hit Ctrl+J and bring up the Document Properties window and set the hieght and width to 200 and the background color to #99CC99.

Now select the Text Tool and draw a Dynamic text field. Go to the Propertoes Window and make sure the "Show Border around Text" and "Selectable" are not selected.Go to the Propertes window and type in its instance name as "jumble_txt" Now draw an Input text field with the "Show Border around Text" selected.This time its instance name will be "input_txt".Your Stage should look like this.

With the Text tool selected, draw two Static text boxes as label for the above fields, like so

Now hit Ctrl+F8 to bring up the New Symbol Window, change the name to "checker" and click OK. Draw you own button. Mine looks like this

Similarly draw another button. Name it "next"

Now go to the main stage and drag the two buttons onto the stage.

The instance name of the "checker" button should be check_mc and the other should be "next_mc"

That done Create a new layer and name it Actions. Select the first frame and hit F9. Copy and paste the following code.

var xmlLoader:URLLoader= new URLLoader();

/*load the xml file*/
xmlLoader.load(new URLRequest("words.xml"));

/*on completion of loading invoke the "parseXML" function*/
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

var words:Array = new Array();

function parseXML(e:Event):void {
var i,j;
var menuLength;/*length of the word array*/

var XMLData:XML = new XML(xmlLoader.data);

menuLength = XMLData.word.length();

/*populate the globally defined array*/
for (i=0; i<len;i++)
words[i]=XMLData.word[i];

/*show the jumbled word*/
showWord();
}

var actualWord;/*the word being displayed in unjumbled form*/

var input;/*input typed in by the player*/

/*listen for mouse click*/
check_mc.addEventListener(MouseEvent.CLICK,checkAnswer);
next_mc.addEventListener(MouseEvent.CLICK,newWord);

/*show a jumbled word to solve*/
function showWord() {
/*choose a random index of the words array
and choose the word.Thus we choose a random
word everytime*/
var randChoice = int(Math.random()*words.length);
actualWord = words[randChoice];

/*display the jumbled word from the random array index*/
jumble_txt.text = jumbled(actualWord);
jumble_txt.autoSize = TextFieldAutoSize.LEFT;

/*show the button if hidden*/
check_mc.visible=true;
}

/*receive a string and return it after random jumbling*/
function jumbled(word:String):String {
var len=word.length;
var rand;
var c;
var wordArray:Array = new Array();
var jumbledWord:String = new String();

/*convert the string to an array to avail
better indexed access*/
for(var i=0;i<len;i++)
wordArray[i]=word.charAt(i)

/*randomise the array. The algorithm
sequentually picks a letter and swaps it
with a random letter coming after it */
for(i=0;i<len;i++)
{
rand = i+int (Math.random()*(len-i));
c=wordArray[i];
wordArray[i]=wordArray[rand];
wordArray[rand]=c;
}

/*reconvert array to string*/
for(i=0;i <len;i++)
jumbledWord+=wordArray[i];

/*return the jumbled string*/
return jumbledWord;
}

/*trim whitespaces from the given string*/
function trim(word:String):String {
/*remove from front*/
word = word.replace( /^\s*/g, "" );

/*remove from end*/
word = word.replace( /\s*$/g, "" );
return word
}

/*check the answer typed in by the player*/
function checkAnswer(e:Event) {
input=input_txt.text;

/*remove any whitespaces entered*/
input = trim(input);

/*remove anything typed in by the user*/
input_txt.text="";

/*hide the clicked button*/
check_mc.visible=false;

/*input is correct*/
if(input==actualWord)
jumble_txt.text = actualWord+" :-))";
else/*if input is wrong*/
jumble_txt.text = actualWord+" :-((";
}

/*show a new word*/
function newWord(e:MouseEvent) {
showWord();
}

Hit Ctrl+Enter to test your movie!

Create a Magnifying Glass Effect in Actionscript 3

2009-09-08T08:13:00.001+05:30

Hit Ctrl+J to bring up the Document Properties Window and set the width and the Height to 400.

1. First we will draw the magnifying glass. HitCtrl+F8 to bring up the New Symbol window and give the name as magnifier. Click OK and draw a 100x100 cirlcle with fill color #009999 and alpha 20 and the stroke color as #663300. Set the stroke thickness as 5 pixels. Make sure you centre it.

Now with The rectangle tool selected, fill color of #663300 and no stroke color draw a rectangle. This will be your glass's handle. Now select the Free Transform Tool and rotate it through 45 degrees

now attach both the figures and your magnifying glass is done.

2. Now we need the object to be magnified. Now remember we will not be actually magnifying anything. This will be an illusion. So we need the magnified object as well. I will using a 400x400 image of the album cover of Foo Fighter's "Skin and Bones".

Go to File->Import->Import to Library.. and import the image into the library. HitCtrl+F8 to bring up the New Symbol window and type in the name as magnified. Drag the album cover from the library and centre it.
Create a new symbol again and this time the name is original. Drag the image from the library as before but this time go to the properties panel and set the width and height to 150. centre this too.

3 Now for the mask. HitCtrl+F8 again give the name as mask and draw a 100x100 circle of any color,it doesn't matter anyway.

4. In the main stage create 4 additional layers and rename them , from top to bottom, Actions, Magnifier, Mask, Magnified, Original respectively.

Except the Actions Layer you have to select the first frame and drag the respective object from the library and give the instance name as:-

Layer__________Object__________ Instance Name
=====________======_________ =============
Magnnifier____ magnifier ____m_mc
Mask________ mask________ mask_mc
Magnified ____ magnified ____ mag_mc
Original_____ original_______ ori_mc

Hit Ctrl+A to select all the symbols and go to the Align Panel and centre them. Now Right-Click on the mask layer and select "Mask" from the menu.

Your Stage should now look like this

5.Now select the first frame of the Actions Layer and Hit F9 to bring up the actions Layer. Copy and paste the following code

/*add a listener*/
addEventListener(Event.ENTER_FRAME,glassMove);

/*For a proper effect the magnified image must move
so as to give a believable illusion. These variables
will hold the amount to be moved along each axis*/
var moveX,moveY;

/*hide the mouse*/
Mouse.hide();

function glassMove(e:Event) {

/*make the magnifying glass and the mask move along
with the mouse*/
glass_mc.x=m_mc.x=mouseX;
glass_mc.y=m_mc.y=mouseY;

/*calculate the amount by which the magnified image has to move*/
moveX = ( ((mag_mc.width-ori_mc.width)/2) * (glass_mc.x-ori_mc.x) )/(ori_mc.width/2);
moveY = ( ((mag_mc.height-ori_mc.height)/2) * (glass_mc.y-ori_mc.x) )/(ori_mc.height/2);

/*move the magnified image by the calculated amount
(200,200) is the centre of the stage hence the centre of mag_mc and ori_mc*/
mag_mc.x=200-moveX;
mag_mc.y=200-moveY;

/*restrict the movement so that both the magnified image
and the diminished image appear at the same time when
magnifying along the edges.If the top left corner of the
two images coincide then the centre of mag_mc will be(375,375).
If the top left corner of the two images coincide then
the centre of mag_mc will be(75,75)*/
if(mag_mc.x<75)
mag_mc.x=75;
if(mag_mc.x>325)
mag_mc.x=325;
if(mag_mc.y<75)
mag_mc.y=75;
if(mag_mc.y>325)
mag_mc.y=325;}

Hit Ctrl+Enter to test your movie!!

Pasre through the ID3 tags of an MP3 file with Actionscript 3

2009-09-04T11:08:00.000+05:30

ID3 tags are the metadata attached to the mp3 files by the encoder. This contains information like the
#Song Name
#Artist
#Album
#Year
#Genre
#Comment
#Track Number.

This is how you access these data in flash:-
Hit Ctrl+j and bring up the Document Properties window and set both the width and height to 300 pixels. Select the first frame of the layer and hit F9 to bring up the Actions window. Copy and Paste the following code

/*Load the sound and play it though playing is not necessary for
viewing the ID3 tags*/
var mySound:Sound = new Sound(new URLRequest("myMusic.mp3"));
mySound.play();

/*Define a text field to view the tags*/
var id3Text:TextField = new TextField();
id3Text.x=50;
id3Text.y=50;
id3Text.autoSize = TextFieldAutoSize.LEFT;/*Resize keeping the upper left corner fixed*/
addChild(id3Text);

/*Display tags on completion of loading*/
mySound.addEventListener(Event.COMPLETE,onId3);

/*display the id3 tags*/
function onId3(e:Event) {
id3Text.appendText("Song : "+ mySound.id3.songName + "\n");
id3Text.appendText("Artist : "+ mySound.id3.artist + "\n");
id3Text.appendText("Album : "+ mySound.id3.album + "\n");
id3Text.appendText("Track No. : "+ mySound.id3.track + "\n");
id3Text.appendText("Year : "+ mySound.id3.year + "\n");
id3Text.appendText("Comment : "+ mySound.id3.comment + "\n");
}

Hit Ctrl+Enter to test your movie. Your tags should appear like this

Create a Dynamic Music Visualisation for your MP3 player with Actionscript 3

2009-09-04T10:53:00.000+05:30

We will create a dynamic visualisation which responds to the beats of the music being played with the SoundMixer.computeSpectrum() method;

First hit Ctrl+J and bring up the Document Properties window and set the width and height to 400 and 200 pixels respectively.
Now hit Ctrl+F8 to bring up the New Symbol window and type in the name as play_mc and click OK. Draw a small rectangle and centre it using the Align Window. Now Select the Text Tool , and go to the Properties Panel and select the text type to Static Text. Now create a label fo your button. Mine looks like this

Now go to the Main Stage ang Drag the play_mc button on Stage from the library. Go to the Properties Panel and type in the instance name as play_mc.
Create a new Layer, name it actions, select the first frame and hit F9 to bring up the Actions Window. Copy and Paste the foll0wing code

var bytes:ByteArray = new ByteArray();

/*this varible defines the size of the visualisation*/
var amplify=40;

/*load the mp3 file*/
var mySound:Sound = new Sound(new URLRequest("myMusic.mp3"));

/*listen for the click on the play button,then play*/
play_mc.addEventListener(MouseEvent.CLICK,playMusic);

/*play the music*/
function playMusic(e:MouseEvent) {
mySound.play();
}

addEventListener(Event.ENTER_FRAME,displaySpectrum);

/*display the visualisation*/
function displaySpectrum(evt:Event):void {
SoundMixer.computeSpectrum(bytes, false, 0);
graphics.clear();

for (var i:int = 0; i <>
graphics.lineStyle(.5,0x00FF66, 1);
var val:Number = bytes.readFloat() * amplify;
for (i = 0; i <>
val = bytes.readFloat() * amplify;

/*first spectrum. Unequal Values of the X coordinate
in moveTo and lineTo give the spectrum a jagged
look. Equal values result in a symmetrical spectrum */

graphics.moveTo(i+50, -val+40 );
graphics.lineTo(i+90, val+40);

/*second spectrum*/
graphics.moveTo(i+50, -val+100 );
graphics.lineTo(i+90, val+100);
}

}
}
Remember the myMusic.mp3 should be in the same directory as the .swf file. Hit Ctrl+Enter to test the movie!!

Make Your Own Custom Minesweeper Game with Actionscript 3

2009-09-01T19:41:00.000+05:30

We'll make a variant of the very popular Minesweeper. This will also give you a very clear idea on how to go about creating games in Flash.

1. First hit Ctrl+J to bring up the properties window and set BOTH the width and height of the stage to 300 and the Background to the color #339966;

2. Now we'll draw the required components. For each, hit Ctrl+F8 to bring up the New Symbol Window and select the Export For Actionscript in the Advanced section. Maintain the dimensions i mention if you do not want to tweek the script.
First the boxes. This will create a mesh background to the minefield. Give the name in the New Symbol Window as box_mc.Click Ok and select the Rectangle Tool and Change the Stroke Color to #A6A6A6 and No Fill Color. Draw a 24x24 sized square and select the Top and Left edges and change their color to Black. Now go to the Align Panel and Click on Align Left anf Align Top so that the top left corner coincides with the small cross on the stage. If you do this correctly it sould look like this

Now the Mines. Again in the New Symbol Window give the name as mine_mc and make sure Export For Actionscript is selected. Draw it anyway you want just make sure they are smaller than your boxes. My mines are of the size 20x20 and look like this

For the box covers give the name as cover_mc draw a 23x23 rectangle with Stroke Thickness 2 and fill color #0066CC and Stroke Colors #012B54 and #81C0FE Align the Top-Left corner,similar to the box_mc, to make it look like this

Name the flags flag_mc and they should, again, be smaller than the boxes.This one measures 15x18.

For the following three objects you need not check the Export for Actionscript Box.
The timer sould be named timer_mc. First Draw a 60x30 Rectangle with the color #540101 with an alpha of 75. That done select the Text Tool and draw Dynamic Text Field like so

Select the text field and go to the Properties Panel and give it the instance name of time_txt.

Now for the final two components, the game lose and win splash screens. Hit Ctrl+F8 again and name it lose_mc. Draw a 225x225 square of the color #91000 and alpha 25. Centre it and create Static Text fields to write "You Lose" or whatever you want to indicate that the player has lost.

Follow the Exact same procedure and create a game win splash screen and name it win_mc, set the color to #00CC33 and change the text to "You Win" or something similar.

3. Till Now your Main Stage should be empty. Add a total of 3 new layer. Rename the top layer Actions, the next one Win, the next one Lose and the last one Timer. Select the Timer Layer and select the first frame. Now open your Library Window and drag an instance of timer_mc on to the stage. Go to the properties panel. Enter its instance name of timer_mc and set its X and Y coordinates to 150 and 2 respectively. Similarly drag the lose_mc on to the first frame of the Lose Layer and set the instance name as "lose_mc" and both the coordinates as 150. win_mc should be dragged on to the Win layer. The instance should be named as win_mc. Your stage should look like this.

4. Now time for some major scripting! Remember we are creating a 9x9 game with 10 mines. So there will be 81 boxes and box covers and 10 flags.
The boxes are logically defined as an Array of length 81. The value gives the number of mines in the adjacent boxes

/*-------------------INITIATE GAME-----------------------------*/

/*define the top left corner the mineField*/
var X=37.5 ,Y=37.5;

/*hide the two game end splash screens*/
lose_mc.visible = false;
win_mc.visible = false;

/*global variables*/
var isLost=0;/*flags game lose scenario*/
var isPlaying=0;/*shows if the game is in progress*/
var timeCount=0;/*counts the number of seconds*/
var removedCount=0;/*counts the number of boxws uncovered*/

/*holds the positions of the 10 mines*/
var minePos:Array = new Array();

/*for every box counts the number of adjacent mines*/
var mineCount:Array = new Array();

/*this will time the game*/
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(e:TimerEvent) {
if(isPlaying==1)/*start timing only if the game is in progress*/
timeCount++;
timer_mc.time_txt.text = timeCount;
timer_mc.time_txt.selectable = false;
}

/*This is the format for the text in each box
indicating the number of adjacent mines*/
var format:TextFormat = new TextFormat();
format.bold = true;
format.color = 0x0000FF;
format.blockIndent = 5;
format.size = 22;

/*Now we define the starting function which in turn calls all other necessary functions*/
function createNewGame() {
/*set the initial mine counters*/
for( var i=0;i<81;i++)>/*attach the 10 mines*/
attachMines();

/*create the rest of the minefield*/
createMineField();

/*attach the 10 marker flags*/
attachFlags();

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

/*Call the function so that all required components are attached to the stage.*/
/*//////////////*/
createNewGame();
/*//////////////*/

/*--------------ATTACH MINES--------------------- */
/*Randomly decides upon 10 places to put the mines.
Since the same number may be returned by the Math.random()
function we have the 2nd loop. What it does is calls itself
if it finds two same number in the array. Since this may happen
sparsely the recursive call does not incur a great cost.*/

function findMinePos() {
/*randomly find 10 mine positions*/
for(var i=0;i<10;i++)>int(Math.random()*80);

/*to prevent the same number being chosen twice*/
for(i=0;i<10;i++)>for(var j=i+1;j<10;j++)> if(minePos[i]==minePos[j])
findMinePos();
}
}
}

/*Now that 10 distinct locations has been chosen,
this function actually attaches the mines to these.
If you have used a different dimension for the mines
and/or boxes than i have you may have to tweek the
values in the script for proper alignment. */

function attachMines() {
findMinePos();
for(var i=0;i<10;i++)> var mine = new mine_mc();
mine.x=X+(minePos[i]%9)*25+12.5;
mine.y=Y+int (minePos[i]/9)*25+12.5;
updateMineCount(minePos[i]);
addChild(mine);
}
}

Now we have to understand since the boxes are defined as a 81 lentgh array, for any box X what the indeces for the adjacent boxes are--

for a box on the Left edge the indeces would be like 0,9,18,27...X.. i.e. X%9 = 0 and their adjacent boxes are

and for one on the Right edge the indeces are 8,17,26,...X,... i.e X%9 = 8 and their adjacent boxes are

/*this funcion takes the position of a mine
and updates all its adjacent boxes */
function updateMineCount(pos:Number) {
/*set the value of the position with the mine*/
mineCount[pos]=9;

if(pos+9>0&&pos+9<81)>if(pos-9>=0&&pos-9<81)>/*for all boxes NOT on the right edge*/
if(pos%9!=8)
{
if(pos+9+1>0&&pos+9+1<81)> if(pos+1>0&&pos+1<81)> if(pos-9+1>=0&&pos-9+1<81)>/*for all boxes NOT on the left edge*/
if(pos%9!=0)
{
if(pos-9-1>=0&&pos-9-1<81)> if(pos-1>=0&&pos-1<81)> if(pos+9-1>0&&pos+9-1<81)>/*-----------------CREATE REST OF THE MINEFIELD-------------*/

function createMineField() {
for(var i=0;i<81;i++)>/*....Attach Boxes..........*/
var b_mc=new box_mc();
b_mc.x=X+(i%9)*25;
b_mc.y=Y+int(i/9)*25;
b_mc.name="b"+i+"_mc";
addChild(b_mc);
/*.........................*/
/*.......Attach Text Fields.............*/
if(mineCount[i]!=0&&mineCount[i]<9)>var t_txt:TextField=new TextField();
t_txt.selectable = false;
t_txt.x=X+(i%9)*25;
t_txt.y=Y+int(i/9)*25;
t_txt.text = mineCount[i];
t_txt.setTextFormat(format);
addChild(t_txt);
}
/*.........................................*/
/*.............Attach Box Covers............*/
var cover=new cover_mc();
cover.x=X+.5+(i%9)*25;
cover.y=Y+.5+int(i/9)*25;
cover.name = "c"+i;
cover.addEventListener(MouseEvent.CLICK,clickHandler);
addChild(cover);
/*............................................*/
}

}
/*------------MineCover Click Handler-------------------*/
function clickHandler(e:MouseEvent) {
isPlaying=1;
var Name = e.currentTarget.name.toString();
var clickedBut=int(Name.substr(1,2));

/*if clicked on a mine invoke procedure lose*/
for(var i=0;i<10;i++)> if(minePos[i]==clickedBut)
lost();
}

/*if clicked on a box with no adjacent mines remove
all adjcent empty boxes*/
if(mineCount[clickedBut]==0)
{
getAdjacentEmptyFields(clickedBut);
begin=0;
end=0;
}

/*for all other boxes remove the cover and reveal
the number of adjacent mines*/
else if(mineCount[clickedBut]<9)>removeChild(getChildByName(e.currentTarget.name));
updateRemovedCount();
}
}

/*------Remove all adjacent empty boxes-------------------*/
/*this function uses a queue and two functions enqueue and dequeue
to work on the queue.When a box with no adjacent mines is clicked
this function searches through all its adjacent boxes and removes the
covers if it does not hide a mine and if an empty box is encountered
it is put in the queue and later taken up for processing. In this way
if you click on an empty box an area is cleared up;
*/

var queue:Array=new Array ;

/*beginning of the array*/
var begin=0;

/*end of the array*/
var end=0;

/*takes a number and inserts into the end of the queue*/
function enqueue(num:Number) {
queue[end]=num;
end++;
}

/*retrieves the number in front of the queue*/
function dequeue():Number {
return(queue[begin++]);
}

function getAdjacentEmptyFields(pos:Number) {
var Name:String = new String();
Name = "c"+pos;

/*remove cover*/
if(getChildByName(Name))
{
removeChild(getChildByName(Name));
updateRemovedCount();
}

/*flag cover removal of an empty box
in the array*/
mineCount[pos]=99;

/*..................Process Adjacent Boxes....................*/
processAdjacentBoxes(pos+9);
processAdjacentBoxes(pos-9);

if(pos%9!=8)
{
processAdjacentBoxes(pos+9+1);
processAdjacentBoxes(pos+1);
processAdjacentBoxes(pos-9+1);
}
if(pos%9!=0)
{
processAdjacentBoxes(pos-9-1);
processAdjacentBoxes(pos-1);
processAdjacentBoxes(pos+9-1);
}
/*......................................................*/

/*return if queue is empty*/
if(begin>=end&&begin!=0)
return;

/*process the position at the start of the queue*/
getAdjacentEmptyFields(dequeue());
}

/*process the position passed as argument*/
function processAdjacentBoxes(pos:Number) {
var Name:String = new String();

if(pos>0&&pos<81)>/*if empty box put it in the queue and
flag removal of cover of the empty box*/
if(mineCount[pos]==0)
{
mineCount[pos]=99;
enqueue(pos);
}

/*else if a box with text remove the cover only*/
else if(mineCount[pos]<9) name="c">if(getChildByName(Name))
{
removeChild(getChildByName(Name));
updateRemovedCount();
}
}
}
}

/*-----------------------FLAGS----------------------------------*/

/*The flags will be for marking purpose only and their position have
no bearing on the result whatsoever you have to remove all unmined
box covers to win*/

function attachFlags() {
for(var i=0;i<10;i++)>var flag=new flag_mc();
flag.x=X+i*24;
flag.y=Y+227;
flag.addEventListener(MouseEvent.MOUSE_DOWN,dragFlag);
flag.addEventListener(MouseEvent.MOUSE_UP,stopDragFlag);
addChild(flag);
}
}
function dragFlag(e:MouseEvent) {
e.currentTarget.startDrag();
}

function stopDragFlag(e:MouseEvent) {
e.currentTarget.stopDrag();
}
/*-----------------------------------------------------------------*/

/**********************Results**************************************/

/*This function is called every time a box cover is removed
if all 71 (81-10) unmined boxes are uncovered the game is won
*/
function updateRemovedCount() {
removedCount++;
if(removedCount==71&&isLost==0)
{/*game has been won*/
win_mc.visible=true;
isPlaying=0;
/*bring the splash screen to the top*/
setChildIndex(win_mc,numChildren-1)
}
}

function lost() {

var Name:String = new String();

/*remove all the covers of mined boxes to reveal their positions*/
for(var i=0;i<10;i++) name = "c"> if(getChildByName(Name))
removeChild(getChildByName(Name));
}
isLost=1;
isPlaying=0;
lose_mc.visible=true;
/*bring the splash screen to the top*/
setChildIndex(lose_mc,numChildren-1);
}
/*---------------------------------------------------------------------*/

Thats it!!
Hit Ctrl+Enter to test your movie. Happy gaming.

Interface Flash with PHP in ActionScript 3

2009-08-29T18:15:00.000+05:30

Interface Flash with PHP in ActionScript 3
We will interface Flash and PHP pass variables from Flash to PHP with the POST method

1. First we do not need a big Stage so create a new flash file, name it "phpFlash.fla" and hit Ctrl+J to bring up the document properties window and change the stage width and height to 250 and 200 resp.
2. Select the Text Tool and go to the properties panel and select Input Text and click on Show border around text. Now create three text fields like this

go to the properties panel and give them instance names of "fName_txt", "lName_txt", "email_txt" resp.

3. Now Change the text type to Static and create labels for the input text boxes like this

4. Now Hit Ctrl+F8 to bring up the New Symbol window. Name it submit_mc. draw your own button and Label it "Submit". Now return to the main Stage and drag the instance of the button on the Stage from the Library window.

Go to the Properties Panel and give it the instance name of submit_mc.

5. Next create a new Layer, rename it "Actions" and select the first frame. Hit F9 to bring up the Actions Window nad copy and paste the following piece of code

/*Wait for the button to be clicked*/
submit_mc.addEventListener(MouseEvent.CLICK,postData);

function postData(e:MouseEvent) {
var myRequest:URLRequest = new URLRequest("phpFlash.php");
var variables:URLVariables = new URLVariables();

/*These will be the $_POST variables*/
variables.fname = fName_txt.text;
variables.lname = lName_txt.text;
variables.Email = email_txt.text;

/*assign the URL variables to the request*/
myRequest.data = variables;

/*Select the request method as POST*/
myRequest.method = URLRequestMethod.POST;

/*go to the given page*/
navigateToURL( myRequest);
}

Hit Ctrl+Enter to get your phpFlash.swf file.

6. Now we create the .php file. Name it phpFlash.php and open in a text editor. The .swf file will be embedded in this file itself. Copy and paste the following Script

<html>

<body bgcolor="#ffffff">

<div align=middle>

<object width="550" height="400" id="c1" align="middle">

<param name="movie" value="phpFlash.swf" />

<param name="quality" value="high" />

<param name="bgcolor" value="#ffffff" />

<embed src="phpFlash.swf" quality="high" bgcolor="#ffffff" width="250" height="200" />

</object>

</div>

<?php

$fname=$_POST[fname];

$lname=$_POST[lname];

$email=$_POST[Email];

echo "First Name - ";

echo $fname;

echo "</br>LastName - ";

echo $lname;

echo "</br> Email - ";

echo $email;

?>

</body>

</html>

7. Make Sure the .swf and the .php files are in the same folder and in the root diretory of the server. Run the php file from a browser. Type in the boxes and hit Submit and Voila what you have typed will appear on stage through the PHP script. Hope you can use this in a much more complicated application of yours

Create your own .flv Video Player with Timeline Seek Playhead

2009-08-29T07:47:00.000+05:30

This is a progressive download .flv video player with play, pause and stop buttons with sliding volume controller and timeline seek

There are two ways you can play a video. firstly you can embed the .flv video in the .swf file which creates very large and unmanageable files or you can dynamically load the video file which can be done in two ways. First is a streaming video but you will need the Flash Media Server for it or you can have progressive downloaded video like this one which does not need any additional softwares. The actual coding to play a both types of videos is more or less the same

1. First we design the stage. Hit Ctrl+J to bring up the document properties window. Select #333333 as the background color. Now create 2 more layers and name the top most Actions.
2. Hit Ctrl+F8 to bring up the New Symbol window and give the name play_mc. Click on ok and create your own button. Mine looks like this

Now repeat the above process twice and give in the names stop_mc and pause_mc.

make sure atleast the play and pause buttons have exactly the same shape and size. Now select the first frame of the middle layer and drag the play_mc and stop_mc buttons from the library onto the stage and place them near the bottom. Give them instance names of play_mc and stop_mc

now select the first frame of the bottom most layer and drag the pause button onto it from the library. Give the instance name pause_mc, now from the properties panel set the x and y coordinates of the pause button to be same as that of the play button.Since the pause button is exactly of the same shape and size and is on a lower layer it will be completely hidden.

3.Now again select the first frame of the bottom most layer draw a small line on the side of the buttons with lentgh of 100. make a note of the x and y coordinates. Here its 240 and 385 resp.

Hit Ctrl+F8 again and this time give the name slider_mc and draw a 16x16 black sqaure and centre it. Go back to the main stage and select the first frame of the middle layer and drag the slider_mc from the library onto the stage and set its coordinates as 340 (240+100) and 385. Give it the instance name of slider_mc in the properties panel

4. Select the Text Tool and draw a dynamic text field near your objects. This will show the duration so place it appropriately. Give it the instance name of dur_txt

5. now on the bottom most layer above your buttons draw a thin rectangle of length 350 and again make a note of its x and y coordinates. here they are 108 and 357.

Hit Ctrl+F8 again and this time give the name playSeek_mc. Follow the steps as in the volume controller but this time the instance name would be playSeek_mc and the x and y coordinates will be 108 and 360 resp;

6. Now get your .flv file and save it in the same folder as this .swf file and name it myFLV.flv or whatever you want.
7. That done select the first frame of the Actions layer and copy and paste the following code

/*------------------------Video Playback-----------------------------*/
import flash.net.NetConnection;

addEventListener(Event.ENTER_FRAME,trackDuration);

/*several objects have to be declared*/
var videoConnection:NetConnection = new NetConnection();
videoConnection.connect(null);
var videoStream:NetStream = new NetStream(videoConnection);
var video:Video = new Video();
var obj:Object = new Object();

var vDuration=0;/*will contain the total duration of the video*/

/*onMData function called if metadata is detected. Metadata is encoded into
the video by the encoding software*/
obj.onMetaData = onMData;
videoStream.client = obj;

/*Set the dimensions and position of the video*/
video.x=75;
video.y=20
video.width=400;
video.height=300;

addChild(video);/*actually add the video*/
/*all operations will be on the videoStream object*/
video.attachNetStream(videoStream);

function onMData(obj:Object) {
/*Calculate the total duration of the video*/
vDuration=obj.duration;
}

/*denotes whether timeline seekhead is being dragged*/
var isDragging=0;

/*show the duration on stage*/
function trackDuration(e:Event) {

/*videoStream.time give the duration already played*/
dur_txt.text=videoStream.time.toString()
+" / "+vDuration;

/*if seek head not being dragged.This actually helps in smooth dragging
remove this line to see what happens when you drag without this*/
if(isDragging==0)

/*advance the seek head according to duration played
180 is the start position of the seekhead and 350 is
the total lentgh it can be dragged */
playSeek_mc.x = 108+(350*videoStream.time/vDuration);
}

var isPlaying=0;/*denotes if the video is playing*/
var isPaused=0;/*if video is paused*/

play_mc.addEventListener(MouseEvent.CLICK,playHandler);
stop_mc.addEventListener(MouseEvent.CLICK,stopHandler);
pause_mc.addEventListener(MouseEvent.CLICK,pauseHandler);

/*if play button is clicked*/
function playHandler(e:MouseEvent) {
if(isPlaying==0)/*if not already playing*/
{
videoStream.play("myFLV.flv");/*start playing from the beginning*/
isPlaying=1;
}
if(isPaused==1)/*if paused*/
{
videoStream.resume();/*resume playing*/
isPaused=0;
}
e.currentTarget.visible=false;/*hide the play button*/
}

/*if pause button is clicked*/
function pauseHandler(e:MouseEvent) {
videoStream.pause();/*pause play*/
isPaused=1;
play_mc.visible=true;/*show play button*/
}

/*if stop button is clicked*/
function stopHandler(e:MouseEvent) {
videoStream.close();/*stop playing by closing the stream*/
isPlaying=0;
play_mc.visible=true;/*show play button*/
}
/*-------------------------------------------------------------------------------*/

/*------------------------Volume Control-----------------------------------------*/

/*denotes the rectangle boundary in which the volume controller can be dragged
parameters are x,y, width, height. Height=0 since only horizontal movement
is required*/
var rect:Rectangle = new Rectangle(240,385,100,0);

/*--define mouse event handlers for the sliding control---*/

slider_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);

/*notice that the handling function in the following two listeners are the same*/
slider_mc.addEventListener(MouseEvent.MOUSE_UP,dragStop);
slider_mc.addEventListener(MouseEvent.MOUSE_OUT,dragStop);

slider_mc.addEventListener(Event.ENTER_FRAME,adjustVolume);
/*------------------------------------------------------------*/

/*enable dragging if mouse button pressed on it*/
function dragStart(e:MouseEvent) {
slider_mc.startDrag(true,rect);
}

/*stop dragging if moue button released or pointer moved away*/
function dragStop(e:MouseEvent){
slider_mc.stopDrag();
}

function adjustVolume(e:Event) {
/*calculate the volume. 240 is the minimum position and
100 is the width of the drag boundary rectangle "rect"*/
var vol=(slider_mc.x-240)/100;
var volChange:SoundTransform = new SoundTransform(vol);

/*assign the new volume*/
videoStream.soundTransform = volChange;
}
/*--------------------------------------------------------------------------------*/

/*-------------------Timeline Seeking--------------------------------------------*/

/*define mouse event handlers on the timeline seek head*/
playSeek_mc.addEventListener(MouseEvent.MOUSE_DOWN,playDragStart);
playSeek_mc.addEventListener(MouseEvent.MOUSE_UP,playDragStop);

/*denotes the rectangle boundary in which the timeline seek head can be dragged
parameters are x,y, width, height. Height=0 since only horizontal movement
is required*/
var rect1:Rectangle = new Rectangle(108,360,350,0);

/*enable dragging if mouse button pressed on it*/
function playDragStart(e:MouseEvent) {
/*drag only if video is playing and is not paused*/
if(isPlaying==1&&isPaused==0)
{
playSeek_mc.startDrag(true,rect1);
isDragging=1;
}
}

/*stop dragging if moue button released from it*/
function playDragStop(e:MouseEvent){
playSeek_mc.stopDrag();
isDragging=0;
/*determine the position of the seeh head. 108 is the minimum position
350 is the width of the drag boundary rectangle rect1*/
var seekHead=(playSeek_mc.x-108)*vDuration/350;

/*start playing from the position denoted by the seek head*/
videoStream.seek(seekHead);
}

/*-----------------------------------------------------------------------------*/

Now hit Ctrl+Enter and test your movie.

\m/\m/\m/\m/

Make a Custom Cursor and Draw with the Mouse in Actionscript 3

2009-08-27T22:23:00.000+05:30

We'll make a custom cursor which will replace the mouse pointer and we will also be able to draw with it
1. First we'll draw the cursor. You can make it to look like anything you want. This is how my cursor looks like

To draw it first select the Rectangle Tool and select Fill Color of #CC0033 and no stroke color. Now draw a small rectangle of width 50 and height 25;

Now click outside the rectangle and approach the bottom right corner of the rectangle with the mouse pointer. When an inverted L sign appears press down on the mouse button and drag the corner upwards halfway through the side

do that on both sides to get the triangle. Now similarly drag the left vertical side inwards th get something like this

Select the shape and hitF8 and save it as a MovieClip Symbol with the name cursor_mc. Go to the properties panel and give it the instance name of cursor_mc.
Double Click on the shape o edit it and select the shape inside.Select Free Transform Tool(Q) and rotate it so that it looks like this

Now select it and hit Ctrl+C to copy it. Create a new layer drag it below the original layer and hit Ctrl+V to paste it. Now go to the Color window and change the fill color to #4B0101 and then go to the Transform window and change the size in both the horizontal and vertical directions to 125.

Your stage should look like this.

Select select both shapes and go to the Align window and click on the following buttons circled in red.

Your shapes should look like this

Now manually arrange them to like

Make a note of the centre of the MovieClip denoted be the small cross sign because your pointer will actually be that point. So for my arrow shaped cursor the centre should be just inside the arrow point.
Now return to the main Stage. Create a new layer and rename it as Actions. Select the first frame and hit F9 to open the Actions window.
Copy and paste the following code. Hope the documentation is sufficient

addEventListener(Event.ENTER_FRAME,followMouse);
addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);

/*-------------------CUSTOM CURSOR-------------------*/
function followMouse(e:Event) {
Mouse.hide();/*hide the mouse*/

/*follow the mouse coordinates*/
cursor_mc.x=mouseX;
cursor_mc.y=mouseY;
}
/*-----------------------------------------------------*/

/*------------------DRAWING----------------------*/
/*draw only if the mouse button is pressed and the mouse is moving*/
function mouseDownHandler(e:MouseEvent) {
e.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE,mouseDMoveHandler);
/*lineStyle(thickness,color,alpha)*/
graphics.lineStyle(5,0x00CC77,1);
/*move to the point with given coordinates*/
graphics.moveTo(mouseX,mouseY);
}

function mouseDMoveHandler(e:MouseEvent){
/*draw a line to the given coordinates from the coordinates in "moveTo"*/
graphics.lineTo(mouseX,mouseY);
}

function mouseUpHandler(e:MouseEvent){
/*to stop drawing when the mouse is up line thickness
and alpha changed to zero.Technically the line is still being drawn
but with 0 thickness and alpha so it's not visible*/
graphics.lineStyle(0,0x00CC77,0);
}
/*-----------------------------------------------------*/

Now hit Ctrl+Enter to test your movie. To draw press and hold the left mouse button and drag it just as in any image editing software. There may be some problem if you move the mouse very fast but other than that you can draw anything

Pardon my drawing but enjoy!

XML Driven Advanced Horizintal Dropdown Menu with Tween effects in Actionscript 3

2009-08-26T18:51:00.006+05:30

Visit this link to see the menu in action -:

http://www.fileden.com/files/2009/9/5/2565234/menu1.swf

First the contents of the menu must be put down in a XML file in the following format.

Each "main" tag gives the name of a main menu button in the "tag" tag and each "sub" tag gives the label of the sub menu buttons under it.
Let's name this file "myXML.xml". Remenber The flash(.fla) file and the XML file must be saved in the same folder.

Now open your flash file and hit Ctrl+Jto bring up the Properties Panel and set the background color as Black. Click OK and hit Ctrl+F8 to bring up the New Symbol window. Enter the name as mnMenu_mc and click on Advanced. Select Export for Actionscript. Click OK.

Select the Rectangle Primitive Tool and draw a small rectangle. This will be your Main Menu button. You can use any shape, size or color. But you have to make a not of the width of the button. Here i use a 65*20 rectangle with the fill color #0033CC. Now ceate a new layer on top of the present one and create a dynamic text field that almost fills up the button.

Select the text field and go to the Properties Panel and give it the instance name of text_txt. Now select both the button and the text field and open the Align Window and center both the objects.

Repeat the process and this time give the name as sbMenu_mc. You may choose a different shape or color if you like. The name of the text field will be the same as before.

This will be your sub menu button. Again make a note of the width of the button.

Thats all the graphics you need so now we script! Select the first frame of the only layer that sould be on your stage and hit F9 to bring up the Actions window. Copy and paste the following code. I hope the documentation is sufficient

Now hit Ctrl+Enter to test your movie! Mine looks something like this after i click on home but the actual coolness lies in the Tweens. Have fun!!

Simple MP3 Music Player with sliding volume controller in Actionscript 3

2009-08-23T12:30:00.001+05:30

We will create a music player that will have the following :-

1. Play Button. 2. Stop Button. 3. Pause Button *4. Sliding Volume Controller
The mp3 file you want to play should be in the same folder as the flash file. Let's assume its name is myMusic.mp3.

1. Play Button:-
i> We first need to draw the button. Hit Ctrl+F8 and name the New Symbol as "play_mc" without the quotes. You can draw it to look like anything you like. I'll draw it like this.

If you are new to flash you might be wondering about how to draw a triangle. The easiest way is to draw a small square and then click outside it now select the Selection Tool(V) and move the mouse near a vertex of the square. You will notice an inverted L sign under the pointer. Press the left mouse button and drag the vertex up
do it on both sides
and you get you triangle

ii> Now drag the button on to the Stage and select it. Open the Properties Window and set the instance name as play_mc.

2. Stop Button:-
i> Make it in the same way as before and name it as "stop_mc" without the quotes.
ii> Drag it onto the stage and give it the instance name of "stop_mc" without the quotes.

3. Pause Button:-
Same as before just give the names as "pause_mc".

You should have the three buttons on stage and it should look like this

4. Sliding Volume Controller:-
i> Create a new Layer and drag it below the layer that has the three buttons. Now draw a line below the buttons and then go to the properties panel to set the width as 100. Make a note of the X and Y Coordinate of that line. Here it's 215 and 265 respectively.

ii>Now select the first frame of the layer that has the three buttons. Draw a small circle which will be the actual slider. Select it and Hit F8 and save it as slider_mc. Double click on it to edit it and centre the cicle. Return to the Main Stage and go to the properties panel and give the instance name as slider_mc and set its X and Y coordinate as 315 (215+100) and 265 respectively.

Now we'll make the buttons work! Create a new layer and name it Actions. Select the first frame and Hit F9 to bring up the actions Window. Copy the following piece of code:-

var isPlaying = 0;//flag denotes whether the music is playing(1) or has been stopped(0)
var pos=0;//denotes the position in which the music was paused var mySound:Sound = new Sound(new URLRequest("myMusic.mp3"));//load the mp3 file
/*define the area in which the slider will move the arguments are X, Y, width, height*/
var rect:Rectangle = new Rectangle(215,265,100,0);

/*define the sound channel*/
var myChannel:SoundChannel=new SoundChannel();

/*define mouse event listners for the buttons and the slider*/
play_mc.addEventListener(MouseEvent.CLICK,playMusic);
stop_mc.addEventListener(MouseEvent.CLICK,stopMusic);
pause_mc.addEventListener(MouseEvent.CLICK,pauseMusic);
slider_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
slider_mc.addEventListener(MouseEvent.MOUSE_UP,dragStop);
slider_mc.addEventListener(MouseEvent.MOUSE_OUT,dragStop);

/*the slider will invoke the "adjustVolume" function*/
slider_mc.addEventListener(Event.ENTER_FRAME,adjustVolume);

/*PLAY BUTTON*/
function playMusic(e:MouseEvent) {
if(isPlaying==0)
myChannel=mySound.play();
isPlaying=1;
}

/*--------------STOP BUTTON--------------*/
function stopMusic(e:MouseEvent) {
if(isPlaying==1)
myChannel.stop();
isPlaying=0;
pos=0;
}
/*----------------------------------------*/

/*--------------PAUSE BUTTON--------------*/
function pauseMusic(e:MouseEvent) {
/*if music is playing*/
if(isPlaying==1)
{
pos=myChannel.position;//record position
myChannel.stop();
isPlaying=0;
}
/*if music is paused*/
else
{
isPlaying=1;
myChannel=mySound.play(pos);
}
}
/*----------------------------------------*/

/*--------------SLIDING CONTROLLER--------------*/
function dragStart(e:MouseEvent) {
slider_mc.startDrag(true,rect);
}

function dragStop(e:MouseEvent){
slider_mc.stopDrag();
}

function adjustVolume(e:Event) {
var vol=(slider_mc.x-215)/100;
var volChange:SoundTransform = new SoundTransform(vol);
myChannel.soundTransform = volChange;
}
/*----------------------------------------*/

That's it. Hit Ctrl+Enter to check your own Music Player!!

The Tween Class in ActionScript 3

2009-08-22T17:00:00.000+05:30

Today we'll learn about the Tween class and apply it to a practical example.

1. Open a new flash file. Hit Ctrl+J to bring up the Document Properties and change the background color to black.

2. Then press Ctrl+F8 to open the New Symbol window and name it as btn1_mc. We will make a button. Now select the Rectangle Tool(R) and change the Stroke color to #0066CC and the fill color to #0099CC. You can use any other color.
Go to the Properties Panel and set the stroke thickness as 4.

3. Draw a rectangle of the size you want you button to be. A width of 120 and a height of 40 should suffice. After drawing, select the rectangle and go to the align panel and centre the rectangle.

4. Create a new layerand select the Text Tool(T) and create a label for your button. I will name it "HOME". Go to the Align Panel and centre the text box too.

5. Now Click on Scene1 to return to the Stage.

6. Go to Window->Library and you will see the btn1_mc movie clip. Right Click on it and create two duplicates and name them btn1_mc and btn3_mc respectively. Change the color and the text labels on the duplicate if you want to. I will name them "Gallery" and "About Us". Changing the color will help us understand a particular issue we'll address later.
Now drag each button onto the stage and arrange them somewhat like this

7. Select each button and go to the Properties Panel button and give them instance name as btn1_mc, btn2_mc and btn3_mc

8. Create a new layer, name it Actions and select the first frame and hit F9 to bring up the Actions window. We are ready to write the script.

9. To script tweens we first need to import the Tween Class like so -

import fl.transitions.Tween; import fl.transitions.easing.*;

Now we'll implement the tween so that the button changes size when we RollOver and return back when we RollOut therefore for each button we must add RollOver and RollOut listeners.

btn1_mc.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); btn1_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler); btn2_mc.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); btn2_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler); btn3_mc.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); btn3_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);

These listeners will invoke the "mouseOverHandler" function on the RollOver Event and the "mouseOutHandler" function on the RollOut Event
Now we will define the two functions

function mouseOverHandler(e:MouseEvent) { e.currentTarget.alpha=.8;//altering alpha makes the change more prominent new Tween(e.currentTarget,"scaleX",Elastic.easeOut,e.currentTarget.scaleX,1.25,1,true); new Tween(e.currentTarget,"scaleY",Elastic.easeOut,e.currentTarget.scaleY,1.25,1,true); } function mouseOutHandler(e:MouseEvent) { e.currentTarget.alpha=1; new Tween(e.currentTarget,"scaleX",Elastic.easeOut,e.currentTarget.scaleX,1,1,true); new Tween(e.currentTarget,"scaleY",Elastic.easeOut,e.currentTarget.scaleY,1,1,true); }

"e.currentTarget" gives the child on which the Event has occured. The arguments of the Tween function is as follows :- 1. the object, 2. the property that has to be tweened, 3. Type of tween, 4. Start value, 5. End value, 6. Duration in Seconds, 7. Use Seconds(boolean).

10. if you have copied all of the code hit Ctrl+Enter to test your movie. Rollover your buttons you'll see them growing and shrinking but notice that we have a problem that is most apparent when we rollover the middle button.

The middle button grows over the first button but goes under the last button. That happens with the first button too

11. As you might have guessed, to solve this problem we have to change the depth of the button and bring it to the topmost layer. To do that add the following line of code to the "mouseOverHandler" function.

setChildIndex(getChildByName(e.currentTarget.name),numChildren-1);

"numChildren" give the total number of children present. Thus by setting the index to "numChildren-1" we actually swap the depths of the present child with that of the topmost child.
Hit Ctrl+Enter to test you movie. The problem is solved!!

So there you have it. The buttons look really good with the Tween. You can choose different kind of tweens. Instead of the Elastic easing used here you can choose from Back, Bounce, None, Regular, Strong and instead of easeOut you can use easeIn or easeInOut. Select the tween that suits your application the best.

XML Driven Dynamic Photo Gallery

2009-08-20T09:50:00.000+05:30

We will use a XML file to list all the images and the .swf file will dynamically load the images.

In the directory where you have saved the flash file create another folder and lets name it gallery. suppose we have 20 images name as 1.jpg, 2.jpg, ..., 20.jpg. To list the these in the XML file open your text editor and type the following.

Save it as images.xml in the gallery folder. Edit the XML file if you change the name of the folder or that of the images. Now in the flash file select the first frame and hit f9 to bring up the Actions window. Then Copy and Paste the following code. I hope the documentation is enough.

var xmlLoader:URLLoader= new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, parseXML);//if XML file loaded successfully
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, errorOccurred);//if the XML file fails to load
xmlLoader.load(new URLRequest("gallery/images.xml")); //load the XML File

//reads the XML file and invoked if the file is loaded successfully
function parseXML(e:Event):void {
var i:int;
var totalNodes:int;
var XMLData:XML = new XML(xmlLoader.data);
totalNodes= XMLData.img.length();//"img" because the XML use that as a tag ""

for (i=0; i//traversing through the XML file
attachImages(XMLData.img[i].toString(),i);
}

}

//Outputs an error message if the XML file fails to load
function errorOccurred(e:Event):void {
trace("Error Occured");
}

//attaches the images to the stage.
function attachImages(url:String,i:int):void {
var myLoader:Loader = new Loader();
myLoader.load( new URLRequest(url) );//load the image

/*follwing four lines follow a static arrangement but you can create dynamic functions depending upon the number of images. Assign your scaling according to the image size. Here I'm using 600x480 image size*/

myLoader.x = 100*(i%5)+10;
myLoader.y = 100*(int(i/5))+10;
myLoader.scaleX=0.13;
myLoader.scaleY=0.13;

addChild(myLoader);//Attach the image to stage and make it visible
}

Thats it press Ctrl+Enter and Voila! your images will appear as thumbnails. With trial and error decide upon the scale to use.

Now we'll add a few lines of code and transfrom it to a gallery where the images can be viewed full size! The fucntionality we'll add is that if we click on the thumbnails they'll expand and fill the stage so we can properly view the image.
Thus we'll need a listener that will wait for a mouse click. So add the following line of code to the "attachImages" function defined previously

myLoader.addEventListener(MouseEvent.CLICK,mouseClickHandler);

This will invoke the "mouseClickHandler" function when we click a thumbnail. Now we have to define that function. it will use 4 global variables so that an image can shrink back to a thumbnail when the expanded image is clicked again.The flag will denote whether the image is a thumnail or is expanded. flag=0 denotes a thumbnail and flag=1 denotes that the image has been expanded.

var originalX,originalY,originalScaleX, originalScaleY,flag=0;
function mouseClickHandler(e:MouseEvent):void {
if(flag==0)//satisfied if a thumbnail is clicked
{
//e.currentTarget denotes the thumbnail that has been clicked
//storing the properties of the thumbnail in the global variables
originalX=e.currentTarget.x;
originalY=e.currentTarget.y;
originalScaleX=e.currentTarget.scaleX;
originalScaleY=e.currentTarget.scaleY;

//this line will bring the expanded image to the top of all other thumbnails
setChildIndex(getChildByName(e.currentTarget.name),numChildren-1);

/*expanding the thumbnail by assigning new values to the properties. scaleX and scaleY properties will change according to the size of the images used and the size of the stageHere i use 600x480 images and a default stage of 550x400*/
e.currentTarget.x=0;
e.currentTarget.y=0;
e.currentTarget.scaleX=0.92;
e.currentTarget.scaleY=0.83;
flag=1;//image is expanded
}
else//satisfied if the expanded image is clicked
{
flag=0;
//assigning original values to the properties.
e.currentTarget.x=originalX;
e.currentTarget.y=originalY;
e.currentTarget.scaleX=originalScaleX;
e.currentTarget.scaleY=originalScaleY;
}
}

Hit Ctrl+Enter to test the movie. Click on the thumbnails to see them expand and click on the expanded image to see them shrink again. It is very important that you use uniform sized images. Otherwise you'll have to build a dynamic scaling function.

Load an image with ActionScript(AS2 and AS3)

2009-08-20T09:43:00.000+05:30

Create a new flash file and save it in the same folder the has the image you want to load. Let the image be named as myImage.jpg.
Load with AS2 ->
Copy and paste the following code:

_root.createEmptyMovieClip("image_mc",_root.getNextHighestDepth());
image_mc.loadMovie("myImage.jpg");

The first line creates a movie clip instance "image_mc". _root.getHighestDepth() function returns the next highest depth such that "image_mc" is sttached on top of any other symbols that may be present on Stage. Instead of this can use numerical values such as 0, 1, 52168, etc. The second line loads the image.

Load with AS3->
Copy and paste the following code:

var myLoader:Loader = new Loader();
myLoader.load(new URLRequest("myImage.jpg"));
addChild(myLoader);

This is a lot different from AS2. Here the image is not loaded by a MovieClip instance but by an object, "myLoader", of the new Loader class . The third line actually attaches the image to the Stage. You might notice there was no such function in AS2.

Motion Guide Tutorial

2009-08-09T20:42:00.000+05:30

Motion Guide is a line which is the path along which you want an object to move
I'll be using Adobe Flash CS4 from now on and start with AS3 tutorials after i learn it. If you're using an older version of Flash you can follow the tutorials just as well.

1. Create two layers and name the top one Guide and the one below it Obj. You can name them anything you want but
you should name your layers according to what they contain. Here the Guide layer will contain the Motion Guide and the
Obj layer will contain the object to be guided

2. Select the first frame of the Guide layer. Select the Pencil Tool
and draw the path you want the object to move on.This line will be your Motion Guide.
3. Now draw your object. To do that hit Ctrl+F8 to bring up the Create New Symbol Box. Name it as obj_mc
I'll draw a simple circle with the Oval Tool.You can make the object to look like whatever you want.
4. Right click on the Guide Layer name and select Guide. This will make the line on that layer a Motion Guide.

If You do it correctly the layers will look like this. Now pay attention. Click on the Obj Layer name
and while pressing the mouse button make an upward motion with the mouse. When you Release it your layers should look likeYou have assigned the Guide layer as the motion guide of the Obj Layer.
5. In the Library window you will see your obj_mc object. If you cannot find your Library window go to Window->Library or hit Ctrl+L. Now Select the fisrt frame of the Obj Layer and drag the object from the library to the top end of the
guide line.
Now go to the timline and on each layer Right Click on the 30th frame and select "Insert KeyFrame". your timeline should look like this
Now select the last frame of the Obj Layer and Drag your object to the end of Motion Guide. The little circle in the centre should snap on to the line. Now select any frame of the Obj Layer and Select "Create Classic Tween".
You're done.
Hit Ctrl+Enter to test the movie.
6. If the Movie is very fast you can do two things. Firstly increase the number of frames. Here we are using 30 or you can hit Ctrl+J and in the window that pops up reduce the Frames per Second(fps) to a lower value. Default fps in CS4 if 24.

Load Text From an External Text File using Action Script

2009-07-26T01:48:00.000+05:30

There are two ways you can load data from an external text file:
1. You can load the whole text present in the file
2. Or you can format the text so that you can load in parts if you want to.

To Begin create a text file myText.txt or whatever you like and copy and paste the following text in it

&monthNames=January,February,March,April,May,June,July,August,September,October,November,December &dayNames=Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday

"&monthNames" and "&dayNames" are the labels which will help us to acess a part of the data. You can name
them in any way you like such as "&part", "&xxx" or "&whatEverILike". All the parts you would like to access
should have a different label.

Now create a file loadText.fla and save it in the SAME FOLDER as the text file.Create a second layer and name
it "Action". Select the first layer and click on the Text Tool and go to properties panel and set the Text Type
as Dynamic Text and select the Line Type as Multiline then create three text fields.

Select each one at a time and give their instance name in the
Properties Panel as monthnames_txt, daynames_txt and alltext_txt respectively. Create small Satitc Text boxes on top
of each previous text boxes and create labels. At the end of these steps your stage should look somewhat like this.

That done right click on the first frame of the Action layer and select Actions
In the window that opens copy and paste the following script. I think it's sufficiently documented.

//declare two objects of the LoadVars class to load the text file
var text_lv:LoadVars = new LoadVars();
var text1_lv:LoadVars = new LoadVars();

text_lv.load("myText.txt");//load file to display in parts
text1_lv.load("myText.txt");//load file to display the whole text
//display the text in parts
text_lv.onLoad = function (success:Boolean)
{
if (success)
{
monthnames_txt.text =text_lv.monthNames;//show text labelled as "&monthnames"
daynames_txt.text =text_lv.dayNames;//show text labelled as "&daynames"
}
else
{
monthnames_txt.text = " Cannot Open File ";//error message
}
}

//display the whole text
text1_lv.onData = function (myText:String)
{
alltext_txt.text = myText;
}

That's it! Hit Ctrl+Enter to test. If the text is not visible make sure the color of the text fields is not the
same as the background color, also check that you have saved the flash file and the text file in the same folder.

Flash Analog Clock Tutorials

2009-02-18T23:22:00.001+05:30

Open a new file and save it as clock.fla. Rename the first layer as bg and go to Windows -> Color Mixer and set it shown.

In the properties tag below choose the thickness as 3 as shown.

While pressing the Shift button draw a circle with width and height of 200 as shown

Go to “Window->Allign” and click on “Allign Horizontal Centre” and “Allign Vertical Centre”. Make sure “To Stage ” is selected.

Click on the button encircled below to make 4 new layers and name them as actions, hour, min and sec. Your timeline shoul look like this.

Click on the first frame of the sec layer. Select the Line Tool and draw a vertical line of length 90. Select the line and hit F8 to save it as a symbol. Set it as follows. Make sure you click the bottom centre registration.

Click OK and in the Properties tag set the name as sec_mc.

Go to “Window -> Library” and right click on sec_mc and click “Duplicate”. Name it as min_mc. Right click on min_mc and hit “Edit”. Select the line ad set its height in the properties tag as 75. Change the color.

Redo the above and name it as hour_mc with height 50 and a different color.

Click on the first frame of the min layer and drag min_mc on stage. Set the instance name as min_mc.

Click on the first frame of the hour layer and drag hour _mc on stage. Set the instance name as hour _mc.

Press Shift and select all three lines and in the Allign window click “Allign Bottom Edge ” and “Allign Horizontal Centre”. Drag all three to the centre of the circle drawn.

Right Click on the first frame of the actions layer and click “Actions”.

In the window that opens Copy and Paste the followin action script:-

var my_time:Date=new Date;

var hours, min, sec;

//get the present hour minute and second

hours=my_time.getHours();

sec=my_time.getSeconds();

min=my_time.getMinutes();

hours = hours + (min/60);

min=min*6 +(sec/60);

hours=hours*30;

sec=sec*6;

hour_mc._rotation = hours;

sec_mc._rotation = sec;

min_mc._rotation = min;

Right Click on the second frame of each Layer and click “Insert Frame”. Your final timeline should look like this :-

Done! Hit Ctrl+Enter to test what you have done.

Use your Imagination to change the background to make the clock look stylish.

Animated and Custom Mouse Pointer Video Tutorial

2009-01-02T10:50:00.000+05:30

If you want to create a Custom Pointer then follow the steps given below and watch the video

1> Create the shape you want the pointer to be.

2> Select the shape and press F8 or "Right Click->Convert To Symbol" and name it as pointer_mc select Movie Clip Option and click ok

3>Right Click on the object and select actions. On the window that opens copy and paste the following action script :-

onClipEvent(load)
{
Mouse.hide(); //Hides the Mouse Pointer
}
onClipEvent(enterFrame)
{
this._x = _root._xmouse; //assigns the x coordinate of this object as that of the mouse
this._y = _root._ymouse; //assigns the y coordinate of this object as that of the mouse
}
onClipEvent(mouseUp)
{
Mouse.hide(); //to hide the mouse pointer after a right click
}

4 > Press Ctrl+Enter to Test the Movie.

5 > Watch the Video for Clarifications

Contact Me At :- subhrojit86@gmail.com

Introduction to the Timeline and Vector Graphics Tutorials in Flash

2009-01-01T20:46:00.000+05:30

This is a tutorial for vector graphics and an introduction to the Timeline. It is a tutorial for absolute beginners.Enjoy

Difficulty :- 1/5

Contact Me At :- subhrojit86@gmail.com

2008-12-29T20:01:00.000+05:30

Living in Asansol and studying in NIT, Durgapur meant that I could literally avoid staying at the hostel. Inspite of the very bad condition and worse food of Hall 2, one of the few things that made me stay back, even on weekends, was our LAN. I might also add that I didn't even know how to switch on a computer before I came to this college. I could just program in LOGO and BASIC if somebody switched the machine on and started MS DOS so anyway I was hungry for anything there was to know about computers and Windows XP. Then one day I came across a folder shared on the LAN called "Flash Tutorials". I had already been a student of this college and of the CSE department no less, for more than three semesters, so it was pretty hard to get myself to study whats in the normal curriculum let alone a tutorial about something I hadn't heard about in someone else's computer. The only thing that drew me to that folder was most of the files in the folder, with the .swf extension, would not open because I did not have the required software. So I got curious ,looked for the software in the internet and found out that i needed a Flash Player. So I installed it and opened the files. They were tutorials on how to use Macromedia Flash Professional 8.0. They left me awstruck and I've been in love with it since. I've learned quite a bit over this time and want to share my knowledge with those who are new to the magic that is Flash!!