Erstellen Sie Flash und GIF-Banner-Stecker

Heute wird untersucht, wie man es nicht machen nur ein Banner und Rich-Flash-Banner mit allen sich daraus ergebenden Konsequenzen.

Was ist der Reiche-Banner (weitere Rich-Media-Banner)?

Rich-Media-Banner- ist vor allem eine Ressource reichen Medien Gelegenheit (Audio- und Videoclips, interaktive Effekte und vieles mehr, die nicht die üblichen Banner ist) mit.

Für diese Banner sind besonders gut geeignet, Adobe Flash-Technologie.

* Zunächst einmal wir uns auf die Schaffung eines einfachen Flash - Banner und das Problem der Berührung , wie es auf einer Webseite zu platzieren und die Kappe gif setzen.

* Nach ein wenig mit Flash und Sprache HTML, experimentieren mit fleshvarami (FlashVars) zu lesen.

* Überlegen Sie, wie die Bibliothek swfobject verwenden , um das Banner auf einer Webseite setzen.

* Für die Liebhaber der großen Chance, werden wir die gleichen Banner auf AS3 tun.

Lassen Sie uns beginnen!

Machen Sie einen Banner mit Hilfe von Macromedia Flash 9.6, Adobe Flash CS3-CS4 (im Prinzip nicht kritisch) für diese Regelung.

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

  • geturl_mc - Clip (Knopf) durch drücken , auf der Übergang an der angegebenen URL - Adresse auftreten.
  • viewu - dynamischen Text, der unsere URL angezeigt wird.
  • close_mc - Clip (Knopf) , indem Sie auf unser Banner zu klicken , die geschlossen werden
  • Flash - Banner - es ist nur statischen Text. (Was auch immer Sie es nennen die Seele)

Die Arbeiten an als visuelle fertig, zaymёmsya aktive Skript (Actionscript).

Erstellen Sie eine neue Ebene und drücken Sie F9 (Fenster-> Aktion). Das Schreiben im geöffneten Fenster

//Устанавливаем значение для текста(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");
}
//Создание баннера на Флеш уровне закончено!

Einige poyasteniya zu diesem Skript.

getURL ( "http://www.domain.com", "_blank "); - Mit diesem Code tun wir http://www.domain.com Navigation auf der Website.
unloadMovie (_root); - Wir entladen unser Banner aus dem Speicher;
getURL ( "javascript: kill () ;", "_self"); -ubiraem div Banner Substrat c Java-Skript, die weiter unten beschrieben wird.

So übersetzen und Banner bereit! Jetzt gehen wir zum Höhepunkt unseres Projektes auf.

Wie ein Banner auf einer Webseite einbinden?

Um damit zu beginnen, Sorgen über die Menschen, die einen Browser nicht über Flash-Technologie unterstützen. Ein Mann, der bündig nicht, nicht sehen, Ihr Banner!

Vor allem tun gif-Kappe für ihn. dh gif-Banner, die unter dem Flesch (natürlich über Rich Media sprechen kann nicht für die gif-Banner) liegen.

Gif-Kappe kann durch Entfernen eines Screenshot des Banners (Alt + Prt Scr) und bearbeiten in einem beliebigen Editor oder render (speichern als Hintergrund) in der meisten Entwicklungsumgebung (in diesem Fall unter Verwendung von Macromedia Flash-6-8) am Mittwoch erfolgen.

Hier ist eine gif Blindabdeckung an mich stellte sich heraus.

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

Wenn alles fertig ist, fügen wir alle in einem Haufen von einer Webseite (HTML-Code) auf.

<!—баннер +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>

Erklärung des HTML-Codes!

<Div id = "loadruner1"> - das ist unsere Unterstützung für die Flash - Banner c dem Namen "loadruner1"
flash.swf - unser Banner
flash1-1.gif - unsere Kappe gif
Funktion kill () - Diese Funktion für die Unterstützung und das Schließen der Banner als Ganzes (seine Ausführung wurde in Flash beschrieben worden , um getURL ( "javascript: kill () ;", "_self");).

Anstelle document.getElementById ( 'loadruner1') style.display = 'none' .; Sie können document.all [ 'loadruner1'] style.display = verwenden "none" .;

Es scheint zu sein, aber ich beschloss, ein wenig mit gif Stecker zu experimentieren und zu dem Benutzer die Möglichkeit, es zu schließen, indem Sie auf das Kreuz klicken.

Zu diesem Zweck brach ich gifku auf s Teil:

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

Und so ihre HTML-to put down. (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>

Erläuterung! Positionierung Bilder gedreht wie folgt aus:

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

Onclick = "document.getElementById ( 'loadruner1. ') style.display = 'none';" -Events Für unser Banner zu schließen (jetzt ist die Kappe auch in der Lage zu schließen)

Onclick kann anstelle verwenden <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (HTML - Code - Stecker separat)

<!— заглушка моего типа-->
<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-->

. Statt document.getElementById ( 'loadruner1') style.display = 'none' kann immer document.all [ 'loadruner1'] style.display = verwenden "none" .;

Rich-Banner bereit! Es bleibt nur der interaktiven Inhalte unserer Banner zu denken. (Invent Design, Effekte etc., wie Sie möchten)

Angenommen, wir wollten die URL-Richtlinien und Textlinks auf unseren Banner oder etwas anderes sich dynamisch verändernden zu ändern.

Dazu werden wir die Flash-Variablen FlashVars verwenden. Die Variablen, die wir unseren Banner von außen geben.

Um damit zu beginnen wir ein kleines Flash - Banner ändern.

//объявляем переменную для 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");
}
//Создание банера на Флеш уровне закончено!

Und bearbeiten Sie den 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 -->

Wir haben hinzugefügt <param name = "flashVars" value = "genericURL = http: //www.domain.com" />

Dieser Code ermöglicht variable bündig genericURL unsere URL - Adresse pereredat.

Nun können Sie den direkten und einfachen Text-Banner, diesen Wert in HTML-Editor ändern.

Manche Leute sind ärgerlich Phänomen der Grenze um das Banner.

Lassen Sie uns versuchen, über swfobject.js Bibliothek loswerden, es zu bekommen - Schreiben Sie diesen 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>

Es sind bereits enthalten FlshVars (fo.addVariable ( "genericURL", "http://www.domain.com");)

Und Transparenz selbst kleben (fo.addParam ( "wmode", " transparent");). Falls gewünscht, können sie entfernt werden!

Scripting - Funktion Funktion kill (); Es wurde in die Hauptskript SvfObject Einstellungen genäht.

Falls gewünscht, ist es noch möglich , in eine Skriptdatei für die Code Kompaktheit in einer Funktion zu sammeln.

+ Für die Liebhaber von großen Chancen und neue tehnologiy.AS3

AS3 banner

Mit dem Aufkommen von AS3 in Flash erscheinen wirklich enorme Chancen.

Speziell für die Fans aller neuen Banner ist das gleiche, nur mit der Verwendung des AS3 (Mittwoch Adobe Flash CS3 und Adobe Flash CS4).

AS3 - Code für das 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 уровне закончено!

Und weiter stecken Sie sie in die Web-Seite in der gleichen Weise wie oben beschrieben!

Verschiedene Aspekte über Flash Rich-Media-Banner:

* Anforderungen an herkömmlichen Flash-Banner.

1. Version von Flash nicht mehr als 7
2. Zusätzlich zu der .swf-Datei benötigen Sie eine .gif-Kappen herzustellen, die den Nutzern angezeigt werden, die die Flash-Banner nicht sehen können.
3. Das Vorhandensein von root.link1 (kann beliebig sein) in der getURL (_root.link1, "_blank");

* Voraussetzungen für Rich-Media - Banner.

1. Version von Flash nicht mehr als 7
2. gif Kappe ist obligatorisch
3. Die Größenbegrenzung
4. Das Vorhandensein von root.link1 (kann beliebig sein) in der getURL (_root.link1, "_blank");
5. Die Verfügbarkeit einer Schaltfläche "Schließen" fscommand ( 'töten', ''); unloadMovie (_root);

Wenn Sie in die verwendet werden sollen "Banner-Netzwerke," Sie sollten unbedingt die neueste Version von Flash beobachten, um eine bessere Kompatibilität zu gewährleisten.

Glücklicherweise verwenden Actionscript 3.0 in Flash CS3 auch optional. 2.0 kann verzichtet werden, was sehr einfach und zuverlässig ist.

Aber wenn Sie noch verwenden müssen, die dritte Version von Actionscript ist, halten ein paar Dinge im Auge behalten.

Zum einen ist es möglich , indem man zur Absicherung: <object type = "application / x-shockwave-flash" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 , 0,0,0 ">.

Zweitens wird FlashVars durch loaderInfo.parameters Link angegeben haben , diese Art von root.loaderInfo.parameters.link1 oder vollständig navigateToURL (neu URLRequest (root.loaderInfo.parameters.link1), '_self');

Drittens eine JavaScript - Funktion zu implementieren "kill" anstelle von fscommand ( 'töten', '' );

Es ist besser, die alte Methode (Javascript verwenden :) .Kod Knopf zu schließen aussehen wird navigateToURL (neu URLRequest ( "javascript: töten (); '),' _self ');

taps:

Solche Elemente wie getURL ( "javascript: kill () ;", "_self"); und AS3 navigateToURL (new URLRequest ( "javascript : kill (); '),' _self '); Sie können in bündig Browser gesperrt werden, wenn sie lokal ausgeführt.

Aufgrund der Sicherheitspolitik sind nur auf dem Server einige der Funktionen.

In diesem Fall Schaltfläche "Schließen" (für einen Flush) vor Ort wird nicht funktionieren!

In AS3 Laden von externen Variablen so, root.loaderInfo.parameters.link1.

Wo ist der Name der Variablen link1.

Statt gif-Stecker Sie Bilder und andere Formate verwenden können (jpg, png, tif, tga, bmp). Nur gif optimale Gewichts stecken, weil die Notwendigkeit Flash und GIF-Banner zaglushku.Gif Blindabdeckung zum Download muss die gleiche Größe wie ein USB-Stick sein.



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

Quellen - Skript (flashbaners.rar) [ Quellen Skript ] [ Quellen Skript ] [ Quellen Skript ] [ Quellen Skript ]