I started with the usual “inspect element” routine, and discovered that the media is streamed via rtmp. This requires an Intermediate Internet Forensics Kit to untangle:

• a way to decode the flashvars variable that is passed by the browser to Flash
• a tool to download the RTMP stream
• a way to play the downloaded file

$ curl "http://sharks.nhl.com/club/gamevideo.htm?id=2011020365" | grep jsonString

rtmp:\/\/flash.onthefly.nhl.com\/ondemand\/NHLHighlights\/mp4:20112012\/02\/0365\/2_365_mtl_sjs_1112_h_continuous_1600K_16x9_1.mp4

Well that is some hideous gibberish, way too many escape sequences. Pipe it through sed 's/\\//g' to get rid of the backslashes. Then it’ll be easy to  pick it apart:

• the host part: flash.onthefly.nhl.com
• the “app”, which is the first two URL path segments: ondemand/NHLHighlights
• the filename, in this case 2_3w65_mtl_sjs_1112_h_continuous_1600K_16x9_1.mp4

OK so now we are ready to download! All you need to do is string all the details together, along with the URL of the swf file which is required for some wort of authentication token, like this:
$ rtmpdump -r rtmp://flash.onthefly.nhl.com -o sharks-habs-hilites.flv \
−−swfVfy "http://www.nhl.com/swf/DynamicLeadThreeColumn.swf?v=5.7" \
--app ondemand/NHLHighlights --playpath \
mp4:20112012/02/0365/2_365_mtl_sjs_1112_h_continuous_800K_16x9_1.mp4
The -o option specifies the output file (don’t be mislead by their use of .mp4 for a Flash video stream) and now you can open it in anything that can play an FLV, Movist or VLC will do fine.

Final note to the folks at the NHL: I know you went to trouble to try and keep people from downloading, um, game highlights? Question for you: if there had been a maximize button on your player, would I have bothered with all this?

My favorite part is the inscription in the lower right corner, which reads:

I will pack it with a wonderful memory. I open it, and look.

Seriously, that is a lot of utility and entertainment for $1.50! Also entertaining is the V mit Umlaut.

Detail from my new "Favric Case."

If, like me, you aren’t a designer and CSS does not come naturally to you, actually getting the CSS to load and work is another story. Here’s what I came up with to get rid of the sea foam scheme on http://www.sfgate.com/:

a:visited {
 color:#282828 !important;
 text-decoration:none !important;
} 

a:link {
 color:#000000 !important;
 text-decoration:none !important;
} 

div.headernav_tile {
 background:none !important ;
}
div.headernav_leaderboard {
 background: none !important;
}

The !important statement after each rule means the opposite of what it appears to a programmer. As the exclamation point symbol is frequently used to express “not”, it’s use here as “more” is counter-intuitive. Fortunately, the use interface for “User CSS” prompts you with this information or I might never have figured it out.

Finally, the a:link and a:visited stanzas are probably useful on most sites you might want to re-style; the last two stanzas are completely sfgate.com-specific.

I’d take it more in stride, but this PostScript preflighting software licenses at $20k/host and stubbornly refuses to use more than one CPU/core. We were considering putting our 2 licenses on virtual hosts to at least free up some hardware, but can we really do that if it’ll consume 70% of a CPU when idle?

Add to that that you can’t run it as a service, you are requred to keep a generic user logged in at the console to run the application.

Fie on you!

Microsoft posted a rebuttal, and one of their point was the integration of a product called OneNote into the Office suite. This was the first I had ever heard of OneNote, so I clicked through to the demo page and found that it requires Flash.

Maybe someone should tell the OneNote team about Silverlight?

Challenges:

1. Google Maps are aligned with “true north”; the old map is aligned with some other north, possibly magnetic north at the time the map was made
2. the horizontal and vertical scales are not the same
3. the old map apparently fell apart and was taped back together; this was not done perfectly and there are a few small gaps and missing bits
4. the scale tends to vary over relatively small distances; agreement between the tiles I generated and Google’s tiles can wander even within one tile

I ultimately decided not to fix items 3 and 4. Fixing the gaps tended to do more harm than good and scale variances require far more graphics-fu than I am ever likely to have.

If you want to cut to the chase & see the map, it is here.

Here is what I did:

• Create a map from Google tiles of the area of the map. This made it possible to determine both the rotation and scaling necessary.

#!/bin/bash
let EX=5236
let WY=12660
while [ ${EX} -lt 5243 ] ; do {
 while [ ${WY} -lt 12670 ] ; do {
 curl -o z15_x${EX}_${WY}.png "http://mt1.google.com/vt/lyrs=m@116&hl=en&src=api&x=${EX}&s=&y=${WY}&z=15&s=Galileo"
 let WY=(${WY}+1);
 } ; done
 let EX=(${EX}+1);
 let WY=12660;
} ; done

To combine all these tiles into a larger map:

#!/bin/bash
let EX=5236
let WY=12660
while [ ${WY} -lt 12670 ] ; do {
 FILES=`ls *${WY}*`
 echo "appending $FILES"
 convert ${FILES} +append ${WY}.png
 let WY=(${WY}+1);
} ; done
YFILES=`ls 12*.png`
convert $YFILES -append whole_map.png

(The convert binary is part of ImageMagick.)

Comparing this image with the downloaded file, I estimated that the rotation should be about 9 degrees counter-clockwise (ie, -9°). I rotated the image with:

convert -rotate -9 whole_map.png whole_map_rotated.png

This created a white background, I wanted the background to be clear. It seems to me you need to know the size of the image to on this image, so to rotate the image I did this:

convert -size 4606x5108 xc:none -background \
 transparent \( whole_map_rotated.png -rotate -9 \) -flatten test.png

This gave me the rotated, clear-background image I needed. Once I started gereating the tiles based on that image, I discovered that if the tile crop area included a negative x or y offset, the image would be scaled awkwardly either in ImageMagick or in the browser. So I added a border area of 500 px on all sides to give a little margin for error. Unfortunately, after a lot of flopping around with ImageMagick, I resorted to Photoshop and the “canvas size” dialog.

Finally I wrote a script to generate the tiles.

Take close look at the map, in the lower left corner. If you follow Market Street to the lower left corner, near a large number 11 is “Kate Street”. This street no longer exists, and it leads to an area labeled “Hospital Area”; this is now Duboce Park and three cul-de-sac blocks of homes, one of which is now Potomac St. It’s fun to see the map agree with what I read in the book by Harry Nimmo referenced in the article.

I am entertaining a fantasy of creating a Google Map of the area and replacing the tiles with the old map. Hopefully I’ll actually get to that.

UPDATE: I’ve checked the Google Maps API, and it seems what I need to do is a “Custom Map Type”, which The Google deems an “Advanced Topic.” They put this in red; I may be in over my head!