21 Aug 2009 : Cog animation
This cigarette crushing device forms part of an anti-smoking site for Pfizer. Animating the cogs conventionally proved impossible as there is no point where you can loop the animation and have the cog textures match up, they had to be animated using a tween engine(TweenLite). The initial problem was to ensure the cogs rotated at the correct speeds to 'mesh' as they would on a real machine. This is achieved by counting the number of teeth on each cog to work out the gear ratios. In the case of this animation I decided I wanted to rotate each cog 100 times and using the gear ratios I could work out the time it would take each cog to complete its rotations, and hence everthing stays in sync. Adding the cigarettes posed the usual set of problems when integrating timeline animation with actionscript animation, but it worked out well in the end.
15 May 2009 : Optimising rollovers in sIFR 3
15 June 2009 : Update, of course there's an easier way to do it :)
sIFR.replace(avantgarde, {
selector: '#centralpanel h2'
,css: [
'.sIFR-root { text-align: left; color: #161616; letter-spacing:-0.3;}'
], wmode: 'transparent'
,sharpness: -30
,thickness: -100
});
sIFR's a great solution for displaying non web-safe typefaces, but I have a couple of minor annoyances with it. Firstly sIFR 3 takes a lot more tweaking than previous versions to get up and running correctly, and its important to do it right otherwise you get, amongst other things, a brief flash of the replaced text which looks pretty clunky. All this is solved by a bit of hard work but one thing I couldn't fix is what happens on rollover which is illustrated below. The text field has customised aliasing on it, when its black the weight is fine, but on rollover (when it goes to an off white #e7e2f2) the aliasing makes the font look heavier. Urrgh ugly!
The only way I've found to solve it is to modify sIFR.as to detect what color the type is and modify the sharpness and thickness of the aliasing accordingly. Its all a bit hackish but anyone interested can download the .as file here and search for the /*hoppermagic*/ comments. Alternatively take a look at this demo. I'm changing the aliasing on anything thats #e7e2f2 - an off white, anything that's not this color (eg pure white #ffffff) will stay chunky but it could obviously be tweaked for any colour. I'm sure there must be a better solution out there though so if anyone knows it please shout!
20 Aug 2008 : Project Blackhole version 9
Two steps forward one step back. All the code is now converted to AS3, there is still a lot of optimising to be done. The laser is currently broken, so things will no longer explode and planets dont render anymore. As soon as all these bugs are fixed I'm going to start preliminary tests with nonoba multiplayer api.
25 Jul 2008 : Papervision materials experiment
This experiment's aim was to learn a little more about Papervision's material types. As well as using a bump mapped globe from the FITC Amsterdam workshop, I rendered a flash animation onto the side of a cube and used a bit of trigonometry to rotate the camera around the scene.
24 Jul 2008 : Papervision car experiment
A quick test using Papervision's Ford Focus. I inserted a floor and walls, and using the arrow keys you can blast around as if you're in a rally. Well almost.
11 Jun 2008 : Particle emitter version 1
After seeing Seb Lee-Delisle's particle talk at FITC Amsterdam I've been itching to do some particle experiments myself. The effect I wanted to achieve was like the old Odeon cinema intro - do you remember it? It looked like purple glitter cannons being filmed from above in slow motion with a soundtrack that went la la la la la la la da da ta ada da da! Take a look and see if it jogs your memory.
14 Nov 2007 : Project Blackhole version 8
Finally you can blow things up! Pythagoras' theorum is used to calculate the distance to any ship that is under the crosshair. If the ship is in range the laser will glow orange (in the left pane) and automatically locks to the centre of the target ship. After a few hits the target will explode, the explosion is done with png's which will be replaced with vectors at some point. The destroyed ship is removed from the render queue and never seen again.
08 Jan 2007 : Ship viewer
This code was adapted from an excellent article at Macromedia explaining how to rotate a 3D object using Quaternions. Whilst being too complex to fully grasp the key thing about quaternions is they can be multiplied together to create a composite quaternion and supposedly require fewer calculations than with matricies. Apparently the camera positions in early Tomb Raider games are calculated using them.
I modified the code to add in my Cobra model (no easy task) and whilst I could rotate it using quaternions, I couldn't find a way to translate (move) it. There seems to be a bit of a debate as to whether quaternions are more efficient than matrix maths (Papervision didnt initially support them), however with matricies I'm on slightly firmer ground so I decided I would use matrix rotations from now on.
24 Dec 2006 : Image carousel
I'd used Jared Tarbell's cylinder image display on a couple of occasions previously, but as I was getting into 3D I was eager to see if I could produce something that gave more of a sense of 3D. The cylinder image display is a clever illusion using trigonometry and depth sorting, the pictures are just moving from edge to edge, but by changing their widths it gives the illusion that their path is circular.
My carousel was coded from the ground up in AS2, you can place the system at any position you want and still get the carousel effect. The pictures arn't properly distorted as Papervision does, they're just squashed, stretched and clipped, a neat little trick that saves oodles of processing power.
28 Jun 2006 : 20ltd holding page
The holding page for the new 20ltd website took the form of a sequence of dots that reveal just enough of a product so you know what it is, but not enough that you can identify the brands or models involved.
08 Jun 2006 : 20ltd Pin test version 1
Do you remember those pin art things you can buy in gadget shops which consist of a bed of pins closely packed so when you stick your hand in (and it always seems to be a hand) it leaves an imprint? A client was adamant they wanted a similar effect achieved in Flash, I put this quick demo together to explain that in order to do this we'd need bump/depth maps for each object, ie we'd need more than just a black and white photo. We swiftly moved on to a new tack.
17 Nov 2005 : Ingenious Ireland heart animation
This animation formed part of several interactives on the Ingenious Ireland website which explores Ireland's scientific heritage and aims to get children interested in science. The text is contained in an external xml file which means it can run in both Irish and English.
