Designing Your Interface; Attaching the Sounds to the Buttons

Designing your interface is a big part of presenting your remix. Use descriptions from the song's lyrics (um, if the song has lyrics). We used phrases like "take me to the sun" and "skies yellow, blue, and green" to get a feel for where the artist wants to take the listener.

As Angry Coffee is really not a design resource, we really cannot explain this part in detail as we do with audio. Our apologies, but following our tutorial will give you a plain .html page with on-click links that work fine until you can master some Web graphics skills.

Basically we did the line art in Illustrator (to keep it very smooth) and the coloring in Photoshop. The buttons are just a layer with opacity, and rather than trying to come up with some complicated metaphor for the two options for each instrument (plus off), we just went with A, B, and X.

Then it was a matter of breaking the image apart and rebuilding it in a table in HTML. We broke it apart so that each of the buttons could be linked with the ONCLICK="song.play();JavaScript command.

Check out this Webmonkey Tutorial on this subject; it may help: One Day Fireworks Tutorial

COFFEEBREAK

How do you make an interface that includes Record and Play buttons, you ask? Stay tuned to Angry Coffee for an addendum to this tutorial on how to work the Record, Play JavaScript into your remix! We will provide an in-depth tutorial besides the copy-and-paste code to make it work. Y'all come back now, ya' hear? Cheers.