The easiest way to imagine this working is to actually think of click events in javascript. Lets say you have a href link with an onClick event attached to it. Clicking this triggers some javascript to show a div somewhere in the page. To do this in javascript you might have some code like this

<a href="#" onClick="document.getElementById('box1').style.display='block'">Click Me</a>
<div id="box1" style="display:none;">test test</div>

Well this very same functionality is available using just the :target css and to great effect. Take this code below as an example, here we can do exactly the same as the javascript but now just with css.

<style type="text/css">
	#box1 {
		display:none;
	}
	#box1:target {
		display:block;
	}
</style>

<a href="#box1">Click Me</a>
<div id="box1">test test</div>

Of course there are the usual browser limitations but consider combining this with javascript as a fallback and you can have a more future proof native version of your code. Combine this with some of the css animation effects and you can have something that would easily fool others into thinking its made with javascript when in fact its css.

The physics engine has its own set of classes that seem to integrate or extend alternativa3D 8. This means that all the scene and camera creation is already done and you can just override the setScene() and then concentrate on handling of the physics and the rest of the code. Its setup is familiar to me and reminds me of the jiglib flash libraries so its quite easy to get up and running with.

The examples that come with the physics engine don’t actually show the loading of a 3d model and then applying physics to it but it is very simple task. Just load the .3ds file or .a3d file as you would as per the examples from the alternativa3d 8 library. Once its all loaded you setup a transform, a physical object and a collision area then add it to the scene.

override protected function setScene():void
{
	//add fps
	addChild(camera.diagram);

	//create and add light source
	var light:Light3D;
	light = new OmniLight(0xFFFFFF, 1, 7000);
	light.x = 0;
	light.y = 200;
	light.z = 1000;
	light.intensity = 0.8;
	addObject3D(light);
	light = new AmbientLight(0xFFFFFF);
	light.intensity = 0.2;
	addObject3D(light);

	//create a loader to load the pin
	var loader3DS:URLLoader = new URLLoader();
	loader3DS.dataFormat = URLLoaderDataFormat.BINARY;
	loader3DS.load(new URLRequest("pin.3ds"));
	loader3DS.addEventListener(Event.COMPLETE, on3DSLoad);
}

private function on3DSLoad(e:Event):void
{
	var parser:Parser3DS = new Parser3DS();
	parser.parse((e.target as URLLoader).data);
	var mesh:Mesh;
	for each (var object:Object3D in parser.objects) {
		if (object.name == "Mesh.007") {
			mesh = object as Mesh;
			break;
		}
	}
	uploadResources(mesh.getResources(false, Geometry));

	// Setup materials
	var textures:Vector. = new Vector.();
	for (var i:int = 0; i < mesh.numSurfaces; i++) {
		var surface:Surface = mesh.getSurface(i);
		var material:ParserMaterial = surface.material as ParserMaterial;
		if (material != null) {
			var diffuse:ExternalTextureResource = material.textures["diffuse"];
			if (diffuse != null) {
				diffuse.url = "" + diffuse.url;
				textures.push(diffuse);
				surface.material = new TextureMaterial(diffuse);
			}
		}
	}

	// Loading of textures
	var texturesLoader:TexturesLoader = new TexturesLoader(stage3d.context3D);
	texturesLoader.loadResources(textures);

	// setup loaded model in this case bowling pin
	var transform:Matrix4 = new Matrix4();
	transform.setPositionXYZ(0, 0, 1);
	var pin1:PhysicalSimObject = new DynamicObject(transform, new Vector3(0, 0, 2));
	pin1.addPhysicsPrimitive(
		new PhysicsPrimitive(new CollisionTriangleMesh(MeshUtils.createGeometryMeshFromMesh3d(mesh), CollisionType.DYNAMIC), 1)
	);
	pin1.addAppearanceComponent(mesh);
	addSimObject(pin1);
}

private function uploadResources(resources:Vector.):void {
	for each (var resource:Resource in resources) {
		resource.upload(stage3d.context3D);
	}
}

The boundaries for the collision are taken from the actual mesh this time instead of using a rectangle or other primitive shape. To do this we use the CollisionTriangleMesh and the meshutility to convert the mesh class to the accepted parameter class geometrymesh.

pin1.addPhysicsPrimitive(
	new PhysicsPrimitive(new CollisionTriangleMesh(MeshUtils.createGeometryMeshFromMesh3d(mesh), CollisionType.DYNAMIC), 1)
);

While this did work I had some issues with the bowling pins sinking through the floor I created. Its like the origin point for the mesh had changed once it was run through the meshutility. So to get the effect i wanted I switched it around and used a cone shape for collision.

pin1.addPhysicsPrimitive(
	new PhysicsPrimitive(new CollisionCone(0.1, 0.3, 3, CollisionType.DYNAMIC), 0.5)
);

You can download the files here or view it on the demo page here.

Original Intentions
The best way to explain the effect I was intending to recreate is to show you the original flash file. Which you can see as the last example on the demo page here. I have swapped the images out with a few of my own as I’m sure the original client wouldn’t be happy with me using her images here.

Each image when mousing over it will expand and contract the other regions to reveal more or less of the images in a fluid motion.

Stick to what you know
I’m a programmer at heart and much prefer working with something I can dig my teeth into like a programming language rather than a few animation options on a style sheet. So I decided i’d first create a jquery version of my slider as it would be a nice alternative if needed and a good way to get into the right mindset for me to work.

The second example on the demo page shows the results of this jquery animation.

I built this code straight into a jquery plugin, it is still basic and is setup to work with just 3 images however it a good base to expand on if needed. The code essentially uses the jquery animate function to resize and position links with the background images. This turned out quite well and was fairly fluid for me. There is no easing like my flash version but that can be added with the jquery easing plugin if needed but I was quite satisfied with it.

You can get the jquery plugin here or rip it from the demo page it also needs the following css and html setup to function

<div id="slider">
	<img src="img/4.jpg" alt="" />
	<img src="img/5.jpg" alt="" />
	<img src="img/6.jpg" alt="" />
</div>

#slider {
	overflow:hidden;
	width:493px;
	height:308px;
	position:relative;
}

$(document).ready(function(){
	$('#slider').imageReveal();
});

The css animation
Now on to the css. To make this work I decided to layer on top of each other the 3 images absolutely as again background images on links and then set their z-index. This created the starting position of the 3 images as I wanted.

The animation was the hardest part of this for me ashovering over an image but targeting the adjacent images to also move I found very tricky. This is easy when you hover over the first image as the other 2 images are adjacent to this but when you say hover over the last image you cannot select previous adjacent siblings. I couldn’t think of a particularly good solution to this so my work around was I used the pseudo selector ::after to insert the middle image again and animate this too. Again this doesn’t come with ease as animating created elements in css only works in firefox 4 and above.

So the final result works in firefox but is still quite buggy at best. Infact the css version without animation works better but obviously doesn’t have the nice fluidity of the other examples.

Here is the code for the css animated version

#cssslider {
	width:493px;
	height:308px;
	position:relative;
}

#cssslider a {
	position:absolute;
	display:block;
	width:164px;
	height:308px;
}

#cssslider a:nth-child(1) {
	left:0px;
	z-index:0;
}

#cssslider a:nth-child(2) {
	left:164px;
	z-index:1;
}

#cssslider a:nth-child(3) {
	left:328px;
	z-index:2;
}

/* First mouseover */
#cssslider a:nth-child(1):hover {
	z-index:3;
	animation: myfirst 1s;
	-moz-animation: myfirst 1s; /* Firefox */
	-webkit-animation: myfirst 1s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

#cssslider a:nth-child(1):hover ~ a:nth-child(2) {
	z-index:4;
	animation: myfirst2 1s;
	-moz-animation: myfirst2 1s; /* Firefox */
	-webkit-animation: myfirst2 1s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

/* second mouseover */
#cssslider a:nth-child(2):hover {
	z-index:3;
	animation: mysecond 1s;
	-moz-animation: mysecond 1s; /* Firefox */
	-webkit-animation: mysecond 1s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

/* third mouseover */
#cssslider a:nth-child(3):hover {
	z-index:3;
	animation: mythird 1s;
	-moz-animation: mythird 1s; /* Firefox */
	-webkit-animation: mythird 1s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

#cssslider a:nth-child(3):after {
	position:absolute;
	top:0px;
	left:-164px;
	bottom:0px;
	right:0px;
	border:0px solid red;
	content:" ";
	z-index:9999;
	background:url(img/5.jpg);
	width:164px;
	display:none;
}

#cssslider a:nth-child(3):hover:after {
	display:block;
	animation: mythird2 1s;
	-moz-animation: mythird2 1s; /* Firefox */
	-webkit-animation: mythird2 1s; /* Safari and Chrome */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

/* Animations */
@keyframes myfirst
{
	from { width:164px; }
	to { width:328px; }
}

@-moz-keyframes myfirst /* Firefox */
{
	from { width:164px; }
	to { width:328px; }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from { width:164px; }
	to { width:328px; }
}

@keyframes myfirst2
{
	from { width:164px; left:164px; }
	to { width:82px; left:328px; }
}

@-moz-keyframes myfirst2 /* Firefox */
{
	from { width:164px; left:164px; }
	to { width:82px; left:328px; }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
	from { width:164px; left:164px; }
	to { width:82px; left:328px; }
}

@keyframes mysecond
{
	from { width:164px; left:164px;}
	to { width:328px; left:82px; }
}

@-moz-keyframes mysecond /* Firefox */
{
	from { width:164px; left:164px;}
	to { width:328px; left:82px; }
}

@-webkit-keyframes mysecond /* Safari and Chrome */
{
	from { width:164px; left:164px;}
	to { width:328px; left:82px; }
}

@keyframes mythird
{
	from { width:164px; left:328px;}
	to { width:328px; left:164px; }
}

@-moz-keyframes mythird /* Firefox */
{
	from { width:164px; left:328px;}
	to { width:328px; left:164px; }
}

@-webkit-keyframes mythird /* Safari and Chrome */
{
	from { width:164px; left:328px;}
	to { width:328px; left:164px; }
}

@keyframes mythird2
{
	from { width:164px; left:-164px;}
	to { width:82px; left:-82px; }
}

@-moz-keyframes mythird2 /* Firefox */
{
	from { width:164px; left:-164px;}
	to { width:82px; left:-82px; }
}

@-webkit-keyframes mythird2 /* Safari and Chrome */
{
	from { width:164px; left:-164px;}
	to { width:82px; left:-82px; }
}

and the html

<div id="cssslider">
	<a href="#" style="background:url(img/4.jpg);"></a>
	<a href="#" style="background:url(img/5.jpg);"></a>
	<a href="#" style="background:url(img/6.jpg);"></a>
</div>

Prefetching DNS

If you aren’t familiar with dns this is the system in place that directs domain names to servers. All servers have an ip address and your domain points to an ip address. DNS keeps track of what ip address a domain points to before retrieving whatever it is.

When anything is loaded on a website your browser will actually take the domain name for example google.com and it will then do a dns lookup to find where this actually points to.

In html you can add in a meta tag that will actually prefetch the dns for a certain domain allowing you to speed up a follow on page that may make a call to that domain name.

You can do this like so

<link rel="dns-prefetch" href="http://ajax.googleapis.com" />

This will prefetch the dns for http://ajax.googleapis.com allowing this dns lookup to be skipped in subsequent calls to the url speeding up the loading of a page.

Content Prefetching

The next step up is content prefetching, this allows you to preload an entire page or element before it is actually needed.

For example this will preload my blog post on html5 reversed ordered lists so that if you were to visit that page it would load considerably faster having it load from the cache instead.

<link rel="prefetch" href="http://davidejones.com/blog/1151-html5-reversed-ordered-lists/" />

You can also load individual elements like images or stylesheets using the same syntax

<link rel="prefetch" href="http://davidejones.com/wp-content/themes/davidejones/img/logo.png" />
<link rel="prefetch" href="http://davidejones.com/style.css" />

So after playing around with the configuration and setting up a database I installed wordpress only to find that the hosting was running php4 and not 5 sigh…

I couldn’t see a way to switch the hosting to use php5 through the godaddy control panel it would be odd for godaddy not to support it though. So I read online a bit and discovered that both installations of php are on the server you just need to enable parsing of php5 in a .htaccess file.

So after adding the following to my html5 boilerplate htaccess file this allowed my wordpress installation to run the setup. Hopefully this will help you if you come across a similar situation with godaddy or another hosting provider.

AddType application/x-httpd-php5 .htm .html .php
AddHandler x-httpd-php5  .htm .html .php

Well with html5 buzzing around I recently discovered there is a new boolean attribute for the ol tag called reversed. This attribute tells the browser that the numbering or iterations for the list should be shown in descending order rather than the default ascending.

After giving this a spin I discovered that it only reverses the count not the actual elements in the list. Which is fine but i was kinda hoping there would be attributes for both the keys and the values similar to how something like array_reverse() works in php.

The new attribute is nice but I think I’d rather use some css over the html attribute in most instances. Here is how to do the same with css

<ol>
	<li>apples</li>
	<li>bannanas</li>
	<li>oranges</li>
</ol>

ol {
    list-style-type:none;
    counter-reset:item 4;
}
ol > li {
    counter-increment:item -1;
}
ol > li:before {
    content:counter(item) ". ";
}

and if you are actually trying to reverse the elements not the numbers you might want to try some jquery something like this

<ol class="reverse">
	<li>apples</li>
	<li>bannanas</li>
	<li>oranges</li>
</ol>

$(function(){
	$(".reverse").append($(".reverse li").get().reverse());
});

Check out the demo page here

I’m not sure about the current browser support for the reversed feature but i do know there are some polyfills out there such as this one for modernizr https://github.com/impressivewebs/HTML5-Reverse-Ordered-Lists

A common signature I use is to have a series of 5 or 6 images that just load randomly so i will have a different signature every time its loaded. To do this i create a php file called signature with the following code

<?php
//total number of images
$total = "5";
//image file extension
$file_type = ".png";
//folder relative to script that contains images
$image_folder = "images";
//images range from 1.png to 5.png so lets use 1
$start = "1";
//create a random number between 1 - 10
$random = mt_rand($start, $total);
//set image filename to the random image
$image_name = $random . $file_type;

//output header
header('Content-Type: image/png');
//output image
$image = imagecreatefrompng("$image_folder/$image_name");
imagepng($image);
imagedestroy($image);
?>

In the same folder as this script I create an images folder containing images numbered to 5 for example 1.png, 2.png, 3.png and so on.

With this done if you visit the php script in your browser it should just output a random image from that folder.

This works great but a unfortunately a lot of forums disallow php files and filenames in uploads and images for security reasons. One thing you can do to bypass this is to mask the php file to look like an image. This can be done using a .htaccess file to rewrite the image with the following code

RewriteEngine On
RewriteRule ^signature.png$ signature.php

This example I masked the signature.php file so that if you visit signature.png in your web browser it will infact show the output from the signature.php file. You can of course do the same with other image extensions just by switching the .png to .jpg for example. This is usually good enough to fool the forums into accepting your image.

Another possible workaround which I haven’t tried myself and wouldn’t recommend is to add the image type to be parsed by php. So you could rename your signature.php file to signature.png and then do something like this in a htaccess file

AddType application/x-httpd-php .php .png

Again this is at your own risk and you could be opening other files on your server to attack.

Ok so we have this setup but its still kinda boring, so something I like do with gaming signatures is add some statistics or images and text over the random image. Seen as we are using php this is a very simple task as long as you have the GD library installed with your php installation.

To add some info to our signature lets add a white bar with some text about ourself. So before the imagepng() line add the following php code

//setup some colours
$white = imagecolorallocate($image, 255, 255, 255);
$whitesemi  = imagecolorallocatealpha($image, 255, 255, 255, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$red = imagecolorallocate($image, 165,10,10);

//create our semi transparent white rectangle for text
imagefilledrectangle($image, 0, 0, 600, 20, $whitesemi);

//choose a default php font number 1 to 5
$font = 2;
//write out our text to the image using the font, colour and positions entered
imagestring($image, $font, 25, 4, 'Player Name: ', $black);
imagestring($image, $font, 100, 4, 'Invisible Man', $red);
imagestring($image, $font, 200, 4, 'Rank: ', $black);
imagestring($image, $font, 235, 4, '1', $red);
imagestring($image, $font, 260, 4, 'Points:', $black);
imagestring($image, $font, 305, 4, '999999',$red);
imagestring($image, $font, 360, 4, 'Kills:', $black);
imagestring($image, $font, 400, 4, '99999999999999', $red);
imagestring($image, $font, 500, 4, 'Deaths:', $black);
imagestring($image, $font, 550, 4, 'nevar!', $red);

//lets add an image over it too, create instance of image
$src = imagecreatefrompng('./images/flags/gb.png');
// Copy and merge images together
imagecopymerge($image, $src, 5, 5, 0, 0, 16, 11, 75);

Ok so this will create a pallete of colours that we are using by defining the rgb values we then create our shape using the imagefilledrectangle and our defined colour and then lastly we write on the image and merge in any other images we want.

Here is a final example of my team fortress 2 signature, I actually also added another image the tf2 logo to the bottom left of the signature, the code for this is in the final version below.

I tend to use a real live stats xml feed from hlstats or whatever game i like using the php library SimpleXMLElement to parse the data and put it into the text fields easily using code like $stats->kills. You can of course add all kinds of images change the text and use any feature of php to alter the signature however you desire.

Here is the full php code

//total number of images
$total = "5";
//image file extension
$file_type = ".png";
//folder relative to script that contains images
$image_folder = "images";
//images range from 1.png to 5.png so lets use 1
$start = "1";
//create a random number between 1 - 10
$random = mt_rand($start, $total);
//set image filename to the random image
$image_name = $random . $file_type;

//output header
header('Content-Type: image/png');
//output image
$image = imagecreatefrompng("$image_folder/$image_name");

//setup some colours
$white = imagecolorallocate($image, 255, 255, 255);
$whitesemi  = imagecolorallocatealpha($image, 255, 255, 255, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$red = imagecolorallocate($image, 165,10,10);

//create our semi transparent white rectangle for text
imagefilledrectangle($image, 0, 0, 600, 20, $whitesemi);

//choose a default php font number 1 to 5
$font = 2;
//write out our text to the image using the font, colour and positions entered
imagestring($image, $font, 25, 4, 'Player Name: ', $black);
imagestring($image, $font, 100, 4, 'Invisible Man', $red);
imagestring($image, $font, 200, 4, 'Rank: ', $black);
imagestring($image, $font, 235, 4, '1', $red);
imagestring($image, $font, 260, 4, 'Points:', $black);
imagestring($image, $font, 305, 4, '999999',$red);
imagestring($image, $font, 360, 4, 'Kills:', $black);
imagestring($image, $font, 400, 4, '99999999999999', $red);
imagestring($image, $font, 500, 4, 'Deaths:', $black);
imagestring($image, $font, 550, 4, 'nevar!', $red);

//lets add an image over it too, create instance of image
$src = imagecreatefrompng('./images/flags/gb.png');
// Copy and merge images together
imagecopymerge($image, $src, 5, 5, 0, 0, 16, 11, 75);

$src1 = imagecreatefrompng('./images/tf2.png');
imagecopymerge_alpha($image, $src1, 5, 280, 0, 0, 74, 15, 75);

imagepng($image);
imagedestroy($image);

If you are having any issues with the file not doing what it should be try commenting out the header(‘Content-Type: image/png’) to see any error outputs that may be causing problems.

Or if you are having issues visiting the image in your browser using an image extension like signature.png it may be that your webserver won’t allow the htaccess file to work.

You can download the files from this example here

First up i thought i would ease back in and just update my flash minecraft player to alternativa version 8.17 making use of the gpu support in flash player 11 and also trying out the new syntax and class changes. It turned out pretty well but I was a little disappointed at not being able to recreate the pixel like effect the textures have last time. For some reason in version 8 the textures are smoothed without a way to change it, perhaps its just a result of using the gpu I’m not sure, either way its still faster and using less resources than the previous version.

This time I separated the minecraft player into a separate “Player” class just so its a tiny bit cleaner.

Here is the Character.as class, note that the new version 8 is slightly different in that it calls upon the stage3d and uploads resources to it to make use of the gpu rendering i mentioned earlier.

package
{
	import alternativa.engine3d.controllers.SimpleObjectController;
	import alternativa.engine3d.core.Camera3D;
	import alternativa.engine3d.core.Object3D;
	import alternativa.engine3d.core.Resource;
	import alternativa.engine3d.resources.Geometry;
	import alternativa.engine3d.core.View;

	import flash.display.Stage3D;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.StageQuality;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.display.BitmapData;
	import flash.geom.Point;
	import flash.geom.Rectangle;

	import Player;

	[SWF(backgroundColor="#000000", frameRate="30", width="800", height="600")]

	public class Character extends Sprite
	{
		[Embed(source="char.png")] static private const CharSkin2:Class;

		private var scene:Object3D = new Object3D();
		private var camera:Camera3D;
		private var controller:SimpleObjectController;
		private var stage3D:Stage3D;
		private var player:Player;

		public function Character():void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			camera = new Camera3D(1, 1000);
			camera.view = new View(stage.stageWidth, stage.stageHeight, false, 0, 0, 4);
			addChild(camera.view);
			addChild(camera.diagram);

			camera.rotationX = -90*Math.PI/180;
			camera.y = -60;
			camera.z = 8;
			controller = new SimpleObjectController(stage, camera, 50);
			scene.addChild(camera);

			stage3D = stage.stage3Ds[0];
			stage3D.addEventListener(Event.CONTEXT3D_CREATE, onContextCreate);
			stage3D.requestContext3D();
		}

		private function onContextCreate(e:Event):void
		{
			stage3D.removeEventListener(Event.CONTEXT3D_CREATE, onContextCreate);

			addPlayer();

			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
			stage.addEventListener(Event.RESIZE, onResize);
		}

		private function addPlayer():void
		{
			player = new Player(new CharSkin2().bitmapData, stage3D);
			scene.addChild(player);
			uploadResources(player.getResources(true));

			/*
			for each (var resource:Resource in scene.getResources(true)) {
				resource.upload(stage3D.context3D);
			}
			*/
		}

		private function uploadResources(resources:Vector.):void {
			for each (var resource:Resource in resources) {
				resource.upload(stage3D.context3D);
			}
		}

		private function onEnterFrame(e:Event = null):void {
			controller.update();
			player.rotationZ -= 0.05;
			camera.render(stage3D);
		}

		private function onResize(e:Event = null):void {
			camera.view.width = stage.stageWidth;
			camera.view.height = stage.stageHeight;
			onEnterFrame();
		}
	}
}

Here is the Player.as class

package
{
	import alternativa.engine3d.core.Object3D;
	import alternativa.engine3d.objects.Surface;
	import alternativa.engine3d.primitives.Box;
	import alternativa.engine3d.materials.TextureMaterial;
	import alternativa.engine3d.materials.FillMaterial;
	import alternativa.engine3d.resources.BitmapTextureResource;

	import flash.display.Stage3D;
	import flash.display.BitmapData;
	import flash.geom.Point;
	import flash.geom.Rectangle;

	public class Player extends Object3D
	{
		private var stage3D:Stage3D;
		private var bmd:BitmapData;
		private var head:Box;
		private var headE:Box;
		private var body:Box;
		private var legL:Box;
		private var legR:Box;
		private var armL:Box;
		private var armR:Box;
		private var mat:FillMaterial = new FillMaterial(0xFF0000);

		public function Player(bmd:BitmapData,stage3D:Stage3D):void
		{
			this.bmd = bmd;
			this.stage3D = stage3D;

			// Create Head
			head = new Box(8, 8, 8, 1, 1, 1);
			head.z = 8;

			// Create Head Outer Box
			headE = new Box(8.9, 8.9, 8.9, 1, 1, 1);
			headE.z = 8;

			// Create Body
			body = new Box(8, 4, 12, 1, 1, 1);
			body.z = -2;

			// Create Left Leg
			legL = new Box(4, 4, 12, 1, 1, 1);
			legL.z = -14;
			legL.x = 2;

			// Create Right Leg
			legR = new Box(4, 4, 12, 1, 1, 1);
			legR.z = -14;
			legR.x = -2;

			// Create Left Arm
			armL = new Box(4, 4, 12, 1, 1, 1);
			armL.z = -2;
			armL.x = 6;

			// Create Right Arm
			armR = new Box(4, 4, 12, 1, 1, 1);
			armR.z = -2;
			armR.x = -6;

			//create, apply, upload textures
			createPlayerMaterials();

			// Add all body parts to the player object
			addChild(head);
			addChild(headE);
			addChild(body);
			addChild(legL);
			addChild(legR);
			addChild(armL);
			addChild(armR);
		}

		private function createPlayerMaterials():void
		{
			// HEAD

			var front_head_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(8, 8), 8, 8));
			var front_head:TextureMaterial = new TextureMaterial(front_head_res);
			head.addSurface(front_head, 12, 2);
			//head.geometry.upload(stage3D.context3D);
			//front_head_res.upload(stage3D.context3D);

			var back_head_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(24, 8), 8, 8));
			var back_head:TextureMaterial = new TextureMaterial(back_head_res);
			head.addSurface(back_head, 18, 2);

			var left_head_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(16, 8), 8, 8));
			var left_head:TextureMaterial = new TextureMaterial(left_head_res);
			head.addSurface(left_head, 24, 2);

			var right_head_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(0, 8), 8, 8));
			var right_head:TextureMaterial = new TextureMaterial(right_head_res);
			head.addSurface(right_head, 30, 2);

			var top_head_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(8, 0), 8, 8));
			var top_head:TextureMaterial = new TextureMaterial(top_head_res);
			head.addSurface(top_head, 6, 2);

			var bottom_head_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(16, 0), 8, 8));
			var bottom_head:TextureMaterial = new TextureMaterial(bottom_head_res);
			head.addSurface(bottom_head, 0, 2);

			// HEADE
			var front_heade_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(40, 8), 8, 8));
			var front_heade:TextureMaterial = new TextureMaterial(front_heade_res);
			headE.addSurface(front_head, 12, 2);

			var back_heade_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(56, 8), 8, 8));
			var back_heade:TextureMaterial = new TextureMaterial(back_heade_res);
			headE.addSurface(back_head, 18, 2);

			var left_heade_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(48, 8), 8, 8));
			var left_heade:TextureMaterial = new TextureMaterial(left_heade_res);
			headE.addSurface(left_head, 24, 2);

			var right_heade_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(32, 8), 8, 8));
			var right_heade:TextureMaterial = new TextureMaterial(right_heade_res);
			headE.addSurface(right_head, 30, 2);

			var top_heade_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(40, 0), 8, 8));
			var top_heade:TextureMaterial = new TextureMaterial(top_heade_res);
			headE.addSurface(top_head, 6, 2);

			var bottom_heade_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(48, 0), 8, 8));
			var bottom_heade:TextureMaterial = new TextureMaterial(bottom_heade_res);
			headE.addSurface(bottom_head, 0, 2);

			// BODY
			var front_body_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(20, 20), 8, 8)); //8 , 12
			var front_body:TextureMaterial = new TextureMaterial(front_body_res);
			body.addSurface(front_body, 12, 2);

			var back_body_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(32, 20), 8, 8)); // 8, 12
			var back_body:TextureMaterial = new TextureMaterial(back_body_res);
			body.addSurface(back_body, 18, 2);

			var left_body_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(29, 20), 4, 8)); // 4, 12
			var left_body:TextureMaterial = new TextureMaterial(left_body_res);
			body.addSurface(left_body, 24, 2);

			var right_body_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(16, 20), 4, 8)); // 4, 12
			var right_body:TextureMaterial = new TextureMaterial(right_body_res);
			body.addSurface(right_body, 30, 2);

			var top_body_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(20, 16), 8, 4)); // 8, 4
			var top_body:TextureMaterial = new TextureMaterial(top_body_res);
			body.addSurface(top_body, 6, 2);

			var bottom_body_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(28, 16), 8, 4)); // 8, 4
			var bottom_body:TextureMaterial = new TextureMaterial(bottom_body_res);
			body.addSurface(bottom_body, 0, 2);

			// LEGL
			var front_legL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(4, 20), 4, 8)); //4,12
			var front_legL:TextureMaterial = new TextureMaterial(front_legL_res);
			legL.addSurface(front_legL, 12, 2);

			var back_legL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(12, 20), 4, 8)); //4,12
			var back_legL:TextureMaterial = new TextureMaterial(back_legL_res);
			legL.addSurface(back_legL, 18, 2);

			var left_legL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(8, 20), 4, 8)); //4,12
			var left_legL:TextureMaterial = new TextureMaterial(left_legL_res);
			legL.addSurface(left_legL, 24, 2);

			var right_legL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(0, 20), 4, 8)); //4,12
			var right_legL:TextureMaterial = new TextureMaterial(right_legL_res);
			legL.addSurface(right_legL, 30, 2);

			var top_legL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(4, 16), 4, 4)); //4,4
			var top_legL:TextureMaterial = new TextureMaterial(top_legL_res);
			legL.addSurface(top_legL, 6, 2);

			var bottom_legL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(8, 16), 4, 4)); //4,4
			var bottom_legL:TextureMaterial = new TextureMaterial(bottom_legL_res);
			legL.addSurface(bottom_legL, 0, 2);

			// LEGR
			var front_legR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(4, 20), 4, 8)); //4,12
			var front_legR:TextureMaterial = new TextureMaterial(front_legR_res);
			legR.addSurface(front_legR, 12, 2);

			var back_legR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(12, 20), 4, 8)); //4,12
			var back_legR:TextureMaterial = new TextureMaterial(back_legR_res);
			legR.addSurface(back_legR, 18, 2);

			var left_legR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(0, 20), 4, 8)); //4,12
			var left_legR:TextureMaterial = new TextureMaterial(left_legR_res);
			legR.addSurface(left_legR, 24, 2);

			var right_legR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(0, 20), 4, 8)); //4,12
			var right_legR:TextureMaterial = new TextureMaterial(right_legR_res);
			legR.addSurface(right_legR, 30, 2);

			var top_legR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(4, 16), 4, 4)); //4,4
			var top_legR:TextureMaterial = new TextureMaterial(top_legR_res);
			legR.addSurface(top_legR, 6, 2);

			var bottom_legR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(8, 16), 4, 4)); //4,4
			var bottom_legR:TextureMaterial = new TextureMaterial(bottom_legR_res);
			legR.addSurface(bottom_legR, 0, 2);

			// ARML
			var front_armL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(44, 20), 4, 8)); //4,12
			var front_armL:TextureMaterial = new TextureMaterial(front_armL_res);
			armL.addSurface(front_armL, 12, 2);

			var back_armL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(52, 20), 4, 8)); //4,12
			var back_armL:TextureMaterial = new TextureMaterial(back_armL_res);
			armL.addSurface(back_armL, 18, 2);

			var left_armL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(48, 20), 4, 8)); //4,12
			var left_armL:TextureMaterial = new TextureMaterial(left_armL_res);
			armL.addSurface(left_armL, 24, 2);

			var right_armL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(40, 20), 4, 8)); //4,12
			var right_armL:TextureMaterial = new TextureMaterial(right_armL_res);
			armL.addSurface(right_armL, 30, 2);

			var top_armL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(44, 16), 4, 4)); //4,4
			var top_armL:TextureMaterial = new TextureMaterial(top_armL_res);
			armL.addSurface(top_armL, 6, 2);

			var bottom_armL_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(48, 16), 4, 4)); //4,4
			var bottom_armL:TextureMaterial = new TextureMaterial(bottom_armL_res);
			armL.addSurface(bottom_armL, 0, 2);

			//ARMR
			var front_armR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(44, 20), 4, 8)); //4,12
			var front_armR:TextureMaterial = new TextureMaterial(front_armR_res);
			armR.addSurface(front_armR, 12, 2);

			var back_armR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(52, 20), 4, 8)); //4,12
			var back_armR:TextureMaterial = new TextureMaterial(back_armR_res);
			armR.addSurface(back_armR, 18, 2);

			var left_armR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(40, 20), 4, 8)); //4,12
			var left_armR:TextureMaterial = new TextureMaterial(left_armR_res);
			armR.addSurface(left_armR, 24, 2);

			var right_armR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(48, 20), 4, 8)); //4,12
			var right_armR:TextureMaterial = new TextureMaterial(right_armR_res);
			armR.addSurface(right_armR, 30, 2);

			var top_armR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(44, 16), 4, 4)); //4,4
			var top_armR:TextureMaterial = new TextureMaterial(top_armR_res);
			armR.addSurface(top_armR, 6, 2);

			var bottom_armR_res:BitmapTextureResource = new BitmapTextureResource(cropBitmapData(bmd, new Point(48, 16), 4, 4)); //4,4
			var bottom_armR:TextureMaterial = new TextureMaterial(bottom_armR_res);
			armR.addSurface(bottom_armR, 0, 2);
		}

		private function cropBitmapData(sourceBitmapData:BitmapData, startPoint:Point, width:Number, height:Number):BitmapData
        {
            var croppedBD:BitmapData = new BitmapData(width, height, true);
            croppedBD.copyPixels(sourceBitmapData, new Rectangle(startPoint.x, startPoint.y, width, height), new Point(0, 0));
            return croppedBD.clone();
            croppedBD.dispose();
		}
	}
}

You can download the files here, or view the demo here.

Also make sure to download the alternativa3d 8.17.0 swc library from alternativaplatform.com to make use of the download files.

Could we do it? yes, but did we need to? definitely not.

Just a few days ago I discovered that webkit introduced the capability to style scroll bars back in around 2009. I wasn’t aware of this addition until recently but part of me thinks actually it’s a good thing that i didn’t know. The reason being that no one else is using it or at least i haven’t noticed it on any sites. Which brings me back to my point just because we can do it doesn’t mean we should.

At the very least if you are going to do it then i think you should have a good reason to do so. Why? because our browsers, its interface, its widgets and website buttons, links and other interactive features need to be intuitive we need to know that a scrollbar is a scrollbar and that a checkbox is a checkbox they need to be recognizable for the sake of usability. There is nothing wrong with changing these but there should be a good reason to do so and it shouldn’t compromise the users ability to use a website.

Here is how you can do it with webkit just don’t bring back the hellish colour schemes from the early internet explorer days for the sake of my eyes.

To style the scrollbar in a webkit browser try using these webkit vendor prefixed selectors.

-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer

Heres a simple example of using these on the view port of a page (the main browser scrollbar)

::-webkit-scrollbar {
	background:#978139;
}
::-webkit-scrollbar-thumb {
	background:#473a0d;
	border-top:1px solid #dec470;
	border-bottom:1px solid #dec470;
}

If you are looking for more variety and different combinations take a look at the webkit tracker for some examples.

There are of course javascript implimentations to allow you to style your scrollbars in the browsers that don’t support this. Try taking a look at jScrollPane or some of scrollbar plugins here.

So i thought I’d post a quick few tips to help you troubleshoot the problems and let you have your pie and eat it.

No matter what PIE.htc has no effect in ie?

First of all check that the file is even being downloaded, alright I’m sure this is pretty obvious but you’d be surprised how many times you can overlook the simple things. You can check its there by using the internet explorer developer tools. Hit F12 on your keyboard and a dialog box will open click the network tab and start capturing and then refresh the page you should see all the assets that the website downloads. Any that aren’t available should show up with a 404 marked in red. Check that PIE.htc is even listed and that its being downloaded and check the path its loading from.

Its not being downloaded

This one has always confused me but the url used in the behaviour is not relative to the css file its relative to the html document being loaded.

So for instance you might normally reference an image like this where you have your css in a folder and you want to go back a directory and then into the img directory to find the background.jpg.

#test {
   background-image:url(../img/background.jpg);
}

However if you are using a behaviour doing something like above will not work. Instead I find it best to put the behaviour in the root of the website. So its located at http://www.mywebsite.com/PIE.htc and then tell the css url to be /PIE.htc or just PIE.htc

#test {
   behavior:url(/PIE.htc);
}

#test2 {
   behavior:url(PIE.htc);
}

Ok its there and being downloaded but still its having no effect

If it is being loaded but still seems to be having no effect you might want to create a .htaccess file for your website with the following

AddType text/x-component   htc

Recently a web server i was using was requesting the PIE.htc file as text/html which caused it not to work. Adding the line above to a htaccess file forced the mimetype of the .htc file to be text/x-component which allows it to execute.

If for some reason this also does not work i believe css3 pie now also comes with a php file that will help serve the file up with the right headers. Check the download files for PIE.php and you should use it just like the htc file

#test {
   behavior:url(PIE.php);
}