Fireworks Article

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

Customizing the RichTextEditor symbol

In the previous section of this tutorial, you updated the Common Library to include a new symbol called RichTextEditor. Now you can begin editing the symbol to create a custom Flex 2 component. Start by adding the RichTextEditor symbol to the Canvas.

Drag and drop the Custom Symbols > RichTextEditor symbol onto the Canvas of the new document. In the Layers panel you'll see a graphical representation of the Flex 2 Rich Text Editor control and a single Layer 1 element titled "RichTextEditor" (see Figure 3).

Figure 3. RichTextEditor symbol on the Canvas (left) and Layers panel displaying a small icon of the symbol with a layer element in Layer 1 (right)

Double-click the RichTextEditor symbol to view the individual Fireworks symbol/widget elements; the Layers panel will display the corresponding symbol elements.

The Fireworks CS3 rich symbol/widget elements represent some (if not all) of the user-based element interactivity via the new Symbols Property panel. The symbol/widget elements of the rich symbol provide direct access to updating interactions with specific properties and/or styles of a particular Flex 2 visual component.

In this example, you can edit the symbol's elements to update the Rich Text Editor. The RichTextEditor symbol is comprised of four elements, listed the Layers panel (see Figure 4).

1. Bitmap symbol/widget Layer element is simply the background graphic and is a noninteractive element

   Note: The RichTextEditor Flex 2 component is a complex control with many subcontrols (TextArea, Container, Buttons, ColorPicker, HBox, and TextInput). For the purposes of this tutorial, the simple bitmap image provided in the downloadable sample files is sufficient. You can use the drawing tools to create your own background image for the interface of the Rich Text Editor Flex component, as desired.

   However, the next three Layer 1 symbol elements are Fireworks text objects that can be updated to provide user interactivity.

2. title symbol element corresponds to the control Label
3. htmlText symbol element is an interactive property and reflects the TextArea subcontrol of the Rich Text Editor
4. defaultLinkProtocol symbol element reflects the default linkProtocol TextInput subcontrol of the Rich Text Editor

Figure 4. Double-clicking the RichTextEditor symbol to identify individual elements

Click Done at the top of the Edit Symbol window pane to exit and return back to document view.

After examining the elements in the symbol, you are ready to create or edit the starter script so that the three Fireworks text object elements can be configured through the Symbol Properties panel (see Figure 5).

Figure 5. Symbol Properties panel (right) for adding interactivity to the text object elements in the RichTextEditor symbol (left)

Page 3 of 6

Previous Page

Next Page