This one’s a boilerplate for a Facebook App. Read the README for more details. Do let me know how I can make this better!

https://github.com/EdwinToh/Facebook-App-Boilerplate

Take a look here: https://github.com/EdwinToh/LightPainter

LightPainter is an app that allows you to create your own light painting effects with your web cam. It’s an initial commit so documentation and comments are scarce and unorganized.

Have fun painting!

The installation was built using Arduino, a Sharp sensor, Clickatell’s SMS service and the Flash framework as3glue. When a person passes by the sensor, Arduino reads the data, and transfer it to Flash via serproxy, Flash then will trigger a HTTP call to Clickatell’s web service to send out SMSes to 3 Nokia phones placed on the walls of the event space.

Here’re some pictures of the making of and the event space. Enjoy!

Winning an FWA has always been my dream and thanks to the great work of my colleagues at Kinetic Singapore, we won an FWA for DevilYogurt.com.

Check it out if you have the time, and enjoy creating your own Devil Yogurt.

Adobe is working on EDGE, a tool that lets you convert .fla files to .html. Check out the video of the tool in action:

There’s also another application that is already released for the public for use, Sencha Animator. Check out the demos here.

As you all know, ThickBox is no longer under development since 2007, the next popular alternative to take over the reigns of ThickBox seems to be ColorBox, and so I’ve done a new tutorial to do the same thing with ColorBox.

There are a few things that remain the same from the other example.

Step 1: Prepare your HTML.

Include the source files to ColorBox’s CSS, and Javascript files, as well as the original jQuery JS files.

Insert in the tags of your HTML:

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

Step 2: Insert the Flash

Using SWFObject, insert Flash in your HTML and remember to set the following 2 parameters: “allowScriptAccess” to “always” and “wmode” to “transparent“.

Insert in the tags of your HTML:

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

Insert in the tags of your HTML:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="200">
  <param name="movie" value="colorbox.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <param name="swfversion" value="6.0.65.0">
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf">
  <param name="allowscriptaccess" value="always">
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="colorbox.swf" width="550" height="200">
    <!--<![endif]-->
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="swfversion" value="6.0.65.0">
    <param name="expressinstall" value="Scripts/expressInstall.swf">
    <param name="allowscriptaccess" value="always">
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

Step 3: Prepare the Javascript Function

Because ColorBox does some parsing of the Javascript functions and ExternalInterface doesn’t seem to be able to call functions with the dollar sign in them. What I’ve done here is to create a simple javascript function and use Flash to call this very function.

Insert in the tags of your HTML:

<script>

	function launchColorBox(url){
		$.colorbox({href:url,width:"80%", height:"80%",iframe:true});
	}

</script>

Step 4: The Flash Code!

The final step is to actually reuse the Flash Code in my previous version, making only slight changes. Create a button with the instance name “btn1″ and put the code in the first frame of your Flash file.

stop()
//Imports the ExternalInterface Class
import flash.external.ExternalInterface;

//Adds the CLICK eventlistener to the button btn1
btn1.addEventListener(MouseEvent.CLICK,openColorBox)

//Launches the JS function that we created earlier.
function openColorBox(e:MouseEvent){
	ExternalInterface.call("launchColorBox","http://www.google.com");
}

You can view the demo here and download the source files here.

In my opinion, the best documentation ever written is by gskinner for TweenMax, and I think few would argue with me about that.

Having said that, the documentation written by aral for the SWX Twitter API is actually not too bad as well. But being completely new to both the Twitter API and the SWX Twitter API, one might be lost upon landing on the API page.

Now that my ramblings are done, on with the tutorial.

First, download the SWX Code from here. As of the time of writing, go ahead and download the v2 which is still in BETA as it works just fine.

This tutorial will show you how easy it is to update your Twitter status using the SWX Twitter API.

Here’s a look at what we will be creating:
[kml_flashembed publishmethod="static" fversion="8.0.0" movie="http://www.designfission.com/swxtutorial/twitter.swf" width="400" height="380" targetclass="flashmovie"]

[/kml_flashembed]

Code:

stop();
loader.serviceClass = "Twitter";
loader.method = "getPublicUpdates";
loader.debug = true;
loader.loadMovie("http://swxformat.org/php/swx.php","GET");

import org.swxformat.*;
var swx:SWX = new SWX();
swx.gateway = "http://swxformat.org/php/swx.php";
swx.encoding = "POST";
swx.timeout = 10;
swx.debug = true;
swx.faultHandler = Delegate.create(this, faultHandler);
swx.progressHandler = Delegate.create(this, progressHandler);
swx.timeoutHandler = Delegate.create(this, timeoutHandler);

function updateTwitter() {

	var callParameters:Object = {
		serviceClass:"Twitter",
		method:"update",
		args:[message_txt.text, username_txt.text, password_txt.text], 

		result: [this, resultHandler],
		progress: [this, progressHandler],
		timeout: [this, timeoutHandler],
		fault: [this, faultHandler],
		debug: true
	}
	swx.call(callParameters);
	isLoading(true);
}

function resultHandler(event:Object) {
	isLoading(false);
	status.text = event.result;
}

function progressHandler(event:Object) {
	trace("progressHandler: " + event.bytesLoaded + " of " + event.bytesTotal);
}
function timeoutHandler(event:Object) {
	isLoading(false);
	status.text = "Call timeout. Please try again.";
}
function faultHandler(event:Object) {
	isLoading(false);
	status.text = "Call fault. Please try again.";
}

update_btn.onRelease = function() {
	updateTwitter();
};

Source Files (AS2.0 | CS3 Format)

I’m not going to explain the code unless someone requests for it as it’s really quite simple and straightforward. The other reason is due to a lack of time. I figured if I don’t share this now, I might not want to do it in the future, so hey, at least you have the code.

Once again, hope this helps someone out there.

Note: For other Flash Developers like me out there, if you need to integrate Facebook as well using AS2.0, take a look at http://www.echoesofburmajones.com/2009/09/18/20/facebook_connect_in_flash_actionscript_2.htm for an excellent tutorial (w/source files)!

If this post helped you in any way, help me in return by clicking on the ad below:

The microsite was a campaign for the Singapore launch of the highly anticipated sequel: Battlefield Bad Company 2, an FPS developed by DICE and published by EA games.

As BF2 features destructable environments – and tanks. We came up with the idea of letting players do exactly that – in real life. What users were able to do was that they could connect to a real model tank in the physical world and battle 3 other players in a prebuilt environment.

A camera was mounted on each of the tank so that the connected player can “see through” the turret of the tank. Players control the tank with the keyboard and then engage other players in battle with other tanks on a diorama that was installed at a cineplex in Singapore.

To be able to control the tank, my tech lead stripped bare the insides of the RC tank that we got from our supplier, VSTank, and put in his own customised and improvised version of the Arduino + XBee shield + Xbee components. Customised batteries were ordered and modded to power the Arduino which then passes the commands received through the XBee to the tank motors.

Each tank has a defined server which is actually a Netbook. To enable the sending of Serial data via the USB COM ports, serproxy was used along with the excellent SmartFoxServer. As there was no stable wifi-connection in the cineplex, the netbooks were connected using M1′s Mobile Broadband service (a 3G HSDPA network).

Due to the slow speeds of the mobile broadband, we had to sacrifice some video quality to achieve minimum control lag for the players who are connecting to the tanks from all over the world. The other problem we had was the streaming of the video feeds. As Singapore does not have any web hosting companies that offer Flash Media Servers, we turned to Influxis. This was perhaps the smoothest part of the entire project. The Influxis support was amazingly helpful, and the free tools and control panel that comes with every account was easy to use and set up. I am thinking of writing a tutorial for broadcasting a live feed to the world using Influxis soon!

As we were looking at a few alternatives at the time, the other service I tried was UStream, a free web streaming service that does exactly what I wanted. The problem though was that there was almost a 4 second delay between the feed I was broadcasting and the one that I was receiving. This was impossible to use for our game as we needed almost zero lag to let players control the tank efficiently. After signing up for the cheapest available plan (US$6/month) to do a test, we decided to go with Influxis as the 4 second delay was brought down to 0.5 seconds!

Next, a queue system was built so that only 4 players were able to connect to each one of the tanks.

The entire project was completed within 2 weeks and it generated thousands of hits from all over the world. I’m pretty sure that what we did was an industry first. It was tough but the process was fun and I learnt alot along the way.

Some pictures of the diorama, tanks, and Arduino:

The Arduino

Prototyping

Tank Version 1.0

The XBee Shield

The insides of the tank

Mounted XBees for minimum interference

All 4 Tanks ready to roll!

That’s all for now. I’m just sharing what I learnt during this project with everyone. Hope everyone had fun reading it and watching the videos!

sound_mc.buttonMode = true
sound_mc.addEventListener(MouseEvent.CLICK,toggleSound)

function toggleSound(e:MouseEvent){
	var tempMC:MovieClip = e.currentTarget as MovieClip
	var sTransform:SoundTransform = new SoundTransform(1,0);
	if(tempMC.currentFrame == 1){
		tempMC.gotoAndStop(2)
		sTransform.volume = 0;
	}else if(tempMC.currentFrame == 2){
		tempMC.gotoAndStop(1)
		sTransform.volume = 1;
	}
	SoundMixer.soundTransform = sTransform;
}

If this post helped you in any way, help me in return by clicking on the ad below: