Practical Web Projects, May, 2005.

This is an article on how to use Flash to create a dynamically generated soundtrack. Using a careful blend of musical elements, with matching tempos, one could transition between different feelings and intensities of music, without a seams in the transition.

Making a dynamic soundtrack where music seamlessly shifts to match the visual subject matter.

Music is perhaps the most powerful tool we have at our disposal, as web and Flash developers, for drawing an emotional response from our visitors. For years, Hollywood has used music to enhance a scene and give it maximum emotional impact. In fact, music in movies often strictly guides our emotions along, making us feel certain ways from moment to moment; suspense, relief, suspense again, relief, more suspense, disaster, relief.

The ability of the composer to move the music smoothly from one state to another is something that we can imitate when we create dynamic soundtracks in our websites. Essentially, we’re going to be using several pieces of music and tying them smoothly together, changing based upon what we’re viewing on the main site. The music will be seamlessly transitioned from one piece to another.

The trick here is that all the pieces of music must have several fundamental things in common. First, they must all be in the same key. In order to transition from one piece to another, crossfading smoothly, we can’t use two pieces in harshly opposing keys, otherwise, as they fade, the sound will be jarring. Secondly, all the pieces must have the same tempo, or speed. This is necessary for them to “line up” properly.

In Flash, we’ll be using the Sound object extensively. We can have up to 8 sounds playing at once in Flash, and we’re going to take advantage of this. Our dynamic soundtrack will consist of 7 possible genres of music. Each genre consists of a single looping piece of music, 16 seconds in length. At the launch of the Flash site, all 7 pieces will be started, and set to loop indefinitely. The volume of all these will be set to zero (silent). We then smoothly fade between them to create our dynamic soundtrack.

For Practical Web Projects, December, 2004.

Creating an animated intro for the hypothetical “Mash and Grab” website.

When creating the intro for the Mash & Grab website, it’s important to grab the attention of the visitor right away, with relevant motion graphics that make use of the branding that has been developed thus far. To that end, we’re going to create something that follows the tradition of television style motion graphics done with After Effects (think TV show intro) and eventually finish off at the Mash & Grab logo. We want to convey excitement and movement, while at the same time indicating that this is a high-tech venture.
We’ll start off with a black screen, into which will drop dollops of mashed potatoes, filling the screen from bottom to top, until the entire screen is white. Then the pieces of the logo will fly on, settling into proper position. Once in position, they will all begin to pulse and “dance”, gradually settling down to the final logo form. At the end, a “diner floor” background grid will fade in, and will continually pan from right to left, giving the appearance that the logo is moving. Almost everything will be controlled by ActionScript.

All the while, there will be music playing. This is custom music written for the job by Glen Rhodes, and the music too follows the progression of the motion graphics. It begins as a simple jazzy piece to indicate the traditional roots of popular take-away. The music will, however, begin to morph gradually into a more modern sounding piece to reflect the nature of Mash & Grab being an online and relatively high-tech experience.

Once the action has settled down (and the song has finished), we will automatically forward the user to the main index page, and if they so happen to click anywhere on the intro movie at any time, we will be good enough to forward them at that exact moment.

Practical Web Projects, November, 2004

This article was about creating a game in Flash to fit into the framework of a pre-existing site.

When it comes to really showing our stuff, nothing seems to show it better than creating a game for our site. Creating a game says that we don’t just know how to build sites, but we know how to entertain. It indicates to the world that we know what we’re doing in Flash, and that we care about user satisfaction.

The value that a game adds to a site is immeasurable and, currently on the web, game sites account for those with the most consistent traffic, and those where visitors remain the longest. In this sense, they’re called “sticky”, because games cause the users to “stick” to the site. In the competitive online world, being sticky is definitely a good thing, and if we can create sticky sites for ourselves, then clients will hire us to create sticky sites for them as well.

In this tutorial, we’re going to be creating a game that is essentially a remake of an old classic, which often goes under the name of “memory” or “match”. In the game, we’re going to present the user with a grid of squares, or “cards”. When the user clicks on a card, it flips over, revealing a picture on the back of the card. The user may then click on another card, and if the two card images match, then the cards will fade away, revealing portions of the background.

The object is to clear the entire grid of cards in as few attempted matches as possible. When the user selects two cards that don’t match, they both flip back over, leaving it up to the user to remember where each card is.

The core of our game will be the card logic, fade code, and the shuffle algorithm that ensures every run is different.

Practical Web Projects, September 2004

Using the built in sound timing in Flash MX 2004 to create a rock solid interactive drum machine.

Macromedia Flash MX 2004 is a powerful tool, and it allows us to do some amazing stuff. One of its catches, however, derives from the fact that all timing is frame based, and that actual, achieved frame rate is determined by something akin to luck, rather than the actual document frame rate setting.

In truth, Flash attempts to attain the frame rate you have requested, but often will fail, as external processes, or even animation within your movie take over and cause the playback to skip and sputter.

This does not engender much hope for a drum machine, which relies on rock solid timing. In fact, if you look at drummachFrames.swf, and try inputting a drum beat, you’ll see this effect in full swing. It sounds OK, but you occasionally hear the “drummer” lose time, and play a beat late.

Note that in years since, the audio timing has become better and better, and now things like drum machines, dynamically generated audio and effects are easy with AS3.0