webroo.org

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

Auto size button for Flash components

Matt Sweetman — Sun, 19 Apr 2009 10:50:37 +0000

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.

Code

In order to add the auto-sizing functionality I needed to subclass Button and override the layout routine. I also added a property that allows you to turn the auto-sizing on of off, the default is on.

package
{
import fl.controls.Button;
import fl.core.InvalidationType;

import flash.text.TextFieldAutoSize;

public class AutoSizeButton extends Button
{
public function AutoSizeButton()
{
super();
}

protected var _autoSize:Boolean = true;
/**
* Whether auto sizing is turned on. Default is true.
*/
public function get autoSize():Boolean
{
return _autoSize;
}

public function set autoSize(value:Boolean):void
{
_autoSize = value;
textField.autoSize = _autoSize ? TextFieldAutoSize.LEFT
: TextFieldAutoSize.NONE;
invalidate(InvalidationType.SIZE);
}

override protected function drawLayout():void
{
if (autoSize)
{
// Set the component width by
// calculating text & padding widths
var txtPad:Number =
Number(getStyleValue(“textPadding”));
_width = (textField.textWidth + 4) + (2 * txtPad);
}
super.drawLayout();
}

}
}

Basically all this class is doing is intercepting the layout drawing routine and pre-calculating the entire component width. Then it calls super.drawLayout() which ensures the text field sizes to the width. The calculation is taken directly from LabelButton, a super class of Button.

Issues

There are a few issues: Firstly it won’t work with an icon in the button, and secondly it doesn’t auto-size the height. Also you will need to instantiate it through Actionscript, like so:

var myButton:AutoSizeButton = new AutoSizeButton();
myButton.label = “My first button”;
addChild(myButton);

Download source code here: AutoSizeButton.as

Bindable interfaces with custom events

Matt Sweetman — Sat, 06 Dec 2008 18:12:51 +0000

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:

package bindingTest
{
public interface IArtist
{
[Bindable]
function get name():String;
function set name(value:String):void;

[Bindable(event=“artistAgeUpdate”)]
function get age():int;
function set age(value:int):void;
}
}

But this will give you the following compiler error:

Error: [Bindable] not allowed on global or package-level functions

Also, putting a [Bindable] tag above the interface definition doesn’t work either, which is different to how classes work. The compiler won’t actually throw an error in this case, but the binding won’t work.

The propertyChange event

The solution is to specify an event for every bindable tag. This means you must use “propertyChange” for any normal [Bindable] tag used in your class. This is the event type the standard binding system dispatches. Take a look at PropertyChangeEvent in the Flex docs for more info.

package bindingTest
{
public interface IArtist
{
[Bindable(event=“propertyChange”)]
function get name():String;
function set name(value:String):void;

[Bindable(event=“artistAgeUpdate”)]
function get age():int;
function set age(value:int):void;
}
}

It seems classes and interfaces treat binding tags in slightly different ways. I guess the moral of the story is you should specify custom events for every bindable property. But that’s a lot of work. On the other hand it makes debugging those binding call-stacks a little easier as you can quickly identify the event type.

Quality Glow and Blur Flex effects

Matt Sweetman — Tue, 04 Nov 2008 15:03:46 +0000

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.

Effect and EffectInstance

All Flex effects consist of subclasses of Effect and an EffectInstance. In the case of glow this is Glow and GlowInstance. Glow contains the properties and targets of the effect, and GlowInstance applies the actual filter. You need to subclass these and add the quality property to both:

package glowtest
{
import mx.effects.Glow;
import mx.effects.IEffectInstance;

public class QualityGlow extends Glow
{
// Add the quality property
[Inspectable(category=“General”, defaultValue=“1″)]
public var quality:Number;

public function QualityGlow(target:Object=null)
{
super(target);
// Our new class that applies the filter
instanceClass = QualityGlowInstance;
}

override protected function initInstance(instance:IEffectInstance):void
{
super.initInstance(instance);
QualityGlowInstance(instance).quality = quality;
}
}
}

Here I’ve added the ‘quality’ property and tagged it with Inspectable metadata, which ensures it’s available in MXML. Also, instanceClass is set to our new version of QualityGlowInstance, a new class which makes sure the underlying GlowFilter uses the property ‘quality’ in it’s constructor.

package glowtest
{
import flash.filters.GlowFilter;

import mx.effects.effectClasses.GlowInstance;

public class QualityGlowInstance extends GlowInstance
{
public var quality:Number;

public function QualityGlowInstance(target:Object)
{
super(target);
}

override public function onTweenUpdate(value:Object):void
{
setQualityGlowFilter(value[0], value[1], value[2], value[3]);
}

override public function onTweenEnd(value:Object):void
{
setQualityGlowFilter(value[0], value[1], value[2], value[3]);
super.onTweenEnd(value);
}

// setGlowFilter() is private in the superclass
// so we duplicate it’s functionality here:
protected function setQualityGlowFilter(color:uint, alpha:Number, blurX:Number, blurY:Number):void
{
var filters:Array = target.filters;

// Remove any existing Glow filters
var n:int = filters.length;
for (var i:int = 0; i < n; i++)
{
if (filters[i] is GlowFilter)
filters.splice(i, 1);
}

// Add quality property to GlowFilter:
if (blurX || blurY || alpha)
filters.push(new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout));

target.filters = filters;
}
}
}

Apologies for the length of this class, but some code needed to be duplicated from the superclass. A common problem with the Flex framework is private methods, which means you cannot override them in a subclass. In this case setGlowFilter was the culprit, and in order change it’s functionality I had to duplicate the contents and change any references made elsewhere. This explains why the two onTween* methods are overridden.

Identical changes can be made to the Blur effect to get the quality property working, or simply download all the classes below.

Download source code here: qualityflexeffects.zip

Overlapping TabBar in Flex

Matt Sweetman — Wed, 27 Feb 2008 13:07:50 +0000

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:

The Problem

The example above shows the default TabBar functionality. Notice the right-hand side each tab is obscured by the next tab along, no matter which tab you select. The problem lies in the way TabBar arranges it’s children buttons. TabBar ultimately derives from Box, which uses the BoxLayout class to order sprites left-to-right based on their index in the display list. This means if you change the depth of a sprite in a Box it’s corresponding horizontal position will also change. So in our situation, changing the selected tab’s depth to the top causes the tab-sprite to be moved to the far-right of the box.

The Solution

Based on what’s overridable in TabBar the best solution is to manage the position of the tabs in the display list ourselves. To do this we need to subclass TabBar and store a fixed reference of the tabs in an array and dictionary. We then return these positions when the layout class arranges everything, which satisfies the layout routine’s desire to order everything left-to-right on depth. This then leaves us to manage the real sprite depths ourselves. Hopefully this code will explain it better:

public class OverlappingTabBar extends TabBar
{
// Used to store local reference to tabs
private var _tabs:Array;
private var _tabsDict:Dictionary;

public function OverlappingTabBar()
{
super();
_tabs = new Array();
_tabsDict = new Dictionary(true);
}

override protected function createNavItem(label:String, icon:Class = null):IFlexDisplayObject
{
var tabIndex:int = numChildren;
var navItem:IFlexDisplayObject = super.createNavItem(label, icon);
// Store tab refs in our array and dictionary
_tabs.push(navItem);
_tabsDict[navItem] = tabIndex;
return navItem;
}

override public function getChildAt(index:int):DisplayObject
{
return _tabs[index];
}

override public function getChildIndex(child:DisplayObject):int
{
return _tabsDict[child];
}

override public function removeChildAt(index:int):DisplayObject
{
// ensures tabs are cleaned up from our
// array and dictionary when removed
var c:DisplayObject = super.removeChild(getChildAt(index));
_tabsDict[getChildAt(index)] = null;
_tabs.splice(index, 1);
return c;
}
}

We’re simply storing the original position for each tab when it’s created in createNavItem(), then we return the stored position everytime getChildAt() and getChildIndex() is called (as it will be by the layout class). The overridden removeChildAt() ensures that our array and dictionary is kept up to date if tabs are removed from the bar, which occurs whenever the TabBar.dataProvider is changed.

Finally we need organise the tabs in the display list ourselves. The best location I found to do this was in hiliteSelectedNavItem(), as the method is passed the index of the selected tab.

override protected function hiliteSelectedNavItem(index:int):void
{
super.hiliteSelectedNavItem(index);
if (index != -1)
{
// z-order tabs
var l:int = _tabs.length - 1;
for (var i:int = 0; i <= l; i++) {
setChildIndex(_tabs[i], (l-i));
}
// put our selected tab at the top
setChildIndex(_tabs[index], l);
}
}

Of course it would look nicer with some decoratively sloped tab edges, but hopefully you get the idea. I admit that the code is a bit of a hack on top of the original component, and I can’t guarantee it won’t cause problems somewhere down the line, but iso far it’s proved robust. You should be able to swap out your original TabBar instances with OverlappingTabBar by simply renaming the MXML tag.

Download the source code here: OverlappingTabBar.as

New blog

Matt Sweetman — Fri, 15 Feb 2008 11:01:34 +0000

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.