Je suis en train de créer JavaScript de Zéro, une formation vidéo en ligne pour apprendre le JavaScript. Elle est conçue spécialement pour les débutants complets en programmation. Regardez gratuitement le module débutant sur YouTube dès maintenant.

Aujourd’hui je vais vous parler des outils que j’ai utilisé pour créer la vidéo promotionnelle d’Hercule pour le Play Store.

J’ai cherché pas mal de temps et essayé beaucoup d’outils différents avant d’en trouver un qui me convienne. Je pensais trouver des blogs qui parleraient de ça et expliqueraient comment monter une vidéo promotionnelle pour une application Android mais je n’ai trouvé que des morceaux par ici et par là. Alors comme je suis frustré de ne pas avoir trouvé un billet tout en un, j’ai décidé d’en rédiger un, il est long, mais il vaut le coup.

Pourquoi créer une vidéo promotionnelle pour son application Android ?

Et bien j’y vois plusieurs intérêts : le premier c’est de se démarquer des applications amateurs qui ne prennent pas la peine de faire une vidéo. Il faut l’avouer, je les comprends, ça prend beaucoup beaucoup de temps si on veut bien faire. Donc souvent, ils mettent quelques screenshots et publient leur application comme ça. Le second intérêt, le plus important à mon sens, c’est de donner envie à un visiteur de télécharger votre application.

Un dernier point, en tant que professionnel (je vais essayer de vivre de la vente d’Hercule je vous rappelle !) avoir une vidéo permet de monter d’un cran en terme de notoriété pour les utilisateurs et permet aussi d’affirmer sa touche personnelle, son identité professionnelle.

Bref pour faire court, si vous avez du temps et que vous voulez que votre application décolle, je pense qu’il est crucial de faire une vidéo pour promouvoir celle-ci sur le Play Store.

Mes exigences concernant la vidéo

Avant de faire ma propre vidéo j’ai été voir celles des autres, pour voir un peu à quoi elles ressemblent. La plupart des vidéos professionnelles montrent finalement assez peu l’application mais font du teasing, exactement comme la bande-annonce d’un film de cinéma.

Ça donne envie de télécharger l’application et c’est tout ce qui importe. Car lorsqu’on sait que le nombre de téléchargements influe sur le rang de l’application lorsqu’elle est présentée lors d’une recherche, il semble évident de vouloir augmenter ce nombre le plus possible, la vidéo de promotion permet ça !

Google explique sur sa page indiquant les caractéristiques que doivent avoir les vidéos promotionnelles : « Proposez des vidéos assez courtes (de 30 secondes à 2 minutes) et concentrez-vous sur les fonctionnalités les plus intéressantes pour les utilisateurs. »

En résumé, faites court et percutant pour donner envie de télécharger votre application. Dernière chose que j’ai pu voir notamment chez un de mes concurrents, le curseur noir de souris de l’ordinateur qui est utilisé pour faire la vidéo. Je trouve ça moche, pas du tout pertinent car il n’y a pas de curseur sur les smartphones, donc si possible exit le curseur !

Résumons :

• Je veux une vidéo qui fait 1 minute maximum, plus c’est court mieux c’est
• Je veux qu’elle soit percutante, agréable et donne envie de télécharger l’application pour l’essayer
• Il faut qu’elle montre les fonctionnalités les plus intéressantes pour les utilisateurs
• Je veux me débarasser du curseur d’ordinateur et le remplacer par quelque chose d’autre, un disque de couleur par exemple

Les outils

Après avoir essayé plusieurs outils d’édition vidéo, j’ai fini par choisir l’excellent Kdenlive (il est encore instable des fois et peut planter mais ça reste un très bon outil). C’est un logiciel simple d’utilisation mais néanmoins puissant, compatible avec Linux, FreeBSD et MacOS X.

Personnellement j’utilise la distribution Debian depuis bientôt 10 ans, en version testing, avec Gnome3.

Pour résumer nous aurons besoin de :

• Kdenlive
• Eclipse (nous allons capturer des vidéos en utilisant l’émulateur)
• Gnome3 (facultatif, mais c’est mieux pour le curseur de souris, j’y reviendrai plus tard)

Let’s go.

Configurer l’émulateur sous Eclipse

Voilà encore une partie où je pensais trouver toutes les infos sur le net, mais en fait non. J’ai dû y aller à tâtons pour trouver la bonne configuration ! Je vais vous faire gagner du temps en partageant ma configuration : sur mon PC, une configuration d’émulateur qui tourne sans trop ramer avec une version d’Android récente est la suivante :

Il ne vous reste plus qu’à en faire une équivalente pour votre PC, j’ai créé un device virtuel spécifique exprès pour la vidéo pour avoir le meilleur rendu par rapport à la densité de l’affichage et pour éviter d’avoir des écrans ou il aurait fallu scroller, voici la définition de mon device, à adapter encore pour vos besoins :

Côté Eclipse, on est prêt. Passons à Kdenlive.

Installer Kdenlive

Je ne vais pas faire un tuto là dessus, le site officiel est là pour ça. Avant toute chose je vous invite à vous balader dans les préférences du menu Settings > Configure Kdenlive. Moi j’y ai réglé le format par défaut des fichiers vidéo à 720p@24fps, traduit en français : 1280 x 720 @ 24 images par secondes. Bref, de la vidéo HD en 720p ! Et aussi, c’est important de le mentionner, cochez l’option Récupération en cas de plantage (sauvegarde automatique), vous apprécierez cette fonctionnalité ;-).

Enfin si vous voulez le mettre en français, menu Help > Switch Application language > Primary language > Français.

Prise en main rapide de Kdenlive

YouTube est votre ami ! Il regorge de tutoriels pour prendre en main Kdenlive, j’ai trouvé cette playlist YouTube fort instructive.

Quelques petites choses à savoir concernant Kdenlive (j’ai la version 0.9.10) :

• Lorsque vous ajoutez des « clips titre », si vous voulez de l’anti-aliasing sur la police de caractères que vous utilisez, vous devez mettre un arrière-plan coloré de valeur au moins égale à 1, si vous mettez 0 le texte ne sera pas propre. Ça peut vous sembler un détail, mais une vidéo HD avec des titres sans anti-aliasing, ça se voit tout de suite et ça fait vraiment pas professionnel !

• Pour afficher du texte, utilisez les clips titre, pour fusionner du texte et des vidéos, utilisez la transition « addition » par exemple, bref suivez les tutos pour Kdenlive, c’est vraiment bien foutu comme logiciel.
• Pour faire des fondus vers le noir ou vers l’image facilement, utilisez les coins des pistes vidéos

C’est un outil franchement bien foutu !

La capture vidéo sous Kdenlive

Passons aux choses sérieuses.

Alors là aussi je vais vous faire gagner du temps parce que je m’y suis cassé les dents avant vous. J’avais utilisé gtk-recordmydesktop pour capturer en vidéo le contenu de mon écran, mais cet outil ne peut sortir des vidéos qu’au format .ogv. Or ce format est mal supporté dans Kdenlive et j’avais eu des problèmes avec des images qui sautent, une qualité pas terrible, bref, à éviter !

J’ai découvert que Kdenlive possédait un outil de capture vidéo qui encode en X264 et intègre immédiatement la vidéo enregistrée dans la liste de vos clips, le top !

Voici la configuration que j’ai utilisé pour la capture :

Notez que j’ai effectué la capture sur un deuxième écran branché sur mon PC dont la résolution est 1280 x 1024. Il faut que l’émulateur apparaisse entièrement sur votre écran pour que la capture soit facile à travailler. Si vous voulez connaître la résolution du ou des écrans de votre ordinateur, la commande magique est xrandr :

Cette configuration vous permet de capturer votre écran en partant de tout en haut à gauche (Écart (0,0)) et sur une taille de 1280 pixels de large par 1024 de haut. Ne vous inquiétez pas de la vidéo « en trop » par rapport à l’émulateur, nous pourrons la découper grâce à un effet sous Kdenlive.

Astuce : pour éviter de capturer tout l’écran, placez votre émulateur dans un coin de celui-ci puis calculez la zone de l’écran à capturer et entrez les coordonnées et la taille qui vont bien dans Kdenlive, ça fera de plus petites vidéos à manipuler, ça sera plus efficace et consommera moins d’espace disque et de RAM lors de l’édition !

Procédons à la capture, lancez l’émulateur qui va bien et placez-le dans la zone que vous avez définie (dans un coin c’est plus pratique).

Maintenant que c’est fait vous pouvez lancer la capture vidéo dès que vous êtes prêt. Dans l’onglet moniteur d’acquisition, cliquez sur le bouton Enregistrer. Lorsque vous avez fini cliquez sur Stop.

La vidéo est automatiquement enregistrée et placée dans la liste de vos clips, que vous pouvez utiliser pour faire votre vidéo.

Je ne m’étendrai pas plus sur Kdenlive, les tutoriels sur internet vous permettront d’apprendre tout ce qu’il faut ! Au niveau des filtres & effets que j’ai utilisé principalement, il y a :

• Crop and transform > Edge Crop (Rognage et transformation > Découpage des bords)
• Crop and transform > Pan and zoom > (Déplacer et zoomer)

Avec un peu d’apprentissage et de temps vous pouvez vite vous en sortir pour faire une vidéo très correcte.

Astuce pour changer le curseur

Première chose à savoir (ça m’a pris une demie-journée pour découvrir ça) le curseur utilisé lorsqu’on passe sur la fenêtre de l’émulateur n’est pas géré par Gnome3 ! Donc changez le curseur de Gnome3 ne vous servira à rien !

Pour avoir un joli curseur j’ai utilisé une astuce : j’ai utilisé une fonctionnalité qui n’a rien à voir : pouvoir visualiser la position de son curseur en appuyant sur la touche CTRL.

Cette fonctionnalité n’était pas activée sur ma Debian, et les paramètres accessibles via l’interface graphique du menu de Gnome3 ne permettent pas d’activer cette fonctionnalité. Néanmoins, on peut le faire en utilisant dconf-editor ou via la ligne de commande et gsettings. La clé à utiliser est org.gnome.settings-daemon.peripherals.mouse locate-pointer. La commande magique pour activer cette fonctionnalité en utilisant gsettings est :

gsettings set org.gnome.settings-daemon.peripherals.mouse locate-pointer true

et pour la désactiver (vous aviez deviné) :

gsettings set org.gnome.settings-daemon.peripherals.mouse locate-pointer false

Et voici l’effet que ça donne à chaque fois qu’on appuie sur la touche CTRL (avec une belle animation non représentée ici) :

 

Lors de l’enregistrement de la vidéo, avant chaque clic de la souris il faut appuyer sur CTRL pour ajouter l’animation. C’est pas forcément pratique, mais l’effet est sympa, voici ce que ça donne dans une version brouillon de la vidéo de promotion :

http://youtu.be/P_XXSjidezQ?t=43s

Notez que cette vidéo n’a pas été retenue suite à une discussion avec mes testeurs, ils ont trouvé ça beaucoup trop long, pas assez punchy (sauf le début) et trop orienté « tutoriel » plutôt que teasing. J’ai donc charcuté +50 % de la vidéo (soit 1 semaine complète de travail à la « poubelle » même si j’ai beaucoup appris sur Kdenlive en faisant ça) pour arriver au résultat final ci-dessous.

Résultat

Ma vidéo promotionnelle finale donne ceci :

C’est punchy, très court, et ça donne envie d’en savoir plus et de télécharger l’application, tout ce qu’il faut selon moi !

Pour info la timeline Kdenlive de cette vidéo ressemble à ça :

Musique

Je vous conseille vivement de choisir la musique avant de faire la vidéo ! En effet c’est elle qui va rythmer la vidéo. Calez les changements d’images et de rythmes sur le son. Étant un grand fan de cinéma et ayant déjà vu beaucoup de bandes annonces ça me paraît naturel, mais je préfère le mentionner !

Pour trouver des musiques c’est très simple, Youtube propose énormément de musiques dans son outil d’édition vidéo, il y a du choix, c’est classé par style de musique, le top :

Si vous avez besoin d’éditer le son comme j’ai eu à le faire, il existe un très bon outil qui s’appelle Audacity.

Autre façon de capturer la vidéo

Si votre appareil est équipé d’Android 4.4 KitKat ou version ultérieure, utilisez la commande suivante pour enregistrer une vidéo directement depuis votre mobile :

adb shell screenrecord

Je n’ai pas pu le faire car je n’ai pas de téléphone avec KitKat mais ça peut être intéressant. Après l’inconvénient c’est qu’on perd (je suppose) le curseur coloré que je trouve sympa sur la vidéo ;-).

Conclusion

Faire une vidéo demande énormément de temps, d’énergie et d’investissement mais je pense que c’est indispensable si on veut sortir du lot sur le Play Store et passer à un niveau de notoriété professionnelle.

Notez aussi que j’ai pris le temps d’internationaliser les vidéos de promotions. Ce qui veut dire que la vidéo pour la fiche Play Store anglaise a été traduite en anglais, et j’ai aussi refais toutes les captures vidéos avec l’application en anglais ! En tout ça m’a bien pris 2 semaines et demie de travail pour réussir à faire les 2 vidéos que je voulais, sachant que je ne connaissais rien à l’édition vidéo ni Kdenlive.

N’hésitez pas à passer du temps sur la vidéo et à la peaufiner, c’est vraiment un élément important du Play Store et elle sera là longtemps donc elle mérite votre attention.

J’ajouterai que la perfection se cache dans les détails !