Migrating to AS3 and strict deadlines are FUN!

Yesterday, a client called me and told me that they decided to move the deadline from two days, to one for one simple 3d banner. I didn’t go berserk mind especially since I knew that it could be done in couple of hours (tops!) in Flash 8/AS2. And as I just recieved my 4102 unread e-mail on papervision mailing list … I wondered of for a second in my thoughts. I was floating on clouds and big fluffy recent Flash 9 penetration stats floated around me. Don’t know if it was too much Plasma Pong from last night or the Making things move as3 edition which I got the other day in the mail, but when I got back form that happy place I visit few times a day, I decided that I’l bite the bullet and do the project AS3 way and maybe do something that will in future cause some more penetration points for Adobe.

On other hand, for the last two years (since we started producing banners on weekly basis), we were in the war with the croatian portals and media buyers regarding target Flash format. They all forced us to produce Flash 7 content. Clients wanted Flash 8, we wanted Flash 8, but out dated webmasters with last century banner software didn’t want to hear about new emerging flash 8 technology. One day we just started shipping Flash 8 banners and nobody noticed, nobody complained about it. But, am I just simply pushing my luck with Flash 9 banner? Thrills don’t come on cheap these days. :)

This is unpolished version, few more effects to come:

[flash http://www.nivas.hr/pub/digitel-kocka-pv3d/flash/myTest06.swf w=250 h=250]
(size: 43 kb, click here to check it out on a test page)

It took me 30 minutes to catch up on latest papervision revision and to build draft version, and then 30 more minutes to rewrite Cube.as primitive to accept MaterialList for different sides of the cube. At this point I needed to do some tweening. Since Fuse (my favorite tweening engine) doesn’t have as3 support yet :( I tried Tweener for the first time, and it surprised me how easy is to work with. It has very small footprint, but as I discovered 4 hours later, it tends to produce random hickups. I was tweening pv3d object in no time. Tweening alpha did take some time to master since I keep forgetting that .alpha can now be number from 0 – 1, and not from 0 – 100.

Banner was almost done, and there was just a matter of onRelease and getURL for banner click and some javascript calls for exit button (since it was hoover banner, exit button is a must). Then fun started.

Every banner management software has it’s own way of passing parameters to flash banners. When you contact webmaster, he/she usually sends you PDF with Flash 5 manual, on how to implement on(release) { getURL (_root.something, “_blank”); } specific for their banner software. Now and them webmasters have their own javascript embedded on the site which you have to call to close DIV which is showing hoover banner just to be sure banner is gone (the exit button – getURL(‘javascript:CloseMe();’) ).

I spent two hours, analyzing how actually various croatian websites call banners. O boy, that was fun. :) 99% of them is still using old-skool object/embed method:
<param name="movie" value="myTest06.swf?bla=da&contenttype=swf&clickTAG=http://bs.tportal.hr/adclick.php%3Fbannerid=819" />

That’s all nice, in Flash 5 and in year 2000, but AS3 doesn’t have nor _root not getURL. How on earth will websites pass banner specific vars (id, landing url…) from web page to my alien technology Flash 9 banner?

It took me some time to discover the wonders of new AS3 loaderInfo object, and I like it a lot! It holds a lot of information which I missed in AS2 (swf location for example). He also holds flashVars in parameters object. I like navigateToURL too. Massive change – to better, from rusty old getURL. Now it’s actually usable. :) This example illustrates very basic usage because I am not sending any vars.

[ftf]
function initFlashVars (event:Event):void
{
var output_txt = this.loaderInfo.url;
var swfUrl:String = this.root.loaderInfo.url;
clickUrl = this.root.loaderInfo.parameters.clickTAG;

try {
var keyStr:String;
var valueStr:String;
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (keyStr in paramObj) {
valueStr = String(paramObj[keyStr]);
tf.appendText(“\t” + keyStr + “:\t” + valueStr + “\n”);
if ( (keyStr == ‘clickTAG’) || (keyStr == ‘clicktag’) || (keyStr == ‘clickthru’) || (keyStr == ‘alink1’) || (keyStr == ‘teleport’) || (keyStr == ‘targeturl’) || (keyStr == ‘teleport’) ){
clickUrl = valueStr;
}
}
} catch (error:Error) {
tf.appendText(error.toString());
}
}

function bigButtonClick (event:Event):void
{
var url:String = clickUrl; // “http://www.t-com.hr”;
trace(“goto: ‘ + url);
if (url != null) navigateToURL(new URLRequest(url));
}
[/ftf]

Next on the agenda was that crazy javascript call upon banner exit. getURL(‘javascript:bla();’); just won’t to any more. The way it’s meant to be done in AS3 is by using ExternalInterface object. This example also illustrates very basic usage.

[ftf]

//
// offcourse, this is not working:
// navigateToURL(new URLRequest(‘javascript:zatvoriProzor()’;));
//
// instead we need to utilize ExternalInterface
//
if (ExternalInterface.available) {
try {
debug.appendText(‘tyrying: ‘ + url + “\n”)
ExternalInterface.call (‘closeMe’);
} catch (error:SecurityError) {
debug.appendText(“A SecurityError occurred: ” + error.message + “\n”);
} catch (error:Error) {
debug.appendText (“An Error occurred: ” + error.message + “\n”);
}
} else {
debug.appendText(“External interface is not available for this container. \n”);
}
[/ftf]

I tested the banner in this kind of environment and it works. Tomorrow I am sending it out to various websites. I am really exited about this, since I’l probably be the first one to tackle that subject here (again). :)

I’ve also found out that Flash CS3 comes with new piece of javascript which pops out if you publish your fla to html and swf. Looks very nice. If you wan’t to pass flashVars using this way, you just define parametar ‘flashvars’ and give it a typical querystring key/value pairs.
AC_FL_RunContent(
'width', '250',
'height', '500' ...
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','always', // always / sameDomain
'flashvars', 'clickTAG=http://www.nivas.hr/index.php%3Fbannerid=819'
); //end AC code

And, one more thing. I hate IE so much. These settings are very important for IE to make flashVars and ExternalInterface to work:
<param name="allowScriptAccess" value="always" />
<embed .... allowscriptaccess="always" .... />

Helpful resources:

• getURL() est mort :)
• Problem (and solution) : getURL() in a Flash projector fails in Firefox
• Using FlashVars with ActionScript 3.0