Re: Interactive text question....

[Sam]

Hello BFUG,

Very good to see a lot of you last night. Good times indeed.

I have a technical issue with an interaction coming up that I wondered
if anyone had any input on. Basically, it's a game where the user
needs to identify, and change, sections or words of text in paragraphs
of text by clicking on the offending items. The client needs to be
able to update and change the content and functionality themselves at
a later date so all content will be stored in xml. This cannot be done
in a quick and dirty way by putting invisible hotspots over a static
text field. I also cannot parse through the text and make mcs out of
each word and then layout the text dynamically that way.

I need to find a way of getting the coordinates of specific words or a
word, creating hotspots over those coordinates and then being able to
update the words with the correct or chosen versions. I also need to
empower the client to generate this functionality through the xml. Has
anyone any tips or advice on how to do this? Issues come to mind with
things like..... how would it work if the clickable phrase was cut in
half by a line break? How would I create the xml so that it's easy for
someone to designate functionality and choices within paragraphs of
text? And then..... how would I integrate the changes into that text
at the right places and then reupdate the hotspots for other
interactive sections of that text?

Thanks,

Sam

[David James]

Of the top of my head;

 you split the text string usng textString.split(" ") or similar and create movieclips out of every word, you can use the cumulitive width of all the words to find ut where line breaks exist - for selecting which words would be clickable you could use some other character to look for in the text string like tubes: | or use xml tags

<string> text here <highlight> make this selectable </highlight> carry on with text here</string>

--
You received this message because you are subscribed to the Google Groups "Bristol Flash User Group" group.
To post to this group, send email to bristol-flas...@googlegroups.com.
To unsubscribe from this group, send email to bristol-flash-user...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/bristol-flash-user-group?hl=en.

[barnaby menage]

how about:

- putting a full stop in different colours e.g. red at start of word
and green at end
- saving the text area as bitmap data
- process the bitmap to get the x and y coords based on the colour values
- dynamically place movieclips hotspots based on that

best

barnaby

[s'unya]

On 9 September 2011 11:08, Sam <sam.mc...@gmail.com> wrote:

--
You received this message because you are subscribed to the Google Groups "Bristol Flash User Group" group.
To post to this group, send email to bristol-flas...@googlegroups.com.
To unsubscribe from this group, send email to bristol-flash-user...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/bristol-flash-user-group?hl=en.

Hi Sam,

You'll need  a string of the text for ease of searching and indexing and then you can get a Point of specific characters using mytext.getCharBoundaries(myCharIndex);


Cheers

--
                      o
            o                 o
                O   O   O
      o  o   O s´unya O   o  o

[Aden Forshaw]

And if you need to find the character under a give X/Y i.e. on mouse click, then getCharIndexAtPoint should be your friend there.

Great to see so many there last night btw.

Laters, Aden

--
Skype: aden.forshaw
Mobile: 07595 152418

[Ben Bath]

//how about this? does not account for words that run over two lines
though


import flash.text.TextField;
import flash.geom.Rectangle;
import flash.display.Sprite;

var tf:TextField = new TextField();
tf.width = 200;
tf.height = 100;
addChild(tf);

var text:String = "sdkfhj asdlfkjhasdf kjhsdfjasdf sdkjhsd sdkljhsdf
sadfkjhsdf sdf";
var lookup:String = "sdfjas";

tf.text = text;
var index:int = text.indexOf(lookup);

var rect:Rectangle;
var rect1:Rectangle = tf.getCharBoundaries(index);
var rect2:Rectangle = tf.getCharBoundaries(index+lookup.length-1);

rect = rect1.union(rect2);

var s:Sprite = new Sprite();
s.graphics.beginFill(0,.3);
s.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
addChild(s);

[Ben Bath]

//how about this. Problem if word wraps. Also could use special chars
that are replaced to avoid duplicate matches in a String.
.

[s'unya]

--

Hi,

That is about it. To deal with wrapping words you could look at the index of the start and end character of your search string to see if the y values has changed. If they are then you will need to split your sprite.

Sorry no code; I'm a bit busy

[Ben Bath]

//ok more like this then...

import flash.text.TextField;
import flash.geom.Rectangle;
import flash.display.Sprite;

import flash.display.BlendMode;

var tf:TextField = new TextField();

tf.wordWrap = true;
tf.width = 100;
tf.height = 300;

addChild(tf);

var text:String = "sdkfhj asdlfkjhasdf kjhsdfjasdf sdkjhsd sdkljhsdf
sadfkjhsdf sdf";

var lookup:String = "asdlfkjhasdf kjhsdfjasdf sdkjhsd sdkljhsdf s";

tf.text = text;
var index:int = text.indexOf(lookup);

var rect:Rectangle;
var rect1:Rectangle = tf.getCharBoundaries(index);
var rect2:Rectangle = tf.getCharBoundaries(index+lookup.length-1);

rect = rect1.union(rect2);

var s:Sprite = new Sprite();

addChild(s);
s.alpha = .4;
switch(true){
case rect1.y==rect2.y:
//single line
s.graphics.beginFill(1);
s.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
s.graphics.endFill();
break;
case rect1.bottom<rect2.y:
//more than two lines fill full width gap
rect = new Rectangle(tf.x,rect1.bottom,tf.width,rect2.top-
rect1.bottom);
s.graphics.beginFill(1);
s.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
s.graphics.endFill();
//NB no break statement
case rect1.bottom==rect2.y:
//top and bottom rectangles
rect = rect1.union(new Rectangle(tf.x+tf.width-1,rect1.y,1,1));
s.graphics.beginFill(0);
s.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
s.graphics.endFill();
rect = rect2.union(new Rectangle(tf.x,rect2.y,1,1))
s.graphics.beginFill(0);
s.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
s.graphics.endFill();
break;
}

On Sep 9, 2:14 pm, "s'unya" <sunya.dick...@gmail.com> wrote:

[Sam]

Thanks everyone for your input, it is much appreciated and really helpful. I have lots of solid direction now. I'm not going to get properly stuck into until after FOTB so I'll let you know how it goes.

Cheers,

Sam