Animated Bubble Background

November 7, 2000
by Gary Rosenzweig

I know I've been writing a lot about Imaging Lingo recently. I use it a lot in my work, so it makes sense to write about it. The question is: is this what people want to read about? Use the "Discuss Article" button above to suggest topics for future columns. The topics have to be something that I can write about in a few pages, and they should be useful to many readers.

This week I was asked by a client to make a unique background for a game's title page. It consisted of expanding circles of a single color filling the background, and then expanding circles of another color filling in over that, and so on. You can see this background in action right here:

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

I thought this was a pretty interesting effect, and I liked the idea of a background being animated rather than static. Also, this is a way of using Imaging Lingo that I hadn't thought of before. While this could have been done with sprites in previous versions of Director, in Director 8 this can be done with a simple behavior. Here is that behavior. It takes a list of colors, in this case only two, and switches between them. You could easily add more colors to the list. The behavior sits on a bitmap sprite and draws the circles over that bitmap. It will add a new circle at a random spot every 1/20th of a second until there are 20 circles. Each circle continues to expand until the first one is about 1/3 the screen width. This is roughly when the screen is full. Then the whole process starts over again with the next color in the list.

property pColor, pColorList
property pCircleList
property pNextCircleTime
property pImage

on beginSprite me

  -- colors to use
  pColorList = [rgb("FFFF00"),rgb("FF9900")]
  pColor = 1

-- make pointer to this sprite's image
pImage = sprite(me.spriteNum).member.image

-- start off with first color
pImage.fill(pImage.rect,pColorList[pColor])

-- start filling with second color
startNewColor(me)

end

on startNewColor me

  -- next color
  pColor = pColor + 1
  if pColor > pColorList.count then pColor = 1

-- start circle list fresh
pCircleList = []

-- add first circle
addCircle(me)

end

on addCircle me

-- only allow 20 circles
if pCircleList.count >= 20 then exit

-- start next circle in 50 ms
pNextCircleTime = the milliseconds + 50

  -- pick random spot for center
  x = random(pImage.width)
  y = random(pImage.height)

-- add circle to list
add pCircleList, [x,y,0]

end

on expandCircles me

  -- loop through circles and draw them
  repeat with i = 1 to pCircleList.count

    -- get location and radius
    x = pCircleList[i][1]
    y = pCircleList[i][2]
    r = pCircleList[i][3]

    -- draw circle
    pImage.fill(rect(x-r,y-r,x+r,y+r),[#shapeType: #oval, #color: pColorList[pColor]])

    -- expand circle
    pCircleList[i][3] = r + 3
  end repeat

  -- if first circle is greater than 1/3 the width of screen
  if pCircleList[1][3] > pImage.width/3 then
    -- assume screen is filled and start with new color
    startNewColor(me)
  end if

end

on exitFrame me

  -- add new circle if it is time
  if the milliseconds >= pNextCircleTime then
    addCircle(me)
  end if

-- expand all circles
expandCircles(me)

end

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.