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

Erstelle Flash Banner und Gif Stub

Heute werden wir herausfinden, wie man nicht nur ein Banner, sondern ein Rich-Flash-Banner mit allen Konsequenzen, die folgen, macht.

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

Rich Media Banner ist vor allem ein Banner mit einer reichhaltigen Medienchance (Sound- und Videoclips, interaktive Effekte und vieles mehr, was bei gewöhnlichen Bannern nicht möglich ist).

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

* Zuerst werden wir auf die Erstellung eines einfachen Flash-Banners und das Problem, wie man es auf einer Webseite platzieren und einen gif stub platzieren kann, eingehen.

* Nachdem wir etwas über Flash und die Sprache von HTML gelesen haben, experimentieren wir mit flashvars (FlashVars).

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

* Für Fans von großen Möglichkeiten, werden wir das gleiche Banner auf AS3 machen.

Fangen wir an!

Wir machen ein Banner mit Macromedia Flash 6-9, Adobe Flash CS3-CS4 (im Prinzip nicht kritisch) für dieses Schema.

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

  • geturl_mc - ein Clip (Button) durch Klicken auf den Link zur angegebenen URL.
  • viewu - dynamischer Text, der unsere URL anzeigt.
  • close_mc - ein Clip (Button) durch Klicken auf den unser Banner geschlossen wird
  • Flash Banner ist einfach nur Text. (Wir nennen es wie du willst)

Die Arbeit am Visual ist beendet, nehmen wir ein aktives Skript (ActionScript).

Erstellen Sie eine neue Ebene und drücken Sie 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 Auftritte zu diesem Skript.

getURL ("http://www.domain.com", "_blank"); - Mit Hilfe dieses Codes machen wir die Navigation zur Seite http://www.domain.com.
unloadMovie (_root); - Entladen Sie unser Banner aus der Erinnerung;
getURL ("javascript: kill ();", "_self"); - Wählen Sie das Div-Banner-Substrat mithilfe des Java-Skripts aus, das im Folgenden beschrieben wird.

Also, das Kompilieren und Banner ist fertig! Kommen wir nun zum Höhepunkt unseres Projekts.

Wie bette ich ein Banner in eine Webseite ein?

Sorgen wir zuerst um die Leute, die keine Flash-Technologie in ihrem Browser haben. Eine Person, die keinen Flush hat, wird Ihr Banner nicht sehen!

Speziell dafür machen wir gif-stub. zB gif-banner, das unter dem Flush liegen wird (natürlich über Rich Media für das gif-banner kann man nicht sprechen).

Gif-Stubs können durch Entfernen eines Screenshots vom Banner (Alt + Prt Scr) in einem Editor bearbeitet oder in der Entwicklungsumgebung selbst gerendert (gespeichert als Bild) werden (in diesem Fall wurde die Macromedia Flash 6-8-Umgebung verwendet).

Hier ist ein gif-stub für mich.

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

Wenn alles fertig ist, fügen wir alles dem Heap auf der Webseite hinzu (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 zum HTML-Code!

<div id = "ladtruner1"> - das ist unser Hintergrund für ein Flash-Banner mit dem Namen "loadruner1"
flash.swf - unser Banner
flash1-1.gif - unser gif stub
function kill () - diese Funktion wird verwendet, um den Hintergrund und das Banner als Ganzes zu schließen (seine Ausführung wurde in der Flush beschrieben, also getURL ("javascript: kill ();", "_self");)

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

Es scheint, dass alles, aber ich entschied mich, mit dem Gif Stub zu experimentieren und fügte dem Benutzer die Möglichkeit hinzu, es zu schließen, indem er auf das Kreuz klickte.

Um dies zu tun, habe ich die Gifku in Teil 3 gebrochen:

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

Und setze sie auf diese Weise in html. (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! Das Bildlayout stellte sich heraus:

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

onclick = "document.getElementById ('loadruner1'). style.display = 'none';" - Event zum Schließen unseres Banners (jetzt kann der Stub auch schließen)

Im Ort onclick können Sie <a href="javascript:document.getElementById('loadruner1').style.display='none'" target="_self"> (der HTML-Code wird separat stubben)

<!— заглушка моего типа-->
<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 immer document.all ['loadruner1'] verwenden. Style.display = "none";

Rich-Banner ist fertig! Es bleibt nur, um über den interaktiven Inhalt unseres Banners nachzudenken (kommen Sie mit Design, Effekten, etc., wie Sie wollen)

Nehmen wir an, wir wollten die URL der Direktive und den Linktext auf unserem Banner ändern oder sich dynamisch verändern.

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

Zunächst korrigieren wir ein kleines 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");
}
//Создание банера на Флеш уровне закончено!

Und wir werden den HTML-Code bearbeiten.

<!—Баннер + заглушка + 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 wir die URL unserer generischen URL in eine Variable ändern.

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

Manche Leute sind genervt von solch einem Phänomen wie der Rahmen um das Banner herum.

Wir werden versuchen, es mit Hilfe der Bibliothek SwfObject.js loszuwerden - Wir schreiben solchen 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"); ). Auf Wunsch können sie entfernt werden!

Skriptfunktion function kill (); wurde in das SvfObject Hauptkonfigurationsskript eingebettet .

Wenn Sie möchten, können Sie all dies in einer Skriptdatei und einer Funktion für kompakten Code sammeln.

+ Für Fans großer Chancen und neuer Technologien AS3

AS3-Banner

Mit der Einführung von AS3 bietet der Flush wirklich großartige Möglichkeiten.

Besonders für Fans aller neuen, das gleiche Banner, nur mit AS3 (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 die gleiche Weise wie oben beschrieben in die Webseite ein!

Verschiedene Aspekte von Flash Rich Media-Bannern:

* Anforderungen für konventionelle Flash-Banner.

1. Die Version des Blitzes überschreitet nicht 7
2. Zusätzlich zur .swf-Datei müssen .gif-Stubs erstellt werden, 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. Die Version des Blitzes überschreitet nicht 7
2. gif stub ist erforderlich
3. Größenbeschränkung
4. das Vorhandensein von root.link1 (kann beliebig sein) in getURL (_root.link1, "_blank");
5. das Vorhandensein der Schließen-Taste fscommand ('kill', ''); unloadMovie (_root);

Wenn Sie es in "Bannernetzwerken" verwenden, sollten Sie die Version des Flashs strikt befolgen, um eine bessere Kompatibilität zu gewährleisten.

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

Wenn Sie dennoch die dritte Version von ActionScript verwenden müssen, sollten Sie einige Dinge beachten.

Zuerst können Sie sich sichern, indem Sie Folgendes eingeben: <objekttyp = "application / x-shockwave-flash" code base = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 , 0.0.0 ">.

Zweitens wird FlashVars mit loaderInfo.parameters angegeben, der Link hat das Format root.loaderInfo.parameters.link1 oder komplett navigateToURL (new URLRequest (root.loaderInfo.parameters.link1), '_self');

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

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

Gewindebohrer:

Solche Elemente wie getURL ("javascript: kill ();", "_self"); und AS3 navigateToURL (neues URLRequest ('javascript: kill ();'), '_self'); kann im Browser Flash geblockt werden, wenn sie lokal laufen.

Aufgrund der Sicherheitsrichtlinie funktionieren einige Funktionen nur auf dem Server.

In unserem Fall funktioniert der "Schließen" -Button (für einen Flash) nicht lokal!

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

Wobei link1 der Name der Variablen ist.

Anstelle von gif stubs können Sie Bilder in anderen Formaten (jpg, png, tif, tga, bmp) verwenden. Just gif stub ist optimal in Gewicht, weil Sie ein Flash-Banner und Gif-Stub laden müssen Gif - der Stub sollte die gleiche Größe wie das Flash-Laufwerk sein.



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

Quellen des Skripts (flashbaners.rar) [ Quellen des Skripts ] [ Quellen des Skripts ] [ Quellen des Skripts ] [ Quellen des Skripts ]