My earlier post on creating custom brushes in Google Syntax Highlighter (Extending Language Support in Google Syntax Highlighter) contains a rudimentary brush for ActionScript. The original is designed for Stone Soup; it is something to get an AS brush established, but is not meant to be exhaustive. I have revisited the brush and added some meat. The bush should now supply a more thorough coverage of the language. A download is provided below.

ActionScript Brush

dp.sh.Brushes.ActionScript = function() {
  var keywords = 'and arguments asfunction break call case catch clear ' +
    'continue default do else escape eval false finally for getProperty ' +
    'if ifFrameLoaded in instanceof loop NaN new newline not null or ' +
    'prototype return set super switch targetPath tellTarget this throw ' +
    'trace true try typeof undefined unescape var visible void while with';
  var builtin = '_currentframe _droptarget _framesloaded _global _height ' +
    '_level _name _root _rotation _target _totalframes _url _visible ' +
    '_width _x _xmouse _xscale _y _ymouse _yscale Array Boolean Button ' +
    'bytesLoaded bytesTotal Camera Color Date enabled Error focusEnabled ' +
    'Key LoadVars Math Mouse MovieClip nextFrame Number Object Selection ' +
    'Sound Stage String StyleSheet System TextFormat';
  var funcs = 'addProperty attachMovie attachVideo browse cancel ' +
    'clearInterval clone concat createEmptyMovieClip createTextField ' +
    'dispose draw duplicateMovieClip dynamic equals extends function ' +
    'getInstanceAtDepth gotoAndPlay gotoAndStop identity implements ' +
    'import interface isEmpty isFinite isNAN join length loadClip ' +
    'loadMovie loadMovieNum loadVariables loadVariablesNum merge moveTo ' +
    'on onClipEvent onDragOut onDragOver onEnterFrame onKeyDown onKeyUp ' +
    'onKillFocus onMouseDown onMouseMove onMouseUp onPress onRelease ' +
    'onReleaseOutside onRollOut onRollOver onUnload play pop prevFrame ' +
    'private public push registerClass removeMovieClip reverse rotate ' +
    'scale setEmpty setInterval setProperty shift slice sort sortOn ' +
    'splice startDrag static stopAllSounds stopDrag subtract swapDepths ' +
    'toString toString translate union unloadClip unloadMovie ' +
    'unloadMovieNum unshiftclass unwatch valueOf watch';
  var includes = '#include #initClip #endInitClip';

  this.regexList = [
    {regex: dp.sh.RegexLib.SingleLineCComments, css: 'comment' },
    {regex: dp.sh.RegexLib.MultiLineCComments, css: 'comment' },
    {regex: dp.sh.RegexLib.DoubleQuotedString, css: 'string' },
    {regex: dp.sh.RegexLib.SingleQuotedString, css: 'string' },
    {regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' },
    {regex: new RegExp(this.GetKeywords(funcs), 'gm'), css: 'func' },
    {regex: new RegExp(this.GetKeywords(builtin), 'gm'), css: 'builtin' },
    {regex: new RegExp(this.GetKeywords(includes), 'gm'), css: 'preprocessor'}
  ];
  this.CssClass = 'dp-as';
  this.Style = '.dp-as .func { color: #000099; }' +
               '.dp-as .builtin { color: #990000; }';
}

dp.sh.Brushes.ActionScript.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.ActionScript.Aliases = ['actionscript', 'as'];

Usage

Upload the Brush javascript file to your Google Syntax Highlighter Scripts directory, and load the file in unto your HTML with a <SCRIPT> tag with your other brushes.

<script language="javascript"
  src="dp.SyntaxHighlighter/Scripts/shBrushAs.js"></script>

Display syntax-highlighted ActionScript using a traditional Google Syntax Highlighter <PRE> tag, using as or actionscript as the language alias.

<pre name="code" class="as">
  // Some ActionScript Code
</pre>

Brush In Action

/*
Sample ActionScript for Demo
ActionScript Brush for Google Syntax Highlighter
*/
if (dteDate.getMonth() == intCurrMonth && intCurrMonth == intOldMonth
    && intOldYear == intCurrYear) {
  if (dteDate.getDay() == 0 and dteDate.getDate()>1) {
    intYPosition = intYPosition+20;
  }
  duplicateMovieClip ("DayContainer", "DayContainer"+intDate, intDate);
  setProperty ("DayContainer"+intDate, _y, intYPosition);
  setProperty ("DayContainer"+intDate, _x, intXPosition[dteDate.getDay()]);

  } else if (intCurrMonth == 6) {
    if (intDate == 4) {
      clrFColor = new Color("DayContainer"+intDate+".foreground");
      clrFColor.setRGB(0xFF0000);
      clrBColor = new Color("DayContainer"+intDate+".background");
      clrBColor.setRGB(0xFF0000);
    }
  } else if (intCurrMonth == 9) {
    if (intDate == 31) {
      clrFColor = new Color("DayContainer"+intDate+".foreground");
      clrFColor.setRGB(0xFF9922);
      clrBColor = new Color("DayContainer"+intDate+".background");
      clrBColor.setRGB(0xFF9922);
    }
  } else if (intCurrMonth == 10) {
    if (intDate >= 22 && intDate <= 28 && dteDate.getDay() == 4) {
      clrFColor = new Color("DayContainer"+intDate+".foreground");
      clrFColor.setRGB(0xFFCC00);
      clrBColor = new Color("DayContainer"+intDate+".background");
      clrBColor.setRGB(0xFFCC00);
    }
  set ("DayContainer"+intDate+":MyDate", new Date(dteDate.getFullYear(),
    dteDate.getMonth(), dteDate.getDate()));
  setProperty ("DayContainer"+intDate, _visible, true);
  intDate++;
  dteDate.setDate(intDate);
}

Download

Download: shBrushAs.zip
Includes:

• Compressed shBrushAs.js for production. 
• Uncompressed shBurshAs.js for debugging.

As always, this code is provided with no warranties or guarantees. Use at your own risk. Your mileage may vary.

          
Technorati
Tags: Google Code,SyntaxHighlighter,Syntax
Highlighter,ActionScript
        

As I discussed in an earlier post (Blog your code using Google Syntax Highlighter), Google Syntax Highlighter is a simple tool that allows bloggers to easily display code in a format that is familiar end users. The tool renders the code in a very consumable fashion that includes colored syntax highlighting, line highlighting, and line numbers. Out of the box it supports most of the common languages of today, and a few from yesterday, but some common languages are unsupported. Perl, ColdFusion, and Flash's ActionScript all are unloved by Google Syntax Highlighter, as are many others that you may want to post to your blog. For these languages, the solution is a custom brush.

Syntax Highlighting Brushes

For Google Syntax Highlighter, brushes are JavaScript files that govern the syntax highlighting process, with names following the format of shBrushLanguage.js, such as shBrushXml.js. Brushes contain information about the keywords, functions, and operators of a language, as well as the syntax for comments, strings, and other syntax characteristics. Keyword-level syntax is applied to any specific word in the language, including keywords, functions, and any word operators, such as and, or, and not. Regular expressions apply character-level syntax to code, and identifies items such as character operators, the remainder of an inline comment, or the entire contents of a comment block. Finally, aliases are defined for the brush; these are the language aliases that are used within the class attribute of the Google Syntax Highlighter <PRE> tag. With this information, the brush applies the syntax highlighting styles according to the CSS defined for each component of the language.

Breaking Down Brushes

Decomposing the SQL Brush

In JavaScript, everything is an object that can be assigned to a variable, whether its a number, string, function, or class. Brushes are each a delegate function. The variable name of the brush must match dp.sh.Brushes.SomeLanguage.

dp.sh.Brushes.Sql = function() {

Next, define the list of keywords for applying syntax highlighting. Each list is not an array, but rather a single-space delimited string of keywords that will be highlighted. Also, multiple keyword lists can exist, such as one list for function names, another for keywords, and perhaps another for types, and unique styling can be applied to each grouping (we'll get to styling a little later).

  var funcs = 'abs avg case cast coalesce convert count current_timestamp ' +
    'current_user day isnull left lower month nullif replace right ' +
    'session_user space substring sum system_user upper user year';

  var keywords = 'absolute action add after alter as asc at authorization ' +
    'begin bigint binary bit by cascade char character check checkpoint ' +
    'close collate column commit committed connect connection constraint ' +
    'contains continue create cube current current_date current_time ' +
    'cursor database date deallocate dec decimal declare default delete ' +
    'desc distinct double drop dynamic else end end-exec escape except ' +
    'exec execute false fetch first float for force foreign forward free ' +
    'from full function global goto grant group grouping having hour ' +
    'ignore index inner insensitive insert instead int integer intersect ' +
    'into is isolation key last level load local max min minute modify ' +
    'move name national nchar next no numeric of off on only open option ' +
    'order out output partial password precision prepare primary prior ' +
    'privileges procedure public read real references relative repeatable ' +
    'restrict return returns revoke rollback rollup rows rule schema ' +
    'scroll second section select sequence serializable set size smallint ' +
    'static statistics table temp temporary then time timestamp to top ' +
    'transaction translation trigger true truncate uncommitted union ' +
    'unique update values varchar varying view when where with work';

  var operators = 'all and any between cross in join like not null or ' +
    'outer some';

Following the keyword definitions is the Regular Expression pattern and Style definition object list. The list, this.regexList, is an array of pattern/style objects: {regex: regexPattern, css: classString}. The regexPattern is a JavaScript RegExp object, and defines the pattern to match in the source code; this pattern can be created using one of three options within Google Syntax Highlighter.

Predefined Patterns

Within Google Syntax Highlighter, dp.sh.RegexLib contains five predefined regular expression patterns. MultiLineCComments is used for any language that uses C-style multi-line comment blocks: /* my comment block */. SingleLineCComments is used for any language that uses C-style single line or inline comments: // my comment. SingleLinePerlComments applies for Perl-style single line comments: # my comment. DoubleQuotedString identifies any string wrapped in double-quotes and SingleQuotedString identifies strings wrapped in single-quotes. These options are used in place of creating a new instance of the RegExp object.

Keyword Patterns

Google Syntax Highlighter has a GetKeywords(string) function which will build a pattern string based on one of the brush's defined keyword strings. However, this is only the pattern string, and not the RegExp object. Pass this value into the RegExp constructor: new RegExp(this.GetKeyword(keywords), 'gmi')

Custom Pattern Definition

Create a new RegExp object using a custom pattern. For example, use new RegExp('--(.*)$', 'gm') to match all Sql comments, such as --my comment.

For these pattern/style objects, the regular expression pattern is followed by the name of the CSS class to apply to any regular expression matches. The style sheet packaged with Google Syntax Highlighter, SyntaxHighlighter.css, already defines the many CSS classes used by GSH; place the additional styles for your custom brushes within this file, in a new file, in your HTML, or defined them within the brush using JavaScript.

  this.regexList = [
    {regex: new RegExp('--(.*)$', 'gm'), css: 'comment'},
    {regex: dp.sh.RegexLib.DoubleQuotedString, css: 'string'},
    {regex: dp.sh.RegexLib.SingleQuotedString, css: 'string'},
    {regex: new RegExp(this.GetKeywords(funcs), 'gmi'), css: 'func'},
    {regex: new RegExp(this.GetKeywords(operators), 'gmi'), css: 'op'},
    {regex: new RegExp(this.GetKeywords(keywords), 'gmi'), css: 'keyword'}
  ];

The delegate definition ends with any style specifications. Apply a style sheet to the entire code block using this.CssClass. Also, as mentioned above, the brush can define custom CSS using this.Style as an alternative to placing the CSS in HTML or a CSS file. When finished, close the delegate.

  this.CssClass = 'dp-sql';
  this.Style = '.dp-sql .func { color: #ff1493; }' +
    '.dp-sql .op { color: #808080; }'; }

The final component of a Brush, set outside of your delegate, contains the prototype declaration and any aliases to apply to the Brush. Aliases consist of a string array (a real array this time, not a space-delimited string) of language aliases to use, such as ['c#','c-sharp','csharp']. Alias values must be unique across all defined brushes that you have included into your site.

dp.sh.Brushes.Sql.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Sql.Aliases = ['sql'];

Making a Custom Brush (for ActionScript)

I like rich media applications, such as those developed in Flash or Silverlight. I was surprised when I found that Google Syntax Highlighter does not ship with an ActionScript brush, and more surprised when I found out that no one has written one, yet. So, using the methods from above, I created one. This isn't meant to be an exhaustive brush, but more like Stone Soup. It's a start. Please feel free to add to it.

dp.sh.Brushes.ActionScript = function() {

  var keywords = 'and break case catch class continue default do dynamic else ' +
    'extends false finally for if implements import in interface NaN new not ' +
    'null or private public return static super switch this throw true try ' +
    'undefined var void while with';

  this.regexList = [{regex: dp.sh.RegexLib.SingleLineCComments, css: 'comment'},
    {regex: dp.sh.RegexLib.MultiLineCComments, css: 'comment'},
    {regex: dp.sh.RegexLib.DoubleQuotedString, css: 'string'},
    {regex: dp.sh.RegexLib.SingleQuotedString, css: 'string'},
    {regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword'}];

    this.CssClass = 'dp-as';
}

dp.sh.Brushes.ActionScript.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.ActionScript.Aliases = ['actionscript', 'as'];

All right. As mentioned before, here it is: I found a bug in mx.managers.DepthManager in Flash 8, though I’m sure it affects all ActionScript 2.0 versions of the DepthManager to date. The bug involves a lack of error handling when DepthManager encounters an object without a depth, or rather, without a getDepth() method. It shows up through any use of the DepthManager’s methods, the PopUpManager (mx.managers.PopUpManager), the Alert class (mx.controls.Alert), etc., when an object on the stage does not have a getDepth function.

What Happens?
The issue manifests itself in many variations, usually by objects placed with the DepthManager inexplicably replacing previous objects placed with the DepthManager. Most notably, it manifests itself as modal windows (via PopUpManager) and Alerts not rendering to the screen, even though the modality seems to have worked and all other objects on the screen no longer can receive input.

Why does this happen?
The DepthManager works off a rather inefficient array to maintain its records. An object within the DepthManager, the DepthTable, is an indexed array containing record of every object on the stage and its depth. The DepthManager stores a reference to the object within the array at the position corresponding to the depth of the object. If the stage has one object at a depth of 32,000, depthTable[32000] = myObject, and we have a 32,000-length array with one object stored in it [an inefficiency]. Values in the manager’s depth table are based on available positions in the array, such as kTopmost being greater than the last movieclip or object in the array [it iterates one-by-one through each position in our 32000-length array; another inefficiency].

Excerpt from mx.managers.DepthManager.as

            
              var t:String= typeof(i);
if (t
== “movieclip” || (t == “object” && i.__getTextFormat !=undefined))
if (i._parent
== this)
{

depthTable[i.getDepth()] = i;

}
          

However, the DepthManager code is assuming that the object has a getDepth function. If the object does not have the function, references to that function return undefined, setting depthTable[undefined] = i, which blows chunks all over the place, and any reference to any of DepthManager’s depth-returning methods will always return zero.

That zero is why nothing works anymore; the Alert class creates the new Window-class-like object, then creates a transparent movieclip below that object to trap all inputs, creating a sense of modality. The Alert class uses the DepthManager to create itself at kTopmost, which DepthManager says is zero. The Alert class then uses the DepthManager to create the modality movieclip above itself, kTopmost, which it then hopes to swapDepth with to get itself back above the modality clip. However, the Alert class, with itself at depth zero, creates the modality clip at depth zero because DepthManager said it was the kTopmost depth. Creating an object at depth zero toasts any object already at depth zero, thus the modality clip blows away the Alert clip and we get a SWF that no longer responds to anything, and no Alert ‘OK’ button to restore peace in the world. Likewise happens when a modal window is created through the PopUpManager.

So what can I do about it?
How do you get around this? Simple. Don’t put anything on the stage that extends from Object. If you put it on the stage, extend it from MovieClip. Even though the DepthManager code (above) explicitly calls getDepth on MovieClip or Object, it does not check to see if the object in question actually has a getDepth method. Object does not have getDepth by default, but MovieClip does. I suppose you could write your own getDepth function for your Object-inheriting class, or you could rewrite the DepthManager (which would mean also rewriting PopUpManager, Alert, ComboBox, and a half-dozen other controls), but it is much simpler to extend from MovieClip.

Why it happened to me
I have a movie that is 170KB. There’s a lot of crazy mojo in there, and I want my prel0ader to load within the first 1KB, not after 170KB. So, I created my preloader, removed “Export in First Frame” from everything, and set my classes to export in frame 5 (after the end of my preloader loop). However, this made a few of my Object-extending components no longer work anymore since they were not referenced in the “Assets” layer of any of the other components (no reference=no load, much like the DataBindingClasses), to I had to drag them to the stage to ensure that they loaded.

*Poof*

My world exploded.

I lost two days of work tracking this little punk down. And you already know the rest of the story.

I’ve been working on creating a Flash component for within our LMS that allows a student to view their completion statuses in a curriculum, as well as allows managers to view the curriculum status of all of their students. The component relies on Web Services to volley data with the server. I was having some trouble binding data from my WebServiceConnector to my DataSets because, as it turned out, Flash was holding on to a cached version of the WSDL–a cached version that was ultimately obsolete.

I was on the hunt to find the source, and kill the evil cache file. After clearing out every Temp folder I could think of, I started playing around in my Local Settings folder and it turns out that Flash will forever-store cached copies of your WSDL deep within your ‘Documents and settings’.

C:\Documents and Settings\[user name]\Local Settings\Application Data\Macromedia\[your flash version]\en\Configuration\WebServices\

I just booted every file in the WebServices directory, but I am assuming that you could get away with just deleting ‘WSDLCacheMap.xml’, or if you want to keep the remainder of your cache, just delete the appropriate WSDL cache file (ex: WSDLkgzmcu.wsdl). In any event, once you have exercised your delete button, simply restart Flash and reload the WSC instance, and you will be good to go.

This just toasted two hours of my morning, and ended with a “Huh. I never would have thought of that!” moment. And whenever I have one of those, I like to toss the problem and the solution up here in the hopes of saving two hours from someone else’s morning, someday.

Problem
We have a Scorm course. The course is coded in Flash and heavily relies on FLVs. For one of our client’s sites, we just rebuilt the Staging environment, upgrading to Windows 2003. Ever since the rebuild, this course in question hasn’t worked in the Staging environment. It works fine in Production, but not in Staging. It’s the same code, but it works in once place and not in the other. I hate it when that happens.

Turns out that we didn’t have and needed a MIME for FLVs.

Solution
Crack open INetMgr. (These directions are for IIS6)

1. Right-click the server, and hit ‘Properties’
2. In the Properties window, click the “MIME Types…” button
3. In the MIME Types window, click “New…”
4. Extension: .flv
5. MIME Type: video/x-flv
6. OK, OK, OK, you’re done

Thanks to Don DiCicco for finding the solution to this one. He googled up a link to a similar post on this same problem / solution. And thanks to good ol’ JT for posting the original solution, whoever you are.

“He’s a big pig. You can be a big pig, too.” ~Timon

Turns out that Flash isn’t the murderous killer with the 9-inch chef’s knife. It’s just a big pig. Flash, within this Scorm course, was passing Scorm data to an external JavaScript function. JS was opening an ActiveX XmlHttpRequest object to send the Scorm data to the service via a WebService call (think AJAX). However, Flash was requiring that this be a synchronous call (so much for AJAX). W3C regulates [Hypertext Transfer Protocol — HTTP/1.1RFC 2616 Section 8.1.4] that “a single-user client should not maintain more than 2 connections with any server or proxy.” Flash is busy downloading external assets, so both connections were taken, and it then says “go and make a synchronous XML call.” XmlHttpRequest object doesn’t like making a synchronous call when there are no available connections to the server; it bugs out and the browser freezes.

Hopefully things will be better with Internet Explorer 7. It is slated to no longer use the ActiveX version of XmlHttpRequest object, but rather the XmlRequest object that Mozilla uses. Perhaps this one will handle itself a little better.

Flash movies with multiple external assets can cause the browser to lock up if external Flash assets (videos, images, voice-overs, etc, that are not stored within the SWF) are unmanaged or managed improperly. I’ll use a Scorm-compliant course as an example; the example course navigates from screen using inline Back and Next buttons, and each screen loads unique external animation and voice-over to deliver the lesson topic.

The browser freezes when:
• The user skips lesson information by clicking “Next” in rapid succession (assets are not downloaded to local cache before progressing to next screen)
• The user re-enters a course for which they have a previously saved Scorm-bookmark, and quickly navigate to where they left off, either by menu navigation or by rapidly clicking “Next” (assets are not downloaded to local cache before progressing to next screen)
• The user rapidly clicks “Back” through screens that they did not experience in their entirety (assets were not fully downloaded and stored in local cache)
• The user navigates to other areas of the course through menu navigation before they have experienced the current screen in its entirety (assets are not downloaded to local cache before proceeding)
  The recurrence is exacerbated by:
  • Slower connection speeds (it takes longer to download a single asset)
  • Larger file sizes on external Flash assets (it takes longer to download a single asset)
  • Having multiple external Flash assets on a single screen (it takes longer to download a single asset)

The course does not freeze when:
• The user linearly navigates through the course, experiencing each screen in its entirety before progressing to the next screen or area. (assets are allowed to fully download and store in local cache before proceeding to next screen)
• The user skips lesson information by clicking “Next” in rapid succession through courses that they have previously visited in this session and experienced in their entirety (assets are already in local cache)
• The user rapidly clicks “Back” through screens that they did experience in their entirety in this session (assets are already in local cache)
• The user navigates to other areas of the course through menu navigation after they have experienced the current screen in its entirety (assets are allowed to fully download and store in local cache before proceeding to next screen)

When a user navigates from Screen #1 to Screen #2, any outstanding, incomplete asset downloads from Screen #1 should be stopped before beginning Screen #2 asset downloads. Failure to do so may cause the browser’s request queue to overflow, and freeze the browser window.

Such is the case when assets are not properly managed: when a user navigates from Screen #1 to Screen #2, the Screen #1 assets continue to download with the #2 assets. Likewise, when the user navigates from Screen #2 to Screen #3, assets from Screens #1, #2, and #3 are all downloading. When Flash is downloading enough concurrent assets, a request queue overflows, freezing the browser.

IMPORTANT: Users clicking Next rapidly is not the only cause of this issue. Rapid Next is just the easiest way to recreate it. The important point is that users are clicking next faster than Flash can download the other assets. In other words, navigation is adding assets to the download queue faster than Flash can download them, and the queue is filling up.

• Browser request queue overflow.
• If applicable: HTML, non-flash images, stylesheets, etc, DO NOT download.
• Browser freezes.

• No Browser request queue overflow occurs

Example Code that causes the problem:
narrator = createClassObject(MediaDisplay, “My_VoiceOver”);
narrator.setMedia(”/Assets/MyVoiceOver.mp3″, “MP3″);

// … code omitted …
// … do some stuff …
// … do some stuff …
// … code omitted …

// commented out code
// destroyObject(”My_VoiceOver”);

The code above creates a new object that loads and plays an MP3. However, (because the line of code is commented out) the object is never destroyed and continues to download. If this function is called repeatedly, each time against a different voice-over file, the queue will overflow and the browser will freeze. The same will occur wherever destroyObject (or similar command) is not called.
To fix the code in the above scenario, destroyObject must be uncommented, allowing the object to be destroyed, thus stopping the MP3 download.

Note: This is not the only code scenario that would create this browser-freezing problem. There are many possible commands and variations.