Flash Game Tuts - Free Flash Game Tutorials in AS2 and AS3

How to Create a Game Like Winter Bells in AS3 – Part 2

Part 2: Programming the “Bells”

Let’s get right to it. In this part of the tutorial, we’re going to add the “bells” to the stage. They’ll be 100% randomized so we can continue playing the game forever (You’d like that, wouldn’t you?). Anyway, we first have to create a new MovieClip to symbolize the bell. Because I ain’t the greatest artist, mine is going to be a 25×25 square. When you convert it into a MovieClip called mcBell, also Export it for ActionScript with a class of Bell, so we can add it to the stage through ActionScript.

Do the same thing we did with mcMain and set it to be the precise center of the MovieClip.

Now, we can add some intense actions. Are you ready? Let’s first define some variables at the top of the stage:

var bellTime:int = 0;//how many frames have elapsed since the last bell was made
var bellLimit:int = 20;//how many frames it takes to create a new bell
var bellTop:Number = -50;//the y coordinate that it'll have when we add it to stage
var bellTotal:int = 0;//how many bells have already been added to stage
var bellLastCoord:Number = 0;//the x value of the previous bell

I’ve explained in detail which variable does what. Now, add this function to the bottom of the code:

var bellHolder:MovieClip = new MovieClip();//creating a MovieClip that will hold all the bells
addChild(bellHolder);//add this MovieClip to the stage
function makeLvl():void{//this function will add bells to the stage
	bellTime ++;//increment the time
	if(bellTime >= bellLimit){//if the time for bell creation has been reached
		bellTotal ++;//increase the amount of bells created
		var newBell:Bell = new Bell();//create a new bell instance
		bellHolder.addChild(newBell);//and add it to bellHolder
		bellTime = 0;//reset the time for another creation
	}
}

Now, run the makeLvl() function in the eFrame() function. Next, we have to create an external ActionScript file for the Bell class. Go to File -> New… and select “ActionScript File”. Save it in the same folder as your .fla file as “Bell.as”. Now, place this code into it:

package{
	import flash.display.MovieClip;
	import flash.events.*;
	public class Bell extends MovieClip {

		var _root:Object;//this will symbolize the main timeline

		public function Bell() {
			addEventListener(Event.ADDED, beginClass);
			addEventListener(Event.ENTER_FRAME, eFrame);
		}

		private function beginClass(e:Event):void{
			_root = MovieClip(root);

			if(_root.bellTotal == 1){//if it's the first bell created
				this.x = Math.random()*525;//place it in a random spot on the stage
				_root.bellLastCoord = this.x;
			} else {//otherwise,
				//In order to keep the next bell from being too far away from the previous bell, place it up to 250px away
				this.x = _root.bellLastCoord + (Math.random()*500)-250;
				if(this.x > 537.5){//if it is off the stage to the right
					this.x -= 250;//set it inside the stage
				} else if (this.x < 12.5){//same with too far left
					this.x += 250;
				}
			}
			this.y = _root.bellTop;//set the y's value off the stage
		}
		private function eFrame(e:Event):void{
			this.y += 3;//move the bell slowly downwards
			if(this.hitTestObject(_root.mcMain)){//if this touches the main character
				_root.mainJumping = true;//make him jump
				_root.jumpSpeed = _root.jumpSpeedLimit*-1;//reset the jumpSpeed

				this.removeEventListener(Event.ENTER_FRAME, eFrame);//remove the listeners
				_root.bellHolder.removeChild(this);//and finally remove him from the stage
			}
		}
	}
}

That's some pretty intense code, eh? Now, if you've ever played Winter Bells, you should know that the greatest point booster of the game is the bird that doubles the score. We're going to create one of those in our game as well. It'll be very similar to the Bell, so don't worry.

First of all, let's create a "bird" MovieClip, eh? Mine is simply going to be a sideways triangle pointing right that is 25px wide and 12.5px high. I guess those are pretty good dimensions. Next, convert it into a MovieClip and Export it for ActionScript as Bird.

Now, let's add some actions to this birdy. Add this code to the bottom of the makeLvl() function:

//every 20 bells, we'll create a bird, not including the first one
if(int(bellTotal/20) == bellTotal/20 && bellTime == 1 && bellTotal != 0){
	var newBird:Bird = new Bird();
	bellHolder.addChild(newBird);
}

Next, we'll create a Bird class, same as we did for the Bell. Create a new ActionScript File and name it "Bird.as". Now, place this code into it:

package{
	import flash.display.MovieClip;
	import flash.events.*;
	public class Bird extends MovieClip {

		var _root:Object;//this will symbolize the main timeline
		var speed:int = 5;//how fast this bird will move side to side

		public function Bird() {
			addEventListener(Event.ADDED, beginClass);
			addEventListener(Event.ENTER_FRAME, eFrame);
		}

		private function beginClass(e:Event):void{
			_root = MovieClip(root);

			this.x = -50;//setting x value off the stage
			this.y = _root.bellTop;//set the y value off the stage
		}
		private function eFrame(e:Event):void{
			this.y += 3;//move the bell slowly downwards

			this.x += speed;//moving this guy based on it's speed
			if(this.x >= 537.5){//if it goes too far right
				speed = -5;//make it go backwards
				scaleX = -1;//and turn it around
			}
			if(this.x <= 12.5){//same with too far left
				speed = 5;
				scaleX = 1;
			}

			if(this.hitTestObject(_root.mcMain)){//if this touches the main character
				_root.mainJumping = true;//make him jump
				_root.jumpSpeed = _root.jumpSpeedLimit*-1;//reset the jumpSpeed

				this.removeEventListener(Event.ENTER_FRAME, eFrame);//remove the listeners
				_root.bellHolder.removeChild(this);//and finally remove him from the stage
			}
		}
	}
}

It's basically the same thing we did for the bell, except now it moves from side to side.

Well, here concludes the 2nd part of the tutorial. Next time, we'll make this level playable.