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

Rotate object using Javascript without it resetting to original position first

Community Beginner ,
Oct 16, 2020 Oct 16, 2020

Copy link to clipboard

Copied

Hi,

I've created an interaction which invites the user to guess a percentage but rather than simply have them enter a number, I wanted it to have them press and hold buttons to adjust the displayed percentage up or down - I found some code on another thread which does this job perfectly.

 

Now I'd like to add a graphical representation of the percentage level - a meter that fills up or empties according to the percentage (see below). I've created an image to represent this and need to animate it to simulate the meter filling up/emptying.

 

Meter 1.png

 

There seems to be a couple of ways of achieving this as far as I can tell - either some sort of WAAPI/CSS/jQuery animation or by triggering an advanced action as part of my existing code.

 

I haven't been able to get the first options to work - whether that is down to my own ignorance, inability to understand or organisational restrictions I don't know. The second option of triggering and Advanced Action does work, but only to a point.

 

The problem occurs when I go from increasing the percentage to reducing it (or vice versa). When I switch from one action to the other, the image resets to it's original starting point before then rotating as it is supposed to do.

 

So, using the above image as an example, I can hold the down the Up arrow button and the percentage will increase to the displayed 51% and the arc bar grows at the same by rotating clockwise through about 100 degrees. If I then hold down the Down arrow button, the % figure starts decreasing, but the arc bar resets to the 0% position before rotating anti-clockwise when clearly I need it to start at 100 degrees and rotate from there.

 

It doesn't appear to be the Javascript that is causing it, because I mapped the same actions to buttons on the slide and the same thing happens.

 

Why is this happening and is there some sort of work around?

 

I thought it might be possible for the script to identify the 'current' rotation and instantly apply that rotation before the animation starts, but I haven't been able to find how to do that.

 

If it's relevant, I'm using Captivate 2019 (11.5.1.499)...

 

Thanks for any help offered!

 

 

TOPICS
Advanced actions

Views

604

Likes

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

correct answers 1 Correct answer

Advisor , Oct 19, 2020 Oct 19, 2020

I imagine there are a number of ways you might have crafted this.

I think I would try to tackle this with CSS transforms and a variable.

++rotVal;

$("#barc").css({transform: "rotate("+(rotVal)+"deg)"});

 

Where  "bar" is the name of my progress bar that is animating (keep the "c" at the end) and  "rotVal" is the rotation value.

 

If I apply the above script to an up button, it should rotate clockwise by 1 degree and if I apply the same to a down button but change the ++rotVal;  to become  --rotVal; 

...

Likes

Translate

Translate
Community Expert ,
Oct 16, 2020 Oct 16, 2020

Copy link to clipboard

Copied

Can you insert a Preview of the advanced action used?

Likes

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 Beginner ,
Oct 17, 2020 Oct 17, 2020

Copy link to clipboard

Copied

Of course, although as it's a single action Standard Action, it's not very exciting! 🙂

 

Advanced Action Preview.png

The parameters are:

Effect Start - 0 sec

Effect Duration - 0.1 sec

Rotation - 2

 

The other action (for reducing the % figure) is identical except the Rotation parameter is set to -2

Likes

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 ,
Oct 17, 2020 Oct 17, 2020

Copy link to clipboard

Copied

But you were talking about JS? 

Likes

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 Beginner ,
Oct 18, 2020 Oct 18, 2020

Copy link to clipboard

Copied

That's right - I've tried the solely JS approach to achieving the animation I need and I can't get that to work.

 

Instead, I've created the advanced actions to do it in Captivate and then use JS code to activate a click box that triggers them... it's inelegant, but in the absence of a successful alternative I don't know what else I can do.

 

That code seems to be working just fine - if I click on those click boxes manually, the same problem occurs

 

 

 

Likes

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
Advisor ,
Oct 19, 2020 Oct 19, 2020

Copy link to clipboard

Copied

I imagine there are a number of ways you might have crafted this.

I think I would try to tackle this with CSS transforms and a variable.

++rotVal;

$("#barc").css({transform: "rotate("+(rotVal)+"deg)"});

 

Where  "bar" is the name of my progress bar that is animating (keep the "c" at the end) and  "rotVal" is the rotation value.

 

If I apply the above script to an up button, it should rotate clockwise by 1 degree and if I apply the same to a down button but change the ++rotVal;  to become  --rotVal;  it should rotate counter clockwise by 1 degree.

 

Hopefully this will help provide the insight you need in some way.

Likes

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
Advisor ,
Oct 19, 2020 Oct 19, 2020

Copy link to clipboard

Copied

I tried to do a quick mockup of this working.

I just used two images for the effect.

The first is a mask set the same as my background - though that is not necessary.
The mask has an arc shaped cutout. (Made with PowerPoint)
The second image is just a wedge set behind the mask with the same radius as the arc.

As the wedge rotates - it fills or empties the arc-shaped cutout.

 

arc.gif

Likes

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 Beginner ,
Oct 20, 2020 Oct 20, 2020

Copy link to clipboard

Copied

Thanks Stagprime - your code was similar to some other posts I've read.

 

I couldn't get your code to work as is - the best I was initially able to manage was by declaring the rotVal variable with a value of 0 first - which of course reset the value to zero each time the button was pressed so it was effectively doing the same rotation repeatedly.

 

However, I have used your code as the basis of a rather Heath Robinson-esque solution which seems to be working, so thank you!

 

Just to expand on this though, if I were to set up a similar thing with a straight, horizontal bar, is there an equivalent function to the Rotate function I can use (like the equivalent of a motion path that causes the bar to slide to the right by a fixed distance)?

Likes

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
Advisor ,
Oct 20, 2020 Oct 20, 2020

Copy link to clipboard

Copied

Sure -

One thought on the other issue - did you create the  rotVal  variable in Captivate or only declare it in your code?

I have much better success defining them through Captivate and then addressing them with the code... anyway...

 

As for the horizontal bar... Two approaches.

1. Similar to the rotation using a fixed bar size and a mask,  move the bar by a set amount each time. (Top ex.)

$("#barc").animate({left: "+=10px"});

2. You can start with a small box and no mask and then expand the width by a certain amount. (Bottom ex.)

$("#barc").animate({width: "+=10px"});

Again - bar is the name of the object - (keep the c) - adjust the pixel size to fit your project.

bars.gif

 

Likes

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 Beginner ,
Oct 20, 2020 Oct 20, 2020

Copy link to clipboard

Copied

This is great, but slow...

I have the button triggering at an interval of 50 milliseconds, but this animation is slower, so if I click and hold the button all the way up to 100%, the animated bar takes several seconds to catch up.

 

I read elsewhere that the .animate() functionality can have a number of additional options attached, including duration.

 

I tried putting this in, which I think follows the correct syntax:

$("#S3_Pc_Meter_3c").animate({left: "+=6px"}, {duration: "50"});

but it has no apparent impact - have I got the syntax wrong or is duration not applicable to this particular animation?

 

Thanks for your continued assistance!

Likes

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
Advisor ,
Oct 20, 2020 Oct 20, 2020

Copy link to clipboard

Copied

If no duration is specified - the default is 500 ms or a half second.

If you need it to be snappier...

 

 

$("#S3_Pc_Meter_3c").animate({left: "+=6px"},50);

 

 

Just add a duration value between the curly brace and closing parenthesis.

 

Much faster.

Likes

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
Contributor ,
Oct 20, 2020 Oct 20, 2020

Copy link to clipboard

Copied

(Big thanks for all these Js contibutions !...)

Likes

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 Beginner ,
Oct 21, 2020 Oct 21, 2020

Copy link to clipboard

Copied

LATEST

Perfect - thank you so much for your help!

Likes

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