This article explains how to design a professional-looking flash file using the famous freely downloadable AnyMap add-on for Xcelsius.
A multitude of opportunities exisit for using AnyMap in Xcelsius. Typically we want to embed an interactive system like a layout for a car park, airport, or a typical regional map - see Figure 1 for an example. Using AnyMap we’ll be able to show different information with a mouse over or a mouse click.
The idea here is to explain the challenges that typically appear in Xcelsius, such as speed, image resolution and accuracy, and to demonstrate that by using AnyMap we can optimize them all.
Using the AnyMap add-on
Without the use of AnyMap, an Xcelsius designer can start using single image components, locating them carefully and using dynamic buttons together with the show and hide feature.
When we do this, there is a clear performance issue: the flash file takes some time to handle regions and data. To optimize this behavior, the quality of the image can be reduced; but this results in a less professional look and feel. Moreover, and especially for maps, there is no button component that fully adapts to regions, so users may be annoyed by the fact that they don’t get a response when clicking on the borders of the regions.
The objective of AnyMap is to offer new features to Xcelsius designers that make professional geo-mapping possible, enhancing performance and reducing post-project maintenance costs.
Image resolution, speed and accuracy
The best option is to place your template outside the AnyMap component, because the embedding option sometimes distorts the image quality. A high quality .jpg is better than a huge .bmp, as we want to keep the flash file size small.
High performance and accuracy are achieved using an .svg file that contains the closed perimeters of all areas and their names. This step is key and involves 1/3 of the effort for the project. This can be done using a tool called GIMP (as recommended and explained in the AnyMap manual). An .xcf source will be created and right after saved into an .svg file
This approach using one single template makes the system incredibly fast because one area item is handled instead of many items. It also improves accuracy as every pixel inside the region is sensitive to mouse moves and clicks.
AnyMap configuration and formatting
Once we have the .svg file, AnyMap is very easy to configure:
- Define .svg file: The file will be located in the same flash file folder, and no path is needed.
- Display data: Typically a column with the names of the regions might be provided, together with the mouse-over texts that we need to show and a selected region key in case of mouse clicking.
- Mouse over color change effect: As a sample, turn transparency to 10% and create an alert with a grey color.
A fully configurable system that shows different texts with the move of the mouse and changes the value of a cell according the clicked area has to contain the following information (at minimum), as shown in Figure 3:
Using a typical lookup Excel function we can change the value of a cell according to a click, and show/hide other components according to this value, or change a text from an existing text component.
Unfortunately the formatting is very rigid and limited in this component. But a workaround for this is to use the HTML capability so the content of a cell is a text in itself. We can therefore change font, size, manage paragraphs and embed images in our texts, to make them look absolutely professional.
Conclusion
The methods explained in this article prove that although this product is not supported by SAP BusinessObjects it can be used by developers (at your own risk of course) in a very beneficial way. It can save a lot of man-hours and offer features that the out-of-the box Xcelsius software doesn’t yet provide.