Brightkite Blog Sidebar Widget
I’ve been using Twitter for a while, and while I can appreciate the ability to see what my friends are doing, I was never really compelled to use the service. Something just seemed missing. Then I was introduced to Brightkite. What Brightkite adds to Twitter is geographical/geospatial data, and I’m hooked! Within my first week of using the service, I was making new connections with people that were simply in my vicinity. While the Brightkite FAQ says that a blog sidebar is coming, I enjoy the service so much that I just couldn’t wait.
As this was to be a sidebar widget on a blog, I wanted to keep it as small as possible. I started off with a few ideas in Flash CS3, and then evolved over to pure AS3 written using Flex Builder. Using Flex Builder does not mean using the Flex framework, and what I was doing wouldn’t have made enough use of the components anyways. That being said, I do actually use a small slice of the Flex framework - the StringUtil class for the trim() method. The StringUtil class is a subclass of Object and the compiler only includes what is needed, so we keep the resulting SWF small.
There are a few interesting aspect to this application that are worth sharing. First is that the data comes from the Brightkite user’s RSS feed. Of course a little URLLoader and E4X action make most of this work easy, but Brightkite uses some custom namespaces, which can be intimidating if you haven’t used them in ActionScript before. You first have to declare the namespace using the “namespace” keyword and providing the URL endpoint in ActionScript. There are a couple different ways to refer to the namespace within your E4X statements, but I like to use the double colon notation as follows.
namespace bk = "http://brightkite.com/placeFeed";
namespace geo = "http://www.w3.org/2003/01/geo/wgs84_pos#";
...
var rss:URLLoader = new URLLoader();
rss.addEventListener( Event.COMPLETE, doFeedComplete );
rss.load( new URLRequest( RSS_ROOT + user + RSS_ENDPOINT ) );
...
var loc:String = truncateText( StringUtil.trim( feed..item[viewing].bk::placeName ) );
var link:String = feed..item[viewing].bk::photoLink;
var mess:String = truncateText( StringUtil.trim( feed..item[viewing].bk::photoCaption ) );
At certain times you’ll see a map presented. In following with what Brightkite already uses, I used the Google Maps API. The core object on the Google Maps API is Map, which extends from Sprite. This means that Google Maps integrates very easily with pure ActionScript content (or just Flash content in general), and doesn’t necessarily inject a dependency on the Flex framework. Instantiating a Google Map in ActionScript requires only a few lines of code. You do have to have a Google API key to use the maps, and therefore this sidebar application.
var map = new Map();
map.key = apiKey;
map.addEventListener( MapEvent.MAP_READY, doMapReady );
addChild( map );
...
public function doMapReady( event:Event ):void
{
map.disableDragging();
map.setZoom( DEFAULT_ZOOM );
dispatchEvent( event );
}
I didn’t want to bake my Google Map API key into the source code, so another interesting aspect is in externalizing that data. The URL for the RSS feed is also driven by external data, namely the user’s name on the Brightkite system. The best way to externalize that data is to use variables on the tags that instantiate the Flash Player in the HTML. Although Flex Builder generates HTML based on a template, I like to replace that template with code from the SWFObject generator.
<script type="text/javascript" src="assets/swfobject.js"></script>;
<script type="text/javascript">
var flashvars = {};
flashvars.googleKey = 'MyGoogleApiKeyHere';
flashvars.user = 'khoyt';
var params = {};
var attributes = {};
attributes.id = 'bk';
swfobject.embedSWF( 'Sidebar.swf', 'bkAlternate', '195', '275', '9.0.0', 'assets/expressInstall.swf', flashvars, params, attributes );
</script>
...
apiKey = loaderInfo.parameters.googleKey;
user = loaderInfo.parameters.user;
As open source Flash projects go, I also use Tweener for the animations. Tweener has quickly become one of my favorite tools. It is a very lightweight library for transitioning display object variables from one point to another over time. It may be an object’s X and Y position, it may be the alpha, it may be a rotation, or it may be all of them at once. You can delay the transition, you can call functions when the transition is complete and pass custom parameters to that function, and more. Tweener even includes several built-in transition types, all for just a few lines of code (often just one line).
Tweener.addTween( location, {y: 40, time: 0.75, transition: "easeOutSine"} );
Tweener.addTween( map, {alpha: 1, time: 0.75, transition: "easeOutSine"} );
Tweener.addTween( message, {y: stage.stageHeight - 39, time: 0.75, transition: "easeOutSine"} );
I built this mostly as a test of using the Google Maps API. I never intended to release it publicly, but I’ve shown it around, and already had requests, so here’s the code and the finished application. The Brightkite FAQ does mention that the team is already planning their own blog sidebar widget, and I expect that it will be much better than my little exercise. Still I learned a lot from doing this application, and it was really fun to build. It’ll be replacing the Twitter space on my blog soon (it probably already has by the time you’re reading this).