This tutorial started as the answer to a forum user's question about finding and selecting text in a text field. I noticed that there was nothing in Kirupa's tutorial section relating to this, so I decided it would make a neat tutorial! The find function described in this tutorial is actually found in most word processors and many other applications. The aim of this tutorial is to achieve a similar effect in Flash.

Below is an example of what we'll end up making by the end of this tutorial:

[ an example of what you will create by the end of this tutorial ]
 

Here's How:

1. To start, create a new document in Flash. Set the width to 350 px and the height to 200 px.

2. Next you'll need to create a text box on the stage using the Text Tool. It can be any size; I used one that was 200 pixels by 170 pixels. Make sure your text box remains on its own layer throughout the tutorial.

3. In the properties inspector for your newly created text box, make sure you have the following settings:

[ the Properties Inspector ]
 

4. Make sure your text is Dynamic Text, or else you will not be able to define its variable or Instance Name. Note that I have the "Selectable" option selected, though that will only change the user's ability to select the text, not the ActionScript's ability to select text, which we will be using later.

5. Now we need some text to put in our text box. I used Lorem Ipsum text, which is just dummy text that is useful for filling space. To do this, make sure you have your Text Tool out and click somewhere in the text field and then type/paste your text.

6. We'll need buttons to call the selecting action, so create 2 new layers by going to Insert>Timeline>Layer. I named mine Find and findNext.

7. Now we need to make our Find and Find Next images. Feel free to copy the ones below and paste them onto the stage.

   

   [ example Find and Find Next buttons ]
    

8. Click on one of the images and hit F8 (Insert>Convert to Symbol). Name the first one Find, and then repeat the process for converting your Find Next image into a symbol.

   

   [ the Convert to Symbol dialogue box ]
    

9. Once we have converted them to symbols, give your Find clip the instance name "finder" by selecting it and going to the properties inspector again. Give your Find Next clip the instance name "findNext".

   

   [ the Properties Inspector ]
    

10. In order to have text we want to find and select, we'll need an input text box so that the user can choose the text to find! To do this, create a new layer named "input" and on this layer put a new text box. This time it should be input text with the instance name "inputInstance" and the variable "inputter".

    

    

    [ the Properties Inspector ]
     

11. Now that we have everything set up, let's get to the ActionScript! First, create a new layer named "Actions". Go to the first frame in that new layer, and paste the following into the actions panel:

    finder.onRelease = function() {

    Selection.setFocus("_root.textInstance");

    var inputterString:String = _root.inputter;

    var inputLength:Number = inputterString.length;

    textStart = textVar.indexOf(inputter, 0);

    if (inputLength>0) {

    textEnd = textStart+inputLength;

    } else {

    textEnd = 0;

    }

    if (textStart>=0) {

    Selection.setSelection(textStart, textEnd);

    } else {

    Selection.setSelection(0, 0);

    }

    _root.textEnd = textEnd;

    };

     

    findNext.onRelease = function() {

    Selection.setFocus("_root.textInstance");

    var inputterString:String = _root.inputter;

    var inputLength:Number = inputterString.length;

    textStart = textVar.indexOf(inputter, _root.textEnd);

    if (inputLength>0) {

    textEnd = textStart+inputLength;

    } else {

    textEnd = 0;

    }

    if (textStart>=0) {

    Selection.setSelection(textStart, textEnd);

    } else {

    Selection.setSelection(0, 0);

    }

    _root.textEnd = textEnd;

    }

12. That's it! Now, hit Ctrl+Enter to test your movie. Type text into the input box and hit Find to find it. To find the next instance of your input, hit the Find Next button. Notice that the finder will loop once it finds the last instance of your text.

On the next page, I will explain the code that makes everything work.

page 1 of 2