Question

So I’ve taken it upon myself to make a ‘wiki’-esque application for some friends that works over Dropbox, which means that all the files are stored locally and updated by everyone.

Every file is a .txt pulled in by the flash and then displayed using a simple navigation and search tool.

Now I am trying to take this a step further and link articles from their content. Example:

Article 1 is called ‘Apples’. Its content: ‘Apples are delicious.’
Article 2 is called ‘Bears’. Its content: ‘Bears often eat apples.’

Now when the user opens Article 2, I would like them to be able to click on the word ‘apples’, which would then open Article 1 (‘Apples’).

I would like to know how to create events that trigger on the click of a specific word in a dynamic text box. Not the whole dynamic text box.

I have thought of creating movieclips in the shape of the word that are clickable and layering them over the word, but that is too much trouble if there is an easier option available.

Answer 1

You can use the textbox’s htmlText property to dynamically make the words links. Then use the TextEvent.LINK event to catch the word clicked.

Before you populate the text box with the content, simply iterate through your list of “keywords” and do a .replace("keyword", '<a href="event:keyword">keyword</a>');

So, your code will look something similar to:

// get the file contents using whatever method you use
var contents:String = getFileContents("page2.txt");

// assuming you have your keywords in an array
var keywords:Array = ["Apples", "Pears"];
for each (var keyword:String in keywords) {
    // replace the current keyword with a version of itself wrapped in a link
    contents = contents.replace(keyword, '<a href="event:' + keyword + '">' + keyword + '</a>');
}

yourTextField.htmlText = contents;

// add an eventlistener for the click
yourTextField.addEventListener(TextEvent.LINK, linkClicked);
function linkClicked(e:TextEvent):void {
    // load the article for the clicked word =]
    loadPage(e.text);
}

UPDATE
If you want to ignore the case of the keywords, so “apples” will match “Apples” (and so will “aPpLeS”), you’ll need to use a regular expression so that you can also keep the word as-is in the text:

// build a |-separated list of keywords
var keywordList:String = "";
for each (var keyword:String in keywords) {
    keywordList += ((keywordList != "") ? "|" : "") + keyword;
}
// build the regex and replace each keyword in-place
var pattern:RegExp = new RegExp("(" + keywordList + ")", "gi"); // "i" for ignore-case =]
contents = contents.replace(pattern, '<a href="event:$1">$1</a>');

The reason the above builds a |-separated list of keywords and does a single replace (as opposed to a replace for each keyword) is because the separated-list will do the replacement in-order and not allow a found keyword break the HTML inserted by a previous keyword (say, for instance, you had a keyword “event” – the HTML would break if it was replaced to make <a href="<a href="event:event">event</a>:keyword1">keyword1</a>).

The original-case of the text will be sent with the event. You can either do a search through all of your existing keywords and compare them with the one passed to the event (convert both to lower case with .toLowerCase() for the comparison), or you can make a rule that the primary keyword is always lowercase and not have to worry about searching through the list each time.