How to Set the Theme of a Link Button to Halo With ActionScript
Flex Builder is a Web design and development software used to create Rich Internet Applications. XML and ActionScript are the two primary languages used in Flex. XML sets the structure of the website and ActionScript provides the functionality. A developer will use XML and ActionScript in order to create a link button with a halo effect. With a few simple lines of code, you can complete the entire process. The developer can also customize the effect using properties available within the Flex Builder library.
Other People Are Reading
Instructions
-
Create the Link Button
-
1
Open your main Flex application and switch to code view. Place the opening and closing tag for the link button in your Flex application:
<mx:LinkButton></mx:LinkButton>
-
2
Set the style of your link button and add the appropriate text. Place the link button properties within the open tag of the link button.
<mx:LinkButton label="My Link Button" color="0000FF">
</mx:LinkButton>The code above creates a link button with blue text that reads "My Link Button."
-
-
3
Import the ActionScript Alert class. Add the import statement after the opening application tag and before your link button:
<fx:Script>
import mx.controls.Alert;
</fx:Script>The code above lets Flex know you are imbedding ActionScript within the application file. It also gives you accesses to functionality within the Alert class.
-
4
Run your application. By default a link button will produce the halo effect once the user rolls over the link text. Verify that you have a working link button control with a halo effect.
Create a Spark Link Button Skin
-
5
Create the skin for your Flex Spark link button. Flex uses multiple types of components. Unique styles can be applied to Spark link buttons. Open a new Spark Skin file or an existing Spark Skin file. If you are new to Spark components, you can locate a Spark Skin file template, by opening your applications Spark folder.
-
6
Replace the opening Spark Skin tag with the following line of code:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
Add the following Metadta informaiton below the opeing tag.
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata> -
7
Add the code that will define the style of your link button halo.
<s:states>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>The code above names the various link button states, allowing you to access them and apply style later.
<s:Rect left="0" right="0" top="0" bottom="0">
</s:Rect>This code creates a rectangle halo and defines its placement relative to the link.
<s:Rect left="0" right="0" top="0" bottom="0" includeIn="over" radiusX="15" radiusY="15">
<s:stroke>
<mx:SolidColorStroke weight="3" color="0x6600FF"/>
</s:stroke>
<s:fill>
<mx:SolidColor color="0x6600FF"/>
</s:fill>
</s:Rect>The stroke property above creates a 3-pixel weight stroke around a purple rectangle. This sets the halo style.
-
8
Add the code for your Spark button:
<s:Button id="sparkBtn" skinClass="theFolderNameWhereYourSkinIsSaved.TheNameofTheSkinFile" label="TheBtnTitle"/>
The code above creates a Spark button with the style you just created labeled “TheBtnTitle.”
-
1
Tips & Warnings
Flex XML and ActionScript are case sensitive. If your application is not working correctly, check for capitalization.
References
Resources
- Photo Credit Photos.com/Photos.com/Getty Images
