How We Did It: Part 1 – The Ultimate Tourney Guide

| No Comments

We’ve teamed up with ESPN to sponsor the “Ultimate Tourney Guide“, an interactive PDF file you can use to track the results of your ESPN Tournament Challenge fantasy bracket for the NCAA men’s college basketball tournament. Rather than describe it here, you can read more at ADWEEK.

If you’re not a sports fan and you’re still reading this, I’m guessing you are interested in how we pulled this off. Well, sit back and get comfortable because, while none of this is very hard, there are a lot of moving parts so I’ve decided to break this up over the course of a few postings.

Let’s start with the requirements. We wanted people to have the PDF file as a resource that sits on their desktop that they can open from time to time during the tournament and…

  • Instantly see how their bracket is doing
  • Watch videos about the 65 teams in the tournament. By the way, these videos were sponsored by Adobe. I hope you enjoy them.
  • See live news feeds
  • See poll results
  • And submit a form to enter into a contest to win a cool 52″ flat screen HDTV

Lucky for us, the guys over at ESPN really know their stuff. All the data that we need to display the personalized bracket results, videos, polls and news headlines is served up as RSS from the ESPN servers.

In the next few posts I’ll describe in detail exactly how we instrumented each of the aspects of this interactive PDF file. For now, here’s an overview.

Displaying the personalized bracket:
In order to display your fantasy bracket, the PDF file needs to request a personalized RSS feed from ESPN. Once you have the XML response, displaying the data is easy with a little Flex programming. To instrument the PDF file, we needed to find a way to get a unique identifier into the PDF file without the user being required to sign into ESPN.com every time. Well, for those of you who are familiar with Acrobat forms, the solution is probably obvious; FDF of course. For those of you not familiar with how FDF works, stay tuned for the next posting (Part 2) to see how you can use form fields to do a lot more than just fill out Human Resources documents.

Pulling RSS into a PDF file that was opened from the desktop:
When you first opened the Ultimate Tourney Guide, you probably saw a number of security dialogs. These are actually there for your own protection. By selecting “remember my action for this site”, that URL is added to your list of trusted locations and you will not see the dialog for that particular URL again. You can even add entire domains to your trusted locations though not through that dialog. In part 3, I’ll discuss the new Acrobat 9 security model and its impact on this project.

The First Experience:
I’ll just say it – The first page of that PDF file is beautiful. One of our goals was to create an outstanding first-open experience. If you are already using Acrobat or Reader 9 or higher you saw this the top image. However, if you have an earlier version or a non-Adobe viewer you had a different experience. Using an earlier version of an Adobe viewer, a dialog alerting you to upgrade would display and then the document would open – it just doesn’t behave as expected. With a non-Adobe viewer, your results may vary but you should have seen something like the bottom image.

Because this PDF file contains the new Rich Media Annotations we added in Acrobat and Reader 9, it will only work in those applications. Again, because we wanted to create an outstanding first-open experience, we wanted users of earlier versions to see something better than just the update dialog and a static file. So, we added an image to the first page that only Acrobat 9 or Reader 9 can hide. This made it so that the PDF file would be seen properly in the right version but degrade beautifully if not. We used Acrobat forms functionality and a little JavaScript to pull that off. More about that in Part 4.

Basic Navigation:
While I’m on the topic of the first page, how about those navigation buttons? Using some simple Acrobat form buttons with roll-over states, we were able to create that striking home screen. This capability has actually been in Acrobat since version 3 but very few people have used it as elegantly as our designers have in this file. In Part 5, I’ll cover how we created these graphics and turned them into buttons and hooked up the navigation into the rest of the PDF file.

Conclusion:
As I post the remainder of these articles, I’ll create links down here so you can easily access them. Until then, open your Ultimate Tourney Guide, select Team Videos and learn about the teams from Joe Lundari or catch up on news about your team all inside a PDF file… How cool is that!

Read Part 2