Scrolling icon menus

July 2, 2000
by Pat McClellan

Dear Multimedia Handyman,

I would like to create a sliding menu. This would entail making a sliding image, as in some of your other articles about big scrolling images, but also making the individual scrolling items selectable. My menu would contain images that people can select to open other events.

Wayne Finucane

Dear Wayne,

This is a frequently requested topic -- people seem to like scrolling menus. And I've learned from the comments and questions I received after my previous scrolling articles that people often want to have more than one group of scrolling items at once, and scrollers that are sometimess horizontal and sometimes vertical. So, as I approached this, I wanted to make a set of behaviors that would be the most versatile. Here's the resulting demo:

Director 7 download for Mac or Windows.

You'll see in the demo that there are three different scrolling groups, which I've called alpha, beta, and gamma. Overlapping each end of the scroll areas you'll see a gray rectangle, which is the sprite on which I put the triggering behavior for the scroller. If you roll over this area, you'll see the scrolling action. As the items are scrolled, you'll see that the values of the gScrollH or gScrollV lists are being altered. And if you click on any of the icons, you'll see that reflected in the "click status" text. Let's look at how this all goes together.

The global variables gScrollH and gScrollV hold the values representing how much each group of scrolling items has been scrolled. By making these property lists instead of simple integer values, you can accommodate as many scroll groups as you need. When you roll over the ends of the scroll area, a behavior called "ScrollArea" increments the value for its corresponding group.

on mouseEnter me
pFlag = #scroll
end mouseEnter

on mouseLeave me
pFlag = #static
end mouseLeave

on exitFrame me

  if pFlag = #scroll then

    case pDirection of

      #movesLeft, #movesRight:
        currentVal = gScrollH[pMyGroup]
        newVal = currentVal + pIncrement

        if newVal >= pRange[1] and newVal <= pRange[2] then
          gScrollH[pMyGroup] = newVal
          sendAllSprites(#scrollH, pMyGroup)
        else
          pFlag = #static
        end if

      #movesUp, #movesDown:
        currentVal = gScrollV[pMyGroup]
        newVal = currentVal + pIncrement

        if newVal >= pRange[1] and newVal <= pRange[2] then
          gScrollV[pMyGroup] = newVal
          sendAllSprites(#scrollV, pMyGroup)
        else
          pFlag = #static
        end if

    end case

  end if

end exitFrame

This script checks the range (author-specified) that it can move in. If it's still inside the scroll range, the value of the appropriate group in the gScrollV or gScrollH is incremented or decremented. A command is then sent to all sprites #scrollV or #scrollH. The behavior that is placed on all of the sprites that are to scroll has a handler to receive that command and move the sprite accordingly. For example, for a scrollH command, the handler checks to see if the command is for its group, and if so, the locH is adjusted to the new gScrollH value for that group.

on scrollH me, group

  if pMyGroup = group then
    pSprite.locH = pMyStartH + gScrollH[pMyGroup]
  end if

end

As for adding clickable functionality to the scrolling sprites, just drop other behaviors on them to accomplish your goals. For the demo above, I put a simple behavior that updates the text member -- just so you can see what was clicked. Good luck with your project.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.