Ten Tonne Baby!

Where's Mama?

Archive for the flash tag

• Unable to fade text in Flash player 9

  I was looking into a bizarre problem recently in Flash where I couldn’t get the simplest thing to work – fading text. I tried everything I could think of – motion tweens, classic tweens, changing the Alpha effect, changing the alpha channel in the text colour.

  The weird thing was that targetting Flash 10 in the publishing settings meant the animation worked fine, but switching to flash 9 caused it to stop working.

  It turns out that in order to animate the opacity of dynamic text for Flash 9, you need to explicitly specify which character glyphs to embed in the swf. Select the dynamic text element, then hit the ‘Character Embedding’ button in the properties pane.

  When I stop to think about it, this makes a lot of sense. By default I would imagine flash is using the operating system to draw the text with the specified font. This is why the font needs to exist on the end machine. However, as soon as you do things like fade opacity, I think flash must take responsibility for rendering the text. In order to do that, flash needs the vector information for drawing different characters in the font, so you have to explicitly embed that information. In order for this to work in Flash player 10, they must make some kind of default assumption that you need the vector information embedded, and do this for you.

  Posted:

  March 31, 2009 @ 15:48

  Categories:

  Development

  Tags:

  flash

  Comments:

  No comments so far

• Problems with javascript minification that affects SwfObject 2.1 in Internet Explorer

  This is actually a more general issue with javascript minification that can affect a number of scripts, but I noticed it while tracking down weird behaviour with the minified version of SwfObject that only affected Internet Explorer.

  Basically, standard behaviour with most javascript minifiers is to strip out anything contained within comments. I finally tracked down this piece of code in the swfobject library that was getting stripped out (incorrectly) by the minifier…

  /*@cc_on

  ie = true;

  @if (@_win32)

  windows = true;

  @elif (@_mac)

          mac = true;

      @end

  @*/

  This library carries out browser detection by using the proprietary Conditional Compilation feature in Internet Explorer. In order to stop other browsers from choking, the code is wrapped in a comment.

  I’m not commenting whether this is a good or bad idea, simply that it does appear in existing scripts, and causes a bunch of javascript minifiers to strip out functional code.

  I think my approach will be to revise the set of regular expressions that control what gets stripped out to cater for this variation.

  Posted:

  March 26, 2009 @ 12:01

  Categories:

  Development

  Tags:

  flash, javascript, performance

  Comments:

  No comments so far

• Problem with SWFObject 2.1 in IE7 / Vista

  I have a site where I’m using the SWFObject javascript library to handle Flash detection and embedding of flash movies. I noticed a javascript error in IE7 that was preventing the alternate content being replaced with the flash movie – the end result was a banner showing ‘get a new version of flash’ etc.

  After a little investigation the problem appears to only affect the minified version of the library. I haven’t found the exact issue, but it looks like a problem with the obfuscation applied in publishing the minified js file.

  I have a custom endpoint handling minification and caching of the javascript anyhow, so after switching to the source version of the library and handling minification myself, all is good in IE7.

  Posted:

  March 18, 2009 @ 12:03

  Categories:

  Development

  Tags:

  flash, IE7

  Comments:

  2 comments so far

• Webtrends tracking from Flash

  I’ve been working on a Flash widget, and the majority of the sites it will be hosted on use WebTrends for analytics. I recently had to look into capturing certain interaction events from the Flash movie and passing them through to WebTrends for reporting.

  Flash events are tracked as fake page impressions in WebTrends based on unique URLs that you define. The flash movie doesn’t talk to WebTrends directly – it calls through to javascript on the host page which logs the event via standard WebTrends javascript.

  In my case I’m working on a widget that could be hosted on a variety of pages that may or may not implement WebTrends. The required behaviour is for tracking to automatically kick in if the host page implements WebTrends, but gracefully degrade if not. I have a javascript file that handles interaction with the flash movie, so I can guarantee certain js functions exist on the host page.

  The solution looks like so…

  Add an ActionScript class to pass events through to host page

  package {

      import flash.external.ExternalInterface;

      public class Analytics {

          public static const WIDGET_LOADED:String = "/Video/Widget/WidgetLoaded";

          public static const PLAYER_LAUNCHED:String = "/Video/Widget/PlayerLaunched";

          public function Analytics(): void {

          }

          public static function captureEvent(eventType:String) {

              if (ExternalInterface.available) {

                  ExternalInterface.call("mycompany.video.captureAnalyticsEvent",  eventType);

              }

          }

      }

  }

  An example of passing an event to this class…

  Analytics.captureEvent(Analytics.WIDGET_LOADED);

  Implement javascript functions on the host page

  /* set up namespace for new functions */

  if (window["mycompany"] == null) {

      window["mycompany"] = {};

  }

  mycompany.video = {

      webtrendsTrackingFunction: {},

      captureAnalyticsEvent: function(eventType) {

          var uriParam = 'DCS.dcsuri';

          if (typeof (this.webtrendsTrackingFunction) == 'function') {

              // if user has nominated a specific tracking function

              this.webtrendsTrackingFunction(uriParam, eventType);

          } else if (window["dcsMultiTrack"] != null) {

              // if dcsMultiTrack already implemented on page

              window.dcsMultiTrack(uriParam, eventType);

          } else if (window["dcsTag"] != null) {

              // otherwise if webtrends implemented on page, use default implementation

              mycompany.video.analytics.dcsMultiTrack(uriParam, eventType);

          }

      }

  }

  mycompany.video.analytics = {

      dcsMultiTrack: function() {

          for (var i = 0; i < arguments.length; i++) {

              if (arguments[i].indexOf('WT.') == 0) {

                  WT[arguments[i].substring(3)] = arguments[i + 1]; i++;

              }

              if (arguments[i].indexOf('DCS.') == 0) {

                  DCS[arguments[i].substring(4)] = arguments[i + 1]; i++;

              }

              if (arguments[i].indexOf('DCSext.') == 0) {

                  DCSext[arguments[i].substring(7)] = arguments[i + 1]; i++;

              }

          }

          var dCurrent = new Date();

          DCS.dcsdat = dCurrent.getTime();

          dcsTag();

      }

  }

  The key points above the script above…

  • To report events from Flash, WebTrends require an additional function on the host page that they provide – dcsMultiTrack
  • If the host page has implemented dcsMultiTrack already, the existing function will be used
  • If the host page implements standard WT js but not the additional function, a fresh implementation of the dcsMultiTrack function will be used
  • If WebTrends javascript has not been implemented on the host page, nothing bad happens

  In addition, we have a standard function that the flash movie will always call, so if we need to extend functionality to cater for different analytics systems etc, then we have a single place to implement this.

  This is probably the least sexy post I’ve ever written, but it seemed worthwhile to document this. I’ll follow up with some sexified content sometime soon.

  Posted:

  February 27, 2009 @ 12:07

  Categories:

  Development

  Tags:

  analytics, flash, javascript, webtrends

  Comments:

  2 comments so far

• Using ExternalInterface to call Javascript from Actionscript – ‘null’ is null or not an object in IE

  If you are using ExternalInterface in Actionscript 3 to call through to a javascript function, the original object tag that instantiated the flash runtime needs to have an explicit id attribute. Otherwise you’ll get the above error when running the movie in Internet Explorer.

  Posted:

  February 26, 2009 @ 11:00

  Categories:

  Development

  Tags:

  flash, javascript

  Comments:

  7 comments so far

• Added object tag to page via DOM methods – IE chaos

  I’ve been working on a widget project that involves Flash and Javascript, and came across some very strange behaviour in IE6 / 7. The object tag to render the flash movie is dynamically added to the page at runtime using standard DOM methods – document.createElement, setAttribute, appendChild etc. Life was wonderful until I opened Internet Explorer, which hangs with what looks like a request for a file with no timeout (progress bar moving very slowly but never completing). This is identical behaviour to how IE behaves when the location of the SWF is invalid.

  The markup

  The markup I was generating was based on Flash Satay. Including this as static markup in a page works fine. Simple example below…

  <object type='application/x-shockwave-flash' data='test.swf' width='420' height='155'>

      <param name='movie' value='test.swf' />

  </object>

  DOM approach that chokes IE

  The following approach causes IE to choke…

  <script type="text/javascript">

      var object = document.createElement('object');

      object.setAttribute('type', 'application/x-shockwave-flash');

      object.setAttribute('data', 'test.swf');

      object.setAttribute('width', '100');

      object.setAttribute('height', '100');

      var param = document.createElement('param');

      param.setAttribute('name', 'movie');

      param.setAttribute('value', 'test.swf');

      object.appendChild(param);

      document.body.appendChild(object);

  </script>

  The solution / workaround

  For some reason if the object tag + params are parsed at the same time everything works fine, so the solution involves using the alternate approach to manipulating the DOM – innerHTML. This wouldn’t have been my first choice given the situation, but it seems to be the only way to get this working. A version that works in IE…

  <script type="text/javascript">

      var fragment =

          "<object type='application/x-shockwave-flash' data='test.swf' width='100' height='100'>" +

              "<param name='movie' value='test.swf' />" +

          "</object>";

      var container = document.createElement('div');

      container.innerHTML = fragment;

      document.body.appendChild(container);

  </script>

  This achieves the same end result – a DOM element node that can be inserted anyway you wish, but avoid the problem in IE.

  Posted:

  February 26, 2009 @ 10:51

  Categories:

  Development

  Tags:

  dom, flash, IE, javascript, x-browser

  Comments:

  2 comments so far

• Google Goggles

  OK, my new favourite thing is this cool little flash game. It’s a flight simulator based on the google maps API that lets you fly around london. Such a cool idea…

  Posted:

  April 18, 2007 @ 15:12

  Categories:

  Personal

  Tags:

  flash, games

  Comments:

  No comments so far

• Highly Original Charity

  I just came across The Darfur Wall site and I’m really stunned how effective such a simple idea can be. There are 400,000 numbers, one for each person killed in the Darfur genocide. Each dollar donated lights up a random number. You can zoom in or out to get perspective, or view an animation of the lights coming on over time. Go and look.

  Posted:

  January 24, 2007 @ 10:09

  Categories:

  Design

  Tags:

  charity, darfour, flash, visualization

  Comments:

  2 comments so far

• Getty Visualisations

  I’ve been thinking quite a lot about ways of visualising related information, and in doing so came across the most stunning interface that I’ve seen in a long time. There are 2 on this page – select Information.

  I think this is a piece of work that was commissioned by Getty Images. There are 10 different flavours which are all worth looking at, but this one in particular blew me away.

  Posted:

  November 15, 2006 @ 14:11

  Categories:

  Personal

  Tags:

  flash, getty, visualization

  Comments:

  2 comments so far

• Rocky Rabbit Show

  I don’t usually tend to force people to watch amusing things that I stumble across on the internet. However this has to be one of the best creative efforts I’ve seen for a long time. The Rocky Horror Show enacted by bunnies, in 30 seconds.

  I haven’t watched all of these, but there are a few other cool ones. Check out Pulp Fiction.

  Posted:

  July 12, 2006 @ 8:45

  Categories:

  Personal

  Tags:

  flash, rocky horror

  Comments:

  2 comments so far