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:

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:  

Disabled while playing:  

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