Drag Me
Published: July 10th, 2008
Posted by: Kevork Aghazarian
NOTE: This article was written when we had another website design up.
With the new design we have introduced a much more interactive interface. There are new features to the site and one in particular is quite interesting... and fun! The MooTools framework allows for the construction of some very interesting web applications and we have done so with the Drag feature.
On top of every page on our site you will see a content specific image with a saying over it in a translucent black rectangle. Below it is a small note saying “Click to Drag”. Dragging this element around the page is fun for about 10 seconds and then it loses all meaning. However, our web application allows for designated parts of every page to interact with that drag-able element. Try it, click and drag the element above and bring it over the navigation area. A sound clip should play and a question mark will appear on the top image. If you let go of the element, some information will appear and within a few seconds, music will start to play. To bring everything back to normal move the element away from the navigation area.
What is going on here is our custom script is making the slogan rectangle movable and it also is making certain areas of our page (that we designate) droppable areas that can interact with the slogan rectangle. Right now, all we do is show some cool facts or information but as we develop this script, we will make more things interact with the movable rectangle.
So what is so important about this? Nothing… not concretely anyway, it is simply a feature that adds a little more activity to our website and have something for clients to show to their partners, companies etc…
An interesting aspect of this app is that it uses an external sound API to manage the sound effects. Using Flash injection via JavaScript, SoundManager 2 is a sound API that allows you to create and call sound clips using JavaScript. The API is great, lightweight and works well. Although it is quite simple to use it, we found many bugs when putting the script together with our drag application.
The first issue was the delay in streaming the file and playing it. We had to determine the right balance of performance and quality so that our web pages loaded quickly but our application executes sound files in-time. So we had to split up the load process by always streaming the “click” sound clip on page load and only streaming the background music when you begin to drag the slogan rectangle. This made the most sense and allowed for a decent enough performance/quality balance. We also compressed the background music so that file sizes were 500kb or below. Luckily, SoundManager 2 has several options for playing sound files as fast as possible.
Issue number 2 was glitches in play and pause calls. If you were to quickly drag between droppable elements, music would either not execute or not stop playing. We had to overcome this by placing play and pause calls in timeout functions. What this means is that every time the play function is called, there is a 1000 millisecond delay before playing and every time a pause function is called, there is a delay of 1500 milliseconds. This fixes almost all glitches with our app however there are still a few left, but to reproduce them would take someone trying to make an error in the first place.
It is quite interesting how little Flash is required to make a site interactive, fun and still search engine friendly.
More on SoundManager 2
SoundManager 2 is an attempt at providing the sound API which Javascript has been missing. It's a Javascript library which wraps and extends Flash's sound capabilities, bringing cross-platform audio functionality to Javascript.
It makes it easy to add sound to a website without using long work-a-rounds and clunky procedures. We use it for all projects that require sound effects with minimal flash intervention.
For more information visit the SoundManager 2 website.