Ever wanted to convert a bitmap to vector shapes, at runtime, in Flash? Look no further. Let me introduce you to as3potrace, an ActionScript 3 library to trace bitmaps.

As the name suggests, this is a port of the well known C library potrace by Peter Selinger. To be more exact, it is a AS3 port of Vectorization, a C# port of potrace 1.8 by Wolfgang Nagl.

Like potrace, as3potrace is released under GPL. The SWC and source code are available on GitHub:

https://github.com/PowerflasherBR/as3potrace

Demo

Demo source code: https://gist.github.com/940219 (Warning: ugly)

Usage example

A minimal example of how to trace a bitmap with as3potrace, and draw the result into a Shape:

Note that you can write your own backends to ease handling/processing of generated shapes. The one backend that i already wrote, GraphicsDataBackend, produces GraphicsData structures that you can immediately draw using Graphics.drawGraphicsData().

Alternatives

And as always, after i finished porting this little beauty, i found out that this has been done before by the amazing folks at LibSpark. Check out nitoyon’s PotrAs (also GPL’ed).

Here’s a little demo of a Flex 4 component i wrote that displays a Flash IDE-like timeline for any SWF you load into it. The timeline data is reconstructed by as3swf (i discuss how that works in a previous blog post, SWF Timeline Reconstruction with as3swf). The timeline is not interactive in this demo, and only the root timeline is shown.

The component is a subclassed Spark List with a custom virtual layout and item renderer, capable of rendering SWF timelines with a lot of frames/layers in a high performance and memory efficient way.

I have no plans to publish the source code anytime soon, but in case you are interested in using this or anything related in your own projects, please feel free to contact me for licensing/consulting.

I’ve been quite busy lately on both client and personal projects (can’t talk about the former, other than it being a big ass Flex 4 enterprise application i’ve been working on for the fine folks at Powerflasher; and it’s too early to talk about the latter.. stay tuned).

In the last few weeks i silently released random little experiments on Gist – mostly fallout from personal projects of mine. Nothing super impressive, all pretty rough, but i thought some of you might be interested.

So here it is, my silly Gist collection.

1. Show the compile date of a SWF

You are developing a Flex application. You frequently publish the application to a staging server for QA to test. You want to ensure that QA always tests the latest version of your application, because aggressive cache settings in browser or proxy servers may result in QA seeing outdated, cached SWFs.

To make sure that QA looks at the latest version of the SWF, you can have the SWF inspect itself and search for a ProductInfo tag, which contains the compile date (ProductInfo is an undocumented SWF tag, i explain it in more detail here). You can then have your Flex application display this date in order to be able to verify that QA sees the latest version.

Here’s how to do that:

http://gist.github.com/594367

2. Bin Packer

For a project i am working on, i needed an algorithm to fit as many randomly sized rectangles as possible into a given, larger rectangle (the bin). Turned out, there are a lot of different approaches out there (unfortunately none of the more elaborate ones is much better than O(argh) – the more rectangles you try to fit, the slower the algorithms get).

I found one resource particularly helpful: clb.demon.fi explains some selected Bin Packer algorithms in great detail, and provides many links to others. They also provide a C implementation for a bunch of algorithms.

I ported their Max Rect Bin Packer implementation to ActionScript 3, and added the option to have it execute asynchronously:

http://gist.github.com/543176

Demo (click to restart):

3. De Casteljau: Move a point along a quadratic bezier

Recently i needed an algorithm to split a quadratic bezier curve in two. The solution was De Casteljau’s algorithm.

http://gist.github.com/524163

Demo (click to restart):

4. Silly font glyph plotter

This Flash movie parses itself, grabs the first glyph of an embedded font and draws it on screen (uses as3swf to parse itself, so you need as3swf.swc). Kinda silly.

http://gist.github.com/523033

Demo:

5. Convert HTML to XML and use E4X to access DOM (AIR required)

Here’s a little utility function i wrote. XMLUtils.jsDomToE4X() converts HTML loaded via HTMLLoader (or the HTML DOM to be exact) into an AS3 XML object, so you can use simple E4X queries to scrape a HTML page. Evil.

And here’s the source code for a minimalistic web browser built upon the Adobe AIR Flex HTML component, that dumps out the URLs of SWFs embedded into the loaded HTML document.

The basic idea:

var x:XML = XMLUtil.jsDomToE4X(htmlControl.domWindow.document);
var ns:Namespace = Namespace("http://www.w3.org/1999/xhtml");
var embeds:XMLList = x..ns::embed.@src;

The full source:

http://gist.github.com/456130

That’s all, folks!

I hope you enjoyed my silly little collection. Please also check out my “serious” work on GitHub, and feel free to follow me on Twitter.

So did you ever try to play Shoutcast streams in Flash? Did you run into memory leaks? Did the playback sound pitched or otherwise screwed? Fear no more. Let me introduce you to as3icy.

as3icy is a drop-in replacement for the Flash Player’s Sound object that can reliably play Shoutcast, Icecast and Limewire MP3 streams. And it extracts metadata info from the stream in real time. It also reliably plays VBR MP3.

DISCLAIMER IN CAPITAL LETTERS. This is experimental code. I basically threw this code together in two 24 hour coding sessions. Also, i know as much about sound engineering as i know about pottery – i blind-ported a big chunk of Java code (the excellent JLayer MP3 decoder, originally ported from C if i’m not mistaken) to Actionscript 3 without really knowing what i was doing. So expect a few WTF moments when reading through the code, and do not expect everything to work perfectly just yet.

Some known issues

• IT IS SLOW AND STRESSES YOUR CPU. Depending on the encoding, i get around 20-50% load on my 2.4GHz Core 2 Duo (Vista), which is way too much. On my MacBook Air 2.16 GHz: full load and playback chokes, which is unacceptable. There is plenty of room for optimization though, the code is currently not optimized at all. It’s probably worth taking a look at Apparat, or Alchemy in general for more performant alternatives to decode MP3..
• Only Layer III is supported (Layer I and II decoders not ported yet).
• Only 44100Hz playback is supported (up/down-sampling to 44100Hz not implemented yet).
• Only stereo modes are supported (mono not implemented yet).
• The stream parser seems to be with problems yet, sometimes it happens that it runs out of sync for some reason.

Also, Adobe AIR is recommended to play Shoutcast streams, for two reasons: The meta data interval is passed back to the client via HTTP response headers, which are not available in the plugin version of the Flash Player, and as soon as you put the thing online you need the streaming server to host a crossdomain.xml file. If you happen to have access to the streaming server, you can of course solve these issues by hardcoding the meta data interval and have the streaming server serve an appropriate crossdomain.xml, or by using a proxy script of some sort. Also, this only applies to playing Shoutcast streams. You can play static MP3 files (for example VBR MP3s) using as3swf in the plugin version of the Flash Player without any problem (security restrictions still apply of course).

A simple example: Shoutcast stream playback

package
{
  import com.codeazur.as3icy.ICYSound;
  import com.codeazur.as3icy.events.ICYMetaDataEvent;

  import flash.display.Sprite;
  import flash.events.HTTPStatusEvent;
  import flash.net.URLRequest;
  import flash.net.URLRequestHeader;

  public class SimpleShoutcastPlayer extends Sprite
  {
    protected static const URL:String = "http://72.233.14.70/hype";

    protected var icySound:ICYSound;

    public function SimpleShoutcastPlayer()
    {
      var req:URLRequest = new URLRequest(URL);
      req.requestHeaders = [ new URLRequestHeader("Icy-Metadata", "1") ];
      icySound = new ICYSound();
      icySound.addEventListener(ICYMetaDataEvent.METADATA, metaDataHandler);
      icySound.addEventListener(HTTPStatusEvent.HTTP_RESPONSE_STATUS, httpResponseStatusHandler);
      icySound.load(req);
      icySound.play();
    }

    protected function httpResponseStatusHandler(e:HTTPStatusEvent):void {
      // The HTTP_RESPONSE_STATUS event is fired when the stream is opened and starting to load.
      var s:String = "Connected!";
      if (icySound.icyName.length > 0) { s += "\rName: " + icySound.icyName; }
      if (icySound.icyDescription.length > 0) { s += "\rDescription: " + icySound.icyDescription; }
      if (icySound.icyUrl.length > 0) { s += "\rURL: " + icySound.icyUrl; }
      if (icySound.icyServer.length > 0) { s += "\rServer: " + icySound.icyServer; }
      if (icySound.icyMetaInterval > 0) { s += "\rMeta Interval: " + icySound.icyMetaInterval; }
      trace(s);
    }

    protected function metaDataHandler(e:ICYMetaDataEvent):void {
      // The METADATA event is fired when new metadata is available.
      if (e.metaData.length > 0) {
        trace("Now playing: " + e.metaData.slice(13, -2));
      }
    }
  }
}

This code (Adobe AIR required) plays the Hype Machine live radio stream, and traces out general information about the station, as well as the names of currently playing songs.

Note that we set a custom request header, Icy-Metadata: 1. This tells the server to periodically send meta data with the stream. Under the hood, as3icy transparently extracts this meta data from the stream in real time and passes it to the application via the ICYMetaDataEvent. This event won’t be fired when the request header above is not sent.

The trace output should look something like this:

Connected!
Name: Hype Radio
Description: Radio powered by music blogs
URL: http://hypem.com/radio/
Server: Icecast 2.3.1
Meta Interval: 16000
Now playing: Collider - Time Concerns
Now playing: Rogue Wave - Birds (Neil Young cover)
Now playing: The Big Pink – Dominos
[..]

Open Flash CS4, create new AS3 FLA, add as3swf.swc and paste this on frame 1:

import com.codeazur.as3swf.SWF;
var swf:SWF = new SWF(root.loaderInfo.bytes);
trace(swf);

Trace output:

[SWF]
  Header:
    Version: 10
    FileLength: 149405
    FileLengthCompressed: 149405
    FrameSize: (550,400)
    FrameRate: 24
    FrameCount: 1
  Tags:
    [69:FileAttributes] AS3: true, HasMetadata: false,
      UseDirectBlit: false, UseGPU: false, UseNetwork: false
    [09:SetBackgroundColor] Color: #FFFFFF
    [86:DefineSceneAndFrameLabelData]
      Scenes:
        [0] Frame: 0, Name: Scene 1
    [82:DoABC] Lazy: true, Length: 149219
    [76:SymbolClass]
      Symbols:
        [0] TagID: 0, Name: Untitled_fla.MainTimeline
    [01:ShowFrame]
    [00:End]

Excercise: Draw something on stage, and run the code again.

Want more? Drop by my session Hacking SWF at FITC Amsterdam (Feb 22th, 16:00).

[Edit] Jim Cheng deserves credits. He was the one who whispered “root.loaderInfo.bytes” into my virtual ear on IM.

While testing my AS3 SWF library as3swf yesterday, i found that MXMLC (the compiler that comes with the Flex SDKs)  writes undocumented SWF tags to the SWFs it produces.

I was able to identify two so far:

ProductInfo (Tag ID 41)

The ProductInfo tag contains infos about the tool used to generate the SWF, as well as the date and time the SWF was compiled. It also contains info about the “Edition” of the software used (see below), and although this seems to be always set to “None” in Flex Builder 3 and Flash Builder 4, it potentially could become a privacy issue, especially being an undocumented feature (you better know about this tag just in case you accidentally publish commercial work with your non commercial Flash Builder license).

• ProductID (UI32)
  0: Unknown
  1: Macromedia Flex for J2EE
  2: Macromedia Flex for .NET
  3: Adobe Flex
• Edition (UI32)
  0: Developer Edition
  1: Full Commercial Edition
  2: Non Commercial Edition
  3: Educational Edition
  4: Not For Resale (NFR) Edition
  5: Trial Edition
  6: None
• MajorVersion (UI8)
• MinorVersion (UI8)
• BuildLow (UI32)
• BuildHigh (UI32)
• CompilationDate (UI64)
  Milliseconds since 1.1.1970

Examples:

Flex 4.0 – [41:ProductInfo] ProductID: 3, Edition: 6, Version: 4.0.0.7791, CompileDate: Fri Aug 21 05:18:21 GMT-0300 2009

Flex 3.2 – [41:ProductInfo] ProductID: 3, Edition: 6, Version: 3.2.0.3958, CompileDate: Fri Aug 21 05:23:22 GMT-0300 2009

DebugID (Tag ID 63)

This tag is written to SWFs that are enabled for debugging. It contains a 16 byte UUID.

• UUID (UI8[16])

Example:

[63:DebugID] UUID: b8f36d6a-c735-a340-daa7-44730af92505

Reference

Flex SDK:

• TagValues.java
• ProductInfo.java
• DebugID.java

Community:

• Igor Costa: Reading the compilation date of SWF with the magic of ByteArray
• Judah Frangipane: Cache busting your Flex SWF and the SWF Compilation Date

I need a custom installer for an AIR application i’m currently developing. That’s because my AIR app needs additional functionality that the AIR runtime doesn’t provide (specifically: detecting USB storage devices, act as a TCP socket server, talk to Last.fm scrobbler plugins). For that purpose i wrote a local RPC socket server gateway in C (one for Mac OS X and one for Windows) which always runs once the user logs in to her OS. The AIR application can then call methods on that local gateway, or receive events.

The problem is that the user needs to install the RPC server before she installs the actual AIR application. The install process should be seamless (one installer installs RPC server, AIR runtime if needed, and the application itself in one go) and the installer should be as small as possible. Currently there is no info available from Adobe on how to write custom installers that automatically download/install the AIR runtime if needed (is there?).

Artemis is another project aiming at extending AIR using a local socket server, but it seems that the project has been shut down because of the reasons stated above.

So i have been pulling out my hair lately on how to solve that problem.

I think i found a feasible solution. I am not sure because i haven’t tested all this, but i wanted to throw it online for discussion. The drawback is that the user needs to install your application with a OS native custom installer.

First you write standard installers for both Mac OS X and Windows, that install the local socket server either as a service/daemon or as an agent so that the server always starts at system launch or user login. Nothing special here yet.

The trick would be to write a simple SWHX application that basically implements the code included with the AIR Installer badge. That helper application can then be included with the installer, which executes it after the local socket server has been installed.

As i said i haven’t tested this yet (will do soonish), but this should work, no?

The question remains why i don’t just use SWHX for the main app and screw AIR alltogether.

FZip has been around for some time now, and people seem to like it. However one feature has been asked for repeatedly: In addition to reading ZIP archive, people want to be able to create new (and modify existing) archives.

So i finally sat down this weekend and added that.

The code is not tested very well (it works for me but may not work for you) and has no ASDocs yet, so i release it as an alpha version, with the hope of massive bug feedback.. :)

Download: fzip_1_0_52_alpha.zip fzip.zip

New methods in class FZip:

• addFile(name:String, date:Date, content:ByteArray)
• addFileAt(index:uint, name:String, date:Date, content:ByteArray)
• removeFileAt(index:uint)
• serialize(stream:IDataOutput)

Sample code:

// Create file contents
var ba:ByteArray = new ByteArray();
ba.writeUTFBytes("Hello World!");
// Create ZIP archive and add file
var zip:FZip = new FZip();
zip.addFile("hello.txt", null, ba);
// Serialize ZIP into a new file
// (we use the Adobe AIR specific class FileStream here,
// but you can as well use ByteArray or anything that
// implements IDataOutput)
var file:File = File.applicationStorageDirectory;
file = file.resolvePath("hello.zip");
var stream:FileStream = new FileStream();
stream.open(file, FileMode.WRITE);
zip.serialize(stream);
stream.close();

Just a quick FYI: FZip and AIRRemoteUpdater upgrades for AIR Beta 2 are now available for download.

FZip now uses ByteArray.uncompress(CompressionAlgorithm.DEFLATE) instead of the now deprecated ByteArray.inflate(). I also tweaked FZip to throw an exception when a parsing error occurs and no event listener is registered for FZipErrorEvent.PARSE_ERROR events.

AIRRemoteUpdater now gets the local descriptor XML via Shell.shell.applicationDescriptor which was added in AIR Beta 2, and uses the upgraded FZip sources.

Enjoy, and please let me know if you run into any problems with this new release.

I just released the first version of AIR Remote Updater, an AS3 class to automate remote software updates in Adobe AIR applications.

It transparently checks version numbers, downloads the .AIR installer file if needed and triggers the AIR-native update process.

It grabs the version number directly from the remote .AIR file without having to download the entire file, eliminating the potential error prone need of having to put a separate descriptor file online along with the .AIR installer file.

Background:

An .AIR installer file is a PKZIP archive containing metadata files along with the packaged application files. The files contained in a .AIR installer file are, in this order:

1. /mimetype
2. /META-INF/AIR/application.xml (contains version info)
3. /META-INF/AIR/hash
4. /META-INF/signatures.xml
5. packaged application files

The file we are interested in, /META-INF/AIR/application.xml (the “application descriptor file” that contains the version number), is always the second file in the archive. AIR Remote Updater uses FZip to stream in the remote .AIR until (and only until) the application descriptor file has loaded. We can then close the stream, uncompress that file and extract the version number.

More info and download here:
http://codeazur.com.br/lab/airremoteupdater/