PGA Merchandise Show Flash App
Currently underway in Orlando, Florida, the PGA Merchandise Show is an enormous four-day expo attended by just about everyone involved in the world of golf. As part of PGA.com's presence at the event, I developed and designed a Flash application that could run on multiple 42" plasma displays stationed throughout the 500,000 square foot convention hall. The challenge, for me, was to create a reusable application in Flash that could dynamically load and display news from the show, general news from PGA.com, photos from the show floor, and a rotating schedule of events. The concept, in a nutshell, was to load the app once on each screen and leave it alone for the duration of the event, while providing visitors a constant, rotating stream of fresh information (similar to the monitors you see at airports).
The editorial workflow (for news) went like this -- the editor on the show floor could post stories to PGA.com, ColdFusion would create an updated RSS feed, and the Flash app would instantaneously refresh with the updated content. In other words, a writer on the show floor could write a story on their laptop, click 'Publish,' turn around, and see their update appear on the big screens within a couple of minutes. [screenshot of news screen]
As for the schedule, all the show times, events, and locations were stored in a xml file. The Flash app would check to see what the current day was, what time, and how many minutes into the hour we currently were, match that data up with the schedule, and then display the next five events. [screenshot of schedule screen]
Rounding out the presentation was a photo gallery, which loaded jpegs anyone could put on the server, information on when the next webcast was coming up (and if it was happening now so people could watch in person), and a little weather bug for current Orlando weather conditions.
An interesting challenge was getting the app to display full screen. I could have constructed a Flash projector, and sent that file down with the crew, but then I wouldn't have been able to update the swf if something went wrong (and someone would have to start a new projector on every screen, some nearly a mile apart). The solution was to load the app remotely through a web browser from the show floor, so the screens could be left alone, and I could update the swf (if catastrophe struck) from Atlanta (additional coding was also added in case the expo's network connections went dead too). But that presented additional challenges as well.
To get the app to display on the 16:9 plasma, the object/embed code in the html was set to "exact fit," so even though the video cards in the iMacs (which powered the screens and were hidden) didn't detect the widescreen ratio of the Philips display, the Flash movie scaled to fit flush to all four corners without stretching (the original movie's dimensions were 800x450, a 16:9 ratio). Additionally all graphics in the app had to be vector, so they would remain clean when scaled.
Finally, to kill browser chrome, push the browser window completely full screen, and prevent unwanted tampering, I used the Saft plug-in for Safari (which worked beautifully, and made the application look like a television signal).
Looking forward, PGA.com could easily reuse the whole application, or parts of it, for each section was powered by custom Flash MX components I built. So with minimal fuss I could put together another kiosk-style app by dragging and dropping components onto the stage and pointing them to whatever data feed we wanted.
All told, I'm pretty proud of the result, for the whole deal was storyboarded, composited, designed, and developed within a couple of weeks. It's one of the most dynamic, challenging Flash pieces I've created thus far, and everyone seems to be thrilled with it (especially since they don't have to lift a finger and Flash does all the work).
Comments
Another amazing production, Todd. Thanks for going into detail with your projects as to how you build them, it provides some great ideas. Also it looks great, too!
Posted by: Russ at January 31, 2004 1:30 PM
Wow, sounds and looks very impressive. Nice work. I love to hear stories like this about successful uses of Flash.
Thanks for going into detail here, it makes for an enlightening read.
Posted by: Keith at January 31, 2004 2:01 PM
Congratulations, awesome setup!
The company I work for is currently betting a lot in the digital signage concept. We are based in Alpharetta, and I know you don't live very far, so I figured I'd show the upper Gods of management your work, if you don't mind.
Do you think you could cut a static demo version of that app?
Posted by: Jordi Bunster at January 31, 2004 2:08 PM
Nice work Todd, very nice.
Posted by: Tom Dolan at January 31, 2004 2:11 PM
Question: was the Flash app interactive for general audience members (via a Mac keyboard) - I'm assuming yes? or driven by presenters and PGA.com crew?
Posted by: Tom Dolan at January 31, 2004 2:15 PM
"Question: was the Flash app interactive for general audience members (via a Mac keyboard) - I’m assuming yes? or driven by presenters and PGA.com crew?"
The screens were pure "push." Interaction could have easily been added, but the screens were hung overhead and on walls so visitors could watch the app automatically cycle through each "scene" (hence the left-side timeline that automatically moved to show the user where in the presentation they were). As I mentioned before, think airports. :)
Posted by: Todd Dominey at January 31, 2004 2:21 PM
Wow ... that is really cool. Had to be pretty rewarding as well.
Posted by: Woody at January 31, 2004 2:56 PM
That is beautiful, and I never would have thought of using Flash for hi-res large-scale displays like that. I know the local AMA (Marketing) gives awards for best kiosk/display, you shoud enter this if your chapter does the same.
Posted by: Matt at January 31, 2004 6:30 PM
Very nice work Todd, and perhaps one of the most innovative uses of Flash that I've seen in a number of years.
Posted by: Jesse Wilson at January 31, 2004 9:08 PM
pip pip cherio!
good work! looks stunning.
Posted by: scott allison at January 31, 2004 9:55 PM
How did you find building components? In the end, did you really think they were necessary? Was it worth the effort?
Did you use Flash Remoting for the news feed updates? Or did you simply do a timed event loop to check for updates?
Posted by: philip at February 1, 2004 4:48 AM
"How did you find building components? In the end, did you really think they were necessary? Was it worth the effort?"
I could have used just normal movie clips, but I decided to go the extra mile and create components instead. Granted, I would be the only person using the components, which kind of goes against the traditional use of them (they're mainly intended for third parties to drag, drop, and use), but the component structure came in handy for quick visual tweaks, like font size, the pixel gutter between objects, etc. So the extra time it took to make components paid off towards the end when I didn't feel like mucking around inside a movie clip's ActionScript.
"Did you use Flash Remoting for the news feed updates? Or did you simply do a timed event loop to check for updates?"
Timed event loops. I created a global timer which accepted variable seconds from each scene. So, for one scene, I could set it to pause for 30 seconds, another 10, etc. Additionally, the timer events we fired only after the content was loaded, so if the server got slow, you wouldn't see the news for, say, 5 seconds. We *could* have used Remoting, but it was honestly much faster to do it with loops and cron jobs.
Posted by: Todd Dominey at February 1, 2004 10:32 AM
Thanks for mentioning SAFT. Didn't know about it. Great little thing.
Posted by: Frank at February 1, 2004 11:51 AM
How about the URL to this slick little app? I'd like to see it run in my browser to get some idea of it in action. great work!
Posted by: user at February 1, 2004 12:17 PM
i'm more interested on how the hell you got an imac to power a plasma
Posted by: jon at February 1, 2004 12:42 PM
Two thumbs up man, I wish I could see this bad boy in person.
Posted by: nat at February 1, 2004 1:16 PM
dood that thing looks HOT!!!
awesome work on the flash app
Posted by: Benjamin at February 1, 2004 4:59 PM
And here's me thinking I am good at Flash. Thanks for putting me streight. ;-) Now I know what good is.
Posted by: Paul Michael Smith at February 2, 2004 3:45 AM
Beauty, Todd. Love it -- color scheme, layout, everything.
Posted by: Cameron Moll at February 2, 2004 11:18 AM
Hey, we can see the cursor in that screenshot ;)
Seriously, incredible.
"Your kung foo is the best." - The Lone Gunmen (X-Files)
Posted by: briguy at February 2, 2004 4:40 PM
Great work-
Quick question about the Plasma / iMac combos, how were they connected?
I didn't think the iMacs could power a second monitor, were the Plasmas low resolution using SVHS signal or were they HiRes using RGB or some other combination...?
Thanks in advance-
J-P
Posted by: j-p at February 2, 2004 6:39 PM
"Quick question about the Plasma / iMac combos, how were they connected?"
We used the standard VGA video out adapter that Apple supplies -- the one with the small plug on one end, and a VGA jack on the other. The Philips displays had built-in female VGA cables, so we then used a male--male VGA cable to connect the two together.
Posted by: Todd Dominey at February 3, 2004 9:01 AM
Question: Why was flash used? Looking at the screenshots, the same effect could have been accomplished with simple XHTML/CSS.
Posted by: huphtur at February 3, 2004 2:27 PM
Hey Todd,
what font did you use btw?
Posted by: Benjamin at February 3, 2004 11:30 PM
Very impressive. Seems to be a killer app. :-) Do you think you could release (and sell) a generic module that one could tailor to fit the needs of the current show being attended to?
Keep up the good work!
Posted by: Michael Guitton at February 4, 2004 9:40 AM
what font did you use btw?
Avenir from Adobe.
Posted by: Todd Dominey at February 6, 2004 10:12 AM
This sounds very impressive, and just goes to show how much you can do with flash.
Posted by: Brian Andersen at February 8, 2004 1:04 PM
Thanks for that Todd,
*goes off to ferret through the mass collection of fonts*
Posted by: Benjamin at February 8, 2004 4:46 PM
Which version of flash are you working in now? MX 2004? Pro? Just curious. Great work!
Posted by: erik at February 14, 2004 1:58 PM
QUESTION: So the Plasma monitor scales the flash movie up to the plasma monitors final resolution? What would happen if you designed your flash movie at 800x600? It would crop the bottom off but still fill the entire screen?
Posted by: Doug at March 31, 2004 1:56 PM
