Category:AS3

Insanity Press

A while before leaving the UK’s blustery shores for a land more maple-y and hockey-rich, I decided I couldn’t say farewell to my best friend without marking the occasion. Kris, as he is known to most, has been my acquaintance for more than a decade, after insisting one day on following me home from school, then calling round for me the next morning to walk back. Sure, his family had just moved across the street from my house, but I was distrustful of this sudden and unsolicited act of friendship. Nonetheless, he persisted, my contempt gave way to fondness, and the rest is a beautiful and only slightly unsettling bromantic saga.

And so: armed with many years’ worth of SMS logs between the two of us (amusing to exactly two human beings in the known universe), I set out to compile a mini-anthology of our textploits, over the course of our friendship. This is what it ended up looking like:

The first and most arduous step was sifting through the stupefying quantity of raw material to find the print-worthy conversations. I didn’t have a word count in mind when I started out, and the quality threshold was a little hard to find, but I got there. I used a very simple XML schema to manage the data, which looked like this:

<all>
 ...
 <conv div="And then:">
  <msg name="k"><![CDATA[Just WALKED down ye olde ass sliding stairs.]]></msg>
  <msg name="a"><![CDATA[Changed times... *single tear rolls down cheek*]]></msg>
  <msg name="k"><![CDATA[My ass will never slide these streets again.]]></msg>
  <msg name="a"><![CDATA[*solemn nod* 'Tis a burnt out husk of an ass.]]></msg>
 </conv>
 ...
</all>

Once I had sifted through the eons of texts and copied them into my XML file, I was left with a script of about 12,000 inane words. I then started work on the visual design, and decided on a retro-pixel look, to compliment the great deal of gaming shenanigans we undertake. I made up some 9-slice resizable speech bubbles and accompanying 8-bit avatars, then started work on a layout system in AS3 (for compilation to AIR for desktop). A finished page looked like this:

I knew the final size of each page would be A5, per the printing company I’d chosen, so I worked with a 1:1.4142 aspect ratio and wrote some classes to paginate the full script into bitmap-after-bitmap of carefully placed speech bubbles. From here, I added some code to save each page sprite out to PNG, ran this, and was left with a set of 48 page images.

I then took to the Colour Lovers site to borrow and manipulate some of their lovely patterns and palettes, and ended up with a set of 24 pixel-art-esque background spreads to use throughout the book. I brought the backgrounds and the previously-exported page content together in Photoshop, then printed the whole thing to PDF, conforming to the print-shop’s format.

The print and binding shop I opted for was the Gloucestershire, UK-based Inky Little Fingers, who did an excellent and speedy job of printing the books. I was pretty short on time amidst the many tasks involved in moving country, so I decided not to have a proof printed in advance of the final set. Sadly, as it turned out, the matte finish I picked for the front/back cover desaturated the design somewhat. To contrast to the printed shots above and below, here’s the original cover image. It would have been good to crank up the contrast and vibrancy to compensate for the finish, but as that was my only issue, and the rest of the book turned out great, I have no complaints.

Bloggle

My wife and I recently made the move from Glasgow, UK to her home province of Beautiful British Columbia™, Canada. While we’re getting set up over here, we’ve been graciously hosted by my parents-in-law. And as a direct consequence, we have all been playing a veritable butt-ton of board games – foremost of which has been Boggle.



When stumped for a gift…

It’s a fun game, and one variant is to sit around without any timer running and openly shout out words (of 4+ or 5+ letters, to keep it interesting) as you see them. After a while, you get the impression that there cannot possibly be any words left to find – but is that really the case? I wanted to find out…

…And I also wanted to avoid using one of the innumerable free solvers available out there, for the sake of – erm, fun?

So, as a weekend project, I wrote the above Boggle solver, publishing for Flash, (and courtesy AIR) Android and iOS, and uploaded the source code to GitHub: https://github.com/hanenbro/BoggleSolver. Please feel free to do what you like with it; the licence is MIT.



Here it is running on a Nexus 7 tablet and iPhone 4S

For anyone looking just to install the app on mobile (for those crucial on-the-go Boggle scuffles), the APK will install for any device set to allow 3rd party apps, but the IPA will only work for jailbroken iOS devices, unless you recompile with your own provisioning profile.

The app is using a modified word list from InfoChimps, with the words shorter than 3 and longer than 16 letters removed (per the rules and limitations of game). That still leaves around 100,000 words, so at least in my usage, it tends to come up with a high percentage of never-before-seen lexical wonders. Educational tool or ego-deflating depression fuel? You decide!

Colour Extractor Utility

This is a quick post to share a utility I put together to extract all unique RGB hex colours from a given image.

My use case: I’m working on a project where a grid of clickable colour swatches needs to be generated. Due to limited space, it’s been difficult to settle on the the specific palette, knowing that the flexibility of an RGB or HSL colour picker isn’t an option. So I’ve been mocking up a few different arrangements of swatches in Photoshop, and experimenting with their layout.

At the same time, things like available space could change at any point, so between that and the need to adjust colours down the line, I don’t want to lay all the swatches out by hand and be tied to one arrangement. The layout has to be generative, and so I just need a raw list of colours to work with. The initial plan was to use the eye-dropper and pick out each one, pasting the hex values into a text file – but then I noticed I’d have to do that 60+ times for each revision, and thought: “Hello?! This is the 90s! Make the computer do it.”

The utility is very simple, and will just sift from the top-left pixel, traversing right, then to the next row – comparing against a running list to identify all the unique colours. Each colour is stored as a hex value (e.g. 0xBADA55) on a new line in the clipboard-able text data. You can then use some basic find-and-replace commands to get the list into a workable format for your needs.

If your image has gaps between swatches as mine does, and a background colour, this will be picked up as the first (or second) colour in the list – so you’ll likely want to trash that before going further. Another potential gotcha is the presence of anti-aliasing in your image, which could add unwanted in-between colours into the list. If you’re dealing with such a palette image, I would consider scaling the image down using a non-resampling algorithm – such as the ‘Nearest Neighbour’ mode in Photoshop. With some experimentation you should be left with only your core palette colours, ready for import into the extractor utility.

Replacing the buttonMode hand cursor icon in FP 10.2+

Thought I’d share a little snippet from a project I worked on a month or so back – it takes advantage of the Mouse.cursor property introduced in Flash Player 10.2. MouseCursor, as you may know, beats the ass of previous cursor replacement solutions because it modifies the OS pointer, and thus is not at the whim of slow stage framerates or the various other painful snags that come with faking it; hiding the system cursor and manually positioning a graphic in its place.

There’s a decent amount of documentation out there on how to use it, but my specific requirement was to replace the cursor only when mousing over buttons and other clickable items. I wanted it to show up wherever the hand cursor would normally appear, across a whole project.

This is the kind of behaviour I needed:

catswitch
Click to run the example. The buttons show a custom mouse-over cursor only when they’re enabled.

Now, if you look at the Adobe docs on the topic, you can register a cursor by passing in a String constant and a MouseCursorData object like so:

Mouse.registerCursor(&quot;PointerCursor&quot;, mouseCursorData);

Additionally, you can spy a number of static String constants inside the MouseCursor class – such as IBEAM and HAND – which certainly made me wonder whether I could do something like the following:

Mouse.registerCursor(MouseCursor.HAND, mouseCursorData);

But as you may have guessed, this does not work as hoped; it’s not possible just to override the graphic used for the hand cursor.

So here’s my workaround for achieving this kind of behaviour, which I opt to keep inside a centralised class (the filthy singleton). I’ve set up a git repository for the full example, but here’s the crux (a few extra functions aren’t shown here):

public function buttonMode_set(target:Sprite, buttonMode:Boolean):void {
	
	//If the dictionary hasn't been initialised, do so and set up the custom mouse cursor//
	if (! _buttonModeDictionary) {
		_buttonModeDictionary = new Dictionary();
		var pointerCursor = new MouseCursorData();
		pointerCursor.data = new &lt;BitmapData&gt;[new Cursor32Shadow()];
		pointerCursor.frameRate = 0;
		pointerCursor.hotSpot = new Point(3, 1);
		Mouse.registerCursor(&quot;PointerCursor&quot;, pointerCursor);
	}
	
	//Check whether the Sprite has already been registered for use//
	if (target in _buttonModeDictionary) {
		
		//Only add/remove listeners if the buttonMode state is actually changing//
		if (_buttonModeDictionary[target] != buttonMode) {
			_buttonModeDictionary[target] = buttonMode;
			if (buttonMode) {
				target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, true);
			} else {
				target.removeEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.removeEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, false);
			}
		}
		
	//Only add the new entry if pseudo-buttonMode is being turned on//
	} else if (buttonMode) {
		
		_buttonModeDictionary[target] = true;
		target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
		target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
		mouseOver_check(target, true);
	}
}

And then it can be turned on and off for each object like this:

buttonMode_set(button1, true);	//button1.buttonMode = true;
buttonMode_set(button2, false);	//button2.buttonMode = false;

The full example can be downloaded from github here: https://github.com/hanenbro/CursorDemo

Hello

I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.