Initiating the Tooltip Component through ActionScript
Updated: Aug 30, 2007
Views: 3394
Description: This tutorial will show you how to add the Tooltip component to a button using the ActionScript and the Document Class.
To get started, here is all of the code and an example of what we are going to build. More advanced users may only need to look at this example, while others might want to read below where I will go through the code and what each part of it does.
| |
Code used in this tutorial:
package {
import flash.display.Sprite;
import fl.controls.Button;
import com.afcomponents.tooltip.Tooltip;
public class DocClass extends Sprite {
function DocClass() {
addComponent();
}
private function addComponent():void {
var myButton = new Button();
this.addChild(myButton);
myButton.x = 100;
myButton.y = 100;
myButton.label = "Hello!";
var myTooltip = new Tooltip();
this.addChild(myTooltip);
myTooltip.autoShow = false;
myTooltip.content = "How you Doing?";
myTooltip.addOwner(myButton);
}
}
}
import flash.display.Sprite;
import fl.controls.Button;
import com.afcomponents.tooltip.Tooltip;
public class DocClass extends Sprite {
function DocClass() {
addComponent();
}
private function addComponent():void {
var myButton = new Button();
this.addChild(myButton);
myButton.x = 100;
myButton.y = 100;
myButton.label = "Hello!";
var myTooltip = new Tooltip();
this.addChild(myTooltip);
myTooltip.autoShow = false;
myTooltip.content = "How you Doing?";
myTooltip.addOwner(myButton);
}
}
}
Part II - Setting Up the Flash File
The first step is to create a Flash ActionScript 3.0 document and add an instance of the Tooltip component to the library. Open the Components panel (Window > Components) and drag the instance of the Tooltip component on to the stage. In the properties panel, define a Document Class as DocClass.
Part III - Adding Button and Tooltip to Our Library
The Next step is adding the Tooltip component and Button to our library. If it's not already, open the library (Window > Library) and the components panel (Window > Components). In the components panel under UI Components, drag the button component to the library panel. Also in the AF Components node, drag the Tooltip component to the library panel.
Part IV - Create the Document Class
To do this, we create a new ActionScript file (File > New) and save it in the same root directory as our flash file with the name DocClass. Past the following code.
package
{
//we import class to display a sprite, add a button, and add a tooltip
import flash.display.Sprite;
import fl.controls.Button;
import com.afcomponents.tooltip.Tooltip;
public class DocClass extends Sprite {
function DocClass() {
addComponent();
}
//this is our addComponent function that use to add a button, add a tooltip,
//change tooltip content, and add the button as an owner of the tooltip
private function addComponent():void {
//we create our new instance of a button and add it to the stage
var myButton = new Button();
this.addChild(myButton);
//we change the position and label of our button
myButton.x = 100;
myButton.y = 100;
myButton.label = "Hello!";
//we create a new instance of the tooltip
var myTooltip = new Tooltip();
this.addChild(myTooltip);
//we change parameters of our tooltip to not autoshow and
//change the content that is shown in tooltip
myTooltip.autoShow = false;
myTooltip.content = "How you Doing?";
//we then add the button as an owner which allows the
//tooltip to be seen on rollover and hidden on rollout
myTooltip.addOwner(myButton);
}
}
}
Part V - Publish Flash File
We save our document class ActionScript file and then in our Flash file we can publish our movie to our root directory.
If you have any questions please post them on our forum.
