Rotate an image with a button in html5

[Dirlo]

...

Hello !...

I'm using Captivate 2017, and I want to rotate an image when I click on a button...

Everything is fine in the browser, but when using html5 it doesn't work anymore...

So I try to use jQueryRotate.js.

So I added this js file in the assets/js/ folder and added it in the html file :

var lJSFiles = [  'assets/js/jquery-1.11.3.min.js','assets/js/jQueryRotate.js','assets/js/CPM.js','assets/playbar/playbarScript.js' ];

And my javascript on the button is this :

$(this).click(function() {

$('#Regle_3').rotateAnimation(angle);

(angle+=2)%90;

});

(Regle_3 is the name of my image)

I try for too long now... So I need your help !!...

Thanks in advance !...

...

[Dirlo]

...

So...

I think I did all you mention in your answer... but unsuccessfully !...

I manage to "rotate" the ruler (only once)...

But as soon as I put the drag option, the "rotation" is no more available...

I want to send you my try... But don't find a way to do so...

(Write you private message... )

...

[Stagprime]

I encountered three things.

1. Make your object draggable before making the multiple states. If you make all the states and then make it draggable, it will change all the states back.
2. When making an object draggable, size and position parameters become locked. So you'll need to create new custom states and then uncheck the 'lock size and position' box. Then you can do the appropriate degree changes.
3. Performance was best when I made it so that the drag object returned to the original position. Rotating away from the original position caused some weird skewing when it rotated.

I can make my project file available for you, and anyone else to download later today.

[Stagprime]

Here is a link to my little working demo.

It was created with Captivate 9 and I cannot guarantee it will convert to something else well.

Rotate Drag Source Object Demo  ruler.cptx (900K)

In summary, it has the following:

1. Two variables - degree and concatValue - current values shown in boxes by the buttons
2. Two buttons - each button executes three lines of javascript - one decreases the angle, one increases it.
   1. First line of javascript increases or decreases the angle value by the desired value
   2. Second line concatenates the word degree with the current value for degree
   3. Third line changes the state of the image using the concatenated name which matches the state name.
3. A ruler image with default 'Normal' state and four additional states to show 5 degree changes
4. Three random lines
5. Ruler as drag source

Hopefully many will find a good use for this.

[Dirlo]

...

You are a magician !!...

(My mistake was surely to produce the multiple states before the dragging function... ?...)

I could convert the source in Cpt 2017...  Everything is ok !... (even in html5 !...)

Except... ... When I stop dragging the ruler, it comes back to its original position... (I try to uncheck the come-back option but it doesn't change anything ???...)

I think I could reproduce it my way with your source and I will tell you if it's ok !... (Be patient... I start to play with other things... Captivate is so captivating !!...)

Great thx anyway !...

...

[Stagprime]

Yea, I did it that way since if you have the object rotate away from the original position, it skews funny and does not look right.

It works better to rotate it from the original position where the states were created and then move it.

If you open the object actions panel on the D&D tab for the blue target box, you can set the ruler as an accepted source and see what I mean.

If you want to do that, you should also bring that box up on the layers so it is directly below the ruler and bring the opacity down. If you don't, the ruler will be difficult to pick up again.

[Dirlo]

...

And this is definitely a big issue for my projects...

I manage to reproduce your brilliant idea... But I need to drag first an then rotate... and eventually drag again...

And as you see, after dragging an object, the rotation becomes strange (it keeps the Length and Hight of the initial object...).

I will try a few things with javascript...

Big thanks for your help !...

And best wishes for the new year !...

...

[Stagprime]

C'est dommage.

j'espere que vous trouvez quelque chose qui va marcher bien pour toi.

Perhaps my French skills are not as good as my Captivate skills.

[Jeremy Shimmerman]

Not sure if you have already found your solution.  I just created a video on this - maybe it will help. Also I don't see the .rotateAnimate function on the jQueryRotate website. 

https://elearning.adobe.com/?p=20807

[Dirlo]

...

You are a javascript magician !...

I had first problem to copy/paste your code and make it work because of problems with the " and ' characters !!...

And the javascript window is not so big in Captivate !...

But when I found the trick, it works fine !... And even with a drag and drop effect !...

I'm so happy !...

Great Thx !...

...

[Dirlo]

...

I'm still having a problem...

I have an horizontal ruler, which I want to drag and rotate if needed.

I can drag the ruler... I can rotate it using JQueryRotate (Thx to Jeremy's post)... But when I try to drag it again, my object comes back to its initial horizontal position (and when I stop dragging it, it appears again in its rotated shape).

But I want to drag it in the rotated shape...

I think I have to use Jquery to drag it (and not use the dragging widget) but I don't manage to do it so far...

I will open a new post to try to find more help !...

...

[Dirlo]

...

Done it !...

Drag and rotate the same object with JQuery and JQueryRotate !...

...