Ride The Lightning: ThunderBoltAS3 Logger Extension

ThunderBoltAS3 is a logger extension for Flex and Flash ActionScript 3 applications using Firebug within Firefox.

Ride The Lightning is one of the good Metallica records (before they found the formula [1 nursery rhyme + gloom - guitar solos = suck.])

Make MIME a Double!

I just endured a marathon troubleshooting/debugging session at work so I figured I would blog the cause/resolution in hopes that it will save someone else from the same painful experience. This morning we noticed that the homepage swf on our site suddenly stopped loading.

After some Sherlock Holmes like deduction, we narrowed it down to the fact that particular swf was unique in that it was the only one on our site that loaded our blog's rss xml feed and displayed it.

Using Charles web-debugging proxy (a true lifesaver) I noticed that the page was getting hung up on the crossdomain.xml file at the root of our blog. When I tried to load the xml file directly in the browser, rather than displaying the xml it tried to save the file to the desktop as a plain text file. My first thought (which 6 hours later turned out to be the right thought) was "perhaps the mime type on the server is wrong". But that never really mattered. Until now.

Enter the latest Flash player (9.0.115). According to this article, as a security precaution, the server now must properly define the mime type as xml so malicious douchebags can't trick the flash player into loading another type of file. Apparently Typepad.com does not have theirs set, and the new Flash player no likey.

A quick summary of cross domain policy files for those of you unfamiliar:

Typically when you load data into a swf file from another server, you need to place a cross domain policy file on that server to allow the Flash player to load in the data. It's a fairly simple process, and alot of sites just add a wildcard "*" crossdomain.xml file to the root of their server to allow developers to consume data from them. More info here.

Long story short, if you are loading data into a swf from another server, make sure that server has the mime type for xml set properly, or you will be stuck in an invisible box. Hope that saves you some time!. -B

Flex Spy in the house (of love)

Flex Spy allows you to inspect and dynamically change most properties and styles of the visual components in your Flex application. You can - for example - try out a specific width or a background color for your component before changing it in your code. It basically does for your Flex applications what Firebug does for HTML/AJAX.

Here is an example

Introducing DEGRAFA: The Declarative Graphics Framework for Flex

Today the guys behind Degrafa released their first public beta called Degrafa: Origin

The focus behind the Declarative Graphics Framework (Degrafa) is to bring the graphics classes up a level to provide a common ground between developer and designer within Flex, and enable the graphics classes to become first class citizens within the Flex framework."

This looks very promising and could help to simplify and streamline the Flex designer/developer workflow.

Another cause of the Flex compiler's infamous error: "An internal build error has occurred..."

Background

As I have been developing Flex apps for some time now, I have come across a few different causes of the Flex compiler error: "An internal build error has occurred. Please check the Error log". Thankfully, community blog postings and the flexcoders newsgroup have helped me get through them until yesterday.

The common thread I've seen previously for this error has been syntactic errors such as missing semicolons or interface function definitions missing parentheses. Considering this and the generic error description, I would assume this is just a catch-all error message the compiler throws when it doesn't know the specific cause of the compile failure.

The Problem

My suspicion was further reinforced yesterday when I got shortcut-key-happy and tried to debug my current project while working in a file that was linked into the project from an external library. Flex (Eclipse Plugin) decided to consider my ActionScript class (.as) a valid Flex application and added an entry to the .actionScriptProperties file. This resulted in the indescript internal build error.

The Solution

To resolve the situation I had to delete the entry and restart Eclipse (it appears the .project, .flexProperties, and .actionScriptProperties files may be held in memory upon initial load of Eclipse and thus sometimes require a restart when changed manually). It took some time to figure this out since I was focused on checking my recent code changes for syntax errors (of which I found none, of course!).


An example may make this scenario a bit clearer:

The example project below has an ActionScript class, ClassFromExternalLibrary.as, that is included in the project through Project Properties -> Flex Build Path -> Source Path (Add Folder). This class is then referenced in my project by SomeProject.mxml.



Now, using the keyboard shortcut for Debug Flex Application while editing the externally linked *.as class will typically work fine; however, I believe the problem I ran into resulted from having multiple projects open that all referenced the same linked file, which causes the Flex IDE to *somehow* devine which project it thinks I am in for the particular file. If you explicitly open the file from the Navigator, it will scope to that project appropriately; however, it is easily confused when using the Ctrl/Cmd-click feature of Eclipse which takes you directly from the MXML application in your project to the linked ActionScript class in the external library.

Anyhow, the following picture illustrates what the project looks like after Flex has mistaken the ActionScript class, ClassFromExternalLibrary.as, as a valid Flex application.



Note how, in the Navigator, the icon for ClassFromExternalLibrary.as now has a green arrow identifying it as a Flex application. This is a result of the .actionScriptProperties file including an <application .../> entry for the class (highlighted in the editor). Simply remove the entry and restart Eclipse/Flex Builder and you should be set.

Hope this helps you out!

Cheers,
Ryan

Auto-generate Flex CSS embed code in Flash

When doing UI Development in Flex using Flash 8 image assets, I found myself doing a lot more typing, copy/pasting, and flipping back and forth between Flash and the Flex IDE to generate the CSS code for customized component skins than I care to.

I decided to write a few quick and dirty JSFL files to speed up the process, and here is what I have so far: (download sample files)

NOTE: this is a work in progress, the files have not been tested anywhere but my MacBookPro, and I make no claims that these files will even work for you. (Caveat emptor)

• 1. Place the (3) .jsfl files into your Flash Commands folder (mine was at: "/Users/bwills/Library/Application Support/Macromedia/Flash 8/en/Configuration/Commands"). Placing the files there will have them show up in your Flash Commands menu. If you prefer, you can place them wherever you want and then call them using the "Commands > Run Command..." menu option instead.
  


• 2. Open the Example.fla file, and pull up the Library (command-L)
  


• 3. Select (command-click) the 4 button states defined by the movieclips in the library. NOTE: when creating your own elements, the JSFL script keys off of the text following the last underscore ("_") to determine the embed type so name your symbols accordingly.
  
  
  


• 
  4. From the Command menu select "Set Linkage and Generate Flex CSS": (the other 2 menu items will do one or the other if that is all you need)
  


• 
  
  


• 5. You will be prompted to enter the Flex "styleName" you want the items to be associated with:
  


• 
  


• 6. Click "OK". Flash will loop thru the selected menu items, turn on the "Export for Actionscript" option, generate the linkage identifier based on the item name...
  


• 
  


• ...and then output the proper embed CSS to use in Flex to the trace window.
  


• 
  


• 7. Simply copy/paste into your Flex CSS file and you should be good to go.
  

As I said above, this is a very early "work in progress". I welcome any comments or suggestions on how to improve it. I am thinking about creating library folders for each styleName, so it would be possible to select the entire library and have it output the complete CSS code all at once.

Hopefully when Flash CS3 and perhaps Flex 3 are released, the designer to developer workflow will be refined and this code will be irrelevant, but until then I hope it helps. -b

Flapjax: The Language

"Flapjax" is a new programming language designed around the demands of modern, client-based Web applications.

This site has no relation to the flapjax language, but has a similar focus of web application development in a broader sense (based primarily around Flash, Flex, and AJAX hence the name). We will be posting stuff here soon I swear!

If you are interested in the flapjax language, you can find their website here:

http://www.flapjax-lang.org/