Adobe 38039927 Extended User Guide - Page 279

275 Chapter 8: Auto Shapes Auto Shapes are vector objects that contain information about how the user can interact with them on the screen. Auto Shapes appear in the Adobe Fireworks user interface as "Auto Shapes" but are programmatically called smartShape objects in the JavaScript code that constructs them. For example, a spiral shape consists of relationships among several smaller objects. A spiral Auto Shape contains additional properties that enable the user to adjust the appearance (stretch, distort, tighten the curve) of the whole spiral by clicking and dragging control points. For more information about user interaction with Auto Shapes, see Using Fireworks Help. You can also find articles about using autoshapes on the Fireworks Developer Center at www.adobe.com/go/fireworks_devnet. How Auto Shapes work You can define an Auto Shape entirely in JavaScript. Auto Shapes installed with Fireworks are located in the Configuration/Auto Shapes folder and the Configuration/Auto Shape Tools folder of the installation directory. The JSF files in this directory contain the JavaScript for each Auto Shape. You can open the files in an editor to see the script for each shape. The Auto Shape file contains a collection of functions that handle the communication between Fireworks and the Auto Shape object (for more information, see "Handling the user interaction" on page 278), define the properties of the Auto Shape, and provide supporting functionality (such as adding other shape objects or performing calculations) as the user manipulates the Auto Shape. The Auto Shape file also contains control points and properties (stroke, fill, color, and so on) that define the shape's behaviors, appearance, and effects. The points and functions defined in an Auto Shape file use the SmartShape Class and its properties and methods (for more information, see "SmartShape object" on page 241). Auto Shapes comprise any number of vector objects including open and closed paths and text (currently, nested Auto Shapes are not supported). An Auto Shape can control a bitmap that has been imported into the document; however, Fireworks cannot save a bitmap graphic as an Auto Shape on the user's drive. You can create Auto Shape icons for the Tools panel or Auto Shapes panel in PNG, JPG, or GIF format. For the Tools panel, the icon image should be 16 x 16 pixels (if the image is larger than 16 x 16 pixels, Fireworks scales the image to fit in the Tools panel). For the Auto Shapes panel, the Auto Shape icon should be 60 x 60 pixels. If the image for the Auto Shapes panel is smaller, or larger, than 60 x 60 pixels, Fireworks will not scale the image-the icon will appear centered in its cell, but not sized to fit, so it may appear cropped if it is too large. Note: If the icon is missing (or named incorrectly) then Fireworks does not display an icon. However, if the Auto Shapes folder has an icon with the same name as a shape in the Auto Shape Tools folder, then that icon will be used in the Tools panel. Creating an Auto Shape To create an Auto Shape, you need to define a series of properties for the shape, define the shape's control points, and write functions that tell Fireworks how to handle the Auto Shape as the user interacts with the object (for more information, see "Handling the user interaction" on page 278).