What we can learn from the online advertising industry? (Part One)

I must admit, maybe the topic is somehow too big for me, but my intension is to show the tips and tricks that we can learn from the online advertising industry.

First, the online advertising industry uses Flash based banners mostly nowdays. So there are something that must be taken into consideration.

1. How does a Flash file communicate with the browser?
2. What kind of effects we can achieve with the combination of Flash, Javascript and CSS?

Here is the answer.

Before Flash version 7, a Flash file can tell the commands to the browser with the Actionscript 1.0 function fscommand(argument).

Let's assume that the flash file is called myMovie, which has a size of 728px x 600px. Then the according part in Javascript should be:

function myMovie_DoFSCommand(command, args) {
    if (command=="adcollapse") {
        document.getElementById("flashad").style.clip=
                 "rect(0px, 728px, 600px, 608px)";
    }

    if (command=="adexpand") {
        document.getElementById("flashad").style.clip=
                 "rect(0px, 728px, 600px, 0px)";
    }
}

The flash file can use a button to call fscommand("adexpand") and a close button to call fscommand("adcollapse"). Its syntax looks like:

btnClose.onRelease = function() {
   fscommand("adcollapse");
}

So what happened in the Javascript function? When one clicks the close button, the Javascript function will be called. Then the function finds that the Flash file wants to exeute a command "adcollapse", so the function will modify the style of the layer where the flash object is.

<div id="flashad">
    <object ...>
    <embed ...>
</div>

document.getElementById("flashad") is used to find the HTML element which contains the flash object. Then the property clip of the style will be modified. The syntax of clip is: clip: rect(top, right, bottom, left)

See? If the command "adcollapse" is called, the flash will be cut to the size of (728-608)= 120px x 600px to the right, but if the command "adexpand" is executed, the size will be restored to the full size of the flash file.

The end effect can be seen here.