Le code affiché sur une diapo est presque toujours une capture d'écran. C'est propre, et c'est immobile : vous montrez le résultat fini, ou vous alignez trois images en espérant que la salle repère elle-même ce qui a changé.
Keynote sait faire mieux. La Métamorphose interpole entre deux diapos, et si le code est du vrai texte plutôt qu'une image, elle anime les mots un à un : une ligne qui descend pour faire de la place, une valeur qui change, un bloc entier qui apparaît pendant que tout le reste se décale pour l'accueillir.
Ce sont deux diapos et une transition. Pas d'After Effects, pas de piste vidéo.
Pourquoi une capture ne peut pas faire ça
La Métamorphose fonctionne en faisant correspondre les objets de deux diapos consécutives, puis en animant le passage des uns aux autres. Une image, c'est un objet. Keynote peut la déplacer, la redimensionner, la fondre, mais il ne peut pas entrer dedans pour animer la quatrième ligne : de son point de vue, il n'y a pas de quatrième ligne.
Le texte, c'est autre chose. Une zone de texte contient des mots, et la Métamorphose sait les faire correspondre individuellement.
Toute la technique tient donc à ceci : amener dans Keynote du code coloré sous forme de texte. Le retaper et le colorer à la main est un supplice. Le coller depuis votre éditeur perd la coloration, parce que les éditeurs déposent du texte brut dans le presse-papiers.
Sortir du code coloré sous forme de texte
Codeshot exporte deux choses. Le PNG est l'image composée : arrière-plan, cadre de fenêtre, ombre. Le RTF est le code seul, en texte coloré.
Réglez Format sur RTF et appuyez sur Copier le RTF. Le RTF ne contient aucun arrière-plan, et c'est délibéré : la diapo apporte le sien, et un second derrière ne ferait que gêner.
Un détail mérite d'être connu, car c'est lui qui gâche d'ordinaire le code collé : le RTF désigne les polices par leur nom, et la police à chasse fixe du système porte un nom privé que les autres apps ne savent pas résoudre. Faute d'y arriver, elles substituent une police proportionnelle, et l'alignement en colonnes — ce qui fait qu'on lit du code comme du code — s'effondre. Codeshot glisse Menlo à la sortie pour que cela n'arrive pas. Si vous avez choisi vous-même une police, son nom est déjà public et passe tel quel.
Construire les deux diapos
Collez dans une diapo. Commande-V. Les couleurs suivent. Redimensionnez la zone de texte, mais ne retapez rien : la Métamorphose s'appuie sur les mots eux-mêmes.
Dupliquez la diapo. Sélectionnez-la dans le navigateur et appuyez sur Commande-D. Vous avez maintenant deux diapos identiques.
Modifiez-en une. Soit vous ajoutez à la seconde les lignes qui manquaient encore, soit — souvent plus simple — vous collez l'extrait terminé et vous supprimez des lignes de la première jusqu'à retrouver l'état antérieur. Tout ce que vous laissez intact, la Métamorphose l'animera ; tout ce que vous ajoutez ou retirez, elle le fera apparaître ou disparaître en fondu.
Mieux vaut travailler à rebours. La Métamorphose s'appuie sur les mots eux-mêmes : les lignes censées rester en place doivent donc être identiques sur les deux diapos. Supprimer depuis un duplicata le garantit ; retaper une ligne à la main, c'est la manière sûre d'obtenir un mot qui, sans rien dire, ne correspond plus et saute au lieu de se déplacer.
L'ordre compte : la transition appartient à la diapo que l'on quitte, alors construisez d'abord l'état avant.
Le réglage dont tout dépend
Sélectionnez la première diapo, ouvrez la barre latérale Animer et ajoutez la Métamorphose.
Puis faites passer Correspondre de sa valeur par défaut à Par mot.
C'est le réglage dont dépend tout l'effet. Laissé tel quel, la Métamorphose traite la zone de texte comme un objet unique et la fond en fondu enchaîné : vous obtenez un flou entre deux états au lieu de code qui bouge. Par mot lui demande de faire correspondre les mots de chaque diapo et de les animer un à un, et c'est ce qui fait glisser les lignes et changer les valeurs sur place.
Une durée de 1,5 à 2 secondes se lit bien pour du code. Plus rapide, personne ne suit quelle ligne a bougé — ce qui est pourtant tout l'intérêt de la manœuvre.
Fondu des objets discordants doit rester coché. C'est ce qui fait apparaître les nouvelles lignes et disparaître celles qu'on a retirées, au lieu de les faire surgir d'un coup.
Enchaîner une séquence
Trois diapos, deux métamorphoses, et vous faites traverser un refactoring à votre auditoire une étape à la fois : la version naïve, la fonction extraite, la forme finale. Chaque transition emmène les lignes inchangées avec elle, si bien que l'œil reste accroché à ce qui a réellement changé.
Gardez de petites étapes. Deux ou trois lignes d'écart par transition suffisent largement : une diapo qui change la moitié de son contenu s'anime en bruit.
Quand préférer une image
Toutes les diapos de code n'ont pas besoin de ça.
Si le code ne change jamais, un PNG est plus simple, plus net, et il apporte le cadre de fenêtre et l'arrière-plan qui lui donnent l'air composé. Exportez en 2× et n'en parlons plus. Le déroulé complet couvre cette voie.
Prenez le RTF et la Métamorphose quand c'est le changement qui compte : quand vous montrez un diff, quand vous construisez quelque chose par étapes, ou quand vous expliquez pourquoi une version en a remplacé une autre.
Au-delà de Keynote
Le même RTF entre dans Pages, dans Word et dans tout ce qui accepte du texte enrichi. C'est du texte coloré, sélectionnable et indexable plutôt qu'une image — ce qui veut dire aussi qu'il reste lisible par un lecteur d'écran, et que quelqu'un peut copier une ligne de votre document pour l'exécuter.