September « 2008 « yeah blog

Actionscript 3 Pie Chart

4
Sep/0814

Here is another variation of one of Lee Brimlow’s AS3 creations. I took the wedge class and used it to create a pie chart of sorts. The values in the pieceVals array can of course be dynamic, so you can pull info from a DB and easily calculate its angle in degrees, then display it in the graph. Well I’m not going to do everything for you

You can get the wedge class and other supporting code over at Lee’s website: theflashblog.com

Actionscript:

import com.drawing.*;
import com.utils.*;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;

var bmd:BitmapData = new BitmapData(600, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

var graphContainer:Sprite = new Sprite();
addChild(graphContainer);

var sp:MovieClip;
var scaled:Boolean;
var percent:Number;

var threeSixty:Number = 360;

var pieceVals:Array = new Array();
pieceVals[0] = 80;
pieceVals[1] = 25;
pieceVals[2] = 100;
pieceVals[3] = 90;
pieceVals[4] = 65;

for(var i=0; i<pieceVals.length; i++) {
	threeSixty -= pieceVals[i];
	createArc(pieceVals[i],threeSixty);
}

function createArc(angleVal:Number, startVal:Number):void {
	sp = new MovieClip();
	sp.buttonMode = true;
	sp.percent = Math.round(100/(360/angleVal));
	sp.radius = 150;
	sp.endAngle = angleVal;
	sp.startValue = startVal;
	sp.color = Math.random() * 0xFFFFFF;
	sp.count = 0;
	graphContainer.addChildAt(sp, 0);	

	sp.addEventListener(Event.ENTER_FRAME, loop);
	sp.addEventListener(MouseEvent.MOUSE_OVER, mOver);
	sp.addEventListener(MouseEvent.MOUSE_OUT, mOut);
}

function loop(e:Event):void {
	sp = e.target as MovieClip;
	sp.graphics.clear();
	sp.graphics.beginFill(sp.color);
	sp.graphics.lineStyle(5, 0x000000);
	Wedge.draw(sp, 225, 200, sp.radius, sp.count, sp.startValue);
	sp.count += 5;
	if (sp.count > sp.endAngle) {
		sp.removeEventListener(Event.ENTER_FRAME, loop);
		bmd.draw(sp);
	}
}

function mOver(e:MouseEvent):void {
	setChildIndex(percent_mc,2);
	percent_mc.addEventListener(Event.ENTER_FRAME, percentHover);
	percent_mc.percent_txt.text = parseInt(e.target.percent) + "%";
}
function mOut(e:MouseEvent):void {
	percent_mc.removeEventListener(Event.ENTER_FRAME, percentHover);
	percent_mc.x = -1000;
	percent_mc.y = -1000;
}

function percentHover(e:Event):void{
	percent_mc.x = mouseX+5;
	percent_mc.y = mouseY-20;
}

Tagged as: actionscript 3

14 Comments

Actionscript 3 Arc Generator

3
Sep/080

Working from Lee Brimlow’s post of the Arc class he created, I took it a step further and created a generator that allows you to specify how many lines will be drawn and how thick you want them. You can then save your work out as a jpg.

Source code:

import com.drawing.*;
import com.utils.*;
import com.adobe.images.JPGEncoder;

var sp:MovieClip;
var bmd:BitmapData = new BitmapData(800,400, false, 0xffffff);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

display_area.addEventListener(MouseEvent.MOUSE_UP, createArc);
jpg_btn.addEventListener(MouseEvent.MOUSE_UP, saveJPG);

function createArc(e:Event):void {
	var burstNum:Number = parseInt(lines_num.text);
	var thickness:Number = parseInt(thickness_num.text);

	if (burstNum > 75) {
		error_txt.text = "That's too many lines...the max is 75";
	} else {
		error_txt.text = "";
		for (var i=0; i<burstNum; i++) {
			sp = new MovieClip();
			sp.radius = Math2.rand(50, 400);
			sp.sx = mouseX;
			sp.sy = mouseY;
			sp.thick = thickness;
			//sp.thick = Math.random()*50;
			sp.startAngle = Math2.rand(20, 270);
			sp.endAngle = Math2.rand(sp.startAngle, 360);
			sp.color = Math.random() * 0xFFFFFF;
			sp.count = 0;
			sp.filters = [new DropShadowFilter(0x000000)];
			sp.addEventListener(Event.ENTER_FRAME, loop);
			addChild(sp);
		}
	}
}
function loop(e:Event):void {
	sp = e.target as MovieClip;
	sp.graphics.clear();
	if (sp.thick > sp.radius) {
		sp.thick = sp.radius - 10;
	}

	sp.graphics.lineStyle(sp.thick, sp.color, 1, false, LineScaleMode.NORMAL,
	                                                         CapsStyle.NONE);
	Arc.draw(sp, sp.sx, sp.sy, sp.radius, sp.count, sp.startAngle);
	sp.count += 10;
	if (sp.count > sp.endAngle) {
		sp.removeEventListener(Event.ENTER_FRAME, loop);
		bmd.draw(sp);
		removeChild(sp);
		sp = null;
	}
}
function saveJPG(e:MouseEvent):void{
	var jpgEncoder:JPGEncoder = new JPGEncoder(90);
	var jpgStream:ByteArray = jpgEncoder.encode(bmd);

	var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
	var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
	jpgURLRequest.requestHeaders.push(header);
	jpgURLRequest.method = URLRequestMethod.POST;
	jpgURLRequest.data = jpgStream;
	navigateToURL(jpgURLRequest, "_blank");
}