CREATE A PROJECT FOR FDT FAST!!

1 month, 3 weeks ago | in Actionscript 3, Terminal stuff, Workflow | 5 Comments »

I made a terminal script for creating new FDT projects. I use it when I want to test something or create a prototype.

The code can be found on the post detail page.

Read the rest of this entry »

MY WORKFLOW WITH ANT AND FDT

2 months, 4 weeks ago | Tags: ANT, FDT in Actionscript 3, Workflow | 9 Comments »

I am a big fan of things that speed up my workflow. One of the things that I have been using a lot lately is ANT. ANT is a scripting language you can use from within Eclipse (and FDT). ANT is quite powerful. You can use it to show input dialogs, manipulate files, create files, compile an application, FTP, SVN and much much more!

In my last three projects I have been using the same ANT file and I think it is pretty useful for other Flash developers too. That’s why I want to share it with you.

My ANT file has four targets (functions).

1. Debug in Firefox
2. Create deployable swf
3. Deploy to FTP server
4. Clean debug in Firefox

The most important target is the first one, that’s the target I use the most. It compiles the actionscript into a SWF and then gives Firefox focus. If you want to know how this works see epologee.com/blog. I know a lot of people use the external player in FDT, I switched to Firefox because it is much faster and as a bonus you can use SWFAdress and other HTML stuff. In my opinion it’s much better to test from within the browser because it it behaves a bit different then external player in some occasions.

The second target (Create deployable SWF) creates a SWF which is smaller that the debug version; this is because I excluded the ‘verbose stacktraces’ on a large project this somethings takes 200kb of a SWF file.

Another thing I added to my ANT task is a conditional compilation arguments to the compiler. With these arguments it’s really easy to create a code block which only works for deployment, or a piece of code which only works for testing.

The code to do this looks like this:

CONFIG::Debug
{
	// code for debugging
}
 
CONFIG::Release
{
	// code for release version
}

Another interesting thing I added was FTP, the only problem is it isn’t supported by FDT by default. You need to install a external script (pretty easy). All about FTP and ANT is on the blog of Erik van Nieuwburg.

Every time you compile using my script ANT creates a build.txt with some information about the build (deploment or development, time of compilation, filesize, user, etc) I store this information in Subversion to keep track of all the builds. I copy this to a folder on the webserver too. In another project I used a modified version of this code to update a Version.as file before compiling….

Video

I created a video of my workflow to show you how it works.

If you have any feedback or suggestions please let me know. I created a zip file with all the files used in the video;

FLASH VOICEARKANOID

5 months ago | in Actionscript 3, Flash, My work | 2 Comments »

Today I have been working with Patrick Brouwer on a new voice controlled game. We wired up a version of Arkanoid with our open source audio framework in a few hours. Below is a video of the result.

(It’s work in progress… the final version will be presented on the Dutch Design Week next week)

ps. the source can be found on Google Code

SHEETS LES 1 EN 2 VISUALIZING INFORMATION IN FLASH

5 months ago | in Actionscript 3, School | No Comments »

[Dutch] Ik geef momenteel 3 lessen Flash voor de minor Visualizing information hierin laat ik de studenten ervaren hoe je dynamische infographics kan maken met behulp van Flash. Dit zijn de sheets die ik gister gebruikt heb en de sheets van vorige week.

LAND OF THE LOGGING

6 months ago | in Actionscript 3, Code, My work | 2 Comments »

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

6 months, 4 weeks ago | in Actionscript 3, Flash, Interaction design | 12 Comments »

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

7 months, 2 weeks ago | in Actionscript 3, Code | 8 Comments »

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

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(/[ ]+-->[ ]+/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 < 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 > 1) {
				if(arr[2] && 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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.

LUKX VIDEO

7 months, 3 weeks ago | Tags: IDeal, webshop in Actionscript 3, Flash, Interaction design | 1 Comment »

Last week I created the following video of the Lukx website;

Some of the features:

• Full Flash webshop
• Rabobank IDeal connection
• Full SWFAddress navigation
• CMS with posibility to customize every page with slideshows
• Mailinglist with MailChimp

(The video is in HD, so click for fullscreen)

WEBSITE LUKX LIVE

8 months, 2 weeks ago | in Actionscript 3, Flash, Interaction design, My work | 1 Comment »

Yesterday we lauched the new website of Lukx.nl it is a full flash website with webshop.

The fun thing was that it was quite a agile project. Zwarte Koffie made the designs and About Coding helped me with the backend. The website has a webshop (with iDeal) that will be launched later this year.

Some screenshots:

ELECTION TOOL FOR BELGIUM

10 months, 1 week ago | in Actionscript 3, Flash, My work, Web | No Comments »

A few weeks ago I helped Lost Boys and De Flashfabriek develop a tool to help Belgium people decide what party to vote on for the coming elections. It’s online in three skins.

• Nieuwsblad.be
• Standaard.be
• Deredactie.be

This is what the different versions look like:

SLICE IMAGES WITH A MATRIX

10 months, 2 weeks ago | Tags: Actionscript 3, BitmapData, Image, Matrix, Slice in Actionscript 3, Code, Flex, Gadgets, My work, School, Web | No Comments »

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;

ONEILL WORLDWIDE ONLINE!

1 year ago | in Actionscript 3 | No Comments »

It’s been a while but finally the new O’Neill website is online! I’ve worked on this website together with some other good flashprogrammers. Take a look at it at www.oneill.com.

The design is done by Achtung! development by Furthermore, Patrick, Bernard, Erik and me.