help content update

4 files changed, 218 insertions, 22 deletions

diff --git a/docs/html/help.htm__ b/docs/html/help.htm__
index c3cc409..5606860 100644
--- a/docs/html/help.htm__
+++ b/docs/html/help.htm__
@@ -7,22 +7,13 @@
 
 <p>
 Avec l'application `A Toi de Jouer` je peux <a href="#lire-une-histoire">lire</a>
-et <a href="#creer-une histoire">cr&eacute;er</a> des histoires.
+et <a href="#creer-une-histoire">cr&eacute;er</a> des histoires.
 </p>
 
 <h2 id="lire-une-histoire">Je lis une histoire</h2>
 
 <p>
-Avec `A Toi de Jouer` je peux cr&eacute;er mes histoires.
-Ensuite je peux les relire depuis <a href="#lecture-depuis-journal">mon `journal`</a>.
-</p>
-
-<a href="#guide-a-toi-de-jouer">Haut^</a>
-
-<h3 id="lecture-depuis-journal">Je lis une histoire depuis le journal</h3>
-
-<p>
-Pour lire une histoire existante depuis le journal, j'ouvre mon journal:
+Pour lire une histoire, je dois ouvrir mon journal:
 </p>
 
 <center><img src="img/lire-01-ouvrir-journal.png" alt="J'ouvre mon journal"/></center>
@@ -134,5 +125,112 @@ je peux retourner vers l'&eacute;cran d'&eacute;dition pour <a href="#deplacer-m
 
 <a href="#guide-a-toi-de-jouer">Haut^</a>
 
+<h3 id="deplacer-mes-graphiques">Je d&eacute;place mes graphiques</h3>
+
+<p>
+De retour &agrave; l'&eacute;cran d'&eacute;dition je ne vois toujours pas d'image?
+Pour faire appara&icirc;tre ma premi&egrave;re image,
+je dois d'abord s&eacute;lectionner la s&eacute;quence &agrave; laquelle elle appartient en bas &agrave; droite:
+</p>
+
+<center><img src="img/creer-04-timeline-select-1.png" alt="Je s&eacute;lectionne une s&eacute;quence"/></center>
+
+<p>
+Pour pr&eacute;parer mon animation, je peux ajouter des secondes
+en cliquant sur le bouton `Afficher apr&egrave;s 10 secondes`:
+</p>
+
+<center><img src="img/creer-05-ajout-temps-1.png" alt="J'ajoute du temps &agrave; mon histoire"/></center>
+
+<p>
+Je peux v&eacute;rifier que j'ai de nouvelles secondes dans ma barre de temps
+et choisir une seconde pour faire appara&icirc;tre mon image:
+</p>
+
+<center><img src="img/creer-06-ajout-temps-2.png" alt="Le temps ajout&eacute;"/></center>
+
+<p>
+Je peux maintenant s&eacute;lectionner un graphique &agrave; afficher pour cette seconde:
+</p>
+
+<center><img src="img/creer-07-panel-image-1.png" alt="J'affiche ma premi&egrave;re image"/></center>
+
+<p>
+Pour mon animation je s&eacute;lectionne une autre seconde pour voir mon image:
+<em>Entre les 2 secondes l'image restera affich&eacute;e</em>
+</p>
+
+<center><img src="img/creer-08-timeline-select-3.png" alt="Je s&eacute;lectionne d'autres secondes"/></center>
+
+<p>
+Je peux choisir une autre image &agrave; afficher plus tard dans mon histoire:
+</p>
+
+<center><img src="img/creer-09-panel-image-2.png" alt="Je s&eacute;lectionne une autre image"/></center>
+
+<p>
+Quand j'ai ajouter mon image, elle peut &ecirc;tre cach&eacute;e par une autre.
+Je peux la faire passer par devant en cliquant sur le bouton `Calque devant`:
+</p>
+
+<center><img src="img/creer-10-panel-layer-1.png" alt="Mon image est cach&eacute;e"/></center>
+
+<p>
+Maintenant mon image apparait devant:
+</p>
+
+<center><img src="img/creer-11-panel-layer-2.png" alt="Mon image est devant"/></center>
+
+<p>
+Pour animer une image entre 2 secondes, je peux choisir une seconde au d&eacute;but de la ligne de temps
+et placer mon image &agrave; son point de d&eacute;part:
+</p>
+
+<center><img src="img/creer-12-scene-move-1.png" alt="Je place mon image au d&eacute;part"/></center>
+
+<p>
+Ensuite je s&eacute;lection une seconde pour la fin de l'animation
+et je fais glisser l'image &agrave; sa position d'arriv&eacute;e:
+</p>
+
+<center><img src="img/creer-13-scene-move-2.png" alt="Je d&eacute;place mon image &agrave; son arriv&eacute;e"/></center> 
+
+<p>
+Pour regarder le r&eacute;sultat de mon animation je peux lire mon histoire
+en cliquant sur le bouton `Jouer l'histoire` en haut &agrave; gauche:
+</p>
+
+<center><img src="img/creer-14-lecture-2.png" alt="Je visualise mon animation"/></center> 
+
+<p>
+Pour <a href="#sauver-mon-histoire">sauvegarder mon histoire</a>,
+je doit aller dans l'&eacute;cran `Activit&eacute;`
+en cliquant sur le bouton en haut &agrave; gauche:
+</p>
+
+<center><img src="img/creer-15-toolbar-go-activity.png" alt="Je vais dans l'&eacute;cran `Activit&eacute;`"/></center> 
+
+<a href="#guide-a-toi-de-jouer">Haut^</a>
+
+<h3 id="sauver-mon-histoire">Je sauvegarde mon histoire</h3>
+
+<p>
+Dans l'&eacute;cran activit&eacute; je peux choisir un nom pour mon histoire dans le champs texte en haut &agrave; gauche:
+</p>
+
+<center><img src="img/activity-01-nom-histoire.png" alt="Je choisis un nome pour mon histoire"/></center> 
+
+<p>
+Enfin je peux cliquer sur l'ic&ocirc;ne `Journal` pour faire la sauvegarde:
+</p>
+
+<center><img src="img/activity-02-sauver.png" alt="Je sauvegarde mon histoire"/></center> 
+
+<p>
+Maintenant, je pourrais <a href="#lire-une-histoire">la lire plus tard depuis mon `Journal`</a>.
+</p>
+
+<a href="#guide-a-toi-de-jouer">Haut^</a>
+
 </body>
 </html>
diff --git a/static/data/html/help.html b/static/data/html/help.html
index c3cc409..5606860 100644
--- a/static/data/html/help.html
+++ b/static/data/html/help.html
@@ -7,22 +7,13 @@
 
 <p>
 Avec l'application `A Toi de Jouer` je peux <a href="#lire-une-histoire">lire</a>
-et <a href="#creer-une histoire">cr&eacute;er</a> des histoires.
+et <a href="#creer-une-histoire">cr&eacute;er</a> des histoires.
 </p>
 
 <h2 id="lire-une-histoire">Je lis une histoire</h2>
 
 <p>
-Avec `A Toi de Jouer` je peux cr&eacute;er mes histoires.
-Ensuite je peux les relire depuis <a href="#lecture-depuis-journal">mon `journal`</a>.
-</p>
-
-<a href="#guide-a-toi-de-jouer">Haut^</a>
-
-<h3 id="lecture-depuis-journal">Je lis une histoire depuis le journal</h3>
-
-<p>
-Pour lire une histoire existante depuis le journal, j'ouvre mon journal:
+Pour lire une histoire, je dois ouvrir mon journal:
 </p>
 
 <center><img src="img/lire-01-ouvrir-journal.png" alt="J'ouvre mon journal"/></center>
@@ -134,5 +125,112 @@ je peux retourner vers l'&eacute;cran d'&eacute;dition pour <a href="#deplacer-m
 
 <a href="#guide-a-toi-de-jouer">Haut^</a>
 
+<h3 id="deplacer-mes-graphiques">Je d&eacute;place mes graphiques</h3>
+
+<p>
+De retour &agrave; l'&eacute;cran d'&eacute;dition je ne vois toujours pas d'image?
+Pour faire appara&icirc;tre ma premi&egrave;re image,
+je dois d'abord s&eacute;lectionner la s&eacute;quence &agrave; laquelle elle appartient en bas &agrave; droite:
+</p>
+
+<center><img src="img/creer-04-timeline-select-1.png" alt="Je s&eacute;lectionne une s&eacute;quence"/></center>
+
+<p>
+Pour pr&eacute;parer mon animation, je peux ajouter des secondes
+en cliquant sur le bouton `Afficher apr&egrave;s 10 secondes`:
+</p>
+
+<center><img src="img/creer-05-ajout-temps-1.png" alt="J'ajoute du temps &agrave; mon histoire"/></center>
+
+<p>
+Je peux v&eacute;rifier que j'ai de nouvelles secondes dans ma barre de temps
+et choisir une seconde pour faire appara&icirc;tre mon image:
+</p>
+
+<center><img src="img/creer-06-ajout-temps-2.png" alt="Le temps ajout&eacute;"/></center>
+
+<p>
+Je peux maintenant s&eacute;lectionner un graphique &agrave; afficher pour cette seconde:
+</p>
+
+<center><img src="img/creer-07-panel-image-1.png" alt="J'affiche ma premi&egrave;re image"/></center>
+
+<p>
+Pour mon animation je s&eacute;lectionne une autre seconde pour voir mon image:
+<em>Entre les 2 secondes l'image restera affich&eacute;e</em>
+</p>
+
+<center><img src="img/creer-08-timeline-select-3.png" alt="Je s&eacute;lectionne d'autres secondes"/></center>
+
+<p>
+Je peux choisir une autre image &agrave; afficher plus tard dans mon histoire:
+</p>
+
+<center><img src="img/creer-09-panel-image-2.png" alt="Je s&eacute;lectionne une autre image"/></center>
+
+<p>
+Quand j'ai ajouter mon image, elle peut &ecirc;tre cach&eacute;e par une autre.
+Je peux la faire passer par devant en cliquant sur le bouton `Calque devant`:
+</p>
+
+<center><img src="img/creer-10-panel-layer-1.png" alt="Mon image est cach&eacute;e"/></center>
+
+<p>
+Maintenant mon image apparait devant:
+</p>
+
+<center><img src="img/creer-11-panel-layer-2.png" alt="Mon image est devant"/></center>
+
+<p>
+Pour animer une image entre 2 secondes, je peux choisir une seconde au d&eacute;but de la ligne de temps
+et placer mon image &agrave; son point de d&eacute;part:
+</p>
+
+<center><img src="img/creer-12-scene-move-1.png" alt="Je place mon image au d&eacute;part"/></center>
+
+<p>
+Ensuite je s&eacute;lection une seconde pour la fin de l'animation
+et je fais glisser l'image &agrave; sa position d'arriv&eacute;e:
+</p>
+
+<center><img src="img/creer-13-scene-move-2.png" alt="Je d&eacute;place mon image &agrave; son arriv&eacute;e"/></center> 
+
+<p>
+Pour regarder le r&eacute;sultat de mon animation je peux lire mon histoire
+en cliquant sur le bouton `Jouer l'histoire` en haut &agrave; gauche:
+</p>
+
+<center><img src="img/creer-14-lecture-2.png" alt="Je visualise mon animation"/></center> 
+
+<p>
+Pour <a href="#sauver-mon-histoire">sauvegarder mon histoire</a>,
+je doit aller dans l'&eacute;cran `Activit&eacute;`
+en cliquant sur le bouton en haut &agrave; gauche:
+</p>
+
+<center><img src="img/creer-15-toolbar-go-activity.png" alt="Je vais dans l'&eacute;cran `Activit&eacute;`"/></center> 
+
+<a href="#guide-a-toi-de-jouer">Haut^</a>
+
+<h3 id="sauver-mon-histoire">Je sauvegarde mon histoire</h3>
+
+<p>
+Dans l'&eacute;cran activit&eacute; je peux choisir un nom pour mon histoire dans le champs texte en haut &agrave; gauche:
+</p>
+
+<center><img src="img/activity-01-nom-histoire.png" alt="Je choisis un nome pour mon histoire"/></center> 
+
+<p>
+Enfin je peux cliquer sur l'ic&ocirc;ne `Journal` pour faire la sauvegarde:
+</p>
+
+<center><img src="img/activity-02-sauver.png" alt="Je sauvegarde mon histoire"/></center> 
+
+<p>
+Maintenant, je pourrais <a href="#lire-une-histoire">la lire plus tard depuis mon `Journal`</a>.
+</p>
+
+<a href="#guide-a-toi-de-jouer">Haut^</a>
+
 </body>
 </html>
diff --git a/static/data/html/img/creer-12-scene-move-1.png b/static/data/html/img/creer-12-scene-move-1.png
index 0960f5c..009e33a 100644
--- a/static/data/html/img/creer-12-scene-move-1.png
+++ b/static/data/html/img/creer-12-scene-move-1.png
diff --git a/static/data/html/img/creer-13-scene-move-2.png b/static/data/html/img/creer-13-scene-move-2.png
index 80c9aa6..610acb1 100644
--- a/static/data/html/img/creer-13-scene-move-2.png
+++ b/static/data/html/img/creer-13-scene-move-2.png