In this tutorial you will learn how to integrate Sandy with other cool stuff out there. We will merge Tutorial 17 and Grant Skinner fire component demo for example.

First, copy our AS class to Example017a.as and change its name accordingly. Download Sample.fla from Skinner site, copy it to Example017a.fla, and set its document class to Example017a. You are now ready to start.

Ok, so let's open FLA and get rid of static text on the bottom. Now when we have some space there, let's resize fire component to use it. Also move it to stage origin. Note that his logo instance name (“obj”) is set as “target” in component parameters - that means we have to add something named “obj” upon removing it to keep whole thing working. There is handy “Example” clip on library - drag it on stage and edit to be completely empty. Finally, cut actions out of Layer 1 frame - we have some better place for it (Example017a.as). You are done with FLA now:

Let’s now go through the code and change few things here and there.

• First of all, we will need to add some imports to our document class that were not necessary before, but are now in context of new FLA:

import fl.controls.Slider;
import fl.controls.Label;
import fl.events.SliderEvent;
import flash.display.MovieClip;

• We will also use Sandy events just to have Sandy objects in event target (see below):

import sandy.events.BubbleEvent;

• Now we paste Skinner original variables and functions in our class as private members:

private var params:Array = ["distortion", "distortionScale",
	"fadeRate", "flameHeight", "flameSpread", "smoke"];
private function handleSlider(evt:SliderEvent):void
{
	fireFX[evt.target.name] = evt.target.value;
	(getChildByName(evt.target.name+"fld") as TextField).text = String(evt.target.value);
}
private function handleCheckBox(evt:Event):void
{
	fireFX.blueFlame = blueFlame.selected;
	obj.visible = !hideText.selected;
}

• Main code from Skinner, whatever it does, we will just drop it into constructor:

public function Example017a()
{ 
	// place original Skinner code in our document class constructor
	var i:int, l:uint = params.length;
	for (i=0; i<l; i++) {
		var label:TextField = new TextField();
		...
	}
	blueFlame.addEventListener(Event.CHANGE,handleCheckBox);
	hideText.addEventListener(Event.CHANGE,handleCheckBox);
	...

• Remember we have empty movie clip called “obj”? Let us make use of it:

// pass obj movie clip as contaner
scene = new Scene3D( "scene", obj, camera, root );

• Let's modify viewport to match fire component size and position. Find the place where camera is created, and change the code to:

// align obj movie clip to fire component
obj.x = fireFX.x;
obj.y = fireFX.y;
 
// make viewport to fire component
camera = new Camera3D( fireFX.width, fireFX.height );

• Let's change events handlers to interact with fire component. First, let's put click handler directly on Sandy objects:

myCone.enableEvents = true;
myCone.addEventListener(MouseEvent.CLICK, clickHandler);
myHedra.enableEvents = true;
myHedra.addEventListener(MouseEvent.CLICK, clickHandler);

• Now, click handler will receive clicked object in event.target; for this demo, we will simply reset fire target to clicked Sandy object. Our code will now be something like this:

private function clickHandler(event:BubbleEvent):void
{
	// determine what was clicked
	var shape:Shape3D = event.target as Shape3D;
	myText.text = "You have hit the " + shape.name;
 
	this.addChild(myText);
	needRemove = true;
 
	// limit fire to clicked object
	fireFX.target = shape.container;
}

Okay, let’s see our result now.

Burn Sandy, burn!

Oh yeah, the sources:

example017a.zip

Have fun, folks.