Bouton qui lance une animation

Version imprimable

03/08/2013, 19h21
shores

Bouton qui lance une animation

Bonsoir,

sur ma page web j'ai mis un bouton et je souhaiterais quand on clique dessus cela lance une petite animation flash et qu'on puisse la refermer en recliquant sur le bouton tout en restant sur la même page.

Déjà est ce possible (je débute) et si oui comment puis je faire ?

Bonjour, avec du javascript tu peux injecter le tag <objet ...></objet> qui comprend ton fichier flash.

L'instruction pour faire ça serait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="flashTrip"></div> <input type="button" onclick="loadTrip('anim1');" /> <script> function loadTrip(nomDeAnimation) { document.getElementById("flashTrip").innerHTML = "<object type="application/x-shockwave-flash" align="middle" data="http://urlDeTonSite/"+nomDeAnimation+".swf" width="100%" height="100%" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>"; } </script>
En mettant ton url à la place de "urlDeTonSite" dans le code ici au dessus ça devrais le faire :mouarf:

D'ailleurs merci de m'y avoir fait penser, j'en aurai besoin dans un projet.
Je vais voir si ça marche. Je te tiens au courant ;)

04/08/2013, 20h11
shores

bonsoir,

merci beaucoup je vais tester ça et je te dis quoi :)
06/08/2013, 09h00
shores
bonjour,

j'ai essayé avec ton code mais ça ne fonctionne pas chez moi donc j'ai essayé d'en faire un autre donc mon bouton lance bien l'animation par contre elle se lance sur une autre page et en plein écran que faut 'il que je rajoute pour qu'elle se lance sur la même page et qu'elle soit redimensionner en 500 x 400
Code:

1 2 3 4 5 6 </div> <div width="100%" height="100%" align="right" valign="middle"> <a href="flash/movie1.swf"><IMG src="images/bouton1.png"></a> </div>

Salut, j'ai essayé et ça marche online :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <body> <div id="flashTrip"></div> <input type="button" onclick="loadTrip('manar');" value="play"/> <script> function loadTrip(nomDeAnimation) { document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="middle" data="http://inkodeo.be/+TMP/'+nomDeAnimation+'.swf" width="100%" height="100%" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>'; } </script> </body> </html>
N'oublie pas de mettre ton url ici : data="http://inkodeo.be/+TMP/'+nomDeAnimation+'.swf"-> moi c'est inkodeo...
Et de changer le nom d'appael dans la fonction du bouton ici :

Code:

<input type="button" onclick="loadTrip('manar');" value="play"/>

-> moi c'est manar

Sinon, j'avais oublié de mettre le <objet ...></objet> entre ' ' , à la place c'était " ", donc ça ne marchait pas.

Je t'ai mis mon exemple en ligne ici pour que tu regardes la source : http://inkodeo.be/+TMP/test.html

PS : Ce que tu fais dans ton exemple c'est de diriger sur une autre page justement...
:ccool:

06/08/2013, 21h32
shores

bonsoir,

déjà merci pour ta réponse mais je ne doit pas être doué car j'ai bien rentré le code j'ai juste le bouton qui apparait et quand je clique dessus le bouton descend un peut et c'est tout rien ne se lance je vais continuer je finirais bien par y arriver.

bonjour,

j'ai essayé de mettre uniquement ton code avec mes infos et là j'ai juste le bouton qui apparait mais quand je clique rien ne se lance peut être qu'il y a une erreur voilà mon code.

Peut être cela vient du + TMP je ne sais pas ce que c'est :?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
 
<div id="flashTrip"></div>
<input type="button" onclick="loadTrip('movie1');" value="play"/>
<script>
 
function loadTrip(nomDeAnimation)
{
 
   document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="middle" data="http://www.play-the-ga.me/+TMP/movie.swf" width="400px" height="450px" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>';
 
}
 
</script>
 
</body>
</html>

Salut,
Ton fichier flash s'appelle comment ? Le plus simple : donne moi l'url de ton swf ...
Tu es en local ou tu veux le mettre sur un site ?

Pour +TMP oui en effet tu dois l'enlever, c'est un reste de mon url.
Sinon, tout ce que tu avais à faire c'était de mettre dans le bouton ... : loadTrip('movie') si ton swf est "movie.swf" comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html> <body> <div id="flashTrip"></div> <input type="button" onclick="loadTrip('movie');" value="play"/> <script> function loadTrip(nomDeAnimation) { document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="middle" data="http://www.play-the-ga.me/'+nomDeAnimation+'.swf" width="400px" height="450px" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>'; } </script> </body> </html>
Avoir une fonction permet de lancer autant de movie que tu veux avec la même fonction ...

07/08/2013, 19h50
shores

bonsoir,

j'ai changé le nom du fichier .swf et ça fonctionne ne me demande pas pourquoi je n'ai pas compris moi même 8O.

Maintenant faut que je l'adapte avec mon bouton et qu je le place correctement par contre si je souhaite arrêter la vidéo en recliquant sur le bouton il faut mettre quoi ?

bonsoir, content que ça marche.

Pour déloader le contenu du tag flashTrip c'est un truc du genre :
Code:

1 2 3 4 5 6 7 8 9 10 <input type="button" value="arrêter" onclick="stopTrip();" /> <script> function stopTrip() { document.getELementById("flashTrip").innerHTML = "ce que tu veux ici. Image, texte, ..."; } </script>
Si c'est pour arrêter le movie clip par contre depuis html/js je ne sais pas. Tu peux toujours le faire en actionscript... ;)

l'animation se lance toute seule et rien ne se passe quand on clique sur le bouton j'ai surement encore fait des erreurs j'espère en apprendre autant que j'en fais

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
 
<div id="flashTrip"></div>
<IMG src="images/bouton1.png" onclick="loadTrip('789');" value="play"/>
 
 
 
<script>
 
function loadTrip(nomDeAnimation)
{
 
<IMG src="images/bouton1.png" value="arrêter" onclick="stopTrip();" />
<script>
 
function stopTrip()
{
   document.getELementById("flashTrip").innerHTML = "stop";
}
</script>
 
 
   document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="middle" data="http://www.play-the-ga.me/789.swf" width="400px" height="450px" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>';
 
}
 
</script>

Bonjour,
:koi: tu n'aurais pas des problèmes dans la rédaction de ton code ou alors des problèmes de copier coller.

ne mélange pas le HTML et le JS

Code:

1
2
3
4
<div id="flashTrip"></div>
<IMG src="images/bouton1.png" onclick="loadTrip('789');" value="play"/>
<IMG src="images/bouton1.png" value="arrêter" onclick="stopTrip();" /> 
<script>

Code:

1
2
3
4
5
6
7
8
9
function loadTrip(nomDeAnimation)
{
   document.getElementById("flashTrip").innerHTML = '<object type="application/x-shockwave-flash" align="middle" data="http://www.play-the-ga.me/789.swf" width="400px" height="450px" id="xtSWF0-q4u" style="visibility: visible;"><param name="quality" value="high"><param name="bgcolor" value="#FAFAFA"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="wMode" value="transparent"><param name="scale" value="exactFit"><param name="flashVars" value=""><param name="play" value="true"><param name="autoplay" value="true"></object>';
}
 
function stopTrip()
{
   document.getELementById("flashTrip").innerHTML = "stop";
}

Code:

</script>

Il serait bon également que tu utilises le paramètre que tu passes à la fonction loadTrip.