How to create a screen takeover ad

 by Jake DiMare- June 24, 2010

Earlier this year I worked on a project where a client wanted to reveal their new web site design to all the visitors on the first two days with a screen takeover that was co-branded with a new cell phone. Once it was complete it was all very slick and cool. However, while creating the ad piece I struggled to find anything online that discussed how it is done so I decided to share my approach.

For the purposes of this article, when we say ‘screen takeover ad’ we are referring to an online display advertisement that hovers over a web site, often obscuring it completely. The term ‘screen takeover’ could also refer to an instance where an organization allows their screen to be custom themed or ‘skinned’ with the brand of another organization. We’ll tackle the latter type some other time. For an example of what we are going to explore today, click here.

In this example we are going to focus on how to make the screen takeover happen, not creative. We’ve included a SWF file to test this out with but it could obviously be any SWF, video or image that takes over the screen. The sample files for this example are located here.

Essentially, the way you get something to ‘takeover’ an entire site is to create a div that is layered on top of everything else. Sounds simple huh? Well, for the most part it is pretty simple. However, there are some subtleties you will discover depending on what type of content is already on the page, how big the takeover content is, screen size, etc. Since it would be impossible to predict every combination of these variables we’re going to stick to the basics with this example.

In general terms this is what we are trying to accomplish:

  • Load page
  • Load ad
  • Close ad if the user clicks it

In order to make this happen it is necessary to add some code to the page which is going to be taken over. In the case of the example the file that will host the takeover is index.html. First, we will want to add some style information in the <head> section so the takeover is properly positioned before it even launches. This will ensure the takeover doesn’t load in one spot and then jump to the spot we want it to be located. Here is the example css:

#container {
     position:absolute;
     width:100%;
     height:100%;
     text-align:center;
     background-color:#fff;
     visibility:hidden;
     display:none;
     z-index:10;
}

This information, which specifies attributes of the DIV with the ID ‘container’, could also live in a separate CSS file’. We just chose to put it on the page for the sake of simplicity. These styles specify the container DIV will start off invisible and not displayed (yes, these mean different things). It will be as wide and high as the screen and it will have a white background. It’s contents will be centered on the screen. It also specifies the z-index will be 10. The z-index determines the layering of objects on the page and the higher numbered objects go on top.

Next we add references to a couple of external JavaScript files and embed the swfobject to call the Flash file (swfobject is a freely available public library for embedding flash files). The file takeover.js is written specifically for this example and it is included in the source files. The following code is placed in the head area of the html file:

<script type="text/javascript" src="takeover.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
     var flashvars = {};
     var params = {wmode: "transparent"};
     var attributes = {};
     swfobject.embedSWF("screen-takeover.swf", "container", "800", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Layering flash objects on top of one another can be problematic because Flash doesn’t necessarily respect the z-index in css. If you are forced to later swf objects the way to determine which are on top is with the wmode attribute. Generally speaking, Adobe claims using a WMODE value of ‘opaque’ or ‘transparent’ will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.

The DIV container where the flash takeover will be contained can be placed anywhere in the page since its location is defined by the style information. I chose to place it just between the close head tag and the open body tag like so:

</head>
<div id="container"></div>
<body>

Notice there is nothing in the container DIV? You could put text in here or anything else for that matter but it will be replaced with the SWF specified in the swfobject embed code. This is done by the code in the swfobject.js file.

Finally, at the very bottom of index.html there’s a call to the JavaScript function that reveals the container DIV. It is located at the bottom of the page so the page contents can load before revealing the takeover.

<script type="text/javascript">
     window.onload = showFlash;
</script>

The function showFlash() is contained in the file takeover.js, referenced in the head of index.html. All this function does is reveal the container DIV by setting the visibility and display. The following example shows how this is done:

function showFlash() {
     //this div positions the flash container it on the page
     obj1 = document.getElementById("container");
     obj1.style.visibility = "visible";
     obj1.style.display = "inline";
     obj1.style.backgroundColor = "#FFF";
}

Once the takeover is open it is necessary to provide the user with a mechanism to close it if they want. The example swf has an invisible button covering the entire area and when it is clicked there is a piece of embedded actionscript 3.0:

button.addEventListener(MouseEvent.MOUSE_DOWN, mouseOverListener);
function mouseOverListener (evt:MouseEvent):void {
     ExternalInterface.call("hideFlash()");
}

As you can see, the actionsctipt is basically broken into two pieces. The first is the addEventListener which is attached to the invisible button called ‘button’ (creative huh?). This line says when someone puts their mousedown on the button call the function mouseOverListener. The function then calls the external JavaScript function called hideFlash(). hideFlash() is also contained in the takeover.js file and, as you may have guessed by now, it does the opposite of showFlash():

function hideFlash() {
     obj1 = document.getElementById("container");
     obj1.style.display = "none";
     obj1.style.visibility = "hidden";
}

That’s it really. Of course, there are many ways this might be customized and enhanced. One thing I would definitely do before using this for commercial purposes would be to add a mechanism to determine if the user has Flash and if not, don’t try to initialize the program at all. If you have any questions or comments…hit us up!

Related Posts Plugin for WordPress, Blogger...

4 Comments

  1. I love betaprogrammer.com! Here I always find a lot of helpful information for myself. Thanks you for your work.
    Webmaster of http://loveepicentre.com and http://movieszone.eu
    Best regards

    Comment by Pouctotly — January 21, 2011 @ 6:10 pm

  2. Hi Admin,
    The js code below was used if the screen take over is using swf file, how about if want to use another html file as a screen take over?

    swfobject.embedSWF(“screen-takeover.swf”, “container”, “800″, “600″, “9.0.0″, “expressInstall.swf”, flashvars, params, attributes);

    Comment by ciknin — May 12, 2011 @ 2:56 am

  3. You could do that.

    Comment by jakedimare — May 12, 2011 @ 3:04 am

  4. very nice post, i certainly love this website, keep on it. hard to find knowledgeable people on this topic, but you sound like you know what you?re talking about! Thanks Feel Free to check out my Youtube Video of me in my bikini http://www.youtube.com/watch?v=Aa5Yc61v-tEIt?s

    Comment by laptop reviews — February 9, 2013 @ 5:06 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.