We had a request asking how to make Polygon Hotspots Multilingual.
So I thought I would share the project which can be found below.
Firstly this project has two languages, English and German but it will be able to have as many as you require.
There is also a text variable that changes the text in the buttons/text boxes.
The text boxes also have text logic blocks to change the text when the variable is changed.
Please see this simple Example.
Open a project and add the first Polygon hotspot, this will be the English Hotspot and will have its Hotspot ID changed, I am using Poly_EN. All the English Polygon Hotspots will have the same ID, Poly_EN.
- 1.png (15.62 KiB) Viewed 3619 times
Once the Polygon Hotspot has been added to the project open the List View panel and right button click the Polygon Hotspot and copy. Then Right button click and paste.
- 2.png (31.57 KiB) Viewed 3619 times
In the copy change the Polygons ID to reflect the language it will be in, this project is using Poly_DE.
- 3.png (16.38 KiB) Viewed 3619 times
Do this for each Polygon Hotspot so you have a copy for each language.
Add the HTML5 output and under the Hotspots tab set the Polygon Hotspots View Mode to Disabled
- 4.png (46.33 KiB) Viewed 3619 times
Open the skin editor and add a text variable, I am using the name: var_lang.
- 5.png (15.36 KiB) Viewed 3619 times
Now add two text boxes to the skin, these which will be the two buttons that will change the language.
They have the ID's "en" and "de". There is also a container around them with the ID "language".
The container "language" has the action:
- 6.png (43.01 KiB) Viewed 3619 times
What this does is on output open, will show the Poly_EN Hotspots while the Poly_DE Polygon Hotspots are hidden.
For the buttons that change the languages, they have three actions each.
Looking at the English Language button the actions are:
- 7.png (40.74 KiB) Viewed 3619 times
This action hides the Poly_DE Polygon Hotspots if they were showing. If your project has many languages then you would need more actions like this to hide all the other languages other than the one this button will show.
You can also use regular expressions so this one button can hide many.
The next action:
- 8.png (40.96 KiB) Viewed 3619 times
This action shows the Poly_EN Hotspots.
The next action:
- 9.png (37.1 KiB) Viewed 3619 times
This action changes the variable vale to change the text in the buttons.
The text box loci block looks like this:
- 10.png (91.11 KiB) Viewed 3619 times
If you are using flag graphics, you can use the variable to change the Alpha of the non-active language to fade it out slightly or change its scale as an example.
In the text box properties, select the logic block (1)
Then select the Trigger which is the variable (2)
Now set the text so when "en" is the value the text will be in English.
Then add another expression and set that so when the value is "de" the text will be in German.
As you can see you can keep on adding different languages if you need more.
The text box with the ID "de" will have the actions swopped around.
So the button will hide Poly_EN, then show Poly_DE and change the variable to "de".
Save and close the skin and then build the output.
This project shows the Polygon Hotspots so you can see them. If you want them still clickable but not visible, then you will need to go back the HTML5 output and Hotspots tab.
Open the colour picker for the Hotspots Background colour (1) and set the Alpha to 0 (2) then do the same for the Border Colour (3).
- 11.png (184.25 KiB) Viewed 3619 times
Regards,