Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kvothe

Mouseout Animation Fails When Testing with ADGEAR

Recommended Posts

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

Link to post
Share on other sites

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

 

  • Like 1
Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×