.. can both add a character to the display list, and modify the attributes of a character that is already on the display list.

The placed character is usually defined earlier in the SWF, and can be anything supported by SWF, e.g., Shape, MorphShape, Sprite, Text, EditText etc. It stays on the display list until it is explicitly removed by the RemoveObject tag. PlaceObject2 might also tell the Flash Player that the placed object is to be treated as a mask (and what depth range will be masked), and might give the character an instance name (if it is a Sprite).

Additionally, PlaceObject2 might carry an optional ratio parameter. According to the SWF10 specification, it

.. specifies a morph ratio for the character being added or modified. This field applies only to characters defined with DefineMorphShape, and controls how far the morph has progressed. A ratio of zero displays the character at the start of the morph. A ratio of 65535 displays the character at the end of the morph. For values between zero and 65535 Flash Player interpolates between the start and end shapes, and displays an in- between shape.

For Flash users, this is better known as a “Shape Tween”.

However, the statement that  ”this field applies only to characters defined with DefineMorphShape” is incorrect. It also applies to Sprite characters (“MovieClips”).

The Flash Player uses the value of the Ratio field to determine whether or not to reset the playhead in the placed Sprite to frame 1, when jumping to arbitrary frames in the parent timeline.

To illustrate that, let’s create a simple Flash movie using the Flash IDE. We create a one-frame MovieClip (called “square”) containing a simple shape. We create another MovieClip (called “animatedSquare”), which contains “square”, animated by a motion tween over 20 frames. We place “animatedSquare” on the main timeline (one frame only). When the Flash Player executes the resulting SWF, we see ”animatedSquare” looping over all its 20 frames, as we would expect.

Here are the guts of the resulting SWF (simplified). Nothing surprising in there:

[83:DefineShape4] ID: 1
[39:DefineSprite] ID: 2, FrameCount: 1
[39:DefineSprite] ID: 3, FrameCount: 20
[26:PlaceObject2] Depth: 1, CharacterID: 3
[01:ShowFrame 1] 
[00:End]

Now, let’s make the main timeline 10 frames long (each frame containing “animatedSquare”). The behavior doesn’t change, ”animatedSquare” still loops over all of its 20 frames as expected. Also, the SWF tags still don’t reveal anything surprising, 9 more ShowFrame tags were added:

[83:DefineShape4] ID: 1
[39:DefineSprite] ID: 2, FrameCount: 1
[39:DefineSprite] ID: 3, FrameCount: 20
[26:PlaceObject2] Depth: 1, CharacterID: 3
[01:ShowFrame 1] 
[01:ShowFrame 2] 
[01:ShowFrame 3] 
[01:ShowFrame 4] 
[01:ShowFrame 5] 
[01:ShowFrame 6] 
[01:ShowFrame 7] 
[01:ShowFrame 8] 
[01:ShowFrame 9] 
[01:ShowFrame 10] 
[00:End]

Finally, let’s remove ”animatedSquare” from frame 5, leaving it only on frames 1-4 and 6-10:

[83:DefineShape4] ID: 1
[39:DefineSprite] ID: 2, FrameCount: 1
[39:DefineSprite] ID: 3, FrameCount: 20
[26:PlaceObject2] Depth: 1, CharacterID: 3
[01:ShowFrame 1] 
[01:ShowFrame 2] 
[01:ShowFrame 3] 
[01:ShowFrame 4] 
[28:RemoveObject2] Depth: 1
[01:ShowFrame 5] 
[26:PlaceObject2] Depth: 1, CharacterID: 3, Ratio: 5
[01:ShowFrame 6] 
[01:ShowFrame 7] 
[01:ShowFrame 8] 
[01:ShowFrame 9] 
[01:ShowFrame 10] 
[00:End]

This is where things get interesting. The character at depth 1 (our “animatedSquare” Sprite) is removed after frame 4, frame 5 is displayed without any content, and then ”animatedSquare” is placed back on depth 1. Only now, the PlaceObject2 tag carries a value (5) in the Ratio field. Now why is that?

If we let Flash Player execute this SWF, you will notice the following behavior:

1. In frames 1-4, the first 4 frames of ”animatedSquare” are displayed
2. In frame 5, a blank frame is displayed
3. In frames 6-10, the first 5 frames of ”animatedSquare” are displayed
4. The main timeline then loops and jumps back to frame 1, displaying the first frame of ”animatedSquare” again. Back to 1. Etc.

If we would put a gotoAndPlay(6) action on frame 10 of the main timeline, ”animatedSquare” would reset to frame 1 once, and then loop over all 20 frames infinitely.

So what happens here is that once the Flash Player encounters a PlaceObject tag that attempts to place a Sprite on a depth that was previously occupied by the same Sprite, it looks at the ratio fields of the current and previous PlaceObject tags. If both carry the same value, the child Sprite keeps on playing normally. If not, the child Sprite’s playhead is reset to frame 1.

There is a little more to it yet, so if you are interested in digging deeper you should take a look at the Gnash Wiki, which lists many cases.

This is a screenshot (click for full size image) of my browser rendering one of the demos:

What you see is a messed up background texture showing fragments of my local desktop. Note that some of the windows that you see weren’t even open anymore at the time the demo ran, like the Keychain one.. *shudder*

Every time i reload the demo, the background texture shows different, seemingly random fragments. This happens in both Chrome (13) and Firefox (6). I’m on a MBP featuring an Intel HD Graphics 3000, running Mac OS X 10.6.8.

What i suspect is happening here is that either WebGL, the drivers, or the GPU itself corrupts the GPU texture memory somewhere and pulls in content it shouldn’t pull. I’m certainly not an expert in this field, so this is really just an (un)educated guess.

Thoughts?

[Update: I logged a bug with Mozilla, and this bug was marked fixed and closed today. Thanks Benoit and everyone else from Mozilla and Google who was involved!]

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

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?

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…

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.

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.

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!

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?

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.