Bouton qui lance une animation

**shores** · 03/08/2013, 19h21

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 ?

**zulad** · 03/08/2013, 21h08

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

L'instruction pour faire ça serait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**shores** · 04/08/2013, 20h11

bonsoir,

merci beaucoup je vais tester ça et je te dis quoi

**shores** · 06/08/2013, 09h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**zulad** · 06/08/2013, 11h37

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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...

**shores** · 06/08/2013, 21h32

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.

**shores** · 07/08/2013, 10h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**zulad** · 07/08/2013, 11h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**shores** · 07/08/2013, 19h50

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

.

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 ?

**zulad** · 07/08/2013, 20h16

bonsoir, content que ça marche.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**shores** · 07/08/2013, 21h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 07/08/2013, 23h00

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

</script>

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

Bouton qui lance une animation

HTML

Discussions similaires

Partager

Partager