updated sys render for ola4

This commit is contained in:
Bachir Soussi Chiadmi
2017-06-24 12:02:33 +02:00
parent 92834f4d9d
commit 54fb117f31
8 changed files with 8 additions and 399 deletions
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "ola-2",
"description": "Documentation tool for OLA#2 workshop",
"name": "ola-4",
"description": "Documentation tool for OLA#4 workshop : OSP html2print",
"main": "gulpfile.js",
"authors": [
"Bachir Soussi Chiadmi",
+2 -2
View File
@@ -3,6 +3,6 @@ while true; do
now=$(date +"%Y-%m-%d--%T")
echo "export contents -- $now"
./tex2html.sh
echo "sleep 10m for new export"
sleep 10m
echo "sleep 30sec for new export"
sleep 30s
done
+1 -1
View File
@@ -155,7 +155,7 @@ echo "</section>" >> tmp/content.textile
echo "header"
touch tmp/header
echo "<header id='header'>"$'\n' > tmp/header
echo "h1. OLA#3 Documentation"$'\n' >> tmp/header
echo "h1. OLA#4 Documentation : OSP html2print"$'\n' >> tmp/header
echo "<nav id='menu'>"$'\n' >> tmp/header
cat tmp/summary >> tmp/header
echo $'\n'"</nav>" >> tmp/header
-369
View File
@@ -1,369 +0,0 @@
<header id='header'>
h1. OLA#3 Documentation
<nav id='menu'>
* "content/bachir_soussi-chiadmi":#content/bachir_soussi-chiadmi
* "content/claudie_under":#content/claudie_under
* "content/dimitri_robert":#content/dimitri_robert
* "content/emilie_coquard":#content/emilie_coquard
* "content/louis_eveillard":#content/louis_eveillard
* "content/Lucie_Maëlle":#content/Lucie_Maëlle
* "content/sandrine_ripoll":#content/sandrine_ripoll
</nav>
</header>
<section id='main'>
<div id='content/bachir_soussi-chiadmi' class='user'>
<section class='content'>
h1. Playmo Gun
h2. Bachir Soussi Chiadmi
Hey Bill, t'aime bien les playmo ?
Ouai, avec des guns John !
<a data-lightbox='bachir_soussi-chiadmi' href='images/bachir_soussi-chiadmi-00.png'>!thumbs/bachir_soussi-chiadmi-00.png!</a>
<a data-lightbox='bachir_soussi-chiadmi' href='images/bachir_soussi-chiadmi-01.png'>!thumbs/bachir_soussi-chiadmi-01.png!</a>
</section>
<section class='images'>
* <a data-lightbox='bachir_soussi-chiadmi' href='images/bachir_soussi-chiadmi-02.png'>!thumbs/bachir_soussi-chiadmi-02.png!</a>
* <a data-lightbox='bachir_soussi-chiadmi' href='images/bachir_soussi-chiadmi-03.png'>!thumbs/bachir_soussi-chiadmi-03.png!</a>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak"></div>
<div id='content/claudie_under' class='user'>
<section class='content'>
h1. Le nom de mon animatique
h2. Monprenom Monnom
à partir d'ici vous pouvez écrire le texte de description de votre projet d'aniamtique
<a data-lightbox='claudie_under' href='images/claudie_under-00.jpg'>!thumbs/claudie_under-00.jpg!</a>
Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso
puis ajouter cette ligne:
bc. !images/nomdemonimage.jpeg!
Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.
</section>
<section class='images'>
* <a data-lightbox='claudie_under' href='images/claudie_under-01.jpg'>!thumbs/claudie_under-01.jpg!</a>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak"></div>
<div id='content/dimitri_robert' class='user'>
<section class='content'>
h1. Le nom de mon animatique
Dimitri Robert
h2. Débuts avec Krita
Menu clic-droit très pratique, on a un accès rapide aux outils essentiels
<a data-lightbox='dimitri_robert' href='images/dimitri_robert-21.png'>!thumbs/dimitri_robert-21.png!</a>
Le stabilisateur permet de réellement stabiliser le trait pour quand on est une bille en dessin.
!images/Unnamed-Krita-0001.png!
Les outils Alchimie permettent de remplir automatiquement des surfaces.
!images/Unnamed-Krita-0002.png!
Attention, comportement différent entre la gomme du stylet (outil Gomme simple) et le fait de presser la touche E qui transforme le comportement de l'outil actuel en gomme.
Premier dessin de personnage, c'est un peu n'importe quoi...
!images/Unnamed-Krita-0003.png!
Un petit croquis tout à la tablette graphique, avec les différents plans dans des calques séparés. L'idée est de les déplacer séparément à l'animation.
<a data-lightbox='dimitri_robert' href='images/dimitri_robert-15.png'>!thumbs/dimitri_robert-15.png!</a>
Pour exporter chaque calque au format PNG, pas d'autre solution que de cacher tous les calques sauf celui qu'on veut exporter. Puis, Fichier → Enregistrer sous et nommer avec un suffixe numéroté (chemin_001.png par exemple).
h2. Débuts avec Blender
Ajouter l'add-on Import images as planes
<a data-lightbox='dimitri_robert' href='images/dimitri_robert-01.png'>!thumbs/dimitri_robert-01.png!</a>
h3. Importer des images
File → Import → Images as planes
Quelques options nécessaires :
* Use alpha
* Shadeless
* Z-transparency
Sélectionner toutes les images en pressant la touche Maj (Shift) et en cliquant sur chacune.
Pour y voir plus clair, il faut créer une plaque blanche :
* Shift-A (Add) Mesh → Plane
* S pour changer ses dimensions (agrandir)
* Dans la fenêtre Properties, puis l'onglet Material, ajouter un New material. Dans Shading, cocher Shadeless.
Changer la vue :
* View → Top
* View → View Perp/ortho
h2. Gérer l'animation dans Krita
Doc en ligne : https://docs.krita.org/Animation
h2. Blender : séquence d'images sur une plaque
<a data-lightbox='dimitri_robert' href='images/dimitri_robert-00.png'>!thumbs/dimitri_robert-00.png!</a>
</section>
<section class='images'>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-02.png'>!thumbs/dimitri_robert-02.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-03.png'>!thumbs/dimitri_robert-03.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-04.png'>!thumbs/dimitri_robert-04.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-05.png'>!thumbs/dimitri_robert-05.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-06.png'>!thumbs/dimitri_robert-06.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-07.png'>!thumbs/dimitri_robert-07.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-08.png'>!thumbs/dimitri_robert-08.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-09.png'>!thumbs/dimitri_robert-09.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-10.png'>!thumbs/dimitri_robert-10.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-11.png'>!thumbs/dimitri_robert-11.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-12.png'>!thumbs/dimitri_robert-12.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-13.png'>!thumbs/dimitri_robert-13.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-14.png'>!thumbs/dimitri_robert-14.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-16.jpg'>!thumbs/dimitri_robert-16.jpg!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-17.png'>!thumbs/dimitri_robert-17.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-18.png'>!thumbs/dimitri_robert-18.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-19.png'>!thumbs/dimitri_robert-19.png!</a>
* <a data-lightbox='dimitri_robert' href='images/dimitri_robert-20.png'>!thumbs/dimitri_robert-20.png!</a>
</section>
<section class='sources'>
* "chemin_001.png":sources/chemin_001.png
* "decor_001.png":sources/decor_001.png
* "joujou.kra":sources/joujou.kra
* "overlay_001.png":sources/overlay_001.png
* "pacman-walk.kra":sources/pacman-walk.kra
* "perso_001.png":sources/perso_001.png
* "perso_002.png":sources/perso_002.png
* "perso_003.png":sources/perso_003.png
* "perso_004.png":sources/perso_004.png
* "perso_005.png":sources/perso_005.png
* "perso_006.png":sources/perso_006.png
* "perso_007.png":sources/perso_007.png
* "perso_008.png":sources/perso_008.png
* "perso_009.png":sources/perso_009.png
* "perso_010.png":sources/perso_010.png
* "perso_011.png":sources/perso_011.png
* "perso_012.png":sources/perso_012.png
* "perso_013.png":sources/perso_013.png
* "perso_014.png":sources/perso_014.png
* "perso_015.png":sources/perso_015.png
* "perso_016.png":sources/perso_016.png
* "perso_017.png":sources/perso_017.png
* "perso_018.png":sources/perso_018.png
* "perso_019.png":sources/perso_019.png
* "perso_020.png":sources/perso_020.png
* "perso_021.png":sources/perso_021.png
* "perso_022.png":sources/perso_022.png
* "perso_023.png":sources/perso_023.png
* "perso_024.png":sources/perso_024.png
* "perso_025.png":sources/perso_025.png
* "perso-tout-seul.png":sources/perso-tout-seul.png
* "rue.blend":sources/rue.blend
* "rue.blend1":sources/rue.blend1
* "rue.kra":sources/rue.kra
</section>
</div>
<div class="pagebreak"></div>
<div id='content/emilie_coquard' class='user'>
<section class='content'>
h1. Le voyage du p'tit nuage
h2. Emilie Coquard
C'est l'histoire d'une petite fumée sortie d'une cheminée qui vient se mélanger aux nuages. On va découvrir un petit monstre en sortir et celui-ci va être dérangé par un autre des siens.
Pour faire ce projet, on a d'abord appréhender le logiciel Krita.
J'ai dessiné des personnages imaginaires avec un effet de dessin à la craie.
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-15.png'>!thumbs/emilie_coquard-15.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-04.png'>!thumbs/emilie_coquard-04.png!</a>
Pour continuer, j'ai dessiné des storyboards pour imaginer l'histoire d'un petit monstre.
!images/storyboard.png! (mettre les dessins)
Dessin du monstre dans Krita :
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-08.png'>!thumbs/emilie_coquard-08.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-07.png'>!thumbs/emilie_coquard-07.png!</a>
Et de la pluie :
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-14.png'>!thumbs/emilie_coquard-14.png!</a>
Dessin du paysage de l'animation :
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-05.png'>!thumbs/emilie_coquard-05.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-13.png'>!thumbs/emilie_coquard-13.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-09.png'>!thumbs/emilie_coquard-09.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-00.png'>!thumbs/emilie_coquard-00.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-06.png'>!thumbs/emilie_coquard-06.png!</a>
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-03.png'>!thumbs/emilie_coquard-03.png!</a>
Test d'animation du nuage avec le décor dans blender :
<a data-lightbox='emilie_coquard' href='images/emilie_coquard-10.gif'>!thumbs/emilie_coquard-10.gif!</a>
Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso
puis ajouter cette ligne:
bc. !images/nomdemonimage.jpeg!
Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.
</section>
<section class='images'>
* <a data-lightbox='emilie_coquard' href='images/emilie_coquard-01.png'>!thumbs/emilie_coquard-01.png!</a>
* <a data-lightbox='emilie_coquard' href='images/emilie_coquard-02.png'>!thumbs/emilie_coquard-02.png!</a>
* <a data-lightbox='emilie_coquard' href='images/emilie_coquard-11.png'>!thumbs/emilie_coquard-11.png!</a>
* <a data-lightbox='emilie_coquard' href='images/emilie_coquard-12.gif'>!thumbs/emilie_coquard-12.gif!</a>
</section>
<section class='sources'>
* "test2.kra":sources/test2.kra
* "test.kra":sources/test.kra
</section>
</div>
<div class="pagebreak"></div>
<div id='content/louis_eveillard' class='user'>
<section class='content'>
h1. Le nom de mon animatique
h2. Monprenom Monnom
à partir d'ici vous pouvez écrire le texte de description de votre projet d'aniamtique
<a data-lightbox='louis_eveillard' href='images/louis_eveillard-00.jpg'>!thumbs/louis_eveillard-00.jpg!</a>
Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso
puis ajouter cette ligne:
bc. !images/nomdemonimage.jpeg!
Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.
</section>
<section class='images'>
* <a data-lightbox='louis_eveillard' href='images/louis_eveillard-01.jpg'>!thumbs/louis_eveillard-01.jpg!</a>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak"></div>
<div id='content/Lucie_Maëlle' class='user'>
<section class='content'>
h1. Le nom de mon animatique
h2. Monprenom Monnom
à partir d'ici vous pouvez écrire le texte de description de votre projet d'aniamtique
<a data-lightbox='Lucie_Maëlle' href='images/Lucie_Maëlle-00.jpg'>!thumbs/Lucie_Maëlle-00.jpg!</a>
Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso
puis ajouter cette ligne:
bc. !images/nomdemonimage.jpeg!
Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.
</section>
<section class='images'>
* <a data-lightbox='Lucie_Maëlle' href='images/Lucie_Maëlle-01.jpg'>!thumbs/Lucie_Maëlle-01.jpg!</a>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak"></div>
<div id='content/sandrine_ripoll' class='user'>
<section class='content'>
h1. Le nom de mon animatique
h2. Monprenom Monnom
à partir d'ici vous pouvez écrire le texte de description de votre projet d'aniamtique
<a data-lightbox='sandrine_ripoll' href='images/sandrine_ripoll-00.jpg'>!thumbs/sandrine_ripoll-00.jpg!</a>
Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso
puis ajouter cette ligne:
bc. !images/nomdemonimage.jpeg!
Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.
</section>
<section class='images'>
* <a data-lightbox='sandrine_ripoll' href='images/sandrine_ripoll-01.jpg'>!thumbs/sandrine_ripoll-01.jpg!</a>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak"></div>
</section>
-16
View File
@@ -1,16 +0,0 @@
<header id='header'>
h1. OLA#3 Documentation
<nav id='menu'>
* "content/bachir_soussi-chiadmi":#content/bachir_soussi-chiadmi
* "content/claudie_under":#content/claudie_under
* "content/dimitri_robert":#content/dimitri_robert
* "content/emilie_coquard":#content/emilie_coquard
* "content/louis_eveillard":#content/louis_eveillard
* "content/Lucie_Maëlle":#content/Lucie_Maëlle
* "content/sandrine_ripoll":#content/sandrine_ripoll
</nav>
</header>
-7
View File
@@ -1,7 +0,0 @@
* "content/bachir_soussi-chiadmi":#content/bachir_soussi-chiadmi
* "content/claudie_under":#content/claudie_under
* "content/dimitri_robert":#content/dimitri_robert
* "content/emilie_coquard":#content/emilie_coquard
* "content/louis_eveillard":#content/louis_eveillard
* "content/Lucie_Maëlle":#content/Lucie_Maëlle
* "content/sandrine_ripoll":#content/sandrine_ripoll