STIC:STIC I - exercice 3 (Volt)
Aller à la navigation
Aller à la recherche
Enoncée du Projet 3
Ce projet vous permet:
- d'apprendre quelques notions de JavaScript
- de vous familiariser avec l'utilisation d'une bibliothèque d'animation en JavaScript
- d'apprendre quelques concepts d'animation
Ce projet est similaire au projet 2. La technologie est différente. Ceci dit, vous pouvez tout à fait réutiliser des dessins SVG
Tâche
Imaginez un design pédagogique qui nécessite une animation ....
- Créez une page HTML5 qui contient au moins un graphisme animé avec la bibliothèque "Greensocks"
- Ajoutez un élément interactif, par exemple un bouton start/stop ou encore des paramètres d'animation.
- Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)
Il faut également contribuer au wiki (comme pour tous les exercices)
Outil
Contraintes
- Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
- La page doit soit contenir un élément animé et au moins un élément interactif (par exemple un bouton)
- La page doit être bien formée et valide.
- Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML et dans le rapport.
Le rapport:
- Titre, auteur et date
- Liens vers le résultat (fichier HTML) et indiquez avec quelle configuration on peut voir votre contenu.
- Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos objectifs d'apprentissage....)
- Discussion du design
- La production: bref résumé de la démarche
- Difficultés, auto-évaluation, remarques
- Ressources utilisées, bibliographie.
Emplacement du rapport avec les liens vers le dispositif html/svg:
/etu-maltt/utopia/<login>/stic-1/ex3/
Activité en salle de classe
Discussion:
- Que peut-on animer ?
- Comment utiliser l'animation dans l'éducation ?
- Comment rendre une animation plus interactive ?
Tâche:
- Faire fonctionner le code ci-dessous
- Ajouter une animation "Greensock"
Ce type d'exemple est expliqué dans en:DHTML et en:Javascript tutorial - basics
Chablon de base manipuler un élément HTML
<!DOCTYPE html>
<html>
<head>
<title>Object Model</title>
<script type = "text/javascript">
// Une fois que Windows est chargé, la fonction start est appelée
window.onload = start;
// Définition de la fonction start
function start()
{
var my_para = document.getElementById("p1");
alert( "Paragraph contents : " + my_para.innerHTML );
}
</script>
</head>
<body>
<p id = "p1">Welcome to our Web page!</p>
</body>
</html>
Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript
<!DOCTYPE html>
<html>
<head>
<title>Event handling</title>
<script type = "text/javascript">
window.onload = start;
// var my_para_button ="";
function start() {
// put an event handler on the div box
var my_para_button = document.getElementById("box");
my_para_button = addEventListener("click", modifyText);
}
function modifyText() {
// get the box
var my_content = document.getElementById("content");
my_content.innerHTML = "That was so good";
}
</script>
</head>
<body>
<div id="box">
<p style="background-color:yellow" id="content">CLICK ME !</p>
</div>
</body>
</html>
Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.html
Liens
Technique
- JavaScript
- Tutoriel JavaScript de base
- Il existe des dizaines de tutos sur le web et des livres
- GSAP
- Tutoriel GreenSock GSAP
- Tutoriel vidéo Javascript : Créer des animations complexes avec GSAP.js Bien fait, mais nécessite un peu de JQUERY, voir les articles JQuery et éventuellement JQuery UI
- Autre
- Flash CS4 - Principes de l'animation (décrit brièvement quelques types d'animation en Flash, aussi valable pour d'autres formats)