Tag Archives: Magazine

Creating a Dynamic Soundtrack

pwpcoverPractical 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.

Creating a Cool Flash Intro

pwpcoverFor 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.

Creating an Audio Mixer in Flash

wdcoverThis was a 3 part series for Web Designer Magazine, October, November and December 2004.

How to create an audio mixer in Flash, first looking at the task of drawing the graphic assets.

One of the things that Flash handles really well is audio. Flash has the ability to play up to 8 stereo audio channels at the same time, with independent volume and pan controls over each channel. This means that we can get 8 concurrent audio loops going at once, and using volume and pan, we can create our own mixes, and in essence build our own songs. Continue reading Creating an Audio Mixer in Flash

Creating a Flash Game

pwpcoverPractical 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.

Drumming to a steady beat in Flash MX 2004

pwpcoverPractical 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

Animating an Interface

wdcoverFrom Web Designer Magazine, August 2004

Displaying an interface at runtime using motion graphics code to animate the elements in to place.

One of the best things about Flash is the fact that it allows for interfaces to be created in a very short period of time. We can easily open Flash, drop a few elements on to the stage, and voila, our interface is ready. In today’s Internet, however, that’s simply not enough. Visitors have come to expect dynamism; they want things to move, fly and zip into place. Traditionally, this would be accomplished by carefully animating the interface on a timeline with dozens of keyframes.
However, that’s not the only way (nor is it the best way). Thanks to the scripting power of Flash’s language Actionscript, we can create dynamic websites with fully animated interfaces with only a few lines of code, and some very simple motion graphics programming.

Think of a website where you arrive, and interface elements begin flying in from off-screen, coming from all different locations only to settle neatly into position. Once in position, they create a cohesive whole to the entire interface. In this tutorial, we’ll be looking at how to create such an interface, and how to integrate Actionscript to create robust motion graphics effects.

Making a Robust Flash Player Detector

wdcover1Web Designer Magazine, Making a Robust Flash Player Detector, June 2004.

Overcoming the differences in Flash version, and creating a single player detector SWF that works for Flash players 4 on up to the latest version.

Often, we want to indicate to website visitors and users of our Flash applications what version of Flash player they currently have installed on their computer. The usual reason for this is to specify to the user when they don’t have an adequate version installed, and then redirect them to the Flash player download site. If we’ve spent months creating a killer Flash site with the latest version of Flash, then it’s important that people with anything less than the latest Flash player are told to upgrade – otherwise our site may not perform properly, and, even worse: it may appear broken.

One of the challenges is, paradoxically, that we must create this player detector so that it runs in Flash 4, 5, 6, 7 and beyond. We cannot create a detector that will not actually execute in the versions we want to detect. What this means is that we must create a detector that ultimately runs in the lowest common denominator, Flash 4. This means that many functions are off limits to us, levitra india. However, with a little bit of planning, and intelligent design we can make a cool detector that spans a stretch of four versions, and works the same in all.

Creating an Audio Player in Flash

wdcoverWeb Designer, June 2004

With inspiration from modern MP3 players, we build our own fully functional player in Flash MX 2004.

Flash MX introduced the ability to load and play MP3 files directly at runtime. Prior to this, the only thing we could do was import the sounds into Flash at design time, or embed our sounds in SWF files and load those in at runtime. This was not an ideal solution, as it required hours of overhead and tedium.

Today, we have the ability to load an MP3 and play it streaming, so that it plays as it’s downloading and doesn’t need the entire song to begin producing sound. Also, we have access to the ID3 tags associated with most MP3 files.  This means we have access to information such as song title, album, artist and year.  It is these elements that are expected in a good MP3 player.

In Flash we have the ability to stop a stream and pick up from where we left off, without having to restart.  This, coupled with information about play head position and duration of the entire song, allows us to create a progress bar that represents the playback position.

We’ll be including all the standards; play, stop, rewind, next track and previous track. We’ll also be representing a playlist in an array.