5

scris de:
Peter

Flash BitmapData Glass Effect

11.05.09

BitmapData tutorialIn this new tutorial you will learn how to use BitmapData to draw an image and how to draw only one part of the desired image and apply an effect or transformation to it (in this case a blur effect). To get started we create a new MovieClip in the library and inside it another MovieClip that will be the holder for our bitmapdata(it has an instance name of “hld”). Also import import in the flash file an image and convert it to MovieClip. If you don’t want to do all of this you should get the starter files here .

Now let’s arrange our stage. First of all we add the MovieClip that contains the image and give it an instance name of “img” on top of that we add the holder and give it an instance name of “scrol”.

Let’s begin the coding: add the following code in the first frame…

var first:Boolean=true;
var bmp:Bitmap=new Bitmap();

The variable “first” tell’s us if it’s the first time that we call the draw function, if not we can clear our bitmap called “bmp”.  Now will add an Event listener to our “scrol” MovieClip.

scrol.addEventListener(MouseEvent.MOUSE_DOWN,strtDrag);

function strtDrag(e:MouseEvent){
first=false;//we set the variable first to false
scrol.my=scrol.mouseY;//we save the current mouse Y
scrol.removeEventListener(MouseEvent.MOUSE_DOWN,strtDrag);
scrol.addEventListener(MouseEvent.MOUSE_MOVE,repos);
scrol.addEventListener(MouseEvent.MOUSE_UP,rem);
}

When we mouse down on our “scrol” MovieClip we remove the event listener for mouse down and add two new events: one to listen for the mouse move event so that our movieclip will follow the mouse on the Y axis and another to listen for the mouse up event so we can stop the draging. Now let’s add our other functions.

function rem(e:MouseEvent){
scrol.addEventListener(MouseEvent.MOUSE_DOWN,strtDrag);
scrol.removeEventListener(MouseEvent.MOUSE_MOVE,repos);
scrol.removeEventListener(MouseEvent.MOUSE_UP,rem);
}


function repos(e:MouseEvent){
scrol.y=mouseY-scrol.my;//change the y position
beginDraw();//the function that does the bitmap drawing
}

If you are asking: why not use “startDrag()” instead of all this code. The answer is that in order to use it only on the Y axis you should create a new Rectangle variable so you can limit it only on the Y axis. Because the center point of “scrol” is in the top left corner we need to substract from the current mouse position our variable. Now let’s create the beginDraw function:

function beginDraw() {
if(!first){
scrol.hld.removeChild(bmp);
}
var bmd:BitmapData=new BitmapData(scrol.width,scrol.height);
var bmd2:BitmapData=new BitmapData(444,400);
var rectangle:Rectangle=new Rectangle(0,scrol.y,scrol.width,scrol.height);
bmd2.draw(img);
bmd.copyPixels(bmd2,rectangle,new Point(0,0));
bmd2.dispose();
bmp.bitmapData=bmd;
var bf:BlurFilter=new BlurFilter(6,6,3);
bmp.filters=[bf];
scrol.hld.addChild(bmp);
}

beginDraw();

In order to draw just the part of the image that is under the “scrol” MovieClip,  create two bitmapData variables: one to copy the whole image and another to copy only the pixels that we need.Finally we add a blur filter to the bitmap and call our “beginDraw” function so we can see the effect the first time we enter the flash movie. When you test your movie it should look like this:

Get Adobe Flash player

You can download the finished source files here.

2 comentarii        legatura permanenta, flux RSS comentarii
  1. Peter says:

    The sources are for Flash CS4, and Flash Player 10.

  2. ujka vanya says:

    which version is source file [fla] – Flash 8 or higher?

Comentarii

Email-ul tau nu va fi publicat. Numele si email-ul sunt obligatorii.