I found a very problematic and reproducible bug with ActionScript 3 and simple display object transformations (width, height, rotation), and thought I should document it to save other developers some debugging time.

Put a 200x200px square clip on stage named foo. Add the following code.

foo.height = 100;
foo.rotation = 90;
trace(foo.height);

As expected, this traces 200. It scales the clip vertically, then rotates it, so that it is now 100px wide and 200px high on stage. Now, change the code, and run it again.

foo.rotation = 90;
foo.height = 100;
trace(foo.height);

Unexpectedly, this also returns 200. It should rotate the clip and then apply the vertical scale resulting in a shape that is 100px high and 200px wide on stage. The visual result is identical to the above, when it shouldn’t be.

foo.rotation = 90;
foo.height = 100;
foo.height = 100;
trace(foo.height);

Even stranger, this does trace 100. Unfortunately, the object has been scaled both vertically and horizontally, and is now 100x100px, when it should be 200px wide and 100px high. Seems like the first height assignment gets applied before the rotation, and the second gets applied after the rotation.

Click here to see a (very) simple demo of this behaviour. The left and right blocks should be the same dimensions.

Freaky. I would hazard a guess that this is related to AS3’s weird hybrid of display object properties and transform matrixes.

One workaround would be to work with scaleX and scaleY instead, which are always applied to the original dimensions, and do not account for rotation.

A few months ago I built a class that makes establishing two way communication between SWFs via LocalConnection much easier. This is useful for talking between different SWFs embedded on the same HTML page, but especially for communicating between an ActionScript 3 application SWF, and loaded ActionScript 2 content SWFs.

Continue reading →

We had the pleasure of working with Adobe to architect and develop the FAVideo component that Kevin Lynch demoed at AJAXExperience, and which was just released in beta form on the Adobe labs site. It was an interesting project, building a Javascript object that acted as a facade for an embedded Flash video player, and using external interface to communicate between them. The intent is to provide a simple interface for AJAX / Web2.0 developers to embed, control, and play video back in their applications. As such, it has a really robust API for controlling video playback, but it also provides a really simple way for anyone to quickly inject video into their HTML content.

<script lang="javascript">
// simple usage:
var myVideo = new FAVideo("myDiv", "myVideo.flv");
// or a little more customized:
var opts = {skinPath:"SteelOverAll.swf", autoLoad:false, previewImagePath:"preview.jpg"};
var myVideo = new FAVideo("myDiv", "myVideo.flv", 320, 240, opts);
</script>

We had to write some interesting logic to deal with delaying method calls while the player SWF loads, as well as writing a custom event model for subscribing to events like cuePoint, progress, and playheadUpdate in Javascript. We also included support for using any Flash 8 video player skin, youtube-style preview images, built-in Flash player detection, and a ton more. Building the Javascript portion of this component was a somewhat nostalgic experience for me, hacking out classes using prototypes. Made me even happier about AS2 & 3.

The trickiest part of the whole thing was getting it to work properly in Internet Explorer. Apparently there’s a series of nasty issues with IE, Flash player, divs and innerHTML – but that’s a topic for another post.

FAVideo is released under a BSD license, so it can be used for commercial projects. You can download the full source on Adobe Labs. Thanks to everyone at Adobe that tested and provided feedback on the component!