p. !>http://farm1.static.flickr.com/191/455304405_768fc233c2_m.jpg! Earlier this year I was given the opportunity to visit one of Nashville’s hidden gems, “Athlon Sports”:http://www.athlonsports.com/. Athlon Sports is tucked away in a non-descript building near downtown Nashville. Inside is a 40 year old company, well respected in their field that has been, not so quietly, moving into the world of on-line games. Traditionally, they publish Pre-Season Annual sports magazines. Before your favorite sport’s season begins, Athlon probably publishes a magazine on it. These days however, their interactive division publishes their web site along with many private label on-line games.
p. I sat down with Bryce Wells, the manager of the on-line division, Corey Snyder, their lead Flash designer and Mike McCracken, their lead game (PHP) developer, to talk about their latest release in the on-line gaming arena, “www.pepsifantasyracing.com”:http://www.pepsifantasyracing.com. We talked about their use of Flash for the front-end, PHP for their backend and how they brought it all together to make one of the most unique user experiences you’ll ever see.
p. **Given that Athlon’s business has always been traditional magazines, how did you get into interactive and the web?**
p. **Bryce:** Most people know us on the consumer face as a magazine publisher. We are the leading seller of pre-season annuals at the newsstand. We only distribute on the newsstands. We have 16 titles now with our biggest titles being the seven regional college football titles we publish and then our pro football issue. We also cover racing, golf, baseball, pro and college basketball. All those magazines are what people know us for. We’ve really enjoyed some great success.
p. But what makes us unique in the marketplace and one of the keys to our success is our trade communications program that we offer to our business clients. Basically, what that means is we use the power of sports to help our clients break through the clutter and reach their clients. Whether it’s a magazine mailing, handbook, or newsletter, we provide printed products that help our clients communicate their products and services to their target audiences.
p. We’ve been publishing our preseason annuals for 40 years and we’ve been building our trade communications business for probably the past 25. Somewhere along the way, people started asking “How do I know if they are receiving these, if they like them, etc.” So we started doing a business reply card which was a ‘pick-em’ contest. It was a piece inserted into the magazine or handbook or newsletter that you could rip out, fill in your name and 10 teams that you thought were going to win. Then you just faxed or mailed it in. We still process thousands of entries each week with this system.
p. About 5 years ago we saw the opportunity to re-cast these games online and provide the end-user with a richer experience and our clients with greater efficiencies. What started out as one small leg of our trade communications program has really taken off. This division has grown because of all the private label fantasy contests. Internally, we call them fantasy contests. As a member of the FSTA, we should know better and describe them as ‘Pick-Em’ contests, but our clients don’t really care about the differentiation.
p. No matter what you call them though, what we know and what our clients have learned is that these games are a good way to get customers and potential customers involved, get them engaged and really turn them into “brand ambassadors.” by playing. So that’s how our on-line games came into being.
p. **Let’s talk about the Pepsi Racing project. The first question that comes to mind is your choice of technologies. Why did you choose to build the front end in Flash instead of Ajax or some other Rich Internet Application technology?**
p. **Corey:** We really wanted to create the best fantasy racing site out there. Flash was something we definitely wanted to incorporate into the mix. For example, we have several specialized video messages recorded by Jeff Gordon that appear throughout the game based on your performance. These videos only appear on certain pages and when specific criteria are met, they don’t show every time. This means if we left a space for the video in an HTML layout, it would be dead space eighty percent of the time. Using Flash, we were able to incorporate the video, along with the intro animation, right into the main banner of the site and have it front and center.
p. In our effort to make this the absolute best, we used several of the new classes that came out in Flash 8. This gave us control that wasn’t previously possible. The runtime filters created on the car gave it a realistic feel, with outlines and drop shadows. I used the Bitmap class a lot. Mainly for the coloring the imported PNGs like the car body, the themes, etc. Before we would have had to create a limited number of color swatches and it would have really limited the users choices. Using the new getPixel() we were able to pick any color under the rainbow in real-time.
p. The other neat thing about the bitmap class is that it allowed us to create our coolest feature, the signature feature. It allows the user to sign their name to the car and give it a real personalized feel. Flash not only made all of this possible but it made it really easy. We were able to give the user a very unique experience.
p. **Bryce:** I don’t know that we could have developed this site using any other technology other than Flash. When you look at all the features we put into the user experience, design your own car, embedding videos into the header of the game, the highly stylized navigation, etc. I don’t know that we could have pulled this off without using Flash.
p. **Mike:** We did actually consider using Ajax and CSS to do this. Really though, to get the look and feel we wanted we had no choice but to use Flash.
p. **Corey:** Also, it’s getting to the point that there are so many platforms and browsers out there that it would have made it a nightmare to get it all working across all of them. With Flash, what you see is what you get…everywhere.
p. **Bryce:** We already had that problem with regular HTML layouts, we didn’t need it with something so highly interactive.
p. **You said you looked at Ajax and CSS before you chose Flash. Did you consider any other technologies, anything from Microsoft?**
p. **Mike:** We are really a LAMP shop so that pretty much ruled out .NET and other Microsoft technologies. When you compare the technologies that can do what we did, Flash is really the pinnacle of those technologies. It delivers the best user experience on the web.
p. **You mentioning that you are a LAMP shop makes a nice segue into PHP. Why did you choose PHP to be the ‘P’ in your LAMP?**
p. **Mike:** It is the technology that we’ve developed all of our backend on. We have a custom framework that we have developed for our games and it’s all written in PHP. We are a PHP shop so it’s easy for us to get things up and running using it.
p. **Why did you choose to develop an in-house framework and not use one of the existing frameworks available?**
p. **Mike:** The way that we do things is very client specific. The frameworks that are out there are more did not meet our needs. We don’t do a lot of form validation or content management applications. Our framework is designed specifically to work with our games and how our clients wanted their games to work.
p. **How does the Flash and the PHP interact?**
p. **Mike:** Right now it’s just a set of calls to URLS. We looked into doing some Flash Remoting but at the time it just wasn’t the way to go for us. We needed a faster development environment. What we ended up doing was setting up some scripts to generate XML that we can pass into Flash. The scripts take the parameters off of the URL and use them to generate the XML.
p. **So the Flash makes something like a REST call to your backend server?**
p. **Mike:** Yes and it just returns XML.
p. **How hard was it to get Flash talking with the back-end server in this manner?**
p. **Corey:** Honestly it was pretty simple. The most difficult part was me and the XML. I’m not a real XML wiz. A good example is when you actually save the car. When you click to save the car it sends out a string of variables that describes all the options you have selected to a PHP script. These are stored on your record in the database. When you come back, Flash makes a call to the API to retrieve those variables. The information comes back in as an XML payload and then we are able to rebuild the car.
p. We do it this way instead of saving just the image of the car to give the user the freedom to come back in later and make changes. If for some reason they colored their car orange. They can come back in at a later date, keep all the logos, keep all the themes but change just the color.
p. Also, it helps our servers out a lot. The only way to get the JPG out of Flash would be to send a long string of pixels back to the back end and rebuild the image in PHP. With the number of players we have playing this thing; it would just be too much of a load on the servers.
p. **Bryce:** Well, it’s also the nature of the game. The car is meant to be somewhat fluid based on your preferences for that day. You can come in and change it whenever you want. We talked about saving off your favorite versions of the car. In that case we would find a way to output it as a image. This would be a feature that we would unlock later on in the season as users play and achieve a certain number of points.
p. **Mike:** This method also allows us the option to do some reporting on the data. We can report on the options user have chosen, the most common number, the most popular color range, those kinds of details that we wouldn’t have access to if we were just saving off the image.
p. **Corey:** It’s definitely neat because it gives the users the ability to show to the world their own little creative piece that they made for this game. It was created as a user experience piece for its wow factor.
p. **Now that this system is live and in production, how well is it scaling?**
p. **Mike:** Luckily, we have a very good system administrator that was able to get a nice MySQL cluster setup and running for us. Before we have a few MySQL servers that were kind of running together but now we have a real cluster and if things do start to slow down a bit, we can always drop in another box.
p. **Bryce:** Without going into the details of how our system is setup, I can say that we’ve got a good setup behind redundant load balancers. This point goes back to the question though of “Why PHP?” We chose PHP because it’s never failed us. When we have experienced bottle-necks with our games what we’ve found is that they were mainly caused by our code, not the system itself. We’ve had to recode some pieces and in some cases, we’ve had to redesign pieces of our database.
p. **One final question about your hardware and hosting, are you hosted locally or are your servers hosted remotely?**
p. **Bryce:** Both, we are hosted locally but not here in the building. We were in a data center in Saint Louis for a while but manageability became such an issue for us that we decided to move everything down here to Nashville. Now when we have problems, it’s a five minute drive, not a five hour drive.
p. **Switching back to PHP for a moment, how big of a part does caching play in your design? Do you use a templating engine of some kind?**
p. **Mike:** We use one of the templating packages in PEAR. The only real caching that we are doing though is of the external XML feeds we are bringing in. This way we don’t have to be constantly grabbing the feed from our service partners.
p. We also use MySQL’s query caching also for all our database queries.
p. **Final question, when you are working on your PHP code, what IDE does your development team use?**
p. **Mike:** Actually, I personally prefer emacs. It’s what I learned in college. I’ve used it for Java, c++ and now PHP.
p. **Bryce:** We both use emacs and have the syntax highlighting turned on. When I’m talking to people about PHP, I often equate it to learning the guitar. Anyone can go out, buy a guitar, and learn a few songs, however owning that guitar doesn’t make them a musician. The same goes for PHP. It’s such a simple but powerful language that anyone can go out, buy a book, learn a few functions and write a quick web page – but that doesn’t make them a programmer or web developer. An IDE usually provides so many “helper” features it actually prevents someone from truly learning the language – I find they can’t write a line of code in a text editor. And once you’re established with a text editor, it’s hard to switch to a new environment.
p. I would like to thank Bryce, Corey and Mike for taking time out of their schedules to talk to me about Flash, PHP, www.pepsifantasyracing.com and all of the exciting things they are working on. After the interview concluded I had the chance to talk to them about what they are going to do to top “build your own car”. Unfortunately, all the cool and exciting things they are working on are still under wraps. All I can say is, “your going love what you see next.”