I just attended the September Auckland Web Meetup, which had a full house of 200, free beer and pizza, and interesting presentations on the direction of web browsers.

To kick things off Microsoft technical evangelist Giorgio Sardo introduced IE8, which looks to be the most standards compliant browser from MS yet. Giorgio emphasized the large number of test cases IE8 has undergone. Giorgio showed some scripting and JSON encoding/decoding in IE8. He then went on to demo a cross-browser comparison tool, SuperPreview, which can be run as a stand-alone app or as part of Expression Web 3. A free version to compare the different versions of Internet Explorer is available here. The paid version includes other browsers in the comparison beyond Internet Explorer.

After pizza and drinks, Robert O’Callahan and the Mozilla team showed some of the upcoming features of Firefox. Some highlights included:

• Support for accelerometers – with the necessary hardware the browser can recognize the tilt and orientation of the viewing device.
• WebWorkers – An API for asynchronous JavaScript threaded processes (multiple processes running at the same time). Quite interesting!
• Drag and Drop, between browser windows, and from the desktop.
• 2D drawing using the Canvas tag – A simple vector example with apparent rigid body dynamics was shown.
• 3D rendering using WebGL – This was the classic “3D teapot” demo, and I was quite impressed since performance seemed very good in the example.
• Video tag – A variety of video scenarios were shown, such as a plain video tag with the browser’s built-in controls (for play, etc.), one that used JavaScript/CSS to overlay subtitles on the video, and some impressive examples that introduced an image into a green-screened video using just the browser. Also shown was overlaying and manipulating pictures, video, text, and Canvas elements on top of a video that had two reference points, a sort of augmented reality demo. This reminded me a lot of what can be done with BitmapData in ActionScript. A final demo on motion tracking was too cutting edge and crashed the browser.
• DOM storage – an better alternative to cookies for local storage.
• Client-side database storage – Robert cautioned that this may be a bit in the future yet, but the idea is to have a database on the client that can be used for storage, with the potential to have web applications that when offline work better than previously possible.
• Geolocation – Allows the browser to notify websites where you are located.

It was all very interesting. I wouldn’t say I saw anything terribly innovative in its own right, since overall these are technologies that currently or will shortly exist through other means (such as Flash, AIR, Silverlight, etc.), but to see these built directly in a browser is interesting and may open these tools up to a wider field of developers.

UPDATE October 4, 2009: I forgot to mention Geolocation, it’s been added.

A great thing about teaching is that your students approach problems in ways you haven’t done before and run into problems that you never knew existed. This is one such problem in Flash CS4 and a curious one at that.

THE PROBLEM: A Button symbol is placed on the Stage on a frame other than the first frame and given an instance name in the Properties panel. In the Actions panel, ActionScript is added that references the instance name of the button on the same frame that the button instance first appears on. The movie is tested and the following error occurs:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MovieClipInsideButton_fla::MainTimeline/frame2()


Normally this error means that a particular instance has not been given an instance name in the Properties panel on the frame where the ActionScript appears. However, nothing looks amiss in the ActionScript or on the Stage. Adding a trace statement, such as trace(myButton); reveals null in the output window, meaning the trace statement has run before the instance name has been set to the button instance on the Stage. Hmm… very perplexing, since you may have other buttons and movieclips that work fine when referenced from ActionScript.

THE SOLUTION: From what I found, one scenario will produce this error. If a MovieClip symbol (instance) appears inside a Button symbol and the button appears on any frame other than the first frame, and the frame where the ActionScript references it is the same frame it first appears on—then this behavior will result.

There are a few workarounds:

1. Retrieve the instance from the display list of its parent. Instead of referencing the Button instance on the stage directly, use getChildByName(.) to retrieve a reference to the instance, this can even be set to instance name at the beginning of your timeline code, like so:

   // myButton is the name of the instance as set in the Properties panel.
   // Retrieved child is cast as a SimpleButton, since this is the 
   // class of the Button symbol
   myButton = SimpleButton(getChildByName("myButton"));

2. Do not nest a MovieClip inside a Button symbol. A Button nested inside a Button, a MovieClip nested inside a MovieClip, and a Button nested inside a MovieClip work fine.
3. Place the first occurance of the Button instance on any frame before the frame where ActionScript first references it. This behavior appears to indicate Flash is taking too long to parse over the MovieClip inside a Button and runs the ActionScript on the timeline prematurely. Having the instance appear on a frame prior to the frame the ActionScript appears on ensures the instance is completely present in memory before it is referenced.
4. Place the instance referencing code inside an enter frame event handler function. To ensure the entire frame has been parsed before any ActionScript code is run, enclose the offending code inside the event handler function of the enter frame event, and only make it run once, like so:

   addEventListener( Event.ENTER_FRAME , ensureRendered );
    
   function ensureRendered( evt:Event ) : void
   {
   	removeEventListener( Event.ENTER_FRAME , ensureRendered );
   	// All instance referencing code appears below this point
   	// In this case, instance is named "myButton" on the Stage
   	myButton.width = 200;
   }

This behavior doesn’t seem right to me and even seems it could be a bug. If anyone has an explanation for this behavior, I would love to hear it. You may download an example FLA here: Download Source

UPDATE September 20, 2009: I added a new workaround, which is probably the most succinct and reliable one yet to use. See Retrieve the instance from the display list of its parent in the list of workarounds.