script AS3 pour remplacer l'anime jouée par une image dans une DIV

script AS3 pour remplacer l'anime jouée par une image dans une DIV - Flash/ActionScript - Programmation

Marsh Posté le 16-05-2011 à 16:40:54    

Bonjour,
 
Je cherche depuis trop longtemps sans rien trouver qui me convienne ... Voilà mon problème :
 
Plusieurs animes flash peuvent être lancées d'une même une page HTML, sur l'une d'elle je voudrais reprendre la main en HTML (c'est à dire faire apparaitre des bulles texte au survol).
J'aimerai savoir si un AS après le stop() en fin d'anime saurait supprimer le SWF de ma DIV et le remplacer une image jpeg (identique pour qu'on ne voit pas la transition) ?
Sinon peut-être inclure un javascript quelque part pour réaliser le truc ?
Je précise que l'anime en question se lance au clic et ne dure pas plus de 3 s
 
Au fait j'y connais rien à la base, j'essaye de faire mon site au mieux et jusque là je m'en sort bien... Par contre je comprendrais pas forcement tout dans vos réponses, dsl d'avance ...

Reply

Marsh Posté le 16-05-2011 à 16:40:54   

Reply

Marsh Posté le 16-05-2011 à 21:46:41    

La solution est de passer par JavaScript.
 
En JS, tu déclare ta fonction qui remplace ton flash par ton image.
 
En AS3, tu appeles ce script via le script suivant :
 
import flash.external.ExternalInterface;
ExternalInterface.call("nom_de_ma_fonction" );
 
Il faut bien faire attention que le paramètre "allowScriptAccess" soit sur "always" (La manière de le faire dépend de la façon dont tu as intégré le SWF...)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 16-05-2011 à 23:25:23    

Merci et si j'ai bien suivi,  
 
1) Je place le script AS3 que tu m'as donné après le stop() de mon anime
 
2) je créé un JS qui répond à mon anime :
 
<SCRIPT LANGUAGE="JavaScript">
function Replace(creation_roll, images){
   document.getElementById(creation_roll.jpg).src = images;
}  
</SCRIPT>  
 
et je m'assure que sur la ligne allowScriptAcess Value=always.
 
Bon ce que j'ai fait mais ça ne fonctionne pas ...
Mon JS m'a pas l'air terrible je voudrais qu'il trouve l'image "creation_roll.jpg" dans le dossier images mais je suis pas sur ...
 
Mais le reste me parrait bien logique simple et clair

Reply

Marsh Posté le 17-05-2011 à 08:04:19    

getElementById il va te chercher une balise HTML par rapport à l'ID, là tu as mis un ".jpg"...
 
Les argument, il faut les mettre à la suite de ton appel de fonction aussi... Il ne sont nécessaires que si tu appel ta fonction à plusieurs endroits différents...
Si dans ton HTML tu as <div id=maDiv><object>(flash...)</object></div>, alors ça peut ressembler à :
 
<SCRIPT LANGUAGE="JavaScript">
function replace(){
   document.getElementById('maDiv').innerHTML = <img alt='' src='images/creation_roll.jpg' />;
}  
</SCRIPT>
 
Je te suggère d'apprendre un minimum le HTML/JS tout de même...
 
 


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 17-05-2011 à 14:08:58    

D'accord, je capte bien le innerHTML et le getElementById maintenant. Et encore, c'est limpide ici mais dès que j’approfondis sur le net mon cerveau suinte sur mes godasses.
Mais ça fonctionne ... presque !
Avec firefox je vois que le div se vide, mais sur les autres navigateurs rien ne se passe. Et surtout firefox n'affiche pas l'image, et il laisse ce div vide.
J'ai essayé de bidouiller ça dans tous les sens mais rien n'y fait.
Voilà mon HTML :
 

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Essai</title>
 
 
 
<SCRIPT LANGUAGE="JavaScript">
 
function Replace(){
 document.getElementById("creation" ).innerHTML = <img alt="" src="images/creation_roll.jpg" />  
}  
 
</SCRIPT>  
 
 </head>
 
</body>
 
 <div id="creation" width="252" height="619" align="center">
 
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="252" height="619" id="creation_visuelle" align="middle">
    <param name="movie" value="medias/creation_visuelle.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#e2e4e7" />
    <param name="play" value="false" />
    <param name="loop" value="false" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="exactfit" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="always" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="medias/creation_visuelle.swf" width="252" height="619">
     <param name="movie" value="medias/creation_visuelle.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#e2e4e7" />
     <param name="play" value="false" />
     <param name="loop" value="false" />
     <param name="wmode" value="opaque" />
     <param name="scale" value="exactfit" />
     <param name="menu" value="true" />
     <param name="devicefont" value="false" />
     <param name="salign" value="" />
     <param name="allowScriptAccess" value="always" />
    <!--<![endif]-->
     <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir Adobe Flash Player" />
     </a>
    <!--[if !IE]>-->
     </object>
                                <!--<![endif]-->
            </object>
            </div>
</html>


 
Voilà et merci pour tes réponses qui sont vraiment claires !

Reply

Marsh Posté le 17-05-2011 à 20:37:47    

mets le online pour qu'on puisse voir...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 17-05-2011 à 21:08:25    

abais a écrit :

mets le online pour qu'on puisse voir...


 
 
voilà la bête :
 
http://editionslbn.free.fr/anime.html

Reply

Marsh Posté le 18-05-2011 à 22:11:03    

Si tu recopie mes conneries aussi  [:frag_facile]
Il faut des guillemets pour delimiter le contenu que t'injecte dans le innerHtml...

Code :
  1. document.getElementById("creation" ).innerHTML = "<img alt='' src='images/creation_roll.jpg' />";


Message édité par abais le 18-05-2011 à 22:13:43

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 18-05-2011 à 22:24:11    

YES !
 
Je vais aller chercher un script pour pré-charger l'image histoire que la transition se fasse mieux. Tu m'as retiré une belle épine du pieds !
 
Et j'ai un gros boulot à faire entre ces deux maudites guillemets pour finaliser mon projet. Merci encore abais.

Reply

Marsh Posté le 18-05-2011 à 22:38:10    

tritonik_21 a écrit :

YES !
... Tu m'as retiré une belle épine du pieds ! ...
 Merci encore abais.


Ça fera une pinte de Laiffe© et une barre de Tobleur'own©


Message édité par abais le 18-05-2011 à 22:38:21

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 18-05-2011 à 22:38:10   

Reply

Marsh Posté le 18-05-2011 à 22:42:31    

Un conseil, utilise SWFObject... ça te permet d'intégrer tes SWF très simplement via javascript. Tu pourra ainsi intégré le swf en question après le "load" de ton image (que tu mets temporairement dans une div masquée)...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 25-05-2011 à 19:15:07    

abais a écrit :

Un conseil, utilise SWFObject... ça te permet d'intégrer tes SWF très simplement via javascript. Tu pourra ainsi intégré le swf en question après le "load" de ton image (que tu mets temporairement dans une div masquée)...


 
Je regarderais pour SWObject dès que j'aurai fini cette page.
voici le lien de l'anime qui deviens menu html au final, super sauf sous EI, mais tant pis les Explorers n'auront pas d'info bulles, pourtant j'y était presque.
 
http://editionslbn.free.fr/anime2.html

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed