Creating Anchors in Text Members

June 26, 2001
by Will Turnage

Dear Multimedia Handyman,

I have a project with a lot of scrolling text in it, and I'd like the text in it to work just like anchors in an HTML document, where you click on a link and it automatically scrolls you to another part of the same text field. Do you know if this can be done? Thanks,

Casey

Dear Casey,

If you want to simulate anchors in your text members, then it's not too difficult; all you need to do is to take advantage of the hyperlink capabilities in text members. To create a hyperlink for a text member, just open the Text Inspector in Director (which looks like this).

To create a hyperlink, just select some text inside your text member, and type whatever you want in the hyperlink field across the bottom of the Text Inspector. If you want to create anchors, then you should set up a consistent naming convention for your anchors so they will be distinguished from any other hyperlinks you have in your text member. For instance, if you wanted a hyperlink to act as an anchor, then you could name it Anchor: top, Anchor: item1, or Anchor: item2. And if you wanted a hyperlink to jump to an anchor, then you could name its hyperlink with a more familiar HTML syntax like #top, #item1, or #item2.

Once you've created all of your anchors and anchor link hyperlinks inside your text member, then all that's left to do is to write the code to handle the scrolling for you. The first step is to write a handler that will create a list of all the anchors in your text member:

on buildHyperlinkList me
  pHyperlinkList = [:]
  pMemRef = sprite (me.spriteNum).member
  tempList = pMemRef.hyperlinks
  repeat with i = 1 to tempList.count
    tempLink = pMemRef.char[templist[i][1]].hyperlink
    if tempLink starts "Anchor:" then
      tempLink = value ("#" & tempLink.word[2])
      pHyperlinkList.addProp (tempLink, tempList[i][1] - 1)
    end if
  end repeat
end

In this code, you start by creating a blank property list and a reference to the text member of the sprite this behavior is attached to. Next, you store the hyperlinks of the text member into a variable. The hyperlinks property is a linear list of all the hyperlinks in a text member. For each hyperlink, hyperlinks shows the character index numbers for the beginning and end of the hyperlink. For example, the hyperlinks of a text member might look like this:

-- [[1, 20], [24, 29], [32, 37], [40, 45], [48, 53], [60, 65], [1703, 1713], [1722, 1727], [3365, 3375], [3384, 3389], [5027, 5037], [5046, 5051], [6689, 6699]]

Once you have this list of hyperlink ranges, then you repeat through the list of ranges. For each range, you use the hyperlink property of the text member to find out the text of that particular hyperlink. Don't be confused by the hyperlinks and hyperlink properties of a text member. The hyperlinks (plural) property displays a list of numbers whereas the hyperlink (singular) property shows the text of a single hyperlink.

Now that you have the text in the hyperlink, you can check it to see if it is one of your named anchors. If the hyperlink begins with the word Anchor, then you take the name of the anchor and convert it into a symbol. Finally, you take that symbol along with the first number in the hyperlink range, and you add them to your list of hyperlinks. When the handler is done, you've got a list of hyperlinks that looks like this.

-- [#top: 0, #item1: 59, #item2: 1721, #item3: 3383, #item4: 5045]

The last step is to write a handler that automatically scrolls the text member when you click on a hyperlink.

on hyperlinkClicked me, data, range
  if data.char[1] = "#" then
    destinationAnchor = value(data)
    if not voidP(pHyperlinkList.getAProp(destinationAnchor)) then
      if pHyperlinkList[destinationAnchor] <= 0 then
        pMemRef.scrollTop = 0
      else
        pMemRef.scrollTop = charPosToLoc(pMemRef, pHyperlinkList[destinationAnchor]).locV
      end if
    end if
  end if
end

In this handler, you start by checking to see if the hyperlink begins with a #, meaning that this link wants you to jump to a named anchor. Next, you use the value function to convert the hyperlink string into a symbol. Then, you check to see if this symbol is in the property list of hyperlinks you created earlier. If it is in the list, the final step is to scroll the member. If the character to jump to is less than or equal to zero, just set the scrollTop of your text member to zero. Otherwise, set the scrollTop equal to that character's position in the member. You determine the character's position in the member by using the charPosToLoc function.

When you use this code in a movie, the final result should look like this:

There's one final note you should think about before using anchors in your text member. Some people have problems with this method of using anchors because the anchors show up as links in the text cast member when they want the anchors to be invisible. The solution to this problem is to set the useHypertextStyles property of a text member to false. When this is done, it will remove all the blue underlining of hyperlinks in a text member. Unfortunately, there's no way to selectively turn this property on or off for individual links. It applies to every link in the text member. But you can get around this by setting useHypertextStyles to false, then manually formatting the links you want active by underlining them and setting their fontcolor to blue.

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

Will Turnage is a multimedia programmer based in New York City. In addition to his weekly role as Director Online's Multimedia Handyman, he is also the Technology Director for Sony Music's Client Side Technologies Group. You can read more about his work at http://will.turnage.com/.