Profitez des offres Memoirevive.ch!
ScreenFlow, le iMovie de la copie d’écran animée

Celui qui doit donner une explication à un groupe d'apprenants à propos d'un programme ou d'une démarche informatique a plusieurs solutions:

  • la démonstration en direct, qui a pour avantage la réponse directe à la question de votre récepteur, et comme inconvénient le fait que ce dernier n'osera peut-être pas vous redemander dix fois de tout recommencer parce qu'il n'a pas réussi à suivre;
  • le tutorial sous forme de PDF ou de bête brochure, qui ont pour avantage le fait que l'on peut revenir en arrière, mais qui prend beaucoup beaucoup de temps à réaliser, puisqu'il est indispensable de faire des captures d'écran avec explicatif  de tout ce qui se passe à l'écran, étape par étape. On pense faire en quelques lignes, et il nous faut très vite de très nombreuses captures d'écran, et une description écrite de tout ce qui est présenté;
  • un petit film, commenté, permettant de simuler la démonstration en direct, qui permet à celui qui le regarde d'aller à son rythme, de faire des pauses, de revenir en arrière;

Personnellement, j'aime bien cette troisième solution. Je l'ai dit à propos de la formation Video2Brain Lightroom 2 par exemple.

Lorsqu'on regarde ce type de formation, on ne se rend pas vraiment compte du travail qui est derrière. Je suis particulièrement admiratif par rapport à ce qui est présenté par Video2Brain, simplement parce que je me suis essayé à ce genre d'exercices pour mes collègues, et que je me suis rendu compte des difficultés qui parsèment le chemin du petit film simplement un peu correct.

Il faut:

  • un scénario
  • un script
  • un texte
  • un montage le plus serré possible, surtout si l'on est sur Internet, et que le film va être téléchargé

Bref, ce n'est pas simple.

J'ai utilisé pour mes premiers essais, il y a des années, SnapzPro X, testé ici. Il est bien, sans plus, vous permettant de capturer tout votre écran, ou seulement une zone de ce dernier. Mais il date, et évolue très peu;

Je suis passé ensuite sur iShowU Pro, très bien aussi, qui offre de nombreux choix d'exportation, et permet d'afficher les raccourcis clavier à l'écran.

J'ai utilisé iShowU en parallèle avec Mouseposé, qui permet d'éclairer le curseur (ou plutôt d'assombrir tout ce qui est autour).

Mais avec cette solution combinée, il me fallait absolument créer mes effets pendant la prise de vue, pendant que je pensais à ce que je devais faire et dire, tout ça en même temps.

Trop dur pour mon petit cerveau d'homme qui ne peut faire qu'un truc à la fois.

Ma femme y serait peut-être arrivée, pas moi.

Tiens, ça va lui faire plaisir cette phrase…

C'est là qu'entre en jeu un logiciel pour le moins intéressant: ScreenFlow, véritable intégré de la réalisation de tout ce qui se passe d'important sur votre écran.

ScreenFlow, un véritable intégré de la capture d'écran

ScreenFlow est un intégré de la capture d'écran parce qu'il vous permet:

  • de capturer ce qui se passe sur l'écran;
  • d'intégrer des effets après-coup sur vos images (mise en évidence, zooms, rotation et j'en passe);
  • de monter vos images, un peu comme dans iMovie de l'époque d'avant la 08, quand je comprenais encore ce logiciel;
  • d'exporter votre film vers différents formats.

Reprenons dans l'ordre:

La capture de ce qui se passe à l'écran

Jusqu'à l'arrivée de ScreenFlow, vous deviez décider quelle zone vous alliez vouloir capturer sur votre écran. Sur ce logiciel, ce n'est pas nécessaire, puisque vous prenez tout votre écran, et qu'ensuite, vous zoomez sur ce qui vous intéresse.

Lorsqu'on lance ScreenFlow, seule cette fenêtre apparaît à l'écran:

image

On choisit ce que les entrées que l'on veut enregistrer, et l'on clique sur le bouton rouge.

image

Au bout de 5 secondes (option paramétrable en préférences), l'enregistrement commence. On fait ce que l'on a à faire, on tape commande-shift-2 et l'enregistrement s'arrête.

Nous arrivons sur la fenêtre principale suivante de ScreenFlow:

image

  1. Le canevas, qui montre l'image de l'endroit où se trouve la tête de lecture dans la Time line.
  2. La Time line, qui nous montre le montage de notre film
  3. La zone de l'inspecteur (qui affiche ici les éléments enregistrés dans notre montage, qu'ils soient images fixes, films, bandes audio et j'en passe
  4. Les outils pour ajouter soit un enregistrement soit un média à notre film.

Si vous cliquez sur le bouton "Ajouter un enregistrement", vous verrez la zone de dialogue suivante, qui parle d'elle-même…

image

Nous pouvons bien entendu cumuler les enregistrements.

Je précise qu'à ce stade, normalement, je n'enregistre pas encore le son de commentaire. C'est une fois le montage terminé que je regarde, regarde encore ce que cela donne, en m'imprégnant de ce qui est fait, et commente ensuite l'enregistrement de la piste son.

Je n'ai alors qu'une seule chose à penser, et ça me va, comme dit plus haut.

L'ajout des effets

Les effets sont de trois types pour la Video:

  • les légendes
  • les actions d'enregistrement
  • les actions vidéos
  • les actions audio

Je vous propose de regarder un petit film montrant les trois premiers.

 

Tout d'abord, parlons de l'introduction (assez exceptionnelle, il faut bien l'avouer).

Vous constatez que je vous explique en vignette ce que nous allons voir, qui lui-même est une présentation Keynote. Je lance la présentation Keynote, en demandant à ScreenFlow de capturer ce qui se passe pendant que je la fais défiler devant l'iSight en même temps qu'il capture ce qui se passe à l'écran, sur deux pistes séparées.

image

Une fois la présentation terminée, j'arrête l'enregistrement de l'iSight, et le programme met de côté un une piste pour la présentation, une piste pour le présentateur, une piste pour le son.

Je les mets l'une sous l'autre, et délace dans le canevas simplement l'insert du présentateur en bas à droite, pour que je ne déborde pas sur le titre de la présentation. Pour ce faire, je réduis la taille de la fenêtre du présentateur.

Une fois que la page titre est terminée, j'ajoute une action vidéo, sur la piste présentateur, qui va en sortie (et plus ou moins progressivement, selon la longueur de l'action) agrandir l'image à 100%, et la faire pivoter, pour donner une  impression de profondeur.

image

Je fais pivoter également la piste de la présentation, ce qui nous donne l'image suivante:

image

Ce qui donne le résultat suivant:

image

 

J'ajoute ensuite des légendes sur la piste de ce qui se passe à l'écran, qui vont me permettre de zoomer sur une fenêtre, un menu, ou le curseur.

image

L'inspecteur des légendes

image

Et celui des actions d'enregistrement

Pour insérer un de ces effets, il suffit de les glisser sur le clip.

image

Ici, sur le deuxième clip, nous avons une légende (sélectionnée, raison de la couleur jaune) et une action d'enregistrement.

En résumé:

  • si vous voulez zoomer sur une fenêtre, le curseur, ou un menu, insérez une légende;
  • si vous voulez zoomer sur n'importe quoi d'autre, faire pivoter votre piste, ajouter un reflet, ou que sais-je, choisissez une Action vidéo
  • si vous voulez ajouter un affichage de ce qui se passe sur votre clavier, ajoutez une action d'enregistrement d'écran.

Vous pouvez bien entendu cumuler les effets sur une même piste, sachant (je l'ai remarqué) qu'il vaut mieux parfois scinder en x parties pour que tout soit véritablement au top.

Parce qu'il est bien évident que vous pouvez à tout moment couper un clip, insérer un point d'entrée, de sortie, couper ce qui ne vous plaît pas, travailler le son et j'en passe.Il

Il est un peu dommage que l'on n'entende pas le son lorsqu'on déplace le curseur à la main, ce la permettrait de trouver bien plus facilement un petit accrochage à enlever, en allant en avant /arrière jusqu'à ce que l'on arrive au point exact désiré.

Vous pourrez également faire des fondus enchaînés entre deux clips, mais pour ce faire, vous devrez faire en sorte que les deux pistes se chevauchent dans le temps sur une durée que vous choisirez. Sur la piste de sortie, vous insérerez une action vidéo qui demandera d'arriver à 0% d'opacité, sur la piste d'entrée, vous demanderez d'abord au niveau général du clip une opacité de 0%, puis vous insérerez une action vidéo, qui demandera de monter à 100% d'opacité.

C'est un petit peu lourd, j'aurais aimé un lien automatique entre les séquences. D'autres y arrivent, pourquoi pas ScreenFlow? Allez, soyons sûrs que cela va être possible dans une prochaine version.

Pour le son, même chose: vous insérez des actions audio pour baisser et monter le son. Le mixage ainsi ne pose aucun problème.

L'export qu'il vous faut

Au niveau export, les options sont nombreuses:

image

image

Comme vous le voyez, l'iPhod, l'iPhone et l'AppleTV sont de la partie.

Si vous avez des actions qui font en particulier pivoter les fenêtres, n'hésitez pas à utiliser l'option "Motion Blur", qui, si elle ralentit l'export de manière significative, améliore la qualité des animations également.

Vous pourrez alors insérer des marqueurs, qui permettront de créer des chapitres dans votre oeuvre (chapitres que l'on retrouve dans le film ensuite).

image

En conclusion

Comme vous le constatez, ScreenFlow est ce qui se fait de mieux au niveau de la capture animée de ce qui se passe sur votre écran.

Tout est possible ou presque.

Parfois, je voudrais que certaines choses (les fondus-enchaînés par exemple) soient plus automatique, que l'on puisse entendre la bande sonore lorsqu'on déplace manuellement la tête de lecture par exemple, comme déjà dit), mais en gros, il donne un accès facile à toute personne qui a besoin de préparer de petits films de démonstration.

Je l'ai utilisé pour deux films dans mon école, j'ai eu pas mal de retours de collègues qui trouvaient l'idée fort sympathique, et qui disaient bien aimer pouvoir revenir sur certaines explications tranquillement.

Voilà!

J'ai fini.

Prix de la chose: 99 $. Ce n'est pas donné, certes, mais la somme sera relativement vite rentabilisée (en tout cas au niveau temps!) si vous devez faire souvent des présentations informatiques de ce qui se passe sur votre écran (cours ou démonstration).

Vous pouvez télécharger ScreenFlow ici, en version de démonstration.

Au même endroit, de nombreux petits films montrent comment utiliser le logiciel. N'hésitez pas, ils sont très utiles (mais en anglais, comme l'aide, alors que le logiciel est lui traduit).

19 commentaires
1)
JCP
, le 12.09.2008 à 07:25
[modifier]

Cet outil m’a l’air particulièrement puissant et, visiblement, relativement facile à appréhender. Merci, du tuyau!

Celui qui doit donner une explication à un groupe d’apprenants à propos d’un programme ou d’une démarche informatique a plusieurs solutions:

Aaaargh! apprenants : je croyais que nous étions définitivement débarrassés de ce germanisme immonde!!!

3)
Caplan
, le 12.09.2008 à 08:22
[modifier]

Vous constatez que je vous explique en vignette ce que nous allons voir, qui lui-même est une présentation Keynote. Je lance la présentation Keynote, en demandant à ScreenFlow de capturer ce qui se passe pendant que je la fais défiler devant l’iSight en même temps qu’il capture ce qui se passe à l’écran…

Je sais pas pourquoi, mais j’ai un peu le vertige… ;-)

Milsabor!

4)
coacoa
, le 12.09.2008 à 09:13
[modifier]

J’ai bien aimé le pilote de la saison 1 de “François Cunéo” fait une démo video.

A quand l’épisode 2 ?

Est-ce que la série sera disponible en HD sur l’iTunes Store ?

Je me réjouis surtout de voir l’épisode “Je vous explique comment je fais pour mener de front tout ce que je mène de front et quand même réussir à faire des démonstrations en video”.

Tu as un super pouvoir, hein dis ?

5)
François Cuneo
, le 12.09.2008 à 09:30
[modifier]

@coacoa: :-)

@Caplan: relis, c’est tout simple en fait. Je t’assure!

@ LC475: oui oui, mais comme je l’explique, le fait d’être moins basique change la vie de celui qui doit créer.

@JCP: pas de bol, le mot apprenant remplace maintenant le mot apprenti.!

6)
Zallag
, le 12.09.2008 à 09:56
[modifier]

@ JCP : “Apprenant” n’est pas un germanisme, pas plus que le mot “Enseignant”.

Simplement c’est beaucoup mieux d’être un apprenant qu’un apprenti, un enseignant qu’un maître d’école ou un prof, un technicien de surface qu’un nettoyeur. Ou un “médiologue de santé” plutôt qu’un prof dans une école d’infirmière…

Tels sont les ravages que la sociologie et les théoriciens de l’enseignement ont apportés dans toutes les formes de transmission des savoirs. Et là, je ne parle que de terminologie, parce que parler des changements dans l’enseignement et les écoles est un débat tellement passionné qu’il n’a rien à voir juste ici et maintenant.

Un jour peut-être, un courageux ou un inconscient le fera sur Cuk.

7)
Caplan
, le 12.09.2008 à 09:57
[modifier]

@Caplan: relis, c’est tout simple en fait. Je t’assure!

Justement! C’est en relisant plusieurs fois que j’ai commencé à me sentir mal! ;-)

Milsabor!

8)
levri
, le 12.09.2008 à 09:59
[modifier]

@ JCP : pour “apprenants”, j’avais trouvé que j’avais une bonne occasion de me taire, raté ! tu as relevé… ;)

Merci pour l’article François.

9)
Philob
, le 12.09.2008 à 11:52
[modifier]

Je me réjouis d’utiliser ScreenFlow et merci pour l’article.

Selon cet article, ça viendrait quand même de l’allemand, pas de la langue allemande mais du changement de nom fait en Suisse allemande. apprentis

10)
Timekeeper
, le 12.09.2008 à 11:53
[modifier]

Caplan, pas sûr d’avoir compris non-plus ; apprenants, ça me file des boutons aussi ; François, c’est ton périphérique de saisie qu’on entend souffir sur la séquence sonore et animée multimédia ? ^^

13)
gabriel.parriaux
, le 12.09.2008 à 12:44
[modifier]

J’aime beaucoup ScreenFlow, je trouve même incroyable.

Mon seul soucis: son format d’enregistrement. Les fichiers .mov font tout de suite une craquée de mégas et lorsqu’on met ça sur le web, ceux qui n’ont pas un puissant ADSL souffrent… ou alors il faut exporter, mais là du coup on perd la clarté et notamment les menus deviennent illisibles…

Par contre, un logiciel comme Jing, qui ne permet hélas pas de retravailler son enregistrement, a le super avantage de créer des vidéos en format Flash qui sont super-légères tout en restant de très bonne qualité!

Une question pour tous: que faut-il faire pour ajouter une fonction d’export en flash à un logiciel comme ScreenFlow? Acheter une licence d’un logiciel très cher? Ou y a-t-il des solutions abordables?

Merci d’avance pour vos avis!

14)
JCP
, le 12.09.2008 à 13:56
[modifier]

Zallag, François : il m’avait semblé lire à plusieurs reprises que ce néologisme allait heureusement être abandonné. Je sais que “apprenti” et “apprenties” sont de retour dans l’entreprise pour laquelle je travaille et ce document semblerait le confirmer.

15)
LC475
, le 12.09.2008 à 19:50
[modifier]

@ François

Je sais, mais quand on n’a qu’un besoin très occasionnel d’un tel logiciel, on peut se contenter de solutions moins onéreuses que je me contentais de citer ;)

@ Gabriel

Essaie de convertir le .mov en .flv avec ffmpegX

17)
zit
, le 17.09.2008 à 09:56
[modifier]

Ça a vraiment l’air génial, ça, comme outil pédagogique, je pense que je vais me mettre à la vidéo, moi aussi.

z (Purée, quelle classe folle, l’acteur que tu as dégoté pour faire la présentation… je répêêêêêêête : grosse production sur cuk.ch, moi aussi, je veux un budget casting)