Using the Page Visibility API with Edge Animate

yesterday i blogged about the page visibility api. in that entry i talked about how the api works and how it can be used. today i thought i'd demonstrate another example of this api. imagine you have an edge animate animation that runs in a loop. it would be cool if you could use the page visibility api to pause the animation when the browser tab isn't being displayed. here is how i solved this.

first off, i have to admit that i did not know how to create a looping ea animation. this blog entry explained it well: how to create a loop in adobe edge animate . essentially you create a trigger at the end of your animation that causes the whole thing to start over. simple and effective.

i then put all of my design skills to use to create the following:

epic, right? the next part was rather simple. (again, the assumption here is that you read the last post .) in edge animate i created a creationcomplete event and then used the following code.

symbol.bindsymbolaction(compid, symbolname, "creationcomplete", function(sym, e) {

    var that = this;
    function isvisible() {
      if("webkithidden" in document) return !document.webkithidden;
      if("mozhidden" in document) return !document.mozhidden;
      if("hidden" in document) return !document.hidden;        
      //worse case, just return true
      return true;
    }

    $(document).bind("webkitvisibilitychange mozvisibilitychange",function(e) {
        if(isvisible()) {
           that.play();
        } else {
           that.stop();
        }
    });

});

this is basically the same code as shown in the previous entry, but now it makes use of the ea apis to stop and play the animation.