RSS link icon

.

Crazy cloud mouse cursor effect


Okay this time we are going crazy, I just did some funny creative playing around in flash (yet again), so this time I came up with something, well lets call it interesting. I made a crazy cloud following the mouse.

 

I made it with actionscript, (3.0 so dont try it with previous versions of flash).

 

 

Basically what this code does is to take on blurry cloud shape, repeat it, rotate and and change position just a bit to make it seem alive. Then just simply made a mouse follow to the effect.

 

And here is how you can make one for your self.

 

First we need to do some freehand drawing within flash, so with the brush tool, choose a light gray color and draw a funny shape like I did below.

 

flash crazy cloud tutorial

 

Select it and convert to a movie clip, go into the movie clip and reshape it a couple of times in frame 2, 3 and 4 so you have a small animation there.

 

Now go back to the main stage, give the cloud an instance name in the properties panel, I named mine "smoke_mc1"

 

Now go the the filters panel, (by default its docked to the properties panel at the bottom of the stage.

 

Add a blur filters as shown below.

 

flash crazy cloud tutorial

 

The last thing we need is to use actionscript to make the cloud follow the mouse with some delay to make it look more natural when the cloud is not just following the exact path of the mouse position.

 

So just copy and paste the following code into your actionscript panel.

 

// An eventlistener to call the function smokeFollow

smoke_mc1.addEventListener(Event.ENTER_FRAME, smokeFollow);

 

// Hide the original boring mouse icon.

Mouse.hide();

 

// the function to make the cloud follow the mouse path.

function smokeFollow(event:Event):void {

var myRadians:Number = Math.atan2(mouseY, mouseX-this.x);

var myDegrees:Number = Math.round((myRadians*180/Math.PI));

var yChange:Number = Math.round(mouseY-smoke_mc1.y);

var xChange:Number = Math.round(mouseX-smoke_mc1.x);

var yMove:Number = Math.round(yChange/2);

var xMove:Number = Math.round(xChange/2);

 

// adding the small calculations the both the x and y axis and the rotation.

smoke_mc1.y += yMove;

smoke_mc1.x += xMove;

smoke_mc1.rotation = myDegrees+180;

}

 

 


Admin Bob says: 2008-10-13

hi anshu, what error message do you get, maybe I can help you..

anshu says: 2008-08-20

crazy cloud action script give the error in flash professional cs3. how to work crazy cloud action script in adobe flash professional cs3.

ki_vecto says: 2008-07-22

great tutorial! do you know how to do the opposite and repel the could with the mouse thanks a lot for posting the tutorial (-:

bruce banner says: 2008-08-01

um the PS ruined it for me, im ashamed, but ye, this is booyahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

boodle sniggy says: 2008-07-11

why this is booyah