Green flag/stop button

[tmickel]

Copying this as it's a line item from the prototype plan. I'm assuming it just means getting the styling right.

[tmickel]

Also, one thing that feels jarring in scratch-gui is that the green flag/stop button don't reflect running state like they do in Scratch 2.0. Not sure how to implement that once there's a design - we could provide events from the VM that say when scripts are running/no scripts are running.

[CosmicWebServices]

Yeah I always want a glow or something when I click it but when I do I am sad because it does not glow or change state.

[luxaritas]

Would it be possible to make this reflect "design-time" vs "play-time" (or at least make it an option that users are able to choose)? The flag/stop really confused me when I started working with Scratch.

The first thing that confused me is that on clicking stop, the scripts stop, but nothing is reset. The second point of confusion is that even when "can drag in player" is set to off, I can still drag a sprite after hitting the green flag while in the designer.

I can understand that both of these (particularly the first) are implemented for the sake of transparency for newer users, but if there could be a way to make this function as a true design/play (or play/stop playing) indicator, I would personally find working in the editor a lot less awkward.

[rschamp]

Glows are in, but we need to refine the design for the states. @carljbowman When you have a chance could you throw in a comp for "playing" vs "stopped" states w/r/t the flag/stop buttons?

[carljbowman]

@rschamp - We should keep the UI pretty simple for the prototype and focus on functionality. Then we can do a more holistic pass of visual hierarchy once things in the GUI are further along.

Scratch 2.0's Green Flag and Stop states:
Inactive ('Stopped') — Greenflag

Active ('Playing') — Greenflag

Hover — Greenflag
Only appears on the Inactive 'Stopped' state

This behavior seems fine for now. Rather than that using the CSS saturation filter like you showed me, let's alter the opacity based on state.

Animate Your Name 3.0 Prototype Green Flag and Stop states:
Inactive ('Stopped') — Greenflag — Opacity=50%

Active ('Playing') — Greenflag — Opacity=100%

Hover — Greenflag — Opacity=100% + Mouse=Pointer

As far as sizing goes. While sketching I have generally kept icons at 16px by 16px. That said I could see future explorations where we would need to adjust the size for Greenflag and Stop to draw more prominence.

[luxaritas]

That seems backward to me. It looks like the flag is disabled/"depressed", and that I can't click that, but instead the influence is on the stop sign, which I am led to click. Same in the reverse.

[rschamp]

In my experience there is no toggle state that looks correct for everyone the first time — it's kind of a white and gold/black and blue dress situation :)