REALbasic University Resources: RBU: Glossary Defines common REALbasic programming terms   Archives Previously published columns Translations: Dutch Courtesy of Floris van Sandwijk   Japanese Courtesy of Kazuo Ishizuka   Chinese Courtesy of Dong Li   RBU Translation Guide Information on Translating RBU into other languages Books: Matt's Book (2nd Edition!) Ideal for experienced programmers   Erick's Book Best for beginning programmers Websites: Mother Ship The publisher of REALbasic   RB Webring Links to hundreds of REALbasic websites   RESExcellence Another REALbasic programming column   REALbasic Developer Magazine The premiere source for REALbasic instruction. REALbasic University is Sponsored by Make your Mac do what YOU want it to. Create games, utilities, cool Mac OS X tricks. Download REALbasic now and create your own software.

REALbasic University: Column 058

SimplePaint: Part V

Last week we made it so SimplePaint can save drawings. This week we'll concentrate on adding some user interface niceties.

Adding a Painting Cursor

One annoying thing about SimplePaint which you probably noticed is that it always has an Arrow cursor. The Arrow is fine for selecting menus, but wrong for drawing. Let's change it.

I created a simple dot-shaped cursor in ResEdit and saved it as a cursor resource. You can grab it here. Install it by dragging it into your project file.

To use the cursor, we've got to insert a line of code in the appropriate places. First, since we want paintCursor to be the default cursor, let's activate it when paintWindow is opened. Add this line of code at the bottom of paintWindow's Open event:

 self.mouseCursor = paintCursor 

Now go up to the Controls area and find nodrawCanvas. In its mouseExit event, put in the same line. In its mouseEnter event, put in this:

 self.mouseCursor = arrowCursor 

That should activate paintCursor when the program is launched, and switch between it and the arrow when the user moves into the color palette area. Simple!

Adding Sounds

One thing you'll notice about SimplePaint is that it is quiet. Kids, however, are not quiet. They like sounds. So let's add some sounds to make the program more interesting.

First, let's make a list of the sounds we want. One simple idea is just to have a key click sound -- a click that plays whenever the child presses a key on the keyboard. Another idea is an explosion type sound -- we'll use that when the child presses the Delete key to erase the current picture. Here are some ideas for sounds in SimplePaint (feel free to add your own):

Key Click

When the user presses a keyboard letter command

Explosion

When Delete key is used to erase picture

Save

When picture is to be saved

Colorswitch

When the user switches to a new color

Brush Enlarge

When painting brush is made bigger

Brush Shrink

When painting brush is made smaller

Now that we know what we need sounds for, we must find the appropriate sounds. Where you do get sounds? If you have the right equipment and skills, you can record your own sounds. (You need a microphone, recording and sound editing software, and depending on your Mac, a sound input device.)

If it's just for a personal project (i.e. something you're not planning on sharing or selling), you are free to "steal" sounds from other applications. Use Apple's free ResEdit to open the resource forks of programs and look for SND resources.

Games often include lots of cool beeps, explosions, and laser zaps. But almost every Mac app has some sounds in it. For example, Adobe GoLive 4.0 includes a gunshot sound (don't ask me why):

But since most digitized sounds are copyrighted, you can't just borrow a sound from someone else and use it in your app without permission.

However, there are websites with free sounds and sound clip libraries you can buy which allow you to use those sounds in your own projects royalty free (you don't have to pay a royalty for each copy of your program you distribute). I happen to have one of these, so the sounds I include here are from an old library (no longer being sold).

In my case, since I have a collection of sounds, I have to search through it to find sounds that might match my needs. The key click and explosion ones are easy -- but what kind of a sound is a "save" sound?

That's where you need to use some imagination, trying to come up with appropriate sounds for abstract events. You also have to work with whatever sounds you've got available (in my case, limited to whatever's in my library). Don't restrict your sound usage to what the sound is for -- often sounds for one thing will work for another kind of event. For instance, a mild gunshot might work as a warning or even a keyclick sound. In SimplePaint, I chose to use a sound originally called "Key turn" -- the sound of a key turning in a lock -- as my "colorswitch" sound. For the "save" sound I chose to use a simple orchestra chord, which sounds appropriately triumphant. For the enlarge/shrink commands, I went with up/down sounds.

The entire collection of sounds are available here (they're also included in this week's project file).

Once you've got the sounds decompressed and copied to your project's folder, just drag them into your REALbasic project file's window. Your window should look something like this:

You'll notice that the sounds are in italic -- that's a reminder that they're not embedded within your project (do not delete the originals).

To play a sound, simply type in the name of the sound, add a period, and the word play. Like this:

 keyclick.play 

Quick Tip 1: if you drag a sound icon from the project window to the Code Editor, RB will insert in the appropriate play code for you.

Quick Tip 2: you can double-click on sounds within the project window to play them. That's helpful if you can't remember what a sound sounds like.

Let's put our sounds to work. Open the Code Editor of paintWindow and find the KeyDown event. Here we'll simply insert in lines to play the appropriate sounds for each kind of event. This is what the finished routine looks like:

  
 
   if key = "S" then 
 
     save.play 
 
     savePict 
 
   end if 
 
    
 
   if key = chr(8) then 
 
     // Erase all 
 
     blast.play 
 
     p.graphics.clearRect(0, 0, self.width, self.height) 
 
     self.refresh 
 
   end if 
 
    
 
   // Eraser 
 
   if key = "E" then 
 
     changeColor(rgb(255, 255, 255)) // white 
 
   end if 
 
    
 
   // Swap colors 
 
   if key = " " then 
 
     changeColor(oldC) 
 
   end if 
 
    
 
   if key = "4" then 
 
     down.play 
 
     xWidth = xWidth - 3 
 
     if xWidth < 3 then 
 
       xWidth = 3 
 
     end if 
 
     shapeCanvas.refresh 
 
   end if 
 
    
 
   if key = "6" then 
 
     up.play 
 
     xWidth = xWidth + 3 
 
     if xWidth > 30 then 
 
       xWidth = 30 
 
     end if 
 
     shapeCanvas.refresh 
 
   end if 
 
    
 
   if key = "2" then 
 
     down.play 
 
     yWidth = yWidth - 3 
 
     if yWidth < 3 then 
 
       yWidth = 3 
 
     end if 
 
     shapeCanvas.refresh 
 
   end if 
 
    
 
   if key = "8" then 
 
     up.play 
 
     yWidth = yWidth + 3 
 
     if yWidth > 30 then 
 
       yWidth = 30 
 
     end if 
 
     shapeCanvas.refresh 
 
   end if 
 
    
 
   if key = "-" then 
 
     down.play 
 
     xWidth = xWidth - 3 
 
     yWidth = yWidth - 3 
 
     if xWidth < 3 then 
 
       xWidth = 3 
 
     end if 
 
     if yWidth < 3 then 
 
       yWidth = 3 
 
     end if 
 
     shapeCanvas.refresh 
 
   end if 
 
    
 
   if key = "+" then 
 
     up.play 
 
     xWidth = xWidth + 3 
 
     yWidth = yWidth + 3 
 
     if xWidth > 30 then 
 
       xWidth = 30 
 
     end if 
 
     if yWidth > 30 then 
 
       yWidth = 30 
 
     end if 
 
     shapeCanvas.refresh 
 
   end if 
 
  

That was pretty simple, but you might have noticed that we didn't add sound to the "eraser" and "color swap" commands. Why? Because it's easier to insert a line in the changeColor method (that way we only have to insert one line of code in one place):

  
 
   dim tempC as color 
 
    
 
   tempC = newColor 
 
    
 
   if tempC <> c then 
 
     colorswitch.Play 
 
     oldC = c 
 
     c = tempC 
 
     colorCanvas.refresh 
 
     shapeCanvas.refresh 
 
   end if 
 
  

Go ahead and run the program now -- you'll see it's very noisy! Kids will love it.

As it turns out, we didn't even use the key click sound. Maybe you can come up with a use for it, or just delete it.

That's it for this week's lesson. If you would like the complete REALbasic project file for this week's tutorial (including resources), you may download it here.

Next Week

We finish up SimplePaint with a few more enhancements and an unusual variation.

Letters

No letters this week as I'm still recovering from an all-nighter watching the USA beat Portual 3-2 in the World Cup! Wow, what a game. Absolutely eerie watching unranked U.S. players like Tony Sanneh stonewall the World Player of the Year Luis Figo (who also happens to be the world's most expensive soccer star). Incredible.

I know most Americans pay as much attention to soccer as to tiddlywink competitions (I'm delighted to be the exception), but I doubt most in the U.S. realize the magnitude of this upset. A San Francisco radio station guy compared it to Portugal's baseball team beating the New York Mets in the (mis-named) World Series. That's probably close, except what if it wasn't the Mets, but an All-Star team made of all the best U.S. players?

That's what the World Cup is: the best of each country battling it out in a month-long competition. There's nothing bigger than the World Cup, which dwarfs the Olympics (more people watch one World Cup than a decade of Olympics, winter and summer combined), and this year's competition is really fantastic. There's already been two huge upsets and only one nil-nil draw with an average of nearly three goals per game. I realize the hours of the live telecasts are insane, but that's what Tivo and VCRs are for. I'd encourage everyone to support the U.S. team by tuning in (or recording) the next two USA games and cheering on the underdogs!

  
 
  DATE     EVENT                               TIMES                           CHANNEL 
 
  June 10  Korea Republic vs. USA              2:25 a.m. ET / 11:25 p.m. PT    ESPN2 
 
  June 10  Korea Republic vs. USA (replay)     2:00 p.m. ET / 11:00 a.m. PT    ESPN2 
 
  June 11  Korea Republic. vs. USA (replay)    1:00 p.m. ET / 10:00 a.m. PT    Classic 
 
  June 14  Poland vs. USA                      7:25 a.m. ET / 4:25 a.m. PT     ESPN 
 
  June 15  Poland vs. USA (replay)             1:00 p.m. ET / 10:00 a.m. PT    ABC 
 
  

By the way, those of you who are students of sociology and are fascinated by the bizarre dichotomy between U.S.-centric sports and the rest of the planet should check out Andrei Markvovits' excellent book, Offside: Soccer and American Exceptionalism (the link is to my review). It's an intriguing history of sport in general, with the focus on why soccer was marginalized in the U.S. while it became the number one sport in just about every other country. It's a good read even if you're not a soccer fan.

Each week we answer select reader questions, and we're always open to ideas for future columns. Send your questions to . (Keep your questions simple and specific. General queries like "How do I write my own web browser?" will be neglected.) Your question won't be answered immediately, but will be answered in a future column. (If you don't want your correspondence published, just be sure to indicate that when you write. Otherwise it's fair game.)

About the Author
is an author, philosopher, graphic designer, photographer, film director, soccer fanatic, and programmer (among other things). He writes for MacOpinion, runs his own software company, Stone Table Software, which sells the revolutionary Z-Write word processor, and is Publisher and Editor of REALbasic Developer. He lives in Northern California with his cats, Mischief and Mayhem, and is rapidly running out of free time.

See the REALbasic University Archives

.