Image hit boxes not resizing/repositioning with image animation via GSAP ??

[KeelyM]

Hi there, I have a bit of a niche question regarding using the GSAP javascript library within Captivate. I've used GSAP within Captivate to a small extent and I really like the flexibility it gives to create smooth and unique animations pretty quickly (downside being you have to publish the Captivate project each time you want to preview it).

I should add I'm working in Captivate 9 and working in a non-responsive project (no breakpoints or fluid boxes. Initially I thought this might have to be exported as a SWF).

Here's a summary of my question - how does Captivate determine the hit box of images and is there a way to adjust to hitbox via javascript?

Here's the longer version - I have a slide with two images on it and I would like the user to be able to click on each image to have it enlarge and center in the screen, almost like a lightbox effect. I have used GSAP to animate the tweening of images to scale them up and center them on the screen. I have written it so the image scales up and re-positions on click, then scales back down and moves back to it's original position once clicked again. At first I had an issue with the Z Index of the images (seeing as they are two separate images on two separate layers), but thanks to another forum post I was able to learn how to call to the Z Index and change it. I then had an issue of both images scaling up even though one of them already was, so I changed some things around so that the image will only scale up if the other images are still 'minimized' (i.e. the two images can't be enlarged at the same time). My final issue and the one I am struggling to fix is that the hit boxes for my images stay at the same size and position that the image is originally placed at. So when the user clicks on an image and it enlarges and re-positions, it will only scale back down if the user clicks in the area of the images original hitbox. The hitbox is not scaling and re-positioning with the image. I image this has something to do with using GSAP to animate the image, and for some reason the hitbox isn't tracking it?

Is there a way I can call to the images hitbox and have that tween too?

I have tried adding another event listener to the window to have the images scale back down with a mousedown event on the window itself, if the image is enlarged. However this resulted in the animation not working at all. I also tried that method with an invisible 'hidden' shape (alpha set to 0), but that did nothing either.

Like I said, this is a pretty niche question. I'm not sure how many users out there are using GSAP within Captivate, but I would appreciate any advice or points in the right direction.

Thanks!

Here is my code for that slide if it is helpful - my images are named Image_18 and Image_19. I've added comments to explain what the code is doing.

cp.disable("text_content_35"); // disable my text layer since it is a shape layer with text set as a button with no action for 508 reasons, so it will show in tab order. 
var reImage19 = document.getElementById("re-Image_19c");
reImage19.style.zIndex = 1000; // setting the image's initial zIndex
var reImage18 = document.getElementById("re-Image_18c");
reImage18.style.zIndex = 1000;
function myFunction(){
reImage19.style.zIndex = 1000; // these functions are for the onReverseComplete, so that the image zIndex will return to 1000 once it shrinks down to original size
}
function myFunction2(){
reImage18.style.zIndex = 1000;
}
var image19 = document.getElementById("Image_19c");
var tl = new TimelineMax({paused:true, reversed:true, onReverseComplete:myFunction}); // greensock animation timeline
tl.to(image19, .8, {x:-185, y:-200, scaleX:1.8, scaleY:1.8, ease:Quad.easeInOut});
var image18 = document.getElementById("Image_18c");
var tl_2 = new TimelineMax({paused:true, reversed:true, onReverseComplete:myFunction2});
tl_2.to(image18, .8, {x:-185, y:80, scaleX:1.8, scaleY:1.8, ease:Quad.easeInOut});
window.addEventListener("mousedown", function(e){ // event for sizing the image up and sizing it back down 
if(e.target.id=="Image_19" && reImage18.style.zIndex == 1000){
tl.reversed() ? (reImage19.style.zIndex=5000, tl.play()) : tl.reverse();
}
});
window.addEventListener("mousedown", function(e){
if(e.target.id=="Image_18" && reImage19.style.zIndex == 1000){
tl_2.reversed() ? (reImage18.style.zIndex=5000, tl_2.play()) : tl_2.reverse();
}
});

[dan561]

One of the nice things about using JS is that you can test without republishing.

Just call the script from index.html, then you can modify the JS file and view the changes by refreshing the browser window.

Or, if the script is embedded in index.html you can edit it there and refresh the browser. Either way, testing is just a refresh away.

[KeelyM]

I didn't think about doing it that way! All my script right now is on the slide's on enter action in the little Captivate javascript window. I think I have had issues before getting functions to work in an external JS file, but I may try it again, because republishing every 5 minutes for testing can be pretty tedious and time consuming.

[Jeremy_Shimmerman]

I don't use GSAP so I'm not 100% sure how they handle hitboxes that have been resized. As far as I know, if you scale an image, the hitbox will also be resized with any animation function.  My guess is that the zIndex is somehow getting messed up because these are canvas objects. 

I did a similar function to what I think you are trying to accomplish but with a hover over effect.

My advice is that you create the whole thing as a zipped file (images and index.html) and import it as an HTML5 animation. You could even separate your css and js file.  

[KeelyM]

Thanks, Jeremy! Here's a simple codepen I made to recreate the effect I'm going for. The code is slightly different since setting the Z Index in GSAP is a little different than how I had to do it in Captivate, but the hitboxes move with the images (divs) -

Translate Z

I'm still fairly new to coding (especially html and css), you're suggesting building it all separately, say in something like dreamweaver, and then import that html file onto the slide?

[Jeremy_Shimmerman · Accepted solution]

It looks like you've already built everything you need. Instead of trying to write the javascript inside Captivate, create a separate folder and put the html file in with all of your images. Then zip all the files.  In Captivate choose insert HTML5 Animation and then select your zipped folder. It's basically putting a webpage inside the slide.  You can keep the same positioning, because you can make the embed the same size as your slide.

If you want the embedded HTML file to communicate to Captivate just put 'parent' in front. For example parent.cp.alert('testing');

I find this approach works much better for more complex animations.

I build all my HTML files using Atom. Atom also has a live server add-on that allows you preview changes directly atom-live-server​.

[KeelyM]

Thanks! This is very helpful, I will give it a shot!

[KeelyM]

Thanks, Jeremy, that did the trick! Now if I want to edit my code on this file without having to republish the captivate project, could I theoretically go into the 'wor' folder that Captivate puts out, find my web object HTML, and edit it from there?

I'm also wondering if you've had experience with too many web objects slowing a Captivate project down at all? I have about 20 pages I'd like to do the same effect on, do you think that would bog up my project playback time?

[Jeremy_Shimmerman]

Yes you could edit the wor file directly. I usually edit things outside and then re-publish.  Just a caution that if you do edit the unpublished file, you need to remove the old web object from the Captivate library and then re-import the new one.  For some reason the 'update' function doesn't seem to work for me.

I haven't had any problems with web objects slowing down Captivate and I've created some projects that have about 20. It depends on what you are putting into them. If there have huge images or svgs files that would probably slow Captivate down even if they weren't web objects.

You can also reuse the same web object on different slides and change up the variables based on the Captivate slide number. 

I guess if you are planning on reusing some very large images, you could import them into the Captivate library and then reference the path in your web object.  That way you wouldn't have to keep zipping the same images into every new web object package.

One other quick tip that might be helpful.  If you want your Captivate slide to access the web object (for example run a function inside the web object, or access a variable) use the following:

window.frames[0].frameElement.contentWindow.myFunction();

But if you have more than one web object or svg file on the slide you may need to adjust the frames number.

[KeelyM]

Thanks! Do you have an example of what the path would look like to reference an image in my Captivate library from an external .js file?

I usually just use 'document.getElementById' but I've only ever reference things that are placed on a slide, never something that exists solely in the library.

[Jeremy_Shimmerman]

I do this when I modify the standard goodbye.html file.  I use an image to replace the standard Captivate "the module has ended" message.

You just a reference the file path in the HTML file.  You don't even need to import the images into the Captivate library before publishing but put into the assets\htmlimages\ folder.

<img src="assets/htmlimages.YOURPIC.jpg">

[KeelyM]

Hi Jeremy, I've been using this method you've suggested and so far it's working pretty well (currently having some issues w/ getting an external HTML to work with captivate navigation), but my bigger issue currently is that I have added a .zip file as an html animation and set it to display for 'rest of project', however, come the 3rd or 4th slide of my project (used to be on the 3rd, now it's happening on the 4th?) the web object completely disappears. When I navigate backwards to earlier slides it's gone then as well.

Do you have any experience with this issue or have an idea of what could be causing it?

[Jeremy_Shimmerman]

Hi Keely,

I've never tried to leave an html animation to display for the 'rest of project'.  I would suggest adding it again to each slide as a workaround. It won't take up any more memory since it is already loaded into the library.

As far as navigating Captivate from within an external html animation, you need to make sure you add 'parent' to your code.  For example,

parent.cp.goToNextSlide(); would advance Captivate to the next slide.

[KeelyM]

Thanks! I think it ended up being a Z depth issue since I had multiple web objects on my slides (one as an .oam file and the other a .zip file), once I resized my .zip file to not cover the entire screen and just be the size of the content it contains, that has so far fixed the issue.

I was missing a couple 'parents' on my code, that has helped out with navigation too! Thank you for your help!!