Advanced Flash Components

Working with InfoWindow: Advanced Styling

Updated: Feb 26, 2008 Views: 3243

Description: This tutorial will cover the advanced styling of an info window. We will learn how to add a scroll bar, use html text and style it using a style sheet, add an image, and change the appearance of the drop shadow.

The Complete Project

Complete Code

import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.styles.InfoWindowStyle;
import com.afcomponents.umap.styles.TextStyle;
import com.afcomponents.umap.display.InfoWindow;
import com.afcomponents.umap.types.Size;
import com.afcomponents.umap.styles.DropShadowStyle;
import fl.controls.UIScrollBar;

// define info window style
var infoStyle:InfoWindowStyle = new InfoWindowStyle();
infoStyle.fill = "rgb";
infoStyle.fillRGB = 0x000000;
infoStyle.fillAlpha = .65;
infoStyle.strokeRGB = 0xFF66CC;
infoStyle.strokeAlpha = .6;
infoStyle.closeRGB = 0x6699FF;
infoStyle.closeAlpha = .6;
infoStyle.radius = 3;

//Sets Scroll Bar in Info Window
InfoWindow.setScrollBarClass(UIScrollBar);
infoStyle.scroll = true;
infoStyle.maxSize = new Size(300, 150);
infoStyle.autoSize = InfoWindowStyle.AUTO_SIZE_SIDE;

//Style Title in Info Window
var infoTitleStyle:TextStyle = new TextStyle();
infoTitleStyle.textFormat.bold = true;
infoTitleStyle.textFormat.color = 0xFFFFFF;
infoTitleStyle.textFormat.font = "verdana";
infoTitleStyle.textFormat.size = 18;
infoStyle.titleStyle = infoTitleStyle;

//Turn on Html and use a style sheet to style content text
infoStyle.contentStyle.html = true;
infoStyle.contentStyle.styleSheet = new StyleSheet();
infoStyle.contentStyle.styleSheet.setStyle("html", {fontFamily:"arial", fontSize:12, color:"#CCCCCC"});

//Style Drop Shadow
var shadowStyle:DropShadowStyle = new DropShadowStyle();
shadowStyle.blurX = 5;
shadowStyle.blurY = 5;
shadowStyle.alpha = .5;
shadowStyle.angle = 20;
shadowStyle.color = 0xFF6699;
shadowStyle.distance = .5;
infoStyle.shadowStyle = shadowStyle;

//Define the Parameters of our Info Window
var param:Object = new Object();
param.title = "My Map";
param.content = "Lorem ipsum dolor sit amet <img src='http://www.afcomponents.com/content/images/layout/logo.gif'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
param.position = new LatLng (20, 0);
param.autoClose = false;

//Open our Info Window
umap.openInfoWindow(param, infoStyle);

Setting up the UMap and Adding Info Window

To begin this tutorial make sure that you have successfully installed the Umap component and dragged an instance onto the stage. Make sure that you give the component an instance name of umap.

Also make sure you have reviewed the Getting Started: Adding Info Window to UMap tutorials and have a basic understanding of how to add a info window to the stage and create a style object that will change the appearance of your info window.

Overview of this Tutorial

In this tutorial we will cover some more advanced styling of info windows.

First, we will create a style object and apply that to our info window that we will open.
Next, we will tell our info window to use a scroll bar if content is bigger then max size we set.
We will then style our title text using a text style object.
Our content text we will set to html and style using a style sheet.
Next, we will style our drop shadow.
We will then create our parameters object where we define our content and include an image in there.
Lastly, we will open our styled info window.

Basic Styling Appearance of Info Window

The first thing that we are going to do is create our info window style object and set a few properties of it. The following steps all require the creating the info window style object for the rest to work. You do not have to have to set the other properties if you don't desire. For more see the com.afcomponents.umap.style.InfoWindowStyle class in the API Documentation.

// define info window style
var infoStyle:InfoWindowStyle = new InfoWindowStyle();
infoStyle.fill = "rgb";
infoStyle.fillRGB = 0x000000;
infoStyle.fillAlpha = .65;
infoStyle.strokeRGB = 0xFF66CC;
infoStyle.strokeAlpha = .6;
infoStyle.closeRGB = 0x6699FF;
infoStyle.closeAlpha = .6;
infoStyle.radius = 3;

Use a Scroll Bar in Info Window

We are also going to tell our info window to use a scroll bar if the content is large then the max size we set and we also want our info window to resize to this max size. For this step to work the UIScrollbar component that comes with flash needs to be added to your library. You can find it in the components panel (Window > Components > User Interface) and then drag an instance of it your library (Window > Library).

//Sets Scroll Bar in Info Window
InfoWindow.setScrollBarClass(UIScrollBar);
infoStyle.scroll = true;
infoStyle.maxSize = new Size(300, 150);
infoStyle.autoSize = InfoWindowStyle.AUTO_SIZE_SIDE;

Styling Our Title Text with Text Style Object

Next, we need to still add our title text. We do this by creating a text style object and setting a few properties of it. For more see the com.afcomponents.umap.styles.TextStyle class in the API Documentation

//Style Title in Info Window
var infoTitleStyle:TextStyle = new TextStyle();
infoTitleStyle.textFormat.bold = true;
infoTitleStyle.textFormat.color = 0xFFFFFF;
infoTitleStyle.textFormat.font = "verdana";
infoTitleStyle.textFormat.size = 18;
infoStyle.titleStyle = infoTitleStyle;

Using HTML Text in Content and Styling with A Style Sheet

Next, we will take a different approach on the content text styling. We want to use html in this example and to style this we will use a style sheet and format our text that way.

//Turn on Html and use a style sheet to style content text
infoStyle.contentStyle.html = true;
infoStyle.contentStyle.styleSheet = new StyleSheet();
infoStyle.contentStyle.styleSheet.setStyle("html", {fontFamily:"arial", fontSize:12, color:"#CCCCCC"});

Changing the Drop Shadow Style

We also want to change the drop shadow for our info window. We do this by creating a new drop shadow style object and setting a few properties of it. For more see com.afcomponents.styles.DropShadowStyle class.

//Style Drop Shadow
var shadowStyle:DropShadowStyle = new DropShadowStyle();
shadowStyle.blurX = 5;
shadowStyle.blurY = 5;
shadowStyle.alpha = .5;
shadowStyle.angle = 20;
shadowStyle.color = 0xFF6699;
shadowStyle.distance = .5;
infoStyle.shadowStyle = shadowStyle;

Creating Parameters Object with Image in Content and Open Info Window

Lastly, we need to create our parameters object and set the info window position, title, and content. We will include an image inside of info window content using html. Lastly, we to open our info window with our parameters and info window style object.

//Define the Parameters of our Info Window
var param:Object = new Object();
param.title = "My Map";
param.content = "Lorem ipsum dolor sit amet <img src='http://www.afcomponents.com/content/images/layout/logo.gif'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
param.position = new LatLng (20, 0);
param.autoClose = false;

//Open our Info Window
umap.openInfoWindow(param, infoStyle);

NOTE: Don't Forget to Import Classes

Component Info

UMap (AS 3.0)

Knowledge Base

Forum