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.

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.

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.

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.

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.

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.

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