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

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 a 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.

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

  • 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 you please)

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

//Устанавливаем значение для текста(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 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 about rich media for the gif-banner you can not speak).

Gif-stub can be done by removing a 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's a gif-stub turned out for me.

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

When everything is ready, we'll add everything to the heap in the 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 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 do this, I broke the gifku in part 3:

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

And put them in html 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! Image layout turned out this:

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

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)

<!— заглушка моего типа-->
<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 (come up with 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 begin with, we will correct 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 we will 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've added <param name = "flashVars" value = "genericURL = http: //www.domain.com" />

This code allows us to change the URL of our genericURL to a variable.

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:

<!—баннер + заглушка + 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 configuration script .

If you wish, 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 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 the web page in the same way as described above!

Different aspects about flash rich media banners:

* Requirements for conventional flash-banners.

1. The version of the flash does not exceed 7
2. In addition to the .swf file, it is necessary to prepare .gif stubs that will be shown 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. The version of the flash does not exceed 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 it 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 flash, if they run locally.

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

In our case, the "close" button (for a 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 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.



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

Sources of the script (flashbaners.rar) [ Sources of the script ] [ Sources of the script ] [ Sources of the script ] [ Sources of the script ]