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

Créer une bannière Flash et des talons de gif

Aujourd'hui, nous verrons comment fabriquer non seulement une bannière, mais aussi une bannière flash riche avec toutes les conséquences qui en découlent.

Qu'est-ce qu'une bannière Rich (plus précisément une bannière Rich Media)?

La bannière rich media est avant tout une bannière qui présente une opportunité de média enrichi (clips audio et vidéo, effets interactifs et bien d’autres choses qui ne se trouvent pas dans les bannières classiques).

La technologie appropriée Adobe Flash convient particulièrement à ces bannières.

* Tout d’ abord, nous allons aborder la création d’une simple bannière Flash et le problème de la manière de la placer sur une page Web et de mettre un gif vierge.

* Après avoir lu un peu avec Flash et le langage HTML, testons FlashVars.

* Considérez comment utiliser la bibliothèque SwfObject pour mettre une bannière sur une page Web.

* Pour les fans de grandes opportunités, nous allons faire la même bannière sur AS3.

Commençons!

Faisons une bannière avec Macromedia Flash 6-9, Adobe Flash CS3-CS4 (principe non critique) selon ce schéma.

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

  • geturl_mc - clip (bouton) en cliquant sur qui ira à l'adresse URL spécifiée.
  • viewu est un texte dynamique qui affichera notre URL.
  • close_mc - clip (bouton) en cliquant sur lequel notre bannière se fermera
  • Flash Banners est juste un texte statique. (Appelez comme votre coeur le désire)

Le travail sur le visuel est terminé, travaillons sur le script actif (ActionScript).

Créez un nouveau calque et cliquez sur F9 (windows-> action). Nous écrivons dans la fenêtre ouverte

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

Quelques ceintures à ce script.

getURL ("http://www.domain.com", "_blank"); - en utilisant ce code, nous naviguons sur le site http://www.domain.com.
unloadMovie (_root); - décharger notre bannière de la mémoire;
getURL ("javascript: kill ();", "_self"); - supprimez le substrat de la bannière div à l'aide du script Java, qui sera décrit ci-dessous.

Donc, compiler et la bannière est prête! Nous passons maintenant au point culminant de notre projet.

Comment intégrer une bannière dans une page Web?

Pour commencer, intéressons-nous à ceux qui ne prennent pas en charge la technologie Flash dans leurs navigateurs. Une personne qui n'a pas de flash ne verra pas votre bannière!

Surtout pour lui faire gif-stub. c’est-à-dire une bannière gif placée sous Flash (bien entendu, nous n’avons pas à dire sur les médias riches pour une bannière gif).

Vous pouvez créer un gif-stub en supprimant une capture d’écran de la bannière (Alt + Prt Scr) et l’éditer dans n’importe quel éditeur, ou en effectuant un rendu (en tant qu’image) dans l’environnement de développement lui-même (dans ce cas, l’environnement Macromedia Flash 6-8 utilisé).

Voici un tel gif - j'ai un bout.

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

Lorsque tout est prêt, nous ajoutons tout au tas dans une page Web (code html).

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

Explication du code HTML!

<div id = "loadruner1"> est notre substrat pour une bannière flash avec le nom "loadruner1"
flash.swf - notre bannière
flash1-1.gif - notre talon de gif
La fonction kill () est la fonction permettant de fermer le calque sous-jacent et la bannière dans son ensemble (son exécution a été décrite dans un flash, donc getURL ("javascript: kill ();", "_self");)

Dans le document.getElementById ('loadruner1'). Style.display = 'none'; Vous pouvez utiliser document.all ['loadruner1']. Style.display = "none";

Cela semble être tout, mais j'ai décidé d'expérimenter un peu le talon de gif et j'ai ajouté la possibilité pour l'utilisateur de le fermer en appuyant sur la croix.

Pour cela, j'ai cassé le gif en 3 parties:

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

Et mettez-les en HTML de cette façon. (code html)

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

Explication! L'emplacement des images s'est avéré comme ceci:

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

onclick = "document.getElementById ('loadruner1'). style.display = 'none';" -Événement pour fermer notre bannière (maintenant le stub sait aussi comment fermer)

Vous pouvez utiliser <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (le code de raccord HTML séparé séparément) à l'emplacement onclick.

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

Au lieu de document.getElementById ('loadruner1'). Style.display = 'none', vous pouvez toujours utiliser document.all ['loadruner1']. Style.display = "none";

La bannière riche est prête! Il ne reste plus qu’à penser au contenu interactif de notre bannière (conception d’invent, effets, etc., comme vous le souhaitez).

Supposons que nous voulions changer l'URL du lien direct et le texte du lien sur notre bannière ou quelque chose d'autre qui change de façon dynamique.

Pour ce faire, nous allons utiliser des variables flash FlashVars. Variables que nous allons donner à notre bannière de l'extérieur.

Commençons par réparer une petite bannière Flash.

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

Et éditez le code HTML.

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

Nous avons ajouté <param name = "flashVars" value = "genericURL = http: //www.domain.com" />

Ce code vous permet de redistribuer l'URL de notre URL dans la variable genericURL.

Maintenant, vous pouvez changer le texte direct et le texte de la bannière en éditant simplement cette valeur en HTML.

Certaines personnes sont ennuyées par une chose telle qu'un cadre autour d'une bannière.

Essayons de nous en débarrasser en utilisant la bibliothèque SwfObject.js - Nous écrivons ce code html:

<!—баннер + заглушка + 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")) sont déjà inclus ici;)

Et la transparence du lecteur flash lui-même ( fo.addParam ("wmode", "transparent"); ). Si vous le souhaitez, ils peuvent être supprimés!

Fonction de script function kill (); a été intégré au script de configuration principal SvfObject .

Si vous le souhaitez, tout cela peut être rassemblé dans un fichier de script et dans une fonction pour un code compact.

+ Pour les amateurs de grandes opportunités et de nouvelles technologies.

Bannière AS3

Avec l'avènement de l' AS3 , flush offre une opportunité vraiment formidable.

Surtout pour les fans de tous les nouveaux bannière même, en utilisant uniquement AS3 (environnement Adobe Flash CS3 et Adobe Flash CS4).

Code AS3 pour la bannière

//импортируем нужные объекты
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 уровне закончено!

Eh bien, collez-le dans une page Web de la manière décrite ci-dessus!

Différents aspects des bannières multimédias riches en flash:

* Exigences pour les bannières flash ordinaires.

1. version flash pas plus élevé que 7
2. En plus du fichier .swf, vous devez préparer .gif-stubs qui sera montré aux utilisateurs qui ne sont pas en mesure d'afficher des bannières flash.
3. la présence de root.link1 (peut être n’importe lequel) dans getURL (_root.link1, "_blank");

* Conditions requises pour les bannières rich media.

1. version flash pas plus élevé que 7
2. souche gif requise
3. taille limite
4. la présence de root.link1 (peut être quelconque) dans getURL (_root.link1, "_blank");
5. la présence du bouton "close" fscommand ('kill', ''); unloadMovie (_root);

Si vous envisagez de l'utiliser dans des "réseaux de bannières", vous devez respecter scrupuleusement la version du flash afin d'assurer une meilleure compatibilité.

Heureusement, ActionScript 3.0 n'est pas nécessaire, même dans Flash CS3. Vous pouvez vous en tirer avec la version 2.0, dans laquelle tout est simple et assez fiable.

Toutefois, si vous devez toujours utiliser la troisième version d'ActionScript, tenez compte de quelques points.

Premièrement , vous pouvez vous protéger en mettant: <type d'objet = "application / x-shockwave-flash" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 0,0,0 ">.

Deuxièmement , FlashVars est spécifié à l’aide de loaderInfo.parameters. Le lien se présentera sous la forme suivante: root.loaderInfo.parameters.link1 ou complètement browseToURL (nouvel URLRequest (root.loaderInfo.parameters.link1), '_self');

Troisièmement , pour exécuter javascript, la fonction «kill» au lieu de fscommand ('kill', '');

Il est préférable d’utiliser la méthode ancienne (javascript). :) Le code du bouton de fermeture ressemblera à browseToURL (new URLRequest ('javascript: kill ();'), '_self');

Coudes:

Des éléments tels que getURL ("javascript: kill ();", "_self"); et AS3 browseToURL (new URLRequest ('javascript: kill ();'), '_self'); peuvent être bloqués dans le navigateur avec un flash s'ils sont exécutés localement.

En raison de la politique de sécurité, certaines fonctions ne fonctionnent que sur le serveur.

Dans notre cas, le bouton "fermer" (pour flash) ne fonctionnera pas localement!

Dans AS3, les variables externes sont chargées en tant que root.loaderInfo.parameters.link1.

Où link1 est le nom de la variable.

Au lieu de stubs de gif, vous pouvez utiliser des images dans d'autres formats (jpg, png, tif, tga, bmp). Un seul fichier GIF est optimal en termes de poids, car vous devez charger une bannière Flash et un fichier GIF Gif - le fichier doit avoir la même taille que le lecteur Flash.



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

Sources de script (flashbaners.rar) [ Sources de script ] [ Sources de script ] [ Sources de script ] [ Sources de script ]