Can I use an effect to Trigger a change of state?

[teacherzilla]

I am on the 3rd slide of 3 and want to use a down effect to trigger a change of state of an object. I am moving a molecule across a membrane through a protein, so the protein door has to open, let the molecule move in, then close, then door on the other side opens and the molecule moves out. I have tried using various delay of state options, but it never opens and/or closes at the right time. Any suggestions?

[Lilybiri]

In CP2019 it is not possible to apply an effect to a transition between states, sorry. You will need to revert to a Show/Hide workflow instead of changing states.

[teacherzilla]

Thank you for quick response. Is it possible to time the state change on the 3rd slide to coincide with the action on the 3rd slide? I haven't had luck doing it, but maybe I'm not doing it correctly. 

[Stagprime]

Perhaps more like this.

It is a little smoother.

It will mostly be about the timing to get  the best look.

 

[teacherzilla]

I was trying to get the animation to run without a button trigger, but maybe adding a button to have the user trigger the animation will work better anyway. I would love to use JS, but am not proficient to say the least:)

[Stagprime]

Understood.

Part of the issue in my opinion is that the delay action is not very accurate in terms of actual time and thus causes frustration.

If you wish to avoid a button to launch the animation, the code can be placed as an  onEnter action to the slide itself. Again the key is in the timing you set up.

Here is the code and please see the explanation below.

setTimeout(function() {
cp.changeState("door1","open");
},1000);

setTimeout(function() {
$("#molec").animate({left: "+=400px"},2000);
},1500);

setTimeout(function() {
cp.changeState("door1","Normal");
},2000);

setTimeout(function() {
cp.changeState("door2","open");
},2500);

setTimeout(function() {
cp.changeState("door2","Normal");
},3500);

You should notice that there are five discrete blocks. All of them are setTimeout

Also notice the number values at the end of each block. These are the times (in milliseconds) at which the action will execute.

The setTimeout basically says "wait this long before you do this". All of these fire at the same time but individually only happen at their prescribed time. As such you can see the order in which they will happen.

The first block changes the state of  "door1" to "open" exactly one second after the button is pressed.

At 1.5 seconds, the second block starts the animation of the molecule. The 2000 you see there indicates the duration of the animation. It will take 2 seconds to move from one side to the other.

At the 2 second mark, block three will close the first door.

At the 2.5 second mark, the fourth block will open the second door

Finally, at the 3.5 second mark, the second door closes.

All you would need to do is change the names to match the names you have for your objects and adjust the timings to where you want each thing to happen.

For example:

$("#molec").animate({left: "+=400px"},2000);

might become

$("#sodiumc").animate({top: "+=400px"},2000);

Whatever you named the object - you must keep the lowercase  c  at the end.

Also - change left to be  top  as it looks as though you are moving vertically.

You can adjust the 400 px to what ever distance you need to clear your molecule.

You may not need to use five blocks.

If your molecule state simply is open on one end or the other - one state change is fine as the sodium moves.

I hope this maybe helps you get started (if you wish to tackle it) and I am happy to answer some questions as you play with it.

[teacherzilla]

Thank you so much! I will be playing around with this option for sure and I do forsee further questions, lol. 

[Lilybiri]

Which event is triggering the action? Can you show the action you are using at this moment? With the Delay command a lot can be achieved. Using micro-navigation could be an alternative in combination with an action.

Perhaps you prefer JS.

[teacherzilla]

The molecules normal state is "open"on top and closed at bottom. I'm trying to time the effect of NA+ moving down through the "open" molecule and have the molecules state change to "close" when the NA+ is halfway through, but trying to coordinate has proved difficult, to say the least. So, then, I was trying to work with delay actions, but am really having no luck there either. I may just have to make it a user generated response and maybe it's better that way anyway. 

www.teacherzilla.com/wp-content/uploads/articulate_uploads/ActiveTransport8/index.html 

[Lilybiri]

Which event? Is this triggered by the On Enter event of the slide? Can I see the timeline? Maybe you can set up everything on the timeline with effects and objects, instead of using states? Sometimes thinking out of the box helps. 

[teacherzilla]

The trigger event is the Na+ being halfway through the molecule. I did set it up to run as advanced action On Enter event of slide, but maybe that was a mistake, since this will ultimately be the 3rd slide in the project and as such will mess up the timing even more. 

[Lilybiri]

JS is maybe the best way because when I see the timeline, it is clear that you are confusing timeline setup with using an advanced action to launch effects.  Delay time is a command which is only referring from the moment the action is triggered, which is the first frame of the active slide for an On Enter action. Whether that is the first or the n'th slide is totally irrelevant. Please continue with the JS. 

[teacherzilla]

I understand. Thank you for your help. I will get better at all of it...in time:)

[Stagprime]

Perhaps not ideal for you but I think the effect you're looking for could be pulled off with some JavaScript.
Please excuse my crude example but this is generically what I picture your scenario needs to do.

If you're interested I could expand a little further and give some code to play with.

 

[teacherzilla]

Yes, I can see how it can be applied, for sure. I would greatly appreciate any JS code and guidance, as it may be the way I go ultimately, with this animation.