Problem
We want hyperlinks that are placed inside of text to look like exactly how standard HTML link look like (underlined and blue-coloured text)
Solution
Flash player 9 and higher supports pseudo CSS-style selectors like a:hover, a:link, a:active. Let's use this fact to our advantage!
Detailed explanation
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:text="jabbypanda.controls.*"
width="100%" height="100%"
horizontalAlign="center"
backgroundGradientColors="[#000000, #282828]" backgroundColor="#282828"
verticalAlign="middle" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import jabbypanda.controls.HyperLink;
import jabbypanda.controls.events.HyperlinkEvent;
private function onLinkClick(evt : HyperlinkEvent) : void {
// here you can invoke loading of external web-page if you want via URLRequest
var hControl : HyperLink = HyperLink(evt.target);
txtDataUrl.text = "You just had clicked '" + hControl.linkText + "'";
txtDataUrl.visible = true;
}
private function changeStyle() : void {
hLink.setStyle("colorLink", 0xFFFF00);
hLink.setStyle("colorHover", 0xFFFF00);
txtDataUrl.visible = false;
}
]]>
</mx:Script>
<mx:Style>
HyperLink {
colorLink : #FF0000;
colorHover : #00FF00;
colorActive : #0000FF;
}
Label {
color : #CCCCCC;
fontSize : 16;
}
</mx:Style>
<text:HyperLink linkText="Click me! I am a hypertext link" id="hLink" linkClick="onLinkClick(event)"/>
<mx:Button id="btn" label="Change the style" click="changeStyle()"/>
<mx:Label id="txtDataUrl" visible="false"/>
</mx:Application>
To run this sample, please also download the ZIP file associated with this example and use Hyperlink component code out of it.
