Noisy, Annoying, and Flashing HTML5 Advertisements
I’ve read tons of blogs/comments from incompetents on both sides of the Apple vs. Flash issue and one of my favorites is “Flash sucks, I don’t want to see stupid flashing advertisements”. If Flash didn’t exist and HTML5 was the standard, what format do you think advertisements would be created in? Well I thought this was a good way to experiment with HTML5 Canvas (great tutorial here Mozilla Canvas tutorial).
HTML5 Ad:
Overall it was fairly easy and intuitive to create – the hardest part was integrating it into a Wordpress Post! It works in Chrome (minus the audio), looks slightly different in Firefox, and doesn’t work at all in IE. Unfortunately, we won’t be seeing many of these ads until its browser penetration and development tools improve. Maybe it is Adobe’s fault for making it too easy?
Javascript portion:
function start(){ // Redraw the canvas every 80 ms setInterval(draw,80); // Add event listener for mouse over / mouse click canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('click', onMouseClick, false); } function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Draw rectangle ctx.fillStyle = getRandomColor(); ctx.clearRect(0,0,300,100); // clear canvas ctx.fillRect(0,0,300,100); // Outer border ctx.lineWidth = 2; ctx.strokeRect(1,1,298,98); // Draw text ctx.fillStyle = 'white'; ctx.textBaseline = 'top'; ctx.font = 'bold 40px sans-serif'; ctx.fillText('YOU WIN!!!', 40, 30); ctx.strokeText('YOU WIN!!!', 40, 30); } function onMouseClick(ev) { window.location.href = 'http://www.google.com'; } function onMouseMove(ev) { // Play Audio document.getElementById('audio').play(); } function getRandomColor() { var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return "rgb(" + r + "," + g + "," + b + ")"; }
