Using Web Fonts with Amazon S3 and Firefox. Finally!
Posted by Philip Bulley | Filed under Amazon Web Services, Tips
Until a few days ago, if you’d wanted to use a web font (@font-face) hosted on AWS S3 within a document on another domain (ie. an EC2 instance) – unless you were happy with the near-crazy Base64 embedding into bloated CSS file technique – you’d be out of luck when it came to the goodie-two-shoes of web browsers, Firefox.
Firefox would demand that you specify an “Access-Control-Allow-Origin” header on your server’s response. This is not rocket science when it comes to serving files from a regular web server such as Apache, but of course S3 is very different to all of the other kids (with good reason). It was just a shame that S3 didn’t have a way of specifying such a header bucket-wide, until now.
Philips Presents Obsessed With Sound: The Unheard Heroes
Posted by Philip Bulley | Filed under Actionscript 3, Portfolio
My first project at Stinkdigital was also the most technically challenging I’ve ever been briefed on to date. Essentially, the brief was to create a full-screen audio/video mixer featuring approximately 50 audio channels and two HD quality video streams, all of which must be synchronised. If that wasn’t enough, each audio channel should also simultaneously display its current pitch and when clicked on should display it’s individual musical score in it’s entirity. Oh, and to avoid the use of a streaming server if possible!
Tags: as3, music, robotlegs, Stinkdigital, tribal ddb
Get a URL for each EC2 instance running under a load balancer
Posted by Philip Bulley | Filed under Amazon Web Services, Tips
I have to admit, that this was a task I wanted to accomplish quickly. The kind of ‘quickly’ where you just do a Google search and nice internet person tells you which APIs to use. But no such internet person seemed to exist, so I figured I’ll share my solution.
Tags: aws, codeigniter, ec2, php
FlashTracer for Firefox 4+
Posted by Philip Bulley | Filed under Tips
I’ve been using Alessandro Crugnola’s FlashTracer Firefox Add-on for years, and have become pretty accustomed to it’s neat vertical sidebar integration. I wasn’t particularly happy to see that the familiar interface had (subtly) changed when he introduced FBTracer aka FlashTracer for Firebug (pretty sure that’s just me being fussy though!).
The original FlashTracer is apparently only compatible up to Firefox 3.x, so to get it to work with Firefox 4+, simply do the following:
- Download the .xpi
- Unzip it (it’s just a .zip file with a .xpi extension)
- Open install.rdf and change em:maxVersion=”3.9″ to em:maxVersion=”20″ – this will keep Firefox from complaining up until the release of Firefox 20 (which at this rate, we’re probably only a couple of weeks away from!)
- You may want to increase the version number to 2.4 (em:version=”2.4″), to prevent confusion
- Zip all of the files back up, change the file extension to .xpi
- Drag the .xpi file onto Firefox 4+, and it should install
I’ve installed it with Firefox 9.1 and the only incompatibility (that I’ve noticed so far) is that you can’t change the font from the default serif. Not bothered :)
Old skool FlashTracer running perfectly well in Firefox 9
By the way, this minor hack works for making any Firefox Add-on compatible with a more recent version of Firefox. But of course, if the actual Add-on source code itself is not compatible with a recent Firefox version, it might crash, mess up your Firefox profile, brick your computer, automatically slaughter all wild foxes in your local area, etc, which of course, I couldn’t care less about I’m not responsible for :)
Tags: add-on, compatibility, firefox, flash, flashtracer
Diesel Island FW11
Posted by Philip Bulley | Filed under Portfolio
Diesel Island FW11 is an interactive video showcase of the clothing Diesel would like you to be wearing as the year draws to a close.
Tags: as3, html5, robotlegs, santo, Stinkdigital
Hugo Just Different – Kino
Posted by Philip Bulley | Filed under Portfolio
Kino for Hugo Just Different is all about seeing things differently. An interactive film directed by Marco Brambilla allows people to explore five different scenes through the shades of Theatrical, Performance and Story, simply by tilting their heads from side to side. The webcam monitors the tilt position of the head, which in turn invokes seamless transitions from one intricately gorgeous environment to another.
Tags: as3, blast radius, robotlegs, Stinkdigital
CompareTheMeerkat.com – Meerkovo
Posted by Philip Bulley | Filed under Portfolio
Everyone’s favourite Meerkat, Aleksandr Orlov, is back and this time he’s with a bunch of his friends – the whole village of Meerkovo, in fact. Meerkovo.com allows fans to engage and interact with one of the richest back stories in recent UK advertising.
Aleksandr welcomes you to his Mansion. Feel free to explore all of his meerkat oddities via the comfort of your own komputamabob. Simples!
Tags: as3, robotlegs, the mill, vccp
Tips for building AIR for Android Mobile Apps
Posted by Philip Bulley | Filed under Actionscript 3
There were a lot of learnings in building CrossTweet for Android. Here are a few tips I’d like to share with you.
New AIR for Android mobile app
Posted by Philip Bulley | Filed under Personal Projects, Portfolio
When Adobe were preaching about seamless deployment across devices, they weren’t telling porky pies. Presenting CrossTweet for Android:
Part of the motivation behind building CrossTweet was the upcoming release of Adobe AIR for Android. A key goal was to provide seamless deployment across web and mobile by employing interaction techniques ubiquitous to mouse and touchscreen input. Which is why if you’ve seen CrossTweet on the web already, you may have noticed that the prev/next navigation had been inspired by the “drag to reload” functionality of twitter and other apps on the iPhone.
Point your phone’s QR code reader at the lovely pattern below, and give the app a test drive.
For insight and tips on how this was built, see my Tips for building AIR for Android Mobile Apps post.
Tags: air, android, blue barracuda, mobile, robotlegs, twitter api
CrossTweet: Where digital and everyday life intersect
Posted by Philip Bulley | Filed under Personal Projects, Portfolio
During my last few days working at Blue Barracuda, I managed to find a little R&D time. The result of which has been an experimental interactive data visualisation piece known as CrossTweet.
Tags: as3, blue barracuda, regular expression, robotlegs, twitter api
Flash On The Beach 2010
Posted by Philip Bulley | Filed under Uncategorized
NOTE: This article was first posted on the Blue Barracuda blog.
Flash On The Beach 2010 opening titles by Nando Costa
I’d like to extend my sympathies to the residents of Brighton. Not only has this week seen hoards of drunken students returning to the city (it’s Freshers’ Week!), but also the annual geek onslaught that is Flash On The Beach! To the unacquainted, it’s a 3-day conference featuring some of the world’s most prolific talent to have successfully combined the (all too often) polar opposites of ‘creative’ and ‘developer’.
Regex to find non-weak referenced addEventListener()
Posted by Philip Bulley | Filed under Actionscript 3
It’s always advisable to use weakly referenced event listeners in AS3. If you need to recap on why, check out Grant Skinner’s blog post. But in practice, if you’re ‘coding at the speed of thought’, or if you’ve inherited someone else’s code base, you may end up with some calls to addEventListener() which don’t use a weak reference.
The following regular expression will find all occurrences of addEventListener() that don’t use a weak reference:
1 | addEventListener( *)\([a-zA-Z._ ]*,[a-zA-Z._ ]*\) |
Using this with your code editor’s “Find in Files…” feature (ensure you check the “Use Regular Expression” option) will track down each offending code snippet, which you can then manually amend should you decide that using a weak reference is suitable.
Example of using the regular expression in the FDT "File Search" dialogue
Just make sure that you’re not relying on the reference created by addEventListener() to prevent the garbage collector from devouring your object for dinner. Generally, using a weak reference is fine when adding an event listener to a class scoped object, but not to an object locally defined within your current method.
Feel free to test/demo/fork it at http://regexr.com?2s5fc
Tags: as3, regular expression, resource management
The Girl Who Played With Fire
Posted by Philip Bulley | Filed under Facebook Development, Portfolio
I’ve got Facebook games coming out of my ears right about now! This one is to accompany the new movie ‘The Girl Who Played With Fire’ – out in cinemas later this month.
Ooh! Looks like I got one right =)
Tags: as3, blue barracuda, facebook api, puremvc
Pizza Hut – Hungry For ‘A-Team’ Action
Posted by Philip Bulley | Filed under Facebook Development, Portfolio
Hot on the heels of ‘Pass It Around Pizza’ comes ‘Hungry For Action’; the second social game for Pizza Hut UK. Supporting the release of the new A-Team movie, the premise is simple; smack the living daylights out of as many soldiers as possible.
We were originally going to create a brash tank-based game, until we realised that'd probably turn more women (being a large wedge of our target demographic) off than John McCririck's sweaty wackers on a humid summer's evening.
Tags: as3, blue barracuda, facebook api, game, puremvc
AS3 Vector shuffle / randomize
Posted by Philip Bulley | Filed under Actionscript 3
UPDATE: Please see comments below for a shuffle technique using the efficient Fisher-Yates algorithm.
Whilst working on an AS3 project, I figured I needed to shuffle the order of a Vector. A quick Google search looking for a code snippet that will shuffle the order of an Array will produce many results (although I’d most likely use the nicely packaged CasaLib’s ArrayUtil.randomize()). But the same is not true (at least as of writing) for shuffling the order of a Vector.
So this post is for anyone stumbling on in from Google, requiring a quick “I can’t be bothered to think about it” solution:
1 2 3 4 5 6 7 8 9 10 11 |
Just to note, Array.sort() has never won any awards for code execution speed, so it’s likely that Vector.sort() won’t either.
Tags: as3
Wagamama Keepy-Uppy
Posted by Philip Bulley | Filed under Portfolio
In the spirit of the World Cup 2010, Wagamama wanted to challenge their loyal fans, old and new, to a classic game of football keepy-uppy — but not without a twist.
Hit it, spin it, whack it against the wall — most importantly, keep it up!*
Tags: as3, blue barracuda, box2dflash, game, puremvc
Beware of the facebook UID “as Number”
Posted by Philip Bulley | Filed under Actionscript 3, Facebook Development
Quite often it’s advisable to treat unique IDs as a string, particularly when using a third party API, as you never know when they may migrate from a numeric to alphanumeric format.
The Facebook Actionscript API is no exception. In a recent project, I’d already been treating user’s UIDs as a string, but got caught out when calling the GetAppUsers API method. This essentially returns the UID of each friend who has the same Facebook application installed. Instead of returning a set of string values, it returns an array of number values.
Storing this array within Actionscript doesn’t appear to be hazardous. The problems arise when sending that array via remoting (in this case using a sfAmfphp gateway).
Facebook currently employ two formats of UID:
OLD: 289204186
NEW: 100000792322346
The old format will be serialized and received by the PHP gateway as expected, whereas PHP will output the new longer format as, for example, 100000792322E+14.
Moral of the story: iterate through the array returned by GetAppUsers and cast all values to String.
1 2 3 4 5 6 7 8 9 10 | public function getAppUsersComplete(event:FacebookEvent):void { var uidFriends:Array = event.data['uids']; // Convert all uidFriend uids from Number to String because AMFPHP messes this up (converts large int values to float) for(var i:int = 0; i<uidFriends.length; i++) { uidFriends[i] = uidFriends[i].toString(); } } |
Tags: facebook api
Reading an Oyster card with Arduino
Posted by Philip Bulley | Filed under Personal Projects
I’ve had a few geek/creative experiemental ideas recently, one of which being a physical installation with an Oyster card interface. So figured it was high time to start playing.
Pass It Around Pizza
Posted by Philip Bulley | Filed under Facebook Development, Portfolio
UPDATE: Read my “Pass It Around Pizza” article on the Blue Barracuda blog. Aimed at marketers, it looks at the benefits of using in-game incentives/virtual gifts and rewards in conjunction with the Facebook Platform.
I’ve been getting to know Facebook Connect and the AS3 API over the past few weeks, and finally I’ve been able to put what I’ve learnt into practice by creating a game for Pizza Hut UK.
Pass the ball as many times as you can in 45 seconds!
Tags: as3, blue barracuda, facebook api, game, puremvc
Facebook Multi-Friend-Selector for Flash AS3
Posted by Philip Bulley | Filed under Actionscript 3, Facebook Development
UPDATE Nov 2010: This requires the old REST API Facebook_library_v3.4_flash.swc, which has now been deprecated in favour of the Graph API. Please feel free to fork this for use with the new GraphAPI SWC. There is a little more info on this in the comments. I’d love to update it myself, but not sure when that might happen at the moment :-/
One of the drawbacks of the current Facebook Actionscript API is that it doesn’t come bundled with UI components, it’s simply a data API. Fortunately you can use the JavaScript Client Library’s FB.UI.FBMLPopupDialog() to render FBML overlaying your SWF (if you don’t mind using wmode=”transparent”). But still, when it comes to the FBML fb:multi-friend-selector, if you want to do anything but send out invites to your Facebook app (via a browser-redirecting POST) , you’re out of luck.
Ideally, the fb:multi-friend-selector would allow the setting of a callback which would return the UIDs of the selected friends. It would then be down to the developer to choose what to do with them.
So, I decided to recreate the fb:multi-friend-selector directly in Flash. It will allow you to input an array of uid strings and later return a FacebookUserCollection featuring the selected users. Unfortunately I haven’t created this to be a fully resizable component, it simply does what it says on the tin. Hopefully, you may find that this gets you out of a sticky situation once you realise the shortcomings of the FBML fb:multi-friend-selector.
Don't be fooled, this MultiFriendSelector is not FBML, it's Flash :)
You can download it from the milkisevil-toolbox on github. You’ll need to add the “lib/milkisevil/FacebookComponents.swc” to your project and create a new instance of the “com.milkisevil.ui.facebook.MultiFriendSelector” class.
Here’s a rough guide to how you might want to instantiate the MultiFriendSelector:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | // Don't forget to make the following imports where appropriate import com.milkisevil.ui.facebook.MultiFriendSelector; import com.milkisevil.events.StatusEventEnhanced; // And the following inside your class private var multiFriendSelector:MultiFriendSelector; private function showFriendSelector():void { multiFriendSelector = new MultiFriendSelector( facebook, 16 ); multiFriendSelector.title = 'Your friends'; multiFriendSelector.subtitle = 'Irritate the hell out of your friends!'; multiFriendSelector.addEventListener( MultiFriendSelector.STATUS_EVENT, multiFriendSelectorStatus ); addChild( multiFriendSelector ); multiFriendSelector.getFriends(); } private function hideFriendSelector():void { removeChild( multiFriendSelector ); multiFriendSelector = null; } private function multiFriendSelectorStatus(event:StatusEventEnhanced):void { trace('exec multiFriendSelectorStatus: ' + event.code); switch(event.code) { case MultiFriendSelector.CLOSE: hideFriendSelector(); break; case MultiFriendSelector.SUBMIT: var selectedUsers:FacebookUserCollection = multiFriendSelector.getSelected(); hideFriendSelector(); var uidList:Array = []; for(var i:int = 0; i<selectedUsers.length; i++) { var facebookUser:FacebookUser = selectedUsers.getItemAt(i) as FacebookUser; uidList.push( facebookUser.uid ); } // Now do some custom stuff with those uids myCustomMethod( uidList ); break; } } |
Tags: as3, facebook api
