How to make good buttons for projects

[slate_technologies]

It's been a LONG time since I've made a tutorial, so here's another tutorial!

This tutorial is targeted towards beginners, people learning to use Snap!, or just people who want to spice up their projects with a bit of eye candy.

Surprisingly, making your buttons look good is actually easier than adding a lot of fancy math stuff however!

Anyways, here's the tutorial!

STEP 1: Make your button
Since Snap! doesn't come with text editors in their paint editors, you'd have no choice than to use some other software. I personally use Google Drawings. You can also download a button image I made as well. Also check out @earthrulerr's UI art if you have the time. I'll link it down there for you.

Button download:

STEP 2: Open Snap! and import your button
This step is very easy. Go to snap.berkeley.edu and open up a new project. Then go to the "Costumes" panel and drag the Button Image file.

Rename the sprite from "Sprite" to "Button".

STEP 3: Now for some code!
Now, this step will be very easy. Just add all the code listed below for your Button sprite.


Now your button is ready!

I couldn't find @earthrulerr's UI pack, but I found one made by @joecooldoo and several others. So here it is: User Interface (UI) Shop

[helicoptur]

@slate_technologies

[scratchblocks]set size to((size)+(5))%[/scratchblocks]

Why not just [scratchblocks]change size by(5)[/scratchblocks]?

@slate_technologies

Snap! has an error with scanning if the mouse pointer is touching a sprite and if the mouse is down

I haven't seen anything like this. It's probably an issue in your code.

[earthrulerr]

It has happened with me.

[joecooldoo]

@slate_technologies

Also, check out @earthrulerr's UI art if you have the time. I'll link it down there for you.

You never linked it.

[ego-lay_atman-bay]

@slate_technologies

Since Snap! doesn't come with text editors in their paint editors, you'd have no choice than to use some other software.

That's not entirely true. I've created buttons programmatically in snap, but then again, this is a tutorial for beginners...

[bh]

I should point out that there's a Text Costumes library intended for buttons.

[warped_wart_wars]

There's still the problem that it doesn't make text with a clickable background.

[bh]

@warped_wart_wars

There's still the problem that it doesn't make text with a clickable background.

Yeah, we should fix that!

[warped_wart_wars]

It'll be fixed if it made an RGBA-hex FFFFFF01 background that's barely visible if at all. Or WRITE could have a (possibly optional) input for the background of the text.

[jens]

but you can easily make that yourself in Snap!

[warped_wart_wars]

Yes, however, positioning the pen is a bit tricky.

[jens]

here's a generic block that returns a copy of a given costume with color-filled optionally padded bounding box:

You can use it together with the text-costume reporter to make "clickable" buttons:

I'm adding this block to the "text costumes" library for the next patch.

[kinestheticlearning]

Thanks for posting it.

Have you invented the generic block now or have you already used it elsewhere?

[jens]

several variants of this block have been written by @jadga and - on her suggestion - by students visiting our lab

[bh]

It's kind of weird that the RGBA input is a number rather than a list. If anything it should be a hex numeral (a text field). (Or even better, of course, a Color number from the Colors library!)

PS Yes, I get that you can drop a list into the slot.

[jens]

it's a truly variadic slot: Single number = greyscale, numbers pair = grayscale + alpha, triplet = RGB, quartett = RGBA

[warped_wart_wars]

@jens

quartett

I don't think I've ever heard that word. I would probably say "quadruplet".

[bh]

@jens

variadic

You confused me by saying that! I was looking for the arrowheads.

... Wait, is that true for the primitive SET PEN block too? How come nobody ever tells me anything??

[ego-lay_atman-bay]

Well, the RGB(A) option is new

Or has it been there the whole time, and I've never noticed it?

edit: turns out that grayscale and alpha thing does work with the rgbs option.

[warped_wart_wars]

snap.berkeley.edu/versions/previous/snap.html