Source code (1.45 MB) Flash MX 2004

Creating the Graphics

1. We began by drawing the puzzle top view in Flash then skewing it to add some perspective.
2. Each piece is built up to appear thick and simulate depth.
3. The pieces are then exported from Flash as images and a wood texture is added in Photoshop to finish the effect.
4. Every piece is saved as an individual image, cropped closely.
5. Back in Flash, the images are applied to their corresponding piece as a bitmap fill and adjusted to fit (if needed).

Layering in Flash

The tricky part is layering the pieces so they appear to slot together and create the 3D illusion.

Each piece is split into a base movieclip and separate movieclips for each join. When examining each join, we needed to figure out which parts would move in front of the other parts.

In both of the examples above, the blue area becomes bottom layer, with orange, yellow then green above it respectively.

Once all the joins from each piece have been layered in the correct order, they need to be labeled. The names we chose are made from 3 characters - a “p” and two digits (eg. p12, p31, p44).

The first digit is the puzzle piece number: from left to right, top to bottom (piece 1 is in the top left, piece 9 is the bottom right). The second digit is a sequential number for the separate movieclips that form a puzzle piece, with each new puzzle piece starting at 1.

Animating

In the FLA

A Piece class is created to hold the behaviour of the puzzle pieces. In the second frame of the FLA, nine Piece objects are created - one for each puzzle piece. The number of movieclip parts that make up each Piece are passed into the new object. Basically, a puzzle piece is made of many (movieclip) parts:

var parts:Array = [3,4,3,4,5,4,3,4,3];
var pieces:Array = [];
for (var n=0; n<9; n++){
  var pieceNum:Number = n + 1;
  var numParts:Number = parts[n];
  pieces[n]=new Piece(pieceNum, numParts);
}

The Constructor

Inside Piece.as, each Piece object contains a _parts array. This array holds references to all the movieclip parts that make up that puzzle piece. It also contains each part’s _y position on the stage, relative to the first part of that piece:

public function Piece(pieceNum:Number, numParts:Number){
  ...
  for (var i=1; i<=numParts; i++) {
    var mc:MovieClip = _root["p" + pieceNum + i];
    mc.onPress = Delegate.create(this, this.onPress);
    ...
    if (i == 1) this._startY = mc._y;
    var y:Number = mc._y - this._startY;
    var part:Object = {mc:mc, y:y};
    this._parts.push(part);
  }
}

Each of the mouse events and the onEnterFrame are assigned using the Delegate class to solve scoping issues.

Still inside the Piece constructor, each piece is told to ignore mouse events:

this.isEnabled = false;

Which calls this setter to loop through all the movieclip parts and disable them:

public function set isEnabled(bool:Boolean):Void {
  for (var i in this._parts) {
    this._parts[i].mc.enabled = bool;
  }
  ...
}

The next action in the constructor is to set each puzzle piece to call a drop method sequentially, starting from the bottom right moving to the top left:

var dropTime = (9 - pieceNum) * 1000;
_global['setTimeout'](this, 'drop', dropTime);

setTimeout should seem familiar - unlike it’s sister function setInterval, it only gets called once after a specified interval. I guess that makes setTimeout the ugly sister…

The final action in the constructor is setting the lift property to raise the piece off the top of the screen - ready to be dropped:

this.lift = random(150) + 600;

The lift setter moves each movieclip part relative to the resting position (positive lift moves the Piece upwards):

public function set lift(num:Number):Void {
  for (var i in this._parts) {
    this._parts[i].mc._y = this._parts[i].y + this._startY - num;
  }
  ...
}

Gravity

When the drop method is invoked, it quite simply sets the acceleration of the Piece to -1:

private function drop():Void {
  this.acc = -1;
}

The setter for the acc attaches (or removes) the onEnterFrame from the first movieclip part in the _parts array. If the acceleration is stopped (set to null), it also enables mouse events on that puzzle piece for the first time:

public function set acc(num:Number):Void {
  if (num == null) {
    this.isEnabled = true;
    delete this._parts[0].mc.onEnterFrame;		
  } else {
    this._parts[0].mc.onEnterFrame = Delegate.create(this, this.onEnterFrame);
  }
  ...
}

The onEnterFrame calls the fall method…

private function onEnterFrame():Void {
  this.fall();
}

…which is where all the animation happens. The first few lines of code move the puzzle piece towards it’s resting position at an accelerated rate (GRAVITY default of 0.3):

private function fall():Void {
  if (this.lift > 0) {
    this.acc -= GRAVITY;
  } else if (this.lift < 0) {
    this.acc += GRAVITY;
  }
  this.lift += this.acc;
  ...

The remaining code in the fall method does two things. Firstly, it snaps the piece to it’s resting position when it gets within the SNAP threshold (default of 1) and removes the onEnterFrame.

Secondly, it bounces the puzzle piece off the surface based on the FIRMNESS modifier (default of 0.3). FIRMNESS of 1 is minimal bounce and any greater than that will make it bounce higher on impact. The surface bounce only effects the piece when it goes below it’s resting point and is moving downwards:

  ...
  if ((Math.abs(this.acc) < SNAP) && (Math.abs(this.lift) < SNAP)){
    this.lift = 0;
    this.acc = null;
  } else if ((this.acc < 0) && (this.lift < 0)) {
    this.acc -= (this.acc * FIRMNESS);
  }
}

That wraps it up. Post a comment if you make use of this technique - I’ll be interested to see how it can evolve.

A carefully encoded MathML expression can be evaluated in a computer algebra system, rendered in a Web browser, edited in your word processor, and printed on your laser printer. Source

Like many web technologies, actually achieving this optimistic description in the real world is not straightforward - some care must be taken when placing MathML equations in your HTML pages.

There are three qualities of MathML that make its implementation complicated. Firstly, its verbose XML structure makes it easy for computers to interpret, but difficult for humans to read and edit. Secondly, browser support is limited to:

• Firefox
• Netscape 7
• Internet Explorer 6+ with the MathPlayer plugin
• Internet Explorer 5 (Mac or PC) with the Techexplorer plugin
• Amaya
• Camino

Thirdly, specific fonts are required for displaying some equations. Thankfully, in Firefox if the user doesn’t have the correct font installed they are pointed towards a specific page by the browser and are guided through the font installation process.

This article will provide a brief survey of MathML techniques, followed by an example PHP script for embedding equations and providing alternative content.

Putting equations on your site

Prior to MathML, equations were generally embedded in web pages as images, and many websites continue to do it this way. Relying on images to display equations is far from optimal:

• Can only print at low resolutions
• Can’t search within functions
• No semantic information is stored, so the equation cannot be used elsewhere without transcribing

Other methods included using HTML symbols and CSS, providing the document as a PDF, linearising the notation or “drawing” the equation with ASCII.

Since MathML has become available, people have experimented with different ways of including MathML equations in documents. Below is an inexhaustive list of techniques that can aid in either writing MathML and/or serving up alternative content for people that can’t display MathML.

• Javascript gateway page
  • Requires the user to have Javascript enabled (if you use the default Design Science code, users with Javascript disabled will receive a blank gateway page)
  • Requires the creation and maintenance of two separate sites
  • Having duplicate sites may negatively affect your search engine ranking
  • Causes issues for other sites that want to link to a specific page
• Javascipt ASCII to MathML conversion
  • Requires the user to have Javascript enabled
  • Does not provide structural information, just presentational markup, so the equation can’t be easily reused elsewhere.
• Embed the equation in an iframe
  • Embedding MathML this way means that the outer document doesn’t have to be valid XML, only the document displayed in the iframe does.
  • Could be helpful if you are putting MathML into a legacy template
• Convert TeX equations to MathML on the fly with itex2MML
  • Allows you to author equations in the easer-to-write TeX format
  • There is also a Moveable Type plugin available
• Universal MathML Manager
  • Serves MathML to capable browsers and automatically renders image versions of equations for non-capable browsers
  • Requires Java on your server to render images of the equations
  • It’s an elegant solution, but might be overkill for sites that aren’t dedicated to mathematics
• ASCIIMath server side ASCII to MathML converter
  • Does not provide support for people without MathML capable browsers
  • Like the javascript ASCIIMath converter, it does not provide structural equation markup
• texvc (TeX validator and converter)
  • Server side LaTeX to HTML/MathML/image converter
  • Used by MediaWiki

An example PHP script

I’ve put together a brief PHP script that demonstrates one approach to serving MathML. This script displays MathML if the user’s browser can handle it, or an image if they cannot. Finally, if they can’t display an image it is possible to write a linearised version of the equation within the alt attribute, however this might not be practical for larger equations.

If a user cannot display MathML, this script will prompt them with information about how to install the right plugin, or change browser. Of course, casual users may just be happy to browse the image alternatives.

You can see the script in action here, or download it here. I’ve included some notes on how it works below.

Because MathML is an application of XML, it needs to be placed within a valid XHTML document that is served with the appropriate application/xhtml+xml header. Internet Explorer can’t usually handle this header and normally tries to display it as a document tree, but MathPlayer (as of version 2) kicks in and makes sure the document is displayed correctly. Remember though, if you’re serving your documents as XML you need to make sure the whole document validates, otherwise it will not display at all in Firefox, and instead users will see an XML error page.

With older versions of MathPlayer, you had to either include an object element that told MathPlayer to start, or use an XSL stylesheet. These steps aren’t necessary anymore, you can serve the same XHTML page to all MathML capable browsers.

In theory, you should be able to use the ACCEPT header to determine whether a browser is MathML capable. Unfortunately not all MathML capable browsers correctly announce that fact through the ACCEPT header (like IE with MathPlayer, for example), so you need to examine the USER_AGENT string to see whether their browser supports MathML. In the future you’ll need to keep an eye out for when other browsers implement MathML support so that you can add them to your regular expressions. The content negotiation could happen through Apache, but for portability it is done in this example through PHP. The regular expressions for determining MathML capabilities are based on Jacques Dister’s expressions.

The content negotiation part of the script looks like this:

if ((preg_match("/Gecko|W3C_Validator|MathPlayer/", $_SERVER["HTTP_USER_AGENT"])
&& !preg_match("/Chimera|KHTML/", $_SERVER["HTTP_USER_AGENT"])){
  // BROWSER SUPPORTS MATHML
  $contenttype='application/xhtml+xml';
  $header='<?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd" >
  <html xmlns="http://www.w3.org/1999/xhtml" 
  xml:lang="en">';
  $mathml=true;
}else{
  // BROWSER PROBABLY DOESN'T SUPPORT MATHML
  $contenttype='text/html';
  $header='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';
  $mathml=false;
}

The DTD might not look familiar, that’s because the W3C provides a useful DTD that combines the XHTML and MathML DTDs, which is perfect for embedding MathML into XHTML documents.

Pages parsed by the MathPlayer plugin are unfortunately rendered in quirks mode in Internet Explorer, even in IE7. This may well cause headaches for your CSS layout. There is a workaround for this, but it involves placing another doctype after the first one, which is far from ideal.

Accessibility

Screen reader users should also be able to hear MathML equations if they have the MathPlayer plugin installed. The screen readers JAWS, Window-Eyes, HAL, Read & Write and BrowseAloud all work with MathPlayer. Also important for visually impaired users, equations should increase in size with the browser text-zoom, and MathPlayer includes a MathZoom feature that increases the size of equations in IE, making them easier to read.

By providing MathML for supported browsers, images for browsers that don’t support MathML, and plain text for browsers that don’t support either you can be confident that your mathematical content is accessible to the maximum number of people.

MathML Resources

• Convert text equations to MathML online
• Export MathML out of Microsoft Word using MathType
• Design Science (the maker of MathPlayer) has a range of tutorials on putting equations online
• Instructions on distributing MathPlayer
• Authoring MathML for Mozilla, contains tips on MathML markup
• Summary of authoring for MathML
• The W3C MathML test suite
• Authoring MathML for Mozilla

I spoke about the Navy internet website - the current version, the next version and problems we’ve had.

Over the next few weeks, I’ll be doing more detailed posts (including code examples) for most of the cool things in the current version.

Introduction

• navy.gov.au
  • Improvements
  • Obstacles
  • Future
• Opportunity to share
  • Pool public-service webmaster resources

Background

• Me
  • Navy’s internet Web-Manager, part-time
• Navy’s small web team
  • Content supplied to us
  • We control the code
• Our website
  • Began early 1997
    • Feb 1997
    • Dec 1997
    • May 1998
    • Oct 2001
    • Dec 2003
  • Today, 2,500 static pages
  • 4,000 unique visitors per day

Current Version

• Launched November 2005
• Recruiting is very important
• “Make it sexy”
  • To who?
  • All potential recruits?
  • No, only to Navy Headquarters.
• New content management process
  • Centralised maintenance + A few custom tools = No need for CMS
  • Not as effective for distributed authoring systems

Efficient Maintenance

Standards Based

• Semantic XHTML
• Page title & meta-data generation

<title>
Commanding Officer - HMAS ANZAC (Royal Australian Navy)
</title>
<h1>Royal Australian Navy</h1>
<h2>HMAS ANZAC</h2>
<h3>Commanding Officer</h3>

• Well, nearly there…

Source Control

• Subversion (TortoiseSVN Windows client)
  • Logs all changes
• Helps meet archiving requirements
  • Unlimited development copies
• Smart change-conflict resolution

Rapid Maintenance

• No layout markup
• Header, column break and footer includes

<?php include("files/header.html"); ?>
<h2>HMAS ANZAC</h2>
<h3>Commanding Officer</h3>
<p>Lorem Ipsum.</p>
<p>Dolor si Amet.</p>
<?php include("files/break.html"); ?>
<img src="images/co.jpg" alt="Commanding Officer" />
<?php include("files/footer.html"); ?>

• Pages parsed for:
  • Email obfuscation
  • Page title & meta-data generation
• Editplus will facilitate easy upload

Gallery Mass Uploader

• Put original photos into a local folder
• Run script that automatically:
  • Resizes and optimises the images,
  • Creates thumbnails,
  • Extracts descriptions from the metadata,
  • Zips it all up,
  • FTP’s it to the server,
  • Unzips on the server and
  • Adds the photos to the database.

Other Helpful Features

Google Public Service search

• https://services.google.com/publicservice/login
• Not-for-profits
• Better than previous Google options
• Familiarity, in our template, without adverts

Custom 404’s

• When a page doesn’t exist, 4 types of feedback:
  • Internal broken link
  • Locally cached version
  • Link from external site
  • Incorrect user inputted link (or bookmark)
• Redirection from .HTM to .HTML

Help-bot

• Scans contact requests and offers suggestions
• Decrease in commonly asked questions
• Accurate suggestions to 80% of 400 tested
• Frees time within our team

Issues

• Told a company will redevelop the website
  • No knowledge of web design
• Navy’s never followed a user-centred process
  • They weren’t concerned
• We stayed on the offensive
• Had to educate them both
• We won… for now

Future

• Launch mid-2007
• 9th version of navy.gov.au
• First to address user needs
  • User research
  • Stakeholder interviews
  • User testing

Improvements

Working with identified Business Goals

• Serve public and inform about organisation
• Generate interest in the Navy
  • Entice new recruits
  • Make applying easy
• Defence Force Recruiting works for all services
• navy.gov.au still required as a recruiting tool
• Reinforce values and brand
  • Honour, Honesty, Courage, Integrity & Loyalty

Inform

• Useful, accessible content
  • Lower bandwidth
  • Degrade gracefully
  • Fully Standards based
• Most content not updated often
  • Written for different audiences and mediums
  • Rewritten for the web
• Some content needs to be updated frequently
  • Nobody willing to own content generation

Entice

• Conform with brand
• Promote values
• Entertain
  • Series of online games, interactives and TV shows

Assist

• All elements user-tested
• More business-operations online
• Financial transactions online
• News scraper
• Content shared with Defence Force Recruiting
  • Users shouldn’t have to leave one site to get information maintained by the other
  • All recruiting information should be able to be accessed through navy.gov.au

Central Point of Contact

• Navy information found in:
  • Defence Department
  • Defence Force Recruiting
  • Wikipedia

Richer Visual Experience

• Integrate content photos with gallery
• Photos will link to information about their content

Guest Authors

• Creating a community
• Moderated blog-style posts with guest authors
  • Public and personnel contributions
• “Did you know” style teaser from homepage

Web instead of a Hierarchy

• Tags allow each page to have multiple labels
• Wiki-style, cross-referenced content

Conclusion

• Keen to hear about shortcomings
• Share our techniques and tools