HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 254 posts at DZone. You can read more from them at their website. View Full User Profile

Using the Page Visibility API with Edge Animate

05.31.2013
| 2848 views |
  • submit to reddit

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.


Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)