How to Make a 3-D Button in REALbasic

Create your own 3-D Buttons using REALbasic.

REALbasic is an object-oriented programming language typically written in a software package called Real Studio. Using the REALbasic language, users can create a wide variety of programs as complex as their own video game or as simple as their own custom buttons. However, even creating something like a button can have a unique look. For example, using a few lines of code in Real Studio, a 3-D effect can be created that simulates a button being pushed down into the background.

Instructions

1. • 1
     Locate the images you want to use for your 3-D button. You need at least two: one to represent when the button is not pressed, and another to represent when the button is being pressed down. Rename these images "PicButtonUp" and "PicButtonDown," respectively.
   • 2
     Open Real Studio and start a new project. This will happen by default if you don't specify a project to open. Drag and drop the two images into the white space in the center of the program.
   • 3
     Check to see that you have the "Window1" tab selected near the top of the screen. Click and drag "Canvas" from the list on the left of the screen to the large white space in the center. It will appear as a blue box, and when you see it, double-click it.
   • 4
     Press the "Add Property" button, located on the top right of the screen. In the bar that appears write "mState" in the first white space, "String" in the second, and "up" in the third. Add two more properties, one with "mDownImage" in the first white space and "picture" in the second, and one with "mUpImage" in the first white space and "picture" in the second.
   • 5
     Select "Paint" from the list on the left and paste the following code into the white space in the center of the program.

     Select Case mState
     case "up"
     if mUpImage <> nil then
     me.Graphics.DrawPicture mUpImage, 0, 0
     end if
     case "down"
     if mDownImage <> nil then
     me.Graphics.DrawPicture mDownImage, 0, 0
     end if
     end Select
     End Sub
     Sub Draw()
     Select Case mState
     case "up"
     if mUpImage <> nil then
     me.Graphics.DrawPicture mUpImage, 0, 0
     end if
     case "down"
     if mDownImage <> nil then
     me.Graphics.DrawPicture mDownImage, 0, 0
     end if
     end Select
   • 6
     Select "Open" from the list on the left and paste the following code into the white space in the center of the program.

     mState = "up"
     mDownImage = PicButtonDown
     mUpImage = PicButtonUp
   • 7
     Click "MouseDown" from the list on the left, then paste the following code into the white space in the center of the program.

     mState = "down"
     Select Case mState
     case "up"
     if mUpImage <> nil then
     me.Graphics.DrawPicture mUpImage, 0, 0
     end if
     case "down"
     if mDownImage <> nil then
     me.Graphics.DrawPicture mDownImage, 0, 0
     end if
     end Select
     return true
   • 8
     Select "MouseUp" from the list on the left and paste the following code into the white space in the center of the program; this will complete your 3-D button.

     if x > 0 and x < Width and y > 0 and y < Height then
     // Mouse Cursor inside button
     mState = "up"
     end if
     Select Case mState
     case "up"
     if mUpImage <> nil then
     me.Graphics.DrawPicture mUpImage, 0, 0
     end if
     case "down"
     if mDownImage <> nil then
     me.Graphics.DrawPicture mDownImage, 0, 0
     end if
     end Select