Flash Midi Server 0.1 released + Sonar source code and audio air apps.

The title says it all really. I’ve updated the project page, but I’ll add the info here too incase you’re reading this through an RSS reader.

Flash Midi Server v0.1

Lawrie Cape 2010
Download from the Google Projects Page.

WHAT IS IT?

Flash Midi Server is method for sending MIDI data out of Flash. Using an Actionscript 3 class and a Processing application, you can create generative,

dynamic, fun audio tools in Flash.

WHY?

Mainly just for fun. Flash Midi Server (FMS) started as an experiment to test communication between Processing and Flash. From there it developed into a

class I played around with a lot – seeing what fun things I could use it for.

As FMS is built in Flash, it allows developers to rapidly prototype audio tools, experiment with new input methods and acess to a huge public code base to

build on top of. There’s a huge amount of technical skill and creativity in the Flash scene and hopefully some of it will be applied to creating innovative

new audio apps using FMS.

HOW DOES IT WORK –

FMS sends data from Flash to the FMS server – which then sends the data as a Midi signal.

Firstly run the FMS app in the “Server App” folder.
Then run one of the Flash or Air apps. Note – you cannot run .swf files as they do not have the security permissions to access the midi server, unless you

set the permissions here – http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

You can set which Midi Channel the audio is played through via the drop down on the FMS app.
Windows XP has “Microsoft Midi Mapper” which plays the notes back over the soundcard. Mac OSX has a similar default Midi Playback setting.

To use FMS with other audio apps, you must install virtual midi softward. For example – LoopBe http://nerds.de/en/loopbe1.html
These channels will then show up in the FMS settings drop down.

HOW DO I USE THE CLASS MYSELF? –

Place the uk.co.lawriecape.midi folder structure in you classes folder.
You can then check out the .Fla sources in the “Example FLAs” folder.
A basic setup can be seen below –

In flash –

//Import the Flash Midi Server class.
import uk.co.lawriecape.midi.flashMidiServer;
//Create an instance of the class.
var MS: flashMidiServer = new flashMidiServer();
//Add event listeners for the various Server events - (optional)
	MS.addEventListener("FLASH_MIDI_SERVER_ESTABLISHED", connectionEstablishedHandler);
	MS.addEventListener("FLASH_MIDI_SERVER_LOST",        connectionLostHandler);
	MS.addEventListener("FLASH_MIDI_SERVER_NOT_FOUND",   connectionNotFoundHandler);

function connectionEstablishedHandler(e:Event):void{
	trace("Flash midi server connected.");
	trace("You can start sending data now!");
	MS.sendNote(50);
	//or
	//MS.sendCC(50);
}

function connectionLostHandler(e:Event):void{
	trace("Flash midi server disconnected.");
}


function connectionNotFoundHandler(e:Event):void{
	trace("Flash midi server not found, please check the program is running and try again.");
}

WHAT COMES NEXT? –

There are quite a few limitations to the current system, which I’ll be trying to address in future releases. These include –
The ability to send CC data on specified CC numbers.
The ability to have audio output on multiple midi channels at once – to controll multiple instruments from a single server instance.
The ability to send multiple notes at once – eg. Chords or simultaneous drum hits.

If you have any suggestions, or make anything using FMS, please get in touch with me.
Cheers.
Lawrie.

Lawrie at LawrieCape.co.uk

See also –

Flash Midi Server – Sonar reproduction. from Lawrie Cape on Vimeo.

Download the source code for Sonar from the Google Projects Page.

Flash Midi Server – Processing + Flash + Webcam Instrument from Lawrie Cape on Vimeo.

AS3 Quick Tip – Remove a specific item from an array.

I’ve been working on a project today and needed a function to remove a specific item from an array. This is what I came up with, so I thought I’d share it here.

var myArrayOfLetters:Array = ["a","b","c","c","d","e","f","g","c"];
removeItemArray(myArrayOfLetters,"c");
//This will remove all instances of "c" from your array - so you will end up with
//a,b,d,e,f,g
 
function removeItemArray(thearray, theItem):void{
	trace("Remove "+theItem+" from "+thearray);
	for(var i:int=0; i

This will remove all instances of theItem from your array. If you know there will only be one instance of the item in the array, you can add "break;" to the conditional in the loop to save CPU.

var myArrayOfLetters:Array = ["a","b","c","d","e","f","g"];
removeItemArray(myArrayOfLetters,"c");
//This will remove the first instance of "c" from your array - so you will end up with
//a,b,d,e,f,g

function removeItemArray(thearray , theItem):void{
	trace("Remove "+theItem+" from "+thearray );
	for(var i:int=0; i

Hope you find it useful.
Lawrie.

Flash Midi Server – Processing + Flash + Webcam Instrument

Right, this has been something I’ve had in development for a while – and I’ve finally decided to put out a video demo. More info, videos, audio and hopefully source coming soon.

Flash Midi Server + Webcam image to audio app

An early test of my Flash Midi Server – used to send Midi notes and controllers from within Flash movies.

This early demo shows the Processing based Midi server (blue app in the bottom left), and also a Flash Webcam based audio tool. The Flash app takes still images from a webcam, and analysies them for 4 colours within them. These colours are then mapped to a range of notes, so for example, a white image will send a high note, whilst a black image wil send a low note. These notes can then be played back using Midi, and the corresponding images are displayed.

As an extra feature – the “activty level” (amount of movement) in the webcam can be monitored, and sent as CC data, to alter any settings. Here it is linked to a paramater of the midi instrument.

More polished versions coming soon.

Hopefully some nicer audio coming soon too : )

Bitmap Explosion Effect + Cool Flash links.

I’ve got a few games in development at the minute, so nothing much finished to show off. What I will do is show you one of the fun effects I’ve been making and point you in the direction of a couple of really cool projects other people have made recently.

Hot on heel of my first ever 3D flash gamePlug In Media have launched a phenomenal site, using 3D in flash to amazing effect. There’s far too much cool stuff going on to mention, so if you haven’t seen it already – go and check it out.
seb
One section I liked especially, was the hand painting. Check out my artwork –
handsPaint

Another cool site launched recently, is Studio Luden’s Repper. It’s a flash app for creating seamless tiling images, and is really fun and easy to use.
You can read up on Repper here. I’ve requested live webcam support, which would be great fun. Here’s a creepy kitty head I made with it – a very headache inducing background.
kitten

And finally, sticking with the theme of cat’s heads – here’s the explosion effect I’ve been working on. You roll over the images to explode them into particles, and you can then roll over each of those to explode them further. I’ve not optimised it yet, but it’s running quite well in LOW quality.
catHead

Let me know what you think.
Cheers.
Lawrie.

AS3 – Amazing Map Function.

One of the things that makes the Flash community so strong, is the willingness of coders to share their work. I learned actionscript from people sharing code, and that’s what’s inspired me to start sharing some of the things I’ve been working on too. So I thought a good starting point would be to draw peoples attention to a few of the great Classes and Functions that I’ve found on blogs and messageboards, which I regularly use in my projects.

One brillaint function I’ve used in practically all of my projects since finding it, is Joel Gillman’s Map Function.

Joel’s Map function “Re-maps a number from one range to another“, which might sound like quite obscure functionality, but I use it for all sorts of different things. Let’s say you want a movieclip’s alpha to vary based on the user’s X mouse position and its rotation to vary based on the Y mouse position. Instead of writing lots of math, you can wrap it up in the map function.

Let’s take a look at the code –

function map(v:Number, a:Number, b:Number, x:Number = 0, y:Number = 1):Number {
    return (v == a) ? x : (v - a) * (y - x) / (b - a) + x;
}

Now that might look pretty confusing – but it’s usage is actually really simple. The map parameters are structured like this – map(value, low1, high1, low2, high2);
So you feed in the value you’re altering (for example mouseX), the lowest that value can be, the highest that value can be, the lowest return value you want, and the highest return value.
Right, let’s take a look at this simple example –
[kml_flashembed fversion=”9.0.0″ movie=”flash-content/MapClass/UsingMapCircleBlog.swf” targetclass=”flashmovie” publishmethod=”static” width=”400″ height=”300″]

Get Adobe Flash player

[/kml_flashembed]

And the code that made it –

var SW:Number = stage.stageWidth;
var SH:Number = stage.stageHeight;

var c:MovieClip = new MovieClip();
	c.graphics.beginFill(0xff0000,1);
	c.graphics.drawCircle(0,50,50);
	c.graphics.endFill();
	c.x = SW/2;
	c.y = SH/2;
	c.addEventListener(Event.ENTER_FRAME, circleEvents);
	addChild(c);	

function circleEvents(e:Event):void{
	trace(mouseX)
	e.currentTarget.alpha =    map(mouseX, 0, SW, 0, 1);
	e.currentTarget.rotation = map(mouseY, 0, SH, 0, 360);
}

function map(v:Number, a:Number, b:Number, x:Number = 0, y:Number = 1):Number {
    return (v == a) ? x : (v - a) * (y - x) / (b - a) + x;
}

So in that swf, the circle’s alpha varies between 0 and 1, based on the mouse’s X position, between 0 and the width of the stage. So, every frame I calculate the alpha using the map function. To set that up, I use the line –

	e.currentTarget.alpha =    map(mouseX, 0, SW, 0, 1);

I’m monitoring the mouse’s X position, with a minimum value of 0, a maximum value of the stage width, and I want it to return a value between 0 and 1. Simple.
Similarly, the circle’s rotation ranges from 0 to 360, based on the mouse’s Y value – which ranges from 0 to the height of the stage. So –

	e.currentTarget.rotation = map(mouseY, 0, SH, 0, 360);

I hope you find this great function as useful as I did.
Cheers.