Since the last post I’ve added full-resolution images to the export script, picklet builder and in the Picklets app. I’ll write about that soon, but in the last couple of days I’ve written a Flash-based picklet player. I want to briefly discuss why, and then describe how it works.

TL;DR

The Flash plugin is now used to display a picklet draft if the user’s browser doesn’t support the webkitTransform CSS property. This is detected in the browser and is completely transparent to the user. This is the result here;

The iframe-embedded picklet player above will load as a javascript-driven web-app in Safari and Chrome, and will fallback to a Flash-based player on other browsers.

Why add ‘support’ for Flash?

Outreach. Expanding the potential audience. Supporting content discovery.

The Picklet Builder web app is written in Javascript and relies on a CSS3 vendor extension called -webkit-transform to position the IMG elements that make up a picklet.

Using this webkit extension is pragmatic; it enables the development of browser-based picklet authoring tools that can be deployed without modification to MobileSafari on iPhone and iPad.

The use of webkitTransform is a disadvantage from the point of view of visibility to the rest of the internet. Users who don’t have Safari or Chrome can’t use picklet builder or the webkit-based player and can’t therefore provide constructive feedback to the author or propagate the link through their social graph.

So a Flash-based picklet player enables promotion of picklet titles to a larger audience.

Adobe claims 99% of ‘Internet-enabled desktops in mature markets‘ so it seems like a good choice. There’s no technical reason that a picklet player couldn’t be written in Silverlight or Java or Unity3D, but those platforms don’t have nearly as many users.

How does it work?

If the browser supports -webkit-transform the page will display the javascript picklet player. If it doesn’t then the page displays the Flash picklet player. I’ve written this function which returns true if a dom element has a webkitTransform property and false otherwise;

1
2
3
4
5
6
7
8
9
10
11
12
var hasWebkitTransform = function() {
  var rval = false;
  var test = document.createElement('div');
  test.style.display = 'none';
  document.body.appendChild(test);
  if (test
    && typeof(test.style.webkitTransform) != 'undefined') {
    rval = true;
  }
  document.body.removeChild(test);
  return rval;
};

When the dom loads we initialise either the javascript PickletViewer or the Flash-based PickletPlayer.swf depending on the return value of hasWebkitTransform. A picklet is present in index.html as an input element with the ID ‘id_content’ which contains a JSON object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var pickletPlayerInit = function() {
  if (hasWebkitTransform()) {
    require(["picklet-build/pickletplayer"], function() {
      PickletViewer.init({'content_name': 'id_content'});
    });
  } else {
    require([
      "FlashReplace-1.01"
      ], function() {
        var content = document.getElementById('id_content');
        FlashReplace.replace("player_display",
          "/static/swf/PickletPlayer.swf",
          "flash-element-id",
          320,
          480,
          7, { 'FlashVars': "picklet_content=" + escape(content.value) }
        );
      });
  }
};

I’m using RequireJS to handle javascript dependencies – my PickletView implementation is ‘required’ in its minified form as picklet-build/pickletplayer. The FlashReplace-1.01 script is a ‘little object … to include a Flash movie into a web page’ and saves me thinking about what the right way to embed flash is. The end result is that the SWF file is only loaded into the page if there’s no webkitTransform support.

1
2
3
4
5
6
if (window.addEventListener) //DOM method for binding an event
  window.addEventListener('load', pickletPlayerInit, false);
else if (window.attachEvent) //IE exclusive method for binding an event
  window.attachEvent("onload", pickletPlayerInit);
else if (document.getElementById) //support older modern browsers
  window.onload=pickletPlayerInit;

The last thing to mention is the way of getting the pickletPlayerInit() function called in InternetExplorer. For the other modern browsers we use window.addEventListener('load', pickletPlayerInit, false) but not for IE.

Content discovery

With that change, we now have a single picklet draft URL that will load a picklet player on a bunch of devices including desktop browsers with and without Flash, and iOS devices running MobileSafari. (I’m not sure about Android-based implementations of webkit browsers. Interested to hear, though.)

It is also a simple matter to insert the picklet draft in a web page using an iframe, as I’ve done for this blog post.

1
2
3
4
5
6
7
8
<iframe width="320"
  height="480"
  marginwidth="0"
  marginheight="0"
  scrolling="auto"
  frameborder="0"
  src="http://7.latest.picklet-builder.appspot.com/d/review/387003/whats_a_picklet/mobile.html?passcode=46c7ed">
</iframe>
 

One Response to Picklet player in Flash

  1. [...] you like to develop stories for this platform? @PickletReader in-browser demo: http://picklet.net/2011/01/picklet-player-in-flash/ #fb [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>