Skip to content

Flash Custom Code/Color Highlighter

by Colin on May 20th, 2009

So a few months ago I wrote a bunch of AS3 classes for work and I wanted to have my own color / code hinting so that it made using them faster and easier to work with.

I searched around the web and couldn't find any tutorials that I found that helpful, so after learning the basics of how to do it (and browsing through Flash's standard Custom Actions folder), I decided to write a tutorial on it so that others can learn this and incorporate it when they write their own class files (and hopefully distribute them to the public). If you get some free time, wondering around the Flash Configuration files can teach you a lot.
Configuration folder is located in:
Mac:
[user]/Library/Application Support/Adobe/[Flash version]/[language]/Configuration/
Windows:
Documents and Settings/[username]/Local Settings/Application Data/Adobe/[Flash version]/[language]/Configuration

Custom Actions files are .xml files, so I'm sure someone someday may even write a php script or something that will strip the comments from your AS files and create this .xml file for you, but until then this is how it's done :)
The XML file is split up into 3 parts, the <actionspanel> node, the <colorsyntax> node, and the <codehints> node.
The <actionspanel> node is what defines your methods so when you're using the methods from your class, a pop up box will appear showing you what parameters need to be filled in, ie:

  1. import flash.display.BitmapData;
  2.  
  3. var bmd:BitmapData = new BitmapData (width:int, height:int[,transparent:Boolean=true,fillColor:uint=0xFFFFFFFF]);

When typing in "new BitmapData (", the "width:int, height:int" show you those 2 variables are necessary and the "[,transparent:Boolean=true,fillColor:uint=0xFFFFFFFF]" are optional.
The node is what changes the color of the code (not necessary, but very useful).

The <codehints> node is what helps you when importing your classes. This is the same as when you type in:
"import flash.display.", you see ActionScriptVersion, AVM1Movie, Bitmap, BitmapData, etc. come up.
For each package of classes you create, you'll want a <folder> childnode in your <actionspanel> node. This is where you'll define each class in your package and all the public methods.
The <folder> node has the following attributes:

version - The minimum flash player version the actionspanel should recognize
name - The package location
id - How it should be recognized, keep this the same as the name attribute
index - true
tiptext - This is help text you let you know what the package does
helpid - An optional location of where your help files for the package are location, if you don't have any just leave them blank
The first childnode of the <folder> node is a <folder> node as well, but this doesn't define information for the package but for the class.

The attributes are the same however they work different.
version - The same version as you typed in earlier
name - A string identifying what that class does, I usually just have something like "Math Methods"
id - The same as the name attribute
tiptext - The same as the name attribute
Now that those attributes have been filled in, it's time to define your methods.
Each method is a <string> node with a few attributes, being:

object - The location of the class file within the package:
object="[com.te.math.TEMath]"
text - The name of the method and it's parameters:
text=".radToDeg (% rad:Number %)"
type - Always a procedure
type="procedure"

version - The minimum AS version this method requires which is the same version you entered above
version="9″
name - The name of the method, without the parameters, period and paranthesis
name="radToDeg"
tiptext - What the method does, I also write the return type
tiptext="Number: Returns radians to degrees"
codehint - A boolean, you always want true

codehint="true"
Here's what mine looks like in the end:

  1.  

Close off your node and keep doing this for all your methods. Once you've done that, close off the folder node for that class and if you're done writing methods for that package, close off the folder for that node as well.
Moving on is the <colorsyntax> node. There are two types of node you can enter in, <keyword> nodes and <identifier> nodes.

Keywords will change the color of your code to a keyword in flash, such as "import" or "for".
Identifiers will change the color of your code to recognized methods, such as "gotoAndPlay".
Both these nodes have only one attribute, the "text" attribute. This is the text that flash will identify to change the color of your code. If you don't want your methods to have a different color, then go ahead and skip entering in the <identifer> nodes.

Create your <colorsyntax> node, and for each class you have enter in a <keyword> node with a text attribute:

  1.  

It's important (but not necessary) to put a period before your method names so that the text color will only change when you're calling those methods from the instance name or class name (via static method).

I like to make my classes keywords and the methods identifiers because you can see a hierarchy between the class and method.
Lastly let's add the <codehints> node.
This a short node where the only childnodes you'll enter are for each class name.
Each childnode is a
<package> node with 2 attributes, name and children.
Name is the location of the package:
name="com.te.math"

Children is the name of the class:
children="TEMath"
Do this for each class you have in the package and close out the codehints node.
Here's my final result:

  1.  

From → Flash

No comments yet

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS