Christmas Tree Lighting with AS3

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.

View DemoDownload Source

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, …).

Screenshot

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();
	}
}

10 thoughts on “Christmas Tree Lighting with AS3

  1. pshtiwan

    Hi, I have a question of AS3 in flash cs4, how can i run an executable program by abutton in flash projector?
    what is the code for this…? thank you

Leave a Reply

Your email address will not be published. Required fields are marked *