まずプロジェクトファイルのセットアップから始めましょう。この記事の冒頭にあるサンプルファイルをダウンロードし、ZIPアーカイブを解凍します。サンプルファイルは、スターターファイルとプロジェクトの完成バージョンの2つのフォルダに分かれています。
次に、Starter_filesフォルダ内の2つのファイル(RichTextEditor.graphic.pngとRichTextEditor.jsf)を、お使いのオペレーティングシステムの次の場所にコピーします。
これでFireworks CS3を起動できます。必ず、このバージョンのFireworksを使用してください。
注意:スターターJSFスクリプトファイルを変更する場合は、ライブラリパネルから古いシンボルインスタンスを削除して、さらに共有ライブラリパネルの再読み込みアイコンをクリックしてください。この操作によって、スクリプトの変更がすべてシンボルプロパティパネルに反映されるようになります。
デフォルトのFireworks CS3スプラッシュ画面から、新規作成/Fireworksドキュメント(PNG)をクリックするか、ファイル/新規作成を選択します。カスタムグラフィックシンボルを十分に格納できるサイズのドキュメントを作成します。この例では、幅550x高さ500の白色のキャンバスに設定されています(図1を参照)。「OK」をクリックします。

図1.Flex 2 アプリケーションのデフォルトのプロパティに対応するFireworksドキュメントのプロパティ値
ここで、必要なアイテムにアクセスしやすいようにFireworksのパネルを並べて表示しておきます。ウィンドウ/共有ライブラリを選択するかF7キーを押して、共有ライブラリパネルを表示します。次に、ウィンドウ/ライブラリを選択するかF11キーを押して、ライブラリパネルも表示します。最後に、ウィンドウ/シンボルプロパティを選択して、シンボルプロパティパネルを表示します。
共有ライブラリパネルのタイトルバーをクリックしてアクティブにし、使用可能なリッチシンボルのリストを確認します。Flex Componentsフォルダをダブルクリックすると、デフォルトシンボルのリストを展開できます。カスタムシンボルフォルダをダブルクリックすると、新しいRichTextEditorグラフィックシンボルが表示されます(図2を参照)。これは、Sample_filesフォルダからカスタムシンボルディレクトリにファイルをコピーしたときにFireworks CS3の共有ライブラリに追加されたものです。

図2.共有ライブラリパネルのRichTextEditorシンボル
これで、RichTextEditorを共有ライブラリに追加できました。このチュートリアルの次の節に進んで、シンボルのカスタマイズを始めてください。