Skip to main content
K
KeelyM
Inspiring
September 13, 2018
Answered

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

  • September 13, 2018
  • 2 replies
  • 2375 views

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();
}
});
This topic has been closed for replies.
Correct answer Jeremy Shimmerman

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​.

2 replies

Jeremy Shimmerman
Jeremy Shimmerman
Participating Frequently
September 14, 2018

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.  

K
KeelyMAuthor
Inspiring
September 14, 2018

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?

K
KeelyMAuthor
Inspiring
September 14, 2018

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.


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.

D
dan561
Inspiring
September 14, 2018

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.

K
KeelyMAuthor
Inspiring
September 14, 2018

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices