Here's another recap on the state of responsive images. This one from the Filament Group, who was involved in the Boston Globe redesign. It discusses their solutions and the problems with them and then the newly suggested picture html element and a call for the need of bandwidth detecting media queries. I'm still concerned about bandwidth detection. I think somehow there should be a setting that lets users decide if they want high res images (when supported) or the faster low res images. If I'm just browsing on a laptop tethered to a phone with 4g and paying for every kilobyte, I may not want to download a large image just because I can. I agree we need better ways to server appropriately sized images, but I don't want to force anything on a user. Although a popup asking them if they want every large image is not practical either… I'm glad this discussion is continuing though!
Other things you may want to do related to this is getting the query string variables form the url, which also uses externalInterface. You can also use this same method to get the domain, path, protocol, and even referrer. You could use some nice regex or substrings to find these from the full url, but it is already accessible. I can see a potential need for the speed to get the full url and then use internal code to cut it however I need it. But, I’m not convinced that using an external interface call takes that much time (but it’d be an interesting experiment to say the least).
For ExternalInterface to work in IE you need valid classid and id attributes in the
If your set up fails it may be because it throws a security error. To solve this to set the param allowScriptAccess to ‘always’ and in your actionscript add your domain, in order to enable the use of ExternalInterface.
This demo, gets all of the above mentioned values/properties and more. I threw in what I could think of that may be useful or interesting. It shows a couple ways to get the window location href as well as a way it won’t work. Then there are the rest of the properties available using this same method: href, host, hostname, hash (anchor link ‘#’), pathname (url after the domain), port, protocol, search (query string values), the document title and even referrer. Then from the loaderInfo object we can access the url of the swf as well as other things but most used is the bytesTotal and bytesLoaded. Now check out the demo here (adding an fpo hash and query string to the link just for demonstration purposes, feel free to play with the url and see the values updated. [cc lang=”actionscript”] import flash.external.ExternalInterface;
Anyways, this demo has been tested in mac firefox, chrome, safari and windows ie7, ie8, firefox and chrome. If you have a different browser please comment that it works (or not) so we can get a full spectrum, thanks!
From ActionScript, you can do the following on the HTML page:
Pass any number of arguments, with any names.
Pass various data types (Boolean, Number, String, and so on).
Call an ActionScript function.
Pass arguments using standard function call notation.
The magic is set up with the call and addCallback methods of ExternalInterface.