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:

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

What we need to do is look at the JPEG specs to see where the image dimensions are stored. Then just go to that place in the file and read out those dimensions. Simple enough, 'aye? Well, it pretty much is, but there are some bumps on the road..

First we have to know how a JPEG file is structured. Luckily JPEG is a very common file format, and there's plenty of documentation online. Fire up a hex editor and open a jpg image to see what's actually happening. Note that 0x stands for a hex number, 0x0A = 10, 0xA0 = 160

This is the basic structure (a jpg can contain more sections, but these are the most common ones):

If we take a closer look at SOF0's structure, we'll notice something we want to see..

1. 0xFF 0xC0 (SOF0 identifier)
2. length (high byte, low byte), 8+components*3
3. data precision (1 byte) in bits/sample, usually 8 (12 and 16 not supported by most software)
4. image height (2 bytes, Hi-Lo), must be >0 if DNL not supported
5. image width (2 bytes, Hi-Lo), must be >0 if DNL not supported
6. number of components (1 byte), usually 1 = grey scaled, 3 = color YCbCr or YIQ, 4 = color CMYK)
7. for each component: 3 bytes
   1. component id (1 = Y, 2 = Cb, 3 = Cr, 4 = I, 5 = Q)
   2. sampling factors (bit 0-3 vert., 4-7 hor.)
   3. quantization table number

So, what we want to look for is SOF0 and from there get the width & height of the image. SOF0 is identified by 0xFF 0xC0, so if we find that, we're pretty much done. The following image shows you the header of an actual 200x200px jpg file (0x00 0xC8 = 200) with the header info highlighted.

The other info we don't really need, but it makes it easier to find the correct address in the file when we have more info. Now we know where & how the information is stored. Now we just need to find it

What we want to look for is 0xFF 0xC0, but since the length in most cases will be 0x11 (17) bytes (8 + 3x3 as we're assuming it's an RGB image) and the bitdepth is 8bit (12bit jpg's exist in medical imaging, but they are rarely supported by consumer software), we can require those too. In other words we can look for 0xFF 0xC0 0x00 0x11 0x08.

What we do is simply to examine every incoming byte and check if it matches with the SOF0's first byte. If it does, we take the next byte, and the next, until we have matched all the bytes in the header and know we're at the correct place. After this we can just read the height & width of the file.

The code is pretty straightforward if you've worked with ByteArrays before. In order for us not to go outside the range of the file that has loaded so far (as we're running this on progress–not on complete–we know a portion of the file has loaded, not the whole file), we check that enough bytes are available. We create a loop that compares every byte with the array and moves on the the next byte if a match is found. When the position matches the length of the array, we know that we've matched the entire header and can read out the dimensions. As you can see from the image & specs earlier in this post, the dimension are stored as shorts (2 bytes each, hence the + 4 in the while loop). If you try this, it actually works..

..in most cases. The problem is that a jpg file may contain more than just one image. Why? Well, a jpg may have other info embedded, such as thumbnails also stored as jpgs inside the jpg. This means that if we just pick the first SOF0, we might end up with a thumbnail's SOF0. Save for web in photoshop, for example, doesn't embed a thumbnail while the normal save as does. Hence you might get different (wrong) results on the normally saved file if you just pick the first SOF0. Now, how can we solve this?

Taking a closer look at the JPEG specs we notice something called APPn segments. These are segments that contain additional info, such as EXIF information. The thumbnail is in here, if it exists. So, what we need to look for first is the APPn sections, and if we find any, skip them as all the image info in there is wrong anyway. As every other JPEG segment, the APPn segment's identifiers are always followed by the segment's length, so when we find an APPn section's identifier, we can just read the next short and skip that amount of bytes. Seems simple enough

Here's the complete function from the class, which does just that

Yep, gets a hell of a lot more complicated because of this. But it works. I won't go through every single line here, as a lot of it is by now pretty self explanatory. What it basically does is it tries to find an APPn section (0xFF 0xE1, 0xFF 0xE2, 0xFF 0xE3 etc, up to 0xFF 0xEF), and if it does, it reads the following short and jumps that amount of bytes. Because of the nature flash where we're loading files over the network, we might not have that amount of info available yet so we have to queue up that jump until we have the info we need. Isn't working with networks just pure fun?

Sidenote: I think it's quite weird that the URLStream does not extend ByteArray since it works almost the same way. Here the position property of ByteArray would have been useful for jumping bytes, but when it didn't exist, i had to do it with a for loop. Can anybody come up with a reason why it doesn't extend ByteArray?

Alright, we're pretty much done here. As I said in the beginning, this works almost every time. I found images that don't give any dimensions at all (when looking at the file they're not according to the specs, but still render fine in software, hmm..). If anybody has an idea of what's common to these files and how to solve this problem, i'd love to hear it

What all this shows to me–in addition to being a super useful class in real life projects–is the power of actionscript 3. I mean, getting jpg information (one could get exif info with this technique?) is just one thing, you could actually read and analyze any file. With this you could for example bring in formats that are not natively supported by flash. And well, a hell of a lot more. The sky is truly the limit.

Hope you found this useful, good luck

Download the class, with an example

Update Apr 10, 2007: the length in the description (11) should be 0x11. Fixed to avoid confusion

Update Sept 14, 2009: There was a bug that caused wrong dimensions sometimes to be returned for very large images. This has been fixed now.

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):

What it does it to read the RSS feed from YouTube, parse it, create buttons that link to the 25 most recent videos and show thumbnails from those videos. I chose this example because it shows the power of E4X, which is now implemented in AS3, makes our lives a lot easier when it comes to parsing XML. It also has some basic events and connections over the web, which also have changed significantly since AS2. So, an easy AS2 to AS3 migration tutorial. Or something.

So, where to start. Let's plan a bit first. Planning is always good. What do we want to do really? Here's a list

1. Load the XML from YouTube
2. Parse the XML
3. Create buttons of the items in the XML
4. Load thumbnails for the images
5. Sleep

Ok, now we know what we want to do, and also looks like the list in a pretty logical order, which is nice
After this we have to plan how we want to structure the project. Jumping to code too soon is a mistake waaay too many make in the beginning. First decide what you want your application to do (hey, we just did that, simplified), then go to the application design phase where you design the application architecture (graphical design is something i like to bring in pretty early too, but that's just because working with pretty things is nicer than working with .. ugly stuff ). Anyway, let's plan a bit how the application will be set up.

Since this is a pretty simple application we won't make too too complex with classes either. I chose to put the XML in the main class, just to make a life a bit easier (or more accurately faster, in this case)

I've chosen to have this divided to three classes

1. Main - The base for everything, also handles XML
2. ui.VideoChart - A grid with the buttons, places the buttons and handles load queuing for images
3. ui.Thumbnail - A button with a thumbnail from the video with built in image loader

The ui is the package, so they will have to be in a folder called ui, just like in AS2

I'll now go through all these classes, one by one, explaining what I'm doing. I'll first paste the full source of the class, so that it's easier for you to follow.

Note
Because of YouTube's crossdomain policy not allowing us to access their data, i'm using a crossdomain proxy for this. What we do is basically send the request to a server of our own, which will run a script that downloads the data needed from YouTube and then forward the data to us, with a crossdomain policy that's ok for us. This causes the webserver to download every file, causing a lot of extra bandwidth. Keep that in mind The crossdomain proxy script used in this example is included with the source.

----------

Main.as

----------

If you don't know any AS, this might seem a bit confusing, but when you break it down, it's really not.

In actionscript 3 you have to define everything inside packages. More on this later. We then define which classes we need to import for this class. Normally you obviously add these as required. Organizing them by package is good coding practice, but you do as you like. After this we define the class and make it extends the Sprite class, which is pretty much a MovieClip, but without the timeline.

We define the variables used in this class. The youTube_developerId is something you'll have to get yourself from YouTube. This is an API key required to access YouTube's application programming interface. Get your API key from here.

Ok, a bit more this time, but no to worry! Let's break it down, bit by bit. Since this function is called exactly the same as the class, it's called a constructor function, and is executed when the class is created. Basically this is the first code that's ran.

We first set a couple parameters to the stage to make it align in the top left corner and not scale at all. You AS2 users: notice the constants used here, no ugly strigs, but predefined constants instead. A new thing to to AS3.

After this we create a new TextField. This will be used for the logotype of the app. It's pretty self explanatory so i won't explain it close here. Google is your friend

The URLLoader however maybe doesn't look too familiar, and it isn't if you're an pre-as3 user. In actionscript 3 most external loads, excluding images and such, go through a class called URLLoader. We create it, and add an event listener. Again we have a constant for the event itself. We bind the event to a function we'll create later called xmlLoadHandler. This function will be executed with the event when the load has been completed. After this we load a new URLRequest, also new to AS3 with the path to the YouTube REST service. Check YouTube developer documentation for more info.

So, we have now created a new TextField, but it's not visible. Hmm .. attachMovie maybe? createEmptyMovieClip? Nope, in AS3 you just add the created display object to the display stack. In this case, since this class extends Sprite, we can just add the TextField to this class's display stack. We should now see a textfield on the stage if we compile. Cool

Time to move on. The YouTube XML has been loaded and xmlLoadHandler will fire.

We first create a new array which will store all the movies in an easy-to-access list.

Now comes the exciting part, parsing the xml. Actionscript 3 has E4X built in, which is really effective. You can now forget about all the firstChild.childNodes[3].childNodes[2].firstChild nightmares, with E4X xml is child's play. Let's see what happens here.

e is the event and target is the target of the event, the one that fired it. This way we have access back to the URLLoader. Content is the actual data. We create and XML object out of this data. Normally you'd now have to start looping etc to find what you want but with actionscript 3 we can simply say .video_list to access that node and .video to get a list of all xml nodes inside that node! Super effective! Also, with the new for each loop we can store the current item in the loop in a temporary variable, for easy & quick access. Smart. After this we create an object and store the items inside that object. We then push that object to the array, so that we have a "database" of items inside flash. That's it!

Just for comparison, here's the exact same code in actionscript 2:

Messy? Yep. Luckily this is all over with AS3. After this we create a VideoChart class, and pass the array of items to it. We then add, just like the logo, the VideoChart to the display stack.

----------

VideoChart.as

----------

The beginning is pretty much the same as in Main. Notice the package. Let's jump straight to the constructor

First we define two integers as 0, so that we can increase them later on. Notice the int, instead of Number. Int is for whole numbers (1,2,3,4 and so on), while Number still exists for floats. You should use int everywhere where you know you'll only have numbers without decimals as it's a lot faster.

We then loop through the array we got in from Main and create new Thumbnail classes for every item. We'll come to the Thumbnail class a bit later. We then position the thumbnails using really advanced elementary school math We'll want to know when the image of the thumbnail has loaded (so that we know when to start loading the next one) so a listener is a good idea. We add the thumbnail to the array, so that we can keep track of all the thumbnails, which is required for our load queue to work (we want to load only one image at a time). We then run the loadNextThumbnail() function, which will load the next thumbnail, or in this case, the first one.

That was a short one. Basically it checks if the list of loaded thumbnails is shorter than the list of all thumbnails (meaning that there are still thumbnails left to load) and loads the next thumbnail. The thumbnail itself will handle the loading, we'll just have to tell it when to do it.

Not much more to the VideoChart really, let's move on to the Thumbnail

----------
Thumbnail.as
----------

Again the beginning is pretty much obvious, or by this point old, so i'll skip it.

We first create a Loader class, which is used for loading images with AS3. We'll listen to the loaders onComplete event so that we can tell VideoChart that we're done and it can load the next image. When we create a new Thumbnail, we'll receive two parameters, an image (url) and an url (link to the youtube page), we'll save these as instance variables, so that they can be accessed when needed.

We then create a simple background shape, using AS3's new drawRoundRect, which will draw a rounded rectangle. I'm sure that'll come in handy several times Notice that we now access the drawing API through the graphics, not directly.

In order for this thumbnail to have a hand cursor we'll make it a button and well, make it use a hand cursor

We then listen for mouse clicks and run the clickHandler when the user clicks an item. After this we add the background to the display stack of the thumbnail.

We load an image and when the image has loaded loadCompleteHandler will fire, with the event itself as a parameter (just like the URLLoader, remember?). After this we'll store the data received in a Bitmap object, move it a bit (for the rounded corner) and add it to the display stack.

Ok, final one! When the user clicks the button, this handler will execute. All we need to do is to open the page in a new window, no biggie. Notice that getURL is gone, instead we have navigateToURL (which makes a lot more sense!). Also, you have to send the url wrapped inside a URLRequest object.

----------

That's pretty much it. This is just a quick introduction and i hope you'll get the spark to explore, experiment and learn. Actionscript 3 is what actionscript should have been from the start. It's more of a real programming language, where actionscript 2 is some kind of an attempt on true OOP, but not quite perfect. The actionscript 3 virtual machine is also a lot faster.

At the time of writing Flash CS3 hasn't been released, but will be soon. We all know it'll rock. Hard.

Have a good one, i hope you learned something!

The entire project's source can be downloaded from here

Download flame source.

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

Anyway, actionscript 3 is really cool and compared to actionscript 2 even more logical and structured. I can definitely recommend anybody working more or less professionally with flash to take a look at it. If you know actionscript 2 and words like "oop", "encapsulation" and "polymorphism" don't sound like hebrew, it won't be hard to get into it. Ok, I know Flash 9 isn't out yet (the beta is), but will be soon, and the penetration of the flash 9 player is growing day by day (View stats), so we can quite safely start using it soon. Too bad I just haven't had time to play with it more.

I could also mention one thing I found after switching to mac: the public beta does not work on intel macs. It runs, but crashes when publishing (some java thing). That sucks. Luckily as this mac has a heart (or brain?) made by intel it will run Microsoft's Windows without problems. As I mentioned I haven't had time to play that much with actionscript 3 recently, but found out that using the beta under windows with Parallels Desktop is really handy, and almost as good as under OS X (if not even better, as it's even faster than Flash 8 under OS X (this being since it's not a universal binary to you who have lived under a rock the whole 2006)). When using Parallels in coherence mode I can use the Flash 9 alpha preview just like Flash 8. Sweet!

Anyway, I'm sure you're not reading this to find out how I work.
You want the source, the good stuff.
The bits and pieces that build up the project I like to call "Revolt".
Fine, I won't keep you waiting.

Download the revolt source files (now working in CS3)

What this does is that it analyzes the frequencies of a mp3 file and visualizes it using presets that consist of different combinations of so called drawers, effects and scalers. It comes with 6 presets built in and making your own is really easy, since the engine is done. View the source of a preset and give it a try!

As with some previous source I've released, this goes out under the CreativeCommons Attribution-ShareAlike 2.5 license.

I have to mention that the song is not included with the download. This is due to copyright issues. Just put any mp3 in the same folder and rename it to song.mp3 (or change the path/filename in the .fla) and it'll work just fine.

Now what are you waiting for? I want links to your cool visualizers!

Update! When I wrote Revolt, Flash CS3 was just a buzzword. Not that it's out, i also noticed it's a bit different than the alpha. I have now fixed the source and tested it in CS3, it's now fully compliant!

A challange here and there is always nice, so I thought I'd take it on me. Javascript really isn't my thing, but I think the result turned out pretty nice.

Click here to view the example

I had three main priorities when writing this

• Easy to use & implement
• Accessible & search engine friendly
• Semantically correct markup

I think i managed pretty well. Give it a try!

Here's how it works:
Just add class="switch" to your existing links and include linkswitcher.js in your document. Style your links with css. The switched link will use a class called switchHover. View the source of the example css for further info. That's it!

Notice that you can't apply a margin or padding to the a element itself. Apply it to the parent element (in the example the li, see example 3)

The work is licensed under CreativeCommons Attribution-ShareAlike 2.5 license, which means that if you make modifications, you will have to share it under the same license. If you share it, I also want to be noted as the original author, with a link back to this site.
The usage for any purpose, however, is totally up to you.

Download source files

Anyway, the module. The whole day yesterday we enjoyed the company of Björn and Chris from Perfect Fools, talking about case studies, inspiration and other tips. I won't go into detail (you'll have to apply to Hyper yourself to experience it!), but all in all it was a really nice lecture. Perfect Fools as a company has done some really impressive flash stuff (check out their portfolio!), so most of us in Crew 12 got really inspired. Cool!

Ok, so what to do with all this inspiration. I was asked to have a lecture and/or workshop in flash for the crew. It was really hard for me to plan it, since we obviously have pretty much all levels of flash knowledge and interest in the class. Anyway, I decided to take it full scale actionsript 2.0, focusing more on "how to think & plan" than "how to do" (= copy-paste for many, without understanding what they're doing, hehe). Since we're having the portfolio module, creating a portfolio base seemed pretty reasonable. So, that's what we did.

A couple requirements: The portfolio has to be fully dynamic, using XML as it's source of data, for all data. Images will load in with a cool preloader and the user can easily change images with numbered links. So very simple in it's essence, but explaining the object oriented actionscript behind it, that was the real task. Below is a screenshot of the result (click it for the actual flash in a popup)

The code itself is pretty basic, straightforward actionscript 2.0, not anything special to somebody who's familiar with as2. I shared the code with the class, so I might as well share it with you. I've attached the source to the project to this post (do I hear cheers?). The comments are in swedish, sorry for that
Use the code as you like, but if you do, a link back would be nice

Note: All the photos used in this project are downloaded from http://www.sxc.hu, and are copyrighted to their respective owners. You may not use them for any purpose without contacting the owner.

Download source files

This is what we will be creating:

Circle visualizer | View source

Who is this meant for?
Well, if you're familiar with AS3, this probably isn't for you. My aim is to introduce AS3 to people familiar with AS1 or AS2. If you're not at all familiar with actionscript, I'm not sure this is for you, but you might follow along, and see how simple it actually is (for a rather complex example).

What do I need to know?
Basic knowledge of flash is required and some knowledge in oop and actionscript will help, but I'll go thru every aspect anyway, so you'll get it to work with copy-paste, if nothing else Still, if you want to learn something new, I suggest you read what I'm saying here, look at the examples, and do it yourself. Some knowledge of trigonometry & math will help you understand what I'm doing with the data (how i output it visually).

Alright, enough with the chit chat, let's start!

First of all you'll need the flash 9 alpha preview to compile, so if you don't have it, go get it from here.

Like with any project planning in advance helps a lot in the future, so let's write down a couple points on what we want to do. I was thinking of a circle where spikes come out depending on the music. If it's quiet it's nice and smooth, if there's loadsa action it's all spiky. Sounds good? Oh, and let's make it respond to beats! Mm, yeah, that oughta be nice. You can of course easily modify it later on, once you get a hang of how this stuff works.

1. Start by creating a .fla file. Give it a black background color, a framerate of approx. 30fps, and save it somewhere with the name spectrum.fla. We'll come back to this later on. Place some mp3 called song.mp3 in the same folder.

2. Let's create a class for our spectrum analyzer. Create a new .as file and save it as SpectrumAnalyzer.as in the same place as the .fla file is. Please note that normally you'd want to have all you classes in a central place (for structure and code reusability), but for the sake of simplicity we'll just put the .as file in the same folder.

3. Inside SpectrumAnalyzer.as add this:

Update: When this tutorial was written you didn't need to specify that the class is public. Now you do. So, we add public in front of the class

This defines our class inside a new package that extends Sprite (Sprite is basically a MovieClip, without the timeline stuff we don't need anwyay).

4. Currently we've got a class that has a visual appearance (just doesn't show anything yet), so let's go back to the .fla file and create an instance of that class. We'll also pass along what mp3 to play, and what size the visualization should be.

This imports the class, adds a new instance of it, and creates a child of that instance, placing it on the stage. addChild is similar to createEmptyMovieClip() and/or attachMovie() in AS 1 & 2.

5. Alright, we've got everything set up pretty good now, let's start getting in some data.

Let's start playing music. We create the contructor function that gets executed automatically when a class instance is created, and pass on mp3, _width and _height to it (which we sent from spectrum.fla, remember?). We store _width and _height as variables for future usage. Then we load the mp3. The syntax here is new to AS3 with the URLRequest class, but it's still pretty straight forward. We'll also offset the SpectrumAnalyzer with ½ of the height & width, so that it's in the center.
If you now publish spectrum.fla, you should hear that song playing.6. Ok, but this isn't an mp3-player, let's get some visual feedback!

If you look at the docs, you'll notice computeSpectrum, which is the key function here, wants a byteArray as an argument, so let's first create one, then make an onEnterFrame alá AS3.

You don't have mc.onEnterFrame in AS3 anymore, so initially this may seem confusing. Still, when you get the hang of it, it's a lot more logical. Anyway, here we're now listening to the Event.ENTER_FRAME event which is a constant of Event, equivalent to the string "enterFrame". The SpectrumAnalyzer broadcasts it automatically every frame because it extends Sprite, which eventually extends EventDispatcher, and executes a function called processSound every time. This way we're constantly processing the sound, which will result in a visualizer that changes all the time. A visualizer that doesn't update would be pretty boring, huh ? In the processSound function we add the SoundMixer.computeSpectrum to analyze the music that's playing and output it's values to a ByteArray which we've here called ba.

6. That's it really! We're now getting the music as a stream into ba, that gets updated every frame. If you look at the computeSpectrum docs, you'll notice that the ByteArray contains 512 floating point values, 256 for the left channel and 256 for the right channel. Now the real fun starts!
Let's draw the circle with our data, where we're putting the volume as the size of the circle at a certain point. This will make the circle look spiky since it's quite unlikely the volume at all frequencies is the same (unless it's totally silent)

We'll also add a couple variables so that we can easily later on change the appearance of the circle.

Ok, some more code here. This is pretty much the same you'd do in AS1/2, with the exception of graphics, which now is a part of the Sprite (you can't directly just use mc.lineTo anymore). First we clear whatever has been drawn from the previous frame, then we move the pointer up by the size of the circle and define the lineStyle according to the variables defined earlier. Then we loop thru 512 values in the ByteArray. This may seem a bit odd, but when you do ba.readFloat(); it returns the float value (0 and up), and moves on to the next value in the ByteArray. This way we can get all the frequencies very easily with a simple for loop.

Then some basic trigonometry (remember high-school?). Sinus & cosinus of 2 * pi is a full circle, and anything in between will go to that point. Sinus of pi is ½ etc. We then divide i with 256 to get a value from 0-2, depending on where we are in the for loop, and then multiply that with pi so that it'll draw a full circle when the for loop completes. We then multiply that with circleSize so that we get a bit bigger circle than 1px Then we multiply it with the level. At total silence this will be 0, and everybody knows that x * 0 = 0 -> we want to add 1 to make the minimum size of the circle circleSize, so that it multiplies the result of the sinus/cosinus with 1 or more, not 0. Pretty simple, but if you didn't get it (probably due to my messy explanations), just play around with it to see what happens.

7. Ok, so we've now got it acting to the music, but not quite the way we want it to. One side of the circle is upside down, which doesn't look as cool. The reason for this is that it continues around the circle, and since we're changing the channel, the first values (of the final 256) will be similar to first of the whole 512. Flipping the other side will fix that easily.
I'll leave out all the excess actionscript, because otherwise this page will eventually be reaaally long. Let's modify the processSound function a bit:

So, what's happening here? We store i in a temporary variable called a. If we modified i directly, it'd mess up the for loop, which we don't want to do. We'll want to flip the left side, and since a & i will start from 0 in the left channel, and 256 in the right channel, all we need to do is to add 256 to a, which is exactly what we do. This will fix the issue with the flipped ½ circle. We also want to move the pointer up to the original starting point (center-up) when we change from the left channel to the right channel, otherwise there will be an ugly line in the middle when the line draws from the bottom to the top.

If you now try it, you'll see it working correctly. Sweet!

8. Beat detection. We wanted beat detection. Ok, beat detection might be the wrong word, since we're done with all the sound analysis. Still let's collect the entire volume of the computeSpectrum snapshot, see if it's over a certain level, and if it is, scale the spiky thingy up a bit. Shouldn't be too difficult, but will add a cool effect.

First lets define a couple variables, so that we've got all the settings in the same place for easy manipulation later on

Alright we've added two settings, one which is how much we'll scale it up, and a second when we'll scale it up. 30 is just a value i got by testing, you might get better results with another number. You could trace out vol, which we're defining next, and determine a suitable level for the song you've chosen. The song i had here originally was Prodigy - Voodoo People (Pendulum Remix). Obviously I can't include it due to copyright issues etc.. And bandwidth isn't free either

Should be pretty straight forward. It adds up all the floats, and checks if it's over the value you defined. If it is, it'll scale the whole thingy to whatever you said, and if not, scale it (back) to 1. You could of course add several values with it, make it rotate at beat or whatever. Sky's the limit!

9. Well, we're pretty much done here. The next step really is to play around, use your imagination and make some cool visualizers. Using BitmapData and/or filters will easily make it look a lot better. This tutorial, however, won't go into that, just read the docs or check some examples/tutorials on google and you'll get the hang of it.

Here's the complete code:

Download source files

The file included with the zip above is DiscoFruity by Osnoff.

That's it! Hope you learned something new!
Feel free to comment with whatever is on your mind.