Getting Started with FlashArea

Welcome to FlashArea! This product is intended as a Flash 7 replacement for <textarea> fields, and is similar to the popular HTMLArea javascript tool.

This document provides some brief guidlines on setting up and configuring FlashArea.

Setting up FlashArea

To convert a <textarea> to use FlashArea, you should follow the example provided in index.html, which comes with the FlashArea download. The steps can be summarized as:

STEP 1: Add the following text to the <head> part of your HTML file:

Set _editor_url to the relative path to the FlashArea SWF file. This is the path to the SWF, relative to the HTML page that contains the <textarea> elements that you wish to convert. This could be different for every one of your pages that use FlashArea. You should not make any changes to flasharea.js, just ensure that it's available to the current document.

STEP 2: Add "id" elements to all <textarea> fields that you wish to convert. For example, if you have a textarea field that looks like this:

<textarea name="txtArea" cols="42" rows="10">

Then, you should change it to look like this:

<textarea name="txtArea" id="txtArea" cols="42" rows="10">

You should use an "id" value that matches your textarea "name" value. Thus, if name="txtArea", then id="textArea".

STEP 3: Initialize FlashArea at the bottom of your HTML document by adding the following code:

<script>

fa = new FlashArea('txtArea');
fa.generate();

</script>

This code is the minimum required code to convert the textarea with id="txtArea" to a FlashArea textarea. If you would like to customize the instance of FlashArea somewhat, you can set configuration parameters using the "config" object of FlashArea, like this:

<script>

fa = new FlashArea('txtArea');
cnf = fa.config;
cnf.width = 470;
cnf.height=200;
cnf.bgcolor = 'ffffff';
fa.generate();

fa = new FlashArea('txtArea2');
cnf = fa.config;
cnf.configFile = "simple.xml";
fa.generate();

</script>

In this example, I have converted two textarea objects to FlashArea objects: txtArea and txtArea2. txtArea will have a custom width, height, and background color. txtArea2 will use the layout settings from "simple.xml", instead of the default.xml settings.

For a complete list of the available configuration settings that can be set via Javascript, please refer to

Configuring FlashArea

FlashArea includes dozens of configuration options in two XML files, which are loaded by the SWF at run-time.

Language XML

The first of these is the language XML file, located in the /resources/FlashArea/lang/eng.xml file. The language is identified by a 3-letter code, like "eng". This file is fairly self-expanatory. The text of FlashArea is the button tooltips (button "hints" as they are referred to in the language XML file). For example:

<copy hint="Copy"/>

If you were to create a Spanish language file, for example, you would copy the eng.xml file to spa.xml, then translate the text within double-quotes, like this:

<copy hint="Copia"/>

Then, you would open /resources/FlashArea/options/default.xml, and change the <language> tag to reflect the language that you wish to load, for examlpe:

<language rootUrl="resources/FlashArea/lang" current="spa" recreateToolbar="false">

Note that I have changed current="eng" to current="spa" to load my new Spanish.xml file.

IMPORTANT: Please save the language file in UTF-8 format.

Layout XML

The layout file (also called the options file) is located in /resources/FlashArea/options, and is probably either "default.xml" or "simple.xml", although you can add additional layouts quite easily by creating new XML files.

This is a very powerful configuration file, because you can change the order, visibility, and shortcut of any button in the FlashArea interface.

To remove a particular button from visibility, delete the button keyword from this comma-separated list, in the <buttons> XML tag. To re-order the buttons, simply change the order in the <buttons> list.

You can also adjust the line breakage of the editor buttons. If you'd like to force some buttons on the second row, instead of allowing the default wrapping, you can add a "br" keyword to the <buttons> list, as shown above. The result looks something like this:

To change the keyboard shortcut of these buttons, edit the appropriate XML tag. The "hint" tags default.xml are simply the default strings for these buttons, but these are overrided by a language file, if one exists.

<copy shortcut="Ctrl+C" hint="Copy"/>
<cut shortcut="Ctrl+X" hint="Cut"/>
<paste shortcut="Ctrl+V" hint="Paste"/>

The layout file also contains powerful options for controlling the popup window behavior. For example, the "Insert Symbol" popup width and height can be easily adjusted, as can the actual symbol list itself:

items="161..255,300"

This option lists the ASCII values of the symbols that should be available in the Insert Symbol popup window.

The border around FlashArea can be configured, too (i.e., the line indicated by the red arrow in this screenshot):

Again, in default.xml:

<background visible="false" backgroundColor="0xD4D0C8" borderColor="0x777777" cornerRadius="1"/>

To hide the border, set visible=false, or just set the backgroundColor to a value equal to the border color.

Adding Predefined Images

In the images popup, the pre-defined images are stored in the /resources/images/ folder of FlashArea. These must be either SWF files, or non-progressive JPG files.

Besides adding the images to the /resources/images/ folder, you must also edit the layout XML file so that Flash "knows" about these images. Flash is unable, without a server-side script, to read the file contents of a directory. Thus, you should also open default.xml (or whatever layout file you are using), and edit the <image> tag, like this:

The predefined images are specified in the "predefined" tag, and are separated by commas. IMPORTANT: These image names are CASE-SENSITIVE. Thus, "close_to_heart.jpg" is NOT the same as "Close_to_heart.jpg", which is NOT the same as "close_to_heart.JPG". 100% of the emails that I've received from users who have said "the predefined images feature isn't working" has been due either to (a) use of progressive JPGs (they have to be NON-PROGRESSIVE), or (b) spelling/case errors when specifying the image paths in the XML layout file.

I would like to extend a very warm thank you to Mike and Heidi Humphries for allowing use of their images in the FlashArea demo. If you're interested in high-quality art of American life, I strongly recommend that you check out the Gallery of Michael Humphries! By the way, Mike's website was created using EasySite!

A few additional options that you may want to play with...

Undoredo: Allows you to set the maximum number of undo actions, and the total memory limit of this tool. The higher these values are set, the greater the chance of Flash SWF slowdown, since more memory resources will be consumed.

indent: The indentation, in pixels, of the Flash editor body to the edge of the SWF file, for example:

styles: You may control the available styles by editing the /resources/FlashArea/styles/default.css file, and the <styles> XML tag in the XML layout file.

font: The "items" attribute is a comma-delimited list of all font sizes that should be visible within FlashArea.

div: This is the width, in pixels, of the separation between button groups. The button groups are pre-defined by the FlashArea development team as toolbar options that are common. For example, Bold/Italic/Underline. These pre-defined button groups are similar to those of Microsoft Word and other word processors.

available: Ignore this XML attribute. It was used in prior FlashArea versions only.

IMPORTANT: Please save the layout/options file in UTF-8 format.

About FlashArea

FlashArea was developed jointly by Darren Gates and the RuAnSoft development team. The components used in FlashArea are the Pisarev/Galkin component sets, available at http://www.tufat.com/category3.htm. The Flash 7 source code of FlashArea is available for a mere $5. You must have at least Flash 2004 Professional, version 7.2 or higher, to edit the Flash source code.

FlashArea is not intended for re-sale or re-distribution except on TUFaT.com, the $5 Script Archive. Please help us keep this product cheap for all users by honoring this.