Road Rage in EGL Rich UI
ChrisLaffra 060000KCEQ Visits (2189)
The newly announced Apple iPad has been heralded by many for its potentially game-changing innovations and at the same time criticized for its lack of features such as multi-tasking and Flash. Where multi-tasking is concerned, I think it is extremely smart to disallow background processes. I spend a major part of my life cleaning up my desktop, killing run-away browsers and other processes and generally wondering where the heck all my memory has gone.
In another posting I already mentioned how common it is for Flash ads to waste CPU even when the browser is minimized and currently not used. Funny thing is that for a large category of Flash ads, Flash is not needed at all. This is particularly true for ads that use overlapping images that are moved around the page to generate the illusion of motion.
In this blog entry I will demonstrate how easy it is to make a cool animation using a scenic background and two cars. The post is heavily inspired by an advertisement from ABN-AMRO Bank, which performed a similar animation. As an enhancement I added a second car, made the cars semi-transparent, and added a moon.
The EGL version of this animation can be seen live here and looks like this:
There are four components in this ad:
The CSS defines the properties of the four components:
After the scene is rendered, a job is started that runs every 10 milliseconds:
At the proper time the background image is scrolled to the left, cars 1 and 2 are moved to the right, and the moon is moved to the left to add some illusion of parallax:
The animation algorithm is quite straightforward.
The background is rendered using a CSS background image. We use the "position" attribute of the CSS background property and keep scrolling the background to the left each 5 ticks. Because we specified repeat-x in our CSS, the background image is repeatedly draw generating the illusion of one seamlessly extended background.
Both cars are the same sized image, using transparent pixels for cutouts such as the windows. To add a bit of 3D feel, we move car 2 slightly higher than car 1, so it appear to pass behind car 1. Each is moved at a different speed to make it look like car 2 is passing car 1. Car 2 is moved at each tick, and car 1 is moved every 20 ticks.
Finally, we move the moon leftwards at each 20 ticks, which is at a slower pace than the rest of the background scenery. This enforces a sense of parallax, by making objects in the distance appear to move more slowly than the objects closer to the camera.
Hope you agree with how easy it is to make an animation in EGL Rich UI, and maybe you get inspired to copy the attached animation and try it out using your own images.