Create Flash banner and gif stub

Today, we'll figure out how to make not just a banner, but a Rich Flash banner with all the consequences that follow.

What is the Rich-banner (more precisely rich media banner)?

Rich media banner is, first of all, a banner with a rich media opportunity (sound and video clips, interactive effects and much more that is not in ordinary banners).

For such banners, especially good, Adobe Flash technology is suitable.

* First of all, we will touch on the creation of a simple flash banner and the problem of how to place it on a web page and put a gif stub.

* After reading a little about Flash and the language of html, we experiment with flashvars (FlashVars).

* Consider how to use the SwfObject library to put a banner on a web page.

* For fans of great opportunities, we will make the same banner on AS3.

Let's start!

We make a banner using Macromedia Flash 6-9, Adobe Flash CS3-CS4 (In principle, not critical) for this scheme.

• Geturl_mc - a clip (button) by clicking on which will go to the specified URL.
• Viewu - dynamic text that will display our URL.
• Close_mc - a clip (button) by clicking on which our banner will be closed
• Flash Banners is just plain text. (We call it as your heart desires)

Work on the visual is finished, let's take an active script (ActionScript).

Create a new layer and press F9 (windows-> Action). We write in the opened window

Some appearances to this script.

GetURL ("http://www.domain.com", "_blank"); - with the help of this code we do navigation to the site http://www.domain.com.
UnloadMovie (_root); - unload our banner from memory;
GetURL ("javascript: kill ();", "_self"); -select div banner substrate using Java script, which will be described below.

So, the compile and banner is ready! Now let's move on to the culmination of our project.

How do I embed a banner in a web page?

First of all, let's worry about those people who do not have flash technology in their browser. A person who does not have a flush will not see your banner!

Specially for it we make gif-stub. Ie gif-banner, which will lie under the Flush (naturally, it's not necessary to talk about rich media for gif-banner).

Gif-stub can be done by removing the screenshot from the banner (Alt + Prt Scr) and edited in any editor or rendered (saved as a picture) in the development environment itself (in this case used the Macromedia Flash 6-8 environment).

Here is a gif-stub turned out for me.

When everything is ready, we'll add everything to the heap in the web page (html code).

Explanation to the html code!

<Div id = "loadruner1"> - this is our background for a flash banner named "loadruner1"
Flash.swf - our banner
Flash1-1.gif - our gif stub
Function kill () - this function is used to close the background and the banner as a whole (its execution was described in the flush so getURL ("javascript: kill ();", "_self");)

In the place of document.getElementById ('loadruner1'). Style.display = 'none'; You can use document.all ['loadruner1']. Style.display = "none";

It seems that everything, but I decided to experiment with the gif stub and added the opportunity for the user to close it by clicking on the cross.

To this end, I broke the gifku in part 3:

And put them in html this way. (Html ​​code)

Explanation! Image arrangement turned out this:

Onclick = "document.getElementById ('loadruner1'). Style.display = 'none';" - event for closing our banner (now the stub also can close)

In the place onclick, you can use <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (the html code is stubbed separately)

Instead of document.getElementById ('loadruner1'). Style.display = 'none' you can always use document.all ['loadruner1']. Style.display = "none";

Rich-banner is ready! It remains only to think about the interactive content of our banner (think out design, effects, etc. as you want)

Let's say we wanted to change the url of the directive and the link text on our banner or something dynamically changing.

To do this, we will use flash variables FlashVars. Variables that we will give to our banner from outside.

To start, we will correct a little Flash banner.

And we will edit the html code.

We added <param name = "flashVars" value = "genericURL = http: //www.domain.com" />

This code allows you to change the URL of the genericURL flush variable to our URL.

Now you can change the directive and banner text by simply editing this value in html.

Some people are annoyed by such a phenomenon as the frame around the banner.

We will try to get rid of it with the help of the library SwfObject.js - We write such html code:

FlshVars (fo.addVariable ("genericURL", "http://www.domain.com") are already included here;)

And the transparency of the flash drive itself ( fo.addParam ("wmode", "transparent"); ). If desired, they can be removed!

Script function function kill (); Was embedded in the main SvfObject configuration script.

If you want, you can collect all this into one script file and one function for compact code.

+ For fans of great opportunities and new technologies. AS3

AS3 banner

With the advent of AS3 , the flush has truly grand possibilities.

Especially for fans of all new, the same banner, only using AS3 (Adobe Flash CS3 and Adobe Flash CS4).

AS3 code for the banner

Well, then paste it into the web page in the same way as described above!

Different aspects about flash rich media banners:

* Requirements for conventional flash-banners.

1. version of the flush is not higher than 7
2. In addition to the .swf file, it is necessary to prepare .gif stubs to be displayed to users who do not have the ability to view flash banners.
3. the presence of root.link1 (can be any) in getURL (_root.link1, "_blank");

* Requirements for rich-media banners.

1. version of the flush is not higher than 7
2. gif stub is required
3. size restriction
4. the presence of root.link1 (can be any) in getURL (_root.link1, "_blank");
5. the presence of the close button fscommand ('kill', ''); unloadMovie (_root);

If you are going to use in "banner networks", then you should strictly follow the version of the flash to ensure better compatibility.

Fortunately, ActionScript 3.0 is not required even in Flash CS3. You can do 2.0, in which everything is simple and fairly reliable.

But if you still need to use the third version of ActionScript, keep in mind a few things.

First , you can secure yourself by putting: <object type = "application / x-shockwave-flash" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 , 0.0.0 ">.

Secondly , FlashVars is specified using loaderInfo.parameters the link will have the form root.loaderInfo.parameters.link1 or completely navigateToURL (new URLRequest (root.loaderInfo.parameters.link1), '_self');

Third , to execute the JavaScript function "kill" instead of fscommand ('kill', '');

It is better to use the ancient method (javascript . The code for the close button will look like navigateToURL (new URLRequest ('javascript: kill ();'), '_self');

Taps:

Such elements as getURL ("javascript: kill ();", "_self"); And AS3 navigateToURL (new URLRequest ('javascript: kill ();'), '_self'); Can be blocked in the browser by a flash, if they run locally.

Because of the security policy, some functions only work on the server.

In our case, the "close" button (for the flash) will not work locally!

In AS3, external variables are loaded as root.loaderInfo.parameters.link1.

Where link1 is the name of the variable.

Instead of gif stubs, you can use images in other formats (jpg, png, tif, tga, bmp). Simply gif stub is optimal in weight, because you have to load a flash banner and gif-stub. Gif - the stub should be the same size as the flash drive.