cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to disable playback until a step has finished playing?

Newbie

How to disable playback until a step has finished playing?

If I press "next" too quickly, my animations fall out of sync. I want to disable playback until a step finished playing, and then once it finishes playing re-enable play functionality. How can I do that?

Tags (1)
3 REPLIES 3

Re: How to disable playback until a step has finished playing?

The easiest way to do this is to disable the buttons that you are using for forward/backward while each step is playing and then re-enable the buttons after each step has completed; doing it this way will require javascript code.

Re: How to disable playback until a step has finished playing?

rabernathy,

using what function to do that? Can you show example?

Re: How to disable playback until a step has finished playing?

If you use a Button widget to control the playback, then you can do this without any Java.

 

Just bind the Playing property of the 3D model widget to the button by dragging as shown:

 

Untitled.png

 

Then from the binding services window that appears, you can select Disabled and the button will be disabled during playback:

 

Untitled2.png

 

So when you click the button, it will start the playback of the sequence step and the button will become disabled while the step plays.  You'll see it fades in the experience and then pops back once the step has finished playing.

 

You can use CSS styles to automatically change the colour of the button when it's disabled.  In your Styles, Application section, define a style for the button and assign it to the button in the widget properies:

 

.play-button {
color: #000000;
background-color: #48f442;
}

 

Then define the style for the button being disabled:

 

.play-button:disabled {
color: #ffffff;
background-color: #f47441;
}

 

So when you hit the play button, it will start playing the step and the button will become disabled and change colour.

 

Not playing:  play.png

 

Disabled while playing:  diabled.png

 

Now if you don't like buttons and would prefer images, you can use CSS to change the button into an image.  Just define a CSS style that makes the button transparent and uses a background image.  You'll need to specify the size in the CSS:

 

.play-button-image {
color: transparent;
background-color: transparent;
width: 45px;
height: 45px;
background-image: url(#{$resources}/Default/vu_seq_play.svg);
background-size: 45px 45px;
background-repeat: no-repeat;
}

 

Apply this style to the button and it will now look like the image.  Probably best to get rid of any text in the button for this case too.

 

Hope this helps.

 

Allan