Archive for the ‘Flash Experiments’ Category

Cheating mobile step counters

Monday, May 4th, 2015


Got involved in an inter-agency stepping competition using an app-based pedometer. It seemed kinda accurate but inevitably, my curiosity drifted towards trying to figure out how to automatically gain steps while watching TV.

Cue my trusty Arduino, a small RC car servo, some blu tac and some precisely tweaked variables. Took a while to find the optimum ‘swing, pause, swing back’ timings. Too quick and it didn’t register the pauses either end. Too slow and it didn’t think it was a complete step. Eventually arrived at the Goldilocks setting. Just right.

Here’s the result. Works with a FitBit too btw.

The making of The Jenson Button ATM

Monday, December 15th, 2014

Santander is one of our biggest clients at WCRS and they call on us for everything from TV ads to posters… and at Christmas time, their Secret Santa(nder) event. Here’s how it works, each year Santander reward their customers by giving something back. This year, WCRS’s Howard de Smet came up with a cracker of an idea… the Jenson Button. Quite literally, Jenson Button, in an ATM. An unsuspecting Santander customer uses the ATM but is asked to “Press the Jenson Button” to receive their cash. Ah, just watch the video…

Here’s a keep behind the scenes of how we make it happen.

Step 1: The very first sketch of the build in my notepad. Note also the list of things to buy. As it happens, it was pretty accurate from the get-go. I was desperate to build it all in my garage but thought better of it!


Step2: The ATM build. Hand constructed from MDF at a prop making workshop.


And from the back. Note the beginnings of a hinged screen holder and release mechanism.


Step 3: The late night installation. The build started at about 5pm.


Step 4: The final construction with decals and posters. You wouldn’t suspect a thing.


Step 5: With touchscreen installed. Note the hole above the screen where the GoPro is housed.


Step 6: Rigging camera and sound. There were about 8 cameras in total. Some mobile, some in the ceiling and some hidden in places you’d never suspect… like this speaker. The GoPro lens is in the middle of the top speaker cone! We even had one camera in a pram disguised as a baby. No, really.


Step 7: Setting up the system and the cash. Note the utility panel on the laptop and the small webcam feed. The webcam feed looked down on the fake ‘contactless pad’ so that we knew when someone wanted to start the process. The utility panel allowed me to control what the ATM screen displayed as well as feed back the cash amount the customer typed in so Jenson could use it in his dialogue.

If you’re interested, the control between screens was done in Flash using LocalConnection to send messages between the screens.


Step 8: Installing the Jenson. I’m a massive F1 fan so this was pretty special for me. I was sat on the other side of that black curtain to the right and handed Jenson the bundles of cash. Yes, I get paid to do this.


Step 9: The final, most important step… the slightly dorky selfie with the effortlessly cool Jenson just so that I could prove to my kids that I wasn’t making this up.


Box2D Javascript test

Thursday, March 13th, 2014


I’ve just indulged myself in some physics therapy. I *FINALLY* managed to get a few hours to play with the JavaScript port of the infamous Box2D.js physics library. Not fantastically exciting, but at least it’s a start!

Why is this even remotely interesting? Well, I’ve had a bit of a history with physics engines. Way back in the early days of Flash 5 and AS2, I was pulling together a team to make a pinball game to promote a new Disney movie. A contractor took on the job of writing the physics engine but half way through, he decided his work was too ‘valuable’ and wanted to license it to us instead. Honour and morals are pretty high on my list so that approach didn’t go down too well. So I did what any Creative Director (with barely a C-grade in O-level maths) would do… I decided to make one myself. How hard could it be? Turns out it was quite hard, took lots of “vector maths for dummies” research and annoying my ‘real coder’ colleague Jop with random circles and lines scribbled on napkins. But we got there. I think I OD’d on vector maths a little, hence haven’t been near a physics engine since.

The engine I made was quite ‘creative’ in its approach. It had all sorts of optimisations to make it run on slower computers, especially given how bad browsers where back then. I’ve managed to dig out a debug version (excuse the dead fonts). This version has the visualisation of my “hit zone optimisation” turned on. As the game starts up, it registers every element of the table and every section of curve. It only bothers to work out which areas to properly calculate based on the ball’s immediate surroundings. It sped the calculations up something like 400% when I switched it on for the first time. Click on the image below to launch it in good old-fashioned Flash and you’ll see how it highlights first the quarter of the table to concentrate on, then the individual areas within. Just click yo get started and use the cursors (down arrow to pull the spring back). Have fun!



Static flow of water – explained

Monday, April 23rd, 2012

A few friends have asked me for an explanation of what’s going on in the video above as it seems pretty weird. It’s actually pretty simple…

The camera records at 24 frames every second. The speaker is at 24hz (cycles per second) and ‘knocks out’ the drops of water in a constant 24 times per second. Think whacking a ketchup bottle once and then taking a picture just after the sauce flies out, you catch the ketchup blob in mid air. Now whack it 24 times a second and take a snap each time… you kinda take the same pic each time but clearly the blobs of ketchup will be a slightly different shape each time… but in pretty much the same position. That’s all that’s going on here.

But what about it going backwards? Well, at 23hz (not 24hz as before), the camera is relatively faster by 1 frame so the water *seems* to go slower. Seeing as it was stationary before, *slower* than stationary is backwards. In this case, the same water drops are snapped slightly earlier each time giving the effect of going backwards.

And, you guessed it, the opposite happens at 25hz. Water goes ‘faster’, relatively speaking. It’s a completely linear thing so you can change the frequency slightly and see the result instantly.

Main thing is to generate the drops at a nice constant rate, which in this case is what the speaker vibration is doing. Other methods involve precise pumps or special ‘gates’ that snip the water stream into droplets very accurately.

Here’s a quick flash example I made to show the ‘shutter’ effect on regular falling drops. Just move your mouse left and right then see if you can get the shutter and blob frequency to match. Note how there two streams of drops are created at slightly different speeds so that one can be made to look like it’s going up while the other is going down.

Get Adobe Flash player


How many days until Christmas? Here’s a timer…

Monday, October 17th, 2011

Get Adobe Flash player

I created this little puppy a while back, maybe 2004. Just found it on my hard drive and thought I’d add a post with it in. It dynamically updates the stats based on daily averages I set up at the beginning. It also takes the year from the current system clock, so should just tick over into the next year on New Year. The bit in-between will go a bit strange, but I’m not that fussed about fixing it. Feel free to do it yourself.

The source is here, but it’s a bit old skool. It’ll give you a few ideas though if you’re brave enough to open it.

Shhhh, Adobe sidesteps up to HTML5

Sunday, August 7th, 2011

The bunfight seems to have calmed down from the dizzy heights of the iPhone OS vs Flash storm earlier this year. Adobe or at least Flash was on the ropes and taking a battering.

Adobe had a few interesting innovations that were almost ignored in the melee. Their response to the Flash v’s HTML5 tirade seemed to be that Flash is a great platform to develop on, then you can spit out Flash, iPhone Apps, HTML5 etc. The HTML5 exporter seemed to get lost in translation.

Nice to see Adobe putting it back onto the agenda with their new inspiration site The Expressive Web. It was put together with US uber agency Big Spaceship and is a great inspiration and learning resource for the latest HTML and CSS techniques like transition, audio and the like. Sure, the zealots will get all sniffy, like the Adobe moniker has tainted the purity of the code, but we’re more grown up than that, aren’t we?

Do Penguins use Flash AS2?

Tuesday, September 14th, 2010

Looks like those penguins down at Club Penguin are being put to good use. Just noticed this little Easter egg… Go to the homepage of Club Penguin, click Play Now and zoom into the lower part of the screen (expand your browser window). Looks like they are using AS2 though… god help us when they figure out HTML5! Still, I assume they are working on Linux :)

iPhone app development tips for Flash types

Wednesday, December 2nd, 2009

Just watched Lee Brimlow’s quick demo of Flash CS5 saving out an iPhone app. Watch it!

Now, first things first, we’ve made a few iPhone apps at Digital Outlook already in native Objective C and although I’m nowhere near being even remotely classed as a developer, I have been on a basic iPhone dev course and have spent a good length of time debugging and mildly fiddling with the existing apps we have. I’ve made a few simple apps myself so I’ve got a fair understanding of how it works I guess.

I’ve also go a VERY acute understanding of the process and costs involved in creating a native iPhone app from scratch from within an agency. At the beginning, they said “take a Flash app, budget the coding part, double it and add another half”. Cool. Nowhere near. Without going into detail, it seems iPhone App development isn’t quite as simple as it’s made out to be. Yes, your developer may know Objective C, applying it to the iPhone development environment is another thing. Us Flash guys could only stare on as seemingly simple issues took days and weeks to resolve.

So the fact that the Flash SC5 release will compile to iPhone is immense news for me, us and probably every digital agency and Flash freelancer on the planet. Sure there are things it can’t do. Sure you get a bundled app that you can’t ‘add to’ in the native development environment. Sure you can’t use the camera and a few other api’s. And it may be a bit slower than a native app, but take it from me, I’ll take all of those on the chin for the ability to get a creative idea onto the iPhone and into the hands of the world’s mobile consumers.

I can’t wait for CS5 to drop but in the mean time, here are some of my observations from native iPhone development from my Flash perspective.

  • Objective C may look like AS3 but it works in a whole different way. From declaring variables to having a .h header file to your .m main class files. Don’t even think of using a ‘Trace’ or C ‘Print’ command. Underestimate the differences at your peril… but don’t be scared either. If I can do it, so can you! (No, seriously, I’m not that clever).
  • Debugging already written code is really easy when you know your way way around. Moving graphics, font sizes, swapping sounds, changing text etc. are all pretty straightforward with a simple search to narrow down the location to work on.
  • The assets are held externally to the project, so changing graphics, movies, audio etc. is simple too, just swap out the file and recompile.
  • The graphics are just plain old JPEGs and PNG files, so your designers are more than up to the job. It’s just like a Flash project as far as that goes.
  • If you have time / money, put a rough Flash demo together first. Changing your mind and feature creep during production can be slow and costly.
  • The iPhone development suite is really slick (unlike Android I may add!). The on-screen emulator is great and allows you do test it (with a few exceptions) without needing an iPhone or a developer account.
  • If your app uses accelerometers, cameras etc. the emulator will fall short as it’s can’t ’emulate’ an accelerometer. You can get around it by installing an app on your phone to transmit the accelerometer data to your mac, then add a little code to your iPhone build to receive the data and substitute the values in the emulator. Here’s an example of screen-capturing the emulator using this technique. See the Accelerometer Simulator by Otto Chrons for more.
  • The icon is VERY important. Make sure you spend time on it. And by the way, the glassy shine and round corners are automatically added to your icon on the phone itself. You can switch the shine off though, but not the corners.
  • If you don’t have them in-house, freelance iPhone developers will charge you anywhere from £250-£500 a day.
  • If you shop around and do your research, you soon find out that the cheap way to get an iPhone app done is to go ‘off-shore’. South America, China and India are all much cheaper than your average LA, London or New York dev agency. However, they do come with the usual health warnings about production values, creative sign-off and time-zone / communication problems.
  • If you have the money and it’s your first app, get someone local to hold your hand and learn from. If not, make sure you have scoped the project within an inch of its life. After the project, budget for an extra half-day for your iPhone dev to explain what he/she did to your Flash dev team. Shame to pay all that money and lose all the knowledge.
  • Memory management is now your problem. You have to allocate memory and release it as you go. This is one of the big areas that Apple check when you submit your app to the App Store. You don’t have to allocate actual memory size as in assembly language, but you do have to ‘manage’ closely.
  • Do register with Apple and get a developer account. You can get the dev environment for free and start compiling but you can’t transfer anything onto your iPhone without a developer license and associated provisioning files.
  • While I mention it, the process to authorise your computer and set up your first app is a bit of a faff. Still not 100% sure I understand it but the instructions on the Apple site are clear enough to get you started.
  • The app submission process is pretty simple and the time taken to get a response is anywhere from 2-4 weeks. I know the guys at Apple and even they can’t affect this process, so don’t ask! However, in general, if your app is basic and doesn’t have any advanced functionality such as external database calls or live data, you go into a ‘less risky’ pool, and are generally through in less time. If you are rejected, you go to the back of the queue.
  • Make sure you look at what everyone else is doing too. Download everything remotely related to compare. Look at the top 3 in each category too, there’s a reason they are there, whether it’s the content, the execution or the user-interaction. It’s all vital knowledge.
  • The ‘Games’ category is the most varied and the most competitive. Before you assume your first app should be a game, consider that it will be up against the EA’s and the Need for Speed’s of this world. If you’re not in the top 20 pretty quickly, you pretty much free-fall until you become all but invisible to the regular browsers.
  • To charge or not to charge? 59p says “Aaaah, hell, why not”. £2.99 says “This better be good or I’ll tell everyone it’s a rip off and rate it 1 star”. Initially, you need to go for ratings, so consider an introductory low rate then change it if you see an appetite and good ratings. It’s easy to change the price on the fly.
  • And finally, if you can wait until April 2010, consider using Flash CS5! :)

Stitched up by my own webcam!

Friday, March 27th, 2009

Another strange webcam experiment! Click the image to launch it.

I take the raw cam feed, find what changes between frames and add a threshold filter to colour the bits that change to a solid red. I then simply loop through the pixels to see if any are red then use the pixel position to draw lines to and from, sampling the original image to get the correct line colour. Completely no use to anyone… but looks nice enough.

How to become a rocket scientist in 3 minutes…

Tuesday, March 3rd, 2009

Did some fun training the other day with Katie Ledger and part of it was presenting something in 3-5 minutes. So I though I’d go large and explain how to become a rocket scientist in 3 minutes. It’s essentially a super-top-line overview of how to build the simplest type of pulse jet engine… the ‘pop pop‘ boat engine. Thought I’d start with something that shows the principle before introducing the fantastically simple valveless pulse jet. I should also explain this was at Digital Outlook, a digital marketing agency, so was a little off-piste to say the least.

Anyhow, here’s the video. Bit embarrassing but hey, it’s worth it if you may learn something! :)

If you’re weird, you can get the PowerPoint presentation here.