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

Créer une bannière Flash et un gif stub

Aujourd'hui, nous allons trouver comment faire non seulement une bannière, mais une bannière Rich Flash avec toutes les conséquences qui suivent.

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

La bannière rich media est, avant tout, une bannière riche en opportunités médiatiques (clips sonores et vidéo, effets interactifs et bien d'autres choses qui ne sont pas dans les bannières ordinaires).

Pour de telles bannières, particulièrement bonnes, la technologie Adobe Flash est 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 gif stub.

* Après avoir lu un peu sur Flash et la langue du html, nous expérimentons avec flashvars (FlashVars).

* Pensez à utiliser la bibliothèque SwfObject pour placer 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!

Nous faisons une bannière en utilisant Macromedia Flash 6-9, Adobe Flash CS3-CS4 (en principe, pas critique) pour ce régime.

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

  • geturl_mc - un clip (bouton) en cliquant sur lequel ira à l'URL spécifiée.
  • viewu - texte dynamique qui affichera notre URL.
  • close_mc - un clip (bouton) en cliquant sur lequel notre bannière sera fermée
  • Flash Banners est juste du texte brut. (Nous l'appelons comme vous s'il vous plaît)

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 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 apparences à ce script.

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

Ainsi, la compilation et la bannière sont prêtes! Passons maintenant à l'aboutissement de notre projet.

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

Tout d'abord, préoccupons-nous de ceux qui n'ont pas la technologie Flash dans leur navigateur. Une personne qui n'a pas de couleur ne verra pas votre bannière!

Spécialement pour cela nous faisons gif-stub. c'est-à-dire gif-banner, qui se situera sous le Flush (naturellement sur les médias riches pour la bannière gif, vous ne pouvez pas parler).

Gif-stub peut être fait en supprimant une capture d'écran de la bannière (Alt + Prt Scr) et édité dans n'importe quel éditeur ou rendu (enregistré en image) dans l'environnement de développement lui-même (dans ce cas, l'environnement Macromedia Flash 6-8).

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

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

Quand tout sera prêt, nous ajouterons tout sur le tas dans la 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 au code html!

<div id = "loadruner1"> - c'est notre arrière-plan pour une bannière flash nommée "loadruner1"
flash.swf - notre bannière
flash1-1.gif - notre gif stub
function kill () - cette fonction est utilisée pour fermer l'arrière-plan et la bannière dans son ensemble (son exécution a été décrite dans le flush alors getURL ("javascript: kill ();", "_self");)

À la place de document.getElementById ('loadruner1'). Style.display = 'none'; Vous pouvez utiliser document.all ['loadruner1']. Style.display = "none";

Il semble que tout, mais j'ai décidé d'expérimenter avec le gif stub et ajouté l'opportunité pour l'utilisateur de le fermer en cliquant sur la croix.

Pour ce faire, j'ai cassé le gifku dans la partie 3:

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

Et les mettre 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! La disposition de l'image s'est avérée ceci:

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

onclick = "document.getElementById ('loadruner1'). style.display = 'aucun';" - événement pour la fermeture de notre bannière (maintenant le talon peut également se fermer)

A la place onclick, vous pouvez utiliser <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (le code html est bloqué 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";

Rich-banner est prêt! Il ne reste plus qu'à penser au contenu interactif de notre bannière (imaginez le design, les effets, etc. comme vous voulez)

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

Pour ce faire, nous utiliserons les variables Flash FlashVars. Variables que nous donnerons à notre bannière de l'extérieur.

Pour commencer, nous corrigerons 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 nous allons éditer 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 changer l' URL de notre genericURL en une variable.

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

Certaines personnes sont agacées par un phénomène tel que le cadre autour de la bannière.

Nous allons essayer de nous en débarrasser avec l'aide de 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 (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 désiré, ils peuvent être enlevés!

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

Si vous le souhaitez, vous pouvez collecter tout cela dans un fichier script et une fonction pour le code compact.

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

Bannière AS3

Avec l'avènement de l' AS3 , la chasse d'eau a vraiment de grandes possibilités.

Surtout pour les fans de tout nouveau, la même bannière, en utilisant seulement 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, alors collez-le dans la page Web de la même manière que décrit ci-dessus!

Différents aspects concernant les bannières multimédia riches en flash:

* Exigences pour les bannières flash conventionnelles.

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

* Exigences pour les bannières rich media.

1. La version du flash ne dépasse pas 7
2. gif stub est requis
3. restriction de taille
4. la présence de root.link1 (peut être any) dans getURL (_root.link1, "_blank");
5. la présence du bouton de fermeture fscommand ('kill', ''); unloadMovie (_root);

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

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

Mais si vous avez encore besoin d'utiliser la troisième version d'ActionScript, gardez à l'esprit un certain nombre de choses.

Tout d'abord , vous pouvez vous assurer en mettant: <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 spécifié en utilisant loaderInfo.parameters le lien aura la forme root.loaderInfo.parameters.link1 ou complètement navigateToURL (new URLRequest (root.loaderInfo.parameters.link1), '_self');

Troisièmement , pour exécuter la fonction JavaScript "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 à navigateToURL (new URLRequest ('javascript: kill ();'), '_self');

Robinets:

Des éléments tels que getURL ("javascript: kill ();", "_self"); et AS3 navigateToURL (new URLRequest ('javascript: kill ();'), '_self'); peut être bloqué dans le navigateur flash, si elles s'exécutent localement.

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

Dans notre cas, le bouton "fermer" (pour un 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). Just gif stub est optimal en poids, car vous devez charger une bannière flash et un gif-stub.Gif - le talon doit être de la même taille que le lecteur flash.



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

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