Creating a Soft Wipe

October 24, 2000
by Gary Rosenzweig

Recently, I needed to create a quick effect that transformed one image into another. The second image would wipe from the left to the right over the first. The edge of this wipe needed to be soft, not hard. I decided to use Imaging Lingo to create the effect. While there is a behavior in the Director 8 library to do this, it is complex and long, and hard to learn anything from. Besides, I decided it would be fun to make it myself, and it would make a good Lingo Lounge column.

A sample movie is available for download in Mac or PC format

The idea is to take two images that are exactly the same size and transform one into the other. This can be accomplished by using copyPixels to copy a portion of the new image onto the old. As time goes on and additional portions of the new image are copied, the new image will gradually replace the old image. To create a soft edge, a smaller section of the new image is copied onto the old image, but this time with a matte image. This matte image is a linear gradient from left to right. It will cause the left side of the section to be copied 100%, while the right side is copied 0%. All of the pixels in between will ramp down between these numbers. This type of gradient can be easily created in the paint window. Note that I did it with an 8-bit grayscale bitmap.

Here is the first part of the behavior. I assume that the current member of the sprite is the original member, and the very next one in the Cast is the destination member. I create a new Bitmap member for the sprite to display during the transition. This is better than drawing directly to the Stage, as there might be other things going on there. Finally, I create a matte image from the gradient bitmap member. With a little more work, you can create this entirely in Lingo, too.

property pOrigMember, pOrigImage
property pDestMember, pDestImage
property pWorkMember, pWorkImage
property pMatteImage
property pX

on beginSprite me

  -- get two images
  pOrigMember = sprite(me.spriteNum).member
  pDestMember = member(sprite(me.spriteNum).memberNum+1)
  pOrigImage = pOrigMember.image
  pDestImage = pDestMember.image

  -- create a working image and use it for the sprite
  pWorkMember = new(#bitmap)
  pWorkImage = duplicate(pOrigImage)
  pWorkMember.image = pWorkImage
  sprite(me.spriteNum).member = pWorkMember

-- get the mask image for the soft edge
pMatteImage = member("soft edge").image

pX = 0

end

The on exitFrame script will advance pX by 10 each frame. It will perform the two copies and then update the member image. It will then check to see if the wipe is complete. If so, it will set the sprite to the destination member and get rid of the temporary bitmap. It will also get rid of the behavior itself by setting the scriptInstanceList to []. This is a controversial technique, but I like it in this case.

on exitFrame me

-- advance the wipe 10 pixels
pX = pX + 10

  -- draw the left side of the image
  r = pOrigImage.rect
  r.right = r.left + pX
  pWorkImage.copyPixels(pDestImage,r,r)

  -- draw the soft edge
  r = pOrigImage.rect
  r.left = pX
  r.right = pX + 20
  pWorkImage.copyPixels(pDestImage,r,r,[#ink: 8, #maskImage: pMatteImage, #maskOffset: point(pX,0)])

-- place new image
pWorkMember.image = pWorkImage

  -- see if the wipe is done
  if pX >= pOrigImage.width then

    -- replace sprite with final member
    sprite(me.spriteNum).member = pDestMember

    -- remove working member
    erase(pWorkMember)

    -- get rid of this (and all) behaviors
    sprite(me.spriteNum).scriptInstanceList = []

  end if

end

Improvements to this would include: allowing you to wipe from right to left; creating the gradient from scratch and varying its width; allowing top-to-bottom and bottom-to-top wipes; allowing the original and destination images to be specified; and allowing the speed to be set. Pretty soon you will have a behavior the size and complexity of the one in the library.

Gary Rosenzweig's two most recent books are: "Special Edition Using Director 8" -- The most comprehensive guide to Director ever, including tons of examples and demo movies. It's suitable for novices and experts alike. "Advanced Lingo for Games" -- How to make games with Director 7 and 8. This book comes complete with full source code for more than 20 complete games. More information about these books can be found at http://clevermedia.com/resources/bookstore/. They 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.