The Garage Ad Unit




View live demo of HTML5 animated ad here. (Be sure to roll your mouse over and off of the ad at the end.)

 Challenges: The main challenge of this ad unit was animating the car’s “mouth.” Such a simple animation to some, creating this subtle movement in Adobe’s Edge Animate, our primary animating program, was no easy feat. Once I discovered that I needed to make the mouth it’s own symbol element and have the main stage call to this symbol once the time was right, it was smooth sailing from there. The next challenge was trying to sync the mouth up with the animation and timing of the words “beep, beep!” After much trial and error, working with the timing, the animation went from “almost there…” to just right!

 Add-Ons: If you caught my hint about the mouse-over & mouse-out, then you saw that I also added an extension to their 728×90 ad unit. Every time you roll over the ad, the animation of the car’s mouth and the “beep, beep!” reoccur. Every time you mouse off of the ad, the CTA does a little bounce movement. My purpose for these hidden additions is to help extend the ad’s impact. A lot of times, users don’t look at ads or even notice them, but what if, they happen to accidentally roll over this ad? Well, they are going to see movement, and that movement will catch and possibly bring their eye over to the ad. Anyone in the ad industry knows that those 3-5 seconds spent on an ad are actually golden opportunities for an ad’s ROI, so I was happy to spend the extra time including the roll-over effects on this ad.

Results: The client and Account Executive of this campaign were both very pleased and impressed that I was able to achieve their request of mimicking a TV commercial into a digital ad with minimal direction. There were no revisions requested, and I believe all parties were happy.

These ads performed very well with a total of 310,415 impressions, 321 clicks, and a CTR average of 0.17%.


Share this article: