STIC Discussion:STIC I - exercice 3 (Utopia)
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
Correction des travaux et date de modification -- Antonella (discussion) 11 janvier 2015 à 16:56 (CET)
Bonjour,
si on trouve des fautes dans le texte d'exercices déjà rendus qui ne sont pas la page personnelle ou la page des travaux, est-il possible de les corriger sans que cela compte comme un retard ?
Merci par avance,
Antonella
Re: Correction des travaux et date de modification -- Daniel K. Schneider (discussion) 11 janvier 2015 à 17:25 (CET)
Oui, mais mettez en bas de la page "corrections mineurs le x.y.z"... malheureusement HTML ne garde pas les versions.
Donc je vous rappelle aussi que normalement chaque page déposée sur le serveur de TECFA doit être datée et signée.
Re: Re: Correction des travaux et date de modification -- Antonella (discussion) 11 janvier 2015 à 17:35 (CET)
Merci beaucoup, alors je le signalerai en bas où je marque la date de la dernière mise à jour (en faisant la distinction avec la date de création).
Antonella
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 :
- 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 :
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. Autrement, sans le rappel du css dans le tween, je n'arrivais pas à le faire fonctionner. J'ai aussi dû positionner le span en :absolute pour qu'il marche. Je pensais ajouter ce détail au wiki mais j'attends vos commentaires.
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.
Re: Questions Javascript et Javascript/css -- Daniel K. Schneider (discussion) 15 décembre 2014 à 10:01 (CET)
Hello,
- le "id" va avec n'importe quel élément HTML.
- L'animation d'éléments SVG peut poser des problèmes (je suis en réunion, pas le temps de tester), mais effectivement animer un objet ou img ne devrait pas poser de problèmes.
- Oui merci d'intégrer l'animation DOM "css". Mais lisez plutôt l'original: https://greensock.com/CSSPlugin
... test pour voir si les forums marchent / sorry.