Spell checking in Flash/Flex: Adobe Squiggly

November 14, 2011

Adobe Squiggly is a Flash spell-checker library released by Adobe Labs. It adds common spell-checker features to Flash/Flex text controls such as highlighting misspelled words and word-suggestion. This is probably the best (free) available option when developing for Flash 10 or newer. In order to use this library you must first download it from the official site: http://labs.adobe.com/technologies/squiggly/. The Squiggly package includes several flash libraries (swc), some dictionary files, and a few examples of the libraries integration using Flex, AIR, and actionscripts. This post will guide you through the creation of a small Spark project that will use the AdobeSpellingUIEx.swc file to enable spell checking on a text area component. You should use the AdobeSpellingUI.swc library if you need to implement Squiggly for ‘mx’ components. Let’s start by opening Flash Builder and creating a new Flex Project named FlashSpellCheck. Add a TextArea to the main application with id=”txtArea”. Copy the AdobeSpellingUIEx.swf file from the SquigglySDK\libs folder you just downloaded into your project “libs” folder. Copy the dictionary files to your project. By default the dictionary files go to the root of the project. For bigger projects it’s advisable to place them somewhere else. In this case we’ll use an “assets” folder. You will need to copy the content from the SquigglySDK\src folder from the unzipped package. There should be a file called AdobeSpellingConfig.xml and a folder called dictionaries. Tip 1: Squiggly looks for the dictionary config file inside your project root. Since we placed that file inside the “assets” folder, we need to let the library know about this new location by calling the spellingConfigUrl method on the CreationComplete event of the application: SpellUI.spellingConfigUrl = "assets/AdobeSpellingConfig.xml"; Tip 2: The AdobeSpellingConfig.xml also looks for the rules and dictionary files to be inside your root/dictionaries folder. Since we moved everything inside the assets package you will also need to edit this file and update the paths for the ruleFile and the dictionaryFile. Tip 3: By default web servers won’t allow flash to load the ruleFile and dictionaryFiles that have extensions “aff” and “dic” respectively. In order to work around this issue without reconfiguring your server you can rename those two files and give them an “xml” extension. Remember to update the AdobeSpellingConfig.xml accordingly. In our case this file ends up looking like this: Our last step consist on telling the SpellUI class which visual components will implement the spell-checking, in this case the TextArea. We also do this on the CreationComplete event: SpellUI.enableSpelling(txtArea, "en_US"); You can download the source code from here. And this is the demo file we just created. Feel free to make some typos:

some stats

lunches with clients this year
dances in the rain this year (very rainy!)
songs in our music library
graphic pieces created this month
carafes of coffee per day
dog walks this month (and counting)