---

Introduction

ShopSite includes a large number of graphic images. All of the images that include natural language text must be translated. Other images may be candidates for translation because they include culture-based symbols, icons, and colors.

This document describes the techniques for translating text-based images.

---

Definitions

• Adobe LiveMotion – a Macintosh or Windows desktop application that can generate GIF or JPEG images from text in an HTML source file.

---

Using Adobe LiveMotion

Nearly all of ShopSite's graphics that include text are generated by LiveMotion from HTML files and LiveMotion templates. These graphics can be divided into two groups, based on whether the file name can be localized or not:

• Graphics with fixed file names are used within the ShopSite program, and the file names are never visible to merchants. The file names must stay in English for ShopSite to work with them.
• Others graphics are buttons that merchants can choose to use in their stores. Because the merchants see the file names for these buttons in a list, the file names should be localized into the merchants' language.

ShopSite Screen Graphics — fixed file names

The great majority of ShopSite's text-based graphics have fixed file names. Only the visible text is translated.

Here are the steps involved in translating an HTML file, generating the graphic files, and viewing these graphics. Perform these steps for each of the HTML files listed above.

1. Place the HTML file and the corresponding LiveMotion template file into an empty directory.
   
   
2. Open the HTML file (e.g., seller-buttons.html) in a text editor. (Do not use an HTML editor that modifies the HTML source.)
   
   
3. Locate text to be translated near the end of the HTML file. It will be similar to the following:
   
   <!--Adobe(R) LiveMotion(TM) DataMap1.0 DO NOT EDIT
   <?FPPI ObjId="seller_buttons" IsOrigTag="H3"IsOrigText="Add a Keyword" ?>
   <?FPPI ObjId="seller_buttons1" IsOrigTag="H3"IsOrigText="Add a Page" ?>
   ...
   end DataMap -->
   
   
4. Translate only the strings following the IsOrigText keyword (shown in red above).
   
   
5. Startup LiveMotion, and open the LiveMotion template file.
   
   
6. In LiveMotion's File menu, select Batch Replace HTML, and choose the HTML file edited in step #4. LiveMotion will generate GIF image files in a /images sub-directory. (LiveMotion also regenerates the HTML source file, preserving the original source file by changing its file extension to ".old".)
   
   
7. View the generated images by opening the HTML file in a browser.

ShopSite Sample Graphics — localized file names

The collection of ShopSite sample graphics have file names that are seen by merchants, so these file names are translated along with the visible text in the graphics.

Here are the steps involved in translating this HTML file, generating the graphic files, and viewing these graphics.

1. Place the HTML file and the corresponding LiveMotion template file into an empty directory.
   
   
2. Open the HTML file (i.e., sample-buttons-text.html) in a text editor or WYSIWYG Web page editor.)
   
   
3. The text to be translated is the button label strings in the two HTML tables. That is, translate only the text appearing between the following HTML tags:
   
   <h3>button string</h3>
   <h3 class="name">button string</h3>
   <h6>button string</h6>
   <h6 class="name">button string</h6>
   
   
4. Startup LiveMotion, and open the LiveMotion template file.
   
   
5. In LiveMotion's File menu, select Batch Replace HTML, and choose the HTML file edited in step #3. LiveMotion will generate GIF image files in a /images sub-directory. (LiveMotion also regenerates the HTML source file, preserving the original source file by changing its file extension to ".old".)
   
   
6. View the generated images by opening the HTML file in a browser.