This page has been robot translated, sorry for typos if any. Original content here.

Create Flash banner and gif stubs

Today we will figure out how to make not just a banner, but a Rich flash banner with all the ensuing consequences.

What is a Rich banner (more precisely rich media banner)?

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

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

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

* After reading a little bit with Flash and the html language, let's experiment with 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!

Let's make a banner using Macromedia Flash 6-9, Adobe Flash CS3-CS4 (Not critical in principle) according to this scheme.

Создание Flash баннера и gif заглушки

  • geturl_mc - clip (button) on clicking which will go to the specified URL address.
  • viewu is a dynamic text that will display our URL.
  • close_mc - clip (button) by clicking on which our banner will close
  • Flash Banners is just a static text. (Call as your heart desires)

The work on the visual is finished, let's work on the active script (ActionScript).

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

//Устанавливаем значение для текста(Test url) viewu
viewu.text=”http://www.domain.com”;
//Создаём обработчик событий для geturl_mc. клик по баннеру
geturl_mc.onRelease = function()
{
getURL("http://www.domain.com","_blank");
}
//Создаём обработчик событий для close_mc. закрытие баннера
close_mc.onRelease = function()
{
unloadMovie(_root);
getURL("javascript:kill();", "_self");
}
//Создание баннера на Флеш уровне закончено!

Some belts to this script.

getURL ("http://www.domain.com", "_blank"); - using this code, we navigate to the site http://www.domain.com.
unloadMovie (_root); - unload our banner from memory;
getURL ("javascript: kill ();", "_self"); - remove the div banner substrate using a java script, which will be described below.

So, compile and banner is ready! We now turn to the culmination of our project.

How to embed a banner in a web page?

To begin with, let's worry about people who do not support flash technology in their browsers. A person who does not have a flash will not see your banner!

Especially for him doing gif-stub. that is, a gif banner that will lie under Flash (naturally, we don’t have to talk about rich media for a gif banner).

Gif-cap can be made by removing a screenshot from the banner (Alt + Prt Scr) and edit in any editor or render (save as a picture) in the development environment itself (In this case, used Macromedia Flash 6-8 environment).

Here is such a gif – the cap has turned out for me.

Создание Flash баннера и gif заглушки

When everything is ready, add everything up to the heap into a web page (html code).

<!—баннер +gif заглушка -->
<div id="loadruner1">
<object type="application/x-shockwave-flash" height="87" width="398" data="flash.swf">
<param name="movie" value="flash.swf">

<!—подкладываем gif заглушку -->
<a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="398" height="87" alt="" border="0"></a>

</object>
<script>
function kill()
{
document.getElementById('loadruner1').style.display='none';
};
</script>
</div>

Explanation of the html code!

<div id = "loadruner1"> is our substrate for a flash banner with the name "loadruner1"
flash.swf - our banner
flash1-1.gif - our gif stub
function kill () is the function for closing the background and the banner as a whole. (its execution was described in the flash so getURL ("javascript: kill ();", "_self");)

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

It seems to be everything, but I decided to experiment a little with the gif stub and added the ability for the user to close it by pressing the cross.

For this, I broke the gif into 3 parts:

Создание Flash баннера и gif заглушки

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

<!—баннер +заглушка-->
<div id="loadruner1">
<object type="application/x-shockwave-flash" height="87" width="398" data="flash.swf">
<param name="movie" value="flash.swf">
<!— заглушка моего типа-->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><img src="close.gif" width="15" height="29" alt="Закрыть" border="0" onclick="document.getElementById('loadruner1').style.display='none';" style="cursor: hand"></td>
</tr>
</table>
<!— заглушка моего типа End-->
</object>
<script>
function kill()
{
document.getElementById('loadruner1').style.display='none';
};
</script>
</div>

Explanation! The location of the pictures turned out like this:

Создание Flash баннера и gif заглушки

onclick = "document.getElementById ('loadruner1'). style.display = 'none';" -event to close our banner (now the cap also knows how to close)

You can use <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (html stub code separately) in the onclick place

<!— заглушка моего типа-->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"><img src="close.gif" width="15" height="29" alt="Закрыть" border="0"></a></td>
</tr>
</table>
<!— заглушка моего типа End-->

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. (Invent design, effects, and so on, as you like)

Suppose we wanted to change the URL of the direct and the text of the link on our banner or something else dynamically changing.

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

First, let's fix a little Flash banner.

//объявляем переменную для FlashVars
var genericURL:String;
//Устанавливаем значение для текста(Test url) viewu
viewu.text=genericURL;
//Создаём обработчик событий для geturl_mc. клик по баннеру
geturl_mc.onRelease = function()
{
getURL(genericURL, "_blank");
}
//Создаём обработчик событий для close_mc. закрытие баннера
close_mc.onRelease = function()
{
unloadMovie(_root);
getURL("javascript:kill();", "_self");
}
//Создание банера на Флеш уровне закончено!

And edit the html code.

<!—Баннер + заглушка + FlashVars -->
<div id="loadruner">
<object type="application/x-shockwave-flash" height="87" width="398" data="flash.swf">
<param name="flashVars" value="genericURL=http://www.domain.com" />
<param name="movie" value="flash.swf">

<!—мой тип заглушки -->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><img src="close.gif" width="15" height="29" alt="закрыть" border="0" onclick="document.getElementById('loadruner').style.display='none';" style="cursor: hand"></td>
</tr>
</table>
<!—мой тип заглушки End -->

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

This code allows you to redistribute our URL address in a generic flash variable.

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

Some people are annoyed with such a thing as a frame around a banner.

Let's try to get rid of it using the SwfObject.js library - We write this html code:

<!—баннер + заглушка + FlashVars на SwfObject -->
<script type="text/javascript" src="svfobj.js"></script>
<div id="loadruner">

<!—мой тип заглушки -->
<table height="87" width="398" border="0" cellpadding="0" cellspacing="0" summary="">
<tr>
<td valign="top"><a href="http://www.domain.com/" target="_blank"><img src="flash1-1.gif" width="358" height="87" alt="Flash Baners" border="0"></a></td>
<td width="40" height="87" style="background: url(flash1-2.gif);" valign="top"><img src="close.gif" width="15" height="29" alt="закрыть" border="0" onclick="document.getElementById('loadruner').style.display='none';" style="cursor: hand"></td>
</tr>
</table>
<!—мой тип заглушки end -->

<script type="text/javascript">
var fo = new FlashObject("flash.swf", "", "398", "87", 8, "");
fo.addParam("wmode", "transparent");
fo.addVariable("genericURL","http://www.domain.com");
fo.write('loadruner');
function kill()
{
document.getElementById('loadruner').style.display='none';
};
</script>
</div>

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 setup script .

If desired, all this can be collected in one script file and in one function for compact code.

+ For lovers of great opportunities and new technologies. AS3

AS3 banner

With the advent of AS3 , flush has a truly great opportunity.

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

AS3 code for banner

//импортируем нужные объекты
import flash.net.*;
//Создаём переменную для FlshVars
var flashvars:String = new String(root.loaderInfo.parameters.genericURL);
//присваиваем мувиклипам свойства кнопок
geturl_mc.buttonMode = true;
close_mc.buttonMode = true;
//присваиваем тексту значение flashvars(наш урл)
viewu.text=flashvars;
//создаём обработчик события CLICK для geturl_mc(кнопка на директ)
geturl_mc.addEventListener(MouseEvent.CLICK, clickHandler);
//Создаём функцию для навигации и события CLICK для geturl_mc
function clickHandler(event:MouseEvent):void
{

navigateToURL(new URLRequest(flashvars), '_self');
}
//создаём обработчик события CLICK для close_mc(кнопка закрыть)
close_mc.addEventListener(MouseEvent.CLICK, closeHandler);
//Создаём функцию для закрытия банера и события CLICK для close_mc
function closeHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest('javascript:kill();'), '_self');
}
//Создание баннера на AS3 уровне закончено!

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

Different aspects about flash rich media banners:

* Requirements for ordinary flash-banners.

1. flash version not higher than 7
2. In addition to the .swf file, you need to prepare .gif-stubs that will be shown to users who are not able to view flash-banners.
3. the presence of root.link1 (can be any) in getURL (_root.link1, "_blank");

* Requirements for rich-media banners.

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

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

Fortunately, ActionScript 3.0 is not necessary even in Flash CS3. You can get by with 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 , the FlashVars is specified using the loaderInfo.parameters link will be of the following form: root.loaderInfo.parameters.link1 or fully navigateToURL (new URLRequest (root.loaderInfo.parameters.link1), '_self');

Thirdly , to execute javascript, the “kill” function 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');

Elbows:

Elements like getURL ("javascript: kill ();", "_self"); and AS3 navigateToURL (new URLRequest ('javascript: kill ();'), '_self'); can be blocked in the browser with a flash if they are run locally.

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

In our case, the "close" button (for 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). Just a gif stub is optimal in terms of weight, because you have to load a flash banner and a gif stub. Gif - the stub should be the same size as the flash drive.



PDF Tutorial (Flash.pdf) [ PDF Tutorial ] [ PDF Tutorial ] [ PDF Tutorial ] [ PDF Tutorial ]

Script sources (flashbaners.rar) [ Script sources ] [ Script sources ] [ Script sources ] [ Script sources ]