I failed to find an AMF library for Node, and I’m not hugely surprised; Flash is rather out of favour with today’s JavaScript gurus. Secretly pleased that I couldn’t find anything, I set about writing my own. It is also the first time I’ve put an open source project on Github.

See node-amf on Github

The current state of node-amf is that it’s not ready for production. I am experiencing errors in the pack and unpack functions which are taken from the excellent php.js project. I hope to hear from the authors to rectify this.

[UPDATE] Now using this BinaryParser class instead of the pack/unpack functions.

The examples in the Git repository are for a simple HTTP gateway – This is the standard way you’d use AMF to talk to PHP, for example. The next step is to see if it’s possible to work with persistent sockets carrying AMF packets. That could be pretty cool.

Download version 0.2 for Drupal 6:  opengraph-6.x-0.2

What?

If you don’t know what the Open Graph is, a crude way of explaining it could be “Facebook’s take on the semantic web”. Marking up your web pages with specific meta tags allows Facebook to extract meaning as to what the pages represent. i.e what they mean in terms of real-life entities; for example a movie, or a landmark or a politician. This means when a visitor to your site likes something (via the ubiquitous like button) contextual data including a neat thumbnail image is made available to the Facebook page that gets created by the action. It also allows you to claim the Facebook page by adding your Facebook user IDs to the markup.

For more information on the Open Graph Protocol, see opengraphprotocol.org

The module

See the README file for full information, but in short:

1. Install and enable it (it’s grouped into the ‘Facebook’ section)
2. Go to the settings page at admin/content/opengraph
   • Configure site defaults
   • Map node content types to Open Graph object types
3. On the edit screen for any type-enabled nodes you can override the default meta data
4. Add the basic like button block to test it out, or just add your own social plugins

Note: I would like to contribute this to the Drupal module directory, but this is a very early version and I don’t currently have CVS access. Lets see if you like it first.

This is a tech demo of Unity that was created over the weekend to overcome some of the challenges that might arise when working on commercial Unity work. Initially it was created as a one off, but after finding and solving quite a few problems, I thought it might be nice to share my solutions to some of these problems as I develop the project in my spare time.

Controls: Up & Down (or W & S) to raise or lower the spinner, scroller adjusts spinning speed, and Space Bar to release the ball.

Please view the full post to see the Unity content.

Moving skyboxes = multiple cameras.

One of the fastest things to set up is a simple skybox. It creates a visually pleasing backdrop and can add a lot to a game. After looking at a static skybox for a long time, it can get a bit “samey”. A quick look on the official forums and people were suggesting using multiple camera and setting up combinations of Clear Flags and Culling Masks. That’s all pretty easy to sort out, add another camera, I chose to make it a child of my main camera, and set its Clear Flags to “Skybox” and Culling mask to “Nothing”. Setting the main camera Clear Flags to “DepthOnly” and its Culling Mask to “Everything” gave me the correct result in each camera, just the skybox through the child and everything else with a blank area for the Skybox to sit. The problem was the child rendering the skybox on top of everything, the solution?

skyCamera.camera.depth = 1;
mainCamera.camera.depth = 2;

Setting the camera depth property programmatically solved the issue. So now the skybox is rendered through a different camera, it’s free to rotate slowly and give you a dynamic backdrop.

Scripted Joints.

An annoying problem with a very simple solution! I wanted the chain to be made out of a varying number of links, so I could create short and long ones out of the same code. Another self-imposed requirement was making something useable out of the physics components. So, dynamic joints and rigidbodies were the order of the day. After messing about with the properties of configurable joints, I couldn’t understand why none of them had any discernable affect on my rigidbodies. One of those classic palm-to-forehead moments ensued when I realised you need to set the connected rigidbody AFTER setting all the variables!

//Set all variables, then:
cJoint.connectedBody = myChild.transform.rigidbody;

These were two of the “little things” that caused me frustration, if my solutions solved either of the problems for you, I hope you found this post sooner rather than later!

Check back for more problem based solutions as I develop the project further. If there’s any interest, I’ll post the project source code after each project step. Enjoy!

To be honest, it all seemed terribly false. The Vodafone keynote was delivered by Rick Fant, ‘Head of Internet Discovery’ (which apparently means being in charge of the ‘development and deployment of consumer and developer services associated with internet enabled applications). I heard a lot about Vodafone’s vision of a ‘unified app store’, and their ‘Vodafone 360′ effort. It’s unfortunate then, that in less than a week after telling the conference attendees Vodafone was committed to a single, carrier based App Store they decided to start carrying the iPhone in the UK. Which won’t be part of their unified app service. And yet will probably be their biggest selling smartphone.

In fact, throughout the conference the iPhone was a big, hulking presence that nobody wanted to really talk about. “There are other devices out there”, was the mantra, “…the iPhone isn’t everything”. This is true – but shortsighted. It’s not about the hardware. It’s about the software. Consider this – the iPhone may only have a fraction of the overall cell phone market share, but the iPod dominates all competing portable media players. 40% of all iPhone OS devices are iPod based.

There’s a huge market for iPhone OS based software outside of the cellular arena…a market that mobile networks can’t penetrate. No other mobile OS can hope to achieve this – Android may be readily available for non-mobile devices, but no Android media player can hope to make significant inroads against the iPod’s Walkman-like position as the de-facto playback device. Furthermore, iPhone and iPod users are used to certain UI paradigms and conventions. Developers who attempt to code for multiple devices and platforms using ‘widgets’ won’t break into iPhone territory, because their apps simply won’t take advantage of what users expect and demand from their apps.

We can ignore the iPhone at conferences like OTA, and we can pretend that carrier-operated ‘global app stores’ and widgets are the future of mobile development…but in the end, Apple’s still left getting revenue from their devices, revenue from app sales, and in many cases a cut of customer’s monthly contract fees. The mobile market is at a similar point to the early PC market – many, fragmented, and competing platforms and devices. We can try to code for all of them, but it seems certain that at some point devices one platform is going to break forward and become the de-facto standard of choice.

Put it this way – the iPod was introduced in 2001. Many people thought it a useless device that would sell very little.  It took three, maybe four years until it really started to make a major impact with the Mini and new generation iPod models. We’re only two years into the iPhone OS platform, and already it rivals Blackberry in terms of users. Pushing widgets as the technology of the future for mobile development is surely unwise when we consider the future potential for the iPhone platform.

This is a post about the new HTML5 canvas element. If you could indulge me while I reminisce when I was a student completing a Diploma in Digital Media for a moment. Our first ever Actionscript based project was to create an interactive application that an artist of the past, who did not live in the digital age, would have made if they did live in these times and had Flash as a tool. I choose Len Lye, an experimental New Zealand artist that is famous for his kinetic sculptures and experimental film techniques.

I remember the joy, writing AS2 using Flash 7, of being able to freely create and experiment with code and interaction without any concern for technical detail or expectation other than it worked, ran at an OK frame rate and looked cool.

Those carefree days quickly disappeared as I left the comfort of my Diploma and entered the real world. Since then it’s been a non-stop learning curve keeping up with technology, expectations and tight deadlines.

If you would like to cut to the chase and have a play with my canvas experement click on the image below, or click on the keep reading link.

Recently

Which brings us to today, when one of the most exciting developments on the web of late in my opinion, has been the evolution of JavaScript from a tool for form validation to a fully blown interactive scripting language for the web. This is helped in no small part by the continuing evolution of great JavaScript libraries like jQuery, MooTools, Prototype and many more and the amazing speed at which modern browsers execute JavaScript enabling fully blown interactive web apps built with not a line of Actionscript in sight.

Even more exciting is the speed at which modern browsers open source browsers are integrating HTML5 specifications bringing us many exciting tools. Like application cache that give the ability to run web apps when not connected to the web. Web workers that enable coders to separate out heavy lifting code to a separate thread on the user’s computer so as not to interfere with the user experience. Geolocation that, with the users permission, use a devices GPS to let the web app know where a user is and many more exciting propositions.

Satisfaction

However the new HTML5 feature that I’ve been paying with most is the new canvas element that enables you to draw in the browser with code, literally like a canvas. Much like Actionscript’s drawing API lets you draw to the stage.

Why I love this feature and playing with its possibilities so much is that it reminds me of those days I described above when I first discovered the creative potential of Actionscript and Flash. Obviously canvas doesn’t have anywhere near the feature set that AS3 does today, but this in itself is the attraction to me. Limited but useful features breeds creativity as developers push what’s possible to produce some pretty neat eye candy. It’s that feeling of playing with something new, where there are no conventions, expectations or standards just yet. Take a look at chromeexperements to see some great examples of what people have come up with using canvas & svg.

Obviously the canvas elements role on the web will evolve from something new to play with to something very useful. For example, nice font replacement with tools such as cufon. However its widespread adoption may be held up by Microsoft’s reluctance to implement in Internet Explorer, no doubt to protect the future of their multimedia plugin Silverlight. Microsoft’s VML in IE browsers can be hacked to offer similar features to canvas and projects like explorercanvas http://code.google.com/p/explorercanvas/ should help to exploit this.

My Experiment.

Anyhow, my experiment with canvas didn’t start out as an idea or concept, rather it evolved from playing around and seeing where it ended up. It’s nothing revolutionary or amazing, but was fun to build and play with and demonstrates just some of the potential of the canvas element.

You can upload an image, or choose an existing one. This source image is used to determine the colours that are painted on the canvas element as you draw. Or you can let the application paint for you by pushing the start button. Have a play with the parameters and then you can save the canvas you’ve created to your computer using the toDataURL method. Click here to launch the application. View source if you want to check out what’s going on.

It takes far more skill and knowledge to build good, useable websites than it does to make sure that keywords/links are forced into places where they are not comfortable.

Forcing SEO can also be a distraction for a designer, when SEO is sold it can result in the designer being forced to add elements to a page that that suddenly become out of context, this could result in an unhappy designer who’s time could be better spent making the site user friendly.

There is also an argument to suggest that fully optimising a site for search can affect the user’s experience due to additional content that could possibly deemed as confusing to the user, and also taking up space on the page that would have been better holding a more functional feature such as a search box itself.

For me it is simple, if you want to pay for SEO then pay for sponsored links, otherwise spend extra money on a well thought out site, built and designed by a team who build and design sites properly.

Here perlin noise is used as the source for moving vertices of a mesh according to colour values.

(Please open the article to see the flash file or player.)

source

You can define any stage instances within the asset as public variables in the defining class. This will mean everything is strongly typed and nice and tidy. Just make sure “Automatically declare stage instances” is turned off in your ActionScript 3 settings. It’s probably easiest if I show you what I mean.

package com.publicreative.assets 
{
	import flash.display.MovieClip;
	import flash.text.TextField;
 
       // In the assets.fla library you set the linkage class to the symbol definition here
	[Embed(source="/assets.swf", symbol="DemoTextField")]
	public class DemoTextField extends MovieClip
	{
               // there is a textfield on the stage with this instance name
		public var field_txt:TextField;
		public function DemoTextField() 
		{
		}
	}
}

So now when you want a new DemoTextField… you just need to go.

import com.publicreative.assets.DemoTextField;
var _demoTF:DemoTextField = new DemoTextField();
_demoTF.field_txt.text = “some text”;

You can have as many asset classes as you need all published from the same .fla file. Clearly this will get out of hand on a larger project and when assets need to be loaded dynamically. But on smaller projects I think this is an excellent tool to use.

None of them have ever really caught my attention enough to feel like I should invest time mastering it.

Enter testing out PureMVC. Obviously this is one of the heavyweights of open source frameworks. I’ve had passing looks at it in the past but never really got into it so thought I’d put together a basic twitter app to give it a go.

The following application simply searches Twitter for the terms “creative”,”inspired”,”amazing” and “bored”,”frustrated”,”stressed” then compares the two sets of positive and negative emotions in a graph to see how inspired the world is feeling at any point in time.

(Please open the article to see the flash file or player.)

PureMVC does have a quite steep learning curve and just getting to the “Hello World” state does take quite a lot of code. But things are really starting to make sense and I feel like a more mature developer by using it as I can see how much this framework naturally encourages code re-use, scalability and separation of interests.

In my opinion the most important thing is getting your head around the roles and responsibilities of the Mediator, Proxy and Command classes. My understanding of each is as follows.

Proxy classes are cached by the Model and contain code that manipulates a portion of data. Each Proxy represents a data object that may be asynchronous or not and can expose all or part of the data object it represents.

Mediator classes interact with view components and are cached by the View. The Mediator classes interact with the rest of the system to update and respond to interaction to and from the view component it represents.

Commands are only created when needed and is where the logic of the application resides. You create maps to notifications in the Application Facade. When a notification is sent from somewhere in the system that is mapped, a Command instance is created and executed interacting with other actors in the system and sending further notifications as necessary. It can for instance interact with multiple Proxy classes manipulating data in each and send a notification when complete that multiple Mediators are listening to, updating their respective view components as required.

As this is my first experience using PureMVC, any feedback would be most welcome.

Apart from PureMVC there are a number of open source projects that I use and encourage you to investigate if you don’t use them already including:
Bulkloader for loading my external assets.
TweenLite for tweening.
DeMonsterDebugger for debugging (this is awesome!)
Twitterscript for Twitter API interface.

And here is the source.

The site was made for K-Swiss and MTV to promote the K-Swiss Classic Remastered trainer. Users have the opportunity to customise their Classic by expressing their creativity using paint, graphics and uploading images not to mention adding chains, diamonds and/or studs to their shoe.

Designs are applied to the shoe (a Collada model rendered with Papervision, created in Maya) in real time. Users can continue to edit the shoe until they are happy with it and then submit the shoe to the competition and gallery when both the texture and a thumbnail of the designed shoe are saved.

There were many challenges and many (very) late nights but well worth it as the end result has proven to be extremely popular. Below is a high level overview of the site in relation to the functionality of the Shoe.

Creating the model and applying materials.

The shoe model and the additions you can add to it (the chains and the studs) were created in Maya and exported as Collada files using the Collada plugin. The chains and studs are separate Collada files with individual textures that are mapped to each of them. These are added as children to the main shoe DAE.

Most people reading this will probably be aware that when you export a Collada file from Maya (or Max) that you want to use with Papervision you need a Collada (.dae) file and the texture/material image that has been mapped to that model.

The trick is getting this material image to map correctly to the model in Papervision. To do this you need to know where to look.

With a Collada file exported from Maya I found you need to search the Collada file for the triangles node.

Here it is in our Collada file.

triangles material="a_Backed_Shoe2SG" count="1958"

You need the name of the material, in our case “a_Backed_Shoe2SG”.

Then when you are creating the MaterialsList to use with the DAE in Papervision you pass it this name.

// create a BitmapMaterial instance using the BitmapData from the loaded texture image.
_shoeMaterial = new BitmapMaterial(_loader.getBitmapData(_shoeTexture));
// create a new materials list. Pass it the bitmap material and give it the name we found in the Collada file from the triangles node.		 
_materialsList = new MaterialsList(); _materialsList.addMaterial( _shoeMaterial , "a_Backed_Shoe2SG");
// the shoeDae is an instance of a DAE class and is passed the loaded DAE file in binary form and the materials list we created above.
_shoeDae.load(_loader.getBinary("shoe_model") ,_materialsList);
 
// the DAE is then added to the Papervision scene
scene.addChild(_shoeDae);

NB: _loader is an instance of the Bulk Loader class. You can check out this library here.

Swapping textures at runtime.

To swap the material at runtime which obviously happens often I made a setter function on the Shoe class.

public function set material( material:BitmapData):void {
        // if the shoe material exists, dispose of the bitmap
	if (_shoeMaterial) _shoeMaterial.bitmap.dispose();
	// make a new bitmap material
	_shoeMaterial = new BitmapMaterial( material );
	// replace the material using the name that we found in the Collada  file above
	_shoeDae.replaceMaterialByName( _shoeMaterial , "a_Backed_Shoe2SG);
}

One of the trickiest challenges was turning the area of the shoe the user was editing into the BitmapData to pass to this function and use as the new material for the shoe.

In brief the recipe for this was:
1. Grab a copy of the current shoe material with everything the user has already created on it. This is a 1600×1600 Bitmap.
2. Create a holder sprite to build the new image in. Add this current shoe material as the bottom layer.
3. Grab a copy of the original material, a clean canvas with nothing on it.
4. Mask the original material with the exact shape of the area the user is editing. This mask needs to be rotated, scaled and translated to the correct position on the original material. Layer this on top of the current shoe material.
5. So now the resulting image should show everything the user has added to the rest of the texture but the current area they are editing will be clear.
6. Grab the BitmapData from the area of the shoe the user is currently editing with all the graphics etc the user has added.
7. Again mask this so that graphics that go outside the editable area are not going to be included on the final image.
8. Layer this on top, rotating, scaling and translating as necessary with a Multiply blend mode so the stitching comes through from the original texture.
9. BitmapData.draw the resulting holder sprite with these layers on it and pass to the material function above to swap out the material.

Everything is easier to understand in pictures so here it is:

Here is the original shoe material:

And here it is an example of what it looks like once edited:

Preformance and Rendering

Other things to consider were balancing performance with quality. We tried to keep the polygons on the shoe model as low as possible before it really became noticeable and keep the quality of the material image high.

When both the chains and the studs are added, as these are additional models the polygon count goes up considerably so we really tried hard to keep this as low as possible. When flash is asked to render anything over 3000 triangles, it really starts to show.

Additional to that we had problems with Z-Sorting due to the many overlapping parts of the shoe, especially around the laces. To solve this we needed to employ the services of the QuadrantRenderEngine with the Z sorting filter. However, as there are more calculations with every render, this slowed things down even more.

To use this advanced render engine, and keep the polygon count high while not affecting performance we made it so instead of constantly rendering, the Papervision scene was only updated when needed, i.e. when rotated or the texture has been changed.

Saving the entries.

A major part of this campaign is the competition. Every shoe designed and submitted needs to be saved for the gallery and judging.

To do this there are two main things that are needed. The main texture of the shoe, the 1600×1600 jpg that holds the users design and the small thumbnail of the shoe with the design in place for use in the gallery.

The main texture of the shoe is always present in the current BitmapMaterial of the shoe. We just get it out using the BitmapMaterial.bitmap property.

Capturing the thumbnail is a little more involved. First we needed to rotate the shoe to the correct position so that all thumbnails are in the same position. Then we do a BitmapData.draw of the viewport after doing a bit of Matrix scaling and translating.

So we now have the two BitmapData objects for the two images, we just need to save them to the server along with the rest of the users entry details. To save the images we encode the images with Adobes JPGEncoder class (for the big texture) and the PNGEncoder (for the thumbnail). These are both available in the corelib.

Next we encode the resulting ByteArrays with the Base64 encoder. You can grab this from Dynamic Flash.

Code for saving the main image.

// the bitmap data for the current shoe material
var imageBd:BitmapData = Shoe2.getInstance().shoeMaterial.bitmap; imageBd = Shoe2.getInstance().shoeMaterial.bitmap;
// the jpg encoder and the resulting ByteArray
var j:JPGEncoder = new JPGEncoder(50); 
var bytes:ByteArray = j.encode( imageBd); bytes.position = 0; 
// Encoding to Base64 and saving as part of the entry data object.
entryData.texture_image = Base64.encodeByteArray(bytes);

The whole package containing the users entry data along with the Base64 encoded images are sent to our custom PHP backend in one tidy package via AMFPHP.

The obvious final step is PHP decoding the base64 images and saving them to disk storing the resultant URL with the rest of the entry data.

Summary.

As I warned at the start of this post, the above is only a very brief overview of how things were done. There was so much more to this than just the shoe but obviously this was the focus and main technical challenge of the site. Any feedback, questions or requests for further detail are obviously welcomed.