U.S. Maplinks v1.0 – Interactive Flash Map Utility Help Guide
Description:
U.S. Maplinks is an easy to use flash map widget with customizable links for all 50 states. It also features other customizable properties like color, text, tool tip, etc.
Customizations are done through an easy to edit external XML file and loaded during runtime without having to edit or rebuild the flash file.
Also, Maplinks is built in Adobe CS3 with actionscript 3.
Directions for customizations:
To edit the properties of the map, open up the states.xml file.
In the xml file, you will see 3 different types of xml nodes, labeled states, tooltip, and state. In the root states node, you can customize global attributes and properties for everything all at once. For example, if you want to change all 50 states’ text color to black, you can just specify
In the tooltip node, you can customize all the properties of the tooltip that appears when the mouse cursor hovers over a certain state, including enabling/disabling of the tooltip.
And finally, the 50 individual state nodes represent customizable properties of each state. Through these 50 nodes, you can customize each state in a individual way. For example, if you just want the text color of California to be red, you can use
The following 3 tables below list a more detailed description of all the customizable attributes/properties for each type of XML node.
1 Table 1.1 –
Attribute Name Description Default Possible Values Value displayAbbrev To enable or disable true true, false the state abbreviation text. displayFade To enable or disable true true, false the mouse over fade effect. target The name of the _self _blank, _self, target window or _parent, _top, frame in which the yourframename, links open to. It yourwindowname behaves in the same way as html tag’s target attribute. textColor The state abbreviation 0x000000 RGB color value text’s color. in the format 0xRRGGBB. hoverTextColor The state abbreviation 0xFFFFFF RGB color value text’s color when the in the format mouse cursor is 0xRRGGBB. hovered over the state. stateColor The background color 0xFFFFFF RGB color value of states. in the format 0xRRGGBB. hoverStateColor The background color 0x000000 RGB color value of states when the in the format mouse cursor is 0xRRGGBB. hovered over the states. borderColor The color of the 0x999999 RGB color value states’ border in the format 0xRRGGBB.
2
Table 1.2 –
Attribute Name Description Default Value Possible Values display To enable or true true, false disable the appearance of the tooltip. displayTransparency To enable or false true, false disable transparency background for the tooltip box. displayBorder To enable or true true, false disable the appearance of the tooltip’s border. textColor The text color of 0x000000 RGB color value the tooltip. in the format 0xRRGGBB. bgColor The background 0xFFFFCC RGB color value color of the tooltip in the format box. 0xRRGGBB. borderColor The border color 0x999999 RGB color value of the tooltip. in the format 0xRRGGBB.
3 Table 1.3 – Individual
Attribute Name Description Default Possible Values Value abbrev The state’s N/A A valid state abbreviation text.* abbreviation. link The link associated none Any valid url. with a state. target The link target _self _blank, _self, associated with a _parent, _top, state. If specified, the yourframename, value will take yourwindowname precedence over the global target value. tooltipText The tooltip text N/A Any valid string associated with a value. state. tooltipType The tooltip location bottom_right top_left, relative to the mouse top_right, cursor. bottom_left, bottom_right textColor The abbreviation text 0x000000 RGB color value color for a state. in the format 0xRRGGBB. hoverTextColor The abbreviation text 0xFFFFFF RGB color value color when the mouse in the format cursor is hovered 0xRRGGBB. over the state stateColor The background color 0xFFFFFF RGB color value associated with a in the format state. 0xRRGGBB. hoverStateColor The background color 0x000000 RGB color value when the mouse in the format cursor is hovered 0xRRGGBB. over a state.
* abbrev is the only attribute required and cannot be edited or removed.
4 Directions for site usage:
To use the maplinks flash widget within your site, simply embed the swf file within your html page. Also within the html page is where the background color of the map and the size of the map can be edited. In changing the size of the map, please make sure that decreasing/increasing the width and height values proportionally. By default, the width is 470 pixels and the height is 330 pixels.
The necessary files to upload to your server for maplinks to work are the following:
• swf file • states.xml file • html file • Any necessary javascript file used to embed flash file like swfobject.js or AC_RunActiveContent.js, depending on your personal preference.
Note: Please do not upload the maplinks.fla file or any files under the src directory.
Directions for editing flash source files:
In the case when you have to edit and republish the maplinks.fla file, you will have to change the classpath for your development environment. To change the classpath in Adobe Flash CS3:
• Open up the maplinks.fla file. • Go to Edit > Preferences > ActionScript. • Under language, click on the ActionScript 3.0 Settings button. • Click on the “Add New Path” plus button. • Click on the “Browse To Path” bull’s eye button. • Browse to the location where you have saved the unzipped file’s src directory to. • Click the OK button to confirm.
Contact Information:
For any further questions regarding this flash widget, please email me at [email protected]
5