00:00
00:00
Newgrounds Background Image Theme

mihaithecool just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

Create your own Weebl and Bob ani

1,244 Views | 4 Replies
New Topic Respond to this Topic

Create your own Weebl and Bob ani 2009-06-29 19:15:54


So I was going to make an entry for this "contest". One thing led to another, and eventually I had a "create your own Weebl and Bob animation"-thingy, created with 215 lines of AS and nothing else.

Instructions on how to use:
- Create a new AS3 document (keep the standard 550x400 dimensions)
- Paste the code below into the actions of the frame
- Edit the conversation at the top as you like
- Compile :)

Sorry to all of you who don't have CS3 or 4 :P

[Preview]

var myConversation:Array = [];
with (myConversation)
{
	// Conversation start
	push(null); // Pause
	push("w:pie."); // Weebl says "pie."
	push(null);
	push("b:k."); // Bob says "k."
	push(null);
	//Conversation end
}

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.utils.setInterval;  

const TICK:String = "tick";

var tickTimer:uint;
var stuff:Array = [];
var outlineColor:int = 0x999999;
var fillColor:int = 0xFFFFFF;
var lineThickness:int = 8;
var sp:Sprite;
var convo:Array;

function init():void
{
	with (graphics)
	{
		clear();
		beginFill(0xCC3399);
		drawRect(0, 0, stage.stageWidth, stage.stageHeight);
		endFill();
		lineStyle(1, 0xFFFFFF);
		moveTo(0, 20)
		lineTo(stage.stageWidth, 20);
	}
	
	var tff:TextFormat = new TextFormat("Arial", 12, 0xFFFFFF, true);
	tff.align = TextFormatAlign.RIGHT;
	
	var tf:TextField = new TextField();
	tf.text = "the not so everyday API animation of weebl";
	var count:int = tf.length;
	tf.appendText(" and also weebl's friend bob.");
	tf.width = stage.stageWidth;
	tf.setTextFormat(tff, 0, count);
	
	tff.color = outlineColor; tff.size = 10;
	tf.setTextFormat(tff, count, tf.length);
	addChild(tf);
	
	tff = new TextFormat("Arial", 14, 0xFFFFFF, true);
	tff.align = TextFormatAlign.CENTER;
	
	tf = new TextField();
	tf.name = "clickStart";
	tf.text = "Click anywhere to play";
	tf.width = stage.stageWidth; tf.y = stage.stageHeight / 2;
	tf.selectable = false;
	tf.setTextFormat(tff);
	addChild(tf);
	
	stage.addEventListener(MouseEvent.CLICK, animate);
}

function newChar(startRot:int = 0, scale:Number = 1):Sprite
{
	
	var char:Sprite = new Sprite();
	var body:Sprite = new Sprite();
	var shadow:Sprite = new Sprite();
	
	with (shadow.graphics)
	{
		lineStyle(0, 0, 0);
		beginFill(0x8b246a);
		drawEllipse(-75, -14, 150, 28);
		endFill();
	}
	
	with (body.graphics)
	{
		lineStyle(lineThickness, outlineColor);
		
		// Bottom
		beginFill(fillColor);
		moveTo(-75, -75);
		for (var i:int = 0; i <= 180; i += 4)
		{
			lineTo(0 - Math.cos(i * Math.PI / 180) * 75, -75 + Math.sin(i * Math.PI / 180) * 75);
		}
		curveTo(0, -60, -75, -75);
		endFill();
		
		// Top
		beginFill(fillColor);
		moveTo(73, -75 - lineThickness * 2);
		curveTo(0, -60 - lineThickness * 2, -73, -75 - lineThickness * 2);
		curveTo(-56, -190, 0, -190);
		curveTo(56, -190, 73, -75 - lineThickness * 2);
		endFill();
		
		// Eyes
		lineStyle(0, 0, 0);
		beginFill(outlineColor);
		drawEllipse(3, -134, 20, 38);
		drawEllipse(28, -134, 20, 38);
		endFill();
	}
	
	var tween:Tween = new Tween(body, "rotation", Regular.easeInOut, -6, 6, 1.4, true);
	tween.addEventListener(TweenEvent.MOTION_FINISH, function (e:TweenEvent) { Tween(e.target).yoyo(); });
	body.addEventListener(Event.ENTER_FRAME, function (e:Event) {var s:* = e.target.parent.getChildByName("shadow"); var r:Rectangle = e.target.getRect(e.target.parent); s.x = r.left + r.width / 2;} );
	stuff.push(tween);
	
	char.addChild(shadow);
	shadow.name = "shadow";
	char.addChild(body);
	char.scaleX = char.scaleY = scale * (stage.stageWidth / 943);
	return char;
}

function speak(char:Sprite, text:String):Sprite
{
	var speechBubble:Sprite = new Sprite();
	with (speechBubble.graphics)
	{
		lineStyle(lineThickness / 2, outlineColor);
		
		beginFill(fillColor);
		drawEllipse(-40, -96.5, 115, 72);
		endFill();
		
		beginFill(fillColor);
		moveTo(6, -25);
		lineTo(0, 0);
		lineTo(34, -26);
		lineStyle(0, 0, 0);
		lineTo(34, -38);
		lineTo(4, -38);
		endFill();
	}
	
	var tff:TextFormat = new TextFormat("Arial", 14, 0x666666, true);
	tff.align = TextFormatAlign.CENTER;
	
	var tf:TextField = new TextField();
	tf.text = text;
	tf.width = speechBubble.width;
	tf.x = speechBubble.getRect(this).left; tf.y = -70;
	tf.setTextFormat(tff);
	
	speechBubble.addChild(tf);
	speechBubble.x = char.x + 50; speechBubble.y = char.y - char.height + 20;
	return speechBubble;
}

function animate(e:MouseEvent = null):void
{
	removeChild(getChildByName("clickStart"));
	stage.removeEventListener(MouseEvent.CLICK, animate);
	var weebl:Sprite = newChar(-3);
	weebl.x = stage.stageWidth * 0.12; weebl.y = stage.stageHeight * 0.94;
	addChild(weebl);
	
	var bob:Sprite = newChar(0, 0.62);
	bob.x = stage.stageWidth * 0.33; bob.y = weebl.y; bob.scaleX *= -1;
	addChild(bob);
	
	convo = [];
	for each (var i in myConversation)
	{
		if (i == null)
		{
			convo.push(null);
			continue;
		}
		
		var a:Array = i.split(":");
		convo.push(speak((a[0] == "w" ? weebl : bob), a[1]));
	}
	
	tickTimer = setInterval(function ():void { dispatchEvent(new Event(TICK)); }, 2000);
	addEventListener(TICK, tick);
}

function tick(e:Event):void
{
	if (convo.length == 0)
	{
		while(numChildren)
			removeChildAt(0);
		
		clearInterval(tickTimer);
		init();	

		return;
	}
	
	if (sp)
		removeChild(sp);
		
	sp = convo.shift();
	
	if (sp != null)
	{
		addChild(sp);
	}
	
}

init();

Response to Create your own Weebl and Bob ani 2009-06-29 19:20:05


Oh, and feel free to upload the result somewhere and link us ;)

Response to Create your own Weebl and Bob ani 2009-06-29 19:22:58


That's kinda cool


BBS Signature

Response to Create your own Weebl and Bob ani 2009-07-01 10:08:53


Good idea. Here is the loop from the originals if you want to use it: http://www.2shared.com/file/6522686/ed0b 53ca/ug_online.html
And after making some small changes to the speech bubble function, I made this:
http://spamtheweb.com/ul/upload/010709/5 4493_pie.php
Here's the new speechbubble function that allows multiline text:

function speak(char:Sprite, text:String):Sprite
{
	var speechBubble:Sprite = new Sprite();
	with (speechBubble.graphics)
	{
		lineStyle(lineThickness / 2, outlineColor);
		
		beginFill(fillColor);
		drawEllipse(-40, -96.5, 115, 72);
		endFill();
		
		beginFill(fillColor);
		moveTo(6, -25);
		lineTo(0, 0);
		lineTo(34, -26);
		lineStyle(0, 0, 0);
		lineTo(34, -38);
		lineTo(4, -38);
		endFill();
	}
	
	var tff:TextFormat = new TextFormat("Arial", 14, 0x666666, true);
	tff.align = TextFormatAlign.CENTER;
	
	var tf:TextField = new TextField();
	tf.text = text;
	tf.multiline = true;
	tf.wordWrap = true;
	tf.width = speechBubble.width - 8;
	tf.autoSize = "center";
	tf.x = speechBubble.getRect(this).left + 4;
	tf.setTextFormat(tff);
	tf.y = -58 - ( tf.height / 2 );
	
	speechBubble.addChild(tf);
	speechBubble.x = char.x + 50; speechBubble.y = char.y - char.height + 20;
	return speechBubble;
}

Response to Create your own Weebl and Bob ani 2009-07-01 10:21:27


At 7/1/09 10:08 AM, StaliN98 wrote: Good idea. Here is the loop from the originals if you want to use it: http://www.2shared.com/file/6522686/ed0b 53ca/ug_online.html
And after making some small changes to the speech bubble function, I made this:
http://spamtheweb.com/ul/upload/010709/5 4493_pie.php

Nice, the whole first Weebl and Bob cartoon I see ;D