Step 1: The Simple Component

For the purposes of this tutorial, we do not actually need to create the code for this component. This tutorial is about creating Flash MX component help, not on creating components.

Let's imagine you have created a simple Flash component, FSimpleClass, that contains 2 methods as follows:

Step 2: Create the Code Hint File

The root node of the Code Hint XML file is called <customactions> and contains several sub elements as described below:

<actionspanel> is used to group and define the folders and items that will be placed into the Flash Actions Toolbox (see Figure 1).

<colorsyntax> is used to define which identifiers (i.e. objects and methods) will display using the color specified for identifiers within the ActionScript editor preferences window (see figure 5).

<codehints> is used to identify a specific object type within the ActionScript editor and allows the editor to display the menu-style code hint for the object.

Each of these elements can contain sub elements to describe supporting information.? We will review each as we create the Code Hint XML file for FSimpleClass.? Lets begin by creating the skeleton of the Code Hint XML file.

Let's create the <actionspanel> section first. The Actions toolbox consists of folders and/or items, each folder or item may contain subfolders and so on.? Folders are defined using the <folder> tag and items are defined using the <string> tag.? The following entry creates a folder for FSimpleClass.

The following is a description of each attribute used to define the folder named Simple:

  • VERSION ? indicates the intended version of the player this component was written for.
  • id ? Unknown as of this writing.? The standard seems to be to use the same value as found in the name attribute.
  • index ? indicates that items within this folder should be displayed within the index section of the Actions Toolbox (see figure 6).
  • name ? display name that will be visible within the Actions toolbox
  • tiptext ? text that is displayed when the cursor is placed over the item in the Actions toolbox (see Figure 1).

    • Next, we will group the methods for FSimpleClass by creating a subfolder.

    Finally we add the entries for each of the methods of FSimpleClass using the <string> tag.

    The following is a description of each attribute used to define the items within the Methods subfolder:

  • OBJECT ? Specifies the object to which a method or property belongs
  • TEXT ? the code to be inserted at the current cursor position within the code pane if the user selects this item from the menu-style code hint.
  • TYPE ? defines the type of item (function, procedure, property, event, etc)
  • VERSION - indicates the intended version of the player this component was written for.
  • name ? display name of the item.
  • tiptext ? text that is displayed when the cursor is placed over the item in the Actions toolbox (see Figure 1).

    • Next, we need to create the <colorsyntax> section. The <identifier> element is used to define the syntax coloring for FSimpleClass and it?s methods.

    The following is a description of the attributes used:

  • text ? defines the text that will be displayed using the color specified for identifiers within the ActionScript Editor preferences window (see Figure 5).

    • The final section of the Code Hint XML file contains the <codehints> tag.? Only objects are specified within this element. The purpose of this section is to provide a way for Flash MX to determine what menu-style code hint to display when a user is writing code in the editor. It looks for a pattern in the text being edited and attempts to match that pattern with one of the pattern attributes within the codehints? typeinfo tag.? When a match is found the menu-style code hint is displayed.? We would like the menu-style code hint to appear any time the user types in ?xxxx_simple?.? Here is how we would enter FSimpleClass.

    The following is a description of the attributes used:

  • OBJECT ? name of the object to be used when the pattern is matched.
  • pattern ? the text pattern to match against within the code pane.

    • Here is the completed Code Hint XML file for FSimpleClass. This file can now be utilized by Flash MX to display both code hint styles (menu and tool-tip) and color identifiers for FSimpleClass.