Subscribe By RSS | Email

Flex | Flash | Air | AS3
Tutorials, Resources,
Tips & Tricks

Christmas Tree Lighting with AS3

December 22nd, 2009 in Flash

The following flash tutorial will guide you to create a Christmas Tree animation where the user can decorate the tree as he wishes and then put the light on to make the christmas bulbs sparkling.

1. Create a new flash file (Actionscript 3.0) and save it as tree.fla.

2. Rename “layer 1″ to “tree” and on this layer draw your christmas tree. Convert it to a movie clip and give it an instance name of “tree_mc”.

3. Create a new layer named “bulbs”. On this layer create all kinds of bulbs that you want to put on your tree. Convert each bulb to a movie clip with registration point at the top left and export it for actionscript (class : RedBulb, BlueBulb, …).

Give each bulb an instance name of “red_bulb”, “blue_bulb” etc …

4. Create a new layer named “light_btn”. Create a movie clip with 2 frames, the first for the ON state and the second for the OFF state. Give it an instance name of “light_mc”.

5. Create an “actions” layer and with its first frame selected open the actions panel.
There are 2 parts to do. The first part consists of creating the drag and drop bulbs that the user can put on the tree to his convenience. The second part consists of making the lighting.

6. So let’s begin coding. First store all bulbs types in an array. When the user will interact with them a new bulb of the chosen type will be created. To do so, loop through the array to add a MouseDown event listener.

var bulbsType : Array = [red_bulb, blue_bulb,yellow_bulb, purple_bulb, orange_bulb];

for (var i:int = 0; i<bulbsType .length;i++){
	bulbsType [i].addEventListener(MouseEvent.MOUSE_DOWN, createBulb);
	bulbsType [i].buttonMode = true;
}

7. Create an array that we use to store all bulbs that the user will put on the tree.

var bulbs:Array  = new Array();

In the createBulb function, first we check which bulb type the user has chosen and create the matching bulb using the classes that we have created earlier by exporting each bulb type to actionscript.
Then we call the startDrag method and add MouseUp and MouseDown event listeners in order to create the drag and drop interactions.

function createBulb(e:MouseEvent):void {
	var bulb:MovieClip;

	switch(e.target.name){
		case "red_bulb":
			bulb = new RedBulb();
			break;
		case "blue_bulb":
			bulb = new BlueBulb();
			break;
		case "yellow_bulb":
			bulb = new YellowBulb();
			break;
		case "purple_bulb":
			bulb = new PurpleBulb();
			break;
		case "orange_bulb":
			bulb = new OrangeBulb();
			break;
	}

	bulb.buttonMode = true;
	bulb.x = e.target.x;
	bulb.y = e.target.y;
	addChild(bulb);			

	bulb.startDrag();
	bulb.addEventListener(MouseEvent.MOUSE_DOWN, dragBulb);
	bulb.addEventListener(MouseEvent.MOUSE_UP, dropBulb);		

}

8. The dragBulb function simply call the StartDrag method.
The dropBulb function checks whether the bulb has hit the tree. If so it calls the stopDrag method and add the bulb to the array that contains all the bulbs.

function dragBulb(e:MouseEvent):void {
	e.target.startDrag();
}

function dropBulb(e:MouseEvent):void {
	if (e.target.hitTestObject(tree_mc)){
		e.target.stopDrag();
		bulbs.push(e.target);
	}
}

9. Now for the lighting part, we use a Timer to create the sparkling effect on the bulbs.
When the light is ON we start the Timer and loop though the array containing all bulbs on the tree to change randomly their alpha property.
When light is OFF we stop the Timer.

var lighting:Boolean = false;
light_mc.stop();
light_mc.buttonMode = true;
light_mc.addEventListener(MouseEvent.CLICK,toggleLight);

var timer:Timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, lightOn);

function toggleLight(e:MouseEvent):void{
	if(!lighting){
		timer.start();
		light_mc.gotoAndStop(2);
		lighting = true;
	}
	else {
		timer.stop();
		light_mc.gotoAndStop(1);
		lighting = false;
		for (var i:int =0; i < bulbs.length; i++){
  			var bulb:MovieClip = bulbs[i];
  			bulb.alpha = .5;
		}
	}
}

function lightOn(e:TimerEvent):void{
	for (var i:int =0; i < bulbs.length; i++){
  		var bulb:MovieClip = bulbs[i];
  		bulb.alpha = Math.random();
	}
}

Here’s the final code, test your movie to see in action. Merry Christmas !!!

var bulbsType : Array = [red_bulb, blue_bulb,yellow_bulb, purple_bulb, orange_bulb];

for (var i:int = 0; i<bulbsType .length;i++){
	bulbsType [i].addEventListener(MouseEvent.MOUSE_DOWN, createBulb);
	bulbsType [i].buttonMode = true;
}

var bulbs:Array  = new Array();

function createBulb(e:MouseEvent):void {
	var bulb:MovieClip;

	switch(e.target.name){
		case "red_bulb":
			bulb = new RedBulb();
			break;
		case "blue_bulb":
			bulb = new BlueBulb();
			break;
		case "yellow_bulb":
			bulb = new YellowBulb();
			break;
		case "purple_bulb":
			bulb = new PurpleBulb();
			break;
		case "orange_bulb":
			bulb = new OrangeBulb();
			break;
	}

	bulb.buttonMode = true;
	bulb.x = e.target.x;
	bulb.y = e.target.y;
	addChild(bulb);			

	bulb.startDrag();
	bulb.addEventListener(MouseEvent.MOUSE_DOWN, dragBulb);
	bulb.addEventListener(MouseEvent.MOUSE_UP, dropBulb);		

}

function dragBulb(e:MouseEvent):void {
	e.target.startDrag();
}

function dropBulb(e:MouseEvent):void {
	if (e.target.hitTestObject(tree_mc)){
		e.target.stopDrag();
		bulbs.push(e.target);
	}
}

var lighting:Boolean = false;
light_mc.stop();
light_mc.buttonMode = true;
light_mc.addEventListener(MouseEvent.CLICK,toggleLight);

var timer:Timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, lightOn);

function toggleLight(e:MouseEvent):void{
	if(!lighting){
		timer.start();
		light_mc.gotoAndStop(2);
		lighting = true;
	}
	else {
		timer.stop();
		light_mc.gotoAndStop(1);
		lighting = false;
		for (var i:int =0; i < bulbs.length; i++){
  			var bulb:MovieClip = bulbs[i];
  			bulb.alpha = .5;
		}
	}
}

function lightOn(e:TimerEvent):void{
	for (var i:int =0; i < bulbs.length; i++){
  		var bulb:MovieClip = bulbs[i];
  		bulb.alpha = Math.random();
	}
}

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!