webroo.org » Flash

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.

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