This component allows you to easily add a rotating map of the world to your website.

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\3D

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.

Parameters

The component is based on the Lens component. Most of the complex parameters for the Lens component have been moved to the Advanced Group leaving the user with six main parameters: Diameter, Speed, Start Paused, three Colors and an option to Disable Color Mapping. The use of most of the parameters should be self explanatory.

User chosen colors are set using an internal (scripted) color matrix filter. The filter maps the three map colors, Red, Green and Blue to the user chosen colors. If more than three colors are required, a custom colored map along with the Disable Color Mapping option should be used. See the section Custom Maps below for more information.

The parameters in the Advanced Group will work in the same way as described for the Lens component. However for use as a rotating map, those parameters generally need not be modified. For small diameter maps, less than 100pixels, it may be necessary to reduce the value of the Strength parameter.

The map rotation can be manually started or paused using the script:

world_map_animated.stop() and world_map_animated.play() where world_map_animated is the name of the component in your movie. (The default name is assumed).

Example

The example shown above, World_map_example.swi, is included in this zip file. In addition to the world_map_animated component, the example file uses an inner glow filter to apply a blue halo around the inside edge. To increase contrast an outer glow filter is used to create the black shadow. Without the use of these filters, the map can appear flat and the edges pixelated as shown in the image below.

As the component uses a color matrix filter internally to map the user chosen colors, it is necessary to wrap the component in a movie clip before applying additional filters. Filters applied directly to the component, will have their color altered by the internal color matrix filter.

The Outline panel for the example movie is shown to the right. The inner glow filter is applied to the movie clip “inner” and the outer glow filter is applied to the movie clip “outer“. More information about Filters can be found in this blog article.

The Component button, Button_pause is grouped within the outer movie clip so that it also has the outer glow filter applied to it.

The button is used to start and stop the rotation with the following script that is also located within the outer movie clip.

function Events(n,v) {
    if ("Button_pause" == n) {
        // event caused by pause button
        if (v) {
            inner.world_map_animated.stop();
        } else {
            inner.world_map_animated.play();
        }
    }
}

The component is accessed as inner.world_map_animated as it is contained within the inner movie clip.

Analysis

The description below summarizes how the component works. A basic understanding is required if you intend to use the Custom Maps described below.

The movie shown above shows the component without masking. As can be seen, two copies of the world map are moved under the lens. To minimize load times, a single copy of the map is saved to the Content Library and two instances of the map are placed side by side in the container movie clip. Two copies of the map are used to give a continuous display. Once the maps have been moved by the length of a single map, the container movie clip is returned to its original position.

The map is colored using only Red (0xFF0000), Green (0x00FF00) and Blue (0x0000FF). Red is used for the borders, Green for the land and Blue for the ocean. The use of the three primary colors allows the three regions to be mapped to user chosen colors using the internal color matrix filter.

Custom Maps

By altering the default map it is possible  to increase the number of available colors or change the assignment of the Red, Green and Blue colors.

The component uses a copyright free world map obtained from wikipedia. This map in .svg format was edited in Inkscape to color the outlines (borders) to be Red, Land to be Green and the Ocean (background) to be Blue. The modified file was then saved as a .png file.

Once saved as a png file, further editing was required in Microsoft Paint to fill in the frame lines that were introduced during the export to png. The image was then re sized to be 1183×600 which is the map size expected by the component.

The resulting file was then imported into Max.

If required, a custom color map could be created using Inkscape and the source .svg file described above.

To import a different map, go to the content panel select the Library radio button. To open the content editor, double click on the world_map shape.

In the Properties panel, select the fill icon () then choose the open image icon () to load a different image.

Take care to ensure that the new image is 1183×600 in size.

If a line is visible where the images join, it is possible that the frame line has not been correctly removed from the image. If this is the case, re-open the image in paint and examine in detail the color of the pixels around the edge.

Once the image has been loaded, close the content editor using the close button ().

Sample maps are included in this zip file:

• world_map_redborders_1183x600.png: This is the map included with the component. Land areas are colored Green, 0x00FF00. Ocean areas are colored Blue, 0x0000FF and borders are colored Red, 0xFF0000. This map allows the land, ocean and borders to be colored according to user choices.
  
• world_map_rgb2_1183x600.png: This alternate map has the land areas and borders colored 0x00FF00 (100% green), the ocean colored 0x0000FF (100% blue) and Antarctica colored 0xFF0000 (100% Red). This allows Antarctica to be colored differently from a normal land mass (eg. white).

Other Effects

By selecting a transparent sea and / or border color, some interesting effects can be obtained with the use of filters and alternate backgrounds. Some of those are shown in the example below.

The Example file, WorldMap_Example2.swi, is included with the main example zip file (link is in the Example section).

Notes

The content library and filters are not available in mini Max. Users of that products will be unable to alter the filter settings or modify the background map.

Do not alter the Transform / Reference point of the component. If the point is altered, the lens filter will be applied to the wrong position of the world map. This will cause the map to appear flat.

Tags: Globe, lens, map, World, World Map

This entry was posted on Monday, March 26th, 2012 at 9:09 am and is filed under 3D Models, Beginner, components, Max4, miniMax4, Swishmax 4. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.