Jump to content
Search Community

Mouseout Animation Fails When Testing with ADGEAR

Kvothe test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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.
×
×
  • Create New...