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

Word on the street is that Adobe is gathering feedback for the release of AIR 2.0. I think AIR is and was a great addition to the Flash platform. There following are things I feel AIR really needs to succeed as it continues to mature:

• Framework embedded executeables (think projectors)
• A fully customizable AIR installer for one click installs
• The option to use a third party installers
• C level extensibility
• Less branding

When I run and app it feels the most “real” and “professional” to when I’m unaware of its underlying technology. The average user doesn’t care what their app is built with, just that it works well and looks nice. Sadly AIR currently lacks transparency and I can’t give this experience with Flash. I would have to build an application in a low level languages or a scripting languages where apps can be distributed with an embedded runtime and then use a scriptable installer to make per platform distributables. Visually none of these technologies are as advanced as Flash and Flex, and they certainly aren’t as rapid when it come to development. This is all the more reason why AIR needs to be able to produce “real” applications.

The desire of developers who aren’t hard-core native application developers is to make traditional desktop apps using technologies that they’re already familiar with. They want to use non-traditional means, but still compete in the same marketplace as traditional app developers. The issue is that apps that are created using these technologies often lack transparency and are constant reminder that they aren’t truly traditional apps. In the case of AIR, the air specific installation process makes a clear distinction between and AIR app and a standard app. As a user the AIR managed installation process is quite unlike that of any other application you’ve ever installed. This sort of thing makes it very difficult for the user to suspend his/her disbelief that this is actually a real application (much in the same way that Photoshop or Word are real application).

The next issue is runtime distribution. Download an popular app, Firefox for example. Run the installer. At any point during this process were you asked to download and install yet another file in order to run it? No, and this is the experience that people have come to expect when installing something. Consequently this is the experience AIR (and others) should emulate. Having to explicitly download a runtime and wait through a framework specific installation process in order to use an app and two more steps than most non RIA enthusiasts are willing to take.

The need for C-level extensibility in an application framework is a pretty easy one to make. Any and all intensive calculations are better off-loaded to low level languages. Extensibility also allows for custom functionality beyond what the framework provides.

I certainly don’t seek to discredit AIR in its current form (at least not entirely). One click web installs makes deploying desktop apps that provide out-of-browser access to online services dead simple, and its cool. After all, Flex is a RIA technology so it was only natural that the current model of AIR was RIA centric. My hopes, however, are that the next steps for AIR will be more in the direction of a full fledged application framework.

ian Air

I’ve been taking some time over the last few days to upgrade wordpress and give the blog a new look. I also have a twitter plug-in installed now so everyone can have a portal into my often whimsical ramblings. So enjoy..or simply tolerate it.

ian News

I’m posting this up here for my fellow FIOS subscribers, although this could really also serve as an example to anyone trying to set up the proper port forwarding on their router despite the obvious difference in admin utilities.

The Verizon standard issue Actiontec MI42WR router can be rather problematic for the simple reason that its just not a great router. For those of you who aren’t on FIOS and might wonder why you would continue to use the router, it uses a technology called MoCa that allows set to boxes to get an IP over coax and consequently directory listings and on-demand content rely on this. There are of ways around this, which I’m willing to discuss with anyone who’s interested, but there a 99% chance that your FIOS is set up like I just mentioned.

First thing to note about Verizon is that the Actiontec is configured to use port 80 for remote administration. Even if you disable remote administration it doesn’t release the port. In fact the only way to release it is to actually change the the primary remote administration port something else regardless of whether its enabled or not. This is somewhat of a hassle to do. Thus, you really need to set your Rovio to a different port, or have an external port forwarded to port 80 on the Rovio if you want to have any hope of accessing it outside of your LAN. I’ll only demonstrate the former here. Secondary http (8080) its probably the most appropriate port for the job, but in my case I already have apache running on 8080 so I’ve just arbitrarily chosen to use port 5000.

Once you’ve gotten initial access to your Rovio’s web based control panel using its default 192.168.1.18 IP, open up the settings. They should look something like this.

Setting up a static IP is required in order to set up the port forwarding on the Actiontec router. I’ve chosen 192.168.200 here. You’ll also see that the Web Port is 5000 instead of 80. Again this can be any port of your choosing so long as it doesn’t conflict with another service that already listens on that port.

At this point put in your Rovio’s IP address (in this case, http://192.168.1.200:5000) to your web browser and test that its responding on the port of your selection. Currently IE 6.0 and up is the only browser that currently supports video as well as audio so this is what you need to test with. Most issues with audio and video not working in IE when connecting from outside of your network are port forwarding issues. If Rovio’s audio or video does not work over your LAN then there is probably an issue with the Rovio itself.

Now move over to your router. Unless you’ve changed it the Actiontec admin utility can be found at http://192.168.1.1 . Go into the firewall settings and select port forwarding. First you need to create an entry for the IP that Rovio is manually configured to use. Then set up the rules to look like exactly like this. Notice that we’re forwarding port 554 for the Rovio’s RTSP service to communicate on. This is required for video and audio to work in IE after you’ve installed the ActiveX control. Make sure you hit apply after each screen so the changes are committed.

Now, assuming that you’ve set up dynamic dns you should be able to connect to the Rovio from an outside network with no problem. While the dynamic dns settings on the Rovio are a nice feature this should really be set up on your router assuming it supports communicating with a DDNS. Alternatively you can download and run a DDNS auto updating utility and run it on a server or some machine that is frequently online. For instruction on setting up dynamic dns with the Actiontec router see this post.

ian News

Flash CS4 is upon us and Over to Lynda.com they already have “CS4 University” (yes, I kid you not) up and running . There’s a lot going around about the more prominent new features of the CS4 product line. As a develop I don’t spend much time in the Flash IDE (if you can call it that) but recently I’ve been using Flash CS4 on a project and so far the nicest thing I’ve come across is really the ability to modify the properties of an entire group of object in the Library. You just select the entire group and assuming that they’re of a like type such as an image then you can, for example, turn image smoothing on for a handful of items at a time or change the compression settings. Mind you, this was also possible before but it was a bit of a hidden feature. You would have had to select a single object and changed a property and then select a group of objects and use CTRL-Y. Not terribly inconvenient if you knew about it, but its nice to be able to do this in the Flash IDE now without a hack of sorts.

ian News

This actually relates back to something I did a while ago but I was thinking about it earlier today. As a rule there tends to be some confusion about the relationship of Flex to Flash and how they can live together in harmony…but I wont get into all that. What I will say is that there are a lot of features in Flash that are very useful to know about if you’re a Flex developer. Scale9 is one them.

If you’ve done any skinning in Flex using Flash then I’m sure you know that you can maintain an .fla with all of your skins as symbols in the library (provided the swf is as2/avm1 and you’ve provided a linkage identifier to export). The nice thing about vector skins of course is that they scale losslessly (if that’s an actual word) and if you have components that need to change in size this is key. Say an artist hands you a skin designed in a way that requires border style scaling; that is, a skin that can re-size while leaving its corners intact. If you’ve had a look at the halo theme’s programmatic border skins in Flex you’ll see code that does just this. What some might not realize is that Flash has the capability to do what is called “Scale9″ slicing which does something similar..and this can be used in Flex skins.

You enable Scale9 slicing in the properties panel of a symbol.

Once enabled then move the guides to the appropriate position for your graphic. Scale9 uses guides to define 9 boxes (3×3) for a symbol. The contents of the inner box get scaled. The contents of the outer boxes stay intact.

That’s it. Now when you use embed this symobol and use it as a skin in Flex it will keep the same behavior.

Let me note quickly that I’m using a frame-like graphic in the example here but that’s not to imply that this is an easy method to create border skins (the process of which is a bit different and requires creating a custom border class or creating a custom container with the Flex component kit for Flash CS3).

I should also mention that there does exist a method to define a Scale9 grid in directly in Flex, which I’m including for you glutton for punishment types.

 
Button
{
disabledSkin: Embed
   (source="images/Button_disabledSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
}

However, as you might guess this is very difficult to visualize so I really recommend using Flash here if you have it.

ian News

Fullscreen debugging in Flex Builder is one of those things that should work right out of the box – but doesn’t. This is because your html wrapper requires allowFullScreen=”true” be present in the object/embed tags for any SWF file that invokes fullscreen and, you guessed it, the default html wrapper generated by Flex Builder doesn’t include it. This means that whenever you debug an application and set your stage display state to fullscreen you’ll get the following security error.

SecurityError: Error #2152: Full screen mode is not allowed.

If you wanted you could make Flex Builder generate a fullscreen enabled html wrapper each time by editing the template wrappers directly in the SDK to allow fullscreen. Of course then you would need to edit it back in the case that you want to disable fullscreen from the wrapper level and, lets face it, editing files in an sdk directly is never good practice.

A better solution is to create a fullscreen enabled wrapper and create a custom debug profile in Flex Builder to launch it. You could use SWFObject and build a custom wrapper thats fully XHTML compliant, or you could do what I did and duplicate the default wrapper in place and add a few lines to enable fullscreen like this.

In order to create the custom debug profile go into your project properties, select “Run/Debug Settings” and click “New”.

Here I’ve created a new debug configuration named “Fullscreen”. Notice in the highlighted field I’ve changed the debug file to point to the fullscreen enabled wrapper that we’ve created. Make sure you save your configuration and the next time you click the debug icon you’ll see additional option for fullscreen debugging.

Thats it, now you’re able to debug an application in fullscreen.

ian News