Archive for August, 2011

[AS3] Debugging utilities KKConsole and KKLogger

Tuesday, August 9th, 2011

I made two classes for debugging.

KKConsole

It output to the browser’s console.log.
It is difficult to use trace command after you upload content to server.
But it is easy to read logs in browser.

console_fig1

Source code

package kinkuma.util
{
	import flash.external.ExternalInterface;

	public class KKConsole
	{
		public static function log(text:String):void
		{
			if(ExternalInterface.available){
				ExternalInterface.call("console.log", text);
			}
		}
	}
}

Usage

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import kinkuma.util.KKConsole;
	
	[SWF(width="450",height="450",backgroundColor="0xffffff")]
	public class KKConsoleUsage extends Sprite
	{
		private var _clickTimes:int = 0;
		
		public function KKConsoleUsage()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		protected function onAddedToStage(event:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			stage.addEventListener(MouseEvent.CLICK, onStageMouseClick);
		}
		
		protected function onStageMouseClick(event:MouseEvent):void
		{
			_clickTimes++;
			var logText:String = "You clicked " + _clickTimes + " time";
			if(_clickTimes > 1){
				logText += "s";
			}
			KKConsole.log(logText);
		}
	}
}

The class like this one has already exited.
It can parse argument’s string to be easy to read.

>> AS3 でどこからでも log();(in Japanese)

KKLogger

It output log on a black rectangle.
It is very useful when you can’t use browser’s console.
For example, Android device can’t be used console.

Source code

package kinkuma.util
{
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	
	public class KKLogger extends Sprite
	{
		private var _textField:TextField;
		private var _bg:Shape;
		
		public function KKLogger(aWidth:int = 200, aHeight:int = 150)
		{
			_textField = new TextField();
			_textField.multiline = true;
			_textField.width = aWidth;
			_textField.height = aHeight;
			addChild(_textField);
			var tf:TextFormat = new TextFormat();
			tf.font = "_sans";
			tf.color = 0xffffff;
			tf.size = 10;
			_bg = new Shape();
			addChildAt(_bg, 0);
			var g:Graphics = _bg.graphics;
			g.beginFill(0x000000, 0.8);
			g.drawRect(0,0,aWidth, aHeight);
			g.endFill();
			_textField.defaultTextFormat = tf;
			mouseChildren = mouseEnabled = false;
		}
		
		public function log(text:String):void
		{
			if(_textField.text == ""){
				_textField.text = text;
			}else{
				_textField.appendText("\n" + text);
			}
			var tft:String = _textField.text;
			var ar:Array = tft.split("\r");
			while(_textField.textHeight + 5 > _textField.height){
				ar.shift();
				_textField.text = ar.join("\n");
			}
		}
	}
}

Usage

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import kinkuma.util.KKLogger;
	
	[SWF(width="450",height="450",backgroundColor="0xffffff")]
	public class KKLoggerUsage extends Sprite
	{
		private var _clickTimes:int = 0;
		private var _logger:KKLogger;
		
		public function KKLoggerUsage()
		{
			_logger = new KKLogger();
			_logger.x = 10;
			_logger.y = 10;
			addChild(_logger);
			
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		protected function onAddedToStage(event:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			stage.addEventListener(MouseEvent.CLICK, onStageMouseClick);
		}
		
		protected function onStageMouseClick(event:MouseEvent):void
		{
			_clickTimes++;
			var logText:String = "You clicked " + _clickTimes + " time";
			if(_clickTimes > 1){
				logText += "s";
			}
			_logger.log(logText);
		}
	}
}

I uploaded it to wonderfl

KKLogger – wonderfl build flash online

It was also uploaded to github

I uploaded to github.
>> https://github.com/KinkumaDesign/KKDebug