Displaying Images in Tooltip Component
Updated: Apr 23, 2008
Views: 2294
Description: This tutorial will show you how to load and format image display with the Tooltip
Part I - The Completed Project
To get started, here is an example of what we are going to build.
Part II - Setting Up the File and Adding Tooltip to a Button
The first step is to create a document, add a button and an instance of the Tooltip component. Also you would need to add the Tooltip to the rollover states of the button.
Part III - Setting Parameters of Tooltip for Images
Select the instance of the Tooltip on stage, and using the component inspector (Window > Component inspector) or parameters panel (Window > Properties -> parameters) set the following parameters of the instance of the Tooltip:
This is again done in the component inspector or parameters panel, set the content field to the URL of the image. This can also be done in ActionScript with the following code:
Part VI - Setting up RollOver/Out Events
We will be using Mouse RollOver and RollOut events to show and hide the Tooltip. In the script we have also set the tails to change side depending on which movie clip or button you are on.
This can also be done through ActionScript:
To get started, here is an example of what we are going to build.
Part II - Setting Up the File and Adding Tooltip to a Button
The first step is to create a document, add a button and an instance of the Tooltip component. Also you would need to add the Tooltip to the rollover states of the button.
Part III - Setting Parameters of Tooltip for Images
Select the instance of the Tooltip on stage, and using the component inspector (Window > Component inspector) or parameters panel (Window > Properties -> parameters) set the following parameters of the instance of the Tooltip:
- type: image
This is again done in the component inspector or parameters panel, set the content field to the URL of the image. This can also be done in ActionScript with the following code:
myTooltip.content= "images/logo.gif";
Part VI - Setting up RollOver/Out Events
We will be using Mouse RollOver and RollOut events to show and hide the Tooltip. In the script we have also set the tails to change side depending on which movie clip or button you are on.
This can also be done through ActionScript:
import flash.filters.BlurFilter;
button_btn.onRollOver = function (){
myTooltip.type = "image"
myTooltip.position = "right";
myTooltip.content = "http://www.afcomponents.com/content/images/layout/logo.gif";
myTooltip.showTooltip();
}
button_btn.onRollOut = function (){
myTooltip.hideTooltip();
}
button_1_btn.onRollOver = function (){
myTooltip.type = "image";
myTooltip.position = "left";
myTooltip.content = "http://www.afcomponents.com/content/images/layout/logo.gif";
myTooltip.showTooltip();
}
button_1_btn.onRollOut = function (){
myTooltip.hideTooltip();
}
button_btn.onRollOver = function (){
myTooltip.type = "image"
myTooltip.position = "right";
myTooltip.content = "http://www.afcomponents.com/content/images/layout/logo.gif";
myTooltip.showTooltip();
}
button_btn.onRollOut = function (){
myTooltip.hideTooltip();
}
button_1_btn.onRollOver = function (){
myTooltip.type = "image";
myTooltip.position = "left";
myTooltip.content = "http://www.afcomponents.com/content/images/layout/logo.gif";
myTooltip.showTooltip();
}
button_1_btn.onRollOut = function (){
myTooltip.hideTooltip();
}
