Jump to content
GreenSock

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

Flash CC Canvas export for banners, anyone tried it?

Recommended Posts

 

I'm not sure what events are available for a flash canvas file, but if you know where the mouse position, you can figure out if it's inside something.

 

http://lamberta.github.io/html5-animation/examples/ch07/01-mouse-events.html

/**
 * @param {object} rect Object with x, y, width, and height properties
 * @param {number} x    X Coordinate position to test
 * @param {number} y    Y Coordinate position to test
 * @returns {boolean}
 */
function containsPoint(rect, x, y) {
  return !(x < rect.x || x > rect.x + rect.width ||
           y < rect.y || y > rect.y + rect.height);
}

Sorry, I'm still unclear how to get the mouse out animation to work when the banner is in an iframe.  The code above does not seem to make a difference.

Link to comment
Share on other sites

Ohem, here is a link to the CreateJS events. Flash CC exports using CreateJS, which uses EaselJS.

 

CreateJS EaselJS EventDispatcher

 

http://www.createjs.com/docs/easeljs/classes/EventDispatcher.html

 

The following event handlers available for CreateJS EaselJS display objects are: click, mousedown, dblclick, pressmove, pressup, mouseover / mouseout, and rollover / rollout.

 

CreateJS EaselJS mouse interaction tutorials:

 

http://www.createjs.com/tutorials/Mouse%20Interaction/

 

:)

  • Like 2
Link to comment
Share on other sites

I do have mouse interactions working; the issue is that when the banner is in an iframe, the mouse out (or roll out) is not detected.

 

It works fine when the banner is not in an iframe, but when HTML5 banner ads get trafficked, they use iframes to display them on different sites.  So I'm hoping to find a way to keep it working in an iframe.

 

This is what my code looks like:

this.clickthrough_btn.addEventListener("mouseover", over.bind(this));
 
function over()
{
  this.cta.gotoAndPlay("over");
}

this.clickthrough_btn.addEventListener("mouseout", out.bind(this));
 
function out()
{
  this.cta.gotoAndPlay("out");
}
Link to comment
Share on other sites

Do you have a limited codepen example .. so we can see your code in context? There might be a cross domain policy issue with the iframe. Also are you testing this on your local server, remote server, or on codepen?

 

I know codepen can be real buggy when testing iframes since codepen will display normal pens within an iframe. Which could give you buggy behavior in a Russian doll type of testing environment. An iframe within an iframe.. iframeception.

 

But a live code example would be helpful :)

Link to comment
Share on other sites

I uploaded the banner to Sizmek, & their preview automatically puts it in an iframe.  I also tried just making an html file with an iframe and testing it locally, and had the same results.  (Mouse enter works, but when I roll outside of the iframe, it doesn't detect it.  

 

I'll put together a simplified example this evening.  Thanks!

Link to comment
Share on other sites

Okay, here is an example.  Mouse over & out animations work great in the simple_banner.html file, but once I put it all in an iframe (iframe_test_container.html), mouseout is no longer detected.

 

Since they use iframes to serve HTML5 banners, I'm really hoping I can get the over and out states working within an iframe.

 

As always the help is much appreciated.  Thanks!

iframe_canvas_test.zip

Link to comment
Share on other sites

So far my only idea for a workaround is making the hit area slightly smaller than the canvas, but I'm hoping not to resort to such a hacky solution...

Link to comment
Share on other sites

So far my only idea for a workaround is making the hit area slightly smaller than the canvas, but I'm hoping not to resort to such a hacky solution...

 

I actually remember this kind of 'hack' from Flash (SWF) days when trying to detect mouse leaves, it might actually be your only option.

  • Like 1
Link to comment
Share on other sites

I guess I'll either do that, or just make an additional smaller hotspot that just covers the CTA button and only put the rollover state on that part.

 

Though if anybody else has any suggestions that would be great too.

Link to comment
Share on other sites

Again, I don't know anything about how Flash sets this things up or CreateJS, but if you can access the canvas element, then you can do everything I posted above. There might be a better way to access the document and canvas in CreateJS, but this works.

 

http://plnkr.co/edit/rDtONIWD5Jgrpd8Ax7oL?p=preview

  • Like 2
Link to comment
Share on other sites

Yeah. I used native canvas events instead of the ones use by CreateJS.

  • Like 1
Link to comment
Share on other sites

Again, I don't know anything about how Flash sets this things up or CreateJS, but if you can access the canvas element, then you can do everything I posted above. There might be a better way to access the document and canvas in CreateJS, but this works.

 

http://plnkr.co/edit/rDtONIWD5Jgrpd8Ax7oL?p=preview

Thank you so much for that working example!  I really appreciate it.  This is the most helpful forum ever & never ceases to impress me.

 

For anyone else wondering, this is the relevant code that allows the mouse out to be detected within an iFrame:

var canvas = document.querySelector("#canvas")


//Mouse interactions

canvas.addEventListener("mouseover", over.bind(this));

function over()
{
	this.cta.gotoAndPlay("over");
}


canvas.addEventListener("mouseout", out.bind(this));

function out()
{
	this.cta.gotoAndPlay("out");
}

  • Like 1
Link to comment
Share on other sites

Oh wait, it actually seems like 

var canvas = document.querySelector("#canvas")

isn't needed because Flash automatically includes 

canvas = document.getElementById("canvas");

in the published html file.

 

So it's basically just swapping out "this.buttonInstanceName" with "canvas" and everything works perfectly even in an iframe.  Yay!

  • Like 3
Link to comment
Share on other sites

  • 5 months later...

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