This is my second tutorial on Flash Sliding Billboard Ads. This is a more new and improved way than the first tutorial I did. The code is less and works much smoother. Also, a new feature was added allowing an option for the ad to expand open on browser load and then after a few seconds it will return to the smaller position.
Note: 05/06/2010 – I have updated the javascript with a cookie for the preview function. This way the ad will only expand/preview once on page load until the cookie time expires.
Yo, these flash banner ad tuts are right on time!
I do graphic design, but I’m not much of a coder, but the main coder’s at my main job get bogged down with the big stuff… You know content managment and ecommerce, so that leaves me to do the banner ads. I dont mind, because I love working with flash. So thanks a TON, for doing these, as you said there isn’t ANY info on this stuff on the web. I’ve been searching for a while too.
Are you familiar with using clicktag’s on your banner ad’s for agency tracking?
Will the clicktags work with this approach?
Once again thanks for this, it was awesome to find.
Yes, I am very familiar with work clicktags as I create flash ads all the time! However, this type of ad doesn’t work with click tags. I use google admanager at work to run ads, and this type of ad would be entered as “Rich Media”. Under this option, google cannot track a clicktag in flash. So, you would need to track this in your own database, which is what I do. I have a database with clickthrough and mouseover tables, and use some php or asp files to track these functions. The clickthrough function will hit the counter page and then redirect the user to the advertiser website. All that google does for me in this type of ad, is start and stop it when I want it to, as well as count impressions.
NOTE: I just added a new cookie function to the preview. So, when the page loads, the ad will only expand/preview once for the set amount of time. Once that time expires, if the user visits the page again, the ad will expand/preview again. I had visitors on a site complaining that a sliding billboard ad was expanding every time they visited the homepage and it was getting annoying. So, I added this cookie function! The packaged files for download have been updated with this function.
Tyler, I don’t know where to begin to thank you. You noted to ask about setting up mouse over-clicks tutorial with the database. I would really like to know how to track this with php and mysql. All I hear are impressions counts, impression counts. Doing UI only has now changed for me. Once again, I thank you!
Thanks for the tutorial. I couldn’t find anything else about it on the web and found yours. I really appreciate it.
Man, thank you so much!
Oops! …forgot. Can I use this with WordPress? ….as a plug-in….?
No, this cannot be used as a wordpress plugin. It is all hard coded. You would have to integrate this into your website yourself.
Thanks for the reply.
Hello Tyler,
Thanks for this tutorial. It’s the best i have found. I’m using it to showcase some of my music clients videos and albums.
Hello,
I was wondering if I wanted the banner to expand to the left, how would I do that, what part of the code could I edit to change that?
Thank you so much for this awesome tutorial!
The code was not written for that type of function and this ad is not supposed to work that way. Plus, that size of an ad expanding to the left would go beyond the viewing area.
Thank you for providing this. What a great help for non-coders/scripters!
I was hoping you or someone else here might be able to help me with an issue I’m having with the jQuery. The sliding billboard ad works great in our OpenX ad system, but doesn’t on our website. Our website uses the prototype.js framework, which is conflicting with the jQuery in the .js file. I’ve been told to implement the
$.noconflict();code to deal with this, but I don’t know how to do this.Can someone show me how to tweak the billboard_1000x300.js file with the $.noconflict so it works?
Thank you,
Joe
It may be a conflict with the following section in the billboard_1000x300.js file.
$(document).ready(function() {
window.preview(‘ad2’);
});
In which case you could replace it with the following:
jQuery.noConflict();
(function($) {
$(function() {
$(document).ready(function() {
window.preview(‘ad2’);
});
});
})(jQuery);
However, it is hard to diagnose if I don’t have a link to the page you are testing this on to verify for sure. You can send me an email with the link to the page if you try my suggestion and it doesn’t work.