Masking and set hitArea of Flare component

By default, FlareVis component listens to events from stage (entire application). However, this may be not practical. So we can set the hitArea to itself only. In this example, hitArea is the container Canvas.

Also, you might want to clip the FlareVis object so it will not draw outside the designated area. This can be done by applying mask to it as follows:

<mx:Canvas id="container" width="100%" height="100%">
<mx:Canvas width="100%" height="100%" backgroundColor="0x000000" id="cv"/>
<flare:FlareVis id="tviz" width="100%" height="100%" mask="{cv}"tree="{snapshot.heap_tree}" hitArea="{container}"/>
</mx:Canvas>

Using flare (prefuse) visualization toolkit in Flex

This is how to use flare.flex.FlareVis object.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” backgroundColor=”0×111111″
layout=”absolute” xmlns:local=”*” xmlns:flex=”flare.flex.*”
creationComplete=”init()”>
<mx:Script>
<![CDATA[
private function init():void
{
var spr:Sprite = new Sprite();
spr.graphics.beginFill(0x000000,1);
spr.graphics.drawCircle(100,100,5);
spr.graphics.drawCircle(200,100,10);
spr.graphics.endFill();
fvis.visualization.addChild(spr);

//You should be able to see two black circles on white background.

//You can access the visualization object via "fvis.visualization"
//FlareVis is a class extends from Canvas that contains the visualization object inside
}
]]>
</mx:Script>
<flex:FlareVis id=”fvis” backgroundColor=”0xffffff”/>
</mx:Application>