Create a sitemap icon using reusable rich symbols

Organize objects to create a symbol with properties

Let’s get started:

1. Open the sample file, sitemap_sample.png.
2. Choose Window > Pages to open the Pages panel. Click the icon design page (see Figure 1).

    

   

   (+) view larger
   Figure 1: Click icon design on the Pages panel to open the icon design page.

3. Double-click each symbol, and give the text fields within each one unique names using the Property inspector. Make sure that there is no white space between the words that you use, as demonstrated in the source files for this tutorial.
   
   

   Note: This step is very important, because the names you enter will be referenced in the JavaScript that controls the symbol properties. For example, when I created a text field for the text object in my example, the default name was {} because that’s what I entered for the text object. I gave the text object the descriptive name, docType.

4. Choose Select > Select All, and then choose Modify > Symbol > Convert To Symbol. Select Save To Common Library in the Convert To Symbol dialog box and click OK (see Figure 2). In the Save As dialog box, go up one level to the Common Library folder and create a new folder called mysitemap. Save the symbol in that folder and name it page icon.

    

   

   Figure 2: Select Save To Common Library in the Convert To Symbol dialog box.

   You'll notice the symbol was removed from your document. No fear, it’s simply been moved to the Common Library, which we will be accessing in the next section. This allows you to access this symbol from multiple documents.

Page 2 of 4

Previous Page

Next Page