« STIC Discussion:STIC I - exercice 3 (Utopia) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(→‎Erreur javascript -- ~~~~ : nouvelle section)
Ligne 21 : Ligne 21 :


:: ok merci pour votre réponse!
:: ok merci pour votre réponse!
== Erreur javascript -- [[Utilisateur:Lydie Batilly|Lydie Batilly]] ([[Discussion utilisateur:Lydie Batilly|discussion]]) 2 décembre 2014 à 01:11 (CET) ==
Bonjour,
Je suis en train de créer mon animation avec Greensock, mais je rencontre un problème :
Mon animation ne se lance pas quand je clique sur le bouton qui est prévu pour cela.
Voici mon code :
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Jeux syllabiques</title>
   
<style>
body{
    background-color:white;
}
#elephant {
    width: 666px;
    height: 500px;
    background-color: white;
}
.box3 {
    position: relative;
    width: 222px;
    height: 500px;
    float:left;
}
#el_syl1{
    background: url(img/el_syl1.png) no-repeat;
}
#el_syl2{
    background: url(img/el_syl2.png) no-repeat;
}
#el_syl3{
    background: url(img/el_syl3.png) no-repeat;
}
</style>
</head>
<body>
<div id="elephant">
    <div class="box3" id="el_syl1"></div>
    <div class="box3" id="el_syl2"></div>
    <div class="box3" id="el_syl3"></div>
</div>
   
<input type="button" id="verifBtn" value="Vérifier ma réponse">
<input type="button" id="pauseBtn" value="Pause">
       
<!-- TweenMax includes TweenLite, TimelineLite, TimelineMax, EasePack,  RoundPropsPlugin and CSSPlugin -->
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script>
window.onload = function() {
    var el_syl1 = document.getElementById("el_syl1"),
        el_syl2 = document.getElementById("el_syl2"),
        el_syl3 = document.getElementById("el_syl3"),
        verifBtn = document.getElementById("verifBtn"),
        pauseBtn = document.getElementById("pauseBtn"),
        anim = TweenMax.staggerTo([el_syl1, el_syl2, el_syl3], 1,  {scale:0.2, opacity:0.3, paused:true}, 0.80);
 
verifBtn.onclick = function() {
        anim.play();
    };
pauseBtn.onclick = function() {
        anim.pause();
    };   
}   
</script>
</body>
</html></source>
La console de Firefox me renvoie l'erreur suivante : "TypeError: anim.play is not a function" or j'ai bien vérifié la syntaxe de ma fonction, j'ai également vérifié que TweenMax était bien chargé (si je ne mets pas l'argument paused.true l'animation se lance bien à l'ouverture de la page).
Une idée de la source du problème ?

Version du 2 décembre 2014 à 02:11

Correction des travaux et date de modification -- Arnaud 22 novembre 2014 à 19:20 (CET)

Bonsoir,

Je poste aussi ici car il ne semble pas que vous soyez notifié d'un nouveau message sur la discussion de la page "STIC1" vu que les deux dernières personnes ne semblent pas avoir reçu de réponse. Lien de ma question : http://edutechwiki.unige.ch/fr/STIC_Discussion:STIC_I#Correction_des_travaux_et_date_de_modification_-_Arnaud_22_novembre_2014_.C3.A0_19:10_.28CET.29

Participation à EduTechWiki -- Arnaud 23 novembre 2014 à 00:14 (CET)

Bonsoir,

Je me demandais si on devait participer au wiki pour cet exercice car pour le 4 il y a des consignes concernant la contribution wiki, mais pas dans l'exercice 3.

Bonne soirée

Re: Participation à EduTechWiki -- Daniel K. Schneider (discussion) 23 novembre 2014 à 15:54 (CET)

bonjour, il faut contribuer pour tous les exercices. Les règles sont indiqués dans le règlement du cours (STIC:STIC I ... mais effectivement vaut mieux que je répète tout le temps.

Re: Re: Participation à EduTechWiki -- Arnaud (discussion) 23 novembre 2014 à 17:15 (CET)

ok merci pour votre réponse!

Erreur javascript -- Lydie Batilly (discussion) 2 décembre 2014 à 01:11 (CET)

Bonjour,

Je suis en train de créer mon animation avec Greensock, mais je rencontre un problème :

Mon animation ne se lance pas quand je clique sur le bouton qui est prévu pour cela.

Voici mon code : 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Jeux syllabiques</title>
     
<style>
body{
    background-color:white;
}
#elephant {
    width: 666px;
    height: 500px;
    background-color: white;
}
.box3 {
    position: relative;
    width: 222px;
    height: 500px;
    float:left;
}
#el_syl1{
    background: url(img/el_syl1.png) no-repeat;
}
#el_syl2{
    background: url(img/el_syl2.png) no-repeat;
}
#el_syl3{
    background: url(img/el_syl3.png) no-repeat;
}

</style>
</head>
 
<body>
<div id="elephant">
    <div class="box3" id="el_syl1"></div>
    <div class="box3" id="el_syl2"></div>
    <div class="box3" id="el_syl3"></div>
</div>
    
<input type="button" id="verifBtn" value="Vérifier ma réponse">
<input type="button" id="pauseBtn" value="Pause">
        
<!-- TweenMax includes TweenLite, TimelineLite, TimelineMax, EasePack,  RoundPropsPlugin and CSSPlugin -->
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
 
<script>
window.onload = function() {
    var el_syl1 = document.getElementById("el_syl1"),
        el_syl2 = document.getElementById("el_syl2"),
        el_syl3 = document.getElementById("el_syl3"),
        verifBtn = document.getElementById("verifBtn"),
        pauseBtn = document.getElementById("pauseBtn"),
        anim = TweenMax.staggerTo([el_syl1, el_syl2, el_syl3], 1,  {scale:0.2, opacity:0.3, paused:true}, 0.80);
   
verifBtn.onclick = function() {
        anim.play();
    };
pauseBtn.onclick = function() {
        anim.pause();
    };    
}    
</script>
 
</body>
</html>

La console de Firefox me renvoie l'erreur suivante : "TypeError: anim.play is not a function" or j'ai bien vérifié la syntaxe de ma fonction, j'ai également vérifié que TweenMax était bien chargé (si je ne mets pas l'argument paused.true l'animation se lance bien à l'ouverture de la page).

Une idée de la source du problème ?

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_I_-_exercice_3_(Utopia)&oldid=41054 »