Twitter: raymondcamden


Address: Lafayette, LA, USA

Delaying an Edge Animate asset until visible - Part 5

06-09-2014 2,956 views JavaScript, HTML5 12 Comments

So, in my last post on this topic, I mentioned that I was surprised at how many times this "simple" topic kept coming up on my blog. In a way, this has turned into the series that just won't die - no matter how many times I think I've covered every little detail.

But much like how some movie franchises seem to find a way to just keep chugging along, so is this particular series of tips on Edge Animate. Today's post is more of an addendum though so be sure you've read the earlier articles. (I've linked them all at the bottom.)

This weekend I worked with a client who asked me to simply add my "Don't start until visible" code to the page. I thought it was going to be easy but I ran into two issues. The first one was that he was using the minified code in production and needed a way to disable autoplay. He still had the EA project files, but unfortunately they appeared to be a different version. Why do I say that? I opened his project, disabled autoplay, saved, and then did a diff on the generated files. I saw multiple changes, not just one. Maybe I did something wrong, or maybe I was worrying about something I didn't need to, but I began looking at the minified JS file to see if I could correct it there.

I was able to find the code I needed to change, but I urge people to consider carefully before they follow this advice. I'm not confident that how the Edge code is minified in the future won't change. This worked for me this weekend, but I'd suggest against modifying the code this way unless you really have to. With the warning in mind, if you find the foo_edge.js file (where foo is the name of your project), look for "Default Time" in the code. You should see something like this:

tl:{"Default Timeline":{fS:a,tS:"",d:3000,a:y,tt:[]}}

In the block above, the a key represents autoplay. Setting it to n will disable it.

tl:{"Default Timeline":{fS:a,tS:"",d:3000,a:n,tt:[]}}

Ok, so that ended up being the easy issue. What I found next was that my code always thought it was visible, even when it wasn't. Turns out, the client was using an object tag to embed the EA asset. I've seen other people do this as well. It is a way to embed an EA asset into an already designed page. Here's the issue though. My code looks at the value of window to see how far scrolled the user is and how it compares to the position of the asset.

In a case where the asset is in an object tag, the window object represents the object tag, not the "real" window. In that case, the asset is positioned on top, which means my code thinks it is immediately visible. The modification to fix this isn't too hard though. Here is the entire block that goes inside the creationComplete handler. (And again, I'm assuming you've read the earlier posts. If you have not, please do so first.)

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

	// insert code to be run when the symbol is created here
	var wasHidden = true;

	//http://stackoverflow.com/a/488073/52160
	function isScrolledIntoView(elem) {
		var docViewTop = $(window.parent).scrollTop();
		var docViewBottom = docViewTop + $(window.parent).height();

		var elemTop = $(elem).offset().top;
		var elemBottom = elemTop + $(elem).height();

		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
		  && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
	}		  

	var element = sym.element;
	element = $("#EdgeID", window.parent.document);

	if(isScrolledIntoView(element)) {
		console.log('on load vis');
		wasHidden=false;
		sym.play();
	}

	function doStart() {
		if(isScrolledIntoView(element)) {
			if(wasHidden) {
				console.log('Start me up ID5');	
				sym.play();
			}
			wasHidden = false;
		} else {
			sym.stop();
			wasHidden = true;
		}

	}

	$(window.parent).on("scroll", doStart);

});

The first change is to redefine element, the asset. Instead of referring to the asset itself, I'm using the ID value of the object tag in the parent document. This is important as I'm changing the entire context of how I check for visibility. Switching from "asset in window" to "thing holding my asset to the top window."

The next change is to the isScrolledIntoView method. I changed the two references of window to window.parent. And that's it. Now - to be clear - this assumes a "two level" DOM. It is possible that someone could do an object tag pointing to an HTML page that used yet another object tag. But that would be overkill and I'm sure no one will. (And because I said that - someone will.)

Anyway, I believe I ran into people who were using object tags before and I'm also thinking that my code failed for them. Hopefully this version will work better.

Related Blog Entries

12 Comments

  • Peter #
    Commented on 06-23-2014 at 4:55 AM
    Hello Raymond, first of all thanks for all the knowledge.

    I'm trying to use your code for a couple of days now, I've been reading all of it's parts. I just can't seem to figure it out. I don't know if I have to change something on the code to adapt it to mine.

    The thing is, I have an animation of a little guy coming out of an underground hole and that animation is on the footer of the screen. I want this animation to play when the user goes to that section of the screen. I'm putting your code on creationComplete, and I must admit I'm quite an amateur with coding, so I bet I'm doing something wrong, but the animation just won't run, it's frizzed and if I apply the Auto Play it just plays normally without waiting for me to scroll.

    Thanks in advanced!
  • Commented on 06-23-2014 at 9:15 AM
    Is it online where I can see?
  • Peter #
    Commented on 06-23-2014 at 10:25 AM
    Yes -it's in process- but here it is.

    http://mbibs.businesscatalyst.com/contact-us.html

    The hole on the ground is the animation. The guy comes out of that hole.
  • Commented on 06-23-2014 at 11:11 AM
    I see you are using an iframe, which is slightly different than what I dealt with above. In theory it should have worked the same. I'm going to have to try to debug this myself on a simple iframe demo locally. It's that or you give me FTP access to your box to try to diagnose it directly there.
  • Commented on 06-23-2014 at 11:12 AM
    Actually it may be simpler. See this line:

    element=$("#EdgeID",window.parent.document);

    This expected to match the OBJECT id in the parent document. You are using an iframe with id of U1132_animation. Try using that value. (Don't forget to put the # in front.)
  • Peter #
    Commented on 06-23-2014 at 11:49 AM
    Hello Raymond, many thanks on your replies.

    I would totally would share with you the FTP information but I'm using Adobe Muse's and I don't even know how it is.

    I've tried with that ID but doesn't work and I think it is cos every time I publish it, the ID changes...I've seen this by inspecting the element on Google Chrome and every time I made changes the ID was different.

    Thanks again.
  • Commented on 06-23-2014 at 11:52 AM
    Hmm - if you can't stop that from happening, I'm not sure what to suggest. This may, stress, MAY work:

    element=$("iframe",window.parent.document);
  • Peter #
    Commented on 06-23-2014 at 12:48 PM
    Thanks Raymond, I'm burning my brain right now...I think I smell barbecue.

    I will definitely post the solution here if I ever find it...but I'm sure it has to do with that iframe id that's changing and I can't find a way to say to the code "this is the animation"
  • Commented on 06-23-2014 at 12:52 PM
    I just noticed you have 2 iframes on the page, so my code would have matched the first one. You would need to handle that.
  • Peter #
    Commented on 06-23-2014 at 1:04 PM
    Those iframes are 2 different Adobe Edge animations (the plane and the hole). I'm working the website inside Muse cos like I said earlier I'm quite a noob on coding. I bet there's a way to name them like I want to and put that name on your code, I just can't find it.
  • Jason #
    Commented on 07-08-2014 at 10:01 PM
    Hi Raymond,

    I've been trying to adapt this for a horizontal scroll and can't for the life of me get it to work ...
    Is it not as simple as using

       function isScrolledIntoView(elem) {
          var docViewLeft = $(window).scrollLeft();
          var docViewRight = docViewLeft + $(window).innerWidth();

          var elemLeft = $(elem).offset().left;
          var elemRight = elemLeft + $(elem).width();
          
          return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
           && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
       }   

    ?
  • Jason #
    Commented on 07-08-2014 at 10:07 PM
    here is my current .html ...

    http://parkviewmotorcamp.com/anim8a/horizontal/hor...

    and associated project files ...

    http://parkviewmotorcamp.com/anim8a/horizontal/hor...


    thanks for any assistance :)

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty