• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Resizing Rectangle with Drag Interaction

New Here ,
Dec 07, 2017 Dec 07, 2017

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!

Views

244

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 07, 2017 Dec 07, 2017

Copy link to clipboard

Copied

What you are talking about here is not possible using default Captivate functionality.  It would require custom programming.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 07, 2017 Dec 07, 2017

Copy link to clipboard

Copied

What type of custom programming? JavaScript?

Thanks,

Nancy

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 07, 2017 Dec 07, 2017

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 07, 2017 Dec 07, 2017

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Dec 07, 2017 Dec 07, 2017

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.  

https://konvajs.github.io/docs/sandbox/Image_Resize.html

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 08, 2017 Dec 08, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources