The Circle Out Transition

November 2, 2000
by Gary Rosenzweig

Ready for yet another Imaging Lingo transition? I love these because they are not only useful, but they are good ways to demonstrate Imaging Lingo techniques.

This week, however, instead of taking the easy way out and doing a sprite transition, I want to do a Stage transition. Sprite transitions are much easier because they only affect a single sprite. Stage transitions are harder, but can act as replacements for Director's tired old transitions.

The transition I want to do is one that has eluded Director developers over the years: the circle out, or "iris open" transition. Usually, the standard "center out" transition is used as a poor substitute. This gives you a rectangular expanding space. I'd rather do a circular one. There's a big difference in my book. There have been some Xtras that have given us this ability, but that doesn't help most Shockwave developers. This is an easy and free way to do it. There are two techniques combined here to make this work. The first is the idea of using Imaging Lingo to make a full Stage transition, not just a single sprite transition. The way that this is done is to create a temporary Bitmap member that contains a copy of the Stage image. Then, place that image over the Stage. When you go to the next frame, this image is on top of everything and no visible change has occurred, even though you are on a new frame. Then, by changing the alpha channel of this image, you can create holes in it so that the new frame is revealed underneath. When the transition is done, you can erase the temporary member and the movie continues on the new frame as if nothing ever happened.

The other technique is the idea of an expanding circular alpha channel. This is accomplished by first creating an 8-bit black image of a rectangle. Then, a white-filled oval is drawn in the middle of it. With every iteration of the code, the circle gets bigger. This 8-bit image is then applied to the main transition bitmap as the alpha channel. The circle in the middle is transparent, revealing the new frame underneath.

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

The code to do this is surprisingly simple. First, I will start off with three settable properties: the speed of the transition; the sprite channel to use; and the frame that should be jumped to. The reason a sprite channel is needed is that that temporary image needs to be placed there to appear over the new frame and reveal it. I will make the lastChannel the default here, since that is usually what is needed. The rest of the code is just an on exitFrame handler. It creates the temporary member and places it in on the Stage over the rest of the sprites. Then, the movie is invisibly advanced to the new frame. A loop repeats, placing a larger and larger alpha channel hole in the image. When the radius of the hole is greater than the distance from the center of the Stage to the corner, the transition ends.

property pSpeed -- number of pixels to increase radius every updateStage
property pUseSprite -- sprite channel to use for transition effect
property pJumpFrame -- frame to jump to

on getPropertyDescriptionList me

list = [:]

  addProp list, #pSpeed, [#comment: "Speed", #format: #integer, #range: [#min: 1, #max: 100], #default: 15]
  addProp list, #pUseSprite, [#comment: "Use Sprite Channel", #format: #integer, #default: the lastChannel]
  addProp list, #pJumpFrame, [#comment: "Jump to Frame", #format: #marker, #default: #next]

return list

end

on exitFrame me

  -- create a new member that is a copy of the Stage
  mem = new(#bitmap)
  mem.image = image((the stage).rect.width,(the stage).rect.height,32)
  mem.image.copyPixels((the stage).image,(the stage).image.rect,(the stage).image.rect)
  mem.useAlpha = TRUE

  -- place it over the Stage
  center = point(mem.image.width/2,mem.image.height/2)
  sprite(pUseSprite).member = mem
  sprite(pUseSprite).loc = center

-- go to the next frame
go to frame pJumpFrame

  -- draw a larger and larger alpha channel hole in center
  radius = 0
  repeat while TRUE

    -- increase hole radius
    radius = radius + pSpeed

    -- create the image of a circle
    newAlpha = image(mem.image.width,mem.image.height,8,#grayscale)
    newAlpha.fill(mem.image.rect,rgb("000000"))
    newAlpha.fill(rect(center-point(radius,radius),center+point(radius,radius)),[#shapeType: #oval,#color:rgb("FFFFFF")])

    -- use this image to set the alpha channel
    mem.image.setAlpha(newAlpha)

    -- force screen update
    updateStage

    -- when circle has filled screen, erase member and exit
    if radius > sqrt(2)*mem.image.width then
      erase mem
      exit repeat
    end if

  end repeat

end

There's a lot that can be done to vary this transition. For instance, the center of the transition can be tweaked to allow it to circle out from a primary element or character on the Stage. Or, the radius can start high and end at 0 to create a circle in transition. You can do this by going to a black frame to create a cartoon-style "The End" to an animation.

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.