Oct 6, 2009 @ 01:02pm
In this example I'm using Canvas to replace Flash as a means to display and animate a pseudo 3D phone.
I create an image element for each frame of the animation and apply a handler for it's load event. As each image loads it is added to the list of frames, and if it's the final image we're waiting for then the animation is begun.
To animate I draw the image onto the canvas to create the frame, each frame we show replaces the previous content with another stored image.
I was surprised how well this worked, it's not a particularly efficient method but it ran well in the latest browsers when I tested it. Even when using
Excanvas to provide support for IE it ran at full speed.
The only disappointment was it's performance on the iPhone. I'd hoped that Canvas would replace Flash on the iPhone but it rendered the images very slowly. This could have been from the additional scaling performed by Safari on the iPhone, when in landscape view it rendered quicker than in portrait.
View the Canvas image animation demo.
The phone, by the way, is a
BlackBerry Storm.
May 2, 2008 @ 01:00pm
Background. The MooTools JS library is great. Modular and well documented, useful functions mixed in with nice visual effects. We've used it on my most recent project, originally just for certain elements in certain pages, put now its providing simplifying scripts all over.
Image Carousel Hero. While it's not yet live the MooTools library is making my Image Carousel much easier to create. Working around and with the base html we're using the assets class to load in the extra images, placing them behind the first/selected image and using the simple calls to fade between them. Really simple. The carousel will be online on the De Beers Group's upcoming website.
External links. Moo Tools :: De Beers Group
Jul 19, 2007 @ 01:00pm
Background. The main problem I have with my own site is filling it with content. An idea I had was to take pictures on my camera phone and put them somewhere on the web and load them from that remote source. The original galley used Blogger and was far from perfect.
Flickr. My new gallery uses Flickr. Using the Flicker API I retrieve a list of the 8 most recent pictures and display the title, date and appropriately sized version of the picture on the page. I've also added the Lightbox2 script, it's a straight implementation but I'm planning on changing the handler so non javascript users will go to the flickr page rather than the image directly.
External links. Flickr :: Flicker API :: LightBox2
