Actionscript Code Hinting in Flash MX IDE

 

 

1.     Introduction

2.     Code hint suffixes

3.     How to get it

4.     Custom Code Hints

5.     Summery

 

 

Introduction

 

We all know Flash MX IDE supports code hinting while writing code in Action Panel. Those who do not understand code hinting read the following paragraph, which is taken from official Macromedia Flash MX documentation.

“Flash can detect what action you are entering and display a code hinta tooltip containing the complete syntax for that action or a pop-up menu listing possible method or property names. In expert mode, code hints appear for parameters, properties, and events when you enter certain characters in the Script pane. In normal mode, code hints appear for parameters and properties (but not events) in the parameter text boxes when the Expression box is selected. “

 

This figure shows how Flash detects ‘_mc’ (Movie Clip) and displays its associated routines in a drop-down list box.

 

Code hint suffixes

There are some default code hint suffixes support in Flash MX IDE. See the table below.

Suffix

Object class

_mc

MovieClip

_array

Array

_str

String

_btn

Button

_txt

TextField

_fmt

TextFormat

_date

Date

_sound

Sound

_xml

XML

_xmlsocket

XMLSocket

_color

Color

_camera

Camera

_mic

Microphone

_stream

NetStream

_connection

NetConnection

_so

SharedObject

_video

Video

 

FUI Components Set 1 (installed with Flash MX IDE).

 

Suffix

FUI Component

_cb

ComboBox

_ch

CheckBox

_lb

ListBox

_pb

PushButton

_rb

RadioButton

_sp

ScrollPane

 

FUI Components Set 2 (Extension, needs separate Installation)

 

Suffix

FUI Component

_mb

MessageBox

_tree

TreeView

_dp

DraggablePane

tick_*

Ticker

_ib

IconButton

_pr

ProgressBar

 

There are many other official Macromedia FUI Components, free and commercial, which are not listed here.

 

How it works

 

For those who are wondering how it works, I would say that it is only a two-step process. Add relevant code-hint suffix to your variable/instance names and wait a moment for the IDE come up with the appropriate hints. See below.

 

 

 

                                                           

As can be seen from the above figures, it is very simple to see code hints while writing code in the IDE Panel.  Not only does it show the methods of the objects, but it also comes up with expected parameters.

 

Usage:

Add relevant suffix to identifier names and it would bring up the relevant code hints.

 

Alternatively,

You can see code hints without adding suffixes also.  Add a special comment anywhere in code and immediately you would be able to see code hint associated with the variable.  See below.

 

 

A comment is added above of the declaration of Identifier or anywhere, which enables the code hints for the imcBlink identifier.  imcBlink is an instance name of Movieclip object on stage.

 

For a string identifier without suffix, code hint support can be enabled in the following manner.

//ObjectClass identifiername;

 

 

 

 

 

 

e.g.

//String strTest;

strTest = “some string”;

 

In case of movieclips, we can add comments for all movieclip instances to be used by script at the top of code.

 

//MovieClip mcToolbar;

//MovieClip mc_propertyInspector;

 

Code hint support would then be enabled for the identifiers anywhere below the comments.

 

 

 

 

Custom Code Hints

 

If you don’t like to follow Macromedia convention for code suffixes and want your own style of suffixes and patterns, or want to add code hint support for custom classes/components etc., then read the following.

 

Macromedia Flash MX stores all default code hints in an xml file located at following locations,

 

Windows 2000/XP

 

<root drive>\Documents and Settings\<user name>\ Application Data\Macromedia\Flash MX\Configuration\ActionsPanel\ AsCodeHints.xml

 

<root drive> means the drive where OS is installed. In most cases, this is the C:\ drive.

 

If you open AsCodeHints.xml in any text editor, you will see following structure.

 

 

<codehints>

  <codehint pattern="on (press) {\n}\n" />

  <codehint pattern="on (release) {\n}\n" />

  <codehint pattern="on (releaseOutside) {\n}\n" />

  <codehint pattern="on (rollOver) {\n}\n" />

  <codehint pattern="on (rollOut) {\n}\n" />

  <codehint pattern="on (dragOver) {\n}\n" />

  <codehint pattern="on (dragOut) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Left&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Right&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Home&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;End&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Insert&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Delete&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Backspace&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Enter&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Up&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Down&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;PageUp&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;PageDown&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Tab&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Escape&gt;&quot;) {\n}\n" />

  <codehint pattern="on (keyPress &quot;&lt;Space&gt;&quot;) {\n}\n" />

  <codehint pattern="onClipEvent (load) {\n}\n" />

  <codehint pattern="onClipEvent (unload) {\n}\n" />

  <codehint pattern="onClipEvent (enterFrame) {\n}\n" />

  <codehint pattern="onClipEvent (mouseDown) {\n}\n" />

  <codehint pattern="onClipEvent (mouseMove) {\n}\n" />

  <codehint pattern="onClipEvent (mouseUp) {\n}\n" />

  <codehint pattern="onClipEvent (keyDown) {\n}\n" />

  <codehint pattern="onClipEvent (keyUp) {\n}\n" />

  <codehint pattern="onClipEvent (data) {\n}\n" />

  <typeinfo pattern="*_mc" object="MovieClip" />

  <typeinfo pattern="*_array" object="Array" />

  <typeinfo pattern="*_str" object="String" />

  <typeinfo pattern="*_btn" object="Button" />

  <typeinfo pattern="*_txt" object="TextField" />

  <typeinfo pattern="*_fmt" object="TextFormat" />

  <typeinfo pattern="*_date" object="Date" />

  <typeinfo pattern="*_sound" object="Sound" />

  <typeinfo pattern="*_xml" object="XML" />

  <typeinfo pattern="*_xmlsocket" object="XMLSocket" />

  <typeinfo pattern="*_color" object="Color" />

  <typeinfo pattern="_level*" object="MovieClip" />

  <typeinfo pattern="_parent" object="MovieClip" />

  <typeinfo pattern="_root" object="MovieClip" />

</codehints>

 

The above xml structure is self explanatory. It includes code hints for button, movieclip handlers. Look at those in red; these are the more common ones that we encounter while coding.

 

<typeinfo pattern="*_mc" object="MovieClip" />

 

If you look closely look, you will find that *_mc means ‘anyname_mc’, which would invoke code hint. It gives us ample room to play. If you change the pattern as below;

 

<typeinfo pattern="mc*" object="MovieClip" />

 

save the file; restart the Flash MX IDE; and type “mc.”, you will see the code hint like this.

 

You can create your own set of code hints. I had created some for myself a long time back. I am sharing them here. Just cut and paste the following in your existing ASCodeHints.xml file.

 

  <typeinfo pattern="mc*" object="MovieClip" />

  <typeinfo pattern="arr*" object="Array" />

  <typeinfo pattern="str*" object="String" />

  <typeinfo pattern="btn*" object="Button" />

  <typeinfo pattern="txt*" object="TextField" />

  <typeinfo pattern="fmt*" object="TextFormat" />

  <typeinfo pattern="date*" object="Date" />

  <typeinfo pattern="sound*" object="Sound" />

  <typeinfo pattern="xml*" object="XML" />

  <typeinfo pattern="xmlsocket*" object="XMLSocket" />

  <typeinfo pattern="color*" object="Color" />

  <typeinfo pattern="col*" object="Color" />

  <typeinfo pattern="*_dp” object=”DataProviderClass” />

  <typeinfo pattern="dp*”  object=”DataProviderClass” />

 

 

Please make a backup of the original ASCodeHints.xml before doing these changes.

If for some reason, the backup failed, then delete the ASCodeHints.xml and restart the Flash MX. Flash MX will recreate it with a original copy of the xml file.

 

 

 

I guess you are aware that code hints can be disabled from Preferences panel.

 

 

 

Here, I would like to share my personal choice of colors for syntax highlighting.

Foreground:#000000      Background: #FFFFFF

Keyword: #0000FF        Comments: #CC0000

Identifiers: #0000FF    Strings:#009933

Summary

 

There are more to write on CustomActions, Custom Classes, References, and ActionPanel. Also on how to add our own custom classes to both ActionPanel and Reference panel, to add custom code hints, enable syntax highlighting for Custom Classes etc

 

I would really love to write more on these topics, but some other time.

 

I just started this document with specific purpose to share my knowledge on Code Hinting in Flash MX ActionPanel; I have tried my best to do so. Please let me know of any error in the document.

 

 

 

Author: Abdul Qabiz (Techincal Writer)

Website: http://www.abdulqabiz.com

Content Edited by: V. Subhash

Website: http://ww.domaindlx.com/vsubhash/

Date:  Oct 12, 2003