ClickTags in Actionscript 2 en 3

English

Introductie

Dit is de handleiding voor het implementeren van clickTags in Actionscript 2 en 3.
Met de introductie van Actionscript versie 3, is ook de manier waarop een clickTag geïmplementeerd moet worden gewijzigd. Het gebruik van een Actionscript2 clickTag in Actionscript 3 werkt niet, maar er zal geen foutmelding gegenereerd worden.
Met deze handleiding wil WebAds graag laten zien hoe een correcte clickTag voor beide versies eruit ziet.

Actionscript 2:

on (release) {
    getURL(_root.clickTag, "_blank");
}

Actionscript 3
function handleClick(mouseEvent:MouseEvent):void {
         var interactiveObject:InteractiveObject = mouseEvent.target as InteractiveObject;
         var li:LoaderInfo = LoaderInfo(interactiveObject.root.loaderInfo);
         var url:String = li.parameters.clickTag;
         if (url) {
                   if (ExternalInterface.available) {
                            try {
                                      var userAgent:String = ExternalInterface.call('function(){ return navigator.userAgent; }');
                                      if (userAgent && userAgent.indexOf("MSIE") >= 0) {
                                               ExternalInterface.call('window.open', url, '_blank');
                                               return;
                                      }
                            } catch (e:Error) {
                                      //
                            }
                   }
                   navigateToURL(new URLRequest(url), '_blank');
         }
}

clickArea.addEventListener(MouseEvent.CLICK, handleClick);

Voor een complete uitleg en instructies hoe deze clickTags te gebruiken zijn kun je hieronder verder lezen.

Actionscript 2 - Actionscript 3 - clickTag meesturen

Actionscript 2 - stap voor stap

Stap 1

Voordat je een clickTag kunt plaatsen heb je een knop nodig waar mensen op kunnen klikken. Deze maak je zelf in Flash.

Open Flash en maak een vorm. Maakt niet uit welke vorm. In dit voorbeeld tekenen we een vierkant. Wanneer je dit gedaan hebt selecteer je dit vlak. Klik erop met je rechtermuisknop en kies voor OMZETTEN NAAR SYMBOOL. Hier kies je voor knop.

Stap 2

Wanneer je je knop weer selecteert zie je dat, in plaats van spikkels, een blauw lijn om je selectie staat. Ga nu naar het script venster. Deze is te vinden onder VENSTER -> HANDELINGEN of via sneltoets F9. Je zit nu in het scriptvenster waar wij de clickTag aan de button koppelen.

Stap 3

Om ervoor te zorgen dat je op de knop kunt klikken en je naar de juiste pagina navigeert heb je een stukje script nodig.

on (release) {
    getURL(_root.clickTag, "_blank");
}
Wat dit doet is:
scriptomschrijving
on (release)Methode die aangeroepen wordt na het indrukken van de button.
getURLMethode die de browser doorstuurt naar een nieuwe pagina.
_root.clickTagDe clickTag parameter die meegegeven is aan het Flash object.
_blankOpenen van de nieuwe pagina in een nieuwe browser window.
Je hebt nu een knop met daarin een clickTag.

Voorbeelden AS2

Size
728x90
300x250
336x280
300x600

Naar boven

Actionscript 3

Actionscript 3 werkt op een iets andere manier dan zijn voorganger. Je hangt het script nu niet aan een knop, maar in een losse frame.Met behulp van een event listener wordt het indrukken van de knop gedetecteerd.Deze manier kent daarom een aantal extra stappen waarbij je op een aantal zaken goed moet letten.


function handleClick(mouseEvent:MouseEvent):void {
         var interactiveObject:InteractiveObject = mouseEvent.target as InteractiveObject;
         var li:LoaderInfo = LoaderInfo(interactiveObject.root.loaderInfo);
         var url:String = li.parameters.clickTag;
         if (url) {
                   if (ExternalInterface.available) {
                            try {
                                      var userAgent:String = ExternalInterface.call('function(){ return navigator.userAgent; }');
                                      if (userAgent && userAgent.indexOf("MSIE") >= 0) {
                                               ExternalInterface.call('window.open', url, '_blank');
                                               return;
                                      }
                            } catch (e:Error) {
                                      //
                            }
                   }
                   navigateToURL(new URLRequest(url), '_blank');
         }
}

clickArea.addEventListener(MouseEvent.CLICK, handleClick);

Daarbij is de term clickArea de naam het object.
Je hebt nu een knop met daarin een clickTag.

Voorbeelden AS3

Size
728x90
300x250
336x280
300x600

Naar boven

ClickTag meesturen

De clickTag komt niet vanzelf terecht in het Flash object. De clickTag kan met behulp van de flashVar parameter worden doorgegeven aan het Flash object. Dit gebeurt enkel als een HTML template gebruikt wordt. Als de het Flash object door Webads geserveerd wordt, zal hiervoor uiteraard een correcte template gebruikt worden.
Om zelf te kunnen testen kan de html file die het Flash object toont worden aangepast.

Aanpassen gegenereerde HTML template

Als een Flash object 'gepublished' wordt met een HTML template dan is het mogelijk om deze template aan te passen. Als het Flash object 'myflashbanner.swf' heet dan is er ook een 'myflashbanner.html' file door CS4 gemaakt. Wanneer je het bestand opent, dan staat er een stukje code in wat lijkt op :


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="flashvars" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="myflashbanner.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="myflashbanner.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="flashvars" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>


Er moet 1 param tag en 1 variabele worden toegevoegd.
De volgende param tag kan aan het rijtje param tags worden toegevoegd :
<param name="FlashVars" value="clickTag=http://www.webads.nl" />
De volgende variabele kan worden toegevoegd aan de embed tag zodat deze er als volgt uit komt te zien :
<embed src="myflashbanner.swf" FlashVars="clickTag=http://www.webads.nl" quality="high".......


Op deze manier komt de clickTag waarde in het Flash object terecht.

Aanpassen default HTML template


Bij het opnieuw publiseren van het Flash object kan de template weer worden overschreven door CS4. Maak dus een kopie ervan zodat niet steeds de template aangepast moet worden.
Het is mogelijk om de default template aan te passen.
De template lijkt heel sterk op de bovenstaande vorm maar heeft wat andere variabelen.
De locatie staat op deze pagina beschreven.
Maak voor het aanpassen een kopie van deze template omdat hij voor alle flash projecten gebruikt wordt.

Naar boven