Copy link to clipboard
Copied
I have Captivate 2017 and am running on Windows 7. I am simulating a system and teaching students how to resize a window by clicking and dragging the side. The system isn't built yet, so I need to create the simulation manually. Is there a way to have students interact with a rectangle on the screen and resize it? Or maybe control an animation of the window resizing based on cursor position? Does captivate have system variables for cursor position (x and y)? Thanks!
Copy link to clipboard
Copied
What you are talking about here is not possible using default Captivate functionality. It would require custom programming.
Copy link to clipboard
Copied
What type of custom programming? JavaScript?
Thanks,
Nancy
Copy link to clipboard
Copied
Getting mouse cursor position is possible with JavaScript/jquery. Something in the line of...
$(document).on('mousemove', onMouseUpdate);function onMouseUpdate(e) {
var leftPos = $("#div_Slide")[0].getBoundingClientRect().left + $(window)['scrollLeft']();
var topPos = $("#div_Slide")[0].getBoundingClientRect().top + $(window)['scrollTop']();
v_xPos = e.clientX - leftPos;
v_yPos = e.clientY - topPos;
}
...on slide enter, with two user variables v_xPos and v_yPos.
There's probably much more elegant ways to do it too - I'm not much of a js programmer myself.
Copy link to clipboard
Copied
You can also activate the mousemove on the captivate slide.
$("#div_Slide").on('mousemove', onMouseUpdate);
function onMouseUpdate(e) {
v_xPos = e.clientX - $("#div_Slide")[0].getBoundingClientRect().left;
v_yPos = e.clientY - $("#div_Slide")[0].getBoundingClientRect().top;
}
Copy link to clipboard
Copied
It is possible but I wouldn't bother trying to customize Captivate's built in drag and drop functions- it's deeply embedded in the CPM file and is probably more trouble than its worth.
What you could do, if you are using captivate, is import a separate HTML file as an HTML5 animation using a separate javascript library. I've used Konvajs.
Copy link to clipboard
Copied
Thanks! These are great suggestions. I haven't worked with javascript before. Can you suggest any resources to look at on how to use javascript with Captivate and common javascript commands?
With Konvajs, what do I need to do to incorporate the code you referenced into Captivate (https://konvajs.github.io/docs/sandbox/Image_Resize.html)? I created a new project and saved darth-vader.jpg and yoda.jpg to a folder assets in the same directory as the Captivate project. I selected On Enter, Execute JavaScript and pasted the code into the script window. I previewed the project In Browser and HTML5 in Browser, but it didn't work. I also tried inserting the images into the Captivate page, but that didn't work, either.