ReflexUtil and Facebook API

Is not like I don't have enough fodder for blogging, but I wanted to point out a couple people who are doing interesting work. Casey over at Tater Salad wrote about his experiences with ReflexUtil, but he's too modest to say that he did the code for modularizing the library. ReflexUtil is great for nudging into place those objects interactively. Considering I code in jEdit and don't have Flex Builder's Design View I'm sure this will come in handy sometime.

And Jason over at PB King has put a good amount of work on a Facebook AS3 API which was originally an internal project here at Terralever. There are a lot of updates that he's added. If you are looking for an alternative to the as3facebooklib this is it. I'd say that the main points of difference between the two libraries is that this one is more Delegate-based, while as3facebooklib is event-based.

Happy coding!

I <3 Weighted Companion Cube

A friend of mine went ahead and made this Facebook page for the Weighted Companion Cube. If you have yet to play the greatness of Portal you really should either grab the Orange Box or the game itself off Steam. Stop reading this and go play it now.




Portal has my vote for Game of the Year. I love the playfulness of the game, the humor, and the over-the-top gameplay. I'm also a big fan of short games. I love games I can finish in a couple sittings. I'd be fine if Portal was even shorter.

What's even better is that Valve has just touched the tip of the iceberg with Portal. A lot of Portal was just educating and selling the concept. It isn't till near the end of the training that you really get a sense of things such as 'flinging' and the mind-bending gymnastics nature of it, which is where the fun lies. I'm sure there are even more interesting mechanics that can be developed. I love the idea of integrating something like the bounce pads from Quake 3:Arena. Or having to break through into areas by generating enough force by flinging yourself vertically then horizontally.

Can't wait to see what happens next!

jEdit MXML and ActionScript 3 edit modes

http://ubergeek.tv/code/jedit_actionscript_edit_modes.zip

I've been using these for a while and figured that I should put my mxml edit mode up for the world to enjoy. The actionscript mode was written by others, but I'm including it for completeness.

The mxml mode is just the xml mode but with:

• Syntax Highlighting of Actionscript with CDATA tags.


• If an attribute has some data binding, it shows up as a different color.

Not a huge change, but its quite nice to make things extra legible.

When installing PLEASE NOTE:
With jEdit closed, delete the file ~/.jedit/recent.xml to clear your recent files listing. You must delete this to see the changes take effect for mxml files in the recent files list.

To install:

Unzip the files to your ~/.jedit/modes directory. If you already have custom modes, modify your catalog xml to include the two modes inside the catalog xml given.

Happy Coding!

Facebook Developer's Garage - Phoenix - Nov. 14th

Nov 14th at the Tempe Center for the Arts in Tempe, AZ Terralever is hosting a
Facebook Developer's Garage. Highlights of the event include a presentation by Dave Morin of Facebook on the platform and a detailed look at the evolution of the Red Bull Roshambull application by Nate Warner of Red Bull. I will be giving a short presentation on Flash integration for Facebook also.

We have been able to expand the number of seats available to 200. Please
register if you want to go, as there is a very good chance this will fill up. Plus say hi if you do!

http://www.terralever.com/Facebook-Developers-Garage-Phoenix/

Deja Vu and Reverse Psychology

Here's an interesting conversation that I had last night at a barbecue:

'Yeah, I hear that Linux desktops may hit 1% of the market soon...'

'Interesting...so how are they tracking that?'

*shrug*'I think that they're planning on tracking installs on the hardware so that they have a better idea.'

'What on the new Dell Linux PCs?'

'No, those other linux pcs.'

'The XO Laptop?'

'No, the other ones'

'The Asus ones?'

'Yeah.'

Regardless, the following hardware review for the Asus EEE PC came out of right field:

I have been waiting for the eee pc since I saw a blurb about it in, of all places, Vogue. They were pushing it as a computer that fits in your clutch, and since I travel a lot, I was salivating.

I am writing on it now, and I am just thrilled with it. It does indeed fit into my purse (it's about the size of a small-ish notebook or journal) and my wifi connection worked right away when I opened it up. I've been using the battery for about 2 hours so far and it's still at 40% power, so that looks promising.

...

WHAT?!

Did I miss something? Since when are Linux computers featured in Vogue? Since when do people give glowing reviews for Linux hardware on Amazon?

And since when does my sister print out a Tux pumpkin stencil for Halloween?

But this reminds me of a point in my life from a long time ago. A point where I looked around and said 'there's no way that people are actually going to start using the internet, but boy it would be cool if they did'.

So now I'm thinking, 'There's no way that people are actually going to start using Linux, but boy it would be cool if they did'.


UPDATE Nov 7, 2007:
Great article on Forbes regarding the Asus Eee PC and the technical, cultural, economic hurdles involved: http://members.forbes.com/global/2007/1112/024a.html

Also, my friend Scott has almost simultaneously blogged about the XO Laptop!

The idea virus is go!

How to determine if you're running Leopard in Flash

One of those things that's just right in front of your face:

import flash.system.Capabilities;
trace(Capabilities.os);

Returns 'Mac OS 10.5.0'. Hallelujah.

File Upload on Leopard

I've spent a good amount of time today trying to work out this surprise issue. Ironically I got a new macbook pro this weekend...and boy it sure came in handy for a reason I did not anticipate.

File upload is stupendously broken in Flash, on all browsers, on OS X Leopard. As details come out I'll see what I can learn here. We have been searching for potential fixes here today, for some of our applications depend heavily on this feature.

First I found this little post here, and then in the comments of Mike Chamber's Blog people are also experiencing this issue with AIR. Lastly there is this forum post that shows that Adobe has become aware of the issue:

This issue has been addressed and will be implemented in the next release of Flash Player. Regards,

Darren J. McNally,
Technical Support Engineer, Adobe
Flash/Flash Player Support


My first thought is that while its nice that they're going to fix it, I think this needs to be addressed now. I mean, like, right now. Big companies are going to lose money on this. People expect consistent functionality, and this is a real showstopper bug on a big feature.

So far I've looked at the headers being sent by Firefox and Safari to see if there is any useful information:

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

And Safari:

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-us) AppleWebKit/523.10.3 (KHTML, like Gecko) Version/3.0.4 Safari/523.10

So as you can see, we can tell....that we're on a Mac. Of some sort. Not very positive so far. Hopefully some more useful information should follow.

Come work with us!

We just updated our jobs page at work with some new positions. We're looking for great people to work with, including contractors, that are interested in doing kickass work for great clients.

http://terralever.com/about-us/careers

The flash positions are in the Phoenix or Tucson areas. All other positions are in the Phoenix area.

Peace!

Facebook Platform API for AS3, and group.

I mentioned briefly that we're building an api for working with Facebook's new Platform. As part of the 'release early, release often' open source mantra, we're releasing what we have right now. Its not fleshed out, but I think that the model that we've built is extensible and easy to use.

Download the API here

Our Facebook Group with more information, documentation, etc.

Here's some of our current features -

Authentication- The Facebook object handles authentication and security automatically. Its transparent, you just don't have to think about it.

Ease of use- Authentication can either be 'desktop' or 'web' style. This essentially means that you can test your app locally in desktop mode, and then deploy it web style. Our current testing model is to check a configuration xml to see what our authentication style should be:

if(configXML..mode == "desktop")
          {
              //start us up in desktop mode
              var config_api_key:String = configXML..api_key;
              var config_secret:String = configXML..secret;
              fBook.startDesktopSession(config_api_key, config_secret);
          }
          else
          {
              //start us up in widget mode
              fBook.startWidgetSession();
          }

And so we deploy a different configXML file on our server which doesn't contain our secret for use in 'widget' mode, but we can test the flash locally, dramatically speeding development time!

Proxy support - When developing a Facebook application, you'll want to pass all requests to the Facebook API through your server for security reasons. This server should just mimic the Facebook api, and work in the same way:

 fBook.useRedirectServer = true;
 fBook.rest_url = configXML..redirect_server_url;

Extensibility - The Facebook AS3 object is extensible. This means that you can extend your proxy on the server with new methods, and extend the Facebook object with new FacebookDelegates to handle your application-specific service calls.


What we're currently looking at improving is fully implementing the Facebook API. After that we'll be adding more helper functions to improve the usability of the api. Things such as automatically grabbing all images in an album, etc.

Enjoy!!

Facebook opens the gates! And they're off!

Well, about an hour ago, Facebook just announced their new Platform integration API. And we had an announcement ourself.

We've been having a TON of fun as a launch developer, seeing what's possible with their api. We've learned a lot of tricks along the way, specifically about integrating securely with a third party in a stateless REST environment. And all that we've learned should be released soon. We're developing an ActionScript 3 API for Platform, which we will be releasing soon.

Right now Jason is over in San Francisco taking part in a hack-a-thon with the Facebook guys. I knew I shouldn't have let him have all the fun. *sigh*

Why I like Facebook is the sort of 'extroverted internet' approach they've taken. I'm not a big MySpace fan, and a marginal extrovert myself. But I can understand what makes Facebook a great social application.

Facebook understands the concept of signal-to-noise ratio better than any existing social networking site. If you have to surf through tons of crap to find what you want, it makes it less accessible, and less valuable. Google understands this. Getting the user from point A to point B quickly is paramount to user experience. What about in the sphere of social networking? In terms of relationships, Facebook is speed dating, and MySpace is a noisy, loud night club.

Of course there is a place and time for both. Facebook has used discretion in allowing access to its users. It doesn't want to lose its integrity, and the high signal-to-noise ratio. But it has to be competitive on features, without opening the flood gates to the noobs. And so the new 'Applications' features have been developed.

Applications are Facebook's equivalent to MySpace codes. But unlike MySpace codes, which is basically just html, Facebook uses FBML to include html in its pages. Applications must also be registered with Facebook, requiring a certain level of proficiency, and removing anonymity from the application developer. That's important when you've got 27 million+ users to keep secure.

Overall I'm really happy to see a social networking platform rolled out that has this kind of smarts. We'll see where it goes from here!

Centering in Safari and IE off by one pixel

If the size of the browser window is an odd number, you'll run into problems with the centering not matching the centering of your html. A friend of mine needed this fixed, as his page elements could not match up with the background. This fix here suggests resizing the browser window to fix the problem. Well, while that is feasible workaround, I'm not sure how usable it is for a user to have their browser modified like this.

And so I cobbled together some javascript for him that basically overrides the background positioning and centers it manually via javascript. Like so:

function positionBackground(){
//set this to the width of your background image
var backgroundImageWidth = 760;

var size = getPageSize();
var body = document.body;
if( navigator.userAgent.indexOf('Safari') != -1 || navigator.appVersion.indexOf("MSIE") != -1)
{
 if(size.width % 2 == 1){
  size.width -= 1;
 }
}

body.style.backgroundPosition = size.width/2 - (backgroundImageWidth / 2);
}

function getPageSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
}
return {width:myWidth,height:myHeight};
}

window.onresize = positionBackground;
window.onload = positionBackground;

Unfortunately you're required to input the background image's width by hand, but since this is usually consistent I think its acceptable.

Alas, I'm really unsure that this is a better way of thinking about how to fix things. It really bothers me that the current mentality for rigorous CSS and tableless layouts requires such elaborate javascript fixes to get them to work. But that is a topic for another rant. :)

Cool trick: Re-instating deleted files in subversion.

One of the problems with version control in general is dealing with large amounts of binary data. If you add a large chunk of data, say an image sequence, its in there...for good*. If you delete it, and you want it back, well, is it possible to get it back without having to put it back in, increasing the size of the repository? With Subversion you can.

Earlier today we had a subcontractor who's new to using Subversion make the classic subversion mistake: copying a directory using Windows Explorer's copy and paste, instead of using Tortoise. So he copied his files to a new location, then used TortoiseSVN->Delete to remove the files from the repo, and supposedly committed his updates (which didn't move any files like he thought). When we asked him where the files went he was like 'i can see them'. So I went ahead and im'ed back 'i'll fix it'.

I reverted just the deleted branch to before he deleted the files. Then I moved them to where I wanted them to be in the current branch using the proper right-click and drag method with Tortoise.

The 'cool' part of this is that I'm actually moving files that aren't part of the current revision, and don't even exist in the current revision, from a previous revision. Remember that in Subversion all file revisions are really just links with data attached. All I'm doing is telling Subversion to link the data from a previous version to the latest revision, and Subversion just does what its told. Awesome!

* It is possible to use stream editing to remove files from SVN repositories, if you are braver than me.

jEdit Flex Compiler Shell Integration

Last night I stumbled across a great little hack that's really been a missing piece of the Flex action for me. Flex Builder's zippy compilation is one of the best features of the commercial Flex product, and one I sorely missed. But now I've figured a way to integrate the Flex Compiler Shell into jEdit, and so now my text editor of choice works very well with my compiler of choice.

jEdit's Console plugin allows you to integrate a shell into the interface. This shell is scriptable via jEdit's quite extensible macros. So we have two macros, one to initialize the compiler shell, and another to re-compile once initialized.

First macro:

//Initiate the compiler
runCommandInConsole(view,"System","/path/to/fcsh");
runCommandInConsole(view,"System","mxmlc ... very long list of arguments for your compile :P ...");

Recompile macro, bound to Ctrl-Enter:

runCommandInConsole(view,"System","compile 1");

This makes me a very happy boy! I have verified that these instructions should work on Windows, too (as I'm doing this on Linux).

Trace Output on Linux with Flash Player 9

I just spent about 45 minutes getting my flash player to trace to a text file. So as of this writing, here are the current things that you should watch out for when attempting to trace() out with flash on linux:

Make sure that you have the debugger version installed. If you are using Ubuntu, or another distro that uses package management, remove the flash player package. On Ubuntu Feisty Fawn, this is the flashplugin-nonfree package. Open synaptic and uncheck the package. It will warn you that you are removing the ubuntu-restricted-extras package also. Don't worry about this, as its a dummy package.

Install the debugger version from the adobe site. This is pretty straightforward.

Once installed, you must turn on the trace reporting by creating a file in your home directory called mm.cfg with the following contents:

TraceOutputFileEnable=1
ErrorReportingEnable=1
MaxWarnings=1

So what exactly will these three lines do? Well the first says that we should print out all trace() function calls to the file ~/.macromedia/Flash_Player/Logs/flashlog.txt. The second option says that we should also print out our stack traces and exceptions to the log file. Lastly MaxWarnings is how many lines the log file will contain until the player stops. This page goes more in depth.

A couple important points: The documentation is incorrect, and the output file is NOT ~/macromedia/Flash_Player/Logs/flashlog.txt but ~/.macromedia/Flash_Player/Logs/flashlog.txt . This is important because files with a '.' in front are hidden, so you won't see a 'macromedia' folder pop up in your home dir.

Secondly, the flash player is smart enough to create the ~/.macromedia/Flash_Player/Logs/flashlog.txt path, directories and all. So you do not need to create this path manually.

Ok, so now you've installed the debug version, and you've created your mm.cfg. Your logging to the file, and now you want to watch the output! Well, you have many options at your disposal. A favorite option is the FlashTracer extension for FireFox. Here is a special version that works on Linux.

Another option is to use 'tail' a basic command line program that displays the tail end of files:

tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt

As with all command line programs, you can pipe them to do fun interesting things :)

tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt | grep DEBUG

To just get all the lines with DEBUG on them.

tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt | grep -C 3 DEBUG

Get the lines that have DEBUG on them, and the lines around them (useful for seeing what happened before and after the line in question).

And here is a simple script that encapsulates the above tail usage into a simple program:

#!/bin/bash
if [ -z "$1" ] 
then
        tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt
else
        tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt | grep $1
fi

Flex Builder vs. The Other Guys

So I was attempting to think of good topics within which to blog about. In my current position I'm implementing processes more than writing code sometimes. But writing code is very dear to my heart. So the process of writing code, and writing quality code is something very blogworthy. There are lots of great blogs about this kind of thing. I really enjoy Paul Graham's work. Joel on Software is also fun sometimes.

Another topic is tools. Which tools to use for the job are something that coders get downright nasty about. Because using the wrong tool for the job is possibly the biggest faux pas a coder can make. Coders are, among other things, toolbuilders. Everyone at some point says to themself 'there has got to be a better way to do this mind-numbing repetitive task. Perhaps I can build some sort of machine to do it for me.' And so coders do mental backflips massaging code to create new tools that do these tasks. If you're a coder and you are doing mind-numbingly repetitive tasks, then you're doing something wrong.

Adobe (and when I say Adobe I really mean Macromedia) has done the world a great favor with Flex and Flex Builder. They have built tools that are modular, understandable, fast, and stable. So many props for so many great design decisions:

The choice of java for their sdk gives it portability, reliability, and the headroom to focus on getting it right.
The mxml specification is easy to read, easy to work on, and easy to love.
The framework is great. Well documented. Very consistent. Great usage of constants, interfaces and strongly typed events make the framework a joy to work with. Data binding is fantastic.

I started out writing AS3 in Flex Builder 2. This was ok for a while. I appreciated the crutches that Macromedia created to get you started. The code completion worked fairly well. The automatic compilation is straightforward. Things only became more hairy when I really started to want more control.

So what are the options? Well, Adobe does tout their Flex 2 SDK. Well, how does this measure up to the commercial product? The SDK is simply a command-line compiler, meaning you really need to know about build software and how to use build tools. The natural fit for eclipse for building is Ant. This works quite well for flash too. So what about an editor? jEdit is a fantastic option for development that not only integrates with ant, but has syntax highlighting, and many, many features and customization, including a MUCH better search than Eclipse.

So how smooth is development of projects without Flex Builder? Well, its a give and take. I've found that using ant, jEdit and the Flex Compiler shell has given me a ton of freedom. Its also made setting up the same project on different computers very easy. The real price comes at the loss of code completion and compilation speed.

Flex Builder offers the slick 'Design View', too. This is probably not that useful for most programmers after about 3 weeks of use. I end up coding the final look anyway. Plus the faster compilation means its always compiling, which means I get random errors and popups when I'm typing. The interruptions and the sometimes not-so-responsive user interface is what really made me move on from Flex Builder back to jEdit.

Debugging WPF/e in Firefox

I'm playing around with WPF/e and still haven't written a lick of code on it yet. Still learning about how to handle asynchronous events, using XAML with JavaScript, and how to piece it all together. But I did find something pretty cool already for those of you who are, like me, Firefox users.

Firefox has a full-on javascript debugger, originally called 'Venkman' that you can use to debug your javascript. And while its known as the 'Javascript Debugger' in the menu, I'm going to call it Venkman because that sounds way cooler. And since WPF/e is actually executed using Firefox's javascript engine, that means Venkman will debug your WPF/e application.

And by 'debugging' I don't mean 'crap that didn't work, I'll echo a bunch of junk to the command line' debugging. I'm talking full-on, hot javascript on javascript action. I'm not kidding, because the debugger is actually written in javascript!

Venkman supports breakpoints, variable watching, expression evaluation, profiling, and more. It is an industrial strength tool, and its actually sort of intimidating to me, because I'm more from the 'echo a bunch of junk to the command line' school.

And so how do you use this tool with your WPF/e application?

First install Venkman, which installs quite easily as a Firefox extension.

Next restart Firefox, and open the 'Javascript Debugger'. There you are. Easy, wasn't it?

As an example debugging session, let's debug the 'Sprawl' game. Open Venkman. In a tab, open up the following url:

http://channel9.msdn.com/playground/wpfe/sprawl/default.html

Click on the 'Open Windows' tab to display a list of open windows. Expand Browser Window->default.html and you'll see a list of all the javascript files used within the game. Double click on 'hex.js' and you'll see the actual javascript for each tile within the game. To the left of the line numbers you'll see dashes next to lines that have code on them. Click in this space on line 3 in order to add a 'breakpoint' to the line. You should now see a white 'B' against a red background.

Now refresh the browser. This can take a WHILE, because the debugged javascript takes longer to execute. Start a game. After entering your name and clicking 'Ok' you'll notice that the application stops, and the debugger breaks at line 3 in the hex.js file. Click the 'Continue' button a bunch. You'll notice that every time you click on the button, another tile is created.

This is probably amusing for about 30 seconds, and then you'll probably want to move on without pressing continue another 100 times. Clicking once on your break point will change it to an 'F' against an orange breakpoint. This means its a future breakpoint, and it will stop again if the app is debugged again. Clicking twice clears the breakpoint entirely. Do so, and then press 'Continue' to progress through the application as normal.

This is a really great debugger but unfortunately there seem to be a few hiccups. The worst is that when you close the debugger, you cannot re-open it. Worse still, if you try to re-open it, it will hang a process, and you'll have to manually kill firefox.exe in your Task Manager. Lastly, the time it takes to load up a WPF/e project is way too long. But considering I'm learning the platform, right now I'm just using it to step through applications and see how others do it.

Welcome!

Hey all! Welcome to my flipping sweet blog. Here you will find me jabbering about all manner of stuff and junk, but mainly flash development. Currently I work at Terralever developing interactive applications. Big love to the TL family!

So today comes the announcement of the new Adobe Flash CS3! Right now the site is getting hammered, and there is no expected launch date. But it is nice to see a listing of new features. Integration into the Adobe family is going to make life a lot easier for everyone.

I really like that they aren't shy about the prospect of using flash as a video tool:

Adobe After Effects integration

Export individual layers with transparency using the new QuickTime exporter, and import them into After Effects for advanced manipulation. Import FLV directly from After Effects.

Some things are just ridiculously simple to do in Flash that would require too much time in After Effects. I could've really used this feature in the past on dvd projects, and I'm sure it will come in handy!

Well, it'll probably take a couple blog entries before I get into a good cadence. Stay tuned, as I'll be posting little demos, source code, and giving my opinionated opinions to anyone who'll read :P.