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

Création d'une bannière Flash et d'un stub gif

Aujourd'hui, nous allons découvrir comment créer non seulement une bannière, mais 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 avec une opportunité rich media (clips audio et vidéo, effets interactifs et bien plus qui ne se trouve pas dans les bannières habituelles).

Pour ces bannières, la technologie Adobe Flash est particulièrement adaptée.

* Tout d' abord, nous aborderons la création d'une simple bannière flash et le problème de la façon de la placer sur une page web et de mettre un stub gif.

* Après nous être un peu familiarisés avec Flash et le langage html, nous expérimenterons les flashvars (FlashVars).

* Réfléchissez à l'utilisation de la bibliothèque SwfObject pour placer une bannière sur une page Web.

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

Commençons!

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

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

  • geturl_mc - clip (bouton) en cliquant sur lequel la transition vers l'URL spécifiée aura lieu.
  • viewu est le texte dynamique qui affichera notre URL.
  • close_mc - clip (bouton) en cliquant sur la fermeture de notre bannière
  • Les bannières Flash ne sont que du texte statique. (Nous l'appelons tout ce que votre cœur désire)

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

Créez un nouveau calque et appuyez sur F9 (windows-> Action). Nous écrivons dans la fenêtre qui s'ouvre

//Устанавливаем значение для текста(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 explications pour ce script.

getURL ("http://www.domain.com", "_blank"); - en utilisant ce code, nous effectuons une navigation vers le site http://www.domain.com.
unloadMovie (_root); - décharger notre bannière de la mémoire;
getURL ("javascript: kill ();", "_self"); -enlever la bannière div div en utilisant le script Java, qui sera décrit ci-dessous.

Alors, compilez et la bannière est prête! Passons maintenant à l'apogée de notre projet.

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

Pour commencer, nous nous préoccuperons des personnes dont le navigateur ne prend pas en charge la technologie Flash. Une personne qui n'a pas de flash ne verra pas votre bannière!

Surtout pour lui, nous faisons un talon de gif. c'est-à-dire, la bannière gif qui sera sous Flash (bien sûr, parler de rich media pour la bannière gif n'est pas nécessaire).

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

Voici un gif - un bout s'est avéré pour moi.

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

Lorsque tout est prêt, mettez tout dans le 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"> - c'est notre substrat pour une bannière flash nommée "loadruner1"
flash.swf - notre bannière
flash1-1.gif - notre gif est un talon
fonction kill () - cette fonction pour fermer l'arrière-plan et la bannière dans son ensemble (son exécution a été décrite dans un flash comme celui-ci getURL ("javascript: kill ();", "_self");)

À la place de 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 la prise gif et j'ai ajouté la possibilité à l'utilisateur de la fermer en cliquant sur la croix.

Pour ce faire, j'ai divisé 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 photos s'est avéré ceci:

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

onclick = "document.getElementById ('loadruner1'). style.display = 'none';" -Événement pour fermer notre bannière (maintenant le talon peut également être fermé)

Au lieu d'un clic, vous pouvez utiliser le <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (code de stub html séparément)

<!— заглушка моего типа-->
<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. (Créez le design, les effets, etc., comme vous le souhaitez)

Supposons que nous voulions changer l'URL de la directive et le texte du lien sur notre bannière ou autre chose changer dynamiquement.

Pour cela, nous utiliserons des variables flash FlashVars. Les variables que nous donnerons à notre bannière de l'extérieur.

Tout d'abord, corrigeons 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 modifiez 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 nous permet de rediriger notre URL vers une variable flash genericURL.

Vous pouvez maintenant modifier le texte direct et le texte de la bannière en modifiant simplement cette valeur en html.

Certaines personnes sont agacées par le phénomène d'un cadre autour d'une bannière.

Essayons de nous en débarrasser en utilisant la bibliothèque SwfObject.js - Nous écrivons un tel 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 sont déjà inclus ici (fo.addVariable ("genericURL", "http://www.domain.com");)

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

Fonction de script fonction kill (); a été cousu dans le script de configuration principal de SvfObject .

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

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

Bannière AS3

Avec l'avènement de l' AS3 , la chasse d'eau offre des possibilités vraiment grandioses.

Surtout pour les fans de toutes nouvelles choses, la même bannière, utilisant uniquement AS3 (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, insérez-le dans la page Web de la même manière que décrit ci-dessus!

Différents aspects des bannières Flash Rich Media:

* Exigences pour les bannières flash régulières.

1. version flash ne dépassant pas 7
2. En plus du fichier .swf, il est nécessaire de préparer des talons .gif qui seront montrés aux utilisateurs qui ne peuvent pas visualiser les bannières flash.
3. la présence de root.link1 (peut être n'importe lequel) dans getURL (_root.link1, "_blank");

* Exigences pour les bannières rich media.

1. version flash ne dépassant pas 7
2. talon gif requis
3. limite de taille
4. la présence de root.link1 (peut être n'importe lequel) dans getURL (_root.link1, "_blank");
5. la présence du bouton de fermeture fscommand ('kill', ''), unloadMovie (_root);

Si vous avez l'intention de l'utiliser dans des réseaux de bannières, vous devez suivre strictement la version flash pour assurer une meilleure compatibilité.

Heureusement, ActionScript 3.0 est facultatif même dans Flash CS3. Vous pouvez faire 2.0, dans lequel tout est simple et assez fiable.

Mais si vous devez toujours utiliser la troisième version d'ActionScript, gardez à l'esprit quelques éléments.

Tout d'abord , vous pouvez être en sécurité en définissant: <object type = "application / x-shockwave-flash" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 0,0,0 ">.

Deuxièmement , FlashVars est indiqué en utilisant loaderInfo.parameters, le lien sera de la forme root.loaderInfo.parameters.link1 ou entièrement naviguerToURL (new URLRequest (root.loaderInfo.parameters.link1), '_self');

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

Mieux vaut utiliser une méthode ancienne (javascript :) .Le code du bouton de fermeture ressemblera à navigToURL (new URLRequest ('javascript: kill ();'), '_self');

Coudes:

Des éléments tels que getURL ("javascript: kill ();", "_self"); et AS3 navigToURL (new URLRequest ('javascript: kill ();'), '_self'); peut être bloqué dans le navigateur par un flash s'il est exécuté localement.

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

Dans notre cas , le bouton de fermeture (pour le 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 gif, vous pouvez utiliser des images dans d'autres formats (jpg, png, tif, tga, bmp). Juste une prise gif est optimale en poids, car vous devez charger une bannière flash et une prise gif GIF - La prise doit être de la même taille que le lecteur flash.



Tutoriel PDF (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 ]