Rotate an image with a button in html5

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

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.

Good News!

I have discovered a possible solution for you.

It does mean creating many states for your image though.

I created a sample that uses only four states that increment by 5 degrees. (0, 5, 10, and 15)

You can make whatever increment suits your application.

Clicking the plus and minus buttons will adjust the ruler and it remains draggable.

I created two variables. Degree and concatValue

I used javascript to concatenate the word degree with the value of the variable to make

degree0, degree5, degree10, degree15, etc.

My image states have matching names

Javascript then changes the state by inserting the concatenated value for the state name.

I have a plus and minus button. The plus button has the script below and the minus button simply has the degree minus 5 in the first line.

window.degree=degree+5

window.concatValue=String("degree").concat(degree);

cp.changeState("ruler",window.concatValue);

Here is a short video showing the mockup I did.

Do you need to see the item moving?

What about clicking the button and having it change state?

Would that work?

I use a Rotate To effect for such a purpose, create a custom effect and apply it with an advanced or simple action.

Do you say that this is not functioning? If yes, how did you test: you need to test the published project after uploading to a webserver.