Digital Fade Effect

April 6, 2001
by Gary Rosenzweig

Here's an effect I saw in another movie and I decided to try it myself. I call it a "digital fade effect". The image starts off as large squares of color, and then resolves itself into a more detailed image.

To do this easily, I used imaging Lingo. I used the getPixel function to get a color from spots on the image. Then, I used fill to create a square of color from that pixel.

The result is a behavior that, when placed on the image, will start out be showing the image as squares of color 25x25. Then, it will resolve in a more detailed image frame by frame.

With each layer of detail revealed, there are more squares to fill. Thus, when the squares are just a few pixels wide, it can take quite a long time to redraw the whole image as squares of color. What I decided to do was to only resolve the image down to 6x6 squares and then jump to the original image. This seems to have the right visual result.

Here is the example movie. Just push the button to see an image appear with this behavior.

Here is the code for the behavior with comments.

property pRes
property pWidth
property pHeight
property pImage
property pStage
property pSpriteX, pSpriteY

on beginSprite me

-- starting resolution
pRes = 25

  -- get width and height of the image
  pWidth = sprite (me.spriteNum).member.width
  pHeight = sprite (me.spriteNum).member.height

-- get the image
pImage = sprite (me.spriteNum).member.image

-- get the stage image
pStage = (the Stage).image

  -- get the upper left corner
  pSpriteX = sprite (me.spriteNum).rect.left
  pSpriteY = sprite (me.spriteNum).rect.top

-- get rid of the image before it is first seen
sprite (me.spriteNum).visible = FALSE

end

on prepareFrame me

  -- continue until six pixel squares
  if pRes > 6 then

    -- lower the square size
    pRes = pRes - 1

    -- loop through each square
    gridy = 0
    gridx = 0
    repeat while TRUE

      -- get one pixel from original image
      pixel = pImage.getPixel (point (gridx,gridy))

      -- create rectangle area
      x2 = min (gridx+pRes,pWidth)
      y2 = min (gridy+pRes,pHeight)
      r = rect (gridx, gridy, x2, y2)

      -- add location of the sprite
      r = r + rect (pSpriteX, pSpriteY, pSpriteX, pSpriteY)

      -- fill the square with the pixel
      pStage.fill (r, pixel)

      -- go to next square area
      gridx = gridx + pRes
      -- end of row
      if gridx >= pWidth then
        gridx = 0
        gridy = gridy + pRes
        if gridy >= pHeight then
          -- end of image
          exit repeat
        end if
      end if
    end repeat

  else if pRes > 0 then
    -- copy real image to stage
    pStage.copyPixels (pImage,sprite (me.spriteNum).rect,sprite (me.spriteNum).member.rect)
    sprite (me.spriteNum).visible = TRUE

    -- dont do anything anymore
    pRes = 0
  end if

end

There are definitely many ways in which you customize this behavior. Instead of having it count down the resolution amount from 25 to 6, you could have it move in larger steps. You can also have the code grab a random pixel from the area that the square represents, rather than just the upper left pixel of that square.

One peculiar oddity that I came across when writing this script was that every once in a while, getPixel would return a big integer, rather than a rgb value. This happened when I used getPixel in the form pImage.getPixel (gridx, gridy) instead of a point value inside it. It seemed to happen at odd, random times. Using a point value fixed it.

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

One final note: I'll be at the Macromedia UCON next week. If you are there, look for me and say hello. I'll also be giving a talk on Thursday with David Simmons about using the Multiuser Server. Hope to see you there!

Gary Rosenzweig is the author of six books on Macromedia Director and Flash. He also publishes a weekly email newsletter for Flash and Director developers called the Developer Dispatch. You can subscribe to this newsletter at http://developerdispatch.com.

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.