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 !...

...

[Lilybiri]

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.

[Dirlo]

...

Thx for your quick answer !...

So I try to add an effect (didn't think of it until your advice !!...)

Works fine in the browser... but again I have trouble with the html5 output !!!...

(Sorry... didn't test it after publishing... !!!... I try it now !!...)

...

[Dirlo]

...

I still have problem...

This is where my project is :

http://soutien67.fr/math/activites/longueur/Longueurs_02/

Its on the last diapo...

I want to rotate the ruler when I click on the button on the right side...

Thx again for your help !...

...

[Lilybiri]

I don't download projects.

Are you on a responsive or a non-responsive project? If the project is not-responsive, the only preview method that will generate HTML5 output is Preview HTML5 in Browser (F11).

[Dirlo]

...

It's a non-responsive project...

I try to do this with the "apply effect" fonction on my button, or with the "advanced action"...

Both works fine in the browser... But still not in HTML5 !...

...

[Lilybiri]

It works with F11: HTML5 in Browser, but not after publishing and uploading to a webserver. That is very strange. Which browser do you use?

[Dirlo]

...

I use Mozilla Firefox...

(But I just tested it with Edge and Chrome... and still doesn't work fine with html5)

Maybe the trouble comes because my image I want to rotate is already in a drag and drop effect ?...

...

[Stagprime]

Do you need to see the item moving?

What about clicking the button and having it change state?

Would that work?

[Dirlo]

...

I think the problem is linked with the drag and drop effect !...

I just duplicated the frame and deleted the D&D effect and it's ok !!!...

But I need the image to move !... (it's a graduated ruler that I want to use to measure segments)

...

[Lilybiri]

That is VERY important information that was totally lacking in your original question.  Drag&Drop objects are in a different situation. Which action did you use to apply the effect: the Success action of the D&D slide or object actions?

[Dirlo]

...

Oups !... Sorry for this !!...

So I want to drag AND rotate the same image...

Dragging the image by clicking on it... and rotate it with a button...

I already found this is possible in SWF and HTML (just read a post with a protractor, download the project and try it in html5 and it doesn't work also in html5 )...

Re: Setting droppable parameters

I also tried various options with the states object without any luck...

But I want it to work in HTML5...

Pffff... My head is burning !!!...

...

[Lilybiri]

Which button? Is the D&D set up as a question slide or not? The D&D slide is paused at 1,5secs. What do you want exactly to happen? D&D objects have InBuilt states, but those are not what you want?

[Dirlo]

...

I try to make it clearer...

On a slide, I have 5 segments (which are not horizontal) and a graduated ruler (the draggable image).

And I want my students to measure these segments with the ruler... So I need this ruler to be draggable but also I need it to be "rotate-able", as the segments are not horizontal...

So for the draggable ruler, its ok...

And I add 2 buttons to rotate this ruler (clockwise and anti-clockwise) so that the students can measure correctly the segments...

And that's where the problem occurs when publishing in html5, I can't rotate the ruler !...

(I just read your blog about the states objects... but it doesn't seem to help so far...

Drag&Drop in 2016 with Captivate 9 - Captivate blog

Even with the DragOver state, which I can't configure to be "rotate-able")

(You can have a look on my file, or the protractor file, without downloading them, to make this even clearer, if needed !...)

Big thanks for your time and your astonishing work with Captivate !

...

[Dirlo]

...

So... I assume there's no way to make the same object draggable and "rotate-able" if using the Drag & Drop function ?...

So... I try to use the simple draggable jQuery function...

https://jqueryui.com/draggable/

Adding this in the opening action of the slide in the Javascript window :

$( function() {

  $( "#MyObject" ).draggable();

} );

But even this doesn't work !??...

(I try to remove or change the " with '... and other things... but without any success so far !..)

So... Is there a simple way to make an object draggable without the D&D function of Captivate ?

Thx !...

...

[Lilybiri]

Sorry, I didn't find time to explore more but I'm not astonished that D&D objects don't allow effects combined with dragging.  You would have to use JS to create the total animtaion, or use Animate CC in combination with JS to make this possible. I am not a programmer, advanced actions are my specialty but am doubtful this could be arranged with those actions only.

[Dirlo]

...

No need to sorry !... You were already a great help !...

I was a Flash user... But with the coming of Tablets and the announcement of the end of SWF, I try to re-do my projects in html5 (and I have lots of them !!!)...

I tried to use Animate CC but didn't find it so helpful for my purpose... and that's why I come now to Captivate with great enthusiasm !...

But I'm still a beginner with it. It's actually not so easy to implement JS or I didn't find the good resources I need...

It would be great to make draggable objects also "rotate-able"...

My project is an example, like the protector one I mentioned in a previous answer... But also to make a tangram game and I'm sure many other things...

So... I'm desperate for any help now !...

Thx !

...

[Lilybiri]

I don't play the same games as you do, have idea what 'tangram game' means. For SWF output there were a lot of widgets available for Captivate that made it much easier to extend its functionality. For HTML5 output however, they are pretty rare. A great widget is CpExtra from InfoSemantics, but don't think it would solve your present problem.

Exchanging with JS between an OAM (created with Animate CC) and Captivate is however a work flow that allows to do a lot more, since you are a Flash developer. There used to be a great course by Jim Leichliter, but it is not yet upgraded to the present version, no longer available for former versions neither.

I have created some games with Captivate, but dragging is always an issue...

[Stagprime]

I totally get what you are doing. I took a peek at the measurement module and I can see what is going on.

I really like the idea and started trying to play with this idea.

I was able to make a drag source rotate by use of a change state and a click of a button. However, that does not solve the need to continually increment that rotation. So, I want to toy with the idea of having javascript check the changeState value and increment or decrement based on a concatenated string in some kind of loop.

This is more of a hypothesis and I have not tried it yet, but would like to when I have some time. I can envision some useful cases for this functionality. I will let you know if I end up coming across something that works.

Bon travail!

[Lilybiri]

@stagprime  I don't know if you did see the full thread? The problem is that this has to happen for Drag objects!

[Stagprime]

Yes. I successfully made one of my drag objects do a changeState by clicking another button. The item remained draggable with the new positioning.

That is why I thought I might create a series of states such as   state0, state5, state10, state15, etc and see if I can use javascript to somehow track and increment with each button click.

Like I said, it is a hypotheses, and perhaps a clunky workaround, but I would like to play with it as well because I can find some good uses for that functionality in my own stuff as well.

[Lilybiri]

Great!

[Dirlo]

...

Very great !...

The tangram game must be a good example to work with these abilities !...

Tangram - Wikipedia

...

[Stagprime]

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.

[Dirlo]

...

Effectively, it looks great !...

I will start to work on your method immediately !... But not sure I can reproduce it...

Surely, I'll be back there with new questions !...

Big thanks anyway !...

...