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

Erstellen Sie Flash-Banner und GIF-Stubs

Heute werden wir herausfinden, wie man nicht nur ein Banner erstellt, sondern ein Rich-Flash-Banner mit allen daraus resultierenden Konsequenzen.

Was ist ein Rich-Banner (genauer Rich Media-Banner)?

Rich Media-Banner ist in erster Linie ein Banner, das Rich Media-Möglichkeiten bietet (Ton- und Videoclips, interaktive Effekte und vieles mehr, was in normalen Banner nicht zu finden ist).

Für solche Banner eignet sich besonders gut die Technologie von Adobe Flash.

* Zunächst werden wir ein einfaches Flash-Banner erstellen und das Problem beschreiben, wie es auf einer Webseite platziert und ein GIF-Leerzeichen eingefügt wird.

* Nachdem wir ein wenig mit Flash und der HTML-Sprache gelesen haben, experimentieren wir mit FlashVars.

* Überlegen Sie, wie Sie mit der SwfObject-Bibliothek ein Banner auf einer Webseite platzieren können.

* Für Fans von großartigen Möglichkeiten werden wir das gleiche Banner auf AS3 erstellen.

Lass uns anfangen!

Lassen Sie uns ein Banner mit Macromedia Flash 6-9, Adobe Flash CS3-CS4 (Grundsätzlich nicht kritisch) nach diesem Schema erstellen.

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

  • geturl_mc - Clip (Schaltfläche) beim Klicken, der zur angegebenen URL-Adresse führt.
  • viewu ist ein dynamischer Text, der unsere URL anzeigt.
  • close_mc - Clip (Schaltfläche) durch Klicken, auf dem unser Banner geschlossen wird
  • Flash Banner ist nur ein statischer Text. (Rufe nach Herzenslust)

Die Arbeit am Visual ist abgeschlossen, wir arbeiten am aktiven Skript (ActionScript).

Erstellen Sie eine neue Ebene und klicken Sie auf F9 (Windows-> Aktion). Wir schreiben in das geöffnete 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 Gurte zu diesem Skript.

getURL ("http://www.domain.com", "_blank"); - Mit diesem Code navigieren wir zur Website http://www.domain.com.
unloadMovie (_root); - entladen Sie unser Banner aus dem Speicher;
getURL ("javascript: kill ();", "_self"); - Entfernen Sie das Div Banner-Substrat mit einem Java-Skript, das im Folgenden beschrieben wird.

Also, kompilieren und Banner ist fertig! Wir wenden uns nun dem Höhepunkt unseres Projekts zu.

Wie binde ich ein Banner in eine Webseite ein?

Machen wir uns zunächst Gedanken über Menschen, die in ihren Browsern keine Flash-Technologie unterstützen. Eine Person, die keinen Blitz hat, wird Ihr Banner nicht sehen!

Speziell für ihn, der Gif-Stub macht. ein GIF-Banner, das unter Flash liegt (natürlich müssen wir nicht über Rich Media sprechen, um ein GIF-Banner zu erhalten).

Gif-Cap kann durch Entfernen eines Screenshots aus dem Banner (Alt + Prt Scr) und Bearbeiten in einem beliebigen Editor oder Rendern (Speichern als Bild) in der Entwicklungsumgebung selbst (in diesem Fall verwendete Macromedia Flash 6-8-Umgebung) erstellt werden.

Hier ist so ein Gif - die Mütze hat sich für mich herausgestellt.

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

Wenn alles fertig ist, fügen Sie alles zum Heap in eine Webseite ein (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>

Erklärung des HTML-Codes!

<div id = "loadruner1"> ist unser Substrat für ein Flash-Banner mit dem Namen "loadruner1"
flash.swf - unser Banner
flash1-1.gif - unser Gif-Stub
Funktion kill () ist die Funktion zum Schließen des Hintergrunds und des Banners als Ganzes (dessen Ausführung wurde im Flash beschrieben, also getURL ("javascript: kill ();", "_self");)

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

Es scheint alles zu sein, aber ich entschied mich ein wenig mit dem Gif-Stub zu experimentieren und fügte dem Benutzer die Möglichkeit hinzu, ihn durch Drücken des Kreuzes zu schließen.

Dafür habe ich das Gif in 3 Teile aufgeteilt:

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

Und füge sie auf diese Weise in HTML ein. (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>

Erklärung! Der Ort der Bilder stellte sich wie folgt dar:

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

onclick = "document.getElementById ('loadruner1'). style.display = 'none';" -Ereignis zum Schließen unseres Banners (jetzt weiß die Kappe auch, wie sie zu schließen ist)

Sie können <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (HTML-Stub-Code separat) an der Stelle " onclick" verwenden

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

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

Rich Banner ist fertig! Es bleibt nur noch an den interaktiven Inhalt unseres Banners zu denken (Design, Effekte usw. nach Ihren Wünschen).

Angenommen, wir wollten die URL der direkten Adresse und den Text des Links auf unserem Banner oder etwas anderes ändern, das sich dynamisch ändert.

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

Lassen Sie uns zunächst ein kleines Flash-Banner reparieren.

//объявляем переменную для 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 <param name = "flashVars" value = "genericURL = http: //www.domain.com" /> hinzugefügt

Mit diesem Code können Sie unsere URL-Adresse in einer generischen Flash-Variablen neu verteilen .

Jetzt können Sie den Direkteintrag und den Text des Banners ändern, indem Sie diesen Wert einfach in HTML bearbeiten.

Manche Leute ärgern sich über so etwas wie einen Rahmen um ein Banner.

Versuchen wir es mit der SwfObject.js-Bibliothek loszuwerden - Wir schreiben 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>

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

Und die Transparenz des Flash-Laufwerks selbst ( fo.addParam ("wmode", "transparent"); ). Wenn gewünscht, können sie entfernt werden!

Skriptfunktion Funktion kill (); wurde in das SvfObject-Hauptskriptsetup eingebettet.

Wenn gewünscht, kann dies alles in einer Skriptdatei und in einer Funktion für kompakten Code gesammelt werden.

+ Für Liebhaber großer Möglichkeiten und neuer Technologien. AS3

AS3-Banner

Mit dem Aufkommen von AS3 bietet Flush eine wirklich großartige Gelegenheit.

Speziell für Fans aller neuen Banner, die nur AS3 verwenden (Umgebung Adobe Flash CS3 und Adobe Flash CS4).

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

Nun, fügen Sie es auf dieselbe Weise wie oben beschrieben in eine Webseite ein!

Verschiedene Aspekte zu Flash Rich Media-Bannern:

* Anforderungen für gewöhnliche Flash-Banner.

1. Flash-Version nicht höher als 7
2. Zusätzlich zur SWF-Datei müssen Sie .gif-Stubs vorbereiten, die Benutzern angezeigt werden, die keine Flash-Banner anzeigen können.
3. das Vorhandensein von root.link1 (kann beliebig sein) in getURL (_root.link1, "_blank");

* Anforderungen für Rich-Media-Banner.

1. Flash-Version nicht höher als 7
2. Gif-Stub erforderlich
3. Größenbegrenzung
4. das Vorhandensein von root.link1 (kann beliebig sein) in getURL (_root.link1, "_blank");
5. das Vorhandensein der Schaltfläche "close" fscommand ('kill', ''); unloadMovie (_root);

Wenn Sie es in "Bannernetzwerken" verwenden, sollten Sie die Flash-Version strikt einhalten, um eine bessere Kompatibilität zu gewährleisten.

Glücklicherweise ist ActionScript 3.0 selbst in Flash CS3 nicht erforderlich. Sie können mit 2.0 auskommen, in der alles einfach und ziemlich zuverlässig ist.

Wenn Sie jedoch noch die dritte Version von ActionScript verwenden müssen, müssen Sie einige Punkte beachten.

Erstens können Sie sich sichern, indem Sie Folgendes angeben: <object type = "application / x-shockwave-flash" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 0,0,0 ">.

Zweitens , die FlashVars werden mit dem Link loaderInfo.parameters angegeben, der folgende Form hat: root.loaderInfo.parameters.link1 oder vollständig navigierenToURL (neue URLRequest (root.loaderInfo.parameters.link1), '_self');

Drittens , um Javascript auszuführen, die Funktion "kill" anstelle von fscommand ('kill', '');

Es ist besser, die alte Methode (Javascript) zu verwenden :) Der Code für die Schließen-Schaltfläche sieht wie navigateToURL aus (new URLRequest ('javascript: kill ();'), '_self');

Ellenbogen:

Elemente wie getURL ("javascript: kill ();", "_self"); und AS3 navigateToURL (neue URLRequest ('javascript: kill ();'), '_self'); kann im Browser mit einem Flash blockiert werden, wenn sie lokal ausgeführt werden.

Aufgrund der Sicherheitsrichtlinie funktionieren einige Funktionen nur auf dem Server.

In unserem Fall funktioniert die "Schließen" -Taste (für Flash) nicht lokal!

In AS3 werden externe Variablen als root.loaderInfo.parameters.link1 geladen .

Dabei ist link1 der Name der Variablen.

Anstelle von GIF-Stubs können Sie Bilder in anderen Formaten verwenden (jpg, png, tif, tga, bmp). Nur ein Gif-Stub ist in Bezug auf das Gewicht optimal, da Sie ein Flash-Banner und einen Gif-Stub laden müssen. Gif - Der Stub sollte die gleiche Größe wie das Flash-Laufwerk haben.



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

Skriptquellen (flashbaners.rar) [ Skriptquellen ] [ Skriptquellen ] [ Skriptquellen ] [ Skriptquellen ]