Making our form look right

We need to upgrade our prank program. At the moment, it really only works by covering the whole screen in grey before moving a button around. There’s also a close button that’s too easy to find. We want our program to be annoying and bouncing around over the top of the person’s work or YouTube videos. So let’s do that today. We’ll also add random colours to increase the annoyingness.

The plan

We should write down exactly what we want to do:

• Make the program not have a grey background
• Make the button change colours randomly
• Make a border with an extra colour for extra colour.

Step 1 - Fix the background

At the moment, our button has the window frame at the top we want to get rid of:

We need to go to our Form Properties (Click once on the space AROUND the button) and look through the list for FormBorderStyle which we want to set to None. That fixes the window frame issue, and stops people closing our program as easily. We still have the stop button!

Now, make the form (the big empty area around the button) a decent size square. This will be the coloured border around our rectangle.

Then make the button just a little bit smaller than the border. If you drag the button around, you’ll get little blue helpers to give you some space from the edge. That’s the perfect amount. Get the space in one corner, then use the little white box on the other corner to resize the button until you have an even border, like this.

Now we need to make this work, because currently if we run it, our fancy button just vanishes and leaves a coloured square on the screen.

Step 2 - Moving the whole thing

This is an easy change. Before, we moved the button. Now we want to move the whole window (because the window is that border). All we have to do is change Button1 in the code to instead move the window around. But what’s the name of the window?

Now, double click on our button to get into our code. The window we are currently in is called Form1. But in code, we actually refer to it as Me. So change the two Button1 words in your code to Me, like this:

1
2
3
4
5
6
7
  'Old code
  Button1.Left = r.Next(1600)
  Button1.Top = n.Next(900)

  'New code (Change the word button1 to Me, twice)
  Me.Left = r.Next(1600)
  Me.Top = n.Next(900)

Easy as! Check that it works!

Step 3 - Button Colour

First up: A warning. Visual Basic (And all other programming languages) are American. They spell “Colour” as “Color”. We need to do the same in code, else it won’t work.

Look for the 2 lines that make it jump around, and make some space just underneath for this giant long line:

1
2
3
4
5
6
  'Old code
  Me.Left = r.Next(1600)
  Me.Top = n.Next(900)

  'New code
  Button1.BackColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))

You might need to scroll sideways to see the end of the code!

Got an error? Check these:

• Color has no “u” in it (2 spots to check)
• r.next(255) is in there 3 times
• You’ve put the ( and ) in the right spots (and have 2 at the end)
• You spelled ARGB right

Once it doesn’t yell at you, trying running your program. When you try to catch it, the button should change colour! Keep fixing it until it works.

Step 3 - More colours.

Alright, now that we have one colour down, let’s do two more. Copy your Button1.BackColor line and paste it right underneath. Then change BackColor to ForeColor, like this:

1
2
  Button1.BackColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))
  Button1.ForeColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))

Test it out. What part of the program does ForeColor change?

Step 4 - One more colour

Last part to change is the border colour. Easy to do. We just want to change the BackColor of the form (or Me). Can you do it without using the code below? You need to add this as one more line at the end.

1
  Me.BackColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))

Check that it works!

Your final code should look like this:

1
2
3
4
5
6
7
8
9
10
Public Class Form1
    Dim r As New Random
    Private Sub Button1_MouseMove(sender As Object, e As MouseEventArgs) Handles Button1.MouseMove
        Me.Left = r.Next(1600)
        Me.Top = r.Next(900)
        Button1.BackColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))
        Button1.ForeColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))
        Me.BackColor = Color.FromArgb(r.Next(255), r.Next(255), r.Next(255))
    End Sub
End Class

Wrapping up

At this point you should be done! You actually have a program that you can take home and run to annoy people with. If you want to make it even more annoying, try the following challenges:

• Make the window stay near the middle of the screen by giving the random number generator a range to stay in like this: Me.Left = r.next(400,800)
• Add the word Beep() to your code. What does it do? (Make sure you have sound on)
• Change the writing size when it moves by using Button1.Font.Size
• Change the size of the window and button when it moves using Button1.Height, Button1.Width, Me.Height, Me.Width. This is tricky to make it look right, you’ll end up with cut off buttons a LOT.