wellconsidered

OpenSocial to Actionscript 3

I’ve been busy exploring the various social platforms for campaign integration. At Proximity BBDO we have successfully launched a campaign with Facebook Connect for Cécémel and our first OpenSocial integration on Netlog for Snickers. Both frameworks are very alike and different at the same time.

Facebook Connect extends an existing framework, that was available on Facebook itself for application development, and allows you to leverage the same functionality on any external site. This is great, because your website can be loosely coupled with Facebook and still keep its own identity and branding.

OpenSocial requires your application to live on a platform that supports OpenSocial. It is more a library that is available to you that is built with a certain feature set and OpenSocial is the interface to it. You may also notice that I talk about an application instead of a website. It’s not that websites can’t use OpenSocial as such but it goes more to the application direction.

From an advertising perspective, both frameworks can work for a campaign, the success depends more on the platform you choose than which framework you are going to implement.

You may have seen my last blog post about a Facebook Connect to Flash bridge and so now, there is a second Flash bridge, for OpenSocial this time. We used it internally for the Netlog application and it turned out to be pretty easy to utilize.

An example application can be tested in the sandbox of your preferred social platform which supports OpenSocial (Netlog, Orkut, MySpace, …).

There are some downsides when using the library on different browsers. When in production, OpenSocial sometimes sends different formatted objects with results back to the front-end.
I’m not sure why it happens in IE7 on one machine and doesn’t on another machine. Those little things, we fixed for now but it still requires some more testing and debugging.

If you have any questions about, or you want to download the full library, drop me an e-mail at pieter@wellconsidered.be or pieter.michels@proximity.bbdo.be.

Facebook Connect to Actionscript 3

Facebook has launched Facebook Connect a little more than a month ago and it has seen a major adaptation on the Internet now. We’ve seen it in action on TechCrunch, Digg, Vimeo and a dozen of other sites. Together with Google Friend Connect (and maybe MySpace Data Availability) it announces a time of one social profile on multiple sites with features like friend linking, profile information exchange and bunch of easy tools for content sharing (on Facebook for instance).

At Proximity BBDO, we try to make user integration and participation on campaign sites as easy as possible and just hitting the ‘Connect with Facebook’ button is easy. I’ve been working on a bridge to link the Javascript implementation of Facebook Connect to a Flash or Flex site.

An example of a Facebook Connect Flash application can been seen here. It currently supports automatic login, retrieving friend list and friend information (can take a while), current application users, sharing a link on Facebook, posting a predefined story and updating your story (make sure you set the status permissions first).

I have deliberately chosen to fully implement the results in Flash rather than merely providing a wrapper for the Javascript calls and dealing with the result in Flash itself. At the moment I’m of course limited to the things I program in Flash (the calls and the results).
But as we have to deal with automatic login and javascript popups, this way was easier to integrate in a Flash website and, moreover, the Javascript library is built with a HTML website in mind. So, it allows you to use the same library in your average website and listen to any event that passes along (login, disconnects, friends, a status that has been set, …)

Update: I have included the inviting of friends as well. They will receive an invitation for the application in their Facebook inbox. One downside, at the moment, is that there is a redirect after successfully inviting friends. I’m still working on fixing that.

Update 2: The code library is available at github.com as project FBFlashBridge.

RTMPT problems with WebORB in as3

At Proximity BBDO we’ve been working on a nice case for Belgacom: Internet is mine! (Mine I tell you!) You can claim the internet by simply pushing a button: that’s it, you’re now the owner of the internet .. until someone else claims it. The switching between owners is going fast, very fast.

So, what did we use to accomplish the real-time interaction between visitors? Right, some push technology delivered by Red5, Flash Media Server or WebORB, to name a few. We used WebORB .NET from The MidnightCoders for our project, it has a tight integration with our existing .NET working environment and allowed direct communication with our SQL databases.

The first tests we did were pretty neat, a hundred connections and constant pushing (figuratively and literally speaking) were being processed without a flaw. But as the application grew more complex and a lot of database interaction happened at each click/push we encountered some hiccups now and then; traffic congestion, time-outs and just general slowness.

One of the reasons, was are choice of transfer protocol. At first we used rtmp as a protocol but our experience with other projects was that rtmp (defaults at port 1935 and for WebORB port 2037) gets blocked by corporate firewalls leaving a part of the visitors out of the fun. So we directed all traffic to port 80 and so changing the protocol to rtmpt. And this seemed a bad idea.

• Speed is considerably lower on rtmpt than on rtmp.
• Packets being sent are larger as they contain additional HTTP headers

So, after problems raised we had to change everything back to normal. Rtmpt wasn’t a valid choice in this situation as we required real-time push from client to server and server to client for hundreds of connections. The bad news now, is that probably some users won’t be able to participate on the website. But thus far we haven’t received any complaints (thank god).

So, consider all down-sides before choosing the more ’safe’ rtmpt protocol over rtmp. I warned you, so don’t come crying afterwards :)

AS3 Jayrock wrapper

We've been using ASP.NET Webservices for over 3 years now at Proximity BBDO (thank god it has been that long ago since we abandoned good 'ol sendAndLoad!). The rise of AJAX enabled projects becomes more and more real and we have been on the lookout for more appropriate technologies when using AJAX: JSON. JSON is the de-facto standard when developing and deploying AJAX websites these days so we obviously followed that trend.

So, we have Webservices on the one side, and JSON on the other side, both use ASP.NET in most of our projects.

In order to simplify JSON - .NET communication in our AJAX sites, Bert Vermeire introduced Jayrock.
(He has a wonderful post about JayRock)

Jayrock is a modest and an open source (LGPL) implementation of JSON and JSON-RPC for the Microsoft .NET Framework, including ASP.NET. What can you do with Jayrock? In a few words, Jayrock allows clients, typically JavaScript in web pages, to be able to call into server-side methods using JSON as the wire format and JSON-RPC as the procedure invocation protocol. The methods can be called synchronously or asynchronously.

You can see, it is written for ... JavaScript. But it is perfectly usable in Actionscript as well. Adobe itself has a very simple JSON library that allows for JSON serialization and deserialization in AS3.

At Google Code I have released a AS3 Jayrock wrapper for easy integration in AS3.

Runtime class instantation

When we got the change from Actionscript 2 to Actionscript 3 (in Flash CS3), Adobe left out some new features that got introduced when Flash 8 was released. One of these features was the static function loadBitmap in the BitmapData class. It allowed you to link images in your library to a linkage id and call them in your code to perform any Bitmap action you want. Perfect! But not anymore in AS3 as this function is removed and instead you need to call the image from your library through creating a class reference to the image.

Like this:

Very simple indeed.

But it gets harder when you want to dynamically decide which image you want to load and link a class to the image. Ok, maybe I want to0 much at the same time, but if I could pull this trick the would at least simplify some things for me.

So let's get to work and check out this code:

Voila. Just to explain you what it does: it loads a random image from the library and instantiates the class that is linked to it. The class itself is just an extended BitmapData class where I hold some information such as a width, height, matrix and some other stuff.

The getDefinitionByName function (found in flash.util.*) comes in very handy as it gives you the class you asked for as a response. But the above code will give you an error telling you it can't find the class you asked for (ReferenceError: Error #1065: Variable XXX is not defined.). Bugger.

Well ok, let's change it a bit:

(You don't need to know for what project this is needed so that's why it is XXX :-).).
What you need to do is guide Flash to the location of the class you want to load dynamically. So, will this piece of code work? No! You will get the same error as before.
One last change is necessary to make it work like you want it to:

From the moment you declare a variable with one of the classes you want to instantiate dynamically, Flash will know that it exists and will execute the code correctly.

But what is all the fuss about?
Can't I just instantiate all the class before and just call the variable name I instantiated it to? Yes of course you can but that way you will load the class directly into the memory of the Flash Play and you may not want this to happen, right?

Example Files
You can download a working example here. It also includes the files that are wrong, just to show you how we got the correct version :). Have fun!