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

Community Tip - You can change your system assigned username to something more personal in your community settings. X

How to disable playback until a step has finished playing?


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?


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.

5-Regular Member


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

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:




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




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.




Top Tags