Redimensionnement dynamique d'une animation Flash ∞
programmation
Le redimensionnement dynamique de l'animation flash : de plus en plus de site l'utilise. Que ce soit pour un bandeau de publicité ou pour afficher un catalogue de produit, d'abord surprenante, on s'aperçoit vite que cette technique est diablement efficace.
FSCommand
Par quelle magie peut-on arriver à ce résultat ? Une première partie de la réponse est qu'en pratique il ne faut pas chercher à redimensionner l'animation Flash mais plutôt l'objet HTML dans lequel l'animation est imbriqué. Afin que l'animation se redimensionne automatiquement, il faut définir la largeur et la hauteur de l'animation à 100%. Ainsi l'animation prend 100% de l'objet HTML dans lequel il est imbriqué et si on change la taille de cet objet, Flash se redimensionnera tout seul.
Concrètement, si on utilise une balise div
, cela se traduit par le code suivant :
L'autre partie de la réponse se trouve dans la capacité de Flash à communiquer avec le code HTML qui
l'héberge et plus particulièrement avec le code JavaScript présent sur la page. En effet pour changer
les propriétés d'une balise HTML, il conviendra d'implémenter des interfaces JavaScript afin d'assurer
la communication entre l'animation et le code HTML. Dans Flash cette fonctionnalité s'appelle FSCommand
.
Ainsi pour activer FSCommand dans une animation Flash et définir la taille à 100% dans le code HTML, il suffit de choisir comme modèle d'exportation HTML le modèle : "Flash avec FSCommand" et de définir les dimensions dans les paramètres de publication du format HTML.
L'orienté objet selon AS3
L'utilisation de FSCommand se fait forcement par le biais de la programmation Flash. Si d'un côté nous avons le langage JavaScript, dans Flash le langage utilisé est ActionScript.
Créé en 1998 l'ActionScript a eu 3 itérations. Avec l'avènement de la version 3 en 2009, le langage a complètement changé de logique. Dorénavant orienté objet, ce langage est devenu plus mature, plus normalisé et son appréhension devient plus naturel pour ceux qui développe en POO (Programmation Orienté Objet).
Dans Flash, la communication avec la page qui l'héberge se fait par l'appel de fonctions déclarées en JavaScript. Cet appel se réalise en utilisant la méthode de classe :
Ainsi en écrivant ceci dans le code de l'animation Flash :
J'appel l'interface implémenté dans la page HTML ci-dessous :
Une fois la communication assuré, il ne manque plus que d'implémenter la fonction setSWFHeight
correctement.
Code final
Pour conclure vous trouverez ci-dessous le code final réalisant le redimensionnement dynamique d'une animation Flash.
Code ActionScript de l'animation Flash
// code actionscript... //
// à utiliser dans un évènement onClick, etc... ExternalInterface.call("setSWFHeight", 1000);
Code HTML/JavaScript
<span class="kd">function</span> <span class="nx">setSWFHeight</span><span class="p">(</span><span class="nx">_height</span><span class="p">){</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"animationID"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span><span class="nx">_height</span><span class="o">+</span><span class="s2">"px"</span><span class="p">;</span>
<span class="p">}</span>
</script> <div id="animationID" style="width:200px; height:300px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" id="monanimation" width="100%" height="100%" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="monanimation.swf" /> <param name="quality" value="high" /> <embed src="monanimation.swf" quality="high" width="100%" height="100%" swLiveConnect=true id="monanimation" name="monanimation" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_fr" /> </object> </div>