E4X parsing caveat: Watchout for the Firefox-hidden Namespaces

A friend of mine was having issues with parsing an xml file using E4X today. We were trying parsing an XML file generated by a webservice and for all he tried, the nodes were completely inaccessible to his code. Viewing the XML in Firefox didn’t give any clues and everything should have worked. I have debugged exactly the same thing before so I was able to help but since I have seen developers do this more than a couple of times, I thought I should mention this: Loading an XML file within Firefox hides all Namespace declarations. To actually see the document as its coming in, view source on the document and all namespaces will be seen there.
The document he was parsing turned out to have a default namespace declaration in the root tag which means all the nodes were in that Namespace. The root tag of the xml document looked like:


Here is the code to actually parse such a document:

var u:URLLoader = new URLLoader();
u.addEventListener(Event.COMPLETE, onLoadComplete);
u.load(new URLRequest(“document.xml”));

function onLoadComplete(event:Event):void{
XML.ignoreWhitespace = true;
var x:XML = XML(event.target.data);
var ns = x.namespace();
trace(“node value: “+x.ns::node1.ns::node2);

Note the ‘ns:: … ‘ prefix to the node-names you are trying to reach.

Hope this helps :).

More links on E4X and Flash:
Referencing ActionScript Reserved Words in E4X
Parse a document with namespaced nodes and a variable to be evaluated

Be careful with the new Flash Player security changes.

I am surprised this isn’t talked about more in the blogosphere. The only reason I got to this was because a couple of my Flash applications broke this weekend and it took a lot of digging by quite a few of us on my team before we got to the root of the problem. So here is the deal: With all the goodies that have come with the latest Flash Player, one of the features that seems to have arrived is a stricter security model. There is a complete article on the updated security model can be found here on the Adobe Devnet site. A more bite sized sum-up of the article can be found here. As you see, the 2 big changes is the move to XML schemas rather than DTDs and a new site-control tag for meta-policies on crossdomain access.

Ah, so that’s breaking my app.

Well, not really. Before we updated our crossdomain.xml files, I just wanted to confirm that that was indeed the problem. So I enabled logging on my Flash Player (to see how to do that check the logging section on the article here). The log though surprised me. Here is what I saw (I have edited the site names where I was seeing the issues):

Error: [strict] Ignoring policy file at http://[site name]/crossdomain.xml due to missing Content-Type. See http://www.adobe.com/go/strict_policy_files to fix this problem.
Error: Request for resource at http://[site name] by requestor from http://[swf url] is denied due to lack of policy file permissions.

Yikes. So seems the problem was that our server was not sending Content-Type headers for the xml files and the new Flash Player is a lot more strict about that, rejecting such crossdomain.xml files.

Hopefully this helps someone out there. If you do load data across domains, do verify they work on the new Flash Player.

[Update] Also check out the changes to authorization headers support for basic HTTP Auth:

Free Utility Class: ImageSlicer

I have been looking for a way to easily get bitmaps of segments of images for a while now but never really found anything. I needed this for example in my last Papervision3d example where I wanted to slice an image and use the slices individually as textures on different surfaces. Since I happened to have 14 free hours recently on my flight back from India and had gotten my hands on the airline charger for my macbook (thanks Sam and Pranav), I ended up writing this quick utility class. The class is really easy to use: all you have to do is create an instance of the class passing it the number of rows and columns to cut the image into. Then, calling the getSlice function passing it a row and column index returns the bitmap representing that segment of the image.

var slicer:ImageSlicer= new ImageSlicer(image, 5,6);
var bmp:BitmapData = slicer.getSlice(1,1);

Note that any DisplayObject can be passed to this class, so you could just as easily slice a dynamically drawn Sprite or, in Flex, any UI component and then grab slices of it. This also has a lot of potential for creating interesting transitions or effects.

The class uses the ‘AS3 Data Structures For Game Developers’ package by Michael Baczynski, specifically the Array2 class (and the Collection interface it implements). The package is pretty impressive and something I plan on using a lot more in future projects that require complicated data structures. The Array2 class is fairly simple but really handy for representing 2 dimensional arrays (matrices).

An example of this class can be seen here. Use the first two text input fields to specify the number of rows and columns to slice the image into and the next two to grab any slice in that matrix. (You will have to explicitly click ‘Slice’ and then ‘Show’ separately). The source of the example can be seen here

Adobe open-sources Remoting and Data Services !!

I am so excited, I better post this before I pass out ;). Christophe Coenraets just announced on his blog that Adobe just open sourced the Flash/Flex Remoting and Messaging services under the name BlazeDS. What does this mean? Well remember all those multi-user real-time applications that Adobe demoed selling their Flex Data Services? Well now you can build ’em for free (well, as long as you can host the app on some J2EE server).

Oh, and since AMF is a published spec now, Adobe can release the code for the Flex RPC packages (which I hope is part of the developer goodies Adobe has been promising for today).

Visualize Digg data in treemaps : 2 (now with pretty power)

I have finally finished my Digg Treemap application. The application is called DiggGraphr (couldnt call it DiggMapper since everyone expected a yahoo map to come up at some time). Anyway here it is in all its glory.
The application was developed in Flex since I am porting my treemap classes to Flex right now. However the core logic is still the same as my earlier As3 implementation.
You can right click to choose which page you want to go to (Digg or source). You can also click on the channels button to choose a particular channel you want to read. Drag the slider around to change the number of stories you want to see in the containers.

This application will die soon since today Digg clamped its api behind a application id and I dont have one yet. But before it dies, do Digg it if you like it.

Link: DiggGraphr

WordPress in Flex/AS3

As some of you, who wandered over to Gabo’s blog recently may know, Gabo is trying to create a flash UI for WordPress. I gave me a peek earlier this week and all I can say is its gonna be awesome. Of course his one requirement was getting the data out of WP in XML so he wrote some custom PHP code for that. However there is an XML-RPC interface to WordPress and I decided to see if I could quickly whip up something using it.
Turns out I didn’t even have to write an XML-RPC library, since there already is one written by Akeem Philbert. So I just wrote a custom WordPress class extending his class and ta-daaa. This is just the first stab at the implementation and its not feature complete yet (ie, not the complete API has been implemented). But if someone wants to use it, go ahead and try it out.

Note: The XML-RPC library always authenticates against WordPress to get data. Data is also sent over HTTP-POST so is exposed if someone uses a browser traffic sniffer. So I recommend creating a new user on WordPress with only ‘subscriber’ privileges and using that if you are creating a public application that doesnt need authentication.

Note 2: The XML-RPC implementation can be used to post, edit and delete entries as well, so if someone wants to make a blog manager application, you can use this as well.

View the Flex WordPress app here and right click to view source.

To compile the application, you will need to download the as3-rpclib library from here

HOLY SH** !!!! WE WON !!!!!


We WON!!!


The Fan won the People’s choice award from among 60 other applications. I gave a stuttering speech when I accepted the orange arrow.
Of course most of the kudos go to the design and the interaction gurus but I’d like to think development has had something to do with it as well :D.

Weirdly, this completes my Flash Forward experience. I first went to FF 3 years back as a volunteer, then as a regular attendee once I had a full time job….then as a speaker on architecting Flash applications for enterprise applications and finally this year as a nominee and winner !!!!

Onward to MAX ;).

Blogging from Flash Forward, Austin

Am at the Flash Forward Conference at Austin. Has been fun so far even though I am really tired. I attended a few useful sessions so far one of which I am not allowed to speak about ;). I think the most educational session has been the one on the Flex component life-cycle by Chafic Kazoun. I have been reading about it but its different when someone walks you through the code of a custom component. Quick notes from the talk:

1) Lifecycle: constructor -> createChildren -> commitProperties ->measure -> updateDisplaylist.
2) The constructor and the createChildren is called only once.
3) Invalidation: invalidateProperties, invalidateSize, invalidateDisplaylist each calls a corresponding commit event to be fired from Flex.
4) Embedding swfs and ripping symbols from the library: [Embed(source=”/assets/source.swf” symbol=”[symbol_linkage]”]
5) I have never used the BitmapAsset class. Need to look at what that is.
6) In the updateDisplayList call [instance].move(x,y) rather than [instance].x = [value] since move fires additional functions that let flex layout stuff correctly.
7) Measure doesnt get called if width,height are declared explicitly.
8) You can access unscaledwidth, unscaledHeight in the updateDisplaylist functions to layout your stuff. Call the children’s setActualSize function accordingly.

Another tip from a different talk:
[Flash8] CacheAsBitmap your masker and maskee to get smooth 8bit alphas.

Thats it so far. More stuff as it happens.

Stripes and Gradients

One of the designs I am working on has a truckload of stripes over color gradients on different elements throughout the application. Now I could either have custom graphics for the elements embedded in the fla or do the more fun thing and write a class that drew stripes for me. So here it is. These are the first released classes from my voodoo framework (more on that later).

The Stripes class works as follows:
It creates a BitmapData object draws two rectangles, one semi-transparent and the other transparent. The BitmapData is then drawn on the target MovieClip using beginBitmapFill after being skewed by a Transformation Matrix.

[SWF] /blog/swf/Main.swf, 500, 600 [/SWF]

You can download the zip file with the AS file and fla here. I have also included the GradientRect class which lets you easily draw gradient rectangles on any MovieClip.

P.S. Thanks to unijimpe for the wp-swfobject plugin. Easiest way to embed swfs in WordPress.