Antti Kupila

Personal Blog, Portfolio and Online playground

View over the green room at Sid Lee, Montreal

SoundFX, out-of-the-box audio filters with actionscript 3

We had a project where we would have needed to apply something like a lowpass filter in real time on an audio track. Doing some research for this quickly triggered even further interest in audio programming. I also realized it’s not as scary as it first seems and a whole lot of fun. We deployed on Flash player 9 so we ended up going with another approach. Still, this is what came out of that.

While all the audio stuff isn’t as hard as it looks when reading the docs it can still be intimidating to a lot of developers. Hopefully this post will help out those guys. The key focus here was to keep the syntax as similar to the one we’re familiar with from display objects, the SoundFX class does all the heavy lifting. Take a look at the following syntax:

[as]
var sound : SoundFX = new SoundFX( new URLRequest( “music.mp3″ ) );
sound.filters = [ new CutoffFilter( 12000 ) ];
sound.play( );
[/as]

When you don’t have to worry so much about the nitty gritty stuff of making it work you can focus on the fun creative part. You can do basically anything you can do with display object filters, animate the properties etc. It’s a lot of fun ;)

A simple demo of how this works (flash player 10 required):

Go crazy with the filters :)
A couple small shortcuts will help you too:

  • Double click: default value
  • Shift + double click: maximum value
  • Command/ctrl + double click: minimum value
  • Shift + command/ctrl + double click: middle value
  • Click on visualizer to pause/resume playback (pretty cool if you’ve added some echo)
  • Double click visualizer to randomize all knobs

An added bonus here is added control over audio streaming. As with NetStreams you can specify how many seconds should be loaded before playback starts.

Source (includes SoundFX and the demo)

The filters are currently ported from C source at musicdsp.com (awesome resource!). Once i look a bit more into the math & magic behind the effects i’ll try to post new effects. Of course i’m more than happy to include any other people’s effects too, creating new effects is pretty simple.

Pixel Bender levels example

Pixel Bender is huge and is going to be even bigger once Flash player 10 officially is out (and spreads a bit so that we can start using it in commercial projects). I just love it when Adobe constantly lower the restrictions on creativity :)

A lot of the examples we see online for Pixel Bender (previously codenamed Hydra) are crazy visual effects. While they’re amazing for certain visual effects (mostly due to the processing speed), finding real life use is harder. I’ve had the need for a similar-to-photoshop levels filter multiple times, if nothing else for preprocessing a bitmap for further analysis. Turns out creating something like this with Pixel Bender is really simple and even better; it’s blazing fast.

If you’ve read my previous articles you know that I’ve already written a prototype for the levels filter (geesh, it’s almost a year ago!). Well, back then Pixel Bender was called Hydra and the code written isn’t compatible with today’s version anymore. I addition to that we weren’t able to export stuff, it just ran in the Hydra toolkit. Today I updated the code and exported it as a .pbj that can be used in Flash.

I’ve made a small example with a couple example images with the contrast reduced. You’ll need Flash player 10 to play with it. If all you see is white download the plugin from Adobe labs.

A couple pointers on the example: Clicking a histogram will automatically balance it. Double clicking will reset it to 0-255. Clicking the image will load a new image. In photoshop you can choose to either modify the luminosity or the individual channels. Here i enabled you to modify both at the same time, but this means that if you modify all 4, the automatic mapping won’t be correct anymore (the histogram in the bottom left corner will show the result of this). I could make it understand this, but since it’s just a proof of concept i think this is fine. Also gamma isn’t supported at the moment.

The source is of course available:

Do you have other real life uses for Pixel Bender?

Actionscript 2 utility class: Grid

I’ve been working on a project with fullscreen flash. Everybody who has worked with something like this, or even without working with something like this probably knows that a grid for checking positioning can be handy. Well, I know I thought so, so I wrote this simple utility class.

Below is an example, you can enable it with the SPACE key (click inside it first, to give it focus). Change resolution with the arrow keys.

It’s nothing special or new, I know, but still can be very helpful.

Download Grid.as with example

Update: Hehe, since my tilde key wasn’t working for anybody else, i changed the default key to SPACE. You can of course change the response key, just use Grid.key = keycode

Getting JPG dimensions with AS3 without loading the entire file

Does this sound familiar: You’re loading a JPG file, and want to know what size it is before it has loaded? This can be useful if you’re for example drawing a border/background, which will contain the image. If you don’t know what size the image is, you don’t know what size the box should be. I’m sure there are better & more common uses to this, but i know for sure it can be really useful.

Anyway, I decided to solve this problem. If you don’t care about how it works, fine, i’ll give you the short version first. After all the class i’ve created does all the heavy lifting for you, so if you just want to have it work, you can just use it without worrying about what’s under the hood.

Here’s the class: JPGSizeExtractor.as. Download it and put it in a folder com/anttikupila/utils in your classpath. Then you can just use it like this:

[as]
var je : JPGSizeExtractor = new JPGSizeExtractor( );
je.addEventListener( JPGSizeExtractor.PARSE_COMPLETE, sizeHandler );
je.extractSize( your_jpg_file.jpg );

function sizeHandler( e : Event ) : void {
trace( “Dimensions: ” + je.width + ” x ” + je.height );
}
[/as]

To trace out debug information, you can say je.debug = true;

What it actually does is that it starts loading the JPG file and analyzes every byte that has loaded. When it find the jpg’s JFIF headers (according to the JPEG specs), it will be able to determine the dimension of the file and close the stream. The dimensions in a jpg are before the actual image info, meaning that you can load a 10mb file and get it’s dimensions in a fraction of a second, instead of waiting for the entire file to load.

Note: This doesn’t work for all files. Some files i tried with were not according to the JPEG specs (or then i misunderstood something, which is more likely since other software showed the correct dimensions). Don’t use this in mission critical projects, unless you have control over the JPG files. I don’t take any responsibility of it working correctly.

Download the class, with an example

If you’re not so much interested in “the what”, but more “the how”? Read on. Let’s see what we can do about that .. ;)

Continue reading

Tutorial: Most popular YouTube videos of the day in Actionscript 3

As you probably know, Flash CS3 is coming really soon. Actionscript has developed a lot with the years and just like Adobe’s Flex, Flash CS3 will feature it’s latest revision, actionscript 3.0. This tutorial is a pretty basic introduction to AS3, to give you a kickstart before the final release of Flash CS3. If you’re familiar with AS3, this probably isn’t anything for you, but if you’ve done some stuff in AS1 & 2, maybe had a look at 3, read it and tell me what you think :) This was originally a school assignment and written pretty quickly so please bear with me :)

Alrighty, let’s start.

Before you build a house you need to get the tools so let’s take a look at a couple approaches of working in AS3:

Currently there are three ways.

  • Flash 9 alpha
  • Flex
  • Flex SDK with third party application

Flash 9 alpha is basically Flash 8, but with support and a compiler for AS3. You can download it for free from Adobe labs, but you’ll need a licenced Flash 8 to install it. Also it does not work on intel macs so if you have one, you can’t compile your actionscript with it. This obviously is a problem :)

Flex is basically flash, but meant more for online applications. Supports the exact same actionscript 3 as Flash 9. If you have flex, you probably already know that you can compile AS3 with it, if you don’t you can always get it. It’s $499 though

The Flex SDK is a free download which you can use with a third party application. I myself use this one together with Eclipse, and am very happy with the combination. Free too :)

You’ll find loads of info about these on google, and going thru all this isn’t really in the scope of this tutorial, so please, help yourself :)

Very helpful links:
http://livedocs.adobe.com/flex/201/langref/index.html
http://livedocs.adobe.com/flex/2/langref/migration.html

Here’s a small demonstration of what the app we’re building today might look like (click it to see it in action):

YouTube video browser screenshot

Continue reading

Flame actionscript 3 source released

A week or so ago i did this experiment in actionscript 3, using papervision3d and last.fm. Got a couple requests for the source so here it is.

Download flame source.

The work is licensed under CreativeCommons Attribution-ShareAlike 2.5 license.