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.

http://gskinner.com/talks/quick/

Been trying to optimize one of my old Flash files recently and I found these wonderful slides by Grant Skinner. The part that benefited me greatly is the “activate 2.5D” hack. I never knew this hack existed and am still bewildered by the fact that it greatly improves the performance of my SWF.

Anyone knows why?

http://www.devilyogurt.com

AGENCY : Kinetic Design & Advertising
CREATIVE DIRECTOR : Pann Lim / Jonathan Yuen
ART DIRECTOR : Leng Soh / Driv Loo
PLANNER : Jac Tan
COPY WRITER : Eugene Tan
DESIGNER : Esther Goh
PROGRAMER : Edwin Toh

The Flash API actually provides a sample FLA and also, sample services for you to retrieve posts and even a simple NextGEN Image Gallery. However, the example only populates the data into a List Component. This is where this tutorial comes in, I will try to bridge this gap, and get you started with the Flash API plugin and start retrieving some posts!

Step 1: Installing the plugin

Since you’re reading this, I expect that you already have a WordPress installation somewhere and is ready to go. So go ahead and install the Flash API plugin.

Once that is done, activate the plugin, and then click on Generate Key.

Note down the API Key and also the Web Service URL, you’ll need it soon.

Step 2: Locating and editting the Flash Example

Next, look for the Flash example inside wp-content/plugins/flash-api/flash_example/. You should see a file named flash_api_example.fla inside.

Download and open the file, take a look at the actionscript and replace line 20 with the API key you generated earlier, and line 24 to your web service URL.

Go ahead and publish the FLA and see what you get. The example actually retrieves all the attachments that you have on your WordPress installation, and lets you download them. If you don’t have attachments on your installation, then you won’t see anything. But that’s not what people want to do normally, so let’s take a look at what other services we can call using the Flash API.

Take a look at services.php from the flash-api plugin folder. The default services are:

• attachments
• gallery (requires the gallery value)
• sendmail
• posts

What we want really, are the posts for now, so go ahead and change line 21 to posts. Publish your SWF, you should see a list of your post titles. If you try clicking on download, you’ll be linked to the post of your blog. But what we probably want, is to get the post’s body content.

I’ve went ahead and modified the 2 functions in the Flash file to do this. Replace the 2 functions with the ones from here:

// CONVERT A NODE INTO AN OBJECT
function objectifyAttr(node:XML):Object {
	var obj:Object = {};

	// Loop through attributes
	for (var a:uint = 0; a < node.attributes().length(); a++) {
		var attr:String = String(node.attributes()[a].name());
		var val:* = node.attributes()[a];
		obj[attr] = val;
	}
	//allocates the attribute postbody with the post content to the object
	obj['postbody'] = node.valueOf()
	return obj;
}

// DOWNLOAD CLICKED -> DOWNLOAD FILE
function downloadFile(evt:MouseEvent):void {
	var sel:String = (lst['selectedItem']) ? lst.selectedItem.postbody : null;
	if (sel != null) {
		//traces the content instead of going to the link of the post.
		trace(lst.selectedItem.postbody)
		//var u:URLRequest = new URLRequest(lst.selectedItem.link);
		//navigateToURL(u);
	}
}

And that’s it! Congratulations, you’ve successfully retrieved your WordPress posts in Flash! Hopefully, this tutorial will kickstart you to creating your own Flash frontend pulling data from the WordPress database.

I’ll be working on Part 2 of this tutorial soon and hopefully, I can extend the Flash API plugin with more services.

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.

I’m pretty excited about it because of 2 things. Firstly, it’s the first framework released by someone based in Singapore. Secondly, I share the same frustration as the creator – a simple getURL that used to be so simple now takes more than 3 lines of code to create!

And lastly, if you’re based in Singapore, do check out the upcoming Flex User Group (fug) meeting that’s on this Wednesday (8 Sep 2010). RSVP at Facebook.