First try at WebGL
I’ve been reading up on WebGL for the last few weeks when I’ve had the time. I have decided that the best framework to use at the moment is Mr. doob’s excellent three.js framework.
The code didn’t take too long to put together and the part that took the longest was actually just getting the model into the right format. In the end I downloaded Blender and added the python script to that. I use Cinema4D so I exported the model in 3DS and then took that into Blender. The normals came out reversed with the first export, so I had to figure out how to flip the normals in Blender.
What I find completely ground breaking about this, is how there is no plugin required, it just runs and fast. Notice the film grain post-processing which I can’t take credit for as I nicked it from one of the example files, but I love the effect.
HTML5 Canvas EaselJS Video Tutorials
Easel JS is a javascript framework for HTML5 Canvas that gives it a display list like you would find in Flash. Download EaselJS from here.
These tutorials have been designed to take you through the basics of using Easel JS, making a simple game that introduces interactivity and creating animated content.
1 – Getting started with EaselJS
Adding text and images to the Canvas element, then make it move. Take a look at the finished example here.
2 – Creating a simple clicking game with EaselJS
IMPORTANT – getObjectUnderPoint – only works if HTML file is on a web server, unless you use SAFARI
Click on spaceships to make them disappear and stop the invasion. View the finished file here.
3 – Creating Sprite Sheets for Easel.JS with Zoe
Create sprite sheet from Flash assets. View the finished file here. Use arrow keys to walk left and right.
4 – Working with SpriteSheets in EaselJS Tutorial
Control a character walking left and right with arrow keys. View the finished file here.
Let me know if you want any more, I have code ready to go for a platform game demo.
BA (Hons) Interactive Media Production Showreel
Just a little showreel I put together for clearing week at Bournemouth University. We cover such a wide diversity of areas on the course, the showreel highlights some of the excellent work by 2011 graduates.
Adobe Edge Tutorial
Adobe Edge preview has recently been released on Adobe Labs and has had mixed reviews. Some people claim it is not truly HTML5 because the animation should be on the Canvas element. However others have pointed out that the canvas isn’t accessible.
One of the crucial features of Edge, which I particularly like, is adding animation to existing pages and that is going to be a big plus for many designers, specifically those targeting iOS. Of course Edge can create animations from scratch. Edge adds animation in JSON format so that the original web page is not damaged – thus preserving the ability to edit it. The animation is just stored in a linked JS file which is pretty handy for keeping design (CSS), content (HTML) and animation (JS) separate. I really hope that we have the option of choosing the canvas for the animation in the near future though.
Adobe Wallaby Tutorial
This tutorial was pitched to Web Designer Magazine to feature the new experimental technology ‘Wallaby’ available from the Adobe Labs website. Wallaby is a standalone piece of software which converts Flash animation into iOS friendly HTML5. Sadly it doesn’t yet work with ActionScript, however the ‘stop();’ command does work so you can achieve quite sophisticated results from multiple timelines in movie clips. The tutorial features all the regular moving animation, fading in, multiple timelines, reused symbols to keep file size down and motion paths for the simplification of complex animations. All vector content is exported as SVG (Scalable Vector Files) to keep the file size low.
Click the image above to view the animation.
Click here to get the tutorial files from WebDesigner magazine.
