CMXtraneous: Flash

Right on the edge of useful

Custom CS3 Icons - Free!

Posted Saturday, April 21, 2007 12:52:46 PM by Stephanie

Stephanie

There's been a wide range of reaction to Adobe's new CS3 icons. Admittedly, when I first saw the single Dreamweaver icon, I was taken aback -- "Is this thing finished?" But after seeing the whole suite, especially on the color wheel, I thought they were nicely done and easy to differentiate as I got a few in my dock. There were many who thought differently though. It was a love it or hate it kind of thing.

For those of you in the hate camp, there's an option. Adam Betts, a very talented designer, has created his own set of CS3 icons -- and released them, free, to the public. He based them on the box design and they look quite lovely. He's even made a new set of document icons if the plain ones don't quite do it for you.

What they'll look like at the smaller sizes, I can't say. There are no instructions included for where to install them, and at this point I haven't a clue. (Feel free to point me in the right direction if you know. :))

There are a few other sets I've run into if Adam's aren't your favorite. Mac Themes is similar to Adam's, Louie Mantia has a set that blend the old icons with the new box look, and if you like the new ones from Adobe but would rather have them a little sexier, koregraphik.com made a set with nicer gradients and rounded corners. Check them all out.

Happy iconing!

Category tags: Adobe, Designing for the Web, Dreamweaver, Fireworks, Flash, Illustrator, InDesign, Photoshop

How to Adjust the Audio Portion of Flash Video

Posted Wednesday, April 18, 2007 12:15:36 AM by David Stiller

David Stiller

If you’re not using the FLVPlayback Component, or one of the older Media Components, then the audio portion of video files may have you scratching your head.  The Components have their own volume sliders, which makes volume control a snap, but what about panning (left to right fading), or what if you’re not using Components for video?  In ActionScript 2.0, video sound is a bit … well, it’s a bit odd, but one you understand it, audio control isn’t hard.

An answer, short and sweet

In Understanding the Sound Constructor, I went into the usefulness of associating Sound instances with movie clips.  To control the audio portion of FLVs, it’s just a bit more of the same.  First, we’ll start with the basic “recipe” for bringing video into a Video object:

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.play("myExternalVideo.flv");

This is the block of code used in How to Load External Video (FLV) and brings the specified FLV file into a Video object with the instance name videoPlayer.  Invoking NetStream methods on the ns instance (such as NetStream.pause()) controls the visual portion, but what’s missing is sound.  Here’s how to do it.  After the opening block of code, type the following:

this.createEmptyMovieClip("videoAudioContainer", this.getNextHighestDepth());
videoAudioContainer.attachAudio(ns);

var videoVolume:Sound = new Sound(videoAudioContainer);
videoVolume.setVolume(50);

How it works

Four lines; two things going on.

First, the MovieClip.createEmptyMovieClip() method is invoked on the global this property, which refers to the main timeline if you’re typing this code into a main timeline keyframe.  This dynamically creates a new MovieClip instance at the next highest available depth, with the instance name videoAudioContainer.  The instance name doesn’t especially matter; just keep in mind, this is a movie clip “container” made just for your video’s audio portion.  If you wanted to, you could skip this step and put your own empty movie clip on the Stage.  Just make sure it has an instance name.  On this new instance, the MovieClip.attachAudio() method associates the NetStream instance ns with this movie clip.

Second, a new Sound instance, videoVolume, is instantiated and associated — this is the important part! — is associated with the videoAudioContainer clip that is associated with the NetStream instance.  All in the house that Jack built.  From there, the Sound instance affects the movie clip which, in turn, affects the audio portion of the video.  Set the volume, as shown, or pan.

Category tags: Flash

How to Play Sound Files Sequentially

Posted Friday, April 13, 2007 7:44:25 AM by David Stiller

David Stiller

Many people use Flash to play background music on their site.  It’s a good use for Flash, especially if the audio is loaded from external MP3s, which keeps the SWF file size low, and if you give your visitors a way to toggle off the sound.  But one song may not be enough.  You may want to play a list of files one after the other.  If so, the next question is, “How easy is that?”  The answer is, “Very.”  Let’s take a look.

An answer, short and sweet

The “trick” here — and it’s really no trick at all — is to use an Array instance to store your list of audio files, a variable to keep track of which song is current, and the Sound.onSoundComplete event to trigger each new sound.  Type the following ActionScript into a keyframe:

var listOfFiles:Array = new Array("frog.mp3", "loon.mp3", "horse.mp3");
var currentFile:Number = 0;

var audio:Sound = new Sound();
audio.loadSound(listOfFiles[currentFile], true);

audio.onSoundComplete = function():Void {
  currentFile++;
  if (currentFile < listOfFiles.length) {
    audio.loadSound(listOfFiles[currentFile], true);
  }
}

How it works

The first variable, listOfFiles, points to a new Array instance that holds three elements, which are the names of three MP3 files.  We could have populated this array in a series of lines, like this …

var listOfFiles:Array = new Array();
listOfFiles.push("frog.mp3");
listOfFiles.push("loon.mp3");
listOfFiles.push("horse.mp3");

… but in short sequences, the single-line approach takes less effort to type.

The second variable, currentFile, is set to zero and represents the first sound to play (arrays start counting at zero, rather than one).  Finally, a third variable, audio, is declared and set to an instance of the Sound class.

To get things started, the Sound.loadSound() method is immediately invoked on the audio instance, and two parameters are provided.  The first parameter is the expression listOfFiles[currentFile], which in this case resolves to the string "frog.mp3" (remember currentFile is zero, which retrieves the first element of the listOfFiles array).  The second parameter tells Flash to play the file by progressive download, which means the audio will start before the MP3 has fully loaded.

On its own, the code so far would play the first song and then stop when the audio was complete.  The last little bit achieves the original goal, which is to play files sequentially.  When the first song (or narration, or whatever you’re presenting) is complete, the Sound.complete event is dispatched.  Here, we’re writing a function to be performed in response to that event.  The first thing that happens is that the currentFile variable is incremented by one, thanks to the ++ operator.  So now its value is one.  Next, an if statement checks of currentFile’s value is less than the total number of elements inside the listOfFiles array, thanks to the Array.length property for that instance.  There are three elements in the array, and one is less than three, so the final line is executed.

Notice that the last line of code duplicates exactly what we’ve already discussed.  The difference is that, this time, the value if currentFile is different.  When this second song ends, the complete event will fire again, which means this function will again be triggered.  currentFile will increment to two, two is less than three, and the third MP3 will play (element 2 is in the third slot, because arrays start at zero).  When the third songs ends, currentFile increments to four, and because four is no longer less than three, the cycle ends.

Variation

Want to repeat the list of files when all three (or four, or however many) songs have completed?  Update that last block of code like this:

audio.onSoundComplete = function():Void {
  currentFile++;
  if (currentFile == listOfFiles.length) {
    currentFile = 0;
  }
  audio.loadSound(listOfFiles[currentFile], true);
}

Category tags: Flash

How to Round to the Nearest Ten, Tenth, Hundred, Hundredth, Etc.

Posted Friday, April 06, 2007 12:19:48 PM by David Stiller

David Stiller

I was helping a friend the other day with a rounding issue.  He needed to round numbers not to the nearest integer, but to the nearest hundred.  So 52.3 would round to 100.  86 would round to 100 as well.  13 would round to 0 and 101.287 would round to 100.  You get the idea.  The Math.round() method doesn’t take any parameters except the to-be-rounded value itself, so how could this be accomplished?  The answer couldn’t be simpler.

An answer, short and sweet

Basic arithmetic does it.  Let’s say the original number is 52.3.  To round to the nearest hundred, follow these steps:

  • Divide by 100
  • Round
  • Multiply by 100
var num:Number = 52.3;
num /= 100;
num = Math.round(num);
num *= 100;
trace(num);

How it works

The above ActionScript could have been written out a bit longer …
num = num / 100;

… but the division assignment (/=) operator reduces the required typing.  They amount to the same thing (and the same goes for the multiplication assignement (*=), as well as addition and subtraction assignment operators (+= and -=).

The division/multiplication steps move the decimal place where it needs to go.  The rounding functions as it always does.

Variation

If you need to round to the nearest hundredth — 189.5287 becomes 189.53 — just reverse the division and multiplication steps:

var num:Number = 52.3;
num *= 100;
num = Math.round(num);
num /= 100;
trace(num);

Category tags: Flash