Dynamic AS3 Glow Effect

In Actionscript 3 , we can create dynamic Glow effects using glow filters.

The GlowFilter class applies a lighting effect to display objects, making it appear that a light is being shined up from underneath the object to create a soft glow.
Similar to the drop shadow filter, the glow filter includes properties to modify the distance, angle, and color of the light source to produce varying effects. The GlowFilter also has several options for modifying the style of the glow, including inner or outer glow and knockout mode.


Below is the sample glow effect created using As3

Here you can get step by step tutorial to create Dynamic glow effect.

1.Create MovieClip

2.Give instance name to movieclip

3.Create New Layer

4.Write Script on that

5.Run The file.

1.Create MovieClip

Create one shape or text in stage, and make it as an movieclip using Ctrl+F8.

2.Give instance name to movieclip

Give instance name to that movieclip , for example “mc”

3..Create New Layer

Create new layer on Timeline, name it as an “Action Layer”

4.Writing script

Click on “Action Layer” and Press “F9” , Now write below code on this.

import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;


var glow:GlowFilter = new GlowFilter();
glow.color = 0xffff00;
glow.alpha = 1;
glow.blurX = 25;
glow.blurY = 25;
glow.quality = BitmapFilterQuality.MEDIUM;

//crossGraphic.filters = [glow];
mc.filters=[glow];

Click on “Action Layer” and Press “F9” , Now write below code on this.

5.Run The file:

Give Ctrl+ENTER and run the file, you will get an Glow effect.

Attractive Mouse Trailer using AS3

Notice the following sample swf and just move your mouse around the text to view the mouse trailer.

1. Create new Flash File (File->;New or Ctrl + N) and Name it as mouse trailer.
2. Draw circle with "gradient fill" like below image.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
3. Convert this image as an movieclip using Modify->covert to symbol or press F8, choose Movieclip.and name it as obj.
4. Make new Movieclip (Insert-> New Symbol or press ctrl+f8) and name it as "glow".
5. Drag and drop "obj" movieclip from Library.
6. Now we are going to apply some filter effects. open "Filters" window (using window->properties->Filters)
7. Apply Glow filter with color #FFFF00, Blur X:12 Blur Y:12, like below image
   
   
   
   
   
   
   
   
   
   
   
   
   
   
8. Now apply Blur filter with Blur X value 5 , Blur Y value 5 like below image
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
9. Then apply Gradient glow effect like below image.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
10. Now right click on "glow" movieclip in libraray and click on Linkage, now set Class name as "Element".
11. Now press ctrl+N and choose Actionscript File to apply script .
12. copy and paste below codes in to this , and save this file in the same location of your fla file.
    
    
    
    
    
    package digizone{
    import flash.display.*;
    import flash.events.*;
    
    public class mousetrailer extends MovieClip {
    private var count=4;
    private var x1=mouseX;
    private var y1=mouseY;
    public function mousetrailer() {
    
    addEventListener(Event.ENTER_FRAME,showTrailer);
    }
    public function showTrailer(e:Event) {
    if (x1!=mouseX||y1!=mouseY) {
    x1=mouseX;
    y1=mouseY;
    var glower:Element=new Element();
    glower.x=mouseX;
    glower.y=mouseY;
    glower.counter=0;
    glower.width+=15;
    glower.height+=15;
    glower.addEventListener(Event.ENTER_FRAME,fadeIt);
    addChild(glower);
    
    
    }
    }
    public function fadeIt(evt:Event) {
    evt.currentTarget.counter+=1;
    //verify if the objects showl start to die
    if (evt.currentTarget.counter>count) {
    //if it should die we start to fade it and also shrink it
    evt.currentTarget.alpha+=-0.03;
    evt.currentTarget.width=evt.currentTarget.height-=0.3;
    }
    //once it has faded completly, we remove the event from the object and also remove the object from the stage
    if (evt.currentTarget.alpha<=0)
    {
    evt.currentTarget.removeEventListener(Event.ENTER_FRAME, fadeIt, false); evt.currentTarget.parent.removeChild(evt.currentTarget);
    } } } }
    
    
    
13. In mousetrailer.fla , open properties window and type your actionscript class name in Document class .
14. Now press ctrl+Enter to run the application.

Download Sourcefile from here

AS3 Drag and Swap Objects

This tutorial will teach you drag and drop of objects and also it the depth control of objects. Refer sample swf file given below . In this you can click and drag any objects to anywhere and also the object which you clicked will have an highest depth .


Let’s start. Open new Flash cs3 file. Create Movie clips with different shapes, and placed in a stage and give an instance name. In property window give class name as “drag” .
Now we will start coding part. Create new action script file and name it as “drag”. And paste the following code in this

package {

import flash.display.*;
import flash.events.MouseEvent;
public class drag extends Sprite {
var object:Sprite;
var offsetX:Number;
var offsetY:Number;
var snapToCenter:Boolean = false;
public function drag():void {
mcButterfly.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
mcButterfly.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
mcSquare.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
mcSquare.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
mcCircle.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
mcCircle.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
mcSpade.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
mcSpade.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
mcHeart.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
mcHeart.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
mcButterfly.buttonMode=true;
mcSquare.buttonMode=true;
mcCircle.buttonMode=true;
mcSpade.buttonMode=true;
mcHeart.buttonMode=true;

}
function startdrag(evt:MouseEvent) {
evt.target.startDrag();

swap(evt.target);

}
function stopdrag(evt:MouseEvent) {
evt.target.stopDrag();
}
function swap(o:*):void {
var highestDepth:uint = numChildren - 1;
setChildIndex(o, highestDepth);

if (snapToCenter) {
offsetX = 0;
offsetY = 0;

o.x = mouseX;
o.y = mouseY;
} else {
offsetX = o.x - mouseX;
offsetY = o.y - mouseY;
}
}
}
}

Thats all . now run your fla file. you can Download sourcefile from here

AS3 Drawing Pad

In this tutorial we are going to develop flash drawing pad using actionscript3. In this tutorial we are using color picker component and Numeric stepper.




Let’s start . open New flash cs3 file. Create new Movie clip , name it as “drawpad”. Drag and drop color component from components list and give instance name as “mcColor” , similarly drag and drop Numeric stepper and name it as “mcStepper”. Create new Moviclip called “bg”, and make drawable area inside that. Now drag this Movieclip inside “drawpad” Movieclip. Now write the following script in the first frame of “drawpad” Movieclip.
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.MovieClip;
var isDrawing:Boolean = false;
var child:Shape = new Shape();
var bytes:ByteArray;
var thisX;
var thisY;
canvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(event:MouseEvent) {
isDrawing = true;
if ( isDrawing) {

var val=mcStepper.value;
var col=mcColor.selectedColor;
child.graphics.lineStyle(val, col);
child.graphics.moveTo(mouseX, mouseY);
thisX=mouseX;
thisY=mouseY;
}
}
function mouseMoveHandler(event:MouseEvent) {
//cursor.x=mouseX;
//cursor.y=mouseY;
if (isDrawing) {

child.graphics.lineTo(mouseX, mouseY);
canvas.addChild(child);
//child.graphics.curveTo(thisX,thisY,mouseX, mouseY);
}
/*if(mouseX <> 295)
{
isDrawing = false;
}
if(mouseY <> 145)
{
isDrawing = false;
}*/
}
function mouseUpHandler(event:MouseEvent) {

isDrawing = false;
var myBitmapData:BitmapData = new BitmapData (canvas.width, canvas.height, false, 0x00FFFFFF);
var rect:Rectangle = new Rectangle(0, 0, canvas.width, canvas.height);
myBitmapData.draw(canvas);
//
bytes = myBitmapData.getPixels(rect);
//
bytes.position = 0;
}

Thats all. you can download source file from here