Shining a Flashlight with Alpha Channels

March 29, 2000
by Gary Rosenzweig

The new Imaging Lingo is sure to be the most talked about feature of Director 8. There's so much that can be done with it that even the developers that have played with it during the beta test haven't begun to scratch the surface.

This week, let's recreate an old favorite behavior: the flashlight. This is where the entire image is invisible, except the spot under the cursor. This area can be seen, just as if the room was dark and flashlight was shining on this one part.

With Director 7 and before, this was possible by using ink effects like lightest and darkest. However, it was hard to get it to work with other graphics in the same space, plus creating nice fuzzy edges was not possible where colors were involved. With Director 8, we can do a flashlight effect with Imaging Lingo. There are actually many ways to go about doing this. You can use copyPixels with a mask to copy only a portion of the image into another image that is on the Stage, for instance.

Alpha channels, however, make this as easy as possible. All we need to do is set the alpha channel of the entire image to 0, thus making it all invisible and transparent. Then, if we place a circle of black in the middle of the alpha channel, we get a portion of the image that is visible. Check out the Shockwave movie below.

NOTE: Shockwave 8 required
D8 download for Mac or Windows.

As you move the cursor over the Shockwave movie, the image is revealed under the cursor. The actual alpha channel is altered by using a 256-color grayscale bitmap in the Cast. We simply create a blank alpha channel, and then use copyPixels to place the grayscale bitmap somewhere inside this alpha channel image. We then apply this alpha channel to the image on the Stage by using setAlpha. Here is the code. Much of it actually deals with positioning the visible area.

property pEmptyAlpha
property pViewPortal
property pViewRect
property pMouseOffset

on beginSprite me

  -- set alpha to completely transparent
  sprite(me.spriteNum).member.image.setAlpha(0)

  -- get a copy of this empty alpha channel
  pEmptyAlpha = sprite(me.spriteNum).member.image.extractAlpha()

  -- get the grayscale image to be used as a view area
  pViewPortal = member("view area").image
  pViewRect = pViewPortal.rect

  -- determine the middle of the view area
  pMouseOffset = point(pViewRect.width/2,pViewRect.height/2)

end

on exitFrame me

  -- determine the location of the cursor
  loc = the mouseLoc - pMouseOffset

  -- create a new alpha channel to use
  newAlpha = duplicate(pEmptyAlpha)

  -- figure out where the view area will go
  rec = pViewRect + rect(loc,loc)

  -- insert the view area into the alpha channel
  newAlpha.copyPixels(pViewPortal,rec,pViewRect)

  -- set the alpha channel
  sprite(me.spriteNum).member.image.setAlpha(newAlpha)

end

Check out the movie source. Try playing with the "view area" bitmap. You can easily change the shape of the visible area. You can also use shades of gray to fade the image around the edges.

Gary Rosenzweig's latest book is "Advanced Lingo for Games." In it, you can find the source code for more than 20 complete games. More information about the book can be found at http://clevermedia.com/resources/bookstore/book4.html. It can be purchased there, or in your local bookstore.

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.