Mouseout Animation Fails When Testing with ADGEAR

[Kvothe]

Very new to integrating gsock into banner ads that will eventually be sent to a 3rd party host, ADGEAR, for serving up to my client's ad venders.

 

I've been trying to setup a banner in Animate CC. I use a mouseover to increase the alpha of a movieclip called "darken", which effectively darkens the stage, and then I use mouseout to change the alpha property of "darken" to lighten the stage once again. Just want a nice way to show user interaction with my banner. 

 

Based my banner setup on an Animate CC template found here on this website, GSAP_AdStarter_Demo_2017.fla. It works perfectly when I launch the banner in my browser, but when I use ADGEAR's test site, for some reason, the mouseover animation works, but the mouseout animation fails to play. I think this might have something to do with how I'm targeting the "root" to trigger the movieclip animation "darken". I tested the GSAP_AdStarter_Demo_2017.fla on ADGEAR's test page and it also works perfectly, so I'm pretty sure there's some problem with my coding. 

 

Any help would be much appreciated!! Thanks in advance. 

 

//Enables ClickTAG for ADGEAR
stage.enableMouseOver(10);
this.clickButton.on("click", function(evt) { ADGEAR.html5.clickThrough("clickTAG"); });
this.clickButton.cursor = "pointer";

//set scope activation object 
var root = this,
    tl;

root.on("mouseover", function(){
        TweenMax.to(this.darken, 1.25, {alpha:1, ease:Back.easeOut});
    });
root.on("mouseout", function(){
        //if the ad is asleep, wake the ad to allow animation to complete
        ad.wake(1500);
        TweenMax.to(this.darken, 1.25, {alpha:0, ease:Back.easeOut});
    });

 

Files.zip

[Kvothe]

Just figured this out.  Had to use the following. As I'm pretty new to this stuff I'm not sure I exactly how it works, just glad it does.

 

Found the base code here: https://forums.adobe.com/thread/2171928

 

My new code:

canvas.addEventListener("mouseover", over.bind(this));
 
function over()
{
  TweenMax.to(this.darken, 1.25, {alpha:1, ease:Back.easeOut});
  TweenMax.to(this.learnMore_white, 1.25, {alpha:1, ease:Back.easeOut});
  TweenMax.to(this.learnMore_blue, 1.25, {alpha:0, ease:Back.easeOut});	
}
 
canvas.addEventListener("mouseout", out.bind(this));
 
function out()
{
  TweenMax.to(this.darken, 1.25, {alpha:0, ease:Back.easeOut});
  TweenMax.to(this.learnMore_white, 1.25, {alpha:0, ease:Back.easeOut});
  TweenMax.to(this.learnMore_blue, 1.25, {alpha:1, ease:Back.easeOut});	
}

 

[davi]

You may also want to make the clickable area a bit smaller than the banner, like a 1 or 2 pixel buffer around the edges so it catches the mouseout.

[ohem]

Just targeting the entire canvas directly solves the iframe mouseout detection issue.  No buttons needed.