HTML5 target hyperlink

Hi,
I’m struggling to add multiple links to an htmltext (I’m aiming for the HTML5 target), I would like to have a text which looks like that :
"URL1, URL2"
Is there a way to do this ?

Thanks in advance

What you can do is use a Markdown parser and parse the TextField’s “text” property other than the “htmlText” property which is only fully supported in the Flash target in openfl 3.x, at least at the moment.

I’ve personally used this library by player03 who helped me to achieve this very task a while back. But as mentioned, the TextField is not well supported across all platforms yet so avoid assuming anything will work. I know that multiple hyperlinks will break formatting in native targets, not sure about HTML5 in the current version. It might work.

If you just want it in HTML5 and not necessarily in the game itself, your best option may be to modify the index.htm file and just put your hyperlinks in there instead.

Thanks for your answer !

If you just want it in HTML5 and not necessarily in the game itself,
your best option may be to modify the index.htm file and just put your
hyperlinks in there instead.

Unfortunately I have to put the links inside my game, adding a div in the index would have been too easy !

I tried the parser library with the following code :

var btn_txt : TextField = new TextField();
btn_txt.width = 800;
this.addChild(btn_txt);        
var sourceText:String = "[elit](http://www.lipsum.com/).";
var parser:MarkdownParser = new MarkdownParser();
parser.parse(sourceText).apply(btn_txt);

but it doesn’t seems to work, it applies a style to the text but
nothing happen when I click on the hyperlink. Am I missing something ?

It probably doesn’t work on the HTML5 target. You can try <set name="openfl-legacy" />, but if that doesn’t work, you’ll just have to wait for better text support.

There is no legacy for HTML5

If you handle a click event yourself, you can call Lib.getURL to open a link. Hyperlinks are unfortunately not yet supported in TextField

Firstly, the library specifically uses flash.* imports, not openfl.* so unless it’s the Flash target, it probably won’t render…

Secondly, you actually need to handle the click event on the TextField like so:

var links:Array<ParsedLink> = [];
var result:ParserResult = parser.parse(sourceText);
result.apply(btn_txt);
for (data in result.annotations)
{
    if (data.tagName == "link")
        {
            var l:ParsedLink = new ParsedLink(); //a class containing beginIndex, endIndex and url
            l.beginIndex = data.beginIndex;
            l.endIndex = data.endIndex;
            l.url = data.extraData[0];
            links.push(l);
        }}
btn_txt.addEventListener(MouseEvent.CLICK, function(e) {
    var idx:Int = e.currentTarget.getCharIndexAtPoint(e.localX, e.localY);

    for (i in 0...links.length)
    {
        if (idx >= links[i].beginIndex && idx < links[i].endIndex)
            Lib.getUrl(new URLRequest(links[i].url), "_blank");
    }
});

That’s IF the getCharIndexAtPoint() function is functional in the HTML5 target, otherwise it would only work in Flash at least for the moment.

The other option is to experiment with “fake” hyperlinks in that you simply place a transparent Bitmap in the location of the supposed link, and when you click on that, it will fire the URL that way. That’s one way of bypassing the limited TextField support, particularly on native targets. Although not very efficient…

Hi,
Thanks for your answers !

That’s IF the getCharIndexAtPoint() function is functional in the HTML5
target, otherwise it would only work in Flash at least for the moment.

getCharIndexAtPoint() doesn’t seems to work on HTML5, it always return 0 wherever I click on the text !

The other option is to experiment with “fake” hyperlinks in that you
simply place a transparent Bitmap in the location of the supposed link,
and when you click on that, it will fire the URL that way. That’s one
way of bypassing the limited TextField support, particularly on native
targets. Although not very efficient…

I had thought of this option and I will give it a try, but it will be way more tedious, I have to make a page with quite a few links !

Anyway, thanks again for your answers.

OpenFL handles this automatically. When compiling for anything besides Flash, flash.* is replaced with openfl.*.

Also, instead of transparent shapes, you could do a hit on the TextField, and check the (x, y). TextField support is continuing to evolve – it’s a very big subject, and one I’m hoping we can continue to mature (in one good implementation rather than the separate implementations we had in the past)

Depending on your project, you might also be able to use -Ddom mode