kelvinluck.com

I’ve just released my entry into the Nonoba Multiplayer API Kick Off competition. It’s a multiplayer take on the old memory cards game where you have to turn over pairs of cards and try to remember what was under each one. The multiplayer aspect makes it much more frantic and fun as other players are looking at the same cards at the same time as you and you don’t want them to steal your pairs!

While I was building the game I did a little prototype for the score board transitions using papervision which you can see by clicking the image below. Click anywhere in the movie to give a random player some random points (and so maybe rearrange the scores) and press any keyboard key to toggle some mouse following behaviour.

4 Comments | In: AS3, flash, flex, games | tags: AS3, competition, flash, games, imadethis, multiplayer. | #

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

A few months back I heard about a competition being organised by Ico Design, BD4D and the Wellcome Trust. The idea behind this competition was to “produce an interactive Flash piece that is playful and engaging using at least 2 words from the Word Soup”. The “Word Soup” is a collection of words that form part of the branding for the Wellcome Collection.

I managed to scrape together a little bit of time so I put together an entry. It was a mashup between the provided words and Flickr. I built it using Flashr and skinned it with a nice clean design knocked up by my good friend Leigh Kayley (based on the look and feel of the scramble game we found on the Wellcome collection’s site).

The entry is described quite succinctly in an article in Design Week so I’ll borrow their words:

Kelvin Luck asks us to look at images plucked from Flickr and choose from the wordsoup which one was used to tag the picture. It is harder than you think: what word could describe a masked woman in a spangly bikini who is wielding a chainsaw? Clue: it is not what you might think.

If that doesn’t explain it then you can play it yourself and see if you can get on the high scores. It can be frustrating at times because some people tag their photos a bit randomly but that adds to the adictiveness :)

Last night I was invited to the launch event for the new online exhibits site (where all of the competition entries are showcased) and the announcement of the competition’s winners. I was very surprised and pleased to find out that my entry got the second prize! Yay :)

I’d recommend checking out the site to see the many cool entries and the very nice innovative interface for finding them (also courtesy of Ico Design)

2 Comments | In: flash, flashr, flickr | tags: as2, competition, flashr, flickr, games. | #

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

It’s been a long time since I’ve posted here because I have been crazily busy working on a massive flex site with a great team over at Tribal DDB London. Hopefully it will go live at the start of next year so I can talk more about it. In the meantime, here is a quick tip for anyone having trouble connecting to a VPN powered by Juniper software’s Network Connect after installing the trial version of Flash CS3.

After installing a trial of Flash CS3 I noticed that I became unable to connect to the VPN. Network Connect would connect briefly and then pop up an alert saying “The Network Connect session terminated. Do you want to reconnect? (nc.windows.app.23711).”

After a bit of googling I found out that there were complaints about the early betas of CS3 and the Bonjour service that they installed affecting networking. And this is what was causing my problem. If you press Ctrl-Alt-Del and look at your processes then you will find a “mDNSResponder.exe” service running after installing Flash CS3. Ending this process allows you to connect through Network Connect.

You will have to do this every time you have restarted your computer as the process is automatically started with the system. Alternatively you can stop the service which starts the mDNSResponder process.

Go to Start Menu > Run and type in “services.msc” to open the services configuration panel. Look for a service with a name something like “##Id_String1.6844F930_1628_4223_B5CC_5BB94B879762##” (I think the bit after the dot will change on each computer). To confirm it’s the correct service double click on it and look at the “Path to executable” – it should be “C:\Program Files\Bonjour\mDNSResponder.exe”. If it is then change the “Startup type” to “disabled” and press the “Stop” button. You should now be able to connect to your VPN.

As far as I can tell, neither of these solutions have had a detrimental effect on my trial install of Flash so I think that they are safe changes to make but no guarantees! Hopefully the information will save someone the time it took me to find the answer.

No Comments | In: flash, general | tags: error, flash, vpn. | #

At the end of last week I visited Stuttgart, Germany for FlashConference and I have to say it was wicked! A week later I’ve finally found the time to write a quick overview of the conference…

First up a massive thanks to Mario for getting me on the guest list and motivating me to make the journey – it was definitely worth it. A top notch list of very inspiring speakers – if I had any complaints it would only be that they tried to fit so much into one day so there was no space between the sessions (not even for lunch!).

The day started with a bit of an infomercial from Adobe, nothing particularly new although I’d never seen Scout before and it was a pretty nifty apollo sample app (basically a web browser with some of the features from Firebug and the web developer toolbar built in).

Then Ilias Sounas gave a talk showing how he had made some of his animations in Flash and talking about the importance of telling a good story. He also screened some of his animations – Circle of life was my favourite.

Next up Peter Elst gave an insight onto developing Flash for alternative devices. Everything from PSPs and Nintendo Wiis to Chumbys and other strange devices. Very interesting stuff and an area I definitely want to find some excuses to do some work in. Luckily Peter also had a bunch of ideas for how to convince your clients that building flash stuff for these devices is a good idea so maybe I’ll be able to use those ideas to convince some clients…

Then Claus Wahlers gave a talk about the Flash CS3 components which he helped to build. They definitely look like they are a major step forwards from all the previous ones especially in terms of how easy they are to extend and skin. I’m looking forward to getting my copy of CS3 and playing with them…

I skipped the next session (“Mercedes-Benz E-Class Experience Paris-Beijing”) because I needed to get some lunch! So did quite a few other people and so I got to meet up with Ralph, Asger, Martin, Peter, Claus and Wouter.

After lunch rushed back in for Mario’s session: “The blind Sketchmaker” – Artificial Creativity and Evolutionary Art in Flash. He started by discussing whether computers could create Art. After deciding that this wasn’t the case (as Art is more than just a picture – it’s a complete belief system around it) he went on to prove that he certainly could! He wrote an AS3/ Apollo app which could analyse pictures by many different criteria and learn rules about what makes a “good” picture. The program could then evolve it’s own pictures applying these rules to decide which direction to evolve in. He then got some of these generated pictures painted as full size oil paintings courtesy of a company in China who sent him some spam. Amazing, inspiring stuff – check out the finished artworks on flickr.

Then came Marcus Weskamp who talked about his experience building Wieden and Kennedy’s site. This site needed a way to display the hundreds of jobs this advertising agency has done and Marcus put his data visualisation skills to good use creating a timeline and 3d nodemap showing how all the projects, offices, people and clients were related to each other. Especially interesting was how the idea for the site evolved as a result of meetings between Marcus and his client.

Next Holger Eggert gave an insight into creating animated films in Flash. He gave an insight into how to construct a good story and use Flash/ Photoshop/ After Effects to make it real and he showed some of his work (and work in progress).

Finally, Andre Michelle gave an overview of advanced audio programming in Flash together with a hack which makes it possible to basically write your own samples in Flash and play them back. He demo’d a bunch of little apps he’s built from 303 simulators to little drum machines to .mod file players and tested the conference sound system while he was at it! Again, amazingly inspiring stuff, I need to find some time to play with all of this!

After that we all managed to get into the speakers dinner/ drinks and thus started a big night in Stuttgart… But that’s a different story!

As I said, the conference was really inspiring and it was great to get to meet all of the people involved too. Now that the hangover has died away I’m looking forward to finding some time to play with some of the new ideas I’ve got and looking forward to next years conference!

1 Comment | In: flash | tags: conference, flash, review. | #

Shared fonts in Flash have always promised a great deal but failed to deliver due to a confusing and buggy implementation.

Recently I built a site which made extensive use of shared fonts. To make the site load smoothly it is made up of a number of swfs – one for each section. And rather than embedding Helvetica Nueue Bold Condensed (the font used for navigation and headings) in each swf I used a shared font. This means that the 17kb of font information is only loaded once and is then cached and shared between swfs. This seemed to work exactly as advertised with none of the bugs I remember from previous attempts – maybe something was fixed in the Flash Player?

So far so good. But then I ran into a problem… The site is available in a variety of locales including Russia and Poland. These require different versions of the font (the Cyrillic and Central European respectively). The problem is that Flash doesn’t provide a way to dynamically choose a shared font library to load – the location of the shared font is hard coded in the library item in your FLA.

So what do you do? Abandon shared font libraries and dynamically load a different font swf dependant on the locale and use actionscript to apply a text format referencing the correct font to all of the relevant text fields? Pay for the Shared Fonts Manager? Neither seemed like a nice solution so I tried something else…

Instead of pointing your shared font directly to an swf you instead point it to a serverside page (of the technology of your choice – the site above uses .NET while the example below uses PHP). This page reads the current locale from a cookie and passes the correct font swf back based on this value. Surprisingly enough this seems to work perfectly and allows Home of HD to work across different locales while providing only the necessary font to each user.

An example is probably worth a thousand words so you can see this technique in action and download the source files if you want to see how it’s done.

The only other issue is that you want your fonts to show up while developing. No problem. Just rename the default font swf file to the name of the serverside script (e.g. fonts.php in my example) and magically it works. Just remember not to overwrite your actual serverside script with this dummy one when you upload your changes!

Update

While writing this article and looking for links about shared fonts I stumbled across a post by Mario Klingemann where he suggests this exact technique. Back in 2003! Since I already wrote the examples and article I thought I might as well publish it but kudos to Mario for coming up with the idea years before me!

15 Comments | In: flash | tags: flash, flash8, fonts. | #

I’ve recently been working on a project where a number of swf’s use common classes. The initial swf loaded contains most of these classes but so do the child swfs it loads into itself. This is because they need to be able to call methods in and dispatch events to classes in the main swf. Importing the classes gives me compile time type checking and auto complete (in FDT – my editor of choice).

So I discovered excude.xml files. These allow you to specify classes which you don’t want to be compiled into a given swf. Since all AS2 classes live in the _global scope you can share them between different swf’s. So if your initial swf includes a class that you use in a child swf you load into it then compiling that class into the child swf is redundant.

exclude.xml files are easy enough to understand – simply create a file with the same name as your fla but with _exclude.xml added on (e.g. nav.fla would have an exclude file called nav_exclude.xml) and in it list all the classes you want to exclude from compilation into that swf.

The problem with exclude.xml files is when a class you are excluding has a dependency on other classes the dependant classes aren’t automatically excluded. And manually figuring out the dependency tree in any non-trivial application is tricky to say the least. So what we need is a way to find all of the classes which are included in a given swf. You can then use this to generate an exclude list for any other swfs that will be loaded after it.

I found a program which sounded like they might do just that: sexieR on OSFlash. Unfortunately I got put off by it’s requirements and and didn’t get around to finding out if it could do what I wanted.

Then I realised I could generate the exclude list very easily myself from Actionscript! Since all classes are instantiated as Objects in the _global namespace we can simply recursively loop over this namespace and note all the classes we come across. So I wrote my “IncludedClasses” class, which does the above and outputs a string for you to copy and paste into an exclude.xml file. You simply have to temporarily include this line in your “master” fla (the one which contains the classes you want to access from other flas):

Then in the output window you will find a string which you can copy and paste into an XML file with the correct name and then – bobs your uncle – you’re sorted :)

The IncludedClasses class is shown below or you can download it here.

So simply run this script in your “master” fla (or library fla) and then create exlude files for all your “slave” fla’s. In the project I’m working on this knocked 30-40KB of each of the included swf’s which makes it definitely worthwhile.

8 Comments | In: flash | tags: as2, flash, flash8. | #

I just came across an annoying bug in Flash running in a browser which appears when you use PrintJob to print a TextField with embedded fonts where “anti-alias for readability” is selected… The bug manifests itself by drawing a big green box behind these TextFields.
Since a google around didn’t seem to reveal anything I thought that I would make a note of the problem and my solution (such as it is) here.

The Problem
The problem is exhibited in the swf embedded below:

When this is playing in a browser (I tried IE/PC and Firefox on Mac and PC with the Flash 9 player) and you press the print button your printout will looks something like this:

Hmmmm! Where did that big green box come from?

If you want to recreate this problem yourself you can download the files from this example here. Bear in mind that the bug doesn’t manifest itself when you are testing from the Flash IDE. I’m not sure if this is because it is a bug in the Flash 9 player or in just in the player when it is running in a browser…

The solution
Not much of a solution but as you can see in the test above this bug only bites when you are printing an embeded font which is set to “anti-alias for readability”. So the way to avoid the problem is not to select this method of anti aliasing when you are embeding fonts and printing a movieclip.

Hopefully this page will show up in google and will save someone else the hour I wasted trying to figure out what was going on!

5 Comments | In: flash | tags: bug, flash, flash8. | #

It was announced on the flickr mailing list last week that flickr.com were making some changes to how their API works. Those changes have completed today with the removal of the crossdomain.xml file from flickr.com.

What does that mean for me?

If you wrote a flash application that used the Flickr API then you will need to make a small change to it and recompile it. If you don’t do this then your swf will not be allowed to connect to flickr.com and query the API and so won’t work.

Why did they change it?

Not just to annoy all flash developers! Basically, the way the API was previously set up, any flash file could request any data from flickr.com (not just via the API). So it would be potentially possible for someone to craft an “evil” swf which could connect to flickr.com. If the viewer’s browser was logged in to flickr.com then this evil swf could potentially do evil stuff like deleting their photos.

How can I fix my app?

Luckily, the fix is very simple. If you are using Flashr you can just apply the changes in this changeset.

The change you have to make will depend on whether you are using version 0.4 or 0.5 of Flashr and should be self explanatory. Basically you are just telling Flashr to connect to http://api.flickr.com/ instead of http://www.flickr.com/.

It only took me a little while to update Selfportratir, my interestingness experiments and my colourfields experiment. Mario and Doug have both posted about this too and have updated their various experiments.

If you’ve written any Flash applications that connect to flickr please check they are still working or apply the fix, if you come across any other sites where Flash is meant to be connecting to flickr and you just see a blank screen then please let their makers know.

I’m not going to update some of my older experiments and examples because version 0.5 of Flashr is going to be released very soon along with a shiny new microsite and I will put new versions of everything up there.

No Comments | In: flash, flashr, flickr | tags: flash, flashr, flickr. | #