A few months ago I decided that my Eclipse setup was far from optimal. I was using slightly customized versions of the default Flex Development and Debugging perspectives that ship with Flex Builder. I had customized them to suit my personal preferences (things like making the Variables pane take up the full screen height). But the biggest problem I had was the debugging perspective. When you have all the panes you need open on the same screen (code editor, debug panel for stepping through lines, variables pane for inspecting variables, console for reading log statements, navigator for selecting different files) you end up with a tiny area for actually reading the code in the code editor.

The old single-screen perspective
Here’s a screenshot showing how bad my debugging perspective could become:

singlescreen_debugging

I’d usually try to edit code within a maximized code editing window by double clicking the code editor I was working in, then restoring it back to the small size when I was stepping through debugging. And often I’d hide the console view or move it around so I could get more vertical space. But in the end it was always a struggle to have access to all the pieces I needed and still be able to edit code.

The new dual-screen perspective
So I finally decided that having Eclipse within a single monitor just wasn’t going to cut it. For most of my development work, I plug my laptop into an external 22-inch monitor, which gives me a resolution of 1680×1050 on my external monitor and 1440×900 on my laptop monitor. When I was using Eclipse on a single screen I would always put it on the larger screen to maximize space. But now I decided to move all the panels other than the code editor and file navigator to my laptop screen instead (which sits just to the left of my external monitor).

My current setup looks like this (this image is small, but full res images of each screen follow):

side_by_side

My main external monitor screen is the one on the right and is dedicated to viewing and editing code. I’ve stripped everything else out, and even stripped down the default Eclipse toolbar items to only those that I actually use on a daily basis.

Right screen (external monitor):

dualscreen_right_annotated

Left screen (laptop):

dualscreen_left_annotated

Now I always have a code editor that takes up the maximum amount of space I have. I originally tried moving the File Navigator to the left screen as well, but found that a) it was a bit of a pain visually to have to move my eyes to the left and then to the right after selecting a file, and b) it’s the vertical space that counts the most in the code editor, not maximizing all possible horizontal space.

So when I debug I use the debugger and variable inspector on the left screen to step through line by line, while viewing the actual code on the right.

I’ve setup 4 main perspectives that include a Debug and a Development perspective for both a single-screen setup (when I unplug) and a dual-screen setup. I have all those shown at the same time in the perspective switcher toolbar, so I can easily jump back and forth between them. Also shown in this screenshot are the Team Synchronization and SVN Repo Exploring perspectives and single and dual screen versions of the Flex Profiling perspective. These 8 perspectives are pretty much the only ones I ever use, and are always a single click away.

screenshot085

Drawbacks
The most annoying issue I’ve run into has to do with the popped out Debug window and how Eclipse manages window focus. Usually when debugging it works great, I click the step-over or step-into buttons in the Debug panel and it works just like I want. But sometimes (and I can’t figure out why) Eclipse decides that when I step over a line of code (or maybe it’s only when hitting a breakpoint) that the main code window should get the focus, which means that it takes a click on the Debug panel just to bring it back into focus, then a second click to step over the next line. It doesn’t sound like a big deal, but when you’re used to a single click always making the Debugger do the next step, and then that turns into two clicks, it gets really annoying and frustrating.

The only other drawback is that Eclipse isn’t smart enough to know that I have one perspective for my dual monitor setup and one perspective for when I unplug my laptop from the external monitor. So the default behavior when I unplug is to end up with something horrendous like this:
singlescreen_messedup

That’s easy enough to fix though, by simply right clicking on the perspective icon the toolbar and selecting “Reset”:
screenshot079

It also took a little getting used to to be able to share my attention between both screens and quickly scan my eyes back and forth. Usually I’m used to keeping my laptop screen for certain tasks (email, chat, RSS reading, etc), so I have a bit of a mental block against using both monitors for the same task. But I’ve gotten pretty used to that by now.

What about you?
I’m curious what other Flex developers do in terms of laying out their IDE. I’d love to see screenshots of what other people have figured out. I haven’t experimented with too many different dual-monitor layouts, the one I’m using now was sort of the first one I made on the fly and have stuck with. But if you have a better system then I’d love to see it!

del.icio.us:What my Eclipse/Flex Builder setup looks like digg:What my Eclipse/Flex Builder setup looks like spurl:What my Eclipse/Flex Builder setup looks like wists:What my Eclipse/Flex Builder setup looks like simpy:What my Eclipse/Flex Builder setup looks like newsvine:What my Eclipse/Flex Builder setup looks like blinklist:What my Eclipse/Flex Builder setup looks like furl:What my Eclipse/Flex Builder setup looks like reddit:What my Eclipse/Flex Builder setup looks like fark:What my Eclipse/Flex Builder setup looks like blogmarks:What my Eclipse/Flex Builder setup looks like Y!:What my Eclipse/Flex Builder setup looks like smarking:What my Eclipse/Flex Builder setup looks like magnolia:What my Eclipse/Flex Builder setup looks like segnalo:What my Eclipse/Flex Builder setup looks like gifttagging:What my Eclipse/Flex Builder setup looks like

Lee Brimleow just posted issue #2 of his sweet Flasher Magazine video mag. For this issue Lee interviewed me about Flex development, what I hate about the Flex SDK, what I think about Flash vs Flex. And then after the interview we went to shoot handguns at a shooting range in San Francisco :) Check it out, I hope you enjoy:

FlasherMag

This issue also includes interviews with Phillip Kerman and Robert Reinhardt.

Thanks to Lee for giving me the opportunity to do the interview, and for putting rounds of ammo on the Adobe corporate credit card!

Oh yeah, and here’s a quick still shot from the video’s intro sequence. I’m so proud:

del.icio.us:Flex and Guns on Flasher Magazine digg:Flex and Guns on Flasher Magazine spurl:Flex and Guns on Flasher Magazine wists:Flex and Guns on Flasher Magazine simpy:Flex and Guns on Flasher Magazine newsvine:Flex and Guns on Flasher Magazine blinklist:Flex and Guns on Flasher Magazine furl:Flex and Guns on Flasher Magazine reddit:Flex and Guns on Flasher Magazine fark:Flex and Guns on Flasher Magazine blogmarks:Flex and Guns on Flasher Magazine Y!:Flex and Guns on Flasher Magazine smarking:Flex and Guns on Flasher Magazine magnolia:Flex and Guns on Flasher Magazine segnalo:Flex and Guns on Flasher Magazine gifttagging:Flex and Guns on Flasher Magazine

I’ve been working on an ActionScript library that can load revision history from Subversion (SVN) repositories. This is something that I’ve had in the back of my mind for about a year now and finally sat down and figured out a way to do it. I remember seeing a post way back in September of 2006 on Ted Patrick’s blog talking about someone who had written a SVN library using the Socket class. As far as I could tell, this was the only mention of the project, and it was never released publicly. So I decided to figure out how I could read SVN revision history with AS3. I’m releasing the library in its current state (more on that in a second) as an open source project.

Quick demo and the code
Since I know people don’t like reading, I’ll post the code at the beginning of this post and show some screenshots and a demo AIR app that uses the library. If you want to tune out after this, it’s cool, I understand.
Download as3svnlib source code, or just the compiled swc file.

Demo
Since this uses socket communication on port 80, which is off limits under normal circumstances due to Flash player security restrictions, you have to run the demo as an AIR app. Lame, I know. You can install this tiny AIR app to try out the library if you want. The demo app will let you enter the URL of a repository and load the last few revisions. The repository must be publicly accessible for the demo to work (note that the library itself allows you to use basic authentication, but I didn’t build support for that into the simple demo).

The screenshot below shows the bare-bones example AIR app. You can enter a URL for a SVN repo and then you can load the latest revision number or you can load the last 50 revisions. That’s all you can do in the app, but with the library you can get more detailed information about all the revisions and you can decide exactly which revisions you want to load (or load all of them).
screenshot053
You can download the example AIR app if you want to see if it works with your SVN repo (again, note that this demo app won’t work with URLs behind authentication, but read below about how to do that). View-source is enabled on the AIR app itself once you install it, or you can view the source of the example here.

The scope of this library
My immediate goal was to load revision history, complete with commiter name, date, comment, and ideally more detailed information about which files were affected or scope of the changes. I was not looking to build a full SVN client capable of committing changes or doing diffs or anything fancy like that.

How I went about it
I first started thinking I would implement a legit SVN client that would connect to a server using a socket connection and use the SVN protocol to communicate. I read up on the protocol and it didn’t seem all that complex, especially if I was going to limit myself to read-only operations. However, when I first started down this road I realized I didn’t know shit about doing socket communication in ActionScript. So I downloaded as3httpclientlib (current source is at github here), which is an AS3 library for doing HTTP communication written by Gabriel Handford. My goal was to use that project to learn how to do my own socket stuff and then build my SVN library.

But once I got my head around the http client stuff I learned something even more important. Turns out that most SVN installations include an Apache server that lets you browse the repo with a web interface. What’s even more interesting is that Subversion uses the WebDAV protocol as well, which is a protocol based on HTTP for source control. Suddenly I had a new option that didn’t require writing my own full-on SVN client. Fuck yeah! Less work for me!

So I extended as3httpclientlib and added in some basic support for WebDav (namely the PROPFIND request and a basic REPORT request). Then I added in support for some custom reports that Subversion uses, namely log-report. All the reports that Subversion supports via WebDav are documented here. When you request a report you send a custom HTTP request to the server and fill the request body with some XML that defines what kind of report you want. Then the server sends back its response in XML.

Then I was able to use simple XML parsing to read my list of revisions, which included revision number, creator name, date, comment, and details about all the files that were added, removed, modified, etc. Easy breezy.

Most basic use of the library
To use the library you interact with the SVNClient class. This class is used to fire off all your requests (either to get the latest revision number or to get specific sets of revisions). All requests are asynchronous, so you need to add an event listener to the SVNClient class, then send off your request, and then handle the result.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="getLatest()">
	<mx:Script>
		<![CDATA[
			import com.dougmccune.subversion.SVNRevision;
			import com.dougmccune.subversion.events.SVNRevisionListEvent;
			import com.dougmccune.subversion.SVNClient;

			private var client:SVNClient;

			private function getLatest():void {
				client = new SVNClient();
				client.addEventListener(SVNRevisionListEvent.REVISIONS_LOADED, revisionsLoadedHandler);
				client.getLatestRevisions("http://opensource.adobe.com/svn/opensource/flex", 25);
			}

			private function revisionsLoadedHandler(event:SVNRevisionListEvent):void {
				for each(var revision:SVNRevision in event.revisions) {
					trace("Revision #" + revision.revisionNumber + " committed by " + revision.creatorName);
				}
			}
		]]>

	</mx:Script>
</mx:WindowedApplication>

Or here’s another very simple example that uses all MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:subversion="com.dougmccune.subversion.*"
	layout="vertical">

	<subversion:SVNClient id="client" revisionsLoaded="grid.dataProvider = event.revisions" />

	<mx:HBox width="100%">
		<mx:TextInput width="100%" id="repoInput" text="http://opensource.adobe.com/svn/opensource/flex" />
		<mx:Button label="Load" click="client.getLatestRevisions(repoInput.text, 25)" />
	</mx:HBox>

	<mx:DataGrid id="grid" width="100%" height="100%">
		<mx:columns>
			<mx:DataGridColumn dataField="revisionNumber" headerText="#" width="40" />
			<mx:DataGridColumn dataField="creatorName" />
			<mx:DataGridColumn dataField="date" />
			<mx:DataGridColumn dataField="comment" showDataTips="true" />

		</mx:columns>
	</mx:DataGrid>

</mx:WindowedApplication>

Accessing repositories with authentication
The library supports using basic HTTP authentication to access repositories as well. Essentially all you have to do is pass the username and password into the SVNClient constructor, so instead of just calling var client:SVNClient = new SVNClient(), you would call something like var client:SVNClient = new SVNClient("username", "password");. Note that just like with all browser HTTP basic authentication, the password is sent using a Base 64 hash that is easily decoded.

But for a more secure connection, thanks to the SSL stuff that’s included in the as3crypto library and used in the as3httpclientlib library, you can also access SVN repos using HTTPS. If there are repositories that use Digest (as opposed to Basic) HTTP authentication, I do not currently support that. Frankly, I don’t have any repos I use that use digest authentication, so I don’t have any way to test it (or desire to write it).

Going further
If I was going to build a full featured SVN client I would probably still try to do a custom socket approach that spoke the SVN protocol. The WebDav interface seems a bit limited compared to “real” Subversion commands, and I would be worried that it wouldn’t be good enough. However, WebDav does support stuff like updating files and committing changesets, so I think you could add in some basic committing functionality and still use the WebDav approach. I don’t have any immediate plans to do any of this, for now I’m happy with the capability of reading from a repository (I’ll write more later about an application I’m working on that uses this library). But if you’re interested in taking this code and adding in more support for things like checking out full revisions, committing changes, etc., please be my guest.

License
Since this uses the as3crypto library, which is licensed under the New BSD license, I’m not entirely sure what that means for my code. I’d like to say mine’s MIT, but if I have to say it’s New BSD (which is almost just as flexible), then I guess I’ll say it’s New BSD. I think that really just means that I need to include the license file that contains copyright information in it when I redistribute the as3crypto library (which I have done). So you can pretty much do whatever you want.

del.icio.us:Accessing SVN Repositories with ActionScript digg:Accessing SVN Repositories with ActionScript spurl:Accessing SVN Repositories with ActionScript wists:Accessing SVN Repositories with ActionScript simpy:Accessing SVN Repositories with ActionScript newsvine:Accessing SVN Repositories with ActionScript blinklist:Accessing SVN Repositories with ActionScript furl:Accessing SVN Repositories with ActionScript reddit:Accessing SVN Repositories with ActionScript fark:Accessing SVN Repositories with ActionScript blogmarks:Accessing SVN Repositories with ActionScript Y!:Accessing SVN Repositories with ActionScript smarking:Accessing SVN Repositories with ActionScript magnolia:Accessing SVN Repositories with ActionScript segnalo:Accessing SVN Repositories with ActionScript gifttagging:Accessing SVN Repositories with ActionScript

[UPDATE: apologies if this showed up as new in your feed readers when it isn't, I had a database problem and had to restore two old posts. Also, the voting has now been closed, so no need to go and vote, thanks to everyone who voted!]

John Wilker just posted all the speaker session submissions that they received for 360|Flex and he’s letting the community weigh in on what they want to see at the conference. The sessions don’t list the speaker names, although with a little reading I could figure out some of them (my money’s on Labriola for the “Kicking Ass and Taking Names” session. [update] I was wrong on that one, looks like Joseph Balderson submitted the kicking ass session). My session’s title is Cool Shit: Inspiring Creation and Creating Inspiration. The fact that I drop the s-bomb in the title and my description includes the phrase “holy shit, that’s fucking amazing” might give away the fact that it’s mine :)

Here’s the description I submitted, which should sum up the kind of presentation I want to give:

By the end of 2008 I had burned out. Flex development had become a job – a real job, a normal job – and I wasn’t experimenting and playing with the technology like I used to. So I decided to go on a quest of rediscovery. I was determined to find the magic again, that spark of “holy shit, that’s fucking amazing!” that comes when you’re so inspired by someone’s work that you stay up until 4 in the morning trying to create something as cool.

This session will include examples of Flex and Flash projects and experiments that have re-inspired me. I’ll talk about why I fell in dorky love with each example, and then dive into what that inspiration led me to create. Inspiration is a cycle, and I hope that by sharing my own inspiration and my own creations I can provoke others to do the same. We’re all in this together, and there’s so much cool shit to explore.

This is sort of a self-therapy session for me. Over the next few months I’m going to be focusing my effort on playing again, like I used to when this technology was new to me. I want to bring back that intoxication with the technology that I first had when I started learning Flex.

So if you think the session idea sounds good, go and vote for it! Make sure to vote for all the other ones you want to see too, the list of sessions is really long (126!) so it takes some time to read through them all.

del.icio.us:Get me on the 360|Flex speaker list! digg:Get me on the 360|Flex speaker list! spurl:Get me on the 360|Flex speaker list! wists:Get me on the 360|Flex speaker list! simpy:Get me on the 360|Flex speaker list! newsvine:Get me on the 360|Flex speaker list! blinklist:Get me on the 360|Flex speaker list! furl:Get me on the 360|Flex speaker list! reddit:Get me on the 360|Flex speaker list! fark:Get me on the 360|Flex speaker list! blogmarks:Get me on the 360|Flex speaker list! Y!:Get me on the 360|Flex speaker list! smarking:Get me on the 360|Flex speaker list! magnolia:Get me on the 360|Flex speaker list! segnalo:Get me on the 360|Flex speaker list! gifttagging:Get me on the 360|Flex speaker list!

Well, not really… but it’s a Flex book :)

flex_kindle1

While I was getting ready to travel for the holidays I was buying a few new books for my Amazon Kindle to read on the plane. As I was browsing through the online store right on the Kindle, there in my recommended books list was Creating Visual Experiences for Flex 3 by my friends Juan Sanchez and Andy McIntosh. Out of sheer curiosity I was forced to instantly buy it, wondering what it would look like on the Kindle’s screen.

Note that this isn’t in any way a review of the actual content of the book, since I haven’t read it yet. But knowing Juan and Andy I’m sure it’s fantastic. I just skimmed a few chapters trying to see what it looked like on the Kindle’s screen.

Text and Images
Turns out that reading the textual content of the book on the Kindle works great. The images leave a little to be desired, since they’re rendered (like all images in a Kindle book) in fairly minimal grayscale, but they don’t actually differ that much from the print book (also in black and white) and you usually don’t lose any important information by viewing the images on the Kindle’s screen. Some of the screenshots comparing different effects and blend modes didn’t work very well since they were so small and the low contrast makes it difficult to notice differences.

Tables
Tables actually turned out pretty readable, although quite small. But I was impressed how well the tables were actually preserved, and assuming you don’t have a problem reading small text (which I didn’t) then they’ll work just fine. If you’re old and your eyes are feeble then this might be an issue.

flex_kindle_table

Code Samples
The code listings are a bit more problematic. With the normal font size, the code listings become pretty unreadable on the Kindle’s screen. Pretty much all the code wraps in weird ways, breaking the lines up, often mid-word, and usually spilling over onto multiple pages.

flex_kindle_code

However, if you adjust the font to the smallest that the Kindle offers, then you get more readable code listings. Things still spill over across pages, and sometimes the lines wrap awkwardly, but overall the code listings are much improved. The smallest font size is really the only way to read a book like this. Truthfully, I imagined the code listings would be completely unreadable, but if you adjust the font size it’s much better than I ever imagined it would be.

The difficulty with code listings makes the Exercises section (section 4) difficult to get through. But the previous sections, which give you explanations of the skinning and styling techniques and discussion about all the particular components within the Flex framework, rely on much shorter snippets of code sprinkled in the text. The exercises are really code-heavy (as they should be), which makes viewing on the screen hard.

Of course, reading code on such a small screen (regardless of whether you’re reading a book or reviewing someone’s code or whatever) is far from ideal. I’d never choose to write code on a screen this size, and reading it here is certainly less than perfect. But reading code in any print book is always relatively awkward, with the only real difference between print and the Kindle being that print books have better formatted line breaks and the ability to see multiple pages at once (assuming the two print pages can be open side by side).

Overall, if you’re comfortable reading the entire text at the smallest font size, it’s pretty decent actually (again, I’m referring to the viewing experience, not the content of the text). I don’t think I’ll get any other programming books on my Kindle, instead I’ll buy the print versions if I have the choice (or more likely I won’t buy programming books at all, as I’ve written about previously). But if you’re traveling and you don’t mind the layout issues, there’s no reason you can’t learn Flex styling and skinning on an airplane.

P.S. For worry of breaking some unknown clause in my contract with my own publisher, I better tell you that I wrote a Flex book too! Deepa Subramaniam and I wrote Adobe Flex 3 for Dummies, which is awesome (although it’s not offered on the Kindle). Juan and Andy’s book and our Dummies book really target very different audiences, so if you’re just starting to learn Flex then you might want to check out our book first and then move on to Creating Visual Experiences.

P.P.S. Merry Christmas and happy holidays!

Legal stuff to try to keep me from getting in trouble
All images in this post are digital pictures I took of the Amazon Kindle displaying the Creating Visual Experiences with Flex 3.0 book, written by Juan Sanchez and Andy McIntosh and published by Addison-Wesley. All content is copyright Pearson Education, Inc. The images used in this blog post reproduce very small amounts of text and images from the original text, at very low quality in comparison to the original. The intent of this post is to explain the reading experience on the Kindle, not in any way to redistribute copyrighted content. I will, without argument, remove any images at the authors’ or publisher’s request.

del.icio.us:Is that Flex on my Kindle? digg:Is that Flex on my Kindle? spurl:Is that Flex on my Kindle? wists:Is that Flex on my Kindle? simpy:Is that Flex on my Kindle? newsvine:Is that Flex on my Kindle? blinklist:Is that Flex on my Kindle? furl:Is that Flex on my Kindle? reddit:Is that Flex on my Kindle? fark:Is that Flex on my Kindle? blogmarks:Is that Flex on my Kindle? Y!:Is that Flex on my Kindle? smarking:Is that Flex on my Kindle? magnolia:Is that Flex on my Kindle? segnalo:Is that Flex on my Kindle? gifttagging:Is that Flex on my Kindle?

I’ve been using RescueTime recently to track my computer usage during the work day. I’m not really trying to curb bad behavior or specifically stop wasting time on particular tasks, I just kind of like to see how I work. For those that don’t know about RescueTime, it’s a little time tracking app that runs on your computer and logs what applications and websites you visit and how much time you spend. Then you can see some cool reports to visualize where your time goes.

This chart shows the time I spent on the computer yesterday:
screenshot046

So you can see I woke up a bit past 8 and had a bit of a slow start to the day. Between making coffee and dilly-dallying I managed to waste most of the 9am hour. But then I got into the swing of things. I think the 10am hour is one of my most productive all day. My brain’s well rested but awake (thank god for that coffee) and I have very few interruptions. We do a daily scrum call at 11, so I usually have until then before I get sidetracked with phone conversations and other things that start cropping up. Then I took a 45 minute lunch a bit before 1 and then was back at work until 6.

Here’s the chart that shows the % of each hour that was taken up by Flex tasks, which I’ve basically defined as Flex Builder or debugging in Safari.
screenshot047

So that shows that for the majority of the day I’m either using Flex Builder or using Safari specifically to debug Flex apps. One thing that I found interesting, however, is to compare the time spent on my top 10 activities:
screenshot048

So clearly you can see Flex Builder and Safari rising to the top of the list. Note that RescueTime logs my local testing as file:// since it thinks it’s a web page, but it doesn’t know how to deal with local pages I guess, so that file:// means I was running a Flex app in Safari. One thing that struck me was the total time spent in any particular app didn’t seem that high. Out of an 8 hour day I spent 3 and a half hours in Flex Builder itself. I spent another hour or so testing/debugging in the browser. So about 56% of my total time during the day is actually spent writing code/debugging. The rest is management tools (FogBugz is issue tracking, we use Google sites for project documentation, gmail for email, Adium for IM) and news reading (MXNA, some random article on Washington Post that took me 5 minutes to read). The other thing that made it into my top ten yesterday was watching a demo video of cyn.in, which I was checking out since it seemed like we might be able to use it for project management at work. And to round out the list, pgadmin is a database tool for Postgres databases.

The hour I spent on email should probably get cut down. Since I work remotely, there is a lot of communication over email, but I certainly need to do a better job managing my email time instead of popping back over to gmail every few minutes (although if Flex compile times were sped up I bet my email time would get cut in half). The time on IM (Adium) is essential since the way I communicate with my team is through IM all day long, so that can’t really get cut down at all.

It’s also interesting to see how the little things factor in. If you add up my top ten list there, you end up with about 7 and a half hours. That’s almost my complete work day, which means that all the other crap I might have done, reading blog posts, watching dumb videos, etc only took up a very small amount of aggregate time. That makes me feel good about my overall productivity. There are about 90 total entries in the RescueTime log for yesterday, but most of them take up only seconds of time (scanning blogs, quick Google searches, etc).

So that’s what my day yesterday looked like. I know this isn’t directly related to Flex, but I thought it was kind of interesting and I need to get back into blogging one way or another, so bear with me while I get back on the blogging bandwagon. If I made New Year’s resolutions then getting back to blogging like I used to would be at the top of my list.

del.icio.us:What my work day looks like digg:What my work day looks like spurl:What my work day looks like wists:What my work day looks like simpy:What my work day looks like newsvine:What my work day looks like blinklist:What my work day looks like furl:What my work day looks like reddit:What my work day looks like fark:What my work day looks like blogmarks:What my work day looks like Y!:What my work day looks like smarking:What my work day looks like magnolia:What my work day looks like segnalo:What my work day looks like gifttagging:What my work day looks like

Which I consider pretty amazing since I’ve never sent a single tweet. That pretty much puts my follower to tweet ratio at Infinity.


follow dougmccune at http://twitter.com

You can be one of the cool kids too and follow me on Twitter. Twitter’s pretty much the best service in the entire world, and I simply can’t live without it.

del.icio.us:I have 100 followers on Twitter! digg:I have 100 followers on Twitter! spurl:I have 100 followers on Twitter! wists:I have 100 followers on Twitter! simpy:I have 100 followers on Twitter! newsvine:I have 100 followers on Twitter! blinklist:I have 100 followers on Twitter! furl:I have 100 followers on Twitter! reddit:I have 100 followers on Twitter! fark:I have 100 followers on Twitter! blogmarks:I have 100 followers on Twitter! Y!:I have 100 followers on Twitter! smarking:I have 100 followers on Twitter! magnolia:I have 100 followers on Twitter! segnalo:I have 100 followers on Twitter! gifttagging:I have 100 followers on Twitter!

Here are the slides from my presentation that I gave today at Flash on the Beach. The presentation covers decompiling Flash and Flex SWFs and includes an overview of the tools available, a few examples of the kind of code you might see, and some security suggestions. I will not be posting any of the code that I showed during the session (apart from the very tiny snippets in the slides). I think it’s pretty obvious why I’m not going to post the decompiled Photoshop Express code :)

I don’t think there’s any formal feedback survey or anything at FOTB, so if you were at my session I’d love to hear what you thought about it. You can email me at doug or leave some comments here. Let me know what you liked and what you didn’t.

del.icio.us:Slides from my Flash on the Beach session on decompiling SWFs digg:Slides from my Flash on the Beach session on decompiling SWFs spurl:Slides from my Flash on the Beach session on decompiling SWFs wists:Slides from my Flash on the Beach session on decompiling SWFs simpy:Slides from my Flash on the Beach session on decompiling SWFs newsvine:Slides from my Flash on the Beach session on decompiling SWFs blinklist:Slides from my Flash on the Beach session on decompiling SWFs furl:Slides from my Flash on the Beach session on decompiling SWFs reddit:Slides from my Flash on the Beach session on decompiling SWFs fark:Slides from my Flash on the Beach session on decompiling SWFs blogmarks:Slides from my Flash on the Beach session on decompiling SWFs Y!:Slides from my Flash on the Beach session on decompiling SWFs smarking:Slides from my Flash on the Beach session on decompiling SWFs magnolia:Slides from my Flash on the Beach session on decompiling SWFs segnalo:Slides from my Flash on the Beach session on decompiling SWFs gifttagging:Slides from my Flash on the Beach session on decompiling SWFs

While doing some research for my decompiling session at Flash on the Beach, I came across this gem of a post on the Adobe ActionScript 3 message board. Someone posts a block of code and asks “I’m getting 3 compiling errors when I test my flash movie: could you guys give me some advice on how to sort out these issues and correct them. its driving me crazy trying to resolve the problem.”

And then he posts the code. And if you have ever decompiled any ActionScript code, it’s painfully obvious what the guy is doing: he’s ripping off someone else’s code, then complaining in the Adobe forum that he can’t figure out why it won’t compile, and asking people to fix his broken, stolen code.

Here’s a snippet of his code:

public function BEShell()
        {
1  0 39            instance = this;
            Logger.target = new FirebugTarget();
            var _loc_1:* = loaderInfo.loaderURL;
            if (_loc_1.indexOf("env1") != -1 || _loc_1.indexOf("Akqa") != -1
                        || _loc_1.indexOf("dev.site.com") != -1)
            {
            }
            else
            {
                Logger.mode = Logger.PRODUCTION_MODE;
                stage.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
            }// end else if
            return;
        }// end function

That’s very clearly, without question, decompiled code. It even has some extra line number information included in the dump! And that’s what was tripping the guy up. He couldn’t understand why that beginning line that starts with “1 0 39…” wouldn’t compile!

Sometimes I’m just amazed by people. Like, really? You have the balls to steal someone’s code, then post it in a public forum and ask for help?

And of course maybe I’m totally off base, maybe the guy works for the company that originally wrote the code (seems to be a Flash agency called AKQA) and maybe he just got pulled in to fix some co-workers work and they lost the original source and they need to use decompiled code since that’s all they have… yeah… maybe…

del.icio.us:If you steal source code, don't ask for help fixing it digg:If you steal source code, don't ask for help fixing it spurl:If you steal source code, don't ask for help fixing it wists:If you steal source code, don't ask for help fixing it simpy:If you steal source code, don't ask for help fixing it newsvine:If you steal source code, don't ask for help fixing it blinklist:If you steal source code, don't ask for help fixing it furl:If you steal source code, don't ask for help fixing it reddit:If you steal source code, don't ask for help fixing it fark:If you steal source code, don't ask for help fixing it blogmarks:If you steal source code, don't ask for help fixing it Y!:If you steal source code, don't ask for help fixing it smarking:If you steal source code, don't ask for help fixing it magnolia:If you steal source code, don't ask for help fixing it segnalo:If you steal source code, don't ask for help fixing it gifttagging:If you steal source code, don't ask for help fixing it

Update: Turns out that the code in Nemo 440 is actually just the code from the abcdump.as file in the Tamarin project. It looks like the abcdump.as file was written by Dan Schaffer from Adobe. So it turns out I could have just grabbed that file and not decompiled Nemo 440 at all, oh well :) Shigeru Nakagakai has also used that same abcdump.as file to create his own AIR app that lets you compare SWFs and inspect classes and packages.

My brain almost exploded with meta-geekiness. If you haven’t seen the Nemo 440 AIR app, it’s a SWF decompiler written in AS3 as an AIR application, written by Vadim Melnik. It lets you load SWF files (or SWCs) and it will show you a list of all classes in the SWF, as well as the detailed ABC bytecode for each class. Technically I guess using the word “decompiler” isn’t correct, Nemo 440 is a SWF disassembler that produces ActionScript Byte Code (ABC). This isn’t the same as a true decompiler that produces real ActionScript code (like the Sothink Decompiler).

So if you download and play with Nemo 440 you’ll see what it can do. Basically you can see all the classes in any SWF, and all the methods within those classes. You also get to see some stuff like class-level and static variables. Then if you want to uber geek out you can see the ActionScript Byte Code of the SWF. That means you get shit that looks like this:

    0       getlocal0
    1       pushscope
    2       getlex        	http://www.adobe.com/2006/flex/mx/internal::layoutObject
    5       getlocal1
    6       setproperty   	direction
    9       findpropstrict	invalidateSize

That’s far from being nice beautiful AS3 code that you can actually use, but if you spend enough time understanding ABC code you can start to make some sense of it. But even just seeing the packages, classes used, and the methods of all the classes is pretty awesome.

So after playing with Nemo 440 a bit I encountered the glaringly obvious question. What happens if I use Nemo 440 to decompile the Nemo 440 application itself? Excited in my geekery, I quickly extracted the SWF file from the AIR app and loaded it in, only to be sorely disappointed. When I decompiled the app I could see all the Flex classes and other libraries that were used (even some components from Flexlib!), but I couldn’t see any classes that were used to do the decompiling. Hmm, I thought, how odd.

I figured that it wasn’t technically possible that the dissassembler would work so well on all SWFs except itself, something was fishy. I mean, that just doesn’t make sense. So I decided to load the SWF into the Sothink Decompiler to have a look. Then I came across this little gem within the Nemo 440 source code:

private function _checkName(param1:String) : Boolean
{
   if (param1 != null)
   {
      if (param1.indexOf("docsultant") >= 0)
      {
         return false;
      }
      if (param1.indexOf("nemo440") >= 0)
      {
         return false;
      }
   }
   return true;
}

That code specifically checks if the package name matches one of the packages used in the Nemo 440 source code and excludes it from being processed! Mother fucker!

So I decompiled the code using the Sothink Decompiler, and then decided I wanted to put it back together into a running app. It took me about 6 hours or so of work, and I had to consult the SWF specification document and the AVM 2 spec document a lot during the process, but I got it working.

So then I had my own AIR app that used the code from the Nemo 440 app to load SWFs and disassemble them. The first thing I did, obviously, was load up the Nemo 440 SWF file and give it a whirl, and I was instantly looking at the full class/package structure and the disassembled ABC bytecode of all the classes.

Ahh, sometimes it feels so good to geek out so much.

For those interested in learning more about decompiling, disassembling, ABC bytecode, and all that good stuff, I’ll be talking about this whole thing and a bunch more stuff in my presentation at Flash on the Beach in Brighton, England on October 1st. I won’t be posting the code that I decompiled and put back together, unless I get the original author’s permission (which I’ll be asking for, but haven’t yet done). Who knows, maybe the guy will be cool with open sourcing it :) but maybe not. And if not, that’s cool too, he put a lot of work into it (I have a great appreciation for the amount of work after reading through much of the SWF spec and seeing the kind of code he had to write).

I just thought the concept of decompiling the decompiler to decompile the decompiler was too cool. God, I’m such a geek.

del.icio.us:I just decompiled a decompiler so I could use it to decompile itself digg:I just decompiled a decompiler so I could use it to decompile itself spurl:I just decompiled a decompiler so I could use it to decompile itself wists:I just decompiled a decompiler so I could use it to decompile itself simpy:I just decompiled a decompiler so I could use it to decompile itself newsvine:I just decompiled a decompiler so I could use it to decompile itself blinklist:I just decompiled a decompiler so I could use it to decompile itself furl:I just decompiled a decompiler so I could use it to decompile itself reddit:I just decompiled a decompiler so I could use it to decompile itself fark:I just decompiled a decompiler so I could use it to decompile itself blogmarks:I just decompiled a decompiler so I could use it to decompile itself Y!:I just decompiled a decompiler so I could use it to decompile itself smarking:I just decompiled a decompiler so I could use it to decompile itself magnolia:I just decompiled a decompiler so I could use it to decompile itself segnalo:I just decompiled a decompiler so I could use it to decompile itself gifttagging:I just decompiled a decompiler so I could use it to decompile itself