Ahmed Nuaman Freelance Designer and Developer

While doing my stint at ESP, helping out on 1Click2Fame.com, I was asked to integrate advertising into the custom player I had built for them. A long debate followed about what sort to use and, personally, I prefer in-video advertising, but they chose to go with pre/mid/end rolls. Not a problem I said.

The component that I was going to use was developed by Tremor Media/Acudeo. All I was given was a SWC and an example FLA, pretty perfect I thought.

It turned out that there was a problem: the preroll component can’t be compiled on a Mac, or so I was told. Now can’t isn’t something that runs easily with me. I’ll try anything, and would rather fail than not to try at all. And the result of all this was very encouraging.

Firstly, I must talk about how you embed the component itself. Above I’ve said that I was given a SWC, and to most developers (yes, I feel developers shouldn’t develop in the Flash IDE, rather use an actual developing IDE such as Flex/Flash Builder, FlashDevelop, etc..) would hook in the SWC and start using the classes within it.

It turned out that the SWC is a component written for Flash CS3, to be embedded into the component panel, so that’s lame. Well, not really, one can still develop using a proper IDE and still compile to an FLA. So that’s what I had to do, and you can checkout the source on Github and try it for yourself if you like. Furthermore, there’s a SWF wrapper in the project will stick in to the debug folder, and that’s what you want.

Just quick, before we start, I raised an issue before about the developers saying that this couldn’t be compiled on a Mac. When they are kind of right and wrong. Yes, it can be compiled on a Mac but it can’t be debugged on a Mac, that means using the Flex/Flash Builder debugger. This is cos of a silly little mistake with the local connection, I need to give them a call about this cos it should be quite easy to fix.

So, let’s get down to business, I’ll assume that you’ve got your video player ready, you’ve checked out my AS3 library on Github, and you’ve got the component wrapper SWF.

Here’s the quick and dirty version of the code, an explanation is below:

So the first thing that we’ll need to do is load in the wrapper, I use my “DisplayObjectUtil.loadMovie()” for this. Once the wrapper has been loaded, we then add listeners to check for when it’s ready and when it wants to pause and resume our video. We have the option to pass it a JavaScript function for it to fire if the preroll has any companion banners or MPU, in this case it’s just “console.log()” for FireBug. And finally, we then fire up the wrapper by calling the “init()” function and passing in the Acudeo program Id.

What will now happen is that the ad manager become ready (hence why there’s the event listener for it) and what I’ve done is say: “give me a preroll now” as soon as it’s ready. What you should do is really call the “handleVideoPlay()” function either before the video is ready to play or as it’s preloading. I prefer the latter.

Before you can tell the prerolls to play, you need to give them some information, all for tracking you see.

And finally, make sure that you have the functions in place that pause and resume your video, the ad manager will take care of all the notifications up to that point, it’s up to you to write the code that stops/starts the video!

And some…

Hold your horses, it doesn’t quite stop there. I’ve added a few more functions into the wrapper that should be handy for all you budding publishers out there:

• handleVideoVolumeChange():
  A simple way to pass in an integer between 0-100 to set the volume of the preroll. This should coincide with the volume the user set of your video.
• handleVideoPlaying():
  The Acudeo component doesn’t always show prerolls, sometimes they’ll be midrolls, so this is a good way to pass in the current time of the video and the total time, allowing the component to make its mind up about when to show the advert; most of the time it’s a defined variable of the advertiser.
• handleVideoFinished():
  Now just because your video has finished doesn’t mean you can’t pimp it out! This will handle the ending of the video and like the above, if it hasn’t shown anything, it’ll play an endroll.
• handleVideoResize():
  And this is a must function, if the player is resized, it’ll look silly if they advert doesn’t resize too, so this is a good function to pass in the size of the advert and also the coordinates you want it to start at (so if you haven’t already positioned it on your player, you can let the wrapper position itself).

So there you have it, you’re ready to pimp up your video player! Tell me what you think!