Tagged with: flash
The Thumbplay Widget: The Evolution of Rich Media Ads

For me, it all started in 2007. I was still pursuing my BFA in New Media Design at Rochester Institute of Technology. My friend Adam Barnum had just gotten a designer position at Thumbplay. As it turned out, they were making a huge marketing push to sell mobile content, their major product at the time being Ringtones and Wallpapers (their current services now push Full-Track MP3’s and soon, streaming music, but I digress). They had designers, but they needed a Flash person to help implement their designs. I agreed to help, and we were soon on our way.
I was doing tons of Flash banners, from regular website banner sizes (728×90, 160×600, 300×250) to even the banners that were displayed on the top of AOL Instant Messenger buddy lists. Each banner had around 4 pieces of content. The process was simple, create a template file in all shapes and sizes using their creatives, and cut and paste all the new content in. The issue here was that all of the advertisement companies enforced ridiculously strict file-size requirements (think 15-20k, really ridiculous, considering the amount of content that was in these banners), and so I would be optimizing all aspects of the banner until the banner’s file size was under the threshold. SWF file size optimization almost became a science – recreating as many of the design assets in Flash (because more images mean a larger file size, and re-drawing designs in Flash are vectors, which are math-based and have a much smaller file size), compressing images as small as they could be without the loss of quality, and using as few embedded font faces as possible.The audio previews were pulled dynamically from Thumbplay’s CDN servers, so there was no issue there. I became a machine, generating so many Flash banners over such a short period of time that my classmates had started calling me the “banner guy”, and they came to me when they needed optimization help on freelance projects that dealt with banners.

One of my contract projects shortly after that was a Flash module for a landing page, codenamed “Lefty” (above). It was a pretty simple setup, an XML-driven Flash module that displayed album art and played previews. There were next and previous buttons that would let the user cycle through content. The Flash module was placed into an image of a phone on the landing page, and the creative/marketing team at Thumbplay were extremely happy with the results. The benefit of having dynamic content powered by an external XML file was a huge time and money saver, and they were able to update the landing pages internally with new content, whenever and with whatever content they wanted.
Because of the amazing portability of this setup, they became XML-hungry addicts. XML this, XML that! Pretty soon all of the Flash banners I created for them had the great power of XML driven content behind them, and they were able to maximize impressions, which led to more subscriptions. Best of all, there was only one .SWF file per size, per design, and they were able to create banners by simply creating a new XML file and changing the XML URL flashvar that was passed into the banner.

I graduated in May of 2008, and they scooped me up to bring me in house. Most successful of all the banners was Thumbplay’s Google Gadget, a Flash widget that was served on Google’s Gadget Ad Network. The biggest advantage to this network was that Thumbplay’s marketing team could have the widget content match the webpage’s content around it, for example, a Kanye West Widget on Kanye’s Flashing Lights YouTube music video page, the popular Daft Punk soundclip site iDaft(above), or a Britney Spears widget on a popular Britney news blog(the first photo in this entry). Being able to customize an ad based on the content displayed on the page made it more likely for people to want to click it, and increased click-through rates severalfold.

For even more exposure, the folks in the business development department decided to take these ads to MySpace for Thumbplay Open, an affiliate program where artists and other partners could make referral money when people subscribed through their links. We ran into a roadblock here, because MySpace doesn’t allow link-outs from Flash modules embedded on MySpace. We managed a work around, which was just to include an html footer that linked to a general landing page. That way we could still have the customized content while being able to make our affiliates money. We were able to create the Widgetron (above), which allowed our partners to easily create customized widgets with personalized music lists, colors, and sizes. Our Affiliates would then be able to copy and paste the embed code on their sites; the whole process could take less than five minutes. Today the widgets are embedded on hundreds, if not thousands of artist MySpace sites.
The widgets were huge. At one point we were acquiring many thousands of subscription sign-ups a day! Everyone loved them, even our competitors. Over half a year later, we saw many attempts to imitate our success, with similar gadgets popping up around the web, made by rivals Jamster, Sendme Mobile, and other rival companies as well (below).

Imitation is the best form of flattery, isn’t it?
The views expressed in the above entry are my own and do not necessarily reflect those of Thumbplay, Inc.
FITC 2008 Recap
As attending FITC in Toronto for the first time last year was a life changing experience, this year I bought my super early bird ticket, in hopes of another great event. And it was. In fact, in the past year I feel that I’ve advanced pretty far in terms of knowledge related to the industry (a lot of it thanks to Matt Wright from Rokkan, Adam Barnum, and Jason Arena as well as my other professors from RIT New Media), and I’ve had a lot of enlightenment from the websites of many of the speakers that were present at FITC; it made each and every presentation that I went to all the more valuable.
This year, the amount of RIT New Media students that attended the event has almost doubled, and so we definitely didn’t get as lost in the crowd – in fact, we were the crowd! (at many of the sponsored parties, at the least! ) It’s good to see more of the underclassmen there at the event, taking advantage of both the student pricing and the close distance that Toronto is to our school. I’m sure a majority of them enjoyed the event and were inspired by the speakers.
On Sketchnotes: In my last post, I had written about Mike Rohde’s inspirational sketchnotes from sxsw. Sketchnotes are hard. Whilst sitting at Jason ‘JTed’ Theodore’s creative presentation, How To B.S.(BrainStorm) Better, I attempted to take sketchnotes, but I found that often JTed was speaking too quickly for me to actually take notes neatly. I ended up re-sketchnoting the notes from his presentation, which ended with the result below:
Next time I’ll probably have a regular pad to jot down my notes, and rewrite/sketchnote them after the presentations. I also noticed that, at the more technical lectures, there were less to actually sketch out, hence the two liner at the end that simply was a url to Colin Moock’s lectures (the url’s actually moock.org, and not his full name colinmoock.org).
Some of the other notable Presentations I attended were:
Si Scott - Challenging Imagination
Mike Downey – Adobe Keynote
Erik Natzke – Beyond the Knowledge: TheArt of Playing
Mario Klingemann – The Pixel Whisperer
GMUNK – GMUNKICKDOWN 08
Ralph Hauwert – Flash 2D & 3D Effects
Scott Hansen - ISO50:Blending Analogue & Digtial
Ryan Honey & Orion Tait – How Buck Goes About Making Commercials & Stuff
David Eriksson – North Kingdom – An Inside View
Jarnes Eberhardt - 2D Barcodes for Mobile Devices
Brett Forsyth – Building Multi-Touch Interfaces with Flash
Grant Skinner – My Favourite Things
Unfortunately, I missed the last three presentations, but I had hoped to watch/listen to Group 94, The Ronin & Dstrukt, and Robert Hodgin. All of the presentations I was able to attend, though, were really informational and I enjoyed them a lot. Overall this year I think it was definitely better than last, I’m really looking forward to going to FITC and other conferences like that in the future!
KeithBeltramini.com // Keith Beltramini
I helped my classmate and friend Keith Beltramini design and develop a website to display his 3D, Motion Graphics, and Animation work. His work is outstanding, so be sure to check him out!
jld version 6 launched!
After not having a new site in over a year, I finally got the time to finish up my new site – Jefflindesign Version 6 is now up and running! There’s also a new demo reel on there that I haven’t posted before, so make sure you check it out too!
Breakout // Virtual Entertainment
Keith Beltramini, Matt Robinson, and I joined forces for Virtual Entertainment class to work on this project together. Originally we were going to tie in Flash Media Server on this project and make a multiplayer game, but as I was the only developer on the team ( Keith made some awesome in-game graphics and animation and Matt designed a great user interface), developing the game and learning Flash Media Server at the same time proved to be a difficult task to accomplish within the 5-6 or so weeks that we were alotted to this project. Thus we were forced to simplify our project a little, and this is our product – a mini flash game that allows users to login, play, and save their best times. There’s a few things that need to be tweaked, but overall I’d say the project was a success; it’s a playable game and encourages return visits for users that are competitive (most gamers would be!). Check out Breakout!
Sunsilk.us // Rokkan: Life Can’t Wait
I was looking for a shoutcast channel in my winamp shoutcast browser and I spotted a sunsilk banner, and out of curiousity, I clicked on it to see where it would take me. Lo and behold, it took me to Sunsilk.us and on it was the site that I helped Rokkan work on! Rokkan picked me up in late December and had me develop the shell as well as the front page; and I worked on it until sometime towards the end of January. The most time consuming part of it all was exporting all the graphical assets out of photoshop and into flash, especially because this site was so image heavy. It’s pretty cool to see stuff that I’ve worked on up on the net, and it’s always a pleasure working with the folks at Rokkan!
Mic Check! Abstract art creation in AS3
This was my first project done in AS3, I’ve been putting off doing a project in AS3 because I wanted to wait and practice the AS2 OOP skills I developed at Rokkan over the summer. It was well worth the wait. It was a pretty smooth transition for the most part(and with the migration documentation)! The only things that drove me crazy were the syntax changes, small things such as the removal of the underscore from, say movieclip._x (it’s now just movieclip.x in AS3).
Anyway, about the project! When clicking on the project, it will create a movieclip that changes scale and color based on the audio input (be it from mic or the output of your sound card), and when clicked again, the movieclip is frozen and placed on the stage. Repeat the process until a desirable design is created, then right click > print to pdf or printer. If you print it to pdf, the shapes are still retained and you can open the pdf from illustrator to tinker with positioning and colors or add post generation effects.
Time Warner Digital Initiatives // Rokkan
The Digital Initiatives Modules I worked on over the summer at ROKKAN are finally up on Time Warner’s website, check it out!
Experimentation with the Flash Drawing API & AS3
In Jason Arena’s Virtual Entertainment lab I experimented with the Flash Drawing API, and we did it in AS3! Here’s the outcome: click to change color, move your mouse to generate the curves
Also, I wanted to know how to draw a curved line that got wider so Jason helped me out, and we came up with this (yeah so we added some code for random color, so it can be updated later on with, perhaps, a color fade) :
wave.swf ( linked externally because the wave keeps going and really starts chugging your browser if you leave it open)
-
I was using easy inline swf but for some reason an error kept being returned, so I’ve switched to WP-SWFObject
destructpoint // dynamic persuasion
Project 3 for Jason Arena’s Dynamic Persuasion class will be a group project with my homie Keith Beltramini. I’ve always had a great experience working with him, and he’s an awesome 3d/motion graphics designer.










