webroo.org » Actionscript

HTML 5 Canvas vs Flash

Matt Sweetman — Sun, 17 Jan 2010 16:11:26 +0000

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.

Javascript and AS1 share a lot in similarity as programming languages so porting the code was relatively easy. The Canvas object also has a similar API to the Graphics object in Flash. I’ll admit Javascript is not my favourite language, by a long shot, the lack of strict typing is difficult to return to after years of AS3, and in more complex scripts nested closures can get messy. It is however fast to program, which can come in very handy when prototyping and experimenting with ideas.

It may be worth investigating Processing, a framework for the Canvas object written by John Resig, the guy behind JQuery.

Overlapping hit areas for sibling sprites

Matt Sweetman — Tue, 01 Dec 2009 14:50:27 +0000

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.

The containsPoint method has to be continually polled, so it needs to be called everytime the mouse moves. I’ve written some code that wraps this functionality up for ease of use. Take a look at the class below to see how the insides work.

Download: HitArea.as

In the example below I’ve set up two hit areas and overlap them by 100px. The hit areas are invisible, so they won’t show up on the stage, but when you click on the overlapping section the CLICK event will fire twice, once for each hit area. There are also HitArea.ROLL_OVER and HitArea.ROLL_OUT events, which can be useful.

hitArea1 = new HitArea(200, 200); // Dimensions are passed in the constructor
addChild(hitArea1);
hitArea1.addEventListener(HitArea.CLICK, hitAreaClick);

hitArea2 = new HitArea(200, 200);
addChild(hitArea2);
hitArea2.x = 100; // overlap the first hit area by 100 px
hitArea2.addEventListener(HitArea.CLICK, hitAreaClick);

private function hitAreaClick(event:Event):void
{
// will fire twice, even on overlapping area
trace(“click: “ + event.target.name);
}

Unfortunately there are two downsides to this method: firstly it’s slightly more CPU intensive (it needs to constantly run code whenever the mouse moves). Secondly you can’t use the hand cursor with the hit area. This is the most problematic from a user-experience point of view. Unfortunately to get a hand cursor you need to set buttonMode=true on the Sprite, and the moment you do that it turns it into a real button and we come back to the original problem.

Modulo and the negative divisor

Matt Sweetman — Sat, 24 Oct 2009 12:41:03 +0000

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:

public function mod(a:Number, b:Number):Number
{
return a - (b * Math.floor(a/b));
}

trace(100 % -30); // output: 10
trace(mod(100, -30)); // output: -20

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.

Time sync for remote server

Matt Sweetman — Tue, 11 Aug 2009 13:09:42 +0000

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.

package
{
import flash.utils.getTimer;

/**
   * TimeSync maintains a seperate time value from the system clock.
   */
public class TimeSync
{
private static var _instance:TimeSync;

public static function getInstance():TimeSync
{
if (_instance == null) _instance = new TimeSync();
return _instance;
}

/**
   * Internal time-stamp value to sync to.
   * Must be set using sync().
   */
protected var _syncStamp:Number;

/**
   * Time-stamp for the internal flash getTimer().
   */
protected var _timerStamp:Number;

public function TimeSync() {}

/**
   * The time elapsed since the last sync, in millseconds.
   */
public function get delta():Number
{
return (getTimer() - _timerStamp);
}

/**
   * The synchronized time value, in milliseconds. Pass this into
   * a new Date object to get formatted time: new Date(time);
   */
public function get time():Number
{
return (_syncStamp + delta);
}

/**
   * Sync the timer to a new time value.
   * @param time Unix time value in milliseconds
   */
public function sync(time:Number):void
{
_syncStamp = time;
_timerStamp = getTimer();
}
}
}

Download: TimeSync.as

To use it just call the sync() method and set the time value you want to sync to. Then everytime you need the synced time value use the .time property to retrieve it. You can also pass the time value into a new Date object to format it.

// Example
var timeSync:TimeSync = TimeSync.getInstance();
timeSync.sync(987654321098); // set unix time value, in milliseconds
trace(timeSync.time); // 987654321098
trace(new Date(timeSync.time)); // Thu Apr 19 05:25:21 GMT+0100 2001

Remote sync example

To get it syncing remotely you just need to retrieve a unix time-stamp from a server. A simple bit of php code can do this:

echo “time=”.time(); ?>

Then use URLLoader in Flash to retrieve the value. Remember to multiply the value to milliseconds! Unix time is usually returned in seconds but Flash works in milliseconds.

public function syncServerTime():void
{
var request:URLRequest = new URLRequest(“http://webroo.org/time.php”);
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
loader.load(request);
}

public function loaderCompleteHandler(event:Event):void
{
var time:Number = (event.target as URLLoader).data.time;
TimeSync.getInstance().sync(time * 1000); // Multiply unix time to ms
}

Download: TimeSyncExample.as