0

Is there a way to start a timer in my flash MovieClip when it is currently visible in the viewport of a HTML page without using Javascript + ExternalInterface? Maybe an event or another trick?

I'd like to start/stop a timer when this happens.

dan-lee
  • 14,365
  • 5
  • 52
  • 77
  • When MovieClip will be added to stage Event.ADDED_TO_STAGE will be fired. When removed — Event.REMOVED_TO_STAGE. Try to register an event listener to these events. – Daniil Subbotin Mar 04 '15 at 13:29
  • This is purely on stage side, unfortunately it has nothing to do with the viewport of the browser. – dan-lee Mar 11 '15 at 14:08

2 Answers2

1

Like you already discovered the ThrottleEvent will tell you when the Flash Player has been throttled in cases where that is supported, which includes scrolling off screen and browser tab switching.

In addition to that, you can manually detect if the Flash object is visible using JavaScript and callbacks in Flash. Example:

First, set up callbacks in your SWF to pause and resume your timer:

var timer:Timer = new Timer(1000);

ExternalInterface.addCallback("pause", timer.pause);
ExternalInterface.addCallback("resume", timer.resume);

Next, in your HTML, track the position of your Flash object within the HTML viewport, and call into the SWF when a change occurs. Here's a good example of doing this: How to tell if a DOM element is visible in the current viewport?

You handler would simply need to track when the Flash object visibility changes and call into the SWF when it does:

function isElementInViewport (element) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

$(window).on('DOMContentLoaded load resize scroll', handler); 

var flashIsVisible = false;
function handler(e){
    var flash = document.getElementById("myFlash");
    var isVisible = isElementInViewport(flash);
    if(isVisible != flashIsVisible){
        flashIsVisible = isVisible;
        isVisible ? flash.resume() : flash.pause();
    }
}
Community
  • 1
  • 1
Aaron Beall
  • 49,769
  • 26
  • 85
  • 103
  • I appreciate your time writing this, thanks. I agree with you, usually I would check from the browser side. But this case is a special one, because I am in an Iframe (This is a fact which I can't change unfortunately). I cannot reach into the parent page and do bounding checks, because of the nature of Iframes and its security concerns. – dan-lee Mar 11 '15 at 16:02
  • Ah, yes, an iframe does throw a wrinkle into it. – Aaron Beall Mar 11 '15 at 17:00
0

You can try with Event.ACTIVATE or Event.DEACTIVATE, but what that does is just triggers event when your flash file gain or lose focus. Maybe that is your answer.

Antizam
  • 216
  • 2
  • 5