kelvinluck.com

A couple of weeks ago I attended the FitC Amsterdam conference which was great fun. One of the most inspiring sessions I saw was Andre Michelle‘s “Making REAL Music Within Flash” where he talked us through generating sound in flash using the infamous flash sound hack and then showed us how he is redefining what should be possible in flash by building the hobnox audio tool.

I travelled to Amsterdam by train and ferry which meant that I had some spare time on the way back to play and luckily Andre and Joa Ebert have released the complex code behind the flash sound hack as part of their popforge open source library.

So I built my Wave Sequencer. The idea is that it loads in a wav file and splits it into 16 equally sized chunks. You can then re-arrange these chunks to create new variations on the beat. Each 16 chunk section is a pattern and you can create up to 16 different patterns by choosing different patterns from the “pattern bank” at the bottom of the screen.

The loop I’m using is the famous Amen break and I’ve sped it up a bit (and given you a slider so you can control the speed yourself). If you play around with it you’ll see you can slice and dice your own old skool jungle riddims :)

Note: If you are experiencing choppy audio then you are probably running the latest revision of the flash player (9.0.115.0) which breaks onSoundComplete. So join the petition and ask Adobe to make some noise. I’ve compiled a standalone version of the app against the older 9.0.28.0 player and you can download the PC standalone version which doesn’t have the audio issues.

Obviously this little experiment is very rough around the edges and there is a lot that can be done to improve it but I’ve been too busy with “real work” to look at it in the weeks since I got back from FitC and I thought it was better to publish it as is than to leave it to get lost on my hard drive…

My code here is really simple, all of the complex stuff is done by the popforge library. So big thanks to Andre for the inspiration and the sourcecode :) Hopefully I’ll find some time in the coming months to take this a lot further and to turn it into an AIR app which is actually useful!

No Comments | In: AS3, audio, flash | tags: AS3, audio, conference, flash. | #

Last week I went to the Flash on the Beach conference and as has been said by many people, it was amazing.

I decided to go for more of the inspirational rather than technical sessions and saw some absolutely amazing speakers including (in order of appearance): Hoss Gifford, Joshua Davis, Brendan Dawes, Craig Swann, Mario Klingemann, Robert Hodgin, Erik Natzke, Chris Allen, Dr Woohoo, Andre Michelle, Marcos Weskamp and Jared Tarbell. Wow!

And as well as all these amazing talks there was the opportunity to meet loads of friends – old and new – and to chat about geeky stuff. And then there was all of the booze and the parties… And a girl in a box!

Anyway, one particular example from Robert got me thinking and wanting to play… He mentioned the PerlinNoise function and talked about how it could be used to simulate flocking. And he showed a slide where a perlin noise image had been used to set the rotation of a set of arrows displayed on top of it. I wanted to play with this and had a little bit of time over the weekend so I managed to come up with this:

It’s really simple stuff – you can get the sourcecode and see the process that it evolved through here. The code isn’t beautiful or optimised as I was trying to concentrate on playing rather than doing it right (a concept which seemed to be a recurring theme of the conference).

And I wasn’t the only one who got interested by Robert’s mention of perlin noise. Seb Lee-Delisle posted on Sunday about 3D Perlin Noise in Flash – it looks like a really interesting way to take this further. I can’t wait to see what he comes up with and hopefully to find some more time to play with it myself :)

6 Comments | In: AS3, flash | tags: AS3, experiment, flash, perlin noise, sourcecode. | #

I decided it was about time that I learnt how to use Flex. The best way to learn is always by building something so I decided that I’d build a little app to connect to the Slim Timer API and make it easy to keep track of your time. It seemed like something that was perfectly suited to Flex – built from UI components and connecting to an XML webservice.

So here it is: Slimmer Timer. You can download Mac and PC versions as well as seeing a screenshow on the project page at that link.

Although building the app was relatively straightforward, there are some gotchas that I ran into which I thought I would expand on a little here… All of these issues are as I experienced them in the standalone debug player – they may happen differently in the browser plugin.

• Setting contentType and a custom “Accept” header on a HTTPService only works when the method is POST. If you change the method to GET then these extra headers aren’t sent along with the request.
• The HTTPService.method documentation is very misleading… GET and POST are the only valid values unless you are using FDS as a proxy. More info on that on this post on FlexCoders

The solution to these problems was to wrap my generated swf in a Screenweaver Hx program. This makes it easy to write a little bit of haXe code which can intercept network calls from the flash and act on them. The haXe wrapper adds the required HTTP headers to my GET calls and also allows Flash to make PUT requests.

To support HTTP PUT requests I appended a “put=true” onto the URL requested by Flash which the haXe wrapper detects and then changes the HTTP request type. haXe’s HTTP class doesn’t support methods other than GET and POST but because it is open source I could easily extend this class to suit my needs. The haXe files I wrote can be seen here if you are interested…

As well allowing me to tweak the network behaviour and therefore make my app work, Screenweaver allowed me to remove the chrome from the app window and make the app slightly transparent. These extras help it to live up to it’s name of “Slimmer Timer” :)

As SlimmerTimer was my first foray into the world of Flex it’s not as well coded as it could be. I’m currently rewriting it using the Cairngorm framework so there may be a better version out some time soon but for now I think it’s quite useful as what it is – a simple little app for keeping track of your time.

No Comments | In: AS3, flex | tags: flex, haXe, project, screenweaver. | #

The evolution of my ActionScript 3 project has continued. Here is the current swf (remember you will need the Flash Player 8.5 to view it):

As you can see, it’s a whole heap more exciting now… It still creates the mosaic tiles from the original jpeg in the same way as the previous examples but now each tile also listens for an EventType.ENTER_FRAME event. This is basically the same as having a MovieClip.onEnterFrame event handler in older versions of Flash. Each tile is repulsed by the mouse using Barslund Repulsion (thanks to a script I grabbed from Solid Ether).

Here is the code for the example in it’s entirety:

Fairly simple really… And if anything it seems way more efficient and responsive than my attempt at bounce tweening in the last example…

Comments or suggestions for improvements appreciated :)

2 Comments | In: AS3, flash | tags: AS3, flash, sourcecode. | #

I have taken my first attempt at ActionScript 3 and refined it a little… The first attempt was a very simple mosaic tool which created a mosaic from a jpeg. In this version I have improved it in a number of ways:

I now first blur each section of the image to get more of an average colour for each tile. This was a good excuse to use one of the flash.filters.* in AS and also gives a slightly better looking result. It still isn’t perfect but I spent quite a while searching the web and couldn’t find any good algorithms to find the average colour of a given bitmap (I’m sure they exist though – if you know one please leave some info in the comments).

I also decided to make the example a little bit more exciting by adding some movement to it. I initally did this by using the mx.effects classes but then I realised that these were adding 210KB to my file (unless I missed a “SimpleTween” class somewhere?). I presume that is because they depend on the whole Flex Framework but in this case (where my swf does pretty much what I want at 2KB) it seemed like some unnecessary overhead.

So I wrote a very simple little Tween class based on the new flash.util.Timer class and borrowed one of Robert Penner’s easing equations…

So here is the resulting swf (note that you will need the flash player 8.5 to view it and that the movement happens when the swf loads so you may have to refresh the page to see it move):

And here is the ActionScript to make that swf:

If you compare it to my previous effort you will see that it is pretty similar… The additions are the BlurFilter and the new Tween class… They should be clear enough… The Tween class is very quickly knocked together and isn’t meant to be a proper generic replacement for the Macromedia ones but I think that such a beast may be necessary if the Macromedia ones are going to create such big files… Hopefully the next version of the zigo tween kit from Moses Supposes will include support for AS3…

Anyway – any comments on the code or suggestions for improvement appreciated :)

2 Comments | In: AS3, flash | tags: AS3, flash, sourcecode. | #

Macromedia have just released the Flex 2 Product Line which includes the Flash Player 8.5 and ActionScript 3. It’s only an alpha but it’s a good chance to start playing around with the next generation of the Flash Platform.

Below is my first little experiment. It’s currently very simple and doesn’t do anything that you couldn’t do with Flash 8 but I think coming up with simple little projects like this and making them is a good way to learn the new syntax.

First up, here is the swf (note that you will need the flash player 8.5 to view it):

And here is the code that generated the swf:

As you can see, we load a jpeg in and then loop over it getting the colour every TILE_SIZE pixels. We then create a new Sprite which we draw a bunch of Shape’s (in this case squares) onto. The result is a mosaic like effect (I remember doing this in the early days of Flash 5 – a much more complicated process involving using PHP to analyse the image data).

Obviously a lot of room for improvement (getting the average pixel colour for a tile, having the image be dynamic rather than programmed into the AS etc etc) but not bad for the first couple of hours with a new language.

Any questions or suggestions for better ways I could have done things please use the comments :)

4 Comments | In: AS3, flash | tags: AS3, flash, sourcecode. | #