Chris Bristol

I have been using Flash in my web development since version 4. As ActionScript became a more powerful language, I found myself fascinated by the interaction between it and PHP and MySQL. In recent years, I have worked at eliminating the use of the timeline altogether, building everything in pure AS3, and making my code reusable. The fantastic resources of the vast online Flash community has been a great source of help and inspiration. I hope to be able to give back a little of that. You can reach me via my website: Xty Digital Design

View all articles by Chris Bristol

I used to rant and rave about Flex receiving all the goodies, and wonder why Adobe left us Flash people out in the cold, but now I realize it was a plot to make us better coders. Forcing me to create my own widgets has taught me many things that I would not have learned had I been able to rely on pre-built components, and for that I am grateful to Adobe.

After much searching I came across this article and a an example - thank you guys! At the time I was doing this, Squiggly was in prerelease 5 and this example was based on prerelease 2. So, while it wasn't a perfect fit, it was a great leg up.

Getting Set-Up

You will need the Squiggly Package from Adobe Labs. Once you download and unzip this you will find a folder called libs, inside of which are six swc files. You need to add the AdobeSpellingFramework.swc to your Library path in flash. The way in which I do this is to set up a folder where I will store any and all swc files I want to use in my projects. I called my folder FlashSWC. You don't need to do this, but I find it much easier to have a library system. The way in which you include a swc file in your projects using the Flash IDE is as follows:

Inside Flash go to Edit -> Preferences -> ActionScript and click the ActionScript 3.0 Settings... button.



In the second spot, Library path:, browse to the folder where you are storing the AdobeSpellingFramework.swc file and choose it. Now click OK, and that's it. Now the classes contained within the swc file are available to any project.

The other files you will need from this package are found in the folder src -> dictionaries -> en_US. Place the en_US.aff and the en_US.dic files in the same folder as you fla. The .aff file contains the rules for the dictionary and the .dic file is the dictionary itself.

Next, download the xtySpellChecker.zip. Inside this zip file you will find the spellTest.fla, SpellTest.as and the XtySpellChecker.as.

Before we get into the code, let's take a look at what we will be building. Below, we have an ordinary input text field, and below that a TextArea. Both are hooked up to check your spelling.



The Demo

As with all my previous tutorials, you will notice that the spellTest.fla is empty. The Document Class is set to the SpellTest class - no .as! In the library you will find the TextArea component, and nothing else.

Let's look at the Document class - SpellTest.as. This class basically sets up a plain TextField and a TextArea instance.

package {
  import flash.display.*;
  import flash.text.*;
  import flash.events.*;
  import fl.controls.TextArea;
  import ca.xty.xSite.xUtils.XtySpellChecker;


First we make our package declaration and import the items we will need. The XtySpellChecker.as class lives in my library in a folder called xUtils, which is inside a folder called xSite which is in a folder called xty which is in a folder called ca. If you do not use a class library, or have you own system set up, just change the package information to reflect where this class will be living. If you do not have a libray system at all, just leave it in the folders included in the zip and put that entire folder system in the same folder as your fla.

public class SpellTest extends Sprite{
  // The TextField and the TextArea we will be using
  private var input_txt:TextField;
  private var ta:TextArea;
  // The 2 instances of the XtySpellChecker class
  private var checker:XtySpellChecker;
  private var checker1:XtySpellChecker;
  // The var aff is the file name of the dictionary rules
  //The var url is the dictionary itself
  //These files need to be located on the server in the same folder as the swf file
  //or you can add in the folder location ie dictionary/en_US.aff
  private var aff:String = "en_US.aff";
  private var url:String = "en_US.dic";


After we declare our SpellTest class, we declare the variables we will be using. First we have a plain TextField and a TextArea instance. Then we create two instances of the XtySpellChecker class so that we can use both the TextField and the TextArea to check our spelling. The last two variables create an instance of the dictionary rules file - aff - and the dictionary we will be using - url. Both of these files are found within the Squiggly package and need to be in the same folder as your fla. You will also need to upload them to your server. If you are going to create a folder system to store these files, simply change the strings "en_US.aff" and "en_US.dic" to include the folder, eg "someFolder/en_US.dic".

Next up is our constructor function.

public function SpellTest(){
  //Set up our TextField
  input_txt = new TextField();
  input_txt.x = 10;
  input_txt.y = 20;
  input_txt.width = 300;
  input_txt.height = 20;
  input_txt.border = true;
  input_txt.type = "input";
  addChild(input_txt);

  //Set up the TextArea
  ta = new TextArea();
  ta.move(10, 50);
  ta.setSize(300, 100);
  addChild(ta);

  //This instance of XtySpellChecker is for the TextArea
  //Note: we are passing the textField within the TextArea
  checker = new XtySpellChecker(ta.textField, aff, url);

  //This instance of XtySpellChecker is for the TextField
  checker1 = new XtySpellChecker(input_txt,aff, url);
}


Here we instantiate the input_txt TextField and the ta TextArea and place them on stage. Next we set up our checker and checker1 instances of the XtySpellChecker class. You pass three parameters: the TextField to check the spelling in, the aff rules file and the dic file. Note for the TextArea that you have to pass in the ta.textField, since the spell checker works on the TextField within the TextArea component.

And that's it for the Document class. On to the main class, XtySpellChecker.as next.