Créer Flash et gif bannières bouchons

Aujourd'hui, se penchera sur la façon de faire non seulement une bannière et Rich bannière flash avec toutes les conséquences qui en découlent.

Quel est le Rich-banner (plus riche bannière des médias)?

riche Bannerman des médias est, avant tout, avoir une ressource riche d'une rencontre avec les médias (clips audio et vidéo, les effets interactifs et bien plus encore qui ne sont pas les bannières habituelles).

Pour ces bannières sont particulièrement bien adapté la technologie Adobe Flash.

* Tout d' abord, nous touchons à la création d'une bannière flash simple et le problème de la façon de le placer sur une page Web et de mettre le cap gif.

* Après avoir lu un peu avec Flash et html de la langue, l' expérience avec fleshvarami (FlashVars).

* Pensez à la façon d'utiliser la bibliothèque swfobject mis la bannière sur une page Web.

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

Commençons!

Faire une bannière avec l'aide de Macromedia Flash 6-9, Adobe Flash CS3-CS4 (En principe, non critique) pour ce régime.

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

  • geturl_mc - Clip (bouton) en appuyant sur lequel la transition se produira à l'adresse URL spécifiée.
  • viewu - texte dynamique, qui permet d' afficher notre URL.
  • close_mc - Clip (bouton) en cliquant sur notre bannière qui sera fermée
  • Bannières Flash - il est tout simplement un texte statique. (Quoi que vous appelez l'âme)

Les travaux sur un fini de script visuel, zaymёmsya active (ActionScript).

Créez un nouveau calque et appuyez sur F9 (Windows-> Action). L'écriture 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");
}
//Создание баннера на Флеш уровне закончено!

Certains poyasteniya à ce script.

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

Alors Compiler et banderole! Nous passons maintenant à l'apogée de notre projet.

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

Pour commencer, vous soucier de ces gens qui ont un navigateur ne supporte pas la technologie Flash. Un homme qui ne vide pas, ne voient pas votre bannière!

Surtout faire gif-cap pour lui. ie gif-bannière, qui se trouvent sous le Flesch (naturellement sur les médias riches ne peuvent pas parler pour le gif-bannière).

Gif-bouchon peut être fait en enlevant une capture d'écran de la bannière (Alt + Prt Scr) et modifier dans un éditeur ou render (enregistrer en tant que papier peint) dans l'environnement le plus de développement (dans ce cas en utilisant Macromedia Flash 6-8 mercredi).

Voici une couverture de gif suppression tourné vers moi.

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

Quand tout est prêt, on additionne le tout dans un tas d'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"> - ceci est notre soutien pour la bannière flash c le nom "loadruner1"
flash.swf - notre bannière
flash1-1.gif - notre casquette gif
fonction kill () - cette fonction est pour le soutien et la fermeture de la bannière dans son ensemble (son exécution a été décrite en flash de sorte getURL ( "javascript: kill () ;", "_self");).

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

Il semble être, mais je décidé d'expérimenter un peu avec prise gif et ajoutée à l'utilisateur la possibilité de fermer en cliquant sur la croix.

À cette fin, je me suis cassé gifku sur s partie:

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

Et pour mettre bas leur html ainsi. (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>

Explication! Positionnement des images tournées comme ceci:

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

onclick = "document.getElementById ( 'de loadruner1. ') style.display = 'none';" -Events Pour fermer notre bannière (maintenant le bouchon est également capable de fermer)

Au lieu onclick peut utiliser <a href="javascript: document.getElementById('loadruner1').style.display='none'" target="_self"> (code html bouchons 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 cela document.getElementById ( 'loadruner1') style.display = 'none' peut toujours utiliser document.all [ 'loadruner1'] style.display = "none" .;

Rich-banner prêt! Il ne reste qu'à penser aux contenus interactifs de notre bannière. (Invent conception, effets et etc que vous le souhaitez)

Supposons que nous voulions changer les directives d'URL et des liens de texte sur notre bannière ou autre chose qui change dynamiquement.

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

Pour commencer, nous modifions 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 modifier 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é un <param name = value "flashVars" = "genericurl = http: //www.domain.com" />

Ce code, permet de pereredat flush variables genericurl notre adresse URL.

Maintenant, vous pouvez changer la bannière de texte simple et directe éditer cette valeur en html.

Certaines personnes sont phénomène gênant de la frontière autour de la bannière.

Essayons de se débarrasser de lui via swfobject.js Library - La rédaction de 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 Il existe déjà inclus (fo.addVariable ( "genericurl", "http://www.domain.com");)

Et la transparence se coller (fo.addParam ( "wmode", " transparent");). Si on le désire, ils peuvent être enlevés!

Scripting Fonction kill (); Il a été cousu dans les principaux paramètres de script de SvfObject.

Si vous le souhaitez, il est encore possible de recueillir en un seul fichier de script dans une fonction pour le code compacité.

+ Pour les amateurs de grandes opportunités et de nouveaux tehnologiy.AS3

AS3 bannière

Avec l'avènement de AS3 flash apparaissent vraiment d' énormes opportunités.

Surtout pour les fans de toute nouvelle bannière est la même, seulement avec l'utilisation de l'AS3 (mercredi 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 уровне закончено!

Et en outre l'insérer dans la page Web de la même manière que celle décrite ci-dessus!

Différents aspects à propos de Flash bannières rich media:

* Exigences pour les flash-bannières classiques.

la version 1. de Flash ne dépasse pas 7
2. En plus du fichier .swf, vous devez préparer un .gif-caps, qui seront présentées aux utilisateurs qui ne peuvent pas voir les flash-bannières.
3. La présence de root.link1 (peut être tout) dans le getURL (_root.link1, "_blank");

* Exigences pour les bannières rich media.

la version 1. de Flash ne dépasse pas 7
2. Bouchon gif est obligatoire
3. La limite de taille
4. La présence de root.link1 (peut être tout) dans le getURL (_root.link1, "_blank");
5. La disponibilité d'un bouton "fermer" fscommand ( 'kill', ''); unloadMovie (_root);

Si vous avez l'intention d'utiliser dans les «réseaux de bannières," vous devez respecter strictement la dernière version de flash pour assurer une meilleure compatibilité.

Heureusement, ActionScript 3.0 dans Flash CS3 même utiliser en option. 2.0 peut être distribué, ce qui est tout à fait simple et fiable.

Mais si vous avez encore besoin d'utiliser est la troisième version d'ActionScript, garder à l'esprit quelques choses.

Tout d' abord, il est possible de couvrir en plaçant: <object type = "application / codebase =" x-shockwave-flash "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 , 0,0,0 ">.

Deuxièmement, FlashVars est indiqué par loaderInfo.parameters lien aura ce genre de root.loaderInfo.parameters.link1 ou complètement navigateToURL (nouveau URLRequest (root.loaderInfo.parameters.link1), '_self');

Troisièmement, mettre en œuvre une fonction javascript "tuer" au lieu de fscommand ( «tuer ',' ' );

Il est préférable d'utiliser l'ancienne méthode (javascript :) Bouton .Kod pour fermer se penchera navigateToURL (nouveau URLRequest ( "javascript: kill (); '),' _self ');

Taps:

Des éléments tels que getURL ( "javascript: kill () ;", "_self"); et AS3 navigateToURL (nouveau URLRequest ( 'javascript : kill ();'), '_self'); Ils peuvent être verrouillés à fleur navigateur si elles sont exécutées localement.

En raison de la politique de sécurité ne sont que quelques-unes des fonctions du serveur.

Dans ce cas, le bouton "fermer" (pour une chasse d' eau) au niveau local ne fonctionnera pas!

En AS3 le chargement des variables externes ainsi, root.loaderInfo.parameters.link1.

Où est le nom de la variable link1.

Au lieu de cela gif branche vous pouvez utiliser les images et les autres formats (jpg, png, TIF, TGA, bmp). Il suffit de brancher gif poids optimal, car le besoin de télécharger flash et gif bannière zaglushku.Gif obturateur doit être la même taille que d'un lecteur flash USB.



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

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