Spark TextFlow LinkElement Rollover in Flex 4

This is a little example of how to create a skinned rollover popup on a LinkElement object in Flash Builder 4 (Flex 4) within a TextFlow object. This is something I have been waiting for since 2001. The old way to create a rollover action on an HTML link was to create an invisible MovieClip that floats over your hyperlink. Flex Builder 4 greatly simplifies this by adding rollover, mouse, and click events to all hyperlinks within the TextFlow object. This is a HUGE plus

I borrowed the click event action from an example by Peter deHaan posted on his blog Flex Examples. You will need the latest build of the Flex Builder 4 SDK and some helpful instructions on how to install the latest Flex Builder 4 SDK.

Example AIR Application Output

LinkElement Rollover Example

Main.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication title="Spark RichEditableText LinkElement Rollover"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<fx:Script>
<![CDATA[
import flashx.textLayout.formats.TextDecoration;
import mx.managers.PopUpManager;

import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.events.FlowElementMouseEvent;
import mx.controls.Alert;

private var customToolTip:CustomToolTip;

protected function clickHandler(evt:FlowElementMouseEvent):void {
var linkEl:LinkElement = evt.flowElement as LinkElement;
Alert.show("The '" + linkEl.getFirstLeaf().text + "' link would have gone to " + linkEl.href + " in a " + linkEl.target + " window, but it was cancelled.", "Fun with hyperlinks");
evt.stopImmediatePropagation();
evt.preventDefault();
}

protected function rollOverHandler(evt:FlowElementMouseEvent):void
{
if(!customToolTip){
customToolTip = new CustomToolTip();
customToolTip.x = this.mouseX - customToolTip.width/2;
customToolTip.y = this.mouseY - 40;
PopUpManager.addPopUp(customToolTip, this, false);
}
customToolTip.text = LinkElement(evt.flowElement).href;
}

protected function rollOutHandler(evt:FlowElementMouseEvent):void
{
PopUpManager.removePopUp(customToolTip);
customToolTip = null;

}
]]>
</fx:Script>

<s:RichEditableText id="richEdTxt" editable="false" selectable="false" focusEnabled="false" horizontalCenter="0" verticalCenter="0">
<s:textFlow>
<s:TextFlow>

<s:p>Text that includes a link to <s:a href="http://adobe.com/" target="_blank"
rollOver="rollOverHandler(event);" rollOut="rollOutHandler(event);"
click="clickHandler(event);">Adobe</s:a>.</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>

</s:WindowedApplication>

CustomToolTip

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
import spark.skins.spark.BorderSkin;

[Bindable] private var _text:String;

public function set text(value:String):void
{
_text = value;
}
]]>
</fx:Script>

<s:Skin minHeight="25">

<s:Rect id="upFill"
top="1"
right="1"
left="1"
bottom="1"
radiusX="10"
radiusY="10">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#222222" ratio="0" alpha="0.45"/>
<s:GradientEntry color="#222222" ratio="0.45"/>
<s:GradientEntry color="#222222" ratio="0.65"/>
<s:GradientEntry color="#222222" ratio=".8"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#222222" weight="0.5"/>
</s:stroke>
</s:Rect>

<s:Rect id="highlightFill"
top="2"
right="2"
left="2"
bottom="2"
radiusX="10"
radiusY="10">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="#FDFDFD" ratio="0" alpha="0.6"/>
<s:GradientEntry color="#FDFDFD" ratio="0.2" alpha="0"/>
</s:LinearGradientStroke>

</s:stroke>
</s:Rect>

<s:SimpleText id="labelElement" text="{_text}"
color="#FFFFFF"
right="20"
left="20"
verticalAlign="middle"
horizontalCenter="0"
verticalCenter="1"/>

<s:filters>
<s:DropShadowFilter color="#999999"
blurX="5"
blurY="5"
angle="90"
distance="2"
alpha="0.8"/>
</s:filters>
</s:Skin>

</s:SkinnableContainer>

The only think I couldn’t get working for this example (the commented out section) was changing the format of the hyperlinks within the TextFlow object.

Source File

Additional Resources

http://labs.adobe.com/technologies/flashbuilder4/
http://livedocs.adobe.com/flex/gumbo/langref/spark/primitives/RichEditableText.html
http://blog.flexexamples.com/2009/08/27/creating-a-linkelement-in-a-spark-richeditabletext-control-in-flex-4/
http://blog.flexexamples.com/2009/07/13/downloading-and-installing-flex-4-sdk-builds-from-opensource-adobe-com-flash-builder-4-beta-edition/

-Mister