webroo.org

I eventually got round to trying out Processing.js - the javascript implementation of the original Processing. You can see the result below in a little experiment called Fireflies.

Fireflies
(View in Google Chrome/Firefox)

I actually ported this from a javascript experiment I did around the same time as the snowfall one. I thought it would be a good idea to see how regular JS performed alongside Processing.js. You can check out the regular javascript version for comparison. I tried to ensure they both looked identical and were coded as similarly as possible. The verdict is that they both perform smoothly, but Processing.js seems to require about 20% more CPU than regular JS, for what reason I don’t quite know. I haven’t looked into the Processing source code to see what’s going on. Processing has a neater syntax and less overall code, and it even sorted out scoping issues I had in the regular version, so it wins on that front.

I’d be interested to use it some more, although I’m unsure of what benefits it offers over regular JS. The syntax is certainly nicer, but the typed variables tempt me with the facade of proper OO - it’s ultimately converted to javascript so I know it doesn’t offer any practical advantage. I think it would require further investigation to see the real benefits.

Oh, I hit a couple of hurdles early on that had me stumped for ages. The beginners guide to Processing.js is lacking some vital information, so if you’re stuck on how to actually set up it in your HTML page then follow the points below:

Read more »

Over the holidays I gave myself a break from Actionscript and took a look at the HTML 5 Canvas object. It’s been a while since I programmed any javascript, and AJAX technologies seem to be the popular choice for web apps these days (goodbye Flex!). I decided to port over an old Actionscript 1 experiment to see how the two technologies performed alongside each other, the results can be seen below.

Canvas Snowfall

Flash Snowfall

You’ll need a modern browser to view the canvas version (eg: Firefox/Chrome/Opera/etc). View the source of the Canvas version for the javascript.

As you can see they look pretty much identical, the differences primarily lie in performance. The Flash version can handle more than twice the number of snowflakes before the frame rate drops. This may be down to the a fundamental difference between Canvas and Flash: Canvas is a rasterised bitmap object, whereas Flash is a vector animation tool. When you draw shapes in Canvas you’re drawing directly onto a bitmap, the shape can no longer be moved or scaled and is ‘baked’ into the image. In some ways it’s similar to the BitmapData object in Flash. Because of this animation is far easier to accomplish in Flash and I had to adapt parts of the original code to work with the Canvas concept.

Read more »

I have a recurring problem with buttons. And when I mean buttons I mean anything that has a mouse handler and inherits from InteractiveObject, which includes Sprite and SimpleButton. The problem is when two or more of these objects are siblings (i.e. in the same container, not nested) and they overlap, then they block each other. The top-most one will always receive mouse interaction and anything beneath is blocked.

What I would like is both Sprites to dispatch mouse events when the user interacts. Sometimes you can get round it by nesting buttons and using ROLL_OVER and MOUSE_OVER events, but this isn’t always practical, especially if there are a lot of overlapping buttons. So I’ve come up with another solution.

The idea is to create a ‘fake’ hit area using the Rectangle object. Rectangle has a method called containsPoint, which you pass a Point object and it returns true or false depending on whether the coordinates fall inside the specified dimensions. So if you pass the mouse coordinates you can determine whether the mouse is inside the ‘fake’ hit area. Also, because Rectangle isn’t a display object it can’t block mouse interaction, and so you can have multiple overlapping hit areas that all trigger when clicked.

Read more »

I never had reason to doubt the modulo operator, but it turns out it’s been hiding a little secret from me all these years: it works differently in other programming langauges. I discovered this while converting a Python program to Flash. In Python the result of the modulo operation has the same sign as the right-hand number (divisor), but in Actionscript it has the same sign as the left-hand number (dividend). There’s a wikipedia article on the modulo operation that explains it in more detail, and has a list of languages and their relevant implementation.

If you need to retain the sign of the divisor in your result (i.e. python-style) here’s a quick Actionscript method to achieve it:

Admittedly this is the first time in 10 years of actionscript programming that it’s caused me a problem, so take from that what you will.

Here’s a quick little utility I used in my last project: a simple class that syncs with a time source. It can be used to ensure your application runs on server time rather than the user’s system clock. You sync once with the remote server at the start, and then Flash runs an internal timer to calculate the time elapsed since you last synced. This can prevent multiple server calls everytime you need a time value.

Inside it uses the getTimer() function, which is good at keeping sync and is unaffected by system clock changes, even mid-application. It’s not a particularly difficult piece of code. I made the class a singleton, but you could use it differently if you wanted.

Read more »

I’ve recently been working outside of Flex in standard Flash & Actionscript, so I thought I’d take the opportunity to try the CS3/4 components. They’re much leaner than their bigger brother’s, and as a consequence don’t offer anywhere near the functionality, but their simplicity means they’re fast and easy to work with.

One of the tweaks I had to make was creating an auto-sizing Button:

If you type some text into the box you can see the difference. The standard Button doesn’t change it’s width based on the label length, which is crucial to any web project if it’s multi-lingual. So here’s my solution, with both an example and the code.

Read more »

I’m surprised I haven’t stumbled across this before, but it caused a little head-scratching in a recent project. The problem involves having a class with a mixture of binding tags (i.e. with and without custom events), but assumes you are programming to the interface the class implements. In this case making it bindable proves a little unintuitive.

Imagine you have an class called Artist with two getter/setter properties: name and age. One of them uses a standard binding tag: [Bindable], the other uses a bindable tag with a custom event: [Bindable(event="artistAgeUpdate")]. Now you may be inclined to copy the tags into your interface and paste them above the getter/setter pair, like so:

Read more »

The Glow and Blur effects are useful tweens that can be used to animate flash filters in Flex, the only problem is they don’t implement the quality property. It’s hard coded at a value of 1. In most cases this isn’t an issue, and where performance is concerned it’s best left unchanged. But having the extra control doesn’t hurt, especially considering a quality of even 2 or 4 can dramatically increase the smoothness a filter.

This shows the difference between a Glow effect with a quality of 4 and 1. As you can see the quality glow is far smoother. Adding the quality property onto Flex effects is quite simple, although it does require overriding two of the effect classes and duplicating a small amount of code.

Read more »

On a recent project I needed an overlapping tab bar, something that the default Flex TabBar doesn’t implement. While you can can easily change the spacing between tabs using a negative horizontalGap, you cannot retain a top-of-the-pile-like status for the selected tab. They are permanently stacked left-to-right on top of each other.

There’s a solution out there that relies on clever skinning techniques, but it’s a little time-consuming and inflexible. So after some poking around inside the Flex framework I discovered the underlying problem and came up with this solution:

Before I explain how I achieved this let’s take a look at the problem with the default TabBar:

Read more »

I’ve decided that what I should really do is start a new blog. I’ve been using other people’s blogs as a source of information and trouble-shooting for many years, and I think it’s finally time to give back some of the good karma. I’m going to share some of my Actionscript and Flex knowledge with the rest of the world.

Of course writing about something that hasn’t already been documented in obsessive detail by a fellow nerd is always hard, especially with the deluge of blogs out there. But just maybe I can document a problem nobody’s encountered before, and someone, somewhere will benefit from what I type. And if it all goes wrong then I’ll just write about things I like.