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).

The whole Flash community has been jumping for joy ever since Apple revised their controversial App Store License Agreement in early September this year. Apps created with Adobe’s “iPhone Packager” are not longer banned from the App Store, and Adobe started working on the product again.

Section 3.3.1 now merely forbids the use of private APIs.. tooling and language restrictions have been lifted, especially the part that prohibits “linking to documented APIs through an intermediary translation or compatibility layer or tool” – the iPhone Packager uses LLVM to cross-compile ActionScript to iPhone-native byte code, which is now allowed.

I didn’t hear many people commenting on Section 3.3.2 though, which i find weird. I think the real good news is this very section. Code interpreters are now explicitly allowed, given that “all scripts, code and interpreters are packaged in the Application and not downloaded”.

This means that Adobe could potentially shelve the existing, LLVM based iPhone Packager, and instead deploy a regular AIR runtime with a separate SWF. This would certainly make the publishing process a lot faster, as there is no cross-compilation step anymore – a standard SWF is published, which is then just packaged together with an iOS AIR runtime. I am uncertain which approach would perform better though: interpreted and JIT compiled via virtual machine, or LLVM translated native code.

Also feasible: a Flash Player engine that developers can plug in to their Cocoa apps, to mix UIKit and SWF. Best of both worlds.

Where do you think the iPhone Packager is heading?

So, i was thinking.. the Flash Player version number in the “HTML 5 Did Not Kill Flash” comic strip (258.1) … PLAUSIBLE?

It is obvious that we deal with Jean-Luc Picard, captain of the Starship USS Enterprise NCC-1701-D, which places the scene in the Star Trek TNG series. According to Wikipedia, Star Trek TNG is set in the 24th century from the year 2364 through 2370.

Today: 1285956121684 (Fri Oct 1 15:02:01 GMT-0300 2010)
Star Trek TNG start: 12433402800000 (Wed Jan 1 00:00:00 GMT-0300 2364)
Star Trek TNG end: 12654327600000 (Fri Jan 1 00:00:00 GMT-0300 2371)
Assumed 18 months release cycle, in ms: 47304000000
Release cycles until Star Trek start:
   12433402800000 - 1285956121684 = 11147446678316
   11147446678316 / 47304000000 = 236
   236 + 10 = 246
Release cycles until Star Trek end:
   12654327600000 - 1285956121684 = 11368371478316
   11368371478316 / 47304000000 = 240
   240 + 10 = 250

So assuming a strict 18 month release cycle, this places version 258.1 just about a decade or so after Star Trek TNG (versions 246-250) ends. If we further assume that new technologies will emerge in the coming 350 years that speed up release cycles a bit, i think we can safely say that Flash Player version 258.1 is indeed plausible.

Hypothetically speaking…

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.

In case you havent heard of it yet, as3swf is an ActionScript 3 library to parse and publish SWF files. It does that rather well by now, providing full roundtrip publishing, plus some neat extra features like shape export to AS3 Drawing API, AS3 GraphicsObjects, FXG, and Objective-C.

Whenever i find some free time i’m working on adding new, useful features. One feature of as3swf, that i haven’t talked about much yet but is implemented for quite a while already, is the reconstruction of timelines as you know them from Adobe’s Flash IDEs.

In the first place, timelines in as3swf help you to export and render layered animations. Having a long list of parsed SWF tags won’t help much if you want to export or render frame X, as the Flash Player would display it.

Flash Player Display List

When executing a SWF, the Flash Player reads sequentially through all its tags, from start to end, and builds and maintains an internal display list along the way. This display list is manipulated by PlaceObject and RemoveObject tags, and rendered every time the Flash Player encounters a ShowFrame tag. Characters placed on the display list by PlaceObject tags stay on the display list until they are removed by a RemoveObject tag. PlaceObject tags are also used to manipulate a previously placed character (tweens).

In order to figure out which characters are displayed how and at which depths in any given frame, as3swf simulates the Flash Player behavior and builds its own display list structures while parsing the tags.

as3swf’s SWF (root) and TagDefineSprite (movieclips) classes each have a timeline property, containing an instance of the SWFTimeline class. Other than the tags itself, this class contains the following goodies:

• dictionary – Contains references to all characters that may be placed on the display list. The dictionary’s key is the character ID as defined by the definition tag, the value is the index of the definition tag.
• scenes – Lists all scenes with their names and frame numbers.
• frames – Lists all frames. For each frame, you can access the contained characters and their depths, what tag placed the character on the display list, what tag modified its transformation/color matrices if any (for tweens) and whether this frame is a key frame or not.
• layers – Lists all layers. Each layer contains an array of active frames.
• soundStream – If present, contains this timeline’s sound stream complete with raw MP3 data, start frame, length, number of samples etc.

Example

Consider the following very simple FLA. It has two layers, one containing a motion tween, the other a static on-stage shape starting at frame 5:

Published to SWF:

Parsed by as3swf, we get these timeline infos (get the full trace dump here):

  Scenes:
    Name: Scene 1, Frame: 0
  Frames:
    [0] Start: 0, Length: 9
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, IsKeyframe
    [1] Start: 9, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 9
    [2] Start: 11, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 11
    [3] Start: 13, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 13
    [4] Start: 15, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 15
    [5] Start: 17, Length: 4
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 17
      Depth: 3 (Layer 1), CharacterId: 3, PlacedAt: 19, IsKeyframe
    [6] Start: 21, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 21
      Depth: 3 (Layer 1), CharacterId: 3, PlacedAt: 19
    [7] Start: 23, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 23
      Depth: 3 (Layer 1), CharacterId: 3, PlacedAt: 19
    [8] Start: 25, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 25
      Depth: 3 (Layer 1), CharacterId: 3, PlacedAt: 19
    [9] Start: 27, Length: 2
      Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 27
      Depth: 3 (Layer 1), CharacterId: 3, PlacedAt: 19
  Layers:
    [0] Frames 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
    [1] Frames 5, 6, 7, 8, 9

Lets take a closer look at frame 6:

  [5] Start: 17, Length: 4
    Depth: 1 (Layer 0), CharacterId: 2, PlacedAt: 5, LastModifiedAt: 17
    Depth: 3 (Layer 1), CharacterId: 3, PlacedAt: 19, IsKeyframe

This tells us that this frame:

• displays character ID 2 (the red square movieclip) at depth 1. This character was originally placed on the display list by tag index 5 and was modified by tag index 17 (this character is tweened).
• displays character ID 3 (the blue square shape) at depth 3. This character was placed on the display list by tag index 19. As the character was placed in this very frame, this is a key frame.
• starts at tag index 17 and consumes 4 tags total:

  17: [26:PlaceObject2] Depth: 1, Matrix: (1,1,0,0,1400,400)
  18: [83:DefineShape4] ID: 3, EdgeBounds: (2200,3200,1800,2800)
        FillStyles:
          [1] [SWFFillStyle] Type: 0 (solid), Color: FF0000FF
        LineStyles:
          [1] [SWFLineStyle2] Width: 200, Color: FF000000
        ShapeRecords:
          [SWFShapeRecordStyleChange] MoveTo: 3200,1800, FillStyle1: 1, LineStyle: 1
          [SWFShapeRecordStraightEdge] Vertical: 1000
          [SWFShapeRecordStraightEdge] Horizontal: -1000
          [SWFShapeRecordStraightEdge] Vertical: -1000
          [SWFShapeRecordStraightEdge] Horizontal: 1000
          [SWFShapeRecordEnd]
  19: [26:PlaceObject2] Depth: 3, CharacterID: 3, Matrix: (1,1,0,0,0,0)
  20: [01:ShowFrame]

As you can see, this info is a quite exact reconstruction of the original FLA’s timeline, and can be used to rebuild the original FLA (XFL, rather), to publish SWFs to run natively on alternative runtimes and platforms (HTML5, iPhone OS), or as a very first step to creating a web based version of the Flash IDE.

Happy hacking!

What if somebody would write a spider (which respects common conventions like robots.txt etc) that searches for and archives publicly available SWF files, and a service that makes graphical assets found in those SWFs (vector shapes, bitmap images, videos, fonts, etc) available for public browsing, similar to what the Internet Archive’s Wayback Machine does?

As SWF, at least according to Adobe, is an open format, this would be both technically and legally feasible, wouldn’t it? From a legal perspective, what line would need to be drawn where, and why exactly?

Lately, Adobe representatives and Flash fan boys alike became more vocal than usual about the alleged openness of Flash. This is probably spurred by the proposed feature set of HTML5, as well as the decisions of a certain vendor to ban Flash from some of their products, both potentially being threats to Adobe and the Flash Platform.

I originally posted the following article as comment to an article by Serge Jespers, “Flash is as open as HTML5“. Serge is an Adobe Platform Evangelist. I thought this comment deserves its own post, so here we go.

No, it isn’t.

And it is beyond me why so many independent Flash Platform developers fail to see it. I completely understand of course why Adobe evangelists downplay it.

It is irrelevant for the so called “open web” whether the Flash Player is going to get open sourced or not. That’s not the point. Microsoft won’t open source their browser, Opera won’t open source their browser, etc.

Relevant is who decides about the development of the data format that a runtime consumes, and the APIs a runtime provides to access that data. In the Flash world that’s SWF and the Flash Player APIs, both controlled by a single vendor: Adobe. In the HTML world that’s HTML and DOM, controlled by many vendors, including you and me, via standards bodies.

Adobe neither provides formal means for other companies and individuals to participate in the development of SWF and Flash Player APIs, nor does it provide detailed work-in-progress specs to the general public for discussion. This effectively rules out the possibility for third parties to provide alternative runtimes. The runtime and its specs are released to the public at the same time.

This is the exact opposite of “open”.

To make matters worse, the specs released by Adobe are incomplete and buggy (e.g. the SWF spec fails to explain how exactly shapes are supposed to be rendered and leaves out information on codecs, the ABC spec is plain wrong on some things) and generally infested with patented technologies.

Of course i understand why it is how it is (and likely always will be). If Adobe were to become truly open and put the development of SWF etc in the hands of standards bodies, the 1.5 year release cycle would become a 10+ years release cycle. Innovation would slow down significantly. I as a Flash Platform developer wouldn’t want that to happen.

However, sorry to say that, but to tout “Flash is as open as HTML5″ is pure FUD.

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.