Tutorial - Making an AS3 Video Ad

Introduction

This tutorial will show how to create a basic click-to-play flash video ad in actionscript 3.

After this tutorial, you should know:

How to call the Viral Ad Network's tracking when a video is clicked
How to embed a screenshot into a flash movie
How to play a simple video once the user clicks on the ad

The end result should be an ad similar to this:

Share On Facebook

(We've added the facebook share link below the flash player)

Starting off

We start by creating a basic actionscript class:

package {
    import flash.display.Sprite;
    public class VidDemo extends Sprite {
        public function VidDemo() {
        }
    }
}

Now we'll run through the code piece by piece

Imports

We'll need to import some packages to give us our functionality - these will go inside the package, straight below where we imported sprite

    import flash.display.Sprite;

    // for screenshot
    import flash.display.Bitmap;

    // for video
    import flash.media.Video;
    import flash.net.NetConnection;
    import flash.net.NetStream;

    // for tracking
    import flash.external.ExternalInterface;

    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.NetStatusEvent;
    import flash.events.Event;
    import flash.events.MouseEvent;

Class attributes

We want to show a screenshot when the video loads. For simplicity, we'll embed this direct into the flash movie when we build it, using the code below to make screenshot a private attribute of the VidDemo class.

        [Embed(source='screenshot.png')]
        private var ScreenshotClass:Class;
        private var screenshot:Bitmap = new ScreenshotClass();

When you compile this class you will need a file called screenshot.png in the same directory, but as it's embedded direct into the swf, you won't need to ship this file with the swf.

Now we set up our other attributes. The url to the video needs to be configurable, so we need a String to store the url. We're only going to be paying for the first time a video is watched, so we'll use the boolean variable has_clicked to store if we've already recorded a click (and set it to false by default).

        private var vid_url:String;             // url of our video
        private var video:Video;                // video object on stage
        private var connection:NetConnection;   
        private var netstream:NetStream;

        private var has_clicked:Boolean = false;

On to the code...

We'll extend the class initialisation a bit now, replacing the empty function we started with with the following:

        public function VidDemo() {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;

            this.addChild(this.screenshot);

            this.video = new Video();
            this.addChild(this.video);
            
            stage.addEventListener(MouseEvent.CLICK, onClick);
            stage.addEventListener(Event.RESIZE, init);
            stage.dispatchEvent(new Event(Event.RESIZE));
        }

This function first sets the stage scale mode and align mode to more sensible options, and then adds the screenshot we embedded earlier onto the stage.

After this, it creates a new Video object, and adds this to the stage. The Video object won't display anything unless we tell it to play a video (which we'll do later) - so all that will be visible to the user is the screenshot.

It then adds event listeners for mouse clicks, and for the stage being resized. We need the latter to get around a bug in some browsers where the movie gets initialized twice.

Finally, it dispatches the Event.RESIZE event, so we can be sure that event handler has been called at least once on all browsers.

Now, let's set up the handler for this event

        private function init(event:Event):void {
            if (stage.stageWidth > 0 && stage.stageHeight > 0) {
                loadPrefs();
                // replace this handler
                stage.removeEventListener(Event.RESIZE, init);
                stage.addEventListener(Event.RESIZE, onResize);
                stage.dispatchEvent(event);
            }
        }

Here we check if the stageWidth and stageHeight have been set yet (which deals with the browser bug mentioned before). If it's actually been initialised, then we call loadPrefs, which will load the video url from the embed code. We then switch over the event handler for the Event.RESIZE event to the onResize method, and dispatch our event so the new handler gets called.

Ad Network Tracking

We're paying for people who click to start playing the video (without leaving the current site), so we'll use the Viral Ad Network's gadget tracking. This is a javascript call, so we'll need to use AS3's ExternalInterface to make the tracking call.

We'll also check if we've called it before, to ensure we only pay for the first video view.

        private function trackAction():void {
            if (!this.has_clicked) {
                ExternalInterface.call("gadgets.Ads.reportInteraction", null);
                this.has_clicked = true;
            }
        }

Playing the video

So far we have added a screenshot, and added a method to call when the user has clicked on the screenshot - but we've still got to actually play the video.

Let's add the code to let this work

        private function play():void {
            stage.removeEventListener(MouseEvent.CLICK, onClick);
            connection = new NetConnection();
            connection.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
            connection.connect(null);
        }

This is fairly standard stuff - we open a connection object, and add an event listener to let us know when it's ready.

        private function onNetStatus(event:NetStatusEvent):void {
            if (event.info.code === "NetConnection.Connect.Success") {
                netstream = new NetStream(connection);
                video.attachNetStream(netstream);
                netstream.play(this.vid_url);
            }
        }

Our event listener checks if the connection was successful, and if it was then it creates a new NetStream object, attaches it to our Video object, and tells it to play our video.

Event Handlers

We've mentioned two event handlers that we haven't yet added, so let's fill them in... they should be fairly clear, so I won't explain them in detail

        private function onResize(event:Event):void {
            this.video.width = stage.stageWidth;
            this.video.height = stage.stageHeight;
        }

        private function onClick(event:Event):void {
            this.trackAction();
            this.play();
        }

Finally, we need to load the video url from the embed code.

        private function loadPrefs():void {
            var params:Object = this.loaderInfo.parameters;
            if (params.video) {
                this.vid_url = params.video;
            }
        }

Building / testing

You should now be able to build the swf - how you compile it will depend on your platform and environment, so this step is left to the reader. It's assumed that you now have a basic html page which embeds your swf.

To test that the tracking is being called properly, you may find it useful to add the following script to your test page.

<script>var gadgets = {Ads: {reportInteraction: 
function () {alert("interaction"); } }};</script>

- When the tracking is called, you should now see a popup.

Viral Ad Network