Creating a Radar Sweep Effect

January 8, 2001
by Gary Rosenzweig

I've always admired the radar sweep effect when I've seen it in movies, television or in a game. I had never tried to make one though, and it seemed to me that it could be either very hard or very simple to do. The other day it occurred to me how it could be done extremely simply, so I tried it and thought I'd write about it this week. The idea is to use a single graphic that uses an alpha channel to reveal only what a radar sweep would reveal, and then use Lingo to rotate it.

Simple enough, but how to create the graphic? It would have to look something like this:

Actually, the graphic itself would be a solid black box, but the alpha channel would look like the image above. The white and gray pixels would be semi-transparent and the black pixels would be opaque.

To create this image, I first opened Fireworks. I played with a circle and different fills for a while. Then I tried Photoshop. Still nothing. OK, so I'm not a graphic artist; I'm a coder. It occurred to me that I could code this graphic faster than I could figure out how to build it in a graphic program. To create the graphic, I used Imaging Lingo, of course. I started with an 8-bit grayscale image that would be used as the alpha channel of a 32-bit image. I filled this 8-bit image with black, and then used sin and cos to draw lines, each successively darker, coming from the center of a semicircle. Thus, the graphic you see above. I applied this 8-bit image to the 32-bit image and had my semi-transparent radar sweep. Here's the code that made it:

on makeSweepGraphic

  -- create a filled image to start with
  alpha = image ( 200, 200, 8, #grayscale)
  alpha.fill (rect (0, 0, 200, 200), paletteIndex (255))

  -- sweep through half a circle
  -- drawing darker and darker
  repeat with i = 0 to 1000
    a = (float (i) / 2000) * 2.0 * pi
    c = (float (i) / 1000) * 255
    repeat with r = 0 to 100
      x = r * cos (a) + 100
      y = r * sin (a) + 100
      alpha.setPixel (x, y, paletteIndex (c))
    end repeat
  end repeat

  -- create the member image, fill it and set its alpha
  member("sweep").image = image(200,200,32)
  member("sweep").image.fill(rect(0,0,200,200),rgb(0,0,0))
  member("sweep").useAlpha = TRUE
  member("sweep").image.setAlpha(alpha)

end

I used the Message window to run this handler. I first had to create a dummy "sweep" bitmap member. Once I had the member, I thought it would be best just to leave it in place rather than ask the movie to recreate it every time it ran. In the sample movie below, I placed a simple image under it of some lines and a circle, plus some "blips" for the radar to reveal.

The code to make the radar sweep graphic go around is just your basic rotation behavior:

on exitFrame me

r = sprite(me.spriteNum).rotation
sprite(me.spriteNum).rotation = r-10

end

This is the only code actually needed. The "makeSweepGraphic" can be thrown away after you have the "sweep" graphic. Or, you could leave it in to recreate the graphic each time, thus saving the file space. Now I just need to create a game that will use this neat effect.

A sample Director 8 movie is available for download in Mac or Windows format.

Gary Rosenzweig is the Chief Engineer, founder, and owner of CleverMedia, a game and multimedia development company in Denver, Colorado. He is the author of ten books on Macromedia Director and Flash, including his latest, Special Edition Using Director MX.