Fireworks Article

Creating a custom rich text editor Flex 2 component with Fireworks CS3

Organizing and preparing the project files

Let's get started by setting up the project files. Download the sample files provided at the beginning of this article and uncompress the ZIP archive. Notice that the sample files are separated into two folders: the starter files and the completed version of the project.

Next copy the two files from the Starter_files folder (RichTextEditor.graphic.png and RichTextEditor.jsf) to the following location, based on your operating system:

• Windows: C:\Documents and Settings\[User]\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
• Mac OS: HD\Users\[User]\Library\Application Support\Adobe\Fireworks CS3\Common Library\Custom Symbols

Now you're ready to launch Fireworks CS3. Make sure you are working with this version of Fireworks.

Note: When you modify the starter JSF script file, be sure to remove the old symbol instance from the Library panel and click the Reload icon command from the Common Library panel. This will allow any script modifications to be reflected in the Symbol Properties panel.

From the default Fireworks CS3 splash screen, click Create New > Fireworks Document (PNG) or select File > New. Create a document large enough to contain the custom graphic symbol. For this example, the Canvas is set to 550 width x 500 height with a white Canvas color (see Figure 1). Click OK.

Figure 1. Fireworks document property values corresponding to the default Flex 2 application properties

At this point, it is helpful to arrange the panels in Fireworks to easily access the items you'll need. Select Window > Common Library (or press F7) to display the Common Library panel. Then select Window > Library (or press F11) to also display the Library panel. Finally, select Window > Symbol Properties to display the Symbol Properties panel.

Activate the Common Library panel by clicking its title bar and review the list of available rich symbols. You can double-click the Flex Components folder to expand its list of default symbols. If you double-click the Custom Symbols folder, you'll see the new RichTextEditor graphic symbol (see Figure 2), which was added to the Fireworks CS3 Common Library when you copied the files from the Sample_files folder into the Custom Symbols directory.

Figure 2. RichTextEditor symbol in the Common Library panel

Now that you've successfully added RichTextEditor to the Common Library, proceed to the next section of this tutorial and begin customizing the symbol.

Page 2 of 6

Previous Page

Next Page