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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 157 : Ligne 157 :
</source>
</source>
Merci pour votre réponse !
Merci pour votre réponse !
== Questions Javascript et Javascript/css -- [[Utilisateur:Antonella|Antonella]] ([[Discussion utilisateur:Antonella|discussion]]) 15 décembre 2014 à 07:30 (CET) ==
Bonjour,
j'ai terminé l'exercice 3 et je voudrais savoir ce que vous pensez par rapport à deux choses que j'aurais voulu faire au début et qui m'ont posé des problèmes :
# l'objet sur lequel on veut agir avec le script doit avoir un "id" mais est-il toujours nécessaire qu'il soit compris dans une div ou span ? Serait-il possible d'utiliser seulement les balises <img> ou <obj> ? J'ai éssayé d'utiliser <svg> et d'accrocher l'id et le tween à une proprieté du cercle que j'avait crée mais cela n'a pas marché.
# après avoir inséré une image dans une div avec des propriétés css, j'ai trouvé sur un site dédié à Greensock cet exemple qui m'a aidé dans l'animation :
<pre>
TweenLite.to(element, 1, {css:{top:"20px", left:"100px", backgroundColor:"#FF0000"}, ease:Power2.easeOut})
</pre>
avec cela j'ai pu appliquer "scale" (à la place de "top", "left" et "background") à mon objet.
Après tout, j'ai réussi à faire ce que je voulais mais avec une procédure différente de celle que j'avais prévu au début.
Merci.

Version du 15 décembre 2014 à 08:30

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 ?

Re: Erreur javascript -- Daniel K. Schneider (discussion) 2 décembre 2014 à 10:04 (CET)

Bonjour,

non, je ne vois pas.... et jusqu'à ce soir je suis "en itinérance" et je n'ai pas le temps pour aider plus. Donc la première chose à faire est d'avoir un peu plus d'informations. Donc voir déjà si le bouton marche: 

verifBtn.onclick = function() {
       console.log("VerifBn a été cliqué");
       anim.play();
   };

Normalement cela devrait afficher un message dans la console JavaScript que vous devez lancer (F11)

Dites-moi si cela amène qc. SVP

Re: Re: Erreur javascript -- Lydie Batilly (discussion) 2 décembre 2014 à 19:46 (CET)

Bonsoir,

Effectivement le message apparait bien dans la console donc le bouton marche, mais par contre je conserve la même erreur concernant le lancement de l'animation...

Je vais continuer à creuser ce soir, si je trouve une solution je viendrais la noter ici.

Merci,

Lydie

Re: Re: Re: Erreur javascript -- Daniel K. Schneider (discussion) 2 décembre 2014 à 20:21 (CET)

oui à mon avis cela aurait du marcher, mais je suis trop déborder pour creuser et en plus vous l'avez déjà fait. Donc je suggère aussi d'envisager une autre solution. Sur leur site ils ont des exemples start/stop qui marchent plutôt avec "timeline".

http://greensock.com/playpause

Re: Re: Re: Re: Erreur javascript -- Lydie Batilly (discussion) 2 décembre 2014 à 20:25 (CET)

Oups, ayant modifié la page en même temps que vous ma réponse n'apparait pas. C'est effectivement la solution que j'ai trouvée, j'ai utilisé la méthode Timeline et mon bouton fonctionne désormais. Voici mon code (au cas où d'autres soient confrontés au même problème): 

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"),
        tl = new TimelineLite({paused:true});
        
tl.staggerTo([el_syl1, el_syl2, el_syl3], 1,  {scale:0.2, opacity:0.3}, 0.80);
   
verifBtn.onclick = function() {
        tl.play();
    };
   
}

Merci pour votre réponse !

Questions Javascript et Javascript/css -- Antonella (discussion) 15 décembre 2014 à 07:30 (CET)

Bonjour, j'ai terminé l'exercice 3 et je voudrais savoir ce que vous pensez par rapport à deux choses que j'aurais voulu faire au début et qui m'ont posé des problèmes :

  1. l'objet sur lequel on veut agir avec le script doit avoir un "id" mais est-il toujours nécessaire qu'il soit compris dans une div ou span ? Serait-il possible d'utiliser seulement les balises <img> ou <obj> ? J'ai éssayé d'utiliser <svg> et d'accrocher l'id et le tween à une proprieté du cercle que j'avait crée mais cela n'a pas marché.
  2. après avoir inséré une image dans une div avec des propriétés css, j'ai trouvé sur un site dédié à Greensock cet exemple qui m'a aidé dans l'animation :
TweenLite.to(element, 1, {css:{top:"20px", left:"100px", backgroundColor:"#FF0000"}, ease:Power2.easeOut})

avec cela j'ai pu appliquer "scale" (à la place de "top", "left" et "background") à mon objet. Après tout, j'ai réussi à faire ce que je voulais mais avec une procédure différente de celle que j'avais prévu au début. Merci.

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