base42.nl » code

AS3 spirograph with source code

jankees — Mon, 28 Mar 2011 19:18:54 +0000

I just worked a bit more on my AS3 spirograph tonight. This is the updated version with the full source code:

Demo:

Full source code:

Please note that you need the Hype framework and Minimalcomps to compile this.

 package {
	import hype.extended.util.ContextSavePNG;
	import hype.framework.display.BitmapCanvas;
 
	import com.bit101.components.CheckBox;
	import com.bit101.components.ColorChooser;
	import com.bit101.components.Label;
	import com.bit101.components.PushButton;
	import com.bit101.components.Slider;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
 
	/**
	 * @author Jankees van Woezik
	 */
	public class Spirograph extends Sprite {
		private var t : Number = 0;
		private var _canvas : BitmapCanvas;
		private var _original : Sprite;
		private var _isVirgin : Boolean = true;
		private var _gearsVisual : Sprite;
		// minimalcomps.com
		private var _speedSlider : Slider;
		private var _outerGearSlider : Slider;
		private var _innerGearSlider : Slider;
		private var _offsetPenSlider : Slider;
		private var _penPointShape : Ball;
		private var _drawAnimatedCheckbox : CheckBox;
		private var _showWheelsCheckbox : CheckBox;
		private var _colorPicker : ColorChooser;
 
		public function Spirograph() {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			stage.addEventListener(Event.RESIZE, handleStageResize);
 
			// gradient background (thanks to zwartekoffie.com)
			addChild(new SiteBackground());
 
			_original = new Sprite();
 
			_canvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight, true);
			_canvas.target = _original;
			addChild(_canvas);
 
			_gearsVisual = new Sprite();
			addChild(_gearsVisual);
 
			var controlY : Number = 10;
 
			var randomize : PushButton = new PushButton(this, 10, controlY, "Randomize settings", randomSettings);
			randomize.width = 172;
 
			new Label(this, 10, controlY += 30, "speed");
			_speedSlider = new Slider(Slider.HORIZONTAL, this, 80, controlY + 4);
			_speedSlider.minimum = 1;
			_speedSlider.value = 10;
			_speedSlider.maximum = 20;
 
			new Label(this, 10, controlY += 15, "outer gear (R)");
			_outerGearSlider = new Slider(Slider.HORIZONTAL, this, 80, controlY + 4, change);
			_outerGearSlider.minimum = 1;
			_outerGearSlider.value = 100;
			_outerGearSlider.maximum = 200;
 
			new Label(this, 10, controlY += 15, "inner gear (r)");
			_innerGearSlider = new Slider(Slider.HORIZONTAL, this, 80, controlY + 4, change);
			_innerGearSlider.minimum = 1;
			_innerGearSlider.value = 50;
			_innerGearSlider.maximum = 200;
 
			new Label(this, 10, controlY += 15, "offset pen (p)");
			_offsetPenSlider = new Slider(Slider.HORIZONTAL, this, 80, controlY + 4, change);
			_offsetPenSlider.minimum = 1;
			_offsetPenSlider.value = 6;
			_offsetPenSlider.maximum = 200;
 
			new Label(this, 10, controlY += 19, "line color");
			_colorPicker = new ColorChooser(this, 80, controlY, 0x59c7b7);
 
			_drawAnimatedCheckbox = new CheckBox(this, 12, controlY += 30, "show animation", toggleAnimated);
			_drawAnimatedCheckbox.selected = true;
 
			_showWheelsCheckbox = new CheckBox(this, 12, controlY += 15, "show gears");
 
			var explanation : Label = new Label(this, 10, controlY += 20, "");
			explanation.text = "Formula\nx(t)=(R-r)*cos(t) + p*cos((R-r)*t/r) \ny(t)=(R-r)*sin(t) - p*sin((R-r)*t/r)";
 
			new ContextSavePNG(_canvas, stage);
 
			_penPointShape = new Ball(_colorPicker.value);
			addChild(_penPointShape);
 
			addEventListener(Event.ENTER_FRAME, handleEnterFrame);
 
			randomSettings();
		}
 
		private function handleEnterFrame(event : Event) : void {
			if (_drawAnimatedCheckbox.selected) renderTick();
		}
 
		private function handleStageResize(event : Event) : void {
			removeChild(_canvas);
			_canvas.clear();
			_canvas = null;
			_canvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight, true, 0xffffff);
			_canvas.target = _original;
			addChildAt(_canvas, 1);
			clearCanvas();
		}
 
		private function toggleAnimated(e : Event) : void {
			clearCanvas();
			if (!_drawAnimatedCheckbox.selected) drawStatic();
		}
 
		private function change(e : Event) : void {
			clearCanvas();
			if (_drawAnimatedCheckbox) if (!_drawAnimatedCheckbox.selected) drawStatic();
		}
 
		private function drawStatic() : void {
			var leni : uint = 6000;
			for (var i : uint = 0; i < leni; i++) {
				renderTick();
			}
		}
 
		private function clearCanvas() : void {
			_canvas.clear();
			_isVirgin = true;
		}
 
		private function randomSettings(e : Event = null) : void {
			_outerGearSlider.value = Random.between(_outerGearSlider.maximum - 50, _outerGearSlider.maximum);
			_innerGearSlider.value = Random.between(_innerGearSlider.minimum, _outerGearSlider.value);
			_offsetPenSlider.value = Random.between(_offsetPenSlider.minimum, _innerGearSlider.value);
		}
 
		private function renderTick() : void {
			t += (_speedSlider.value / 100);
 
			if (_offsetPenSlider.value > _innerGearSlider.value) {
				_offsetPenSlider.value = _innerGearSlider.value;
			}
			if (_innerGearSlider.value > _outerGearSlider.value) {
				_innerGearSlider.value = _outerGearSlider.value;
			}
 
			_original.graphics.lineStyle(1, _colorPicker.value, 1);
			_original.graphics.moveTo(_penPointShape.x, _penPointShape.y);
 
			var a : Number = _outerGearSlider.value;
			var b : Number = _innerGearSlider.value;
			var o : Number = _offsetPenSlider.value;
 
			var newx : Number;
			var newy : Number;
 
			// http://en.wikipedia.org/wiki/Spirograph
 
			// as found on http://linuxgazette.net/133/luana.html
			//
			// x(t)=(R-r)*cos(t) + p*cos((R-r)*t/r)
			// y(t)=(R-r)*sin(t) - p*sin((R-r)*t/r)
			//
			// R, the radius of the fixed circle;
			// r, the radius of the moving circle;
			// p, the distance from the pen to the moving circle center.
			// O, The center of the fixed circle
 
			newx = (a - b) * Math.cos(t) + o * Math.cos((a - b) * t / b);
			newy = (a - b) * Math.sin(t) + o * Math.sin((a - b) * t / b);
 
			_penPointShape.x = newx + stage.stageWidth / 2;
			_penPointShape.y = newy + stage.stageHeight / 2;
 
			_penPointShape.color = _colorPicker.value;
 
			if (!_isVirgin) {
				_original.graphics.lineTo(_penPointShape.x, _penPointShape.y);
			}
 
			_gearsVisual.graphics.clear();
			if (_showWheelsCheckbox.selected) {
				var centerInnerCircleX : Number = stage.stageWidth / 2 + (Math.cos(t) * (a - b));
				var centerInnerCircleY : Number = stage.stageHeight / 2 + (Math.sin(t) * (a - b));
 
				_gearsVisual.graphics.beginFill(0xfffe8e, 0.3);
				_gearsVisual.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, a);
				_gearsVisual.graphics.beginFill(0xfe6cc7, 0.3);
				_gearsVisual.graphics.drawCircle(centerInnerCircleX, centerInnerCircleY, b);
				_gearsVisual.graphics.beginFill(0xfe6cc7, 0.3);
				_gearsVisual.graphics.drawCircle(centerInnerCircleX, centerInnerCircleY, 3);
				_gearsVisual.graphics.endFill();
			}
 
			_canvas.capture(true);
 
			_original.graphics.clear();
 
			_isVirgin = false;
		}
	}
}
import nl.inlet42.utils.view.StageProvider;
 
import com.epologee.util.ColorUtils;
 
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Matrix;
 
class Ball extends Sprite {
	private var _color : uint;
 
	public function Ball(inColor : uint) {
		color = inColor;
	}
 
	public function set color(color : uint) : void {
		if (_color == color) return;
		_color = color;
		with(graphics) {
			clear();
			beginFill(_color, 1);
			drawCircle(0, 0, 3);
			endFill();
		}
	}
}
class SiteBackground extends Sprite {
	public function SiteBackground() {
		if (stage) {
			initUI(null);
		} else {
			addEventListener(Event.ADDED_TO_STAGE, initUI, false, 0, true);
		}
	}
 
	private function initUI(event : Event) : void {
		removeEventListener(Event.ADDED_TO_STAGE, initUI);
		stage.addEventListener(Event.RESIZE, handleResize);
		handleResize();
	}
 
	private function handleResize(event : Event = null) : void {
		graphics.clear();
 
		var colors : Array = [0xfdfdfb, 0xeae7e0];
		var alphas : Array = [1, 1];
		var ratios : Array = [0, 255];
		var matrix : Matrix = new Matrix();
		matrix.createGradientBox(stage.stageWidth, stage.stageWidth, stage.stageWidth / 2 - stage.stageWidth / 2, stage.stageHeight / 2 - stage.stageWidth / 2);
		graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, matrix);
		graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
	}
}
class Random {
	public static function between(inFrom : Number, inTo : Number, inFloat : Boolean = false) : Number {
		var from : Number = (inFrom < inTo) ? inFrom : inTo;
		var to : Number = (inTo > inFrom) ? inTo : inFrom;
		return inFloat ? (from + Math.random() * Math.abs(to - from)) : (from + Math.round(Math.random() * Math.abs(to - from)));
	}
}

LogMeister open source

jankees — Mon, 19 Apr 2010 09:27:25 +0000

There are several loggers used by Flash developers, some like logger A and others like B. I switch between loggers from time to time. I like Trazzle because it’s lightning fast and I use MonsterDebugger because is really extensive. I needed an easy way to switch between loggers. That’s why I created LogMeister. LogMeister is a wrapper which you can use for every logger and I added the ones that that I have used over the last few years.

It’s really easy to use. The first thing you need to do is add the logger you need (do this once in you document class).

This is an example how to add all available loggers (not recommended):

import logmeister.LogMeister;
import logmeister.connectors.*;
 
LogMeister.addLogger(new TrazzleConnector(stage, "Application Name"));
LogMeister.addLogger(new SosMaxConnector());
LogMeister.addLogger(new MonsterDebuggerConnector(stage));
LogMeister.addLogger(new YalogConnector());
LogMeister.addLogger(new FlashConnector());

After you have done that, it’s super easy to use (and no imports!!). In LogMeister there are different levels for sending messages, it’s recommended that you use these levels. In most loggers these levels have different colors.

Example usage:

critical('critical');
debug('debug');
error('error');
fatal('fatal');
info('info');
notice('notice');
status('status');
warn('warn');

A zipfile can be downloaded at github.com. The zip file contains the source and working examples (CS4 & code only).

If you have any suggestions please let me know (or fork me at GitHub).

Happy logging.

Logger

jankees — Thu, 10 Sep 2009 20:33:09 +0000

When building your first website in Flash you initially use the trace() function. But after a while you start to feel the need for more. There are a lot of ‘loggers’ available on the web. Personally I prefer Trazzle because it’s a very lightweight native mac application. But when working with colleagues who don’t use a mac, Trazzle is no option. It can be hard to choose a good logger everybody likes. That is why I created a project that enables you to use all the loggers you want with one simple script. I called it ‘Logger’ (don’t laugh). And you can use it with the following syntax:

Logger.debug("Logger traces a debug message");

That is not bad, right? Almost every logger has different debug levels, that is why I implemented the most important ones in the script (debug/error/fatal/info/critical/status/warning and notice). To log a message choose one of the following;

Logger.debug("Logger traces a debug message");
Logger.error("Logger traces an error message");
Logger.fatal("Logger traces a fatal message");
Logger.info("Logger traces an info message");
Logger.critical("Logger traces a critical message");
Logger.status("Logger traces a status message");
Logger.warning("Logger traces a warning  message");
Logger.notice("And finally Logger traces a notice message");

Before you do this you first need to initialize the loggers you want. I created connectors for Trazzle, SOSMax, DeMonsterDebugger, Yala and Flash (trace). To enable all these loggers together (which is not recommended) call;

Logger.addLoggers([new MonsterDebuggerConnector(this),new FlashConnector(),new TrazzleConnector(),new YalogConnector(),new SosMaxConnector()]);

This is how the output looks on all the different connectors (note how every logger shows the line number and class of the log);

Trazzle (website)

De Monster Debugger (website)

SOSMax (website)

Yala (online version)

Flash:

I created a zip package with everything you need (Demo FLA and source). If you have any suggestions please let me know!

Land of the logging

jankees — Wed, 09 Sep 2009 14:48:04 +0000

Today I have built a wrapper around some loggers for Flash (Trazzle, Yalog, Monster Debugger and SOS Max).

I am currently cleaning the code, but I will post the code as soon as possible.

This is a screenshot of my current setup….

Automatic font size adjuster

jankees — Thu, 13 Aug 2009 10:42:16 +0000

First I have to say sorry to all the not ‘actionscript-geeks’, but I have another script I want to share. I made a TextField behaviour that might come in handy for other people too.. I made a short video to show how it works.

It is called ~~AutomaticFontSizeBehaviour~~ AutomaticFonSizeBehavior :)

package  
{
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	/**
	 *  @author Jankees.van.Woezik
	 */
	public class AutomaticFonSizeBehavior 
	{
 
		private var _textField:TextField;
		private var _startSize:Number;
		private var _currentSize:Number;
		private var _prevText:String;
		private var _maxHeight:Number;
		private var _minimalFontSize:uint;
 
		/**
		 * Usage:
		 * 
		 * _updater = new AutomaticFonSizeBehavior(textField);
		 * 
		 * // this is enough for input fields, if you set text using code you should call the update function after you have set the text like this:
		 * 
		 * _updater.update();
		 * 
		 */
		public function AutomaticFonSizeBehavior(inTextField:TextField,inStartSize:Number = 40,inMinimalFontSize:uint = 9, willUpdateOnInput = true) 
		{
			_minimalFontSize = inMinimalFontSize;
			_startSize = inStartSize;
			_currentSize = inStartSize;
			_textField = inTextField;
			_prevText = "";
 
			_maxHeight = _textField.height;
 
			_textField.addEventListener(Event.REMOVED_FROM_STAGE,dispose);
 
			if(willUpdateOnInput) addEventListeners();
 
			setFontSize(_startSize);
 
			update();
		}
 
		public function update(event:Event = null):void 
		{
			_textField.scrollV = 0;
 
			if(_prevText.length > _textField.length)
                setFontSize(_startSize);
 
			while (_maxHeight < _textField.textHeight + (4 * _textField.numLines)) 
			{ 
				if(_currentSize <= _minimalFontSize) break;
				setFontSize(_currentSize - 0.5);
			}
 
			if(_currentSize <= _minimalFontSize) 
			{
				_textField.text = _prevText;
			} 
			else 
			{
				_prevText = _textField.text;
			}
		}
 
		private function addEventListeners():void 
		{
			_textField.addEventListener(Event.CHANGE,update);
			_textField.addEventListener(KeyboardEvent.KEY_UP,update);
		}
 
		private function setFontSize(inSize:Number):void 
		{
			_currentSize = inSize;
 
			var currentTextFormat:TextFormat = _textField.getTextFormat();
			currentTextFormat.size = _currentSize;
 
			_textField.setTextFormat(currentTextFormat);
			_textField.defaultTextFormat = currentTextFormat;
		}
 
		/**
		 * Dispose everything
		 */
		private function dispose(event:Event):void 
		{
			_textField.removeEventListener(KeyboardEvent.KEY_UP,update);
			_textField.removeEventListener(Event.CHANGE,update);
			_textField.removeEventListener(Event.REMOVED_FROM_STAGE,dispose);
 
			_textField = null;
		}
	}
}

update: Thanks to Thijs for the update! Copy & paste is now supported!
update: Thanks to Sandro Padin for the improvements!!

AS3 SRT Subtitle parser

jankees — Wed, 29 Jul 2009 18:49:32 +0000

Update (23 november 2011):
I uploaded a working videoplayer with subtitles to GitHub if you would like: https://github.com/base42/Videomeister

Today I started to work on a .srt driven subtitle system for Flash, I just finished that converts the srt file to a native flash object.

Below is a short sample of a srt file.

1
00:00:20,000 --> 00:00:24,400
In connection with a dramatic increase
in crime in certain neighbourhoods,
 
2
00:00:24,600 --> 00:00:27,800
the government is implementing a new policy...

I created the following classes to read these files. (any suggestions are welcome!)

Special thanks to Thijs Broerse of Media Monks, for the stringToSeconds function

SubtitleParser.as

package nl.inlet42.data.subtitles {
 
	/**
	 *	@author Jankees.van.Woezik
	 */
	public class SubtitleParser {
		public static function parseSRT(data : String) : Array {
			var result : Array = new Array();
 
			var lines : Array;
			var translation : SubTitleData;
 
			var blocks : Array = data.split(/^[0-9]+$/gm);
			for each (var block : String in blocks) {
				translation = new SubTitleData();
				lines = block.split('\n');
				for each (var line : String in lines) {
					//all lines in a translation block
					if(trim(line) != "") {
						if(line.match("-->")) {
							//timecodes line
							var timecodes : Array = line.split(/[ ]+--&gt;[ ]+/gm);
							if(timecodes.length != 2) {
								trace("Translation error, something wrong with the start or end time");
							} else {
 
								translation.start = stringToSeconds(timecodes[0]);
								translation.end = stringToSeconds(timecodes[1]);
								translation.duration = translation.end - translation.start;
 
								if(translation.duration &lt; 0) {
									trace("Translation error, something wrong with the start or end time");
								}
							}
						} else {
							//translation line
							if(translation.text.length != 0) line = "\n" + trim(line);
							translation.text += line;
						}
					}
				}
				result.push(translation);
			}
			return result;
		}
 
		public static function trim(p_string : String) : String {
			if (p_string == null) {
				return '';
			}
			return p_string.replace(/^\s+|\s+$/g, '');
		}
 
		/**
		 * Convert a string to seconds, with these formats supported:
		 * 00:03:00.1 / 03:00.1 / 180.1s / 3.2m / 3.2h / 00:01:53,800
		 *
		 * Special thanks to Thijs Broerse of Media Monks!
		 *
		 **/
		public static function stringToSeconds(string : String) : Number {
			var arr : Array = string.split(':');
			var sec : Number = 0;
			if (string.substr(-1) == 's') {
				sec = Number(string.substr(0, string.length - 1));
			}else if (string.substr(-1) == 'm') {
				sec = Number(string.substr(0, string.length - 1)) * 60;
			}else if(string.substr(-1) == 'h') {
				sec = Number(string.substr(0, string.length - 1)) * 3600;
			}else if(arr.length &gt; 1) {
				if(arr[2] &amp;&amp; String(arr[2]).indexOf(',') != -1) arr[2] = String(arr[2]).replace(/\,/, ".");
 
				sec = Number(arr[arr.length - 1]);
				sec += Number(arr[arr.length - 2]) * 60;
				if(arr.length == 3) {
					sec += Number(arr[arr.length - 3]) * 3600;
				}
			} else {
				sec = Number(string);
			}
			return sec;
		}
	}
}

SubTitleData.as

package nl.inlet42.data.subtitles {
 
	public class SubTitleData {
		public var text : String;
		public var start : Number;
		public var duration : Number;
		public var end : Number;
 
		public function SubTitleData(inText : String = "",inStart : Number = 0,inDuration : Number = 0,inEnd : Number = 0) {
			text = inText;
			start = inStart;
			duration = inDuration;
			end = inEnd;
		}
 
		public function toString() : void {
			trace("nl.inlet42.data.subtitles.SubTitleData");
		}
	}
}

Update: Thanks to Tiago for the update.

Recursion for Flash

jankees — Thu, 23 Jul 2009 07:15:47 +0000

This morning in the train I worked on a little script for recursion. I need this to update a timeline animation on the fly.

With this script you get an Array with every DisplayObject on the currentframe in a DisplayObjectContainer (MovieClip, Sprite etc).

package test {
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
 
	/**
	 * @author Jankees.van.Woezik
	 */
	public class Recursion {
 
		private var childs : Array;
 
		public function getAllChilds(inMC : DisplayObjectContainer) : Array {
			childs = new Array();
			findChilds(inMC);
			return childs;
		}
 
		private function findChilds(inDisplayObjectContainer : DisplayObjectContainer,inCurrentDepth : uint = 0) : void {
 
			var i : uint = inDisplayObjectContainer.numChildren;
			var child : DisplayObject;
 
			while( i -- ) {
				child = inDisplayObjectContainer.getChildAt(i);
 
				if(child is DisplayObjectContainer) {
					childs.push(child);
					findChilds(DisplayObjectContainer(inDisplayObjectContainer.getChildAt(i)), inCurrentDepth + 1);
				}else if(child is DisplayObject) {
					childs.push(child);
				}
			}
		}
	}
}

Slice images with a Matrix

jankees — Sun, 26 Apr 2009 08:43:58 +0000

For my current project I needed something to slice an image easily, first I tried to slice the image with a mask, but I soon found out that this much heavier than my current solution.

Below is the end result I needed to have (the triangle is a big mask).

// image = a MovieClip with an image
 
// upper part
var upperBitmapData:BitmapData = new BitmapData(image.width,image.height / 2);
upperBitmapData.draw(image);
 
mUpperBitmap = new Bitmap(upperBitmapData);
addChild(mUpperBitmap);
 
//lowerpart
var lowerMatrix:Matrix = new Matrix();
lowerMatrix.ty = -(image.height / 2); 
 
var lowerBitmapData:BitmapData = new BitmapData(image.width,image.height / 2);
lowerBitmapData.draw(image,lowerMatrix);
 
mLowerBitmap = new Bitmap(lowerBitmapData);
mLowerBitmap.y = ContentClip.MASK_HEIGHT / 2;
addChild(mLowerBitmap);
 
image = null;

We are building an AS3 framework

jankees — Fri, 16 Jan 2009 09:31:32 +0000

Together with my colleague Patrick Brouwer, we are building an AS3 framework that we can reuse in a lot of situations.

We bought VisDoc to create a good documentation of the project. When it’s ready I’ll try to do a post on what we did, and why. I really like the preloading mechanism we came up with.

Betaling in Flash

jankees — Fri, 07 Nov 2008 15:24:18 +0000

Een iDeal implementatie in Flash is lastiger dan je denkt.