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!

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.

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:

Being new to AS3, I didn’t realise that removing a child from the display list does not kill all it’s listeners, sounds, and some other stuff I don’t know.

When it affected me, I stopped for a moment and thought why is it built this way. It is true that sometimes, after removing a child from the display list, you do want the listener to stay.

Yet, I don’t see why they didn’t create another function that lets user kill all listeners in a particular child before removing it.

Anyway, after being stuck at this problem for a few agonizing hours, I realised all I need to do, is actually create a if statement inside any listener I want to kill as well, that if it’s parent is already null, i.e. to say it is already removed, then it should kill itself!

A simple solution. Hopefully no new bugs turn up after implementing this as a solution. Keeping my fingers crossed.

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

SoundMixer.soundTransform = new SoundTransform(0);

http://en.nicoptere.net/?p=574

The speed and quality of the fur generator is, I believe, the best out there right now.

Awesome stuff.

Other generators:

http://blog.inspirit.ru/?p=131

http://projects.stroep.nl/fur/

Not anymore in AS3.

A quick fix is to give the following properties to the MC on top in AS3:

mc.mouseEnabled = false;
mc.mouseChildren = false;

Hope this will help someone!