New Component: Map_USA

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading ... Loading ...

Following on from previous articles: World Map and Import .svg, we have released a versatile component that depicts a map of the USA. The component allows user selection of the 4 map colors and border color. It also allows the user to adjust settings for the filter that is used during mouse over events.

User configurable stub scripting functions are provided to handle mouse events. These allow the map to be used as a selection tool. For example, to select a local dealership. The supplied sample mouse over script causes an inner glow filter to be enabled while the mouse is positioned over a specific state.

The map was derived from a .svg map in wikimedia commons and is shown as being free of copyright.

Downloads

The component will work with SWiSH Max4 and miniMax4 with build dates of 20110620 or later, although the component is not included with the 20110620 build’s installer, it can be downloaded here. After downloading, extract the files within the zip file to:

C:\Program Files\SWiSH Max4\Components\Shapes\2D\Shapes and Icons

Note that the exact location may be different depending on where you installed Max4, or miniMax4. We intend including the component in future releases of Max4 and miniMax4. On x64 systems, Max4 and miniMax4 are by default installed into C:\Program Files (x86)\…

Use

To use the component, drag it onto the stage and configure the parameters to your requirements. Additional functionality can be obtained by added script to the mouse stub functions. See the Stub Functions section below.

Parameters

Filter Settings

Filter Color

This defines the color of the inner glow filter that is applied when the mouse is over a specific state.

Blur

A filter parameter that defines the size of the glow area

Strength

A filter parameter that defines how strong the effect is

Colors

Restore

Restores the map to its default colors. (See below).

Color 1 .. Color 5

These define the 5 map colors. Color 2 defines the color of the borders.

Spare Colors

This group contains unused color swatches. Generally there is no need to use this group.

Advanced

This group contains advanced settings. Generally this section need not be modified. The Remap colors button allows the colors to be re-assigned. Use this button if you have recolored some of the states with a new color. The new color swatches will appear in the Spare Colors group.

Stub Functions

The map consists of individual shape objects that represent each state. A section of the outline tree is shown on the left. As spaces cannot be included in object names, states that have a name that includes a space such as “North Dakota” are named “North_Dakota” etc.

A function,  getDisplayName(s) converts the underscores to spaces for display.

For example, getDisplayNames(“North_Dakota”) returns the string “North Dakota”.

Each shape object has the following script:

onSelfEvent (load) {
    _parent.eventOnLoad(this);
}
onSelfEvent (rollOver) {
    _parent.eventOnRollOver(this);
}
onSelfEvent (rollOut) {
    _parent.eventOnRollOut(this);
}
onSelfEvent (press) {
    _parent.eventOnPress(this);
}
onSelfEvent (release) {
    _parent.eventOnRelease(this);
}
onSelfEvent (dragOver) {
    _parent.eventOnDragOver(this);
}
onSelfEvent (dragOut) {
    _parent.eventOnDragOut(this);
}

As can be seen, the script calls stub functions in the parent object (Map_USA).

The stub functions for the main movie clip are shown below:

function eventOnLoad(p) {
    // called by each of the state objects during the load event.
    // p is a reference to the calling object.
}
function eventOnRollOver(p) {
    // called by each of the state objects during a mouse over event.
    // p is a reference to the calling object.
    p.filters = [overfilter];    // show mouse is over the object by assigning the filter
}
function eventOnRollOut(p) {
    // called by each of the state objects during roll out event.
    // p is a reference to the calling object.
    p.filters = []; // show mouse no longer over by clearing the filter
}
function eventOnPress(p) {
    // called by each of the state objects during mouse click event.
    // p is a reference to the calling object.
}
function eventOnRelease(p) {
    // called by each of the state objects during mouse release event.
    // p is a reference to the calling object.
}
function eventOnDragOver(p) {
    // called by each of the state objects during the mouse drag over event.
    // p is a reference to the calling object.
}
function eventOnDragOut(p) {
    // called by each of the state objects during the mouse drag out event.
    // p is a reference to the calling object.
    p.filters = []; // show mouse no longer over by clearing the filter
}
function getDisplayName(s) {
    // remove the "_" from  any two word state names
    var i;
    var words = s.split("_");
    if (words.length == 1)
        return s;
    var ret = words[0];
    for (i=1; i<words.length; i++) {
        ret = ret add " " add words[i];
    }
    return ret;
}

import flash.filters.GlowFilter
onSelfEvent (load) {
    // create glow filter. This is used to indciate mouse over
    // events.
    var filtercolor = parameters.FilterColor & 0xFFFFFF;
    var filteralpha = parameters.FilterColor >>= 24;
    filteralpha &= 0xFF;
    filteralpha /= 255;    // should create a value 0..1
    var overfilter = new GlowFilter(filtercolor, filteralpha,
    parameters.Blur, parameters.Blur,
    parameters.Strength/100, 3, true, false);
}

The onSelfEvent (load) function is used to define the glow filter that is used in the mouseover event. The settings for the filter are obtained from the component parameters.

The stub function have the general format eventOnEventName(p) where EventName is the name of the event: Load, RollOver, RollOut, Press, Release, DragOver and DragOut. The user is free to modify these functions as needed.

The parameter p is a reference to the calling object. The object name can be obtained using p._name. This can be conveniently converted into a displayable string using the script: getDisplayName(p._name);

In a similar way other properties of the calling object are also available: p._x, p._y, p._xscale, p._rotation, p._visibility etc.

Sample script is supplied in the eventOnRollOver(), eventOnRollOut() and  eventOnDragOut(). This script adds or removes the inner glow filter according to email roll over status.

Example 1

The map shown at the beginning of this article displays the state names during the mouse over event.

The component was added to a blank movie and a dynamic text object was added named statename. The target checkbox was ticked.

The eventOnRollOver() stub function was modified to show the state name. The modified lines are shown in red:

function eventOnRollOver(p) {
    // called by each of the state objects during a mouse over event.
    // p is a reference to the calling object.
    p.filters = [overfilter];    // show mouse is over the object by assigning the filter
    _parent.statename.text = getDisplayName(p._name);
}

The eventOnRollOut() and eventOnDragOut() stub functions were modified to clear the displayed name.

function eventOnRollOut(p) {
    // called by each of the state objects during roll out event.
    // p is a reference to the calling object.
    p.filters = []; // show mouse no longer over by clearing the filter
    _parent.statename.text = "";
}

function eventOnDragOut(p) {
    // called by each of the state objects during the mouse drag out event.
    // p is a reference to the calling object.
    p.filters = []; // show mouse no longer over by clearing the filter
    _parent.statename.text = "";
}

The colors in the parameters panel were modified as follows:

  • Filter Color: 0xFFFF00
  • Color 1: 0xFF9900
  • Color 2: 0xFFFFFF
  • Color 3: 0xFFCC00
  • Color 4: 0xFFCC99
  • Color 5: 0xFF9966

Example 2

This example demonstrates modification of the eventOnPress() stub function. Clicking on any state will cause a draggable text box to be displayed that shows additional information about the state.

The Outline panel for the example is shown to the right.
The infonote movie clip contains a dynamic text object (info), a background shape (Rectangle_rounded) and an animated cross component (closenote) that is used as a close button.
In its default state the movie clip has its visibility set to false.
The infonote movie clip contains a function ShowInfo(s). This function displays the infonote movie clip, formats and displays data in the dynamic text object (info) based on the state name passed in the parameter s.
The ShowInfo() function is called by the line:
_parent.infonote.ShowInfo(getDisplayName(p._name));
In the eventOnRelease() stub function in Map_USA

The script for the infonote movie clip is shown below.

function ShowInfo(s) {
    // copies information from the parent data array to the note text
    if ("DC" == s) {
        info.text = "<b>Washington, D.C.</b>";
    } else {
        // fill in the state data
        var p = _parent.data[s.toUpperCase()]; // p is shortcut to data

        info.text = "<b>" add s.toUpperCase() add "</b> (" add p.abbrev add ")";
        info.text = info.text add newline add "<b>Capital:</b> " add p.capital;
        info.text = info.text add newline add "<b>Most populous city:</b> " add p.mostpop;
        info.text = info.text add newline add "<b>Population:</b> " add p.pop;
        info.text = info.text add newline add "<b>Size:</b> " add p.size add " sqmiles";
    }
    this._visible = true;
}
onSelfEvent (load) {
    this._visible = false;
}
onSelfEvent (press) {
    this.startDrag(false);
}
onSelfEvent (release) {
    this.stopDrag();
}

The onSelfEvent functions are used to set the movie clip to invisible and support dragging.

The information that is displayed is defined in the onSelfEvent (load) function of the main movie. This information is saved in the array “data”.
The data was obtained in spread sheet format from: http://www.tellingmachine.com/post/all-50-states-as-xml-json-csv-xls-files.aspx

Sheet 2 of the spreadsheet was modified to display the data as action script. The modified spreadsheet can be downloaded from here. The spread sheet demonstrates the useful technique of generating script from spread sheet data using spread sheet formulas. The line below shows the formula that was duplicated for all cells to create one line of code for each spread sheet entry.

="data["""&Sheet1!A2&"""]={abbrev:"""&Sheet1!B2&""",capital:"""&Sheet1!C2&""",mostpop:"""&Sheet1!D2&""",pop:"&Sheet1!E2&",size:"&Sheet1!F2&"};"

Once duplicated within the spread sheet, the following script is created:

data["ALABAMA"]={abbrev:"AL",capital:"Montgomery",mostpop:"Birmingham",pop:4708708,size:52423};
data["ALASKA"]={abbrev:"AK",capital:"Juneau",mostpop:"Anchorage",pop:698473,size:656425};
data["ARIZONA"]={abbrev:"AZ",capital:"Phoenix",mostpop:"Phoenix",pop:6595778,size:114006};
data["ARKANSAS"]={abbrev:"AR",capital:"Little Rock",mostpop:"Little Rock",pop:2889450,size:53182};
data["CALIFORNIA"]={abbrev:"CA",capital:"Sacramento",mostpop:"Los Angeles",pop:36961664,size:163707};
...
data["WASHINGTON"]={abbrev:"WA",capital:"Olympia",mostpop:"Seattle",pop:6664195,size:71303};
data["WEST VIRGINIA"]={abbrev:"WV",capital:"Charleston",mostpop:"Charleston",pop:1819777,size:24231};
data["WISCONSIN"]={abbrev:"WI",capital:"Madison",mostpop:"Milwaukee",pop:5654774,size:65503};
data["WYOMING"]={abbrev:"WY",capital:"Cheyenne",mostpop:"Cheyenne",pop:544270,size:97818};

This script is then copied / pasted into the onSelfEvent (load) function of the main movie. With minor script changes it could have been pasted into the onSelfEvent (load) function of infonote which is probably a better place for the data.

Downloads

Both of the example files can be downloaded in this zip file.

I hope you enjoy using this new component.

 

 

 

Tags: , , ,

2 Responses to “New Component: Map_USA”

  1. [...] na blog.swishzone.com pojawił się komponent mapy USA z podziałem na poszczególne stany. Jako, że Polacy nie gęsi i [...]

  2. [...] (po mapie województw Polski) komponent zbudowany na bazie wpisu blog.swishzone.com, tym razem mapa zwiera państwa członkowskie Unii [...]


Switch to our mobile site