Displaying Images in Tooltip AS 3.0 Component
Updated: Aug 30, 2007
Views: 2677
Description: This tutorial will show you how to load and format image display with the Tooltip ActionScript 3.0 component.
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. If you need help doing this, please follow either the AddOwner Tutorial or Show/Hide Tutorial.
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 V - Formating the Image and Tooltip
Now, you need to format the Tooltip for the image. You can either have the Tooltip automatically size for the image or have the tooltip scale the image. You set these in the component inspector or parameters panel under the contentStyle field.
- scaleContent - if set to true will scale the image to fit within the width and height of the tooltip. If set to false it will leave the image at it's current size.
- autoSize - if set to true will automatically scale the tooltip to fit the entire image. If set to false, it will the leave the tooltip to the width and height of the instance of the tooltip.
- mantainAspectRatio - if set to true will keep the ratio of width:height as the image is scaled. If set to false, it will stretch the image to fit the tooltip's aspect ratio.
This can also be done through ActionScript:
myTooltip.contentStyle = {autoSize: true, scaleContent: false, maintainAspectRatio: false};
If you have any questions please post them on our forum.
Other Tutorials
