AS3 clickTag Example

February 3rd, 2010

I’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’);
     }
}

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 = {};

                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

//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.

zip file iconDownload Example w/ Source Code >>

SNOOGINS.

TexFlex 09 Spark Skinning Presentation Files

February 3rd, 2010

The 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.

Spark Skinning Presentation Files >>

Planning for the future, HTML 5 or The Flash Platform?

December 2nd, 2009

HTML 5 vs FlashI 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

TexFlex SpeakerHey 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!

Flex to Flash Communication

February 18th, 2009

To celebrate the launch of The NAACP Top 100, I thought I would do a brief tutorial on how to communicate from Flex to Flash.

In short, it’s not too big of a deal. You have to create a MovieClip object in your Flex movie that you will equate with the Flash movie that you load into the Flex. Once you have that object, you can call it’s methods, pass variables, and what not. The only catch is that you need access to the guts of the Flash movie so you know what objects and methods that it contains.

So, in the Flex, create the MovieClip object that you will later construct:

[Bindable]
private var myFlashChild:MovieClip;

Next, you will need a function to call that constructs your MovieClip object using your Flash swf:

private function init():void{
        myFlashChild = flashLoader.content as MovieClip;
}

flashLoader is just a SWFLoader used to load in the external swf that you created with Flash. The MXML for the SWFLoader looks like:

<mx:SWFLoader y=“150″ source=“assets/flash_comm.swf” horizontalCenter=“0″ id=“flashLoader” complete=“init()”/>

The init() method called is what plugs your external Flash swf into your Flex MovieClip object. The external swf needs to finish loading into the Flex before this method is called, which is why the method is called on complete.
Now that your external swf is loaded, you can call the methods that it contains and because we built the Flash, we know that it has a function in it called setTextFromFlex which looks like this:

function setTextFromFlex(myString:String):void{
        readOutTxt.text = myString;
}

So finally from Flex, we can call our function which sends a string of text from our Flex textfield into the Flash function which will then display that text inside of the textfield that is in the Flash:

private function communicateToFlash():void{
        myFlashChild.setTextFromFlex(flexTxt.text)
}

So, the final block of code from Flex will look like this>>

For the Flash, besides naming your components, all you’ll need to do is add this function:

function setTextFromFlex(myString:String):void{
        readOutTxt.text = myString;
}

That’s it. Let me know if you have any questions. Class is dismissed.

source zip >>