|
|
|
|
Find and Select Dynamic Text
by
krilnon : 1 August 2005This 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:
-
To start, create a new document in Flash. Set the width to 350 px and the height to 200 px.
-
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.
-
In the properties inspector for your
newly created text box, make sure you have the following
settings:
[ the Properties Inspector ]
-
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.
-
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.
-
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.
-
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 ]
-
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 ]
-
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 ]
-
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 ]
-
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;
- }
-
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 |
|
|
|
|
|
|
|