Olivier Ageron

ANIMATION

Atelier Multi-Médias / Animation

Sujet Animation libre…

Le Stop-Motion

L’animation en volume, ou animation image par image, (stop motion et go motion en anglais) est une technique d’animation permettant de créer un mouvement à partir d’objets immobiles.
Le concept est proche de celui du dessin animé : une scène (en général constituée d’objets) est filmée à l’aide d’une caméra capable de ne prendre qu’une seule image à la fois (c’est une photographie sur pellicule de film). Entre chaque image, les objets de la scène sont légèrement déplacés. Lorsque le film est projeté à une vitesse normale, la scène semble animée.

Historique : 1908 –Emile Cohl –Le cauchemar de Fantoche http://www.youtube.com/watch?v=gJw0vIsO_no
Historique : 1930 –Ladislas Starevitch – Le Roman de Renard  https://www.youtube.com/
Historique :  1965 – Jiri Trnka – La main https://www.youtube.com/watch

Parmi les films récents  utilisant ces techniques :
L’Étrange Noël de Monsieur Jack et Les Noces Funèbres de Tim Burton
Les réalisations des studios Aardman Animations (Wallace et Gromit et Chicken Run…)
Les réalisations des Studio Laika.
Kubo et l’armure magique de Travis Knight
Coraline de Henry Selick
Fantastic Mr. Fox et L’Île aux chiens de Wes Anderson
Le sens de la vie pour 9 dollars 99 de Tatia Rosenthal.
Team America police du monde de Trey Parker et Matt Stone
Hell & Back de Tom Gianas et Ross Shuman
Ma Vie de Courgette de Claude Barras

Presentation des notions de base :
https://fr.wikipedia.org/wiki/Animation_(audiovisuel)
http://hchampionbib.wordpress.com/2009/10/26/le-stop-motion/

Tutoriels de base :
http://www.dailymotion.com/video/xb3ndv_dessin-anime-sur-cellophane_creation
http://www.youtube.com/watch?v=MbF6m3BeGUQ&feature=player_embedded#!
http://www.youtube.com/watch?v=4uG-ZIOXZ7w&feature=related
http://www.youtube.com/user/StopmoNick?feature=watc
http://www.youtube.com/user/stopmotionmagazine?feature=watch

Exemple de Stop-Motion
Her Morning Elegance / Oren Lavie : http://www.youtube.com
La parodie : http://www.youtube.com/
Le collectif  Blu : http://vimeo.com/blu/videos
Hudson – Against The Grain http://vimeo.com/31939621
Moleskine – MINI PLANNERS https://vimeo.com/434376664 et making of https://vimeo.com/339511911
Machinima -Insert Coin (+Making Off) https://www.youtube.com/watch?v=0sNxRji1STg
Greg Jardin – Kina Grannis’ “In Your Arms” (+Making Off)  https://www.youtube.com/watch?v=IOu0DuxFAT0 + https://www.youtube.com/watch?v=cIH4MJAC2Tg
Kung Fu https://youtu.be/MPNlg-cgLgE

Methodologie

Synopsis / Note d’intention
Story-Board
Rétro-planning

> Quelques notions d’animation
Le story Board
Faire un dessin animé (Le mouvement, le temps, storyboard et feuille d’exposition)
Téléchargez un modèle de storyboard et un modèle de feuille d’exposition
A lire : Faire du dessin animé sans caméra, par Norman Mac Laren
En savoir plus sur Norman MacLaren = https://placedesarts.com/fr/blogue/norman-mclaren-la-créativité-sans-limites-d’un-géant-de-l’animation
https://youtu.be/E3-vsKwQ0Cg / https://youtu.be/PK9rWUn2Y4k

> Logiciels gratuits pour Story-Board
https://wonderunit.com/storyboarder/(sur mac)
https://theplot.io (online)
https://www.storyboardthat.com/fr (online)

> A voir
https://www.fanactu.com/univers/cinema/4789-dix-storyboards-de-films-cultes

> Stop Motion sur Smartphone (environ 5€ en version complète) :
https://freeappsforme.com/stop-motion-apps/
J’ai un petit faible pour Stop Motion Studio
https://apps.apple.com/fr/app/stop-motion-studio/id441651297

> Stop Motion Interview / témoignage
https://youtu.be/9Sw7y-iZ2DM   Michel Gondry
https://youtu.be/KOqcHCEqO1k Terry Gilliam
https://youtu.be/SQ7JTB2CaN0 Terry Gilliam
https://youtu.be/gFOC3VQbjrk Tim Burton

Film à voir / la pub pour MacDo
The Pen story
Human SkateBoard
Human TETRIS / Human SPACE INVADERS / Human POLE POSITION / Human PAC-MAN
Carte de Voeux
Last Leaf
Glup (avec un Nokia N8)

Faire des Gif sur Photoshop

https://helpx.adobe.com/fr/photoshop/how-to/make-animated-gif.html
http://www.finalclap.com/tuto/photoshop-creer-gif-anime-88/
Télécharger le fichier d’exemple

> Séance de travail sur le banc titre
A voir : http://fr.wikipedia.org/wiki/Banc-titre – http://www.fangpo1.com/Banc_titre/ – http://www.ina.fr/
A voir aussi : https://vimeo.com/24418942

Quelques précisions avant d’essayer.

> Travail avec Dragon StopMotion (en prêt à l’atelier avec un portable MacBook Pro)
http://www.dragonframe.com/
http://www.youtube.com/user/dragonstopmotion

> Outils à utiliser
Les logiciels Mac

iStopMotion autre logiciel très puissant et moins cher.
Site d’aide et de tuto à iStopMotion /  Tuto en vidéo
Liste des appareils photo compatibles avec iStopMotion

zonMotion logiciels gratuit plus léger mais moins complet
FrameByFrame logiciels gratuit plus léger mais moins complet

Les logiciels gratuits PC
Monkeyjam  / StopMojo / Luciole

L’animation Vectorielle.

Animate ou anciennement Adobe Flash (anciennement Macromedia Flash ; nom original FutureSplash Animator), ou simplement Flash, se réfère à Adobe Flash Player et à un logiciel multimédia utilisé pour créer le contenu de Adobe Engagement Platform (tel qu’une application Internet, jeux ou vidéos). Flash Player, développé et distribué par Macromedia (racheté en 2005 par Adobe Systems), est une application client fonctionnant sur la plupart des navigateurs Web. Ce logiciel permet la création de graphiques vectoriels et de bitmap animés par un langage script appelé ActionScript, et la diffusion de flux (stream) bi-directionnels audio et vidéo.

Pour être bref, Adobe Flash est un environnement de développement intégré (IDE), une machine virtuelle utilisée par un player Flash ou serveur flash pour lire les fichiers Flash. Mais le terme « Flash » peut se référer à un lecteur, un environnement ou à un fichier d’application.

Depuis son lancement en 1996, la technologie Flash est devenue une des méthodes les plus populaires pour ajouter des animations et des objets interactifs à une page web ; de nombreux logiciels de création et OS sont capables de créer ou d’afficher du Flash. Flash est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo. Il permet aussi d’intégrer de la vidéo en streaming dans une page, jusqu’au développement d’applications Rich-Media.

Les fichiers Flash, généralement appelés « animation Flash » portaient l’extension .swf. Ils pouvaient être inclus dans une page web et lus par le plugin Flash du navigateur, ou bien interprétés indépendamment dans le lecteur Flash Player.

Les nouveauté de Animate 2022
https://helpx.adobe.com/fr/animate/using/whats-new.html

Animate et l’HTML5
https://helpx.adobe.com/fr/animate/using/creating-publishing-html5-canvas-document.html
https://www.video2brain.com/fr/tuto/publier-en-html5-une-animation-flash

Exemple de sites en HTML5 à voir plutôt avec Chrome
https://artsandculture.google.com/?hl=fr
http://works.jonobr1.com/Patatap
https://www.schizinfo.com/experience/
https://www.peanutgalleryfilms.com/
http://500.chromeexperiments.com/
http://thecolorsofmotion.com/films
http://blacknegative.com
http://30electeurs.onf.ca
http://360langstrasse.srf.ch/page/
http://ianjamescox.com
http://www.thewildernessdowntown.com
http://kinetic.com.sg
http://www.ro.me
http://novembro.net/es/home
http://9elements.com/io/projects/html5/canvas/ 
http://domanistudios.com
http://www.dotfusion.com/
https://humans-machines.com/
http://slaveryfootprint.org
http://soulwire.co.uk/
http://mario.ign.com/
http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded
http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family
http://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/
…

Découverte de l’interface utilisateur du logiciel.
Espace de travail
Pour commencer

> Dessiner avec Animate
http://www.forum-dessine.fr/index.php?id=06050

> Technique d’animation images par images.
http://www.youtube.com/watch?v=BSJXr1D7GGk
http://helpx.adobe.com/fr/flash/using/frame-by-frame-animation.html

> Découverte de l’animation (interpolation de mouvement ou de formes) et l’animation classique.
http://www.forum-dessine.fr/index.php?id=06051

INTERPOLATION FORME => OBJETS DÉGROUPÉS
INTERPOLATION MOUVEMENT ET CLASSIQUE => OBJETS GROUPÉS

Les 3 types d’animations [EN VIDÉO]
Interpolation de forme et classique [EN VIDEO]
Interpolation forme

http://helpx.adobe.com/fr/flash/using/animation-basics.html

 https://helpx.adobe.com/fr/animate/tutorials.html

Approfondissement des interpolations.
Surtout l’interpolation de mouvement et l’éditeur de mouvement.

http://helpx.adobe.com/fr/flash/using/motion-tween-animation.html

> Exemples d’animations flash / Animate
Tarboy et le Making of
La serie StainBoy de Tim Burton Playlist de la serie
Pencilnimation la web-serie
Le film « la tribu » Prix du meilleur court métrage destiné à l’internet au Festival d’Annecy 2004.
Voir le site http://www.gordo.it …

La cinématique inverse (Animate):

https://helpx.adobe.com/fr/animate/using/bone-tool-animation.html
http://edutechwiki.unige.ch/fr/Flash_CS4_-_Cinématique_inversée
http://www.pearson.fr/resources/titles/27440100049500/extras/p170_175.pdf (PDF)

> Animation d’un squelette. Fichiers resources

> Animer un croquis.
https://helpx.adobe.com/fr/mobile-apps/how-to/animate-ink-drawing-adobe-capture.html

> Apprentissage des outils segment et liaison.
https://www.youtube.com/watch?v=-ERORW7RBm0
Outil Camera
https://helpx.adobe.com/fr/animate/how-to/virtual-camera.html?

Interaction dans Animate
https://helpx.adobe.com/fr/flash/using/creating-buttons.html
https://www.youtube.com/playlist?list=PLmli2pijRR7md_pSO8T2gV-IqqAXPwTp7

Publication dans Animate
http://tv.adobe.com/fr/watch/apprendre-flash-professional-cc/publier-en-html5-une-animation-flash/
https://helpx.adobe.com/fr/flash/using/creating-publishing-html5-canvas-document.html

Adobe After Effects

Pour en savoir plus : la page Wikipedia
Voir les tutos
https://mattrunks.com/fr

Caméra et images clés
https://www.youtube.com/watch?v=ZAhkcqcfZBc
https://www.youtube.com/watch?v=Sj3N53sIJRs