Dialogs

SHOW OUTPUT
function {

people_cb = new ComicBubbles("pict1", {canvas: {fontFamily: 'Comic Sans MS', fontSize: '25px', fontWeight: 'bold', textAlign: 'center', lineHeight: 1.5, color: '#483d8b'}}, {bubble: [
	{id: 'bub1', text: "Tell us more about it", x: 242, y: 391, width: 130, height: 109, bubbleStyle: 'speak', tailLocation: 'nw', tailX: 213, tailY: 340, visible: false},
	{id: 'bub2', text: "I'm not that type of person", x: 354, y: 279, width: 184, height: 79, bubbleStyle: 'speak', tailLocation: 'n', tailX: 412, tailY: 216, visible: false},
	{id: 'bub3', text: "He's so\nshy..", x: 646, y: 25, width: 94, height: 62, fontSize: '21px', opacity: 0.5, bubbleStyle: 'think', tailLocation: 's', tailX: 695, tailY: 153, visible: false}
]});

people_cb.addBubble({id: 'next1', text: "NEXT", x: 684, y: 466, width: 88, height: 38, fontFamily: 'Arial Black', background: '#ff4500', color: '#ffffff', opacity: 1, bubbleStyle: 'arrow', tailLocation: 'e', tailX: 793, tailY: 485, visible: false});

var bub1 = people_cb.getBubbleById('bub1'),
	bub2 = people_cb.getBubbleById('bub2'),
	bub3 = people_cb.getBubbleById('bub3'),
	next1 = people_cb.getBubbleById('next1');

bub1.delay(1000).pumpUp();
bub2.delay(3000).fadeIn();
bub3.delay(5000).pumpUp(function(){ next1.show(); });
next1.onMouseEvent(function(){
	next1.delay(100).remove();
	bub1.hide().setText("Come on,\nwe want details!").setX(249).setY(373).setWidth(115).setHeight(109).setTailLocation('nw').setTailX(208).setTailY(328).delay(2000).fadeIn(200);
	bub2.hide().setText("Don't be\nso shy!").setX(443).setY(373).setWidth(117).setHeight(77).setTailLocation('ne').setTailX(597).setTailY(314).delay(200).fadeIn();
	bub3.hide().setText("To tell or\nnot to tell?..").setX(166).setY(8).setWidth('auto').setHeight('auto').setFontSize('19px').setFontWeight('normal').setOpacity(0.6).setTailLocation('se').setTailX(357).setTailY(80).delay(4000).fadeIn(function(){
		people_cb.setReadonly(false);
		bub1.setReadonly(false);
		bub2.setReadonly(false);
		bub3.setReadonly(false);
	});
});

}
 

Funny scenes

function {

var animals = ['BEAR','PIG','DEER','LION','HORSE','SNAKE','BIRD','FISH','COW','CAT','DOG'];
var dog_cat_cb = new ComicBubbles("pict2");

dog_cat_cb.addBubble({id: 'bub1', text: "I'm\na happy\n"+animals[0], x: 93, y: 275, width: 64, height: 66, textAlign: 'center', lineHeight: 1.5, background: '#ff4500', color: '#ffffff', bubbleStyle: 'speak', tailLocation: 'n', tailX: 138, tailY: 223});
dog_cat_cb.addBubble({id: 'bub2', text: "crazy?", x: 342, y: 114, width: 54, height: 28, fontSize: '17px', textAlign: 'center', lineHeight: 1.5, background: '#483d8b', color: '#ffffff', opacity: 0.85, bubbleStyle: 'think', tailLocation: 's', tailX: 379, tailY: 209, visible: false});
dog_cat_cb.addBubble({id: 'bub3', text: "I'm\na happy\n"+animals[10], x: 427, y: 336, width: 64, height: 66, textAlign: 'center', lineHeight: 1.5, background: '#32cd32', bubbleStyle: 'speak', tailLocation: 'nw', tailX: 413, tailY: 328, visible: false});

var bub1 = dog_cat_cb.getBubbleById('bub1');
var bub2 = dog_cat_cb.getBubbleById('bub2');
var bub3 = dog_cat_cb.getBubbleById('bub3');

bub1.delay(800).setText("I'm\na happy\n"+animals[1], function(){
	bub2.fadeIn(1000).delay(2000).fadeOut(1000).remove(function(){ bub3.fadeIn(); });
}).delay(800).setText("I'm\na happy\n"+animals[2]).delay(800).setText("I'm\na happy\n"+animals[3]).delay(800).setText("I'm\na happy\n"+animals[4]).delay(800).setText("I'm\na happy\n"+animals[5]).delay(800).setText("I'm\na happy\n"+animals[6]).delay(800).setText("I'm\na happy\n"+animals[7]).delay(800).setText("I'm\na happy\n"+animals[8]).delay(800).setText("I'm\na happy\n"+animals[9]).delay(1500, function(){
	bub1.setTailX(142).setTailY(290).moveTo(427,336,'fast').setTailLocation('nw').setTailX(413).setTailY(328).setReadonly(false);
	bub3.setTailX(467).setTailY(347).moveTo(93,275,'fast').setTailLocation('n').setTailX(138).setTailY(223);
});

}


var bear_cb = new ComicBubbles("pict3",{bubble:
	{id: 'bear1', text: "ROAAAR!", x: 70, y: 262, width: 113, height: 37, fontFamily: 'Comic Sans MS', fontSize: '23px', fontWeight: 'bold', textAlign: 'center', lineHeight: 1.5, background: '#dc143c', color: '#7fff00', bubbleStyle: 'scream', tailLocation: 'n', tailX: 127, tailY: 181}
});
function {

var bear1 = bear_cb.getBubbleById('bear1'),
	bg = bear1.getBackground(),
	col = bear1.getColor();
	
bear1.hide().setBackground(col).setColor(bg).fadeIn(150).delay(50).setX(69).setY(261).delay(50).setX(71).setY(261).delay(50).setX(69).setY(263).delay(50).setX(71).setY(263).delay(50).setX(70).setY(262).delay(50).setX(69).setY(261).delay(50).setX(71).setY(261).delay(50).setX(69).setY(263).delay(50).setX(71).setY(263).delay(50).setX(70).setY(262).delay(50).setX(69).setY(261).delay(50).setX(71).setY(261).delay(50).setX(69).setY(263).delay(50).setX(71).setY(263).delay(50).setX(70).setY(262).delay(50).setX(69).setY(261).delay(50).setX(71).setY(261).delay(50).setX(69).setY(263).delay(50).setX(71).setY(263).delay(50).setX(70).setY(262);

}