Interactive Bubbles with ActionScript 3
March 16, 2009 by: smonte
Learn how to randomly generate bubbles that interact with the mouse movement! We use ActionScript 3 as you may have guessed.
Setting up the environment
1. Create a new Flash document of size 400×300.
2. Draw a circle on the stage without any stroke. Make it of size 32×32.
3. Apply a radial fill for the circle. Use the following settings.
4. You should now have a similar looking circle.
5. Convert the circle to a movie clip. Name it Bubble and set the registration point to the center.
6. Linkage the movie clip to a class named “Bubble” (right click the movie clip in the library and select “Linkage” (CS3) or “Properties” (CS4)).
7. Remove the movie clip from the stage.
Moving to ActionScript 3
8. In the first frame of your Flash movie, type the following.
//The number of bubbles we will have on the stage const NUMBER_OF_BUBBLES:uint = 60; //Save the stage width and height var stageWidth:Number = stage.stageWidth; var stageHeight:Number = stage.stageHeight; //This array will contain all the bubbles var bubbles:Array = new Array(); //This loop creates and positions the bubbles to random locations for (var i:uint = 0; i < NUMBER_OF_BUBBLES; i++) { //Create a new bubble var bubble:Bubble = new Bubble(); //Assign a random y coordinate (from 0 to 300) bubble.y = Math.random() * stageHeight; //Calculate the horizontal distance from the mouse cursor to the center of the stage var distanceFromCenter:Number = mouseX - stageWidth / 2; //Calculate the x coordinate (from -400 to 800) bubble.x = Math.random()*stageWidth-Math.random()*distanceFromCenter*2; //Assign a random scale bubble.scaleX = bubble.scaleY = Math.random() + 0.3; //Assign a random alpha bubble.alpha = Math.random() + 0.5; //Assign a random current angle for the bubble bubble.currentAngle = Math.random() * Math.PI * 2; //Assign a random angle speed bubble.angleSpeed = Math.random() * 0.1; //Assign a random radius for the bubble bubble.radius = Math.random() * 5; //Assign a random y speed bubble.ySpeed = - Math.random() * 0.5; //Assign a random y acceleration speed bubble.acceleration = - Math.random() * 0.2; //Add the bubble to the bubbles array bubbles.push(bubble); //Add the bubble to the stage addChild(bubble); } //Add ENTER_FRAME listener for animating the bubbles addEventListener(Event.ENTER_FRAME, moveBubbles); //This function is called in each frame function moveBubbles(e:Event):void { //Calculate the horizontal distance from the mouse cursor to the center of the stage var distanceFromCenter:Number = mouseX - stageWidth / 2; //Calculate a new x speed for the bubbles var xSpeed:Number = distanceFromCenter / 32; //Loop through the bubbles array for (var i:uint = 0; i < bubbles.length; i++) { //Save the bubble to a local variable var bubble:Bubble = (Bubble)(bubbles[i]); //Update the ySpeed of the bubble (accelerate) bubble.ySpeed += bubble.acceleration; //Update the y coorinate bubble.y+=bubble.ySpeed; //Update the current angle of the bubble bubble.currentAngle+=bubble.angleSpeed; //Update the x coordinate bubble.x+=Math.sin(bubble.currentAngle)*bubble.radius+xSpeed; //Check if the bubble is over the top of the stage if (bubble.y<0) { //Assign a new random x coordinate bubble.y=stageHeight; bubble.x=Math.random()*stageWidth-Math.random()*distanceFromCenter*2; //Assign a new random current angle bubble.currentAngle=Math.random()*Math.PI*2; //Assign a new random ySpeed bubble.ySpeed= -Math.random()*0.5; } } }
9. You are done, test your movie! Hope you enjoyed this tutorial and found it useful.
Download .fla
Related tutorials:
Comments
11 Responses to “Interactive Bubbles with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
Nice tutorial work !
Does anyone knows how can i use this bubble effect at a part of my stage (inside a movie clip for example)?
I have tryed to change the var to:
var stageWidth:Number = moviebubble_mc.width;
var stageHeight:Number = moviebubble_mc.height;
where moviebubble_mc it’s my movieclip…
but it doesn’t seems to work proper… the bubbles coming out of the specified frame of my mc..
Nice work! How can force bubble to go up and not change direction on mouse move?
Thanks for the bubbles, love them!
Great tutorial.
I would like to generate without following the mouse…the bubbles just rise and pop and don’t go off at an angle. I also would like to constrain the bubbles to an area so that you always see whole bubbles on the stage. I would appreciate your advice how to modify the code. Thanks!
This is great work buddy and thank yu very much for Your help.Looking forward for some interesting code form you and i suggest if this can be modify to bubble in specific place rather than spreading the whole stage..
thanks again
Awesome tutorial!
@stephen D – You are looking in the wrong place. You need to look at this line
//Add the bubble to the stage
addChild(bubble);
One possible solution would be to make a movie clip named background (preferably a vector or something the size of your background), put it on the stage, and give it an instance name of something like “holder”. Then in your code on that addChild line type holder.addChild(bubble);. That will add the bubbles to your holder movie clip instead of directly onto the stage. (not sure if that will work, but its where you should start).
@bobby – The creator of this tutorial has commented almost every line of the code. How much more explaining could you need?!
I want the bubbles to fly in the background of my project.. how do you achieve that effect..
I’ve attempted manipulating this line;
//Check if the bubble is over the top of the stage
if (bubble.y<0) {
Helpful tut man, great job.
@ austin, Vink Export for actionscript and Export in first frame. Goto Class en type in “Bubble” It should automaticly do.
you dont explain enough. thanks for nothing
after i click on Linkage what do i do before i remove from stage
Can you please use actionscript 2…
i dont have CS3 or CS4