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.
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.
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.
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?
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 :)
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! :)