This can actually be done with any component that implements IBitMapDrawable, but I’m going to show you how it can be done with an HTML component specifically because, well, its cool. Feel free to use it to capture images of your web creations for portfolio purposes (in fact, I think I might just polish this up and make an real app to do just that).

To do this we just need an HTML component from which we can generate bitmap data using the BitmapData.draw() function. The bitmap data can then be encoded into a JPG ByteArray using the JPG encoder class available in AS3CoreLib. Once we’ve done that its just a matter of using a FStream to write those bytes to a File object with the appropriate extension (.jpg in this case). My example here writes the image to the desktop, but just a bit more code you could browse for a custom save location.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	verticalScrollPolicy="off" horizontalScrollPolicy="off"
	width="1024" height="768" 
	paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="5"
	backgroundColor="#000000">
 
	<mx:Script>
		<![CDATA[
			import mx.managers.CursorManager;
			import mx.controls.Alert;
 
			import com.adobe.images.JPGEncoder;
			import flash.display.Bitmap;
			import flash.display.BitmapData;
			import flash.utils.ByteArray;
			import flash.filesystem.File;
			import flash.filesystem.FileMode;
			import flash.filesystem.FileStream;
 
			private function takeSnapShot() : void {
 
				var snapShot:File = File.desktopDirectory;
				snapShot = snapShot.resolvePath("AIRSnapshot.jpg");
 
				var fStream:FileStream = new FileStream();
				fStream.open(snapShot, FileMode.WRITE);
 
			    var bitMapData:BitmapData = new BitmapData(htmlContent.width, htmlContent.height, false);
 
			    var encoder:JPGEncoder = new JPGEncoder(80);
				var rawBytes:ByteArray = encoder.encode(bitMapData);
 
			    fStream.writeBytes(rawBytes, 0, rawBytes.length);
			    fStream.close();
 
		    	Alert.show("Snapshot Saved to Desktop");
		 	}
 
		]]>
	</mx:Script>
 
		<mx:Button label="Take Snapshot" click="takeSnapShot()" color="#FFFFFF"/>
		<mx:HTML id="htmlContent" location="http://devote.your.life.auricom.com" width="100%" height="100%"/>
 
</mx:WindowedApplication>

Hit this link link download the source and try it out.

ian News

Maxis sent me an email tonight letting me know that my Spore API contest entry, SporeView, has won an honorable mention. I’m actually really relieved to have gotten some recognition because

1. I lost a lot of sleep making SporeView
2. The winning entries were, how do you say, lame

OK, they weren’t that bad. The Augmented reality app that won the competition is actually very cool despite being a little unpolished. It builds wireframe skeletons from the vector data available in the creature xml which is no doubt impressive. If the mesh data for the creature parts themselves were made available through a service then PaperVision 3D could have actually been used to build an accurate model of a creature. I looked into this when thinking up ideas but realized mesh data wasn’t available moved on (thinking that wireframe skeletons were just too plain to do Spore creatures any justice). I hate to say it but the augmented reality portion of this app is, well, a gimmick. AR is cool, but its being done to death right now. As a developer I see trends come and go so I just have to laugh a little at the AR craze. I hate to think that the AR portion of this really pushed it over the top since the wireframe rendering is the big accomplishment here. Regardless, big up to to Aaron Meyers and his Spore Skeltons app.

The second and third place winners were a non-asynchronous Javascript and Flash creature browser (I thought asynchronous web apps was just expected nowadays) and a .NET based desktop app that isn’t cross-platform and doesn’t warrant a desktop-app (plus building non cross-platform apps from web-services defeats the purpose of a service based API in my opinion). Not what I would expect out of a silver and a bronze.

I know I sound like a sore loser here. I really am happy to have gotten an honorable mention. I just build apps day in and day out so I have a lot of strong opinions about what makes an application actually good (being in Flex is always a good start!). In any event, much thanks to Maxis for putting on the competition and we’ll see if I can’t find the time to continue to add new features to SporeView.

ian News

Here’s something quick I wrote up for a friend. It allows you to embed SoundCloud audio files into forum posts. Just put the code into the header or footer of your forum. This was tested on ProBoards.com which appears to be a hack-up of vBulletin but it should work for the newer versions as well.

<script type="text/Javascript">
// SoundCloud UBBC for Posts by Ian McLean
 
var perPage = 20;
var ubbcURL = "http://a1.soundcloud.com/images/soundcloud-logo-simple.png";
 
// No need to edit
var aTD = document.getElementsByTagName("TD");
var curr = 0;
if(location.href.match(/action=display/i)){
    for(a=0;a<aTD.length && curr < perPage;a++){
        if(aTD[a].colSpan == 3 && aTD[a].vAlign == "top" && aTD[a].firstChild.nodeName.match(/^(#text|hr)$/i) && aTD[a].innerHTML.match(/\[sc\](.+?)\[\/sc\]/gi)){
            curr = curr+parseInt(aTD[a].innerHTML.match(/\[sc\](.+?)\[\/sc\]/gi).length);
            aTD[a].innerHTML = aTD[a].innerHTML.replace(/\[sc\](.+?)\[\/sc\]/gi,'<div style="font-size: 11px;"><object height="81" width="100%">  <param name="movie" value="http://player.soundcloud.com/player.swf?track=$1"></param>  <param name="allowscriptaccess" value="always"></param>  <param name="wmode" value="transparent"></param>  <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?track=$1" type="application/x-shockwave-flash" width="100%" wmode="transparent"> </embed> </object> <div style="padding-top: 5px;">');
        }
    }
} else if(document.postForm){
    if(location.href.match(/quote=/i)){
        var m = document.postForm.message;
        m.value = m.value.replace(/\[sc\].+?\[\/sc\]/gi,"");
    }
    if(document.postForm.color){
        var h = document.createElement("span");
        h.innerHTML = "<a href='javascript:add(\"[sc]\",\"[/sc]\");'><img src='"+ubbcURL+"' border='0' alt='SoundCloud' /></a>";
        document.postForm.color.parentNode.appendChild(h);
    }
}
</script>

Now use [sc]my track name[sc] in your forum post to include a SoundCloud file.

ian News

I wrote this lovely bit of code today whilst confused and frustrated working on a particularly messy command…and its just plain funny.

for(var i:int = 0; i < localSubSwfArray.length; i++){
 
		if( localSubSwfArray[i] is LocalFile){
			getDetailsArray.push(LocalFile(localSubSwfArray[i]).uri);
 
			 localFileArray.push(localSubSwfArray[i]);
 
			 localSubSwfArray.removeItemAt(i);
			 i--;
		}
               else panelForTransport.SubSWFs.addItem(localSubSwfArray[i]);
}

I needed to push items into a one array if they were of a particular type, otherwise add them to another array. Thing is I somehow saw it necessary to remove the item from the original array (with no real purpose), which screwed up the positions for the next iteration of the for loop. My fix? Throw a decrement in there to offset it! This actually works despite how unnecessarily confusing it is, it just wasn’t the right solution.

For all you project managers out there, this is a perfect example of why Agile suggest developers never code more than 6 hours a day. Fat chance that any of us will ever see that implemented, but I still like to mention it.

ian News, Projects

Alright, its time to unveil how I’ve been spending my evenings for the last couple weeks. The guys over at Maxis recently released the Spore API into the wild and are holding a competition for the best application. I decided to make an entry of my own, so here it is: SporeView

SporeView is a app built in Flex that allows you to browse the Spore universe outside of the game. You can browse assets, users, and view SporeCasts. Its also available as an AIR app that can be run from your desktop.

Admittedly I’ve played a rather small amount of Spore but I’m hoping to find the time to change that. After making this app and browsing some of the popular community creations I’m kind of inspired to make some of my own. Spore users have made some really incredible stuff using the creature creator that I didn’t think was possible. Hats off to you Spore community, keep up the good work. Hopefully I can join your ranks soon.

ian News