Category: Flash

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:

[xml]

[/xml]
Here is the code to actually parse such a document:

[AS]
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);
}
[/AS]

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

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:
http://kb.adobe.com/selfservice/viewContent.do?externalId=kb403184&sliceId=1

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.

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

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

OMG OMG OMG.

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

Karl pointed me out to the widgetbox site and I have to say I was impressed. Its awesome. AAAand I found this cool widget…well its too big for a widget but love the design anyways.

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.