# Bubbles like an Old Wurlitzer Jukebox?

**URL:** <https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591>\
**Category:** flash\
**Created:** [March 19, 2006, 9:13pm UTC](https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591 "2006-03-19T21:13:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rustyd](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@Rustyd](https://forum.kirupa.com/u/Rustyd)\
**Post date:** [March 19, 2006, 9:13pm UTC](https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591/1 "2006-03-19T21:13:04Z")

</div>

Greetings,

I am attempting to create a bubble effect like those old jukeboxes that have that clear or reddish tint tubes with the bubbles rising up through them like so - [http://www.istockphoto.com/file\_closeup/when/settings/past/901788\_pink\_jukebox.php?id=901788](http://www.istockphoto.com/file_closeup/when/settings/past/901788_pink_jukebox.php?id=901788)

So, I created a Mask above my Actions layer; but it does not mask at all - the bubbles work, just no masking.

I may be going about this totally the wrong way, but I am just learning.

For the bubbles, I created them using only AS from a tutorial as follows (probably simple to you Gurus!):  
for(i=0;i\<60;i++) {  
var t = this.attachMovie(“bubble”,“bubble”+i,i);  
t.\_x = Math.random()\*450;  
t.\_y = Math.random()\*400;  
t.dx = Math.round(Math.random()\*450);  
t.dy = Math.round(Math.random()\*400);  
t.\_xscale = Math.random()\*300+40;  
t.\_yscale = t.\_xscale;  
t.onEnterFrame = mover;  
}  
function mover() {  
this.\_x += (this.dx-this.\_x)/3;  
this.\_y += (this.dy-this.\_y)/3;  
if(Math.round(this.\_x) == this.dx) {  
this.dx = Math.round(Math.random()\*450);  
this.dy = Math.round(Math.random()\*400+10);  
}  
}

Any help or pointing me in the right direction would be appreciated!!

Rustyd

---

<div class="post-metadata">

**Author:** ![ieatcotten](https://avatars.discourse-cdn.com/v4/letter/i/3da27b/32.png) [@ieatcotten](https://forum.kirupa.com/u/ieatcotten)\
**Post date:** [March 20, 2006, 1:15am UTC](https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591/2 "2006-03-20T01:15:28Z")

</div>

I think this may be what you are wanting.  
I am definitely no guru and there are probably better ways of doing this but here is my stab at it.

I attached .fla and .as file

```auto
class CIRCLE{
	var radius:Number;
	var num:Number;
	var thiscircle:Object;
	
	public function CIRCLE(r,n){
		radius = r;
		num = n;
		drawCircle();
	}
	
	private function drawCircle(){
		thiscircle = _root.createEmptyMovieClip("bubble"+num,_root.getNextHighestDepth());
		thiscircle.lineStyle(2,0x000000,70);
		var theta = 45*(Math.PI/180);
		var cr = radius/Math.cos(theta/2);
		var angle = 0;
		var cangle = -theta/2;
	
		thiscircle.moveTo(radius, 0);
	
		for(var i=0;i<8;i++){
			angle += theta;
			cangle += theta;
			
			var endX = radius*Math.cos (angle);
			var endY = radius*Math.sin (angle);
			var cX = cr*Math.cos (cangle);
			var cY = cr*Math.sin (cangle);
	
			thiscircle.curveTo(cX,cY,endX,endY);
		}
	}
}

```

```auto
import CIRCLE;
var bubbles = [];
var makeBubbleInt = setInterval(makeBubble,100);
var floatBubbleBubbleInt = setInterval(floatBubble,10);
var bubbleNum = 0;

function makeBubble(){
	var bubble:CIRCLE = new CIRCLE(10,bubbleNum);
	bubbleNum++;
	bubbles.push(bubble.thiscircle);
	bubble.thiscircle._y = base._y;
	bubble.thiscircle._x = base._x + Math.random() * base._width;
}

function floatBubble(){ //move all the bubbles up
	trace(bubbles.length);
	clearInterval(floatBubbleBubbleInt);
	for(var i=0;i<bubbles.length;i++){
		if(bubbles*._y > 100){
			bubbles*._y--;
			//Maybe change the X value here using Sign so the bubbles oscillate
		}else{
			bubbles*.removeMovieClip();
			bubbles.splice(i,1);
		}
	}
	floatBubbleBubbleInt = setInterval(floatBubble,10);
}

```

---

<div class="post-metadata">

**Author:** ![ieatcotten](https://avatars.discourse-cdn.com/v4/letter/i/3da27b/32.png) [@ieatcotten](https://forum.kirupa.com/u/ieatcotten)\
**Post date:** [March 20, 2006, 1:52am UTC](https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591/3 "2006-03-20T01:52:34Z")

</div>

Sorry, I should have read your post closer. Here is a version using a mask.

---

<div class="post-metadata">

**Author:** ![Rustyd](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@Rustyd](https://forum.kirupa.com/u/Rustyd)\
**Post date:** [March 20, 2006, 9:57pm UTC](https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591/4 "2006-03-20T21:57:00Z")

</div>

Thanks ieatcotton!:party:  
That’s EXACTLY what I was trying to do. I don’t understand how you did it, but I am going to look very closely.

FYI, “neighbor”, I live about 30 minutes to the east of you-Denison: hell of a storm last couple of days!

Thanks again,

Rustyd

---

<div class="post-metadata">

**Author:** ![Rustyd](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@Rustyd](https://forum.kirupa.com/u/Rustyd)\
**Post date:** [March 27, 2006, 5:36pm UTC](https://forum.kirupa.com/t/bubbles-like-an-old-wurlitzer-jukebox/182591/5 "2006-03-27T17:36:07Z")

</div>

Hi,

I am (unsuccessfully) attempting to create a jukebox which has bubbles floating up through the glass sides.

Using ‘ieatcotton’s’ example, I have been able to create the effect I want: but only within his example, not mine which is attached.

WHAT am I doing wrong?

Thanks,  
Rustyd