Hack 93 Create HTML Links in Flash

Flash content doesn't typically include HTML-style links, but there's no reason it can't. Create HTML-style hyperlinks that control the Flash timeline within Flash.

Flash MX 2004 allows you to use CSS formatting, which supports text that looks like standard HTML links. Unfortunately, they also act like standard HTML links—they will jump to pages outside the Flash SWF. That is, unless you know how to use asfunction to allow the links to control the interface with ActionScript, as shown shortly.

The first step is to create the appearance of hyperlinks in Flash, which is relatively straightforward.

Create a .css file in your favorite text editor (mine is SciTE|Flash [Hack #74] ) with the text shown in Figure 11-17. Save the file as flash.css.

Figure 11-17. The contents of the .css file

Next, create a multiline text field named myHTML_txt on the Stage. Add the following code to create our HTML text inside myHTML_txt, complete with a hyperlink to http://www.oreilly.com:

var myCSS = new TextField.StyleSheet( );

myCSS.load("flash.css");

myCSS.onLoad = function(success) {

  if (success) {

    myHTML_txt.styleSheet = myCSS;

  }

};

myHTML_txt.html = true;

myHTML_txt.htmlText = "<p>This is a <a href = 

  'http://www.oreilly.com'>link</a> to my site.</p>";

myHTML_txt.htmlText += "<p>Click it and see!</p>";

The hyperlink appears, as shown in Figure 11-18.

Figure 11-18. A hyperlink as a true HTML link in Flash

Although a pure HTML hyperlink within a Flash SWF is cool for navigating to external pages, it isn't much use in controlling the current Flash timeline. To control the Flash timeline, we have to use asfunction. The following code uses asfunction to invoke the function asLink( ) with an argument of 10 when the link is clicked, causing the playhead to jump to frame 10 in the current SWF's timeline. Note that asfunction: is a protocol that is specified as the link, just as mailto: and http: are protocols. The browser passes any URLs starting with asfunction: to the Flash Player plugin or ActiveX control. And the Flash Player invokes the function specified in the first argument following asfunction: and passes subsequent arguments to the function.

function asLink(goto) {

  gotoAndPlay(goto);

}

var myCSS = new TextField.StyleSheet( );

myCSS.load("flash.css");

myCSS.onLoad = function(success) {

  if (success) {

    myHTML_txt.styleSheet = myCSS;

  }

};

myHTML_txt.html = true;

myHTML_txt.htmlText = "<p>This is a <a href = 

     'asfunction:asLink, 10'>link</a> to frame 10.</p>";

myHTML_txt.htmlText += "<p>Click it and see!</p>";

stop( );

Final Thoughts

Because Flash MX 2004 supports HTML text and a subset of CSS formatting, HTML-style links can be mixed with standard Flash buttons. This hack shows the route to using such links to provide internal Flash navigation from outside Flash (or simply to run ActionScript code). Of course, it can be used for the more typical hyperlink to external pages.

Knowing how to do this is pretty important, given that Flash can now include images as well as HTML-formatted text within a text field [Hack #46], making it a way of presenting mini-HTML pages within a Flash SWF. Text fields can even contain other SWFs, which is a cool alternative to loadMovie( ) or loadMovieNum( )!