1 2 Previous Next 42 Replies Latest reply on May 15, 2007 9:19 PM by twistedpancreas

    Recognise word in text block and then change it's colour

    twistedpancreas Level 1
      Hey there helpful people.

      Got another doozy for you.

      If i have a block of text how can i get flash to recognise a word in that block of text (when it's clicked) and then change colour?

      Will it need to recognise how many characters along the text block, before it executes a change in colour?

      Does this code help or is it a bit of a run-around to the problem ( http://www.senocular.com/flash/actionscript.php?file=ActionScript_1.0/Prototypes/TextField /wordSelect.as)

        • 2. Recognise word in text block and then change it's colour
          WebXperience Level 1
          Check out the TextFormat Class. to change the text color in the dynamic TextField.

          Also, you could check for a particular word or symbol within a textfield using:
          Q]instancename.text.indexOf("sometext");


          You could also set color using:
          quote:

          instancename.setStyle("color", 0x000099);
          [
          • 3. Re: Recognise word in text block and then change it's colour
            twistedpancreas Level 1
            Yeah thanks,

            I know how to get the text to change colour, but getting a word out of a sentence to change colour is a bit more trickier, or have I missed something?
            • 4. Re: Recognise word in text block and then change it's colour
              WebXperience Level 1
              You could also set a certain string in the textfield to a different color using:
              instancename.substr(start, length)
              • 5. Recognise word in text block and then change it's colour
                twistedpancreas Level 1
                ok thanks,

                so if my sentence was:

                I like red apples

                in a dynamic text box called blockOfText_txt

                I could use you're recommended code to produce:

                var my_str:String = new String("I like red apples");
                blockOfText_txt.text = my_str;
                var mySubstring:String = new String();
                mySubstring = my_str.substr(7,3);
                trace(mySubstring); // output: red

                problem how do i get mySubstring to then change to red when clicked

                I know there is

                var my_fmt:TextFormat = new TextFormat();
                my_fmt.color = 0xFF0000;

                but I'm not sure how that would fit in

                sorry for my lack of AS knowledge, I am working on it :)
                • 6. Recognise word in text block and then change it's colour
                  Craig Grummitt Level 3
                  ok i've had a look at the code you linked to, twistedpancreas. Despite what it tells you in its comments, it's actually set up to only work with Flash Player 5.0 and won't work in its current incarnation in Flash 8. I can help you fix it for Flash 8 if you like but i don't think it's what you're looking for. It doesn't show up a word as a different color to click on until you click on that word, and then it will select that word(any word, by the way in the text field).

                  As far as i know you can't change the color of a word in a regular text box where you've set the contents of a TextField using TextField.text. TextFormat.color, TextField.textColor, TextField.backgroundColor all refer to the color of the whole text box. finding the word you wish to colour using String.indexOf or String.substr therefore doesn't help much either. (but WebXperience you were on the right track with StyleSheet.setStyle.)

                  You can, however, use stylesheets with html formatted text and set the textfield's contents using TextField.htmlText. You can then use the <a> tag to create buttons composed of text within the textfield and you can then style that text with the stylesheet.
                  Here's some code to achieve this:
                  • 7. Recognise word in text block and then change it's colour
                    twistedpancreas Level 1
                    quote:

                    Originally posted by: Craig Grummitt It doesn't show up a word as a different color to click on until you click on that word, and then it will select that word(any word, by the way in the text field).


                    Thanks Craig. I'm actually after that though (ie user clicks on word in text field, word changes color).

                    I've found this on another forum, which is close to what I'm after, but it's colouring words before the user has had a chance to click on them.





                    • 8. Recognise word in text block and then change it's colour
                      Craig Grummitt Level 3
                      yes i think i did misinterpret what you were after. let me clarify then - you want a regular text box where all the text is the same color, and then the user can click on any word within that textbox and that word changes color. yeah? i thought originally that you wanted the user to be able to click on a specific word in which case you'd probably want some indication of which word you wanted them to click on....

                      you did well with your research - i overlooked TextField.setTextFormat which allows beginning and end indexes. which is perfect for what you're after - so a mash up of the actionscript you originally posted a link to, with the code you just found on a forum should do the job. i've given it a go. here's instructions to get it happening:

                      put a textfield on the stage, with the instance name of say - textbox, and then add the following actionscript to the frame:



                      • 9. Re: Recognise word in text block and then change it's colour
                        twistedpancreas Level 1
                        ok thanks once again Craig (sorry for the late reply, im not sure if i had this post as a subscription)

                        that seems to be working.

                        i'll have to go over it when i get a bit more time, but would there be anyway to also return the text to it's original color if it was clicked after turning it to the 0x2F98C0 color?

                        then i have the job of putting this all into an array :D ah life, ain't it fun!!!
                        • 10. Re: Recognise word in text block and then change it's colour
                          Craig Grummitt Level 3
                          ah i'm good to you twistedpancreas...

                          to have the text toggle, replace the onMouseUp function with:

                          this.onMouseUp = function() {
                          this.textbox.runWordSelect(0x2F98C0,0x000000); //newcolor,oldcolor
                          };

                          and replace the runWordSelect function with:
                          • 11. Re: Recognise word in text block and then change it's colour
                            twistedpancreas Level 1
                            quote:

                            Originally posted by: Craig Grummitt
                            ah i'm good to you twistedpancreas...



                            You are way too good to me Craig,

                            in fact "We're not worthy" (in Wayne's World fashion)

                            I didn't realise the code was going to become such a monster!!!

                            And I'm yet to go over it (damn meetings)!!!

                            Thanks for all you're help.
                            • 13. Recognise word in text block and then change it's colour
                              twistedpancreas Level 1
                              Bugga, and here I thought the array would be a simple thing. I was going to have an invisible button over the top of one of the words to act as the right word that has been clicked.

                              But guess what? The button, when placed on top of the text, stops you from changing the word's color. And if you place the button under the text then the button gets ignored. Or am I missing something?

                              Or is there someway for the word clicked to activate my

                              myArray[0]="selected";

                              ?

                              Sorry for continuing this.

                              Also with you're code Craig, what do the

                              (47<c && c<58)

                              (64<c && c<91)

                              (96<c && c<123)

                              do?
                              • 14. Re: Recognise word in text block and then change it's colour
                                Craig Grummitt Level 3
                                well well the plot just keeps thickening... yes interacting with multiple elements simultaneously is a tricky business and best avoided. so am i right in assuming your myarray[0]="selected"; is an attempt at recording which words have been selected or not? if so, then first we need to determine what number word the user clicked on(which i assume was what you were attempting with buttons). we can determine this looping through the getWordEnd function backwards from the point the user clicked until we reach the beginning of the textbox. Once we have determined how many times we find wordends(or beginnings really) we've determined the word number the user clicked on. Once we've done this its a simple matter to set the relevant flag in an array. I've attached code to achieve this. (this replaces previous code)

                                Now to the second part of your question: what was all that (64<c && c<91) etc about? well first i should reference senocular coz that's where that portion came from. its in the isAlphaNumeric function which is called by the getWordEnd function which in itself should help you to understand what it's about. getWordEnd goes through the word character by character, checking that the character is alpha-numeric. it does this by checking the character code against the ascii character codes. for example ascii code 65= A and ascii code 90=Z. when the character is no longer alpha numeric it assumes it's no longer a word. i actually decided to do away with this function in the latest version as it was claiming a full-stop was a word. it now just checks for spaces and assumes anything else is part of a word. this is quite easy to revert if you prefer.
                                • 15. Re: Recognise word in text block and then change it's colour
                                  twistedpancreas Level 1
                                  Ok thanks for you're ascii explaination, small bits of the coding world are falling into place for me.

                                  So in regards to you're new code, what word out of the sentence have you got as the correct selection? Will I need a button to check if the correct word/s have been clicked?

                                  I usually used on the checking button this code:

                                  on (release)
                                  {

                                  var Answer:Number = 0;

                                  if (myArray[0]=="selected")
                                  {
                                  Answer=1;

                                  }
                                  if(Answer == 1)

                                  {

                                  _root.feedback.gotoAndStop("correct");
                                  }

                                  else
                                  {
                                  _root.feedback.gotoAndStop("incorrect");
                                  }
                                  }
                                  • 16. Recognise word in text block and then change it's colour
                                    Craig Grummitt Level 3
                                    twistedpancreas this is very difficult helping you step by step when each subsequent step may affect the approach taken in the previous step/s - maybe you should just give me the brief? ;)

                                    >>Will I need a button to check if the correct word/s have been clicked?
                                    that really depends on your brief, which i am not privvy to...

                                    >>I usually used on the checking button this code...
                                    i am struggling to understand what's going on in your code there - do you have a 'checking' button for each word?

                                    >>what word out of the sentence have you got as the correct selection?
                                    my code doesn't have any 'correct' selection. you haven't mentioned that some words are correct and some are incorrect until this last post. what i have done is set up an array logging which words have been selected.

                                    i don't know how i can help you with your code. at least not without more information of your requirements. i could make some adjustments to the code you posted. this is mainly for reasons of succinctness, placing your code on the frame rather than the button, and making it relevant to the code i posted. you will need a button called checkButton. This code checks whether the first word has been selected. if it has, it will send your feedback movieclip to the frame labeled correct, otherwise incorrect.
                                    • 17. Re: Recognise word in text block and then change it's colour
                                      twistedpancreas Level 1
                                      Sorry Craig,

                                      I didn't realise this was going to turn into such a monster, so let me just say a big thankyou so far, you've gone out of you're way for me and if there's any info i could ever repay you with I would most welcomely do (need info on Australia, 3D, design, miniatures, scenery, then ask away :D)

                                      But here's my file so far with you're code:

                                      http://home.exetel.com.au/twistedpancreas/images/recognise_word4.fla

                                      and sorry, basically the brief is a block of text, where all words can be clicked. The block of text usually has a question related to it, ie Which words in this sentence are gramatically wrong? Then the user clicks the words and then a Finished button which checks to see if the words they selected are correct in the array. It then responds with the appropriate correct or incorrect response.

                                      Hope that make sense.

                                      I also tried you're checkingButton code but it's only returning with incorrect responses.
                                      • 18. Recognise word in text block and then change it's colour
                                        Craig Grummitt Level 3
                                        yes the code i've provided you with so far should have you very close to what you're after. i've had a look at the fla you linked to - it doesn't have the most recent code i posted(two posts back) in it - which means it lacks the logging of which words have been clicked. so if you put that in, your checkingButton should return a correct on the first word. this can easily be modified to check if a different word is selected or even several.

                                        oh by the way - also - you don't appear to have a feedback movieclip...? so maybe those lines in the button should just refer to root. eg. _root.gotoAndStop("incorrect");
                                        • 19. Recognise word in text block and then change it's colour
                                          twistedpancreas Level 1
                                          Doh!

                                          I must be on drugs.

                                          Sorry it's all fixed up and at http://home.exetel.com.au/twistedpancreas/images/recognise_word4a.fla
                                          I've made two words correct, ie 2 and 4

                                          if (this._parent.textbox.wordSelected[2,4]!=true) {

                                          is this the right coding?

                                          Because I've noticed that if you have 2 correct words and you click one correct word (specifically the 2nd correct word in my example) and not the other, then the check button sees that as correct. Same with if you have 1 correct word and you click the correct word and an incorrect word, then it sees that as correct as well.

                                          Thanks for you're continued help btw.
                                          • 21. Re: Recognise word in text block and then change it's colour
                                            twistedpancreas Level 1
                                            Ok thanks that clears up some things.

                                            But unfortunately when I add in the ||

                                            if (this._parent.textbox.wordSelected[2 || 4]!=true)

                                            it's still seeing the 2nd word as correct (if you only click it and not the 4th word as well), so I had a look at the other operators and tried &&

                                            if (this._parent.textbox.wordSelected[2 && 4]!=true)

                                            and it's seeing the 4th word as correct (if you only click it and not the 2nd word), so that confused me because shouldn't && return only one selected word as false? ie if both words are selected then it is true, and any other combinations will be false?
                                            • 22. Recognise word in text block and then change it's colour
                                              Craig Grummitt Level 3
                                              on either side of the || operator has to be a boolean variable or expression - that means an expression that results in either true or false. you have two numbers either side of the expression - 2 || 4 - that is not how you use the || operator.
                                              experimentation - eg. trace(2||4); - shows that doing this will always result in the first expression. The same applies for the && operator except that it will always result in the last expression. eg. trace(2&&4); which really demonstrates that it's pointless putting numbers around these operators...

                                              so this is why you're getting the results you're getting - flash first compares 2||4 and returns 2, so then it checks:
                                              if (this._parent.textbox.wordSelected[2]!=true)
                                              in your second experiment, flash first compared 2&&4 and returned 4, so then checked:
                                              if (this._parent.textbox.wordSelected[4]!=true)

                                              anyway, the point is you need to put a boolean variable/expression either side of the || operator.
                                              what boolean expressions do we have in our code?
                                              this._parent.textbox.wordSelected[2] is an example of one. let's see how you go working out the rest now.
                                              • 23. Re: Recognise word in text block and then change it's colour
                                                twistedpancreas Level 1
                                                Sorry I feel really beyond my scope here, and I'm glad I'm ordering that Flash 8 Actionscripting book (please, oh please, Australia Post bring it soon).

                                                But it's not

                                                this._parent.textbox.wordSelected[2] || this._parent.textbox.wordSelected[4]

                                                is it?

                                                What I'm finding with the || operator is that if one expression is correct then it will return true, which isn't quite what i'm after. Basically I'm after specific expressions that are true and all others aren't, or have I read the livedocs info wrong?
                                                • 24. Re: Recognise word in text block and then change it's colour
                                                  twistedpancreas Level 1
                                                  Actually hold the phone...

                                                  How's this ?

                                                  this._parent.textbox.wordSelected[2]!=true || this._parent.textbox.wordSelected[4]!=true

                                                  do i get a star sticker :D
                                                  • 25. Re: Recognise word in text block and then change it's colour
                                                    Craig Grummitt Level 3
                                                    good work! i knew you'd get a better sense of satisfaction if you worked it out yourself! your two last posts in english for you:

                                                    this._parent.textbox.wordSelected[2] || this._parent.textbox.wordSelected[4]
                                                    if the second word is selected or the fourth word is selected(or both!)

                                                    this._parent.textbox.wordSelected[2]!=true || this._parent.textbox.wordSelected[4]!=true
                                                    if the second word is not selected or the fourth word is not selected(or neither!)
                                                    • 26. Re: Recognise word in text block and then change it's colour
                                                      twistedpancreas Level 1
                                                      sorry are you saying

                                                      this._parent.textbox.wordSelected[2] || this._parent.textbox.wordSelected[4]
                                                      if the second word is selected or the fourth word is selected(or both!)

                                                      will bring a true result?

                                                      and

                                                      this._parent.textbox.wordSelected[2]!=true || this._parent.textbox.wordSelected[4]!=true
                                                      if the second word is not selected or the fourth word is not selected(or neither!)

                                                      will bring a false result?
                                                      • 27. Recognise word in text block and then change it's colour
                                                        Craig Grummitt Level 3
                                                        it really depends what words are selected...?

                                                        do you understand that i was saying that what you wrote:
                                                        >>if (this._parent.textbox.wordSelected[2]!=true || this._parent.textbox.wordSelected[4]!=true) {

                                                        ...can be translated into english like so:
                                                        if the second word is not selected or the fourth word is not selected(or neither!)
                                                        • 28. Re: Recognise word in text block and then change it's colour
                                                          twistedpancreas Level 1
                                                          quote:

                                                          Originally posted by: Craig Grummitt
                                                          ...can be translated into english like so:
                                                          if the second word is not selected or the fourth word is not selected(or neither!)


                                                          then the result on the screen will be incorrect (taking into account all the other code we have)

                                                          right?

                                                          whereas on the other hand if if the second word is selected along with the fourth word then the result on the screen will be correct (taking into account all the other code we have)

                                                          • 29. Re: Recognise word in text block and then change it's colour
                                                            twistedpancreas Level 1
                                                            uh oh,

                                                            found a problem.

                                                            Say you do select the 2nd and 4th word and then select the 5th word then it's still seeing that as a correct answer :(
                                                            • 30. Recognise word in text block and then change it's colour
                                                              Craig Grummitt Level 3
                                                              ok if you need to check not only that some words are selected but also that some words are not, then your checking section is just going to have to be a longer if statement. perhaps something like:

                                                              if (this._parent.textbox.wordSelected[2]==true && this._parent.textbox.wordSelected[4]==true && this._parent.textbox.wordSelected[5]!=true && etc) {
                                                              //correct words selected
                                                              }

                                                              by the way, i am writing !=true instead of ==false because we don't have any initialisation of these variables at the beginning. how the code is set up at the moment, if a word is not selected it could either equal false, or undefined. initialisation would involve a for loop looping through all the variables in the array(of which there are as many as there are words in the text box) and setting them all to false. if you did this, then you could set up your checking code differently.

                                                              for example, you could set up a 'correct words' array(which is basically how you want your 'selected words' array to look when the correct words are selected). you could then check if your 'selected words' array is equivalent to the correct words array. unfortunately you can't just say if (array1==array2) - well you can but two identical arrays won't return true.

                                                              its okay though - there are ways you can do this. you could use a for loop to loop through both arrays comparing each element to the equivalent in the other array looking for discrepancies. but probably an easier way is set them both Array.toString() because you can compare two strings to eachother. eg. if (array1.toString()==array2.toString()) {

                                                              see how you go with that information...
                                                              • 31. Recognise word in text block and then change it's colour
                                                                twistedpancreas Level 1
                                                                quote:

                                                                Originally posted by: Craig Grummitt
                                                                if (this._parent.textbox.wordSelected[2]==true && this._parent.textbox.wordSelected[4]==true && this._parent.textbox.wordSelected[5]!=true && etc) {
                                                                //correct words selected
                                                                }


                                                                Thanks Craig,

                                                                I tried this on a 3 word sentence (with 2 words to be selected for a correct answer),ie :

                                                                if (this._parent.textbox.wordSelected[1]==true && this._parent.textbox.wordSelected[2]==true && this._parent.textbox.wordSelected[3]!=true

                                                                and was getting weird stuff like:

                                                                if you select no words and click the check button then it says correct

                                                                if you still selected one correct word but not the other it was saying correct

                                                                But I'll get back to you on the other things you suggested. Bit busy at the moment, but i really appreciate you're time and explainations.
                                                                • 32. Re: Recognise word in text block and then change it's colour
                                                                  Craig Grummitt Level 3
                                                                  i'm sure you'll work it out. remember you can trace variables to see what they contain at runtime or you can use the debugger.
                                                                  • 33. Recognise word in text block and then change it's colour
                                                                    twistedpancreas Level 1
                                                                    Ok I've been reading through LiveDocs and am about to get to Loops, but I came across Switches and was wondering if we could use this when the check button is clicked:

                                                                    switch (condition) {

                                                                    case A :
                                                                    (this._parent.textbox.wordSelected[2]!=true || this._parent.textbox.wordSelected[4]!=true)
                                                                    _root.feedback.gotoAndStop("correct");
                                                                    break;

                                                                    default :
                                                                    _root.feedback.gotoAndStop("incorrect");
                                                                    break;
                                                                    }

                                                                    I'm not sure what the condition would be, but i noticed in LiveDocs they had an example where if you didn't click any keyboards keys then the code automatically went to "default", so I was wondering if we could do the same here.

                                                                    But I'll be reading up on loops tomorrow, but for now it's home time :)

                                                                    • 34. Re: Recognise word in text block and then change it's colour
                                                                      Craig Grummitt Level 3
                                                                      afraid not only does the syntax of your code need work, you're barking up the wrong tree... 'switch' really doesn't do much that 'if' can't do - it's just a slightly more succinct approach in cases where you're only checking the contents of one variable. The 'default' option is equivalent to the 'if' statement's 'else'.

                                                                      we however, want to check the contents of several variables.

                                                                      by the way, i've wondered whether your post a few posts back where you were experimenting with a three word sentence whether you just had correct and incorrect around the wrong way. just have a close look at the logic of your 'if' statement and you should be able to work it out. translate it into english if it helps.
                                                                      eg. if word 1 is selected and word 2 is selected and word 3 is not selected then...(i don't know what comes next in your code as it stands!)
                                                                      • 35. Recognise word in text block and then change it's colour
                                                                        twistedpancreas Level 1
                                                                        ok i'm slowly getting there and snippets of code are vaguely making sense to me so here's what I've come up with so far:

                                                                        to have an array with all the words, ie:

                                                                        var myArr:Array = newArray (textbox.wordSelected[1], textbox.wordSelected[2], textbox.wordSelected[3]);

                                                                        then have another array, on the checking button, looking for a particular value/s (im not sure how to values so i'll only do one here), ie:

                                                                        var searchString:String = textbox.wordSelected[1]
                                                                        var matchesFound:Number = 0;
                                                                        for (var j:Number = 0; j < myArr.length; j++) {
                                                                        if (myArr[j] == searchString) {
                                                                        _root.feedback.gotoAndStop("correct");
                                                                        }
                                                                        else
                                                                        {
                                                                        _root.feedback.gotoAndStop("incorrect");
                                                                        }

                                                                        so basically the first word out of the three word sentence will be correct. i probably don't have the syntex right, but is this heading in the right direction?

                                                                        But in regards to you're comments on the post before about the 3 word sentence, i swapped the correct and incorrect code around and was getting similar results.
                                                                        • 36. Re: Recognise word in text block and then change it's colour
                                                                          Craig Grummitt Level 3
                                                                          i don't really understand what you're attempting there? with the code you've written your checking sequence is always going to come up with correct. this is because you're setting a variable to something and then checking if it equals that same something... make sense? eg. in simple terms you've said:
                                                                          a=b
                                                                          if a==b ...

                                                                          (if you're confused i'm referring to the following line, when j=0)
                                                                          if (myArr[j] == searchString) {

                                                                          in addition you've set a variable matchesFound that though it may been a good idea, you're not using elsewhere...

                                                                          ok i see you're trying though, yet struggling, so i think it might be time for another big push in the right direction. remember when i said this?
                                                                          >>>>but probably an easier way is set them both Array.toString() because you can compare two strings to eachother. eg. if (array1.toString()==array2.toString()) {

                                                                          here's an implementation of that(see attached code). the main differences are:
                                                                          as i suggested in an earlier post, i've initialised the wordSelected array with false.
                                                                          i've set the text field to a shorter sentence to make this simpler for testing.
                                                                          i've created an array called correctWordSelected which you'll have to update with the words that should be selected.
                                                                          the checking code compares the two arrays by converting them to strings first.
                                                                          i've changed the selection color to red for no apparent reason...
                                                                          • 37. Recognise word in text block and then change it's colour
                                                                            twistedpancreas Level 1
                                                                            Yeah sorry my knowledge in this area is really lacking, but never fret I have "Actionscript for Flash 8" sitting beside me, and hopefully after going through that and from what I've read up in LiveDocs I can stop asking frustrating questions :D

                                                                            But yeah I was a bit lost as to what to do. Really "myArr" and "matchesFound" were both pointing to nowhere ("myArr" really should have been "textbox", but that still probably wouldn't have made sense).

                                                                            So how does you're code realise that a wordSelected becomes true? I can see it turning all text to false, and then later checking against correctWordSelected, but I can't see how it's recognising a selected word to true. Maybe i haven't grasped the idea of Array.toString()

                                                                            Thanks for all this btw.

                                                                            PS it's working too :D
                                                                            • 38. Re: Recognise word in text block and then change it's colour
                                                                              NSurveyor Level 2
                                                                              I haven't read through this entire thread, but perhaps the following will work for you:
                                                                              • 39. Recognise word in text block and then change it's colour
                                                                                Craig Grummitt Level 3
                                                                                twistedpancreas, the code recognises when a word is selected in the runWordSelect method, which sets the element in the wordSelected array for the currently selected word to either true or false on lines 44 and 48 of the code.

                                                                                NSurveyor that looks very interesting but twistedpancreas wants every word clickable, and since the other code is working to twistedpancreas' satisfaction and i'm exhausted(!) i'm going to leave it there...

                                                                                twistedpancreas good luck with the actionscript book!
                                                                                1 2 Previous Next