AS3 clickTag Example
February 3rd, 2010I’ve been making a lot of ad banners lately and it looks like we, the online ad industry, are finally starting to use Flash 9 on a regular basis for Flash banners. So, I thought it might be helpful to give an example of how to implement a clickTag in ActionScript 3. Remember that the clickTag code works in concert with the variables being passed in from the HTML container.
Simple AS3 Script:
//Define loader info object (Flash variables from browser)
var flashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;
//Event listener for clickable object
clickBtn.addEventListener(MouseEvent.CLICK,clickHandler);
//function that is called upon click of your object
function clickHandler(e:MouseEvent){
if(flashVars.clickTag){
navigateToURL(new URLRequest(flashVars.clickTag),‘_blank’);
}
}
var flashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;
//Event listener for clickable object
clickBtn.addEventListener(MouseEvent.CLICK,clickHandler);
//function that is called upon click of your object
function clickHandler(e:MouseEvent){
if(flashVars.clickTag){
navigateToURL(new URLRequest(flashVars.clickTag),‘_blank’);
}
}
HTML Container:
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1″ />
<script type=“text/javascript” src=“_js/swfobject/swfobject.js”></script>
<script type=“text/javascript”>
var flashvars = {};
flashvars.clickTag = "http://www.flashinyourface.com";
var params = {};
var attributes = {};
<meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1″ />
<script type=“text/javascript” src=“_js/swfobject/swfobject.js”></script>
<script type=“text/javascript”>
var flashvars = {};
flashvars.clickTag = "http://www.flashinyourface.com";
var params = {};
var attributes = {};
swfobject.embedSWF("clickTagTest.swf", "myAlternativeContent", "728", "90", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id=“page”>
<div id=“header”></div>
<div id=“flash”>
<div id=“myAlternativeContent”>
<a href=“http://www.flashinyourface.com” target=“_blank”><img src=“clickTagTest_def.gif” width=“728″ height=“90″/></a>
</div>
</div>
</div>
</body>
There are some things to consider when coding for clickTags…
- 1. While it is typical for a clickTag to be referred to in code as a “clickTag,” not all traffickers use the same notation for a clickTag; some use “clickTag” others use “clicktag” and still others use “ClickTag.”
- 2. Traffickers also differ on how they refer to the first clickTag if there are multiple clickTags being used; some use “clickTag” others use “clickTag1.” Some even refer to the first clickTag as “clickTag” if there is only one tag and then change the notation for the first clickTag to “clickTag1″ if there are multiple tags.
- 3. Rich banners, such as expandable banners that are trafficked through a special vendor, often have proprietary methods you have to use for clickTags. You would need to reference their API’s to see what to do.
- 4. Pop-up blockers sometimes block links called from Flash using “navigateToURL.”
So considering these things, is there anything we need to add to our code? Well, we could write a script that parses through all of the clickTags and makes them lowercase so you can easily check and apply them and not worry about the naming conventions that the trafficker is using. We could also write some code that looks to see if you are running your ad inside of Flash. If so, you can call a default url for the clickTag since you can only reference the actual clickTag via the HTML. Finally, we could check to see if there is an external interface available. If there is one available, we could launch the clickTag by calling a javascript instead of using the “navigateToURL” method inside of Flash. By doing so, we will hopefully avoid a user’s pop-up blocker. All of that code is starting to sound like a class. I happen to know that such a class file will probably be available in the next version of Jason’s book, Creating Flash Advertising. So, for now, let’s just work on something to avoid pop-up blockers.
AS3 clickTag w/ Pop-up Blocker work around
import flash.external.ExternalInterface;
var _defaultURL:String = ‘http://www.flashinyourface.com’;
var _extInterfaceAvailable:Boolean;
var _playerType:String = Capabilities.playerType.toLowerCase(); // check for local testing
var _defaultURL:String = ‘http://www.flashinyourface.com’;
var _extInterfaceAvailable:Boolean;
var _playerType:String = Capabilities.playerType.toLowerCase(); // check for local testing
//Define loader info object (Flash variables from browser)
var flashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;
//Event listener for clickable object
clickBtn.addEventListener(MouseEvent.CLICK,clickHandler);
//check to see if you are running in a browser and if ExternalInterface is available
if(_playerType==“activex” || _playerType==“plugin”){
_extInterfaceAvailable = ExternalInterface.available;
}else{
_extInterfaceAvailable = false;
}
//function that is called upon click of your object
function clickHandler(e:MouseEvent){
//if running in a browser and External Interface is available, call clickTag via javascript,
if (_extInterfaceAvailable) {
if(flashVars.clickTag){
ExternalInterface.call(‘window.open’,flashVars.clickTag,‘_blank’);
}
}else{
//if testing in Flash this will call the default URL
if(_defaultURL){
navigateToURL(new URLRequest(_defaultURL),‘_blank’);
}
}
}
Obviously this might not be exactly how you want to layout the code, but it should give you a good idea of what your options are and how they work.
Download Example w/ Source Code >>
SNOOGINS.
TexFlex 09 Spark Skinning Presentation Files
February 3rd, 2010The files from our TexFlex presentation on Spark Skinning are available for download on Fincanon’s site. Again, I would like to say thanks to everyone that attended TexFlex and to those who were kind enough to come spend an hour with Jason and myself.
Planning for the future, HTML 5 or The Flash Platform?
December 2nd, 2009
I wrote a short article for The Esoteric Techie about what I believe the impact of HTML 5 will be on Flash. If you care, check it out, here.
TexFlex 09
November 12th, 2009
Hey Everyone! I’ll be speaking at TexFlex this year with my friend Jason Fincanon. We will be going over Spark Skins in Flex 4! If you plan on attending, here is more info about what you need to prepare if you wish to follow along during the presentation. It should be a lot of fun. Ovrflo Media is sponsoring the after party at NAAN. So, be sure to stop by and have a drink! See you there!
![MXNA]](http://www.flashinyourface.com/wp-content/images/mxna88x31_grey.gif "MXNA")
![[Valid RSS]](http://www.flashinyourface.com/wp-content/images/valid-rss.png "Validate my RSS feed")