Tech it outside

Latest

The ultimate simulations

The lads at BBC’s Click try out their shortlist of immersive simulation…  includes a one-trick bedroom… but what a bedroom!

Online educational resources

I have been a fan of the teaching company for some time which provide audio and video lecture courses in a huge variety of courses, mostly at undergraduate level.

Last week on Mish’s blog I came across mention of Stanford University’s Introduction to AI which is an area I’ve dabbled in with gaming and would love the oppertunity to venture into in greater detail.  Anyway a little extra searching and two friends from non-computer science backgrounds who need to learn about software engineering, for professional and academic reasons, led me to a key resources:

Academic Earth set up by Richard Ludlow with the idea that centralizing online education resources, with lecture course videos contributed from UC Berkeley, UCLA, University of Michigan, Harvard, MIT, Princeton, Stanford, and Yale
Therefore anyone with an internet connection has access to teachings directly from some of the world’s greatest scholars.

Individual universities are also developing this idea…
http://see.stanford.edu/see/courses.aspx – Stanford’s “Engineering Everywhere” site.

There are many academic, social and economic issues that this development highlights and more importantly have the possibility to effect… (and i’m going to need some time to consider) but truely interesting times!

FDT Template for AS3 Singleton

The quest for the perfect singleton in AS3 is never-ending, and likely to cahnge course with future updates to the language.

However my personal favourite goes like this

package com.hiltonline.utils
{

/**
* @author hilt
*/
public class MySingleton
{
private static var _instance : MySingleton = new MySingleton();

public static function getInstance() : MySingleton
{
return _instance;
}

public function MySingleton()
{
if( _instance ) throw(“ERROR : MySingleton can only be referenced through getInstance()”);
}
}
}

This design will throw a custom error if the constructor is invoked.  It can also be added to FDT templates (Eclipse/Preferences/FDT/Editor/Templates)

Name : singleton
Context : AS3
Pattern:

package ${enclosing_package}
{

/**
* @author ${user}
*/
public class ${enclosing_type}
{
private static var _instance : ${enclosing_type} = new ${enclosing_type}();

public static function getInstance() : ${enclosing_type}
{
return _instance;
}

public function ${enclosing_type}()
{
if( _instance ) throw(“ERROR : ${enclosing_type} can only be referenced through getInstance()”);
}
}
}

Serial number rejected after trial use of product | CS4

Here’s a little gotcha that had me filing my nails with my scalp for a little while after I did a clean install of MacOS 10.6 last week.  Luckily there is a support note from those lovely people at Adobe…

http://kb2.adobe.com/cps/407/kb407142.html

The following reasons cause this issue:

* You had initially run CS4 in trial mode.
* You selected English (US) as the installation language.
* Your serial number is licensed for International English or another language other than English (US).

Flash Engineers wanted

Encouraging link to WSJ article posted by Lee Brimelow on the demand for Flash “Engineers”.

Flash Back: Demand Up in Engineering Specialty

With the advent of online social gaming start-ups such as Zynga Game Network Inc. and others—many of which make online games that involve Flash technology—demand for Flash engineers has suddenly surged.

At the same time, the supply of such engineers remains low. It is particularly difficult to find Flash engineers who have both an artistic and computer-science background, say executives. While there are many Flash designers with experience in artistic elements, few are trained in areas such as power and battery management, they note.

To get around the lack of Flash engineers, Mr. Hsu says Mochi Media tries to hire engineers who know programming languages such as Java and then train them to use Flash. “It’s a six-month time investment, but most can pick up Flash very quickly,” he says.

AS3 should be pretty straight forward for developers coming from Java or C backgrounds. Indeed Flex would be a relatively familar style of development environment.
The advent of Flex seemed to be an unspoken tactic to split the designer/developer workflow into Flash/Flex respectively and make Actionscript more attractive to Java and C programmers.

However while I expect the average Java programmer to be better than the average AS3 programmer, I have found that the Flash timeline and visual accuracy when developing to eccentric UI designs are often problems for purer coders (but hopefully alot more fun).

Dammit Jim, Im an Engineer not a Developer

"Dammit Jim, I'm an Engineer not a Developer"

An approach to embedding fonts in CS3/CS4

On the back of my last post I thought I’d put together a little guide to embedding fonts when compiling through the Flash IDE (This does not apply to compiling with Flex SDK).

Displaying text can be a tricky business, there are a few different ways of doing it and each has it’s own issues.

My favorite approach with AS2 and now prefereed approach with AS3 is to place a TextField off stage and embed the required font characters in it.  Once a font has been embedded in this way it becomes available to all other TextFields in the SWF via their TextFormat object.

Note:
I use the term “Embed TextField” to describe the TextField with the embedded font characters, this is typically hidden.  The term “UI TextField” referes to the TextField that is displayed in the UI.

Procedure:

1: Create the Embed TextField:
Place a new Dynamic TextField offstage and use the Character Embedding dialogue box under the TextField properties to specify the character set, (fig 1).

Results: Regular, Bold, Italic

Fig 1: Embedding the character set

2: Create the TextFormat Object:
Assign the font to a TextFormat object using the font “Family” name, (Fig 2).

3: Create the UI TextField:
Create a TextField and apply the TextFormat object.  Remember to set the embedFont property to true or the TextField will use device fonts not the embeded font, (Fig 2).

Assign font to TextFormat object

Fig 2: Assign font to TextFormat object

This method is a work around that should be unnecessary, but it has the advantage in that you can control the size of the characters set that you want to export. It will embed unicode characters, that exporting a Library font for actionscript will not.

However like all approaches there are a few caveats:

Troubleshooting:

1: For a given font each style should be embeded with a separate TextField and the TextField must be Dynamic NOT Static (fig 3).

Results: Regular, Bold, Italic

Fig 3: Embed multiple styles

Fig 4 shows 3 examples. In each case the Embed TextField is ontop and the resulting attempt to render a string of unicode characters in the UI TextField underneath.

  • Regular font style applied with a Regular font Embedded :: result = Regular
  • Bold font style applied (textFormat.bold = true), with a Bold font Embedded :: result = Bold
  • Bold font style applied (textFormat.bold = true), with a only Regular font Embedded :: result = Regular.
Results: Regular, Bold, Italic

Fig4: Results: Regular, Bold, Bold Failed

If a specific font style such as Bold is not available then the UI TextField will display whatever style is available under that font.  If the font is not available at all, then the UI TextField will be empty.

(If the TextField is empty you can check whether a value is being set on the UI TextFields .text or .htmlText properties by switching the embedFont flag to false to display device fonts).

2: Embedded Fonts should be TrueType for rendering multiple styles. Postscript Fonts will only render the Regular font style to the UI TextField no matter style what is made available in the Embed TextField.

3: The available styles are Regular, Bold, Italic, Bold Italic (the combinations that can be specified by the TextFormat object).  If the font style is named “Light”, “Medium”, “Semi bold” etc, then the style will not be recognised and the Regular font (if available) will be displayed instead.

4: You can have everything right and still be unable to render certain characters. This is due to the character being absent from the font or mapped differently.
An embedded character that does not exist in the font will be rendered as a rectangle.  A character that is not embedded in the first place will not be rendered at all.

Fig 5: Embedded but unmapped Characters

Font embedding in Flash CS3/4

Another seemingly perpetual problem popped up on the project this week.

Flex seems to have the issue of fonts sorted out. There are ways to embed external fonts, embed fonts dynamically and specify charater sets in code.

Working in the Flash IDE however still seems rather frustrating.
First off, Flash does not understand the [Embed] meta tag.  The equivalent is to include the font in the FLA library and export for actionscript.  You then assign the font to a TextField using the TextFormat object.

However when doing this I found that special characters would not render (eg: “≥”).

After a little digging* I found out that unicode characters are left out of embedded fonts and you can only use Basic Latin characters, a problem in CS3, and apparently still a problem in CS4.

The solution (my favorite AS2 method) is to to place a TextField offstage and use the Character Embedding dialogue box under the TextField properties to specify the character set.

- The problem described
http://tekkie.flashbit.net/flash/embedding-fonts-in-flash-cs3

*Other Flash/AS3 font links
- Basic font embedding

http://www.adobe.com/devnet/flash/quickstart/embedding_fonts.html

- Good forum thread from Tink (worth a read for flash and flex font issues)

http://www.tink.ws/blog/embedding-fonts-in-as3/

- Sharing fonts between SWFs in Flash AS3

http://www.communitymx.com/content/article.cfm?cid=67A61

http://www.communitymx.com/abstract.cfm?cid=CBD65

focus after removeChild()

This issue popped up in a project that I was doing this week, hope the explaination and solution will be of use.

If a display object has focus when it is removed from the display list, then keyboard listeners on the stage will no longer receive the KeyboardEvent.  If the user then clicks back on the stage KeyboardEvent will be received again.

It is easy to imagine this happening with a dialoge box:
You click the “OK” button so the dialogue box has focus. Then the dialogue box is removed from the display list and/or for garbage collection.

The fix is to reset the stage focus after removing the display object.
stage.focus=stage;

(Alternatively you could just set display object visibility to false, leaving it in the display list… However this might be asking for a memory leak depending on the the situation).

Debugging an SWF at runtime, (or) how to output trace() from a browser.

Introduction
This post refers to browser debugging with
Firefox 3.6.8
MacBook OSX 10.4.11 (Intel)

There are 4 main steps to getting your environment up and running for debugging.

  1. Install the Debug version of Flash Player.
  2. Configure the Debug player with mm.cfg.
  3. Check the debug player is writing to the logfile flashlog.txt.
  4. Track the logfile output in realtime.

1: Install the Debug version of Flash Player

1.1 Go to the adobe download page:
http://www.adobe.com/support/flashplayer/downloads.html

1.2 Download the plugin content debugger dmg file.
http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_plugin_debug_ub.dmg

1.3 Close all browser windows, open the dmg, and run the plugin installer (I also archive a copy of the dmg file, renamed with the version number).

1.4 Check the player has installed correctly by opening you browser navigating to some flash web content. CTRL + Click on the swf stage area and you should see the context menu with an item named “Debugger”.

flash debug player context menu
Default context menu for debug player

You can also check your Flash Player is a debug version by checking the version and isDebugger properties of the flash.system.Capabilities class. A test SWF file can be found here.

2: Configure the Debug player with mm.cfg.

The Debug Player configuration requires the the creation of the mm.cfg file.
(Oddly this is not created automatically when the debug player is installed).

2.1 Create a config file mm.cfg (it’s just a text file with *.cfg tag) and save it to
HD/Library/Application Support/Macromedia/mm.cfg
OR:
HD/Users/username/mm.cfg

2.2 Add the following lines to mm.cfg file
ErrorReportingEnable=1
TraceOutputFileEnable=1
MaxWarnings=0

3: Check the debug player is writing to the logfile flashlog.txt.

The flashlog.txt is a text file which the Flash debugger player writes all the trace/error messages into. It must be created at the default location of:
/Users/username/Library/Preferences/Macromedia/Flash Player/Logs/

3.1 Navigate to some flash web content that has a trace() statement output. Then open the flashlog.txt and eyeball the output. (test file here)

Troubleshooting:
3.2 If the text file is blank then there is no output or no recorded output
- Close and reopen the browser (Question 1 from every tech support help script :)
- Ensure that the flash content actually has some trace() statements to output.
- Ensure the flashlog.txt is not opened BEFORE you navigate to the flash content. (close and reopen the file).
- Double check the steps above have been followed correctly. Ensure ErrorReportingEnable and TraceOutputFileEnable are set to 1 not 0.

4: Track the logfile output in realtime.

Now that you have a working and configured debugger that is writing to the flashlog,txt you might want a user friendly way of tracking the output in real time rather than manually opening the flashlog.txt.

My prefered methods are:
Track output 1: Flash Tracer a Firefox plugin by Alessandro Crugnola [sephiroth].
Install FlashTracer from http://www.sephiroth.it/firefox/flashtracer/
When you restart firefox you can open the FlashTracer panel from the Tools menu and if your logfile.txt is being written to in part 3 then you should see the contents of the log file in the FlashTracer panel.

If you see nothing then make sure that FlashTracer in pointing to your flashlog.txt file by checking Prefences (spanner icon in the FlashTracer Panel) > General Settings > Select Output File.

Track output 2: Terminal (Mac OSX)
Open the terminal Applications/Utilities/Terminal
At the prompt type:
tail -f /Users/dsmith/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

Or you could save time by typing:
tail -f (with a trailing space, then drag and drop the flashlog text file onto the terminal shell window).

(Note the backslash in the file path because of the space character in the name of the “Flash Player” directory).

Notes:

1: Standalone Player
Once your debug player and log tracking is up and running there is nothing stopping you from using a standalone projector with debug.
You would have to use the “Projector content debugger” version from the flashplayer downloads page and ensure it was targeted correctly when launching when an swf.
The projector will output to the flashlog.txt and the terminal or flashTracer will automatically track this as with browser debugging.

2: Location of mm.cfg file.
On Mac OSX, Flash Player first looks for looks for mm.cfg in home directory: HD/Users/username
If the file is not found it then checks in:
HD /Library/Application Support/Macromedia
However that only seems to happen on first run, once the mm.cfg has been found the Flash Player always uses that location.

3: Definition of mm.cfg properties.

TraceOutputFileEnable – Boolean enables/disables trace() statements being written to flashlog.txt.
ErrorReportingEnable – Boolean enables/disables ERROR messages being written to flashlog.txt.
MaxWarnings – Maximum number of messages that the debugger will write to the logfile before stopping. a value of 0 means all messages will be recorded. Naturally the more messages outputted may hinder performance of swf.

The mm.cfg file used to have a TraceOutputFileName property. This allowed a custom location to be defined for the output logfile. However since Flash Player 9,0,28,0 The default location of flashlog.txt cannot be modified and this property has become redundant.

4: At the time of writing the latest debug player is
10.1.82.76

Flash Player update 20-Sept-2010 version 10.1.85.3
For security vulnerabilities see security update notes

Links:
Configuring the debugger version of Flash Player:
This contains lists of the locations for mm.cfg file, flashlog.txt across multiple OS and descriptions of the mm.cfg properties.
http://livedocs.adobe.com/flex/3/html/help.html?content=logging_04.html