Sommaire
Bonjour,
Je viens faire un peu la publicité d'un projet multimédia de courte durée sur lequel j'ai travaillé. Il s'agit d'une participation au concours Firefox Flicks. Le principe est simple: faire une vidéo promotionnelle pour la fondation Mozilla. Les gagnants sont répartis par région (étant basé au Japon en ce moment, nous sommes en région Asie, Afrique, Australie. Oui c'est une région large. uhuh). Et il y a quatre catégories : animation, vidéo de moins de 30 sec, message d’intérêt public et nouvelles technologies.
Notre Participation
Nous étions 2, une animatrice et moi. Nous avons participé dans 2 catégories : animation et nouvelles technologies. Les deux utilisent quasiment la même vidéo, à une différence près: sur la fin, des utilisateurs fictifs en image sont affichés sur une carte du monde et ont été retirés. À la place, la version "nouvelle technologie" est HTML-augmentée en affichant des photos que les visiteurs peuvent uploader et la carte est affichée un peu plus longtemps. Le but étant d'avoir un maximum de photos pour faire vraiment effet.
- Voici la vidéo dans la catégorie "animation" : http://download.tuxfamily.org/girinflick12/firefox01.mov [50 Mo] /o\ (aussi disponible aux formats webm ou ogg/theora directement lisibles dans Firefox, [5 Mo])
- Voici la vidéo modifiée et intégrée dans une page web pour la nouvelle technologie: http://girinflick12.tuxfamily.org/
Bien sûr, j’apprécierai si vous uploadez une photo et votre localisation (mais n'en tiens pas rigueur si vous ne le faites pas). :-)
Simplement ne mettez pas n'importe quoi, sinon ça ne sert à rien (j'ai déjà retiré 2 images par quelqu'un qui apparemment aime bien Bart Simpson).
Licence
C'est une question qui viendra, et à juste titre. Donc : la vidéo est du CC-by-sa/Art Libre.
Note : le concours imposait du CC-by-sa-nc, mais j'ai demandé au contact Mozilla du concours si on pouvait être plus laxiste en jartant le NC et ils ont dit qu'on pouvait. J'imagine que le but est de ne pas effrayer les artistes (?).
La "musique" (si on peut dire cela pour les quelques notes jouées pendant le film) est aussi CC-by-sa/Art Libre, puisque c'est moi qui l'ai improvisée/jouée.
Les sons divers sont soit CC-sampling, soit CC-by soit Domaine Public (tous trouvés sur freesound.org). Les détails sur les auteurs et licence de chaque son utilisé sont sur la page donnée en lien plus haut.
Le code est AGPL v3.
Animation
Tristement, ce n'est pas un travail tout à fait fini (du moins pas comme on l'aimerait). Malheureusement, nous n'avons pas eu beaucoup de temps. Bien que le concours fût annoncé assez tôt, nous n'avons pu commencer que 2 semaines avant. Dans ce court laps de temps, nous avons donc discuté les concepts à aborder, écrit et comparé divers scénarios, écrit un storyboard, tout dessiné, puis édité, et enfin nous avons fait les sons.
Pour tout dire, on était tellement en retard sur la fin que j'ai enregistré toutes les voix en environ 2h sans rien traiter derrière. C'est pour cela que le son est si médiocre et qu'il y a tant de souffle. On en n'est pas très fier, mais c’était ça ou ne rien rendre de nos 2 semaines de travail car en retard sur la deadline. Espérons juste que cela ne pénalise pas trop, surtout que si on gagne, on compte améliorer la vidéo et le son. En effet, dans l'animation aussi, il y a plein de détails qu'on a laissé de côté, des choses qu'on aurait voulu retoucher après coup, et même une scène qu'on a laissé tomber : je voulais finir la vidéo par une sorte de "batsignal" (un foxsignal ?) qui utilise le logo Firefox et balaye le ciel pour s’arrêter sur la lune.
Nouvelles Technologies
Il semble que la plupart des autres participants de cette catégorie n'aient pas compris en quoi elle consistait, ou alors c'est moi qui n'aie vraiment rien compris mais la description "Meilleure utilisation de nouvelles technologies ouvertes (par exemple Popcorn.js, HTML5)" ne semble pas indiquer que faire du stopmotion en prenant des photos avec un smartphone rentre dans la désignation.
Quoi qu'il en soit, j'ai fait ce que — je crois — était attendu avec du HTML et du javascript, même si là encore, le temps a manqué (j'ai codé pendant seulement 2 journées sur la fin pendant un week-end et ma TODO list est encore longue). Voici la liste des technologies utilisées:
- OpenStreetMap (OSM) que nous utilisons principalement avec l'API Nominatim soit parce qu'on a des coordonnées pour lesquelles on souhaite obtenir un nom "humain", soit à l'inverse parce que l'utilisateur a donné une adresse et on souhaite trouver des coordonnées.
- OpenLayers, une API javascript sous licence BSD qui permet d'afficher des cartes svg (utilisant les données OSM).
- Géolocalisation.
- L’élément HTML
video, notamment en réagissant à divers évènements (pour dire, c'est pas juste "y a un tag video", mais aussi un traitement spécifique fait dessus en js). - Du SVG pour les boutons de contrôle de la vidéo et l’élément HTML
canvas.
Techniquement cela se passe en 2 étapes:
Étape 1 (optionnelle) : interaction avec le visiteur
L'utilisateur uploade sa photo. Du PHP classique opère a ce moment pour
- récupérer le fichier uploadé,
- en vérifier le format pour sécurité (pas seulement avec l'extension, mais avec détection de format), la taille,
- puis la redimensionner en 2 tailles si besoin (en général, il y a besoin car les gens ont tendance à envoyer de grosses photos et dans ce cas, je veux pouvoir charger très vite des dizaines de photos).
Dans le même temps, l'utilisateur aura aussi indiqué sa position dans le monde,
- soit par géolocalisation (elle ne fonctionne pas tout le temps, ça dépend un peu du beau temps, des étoiles et des papillons qui volent dans mon expérience perso),
- soit en cliquant sur la carte (et dans ce cas, une requête "reverse" est faite sur OSM Nominatim pour obtenir un nom de lieu),
- soit en indiquant un nom de lieu (et les coordonnées sont trouvées par une requête "search" sur OSM Nominatim.
Étape 2 : visionnage
Sur la fin, quand on regarde la vidéo, les photos des diverses personnes apparaissent dans la vidéo même (en apparence).
Pour opérer ce miracle, comme à ma connaissance, on ne peut pas dessiner directement dans une vidéo en HTML, la vraie vidéo est en fait cachée, ce pourquoi à la place des habituels et pratiques contrôles et barre d'avancement de la vidéo, il y a 3 pauvres boutons, lecture/pause et avance/recule (5 secondes). Je n'ai pas eu le temps de faire de meilleurs contrôles ou de chercher/utiliser une bibliothèque.
Je disais donc que la vraie video est cachée et il y a un canvas vierge (qui a juste un background, ce qui permet de montrer un "aperçu" au début). Puis, quand la vidéo démarre, je la copie juste frame par frame dans le canvas.
Enfin, quand le moment fatidique arrive (déterminé par l’événement timeupdate) où on doit insérer du contenu dans la vidéo, je dessine les photos (que j'aurai prechargées au préalable dès le chargement de la page) au bon endroit sur la carte du monde dans le canvas (avec un calcul simple pour transformer des coordonnées latitude/longitude en pixel équivalent).
Le code est disponible ici, si vous souhaitez le regarder : http://git.tuxfamily.org/?p=girinflick12/girinflick12.git;a=tree
Ce n'est pas destiné à devenir une sorte de projet à long terme bien sûr, mais j'imagine que c'est toujours un proof of concept sympathique et peut intéresser d'autres personnes. :-)
Y a pas mal de choses que j'aurais voulu faire mieux. Notamment, avoir un passage de la grosse à la petite photo plus fluide en interposant des tailles intermédiaires. Aussi, je veux pousser beaucoup plus de code (tout ce qui est traitement des coordonnées par exemple, mais pas seulement) côté serveur, pour alléger la machine cliente qui pourrait faire beaucoup moins de calcul, etc.
Enfin voilà. J’espère que la vidéo et le petit site vous ont plu.
Et n’hésitez pas à uploader photo/localisation !
# Merci !
Posté par ymorin . Évalué à 4.
Bon, comment dire …
D´abord, j´aime bien le concept ! C´est drôle, avec quelques petits clins d´œils (eg. AYB), le dessin est joli, peu de fioritures. J´aime bien !
Cependant, comme tu le dis toi-même, il y a un arrière-goût de "pas fini". Par exemple, le son est médiocre : trop de souffle lors des paroles ou bruitages, mais silence absolu sinon. Ça fait un peu bizarre …
Sur ma machine, qui pourtant envoie du gros (i7 @ 3.2GHz), la fin de l´animation avec les photos fait un peu saccadée. Pourquoi ne pas avoir utilisé un canvas pour redimensionner les images, c´eût été un peu plus fluide. Mais bon, j´y connais que-pouic en HTML, alors …
Et il y a quelques longueurs. La séquence du lapinou dure un peu trop longtemps à mon goût.
Ceci dit, les défauts font souvent plus impression que les réussites, et dans l´ensemble, j´ai vraiment bien aimé …
Voilà, c´est fait ! C´est rare que je mette ma bouille en ligne ; comme quoi, votre travail à tous les deux m´a bien plu !
Bonne chance pour le concours !
Hop,
Moi.
[^] # Re: Merci !
Posté par Jehan (site web personnel, Mastodon) . Évalué à 2.
Salut,
pour la fluidité, c'est juste que "l'animation" des photos au stade actuel se limite à la montrer une fois en "grand" au milieu, puis en "petit" dans sa région du monde respective.
Il n'y a pas d’intermédiaire, simplement parce que je n'ai pas eu le temps de le coder.
Ensuite y a aussi le fait qu'il est possible que sur une petite machine, cela fasse beaucoup de js à ce moment là (mais si tu dis que tu as une bonne machine, dans ton cas, ce n'est surement pas cela). C'est pour cela que j'aimerais pousser du calcul cote serveur dans une future version.
Et oui ajouter cette fluidité n'est pas "compliqué", mais cela prend un peu de temps a mettre en place. En gros, j'ai un temps limite et fixe (que je connais) dans la vidéo pour lequel je vais afficher mes photos. À partir de là, j'ai un nombre dynamique de photos (il augmente au cours du temps, je ne le connais pas au moment de coder). Donc à chaque chargement de page, je calcule tous les combien de millisecondes je vais afficher une nouvelle photo pour toutes les afficher à temps. Ça, c'est la version simple que j'ai d'abord faite.
Il ne faut pas oublier que je dois afficher les photos que j'ai déjà affichées précédemment (je garde donc un état).
Puis ce que je fais maintenant, c'est juste diviser ce laps de temps par 2, et j'ajoute une photo en grand, puis en petit. C'est la version actuelle.
Pour rendre cela vraiment fluide, je dois encore subdiviser ce temps (et le plus, je subdivise, le plus cela aura l'air fluide) pour ajouter des tailles intermédiaires. En outre, cette fois, je ne pense pas que subdiviser parfaitement rendra bien. La grande taille et petite taille doivent tout de même rester un peu plus longtemps (à tester).
Enfin voila l’idée.
Aussi ne pas oublier qu'on parle de vidéo. C'est a dire que je dois redessiner a chaque frame en gros, même si les photos n'ont pas changé de position. C'est aussi à prendre en compte.
Sinon merci pour les commentaires (et les critiques).
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
# bravo
Posté par BAud (site web personnel) . Évalué à 4. Dernière modification le 07 mai 2012 à 02:32.
sympa la vidéo, effectivement le lien avec Batman se fait naturellement, avec un personnage moins noir vu que c'est un renard roux :-)
Pourquoi avoir mis un lien vers un .mov illisible dans Firefox alors que si on regarde http://download.tuxfamily.org/girinflick12/ vous avez fait l'effort de produire :
d'autant que ces deux formats montrent bien leur supériorité :
Tu pourrais rajouter sur ton site web les notes de ce journal concernant la réalisation, c'est toujours intéressant d'avoir un retour d'expérience de ce genre (le making-of en bref).
Note : sympa les stats http://stats.download.tuxfamily.org/girinflick12/ montrant 66% de Linux à ce jour :-) (et 56% de firefox)
[^] # Re: bravo
Posté par BAud (site web personnel) . Évalué à 3. Dernière modification le 07 mai 2012 à 03:12.
bon, parce que ton projet m'a bien plu, je me suis permis d'éditer ton journal pour ajouter les liens proposés dans mon commentaire et corriger aussi quelques coquilles (des accents principalement et quelques conjugaisons).
En revanche, je ne trouve pas la page vous concernant sur :
c'est normal ?
[^] # Re: bravo
Posté par Jehan (site web personnel, Mastodon) . Évalué à 2.
Salut,
merci pour les corrections. Faut que je pense à reconfigurer une touche compose pour pouvoir enfin écrire a nouveau du français correct.
Sinon oui on n'est pas dans la liste malheureusement, même si on est dans le concours, parce qu'on a eu un problème technique. On a contacté le représentant du concours. Nos participations devraient être uploadées (espérons rapidement) sur le site par un admin. Mais il m'a assuré que les juges ont reçu/recevront ma vidéo également.
Aussi comme quelqu'un a fait remarquer, le titre du journal dit "Clicks". C'est une typo. Cela pourrait-il être corrigé ("Flicks").
Merci encore pour l'edit.
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
[^] # Re: bravo
Posté par Jehan (site web personnel, Mastodon) . Évalué à 1.
Pour info, ils ont finalement uploadé notre vidéo (dans la catégorie "animation" seulement pour l'instant, j’espère qu'ils oublieront pas l'autre soumission): https://firefoxflicks.mozilla.org/fr/video/588
Je pense pas que ça change grand chose ou que ça importe (parce que la décision finale est faite par les juges, pas le public), mais n’hésitez pas à voter sur le site de Mozilla pour flatter notre ego si vous le souhaitez. :-)
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
[^] # Mensonges
Posté par Zenitram (site web personnel) . Évalué à 2.
Je peux te faire un mov (h264) de 1 Mo et un WebM de de 500 Mo en ayant la même qualité (technique!) bof.
Dire que parce qu'un mec a fait un fichier de qualité (technique) merdique de chez merdique (genre en mettant du PCM pas du tout compressé, à 1 Mbps, pour l'audio), l'autre format est meilleur, c'est juste mentir (je n'arrive pas à imaginer que tu ne le sais pas, on en a déjà parlé, surtout pour Theora c'et à mourir de rire). Tiens je vais dire que j'ai testé LFS, que ça a mis 10 jours à s'installer, et que donc Linux c'est lent…
Ca ne grandit pas les Linuxiens de montrer aussi peu de subjectivité, ça vous rend plutôt ridicules même, alors pour aider le libre : arrêtez de mentir! Non, WebM ne montre pas sa supériorité :
- Je peux voir H264 dans mon navigateur (c'est ton navigateur qui n'a pas envie de demander au backend Linux de décoder, plaint-toi à Mozilla et ce n'est pas une question de licence, il peut demander à l'OS)
- La taille est un problème de la personne qui a encodé comme un manche.
Ton WebM, il est supérieur pour toi car tu peux le voir dans ton Firefox tout en étant inférieur pour d'autres qui ne peuvent pas lire du WebM, et il n'est pas sujet à paiement, c'est un bon point. WebM a des qualités, mais nullement ce que tu racontes (taille et capacité à être lu, le MOV gagnerai haut la main si bien fait).
C'est d'ailleurs rigolo : tu donnes des formats illisibles par d'autres navigateurs, surtout le navigateur le plus "concurrent" de Firefox, pour inciter les gens à installer Firefox. Euh… Dommage, tu milites pour un format que la cible de la vidéo ne peut pas lire, il y a un petit loupé. "Eh les gars, je voudrai vous faire passer à Linux, je vous donne l'argumentation de pourquoi passer à Linux uniquement si vous êtes déjà sous Linux", très intelligent de cibler les déjà convaincus et de ne pas parler à ceux à convaincre.
Est-ce qu'un jour vous arriverez à avoir un peu d'objectivité ou est-ce que vous continuerez à jamais à mentir pour arriver à vos fins? Vous croyez que vous valez mieux que "les autres" en faisant ça? Ca serait bien d'avoir un peu d'esprit critique même quand vous parlez de votre "format préféré". On croirai presque que niquer l'adversaire est pour vous plus important qu'être intègre… On s'en fou des moyens, tant qu'on nique l'autre, l'éthique c'est trop chiant. Si vous pensez aider le libre, vous vous trompez, c'est le genre de chose qui fait passer les libristes pour des intégristes stupides, et c'est ensuite difficilement rattrapable dans une discussion avec des gens non convaincus.
Ben non, ça montre que 56% des gens sont la pour rien (ils sont déjà convaincus) et que seuls la moitiés des visiteurs sont intéressants.
P.S. : titre du journal, remplacer "Firefox Clicks" par "Firefox Flicks"?
[^] # Re: Mensonges
Posté par claudex . Évalué à 3.
Sauf qu'on parle d'une animation promotionnelle de Mozilla Firefox. Il faut garder de la cohérence aussi.
« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
[^] # Re: Mensonges
Posté par BAud (site web personnel) . Évalué à 0.
c'est bien que tu reconnaisses l'objectivité de mes boutades :-)
ou que plein de gens ont installé Firefox rien que pour voir la vidéo :D
Ce qui est encore plus visible sur les stats du site web : plus de 92% de Firefox http://stats.tuxfamily.org/girinflick12.tuxfamily.org/
On leur fait dire ce qu'on veut aux stats, hein ;-) On pourrait faire un sondage « pour visualiser l'animation avez-vous spécifiquement installé Mozilla Firefox ? » (et on leur fait dire aussi ce qu'on veut aux sondages…).
[^] # Re: bravo
Posté par Jehan (site web personnel, Mastodon) . Évalué à 5. Dernière modification le 07 mai 2012 à 09:36.
Salut,
sans être aussi virulent que Zenitram, il a raison sur ce coup. Les versions ogg/theora et webm, je les ai converties à partir de la version .mov parce que c'est "l'original" que l'animatrice a générée (a priori elle ne savait pas comment générer ni du webm ni du ogv dans ses logiciels). Aussi le mov est 1280x720 alors que webm et ogv sont en 640x360.
Donc ce n'est pas comparable et comparer les tailles de fichier ici n'a pas de sens.
Note que je n'ai pas essayé de faire des conversions haute résolution en webm/ogv, uniquement parce que je pense toujours aux petites machines d'abord et que je les ai converties rapidement pour regarder sur le net. Mais je peux faire des ogv/webm haute résolution si j'ai des demandes (bon a priori déjà une avec toi).
Sinon je comprends bien ta remarque et ton étonnement, et si j'ai généré des ogv/webm, c'est parce que j’étais bien conscient qu'il fallait cela pour apparaitre dans le navigateur Firefox correctement.
Et dans le cas présent, j'ai préféré donner la version originale (tout en sachant qu'on est sur linuxfr pourtant) parce que… ben c'est de meilleure qualité. Y a pas mal d'artefacts et des détails qu'on ne voit pas dans les versions en plus faible résolution.
Et oui, je pensais aussi rajouter le "making-of" quand j'aurais un peu de temps. :-)
Merci.
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
[^] # Re: bravo
Posté par Zenitram (site web personnel) . Évalué à 4.
Merci :)
Vu que le fichier est été créé à partir d'un logiciel Apple (les metadatas l'ont trahie ;-) ), je pense que ça serait dur de trouver une telle option!
Je te conseille de faire aussi une version MOV/H264/AAC moins lourde (sans pour autant baisser la résolution), pour que la cible (ceux ayant IE, Safari… Au pire avec un Embed Flash) puisse lire le fichier aussi sans péter leur connexion Internet avec du PCM. Les logiciels libres n'étant pas intégristes, c'est possible avec du libre.
# Très chouette !
Posté par psychoslave__ (site web personnel) . Évalué à 5.
Bravo ! Et merci aussi pour le choix des licences ! Tout ça en fait en fantastique projet libre, vraiment, bravo. :)
Tu aurais aussi des détails sur les outils utilisés pour l’animation ? Si c’est du libre, c’est très bien, sinon ce serait intéressant de voir ce qui manque en outillage libre.
# Workflow
Posté par JGO . Évalué à 3.
Tu ne parles pas de la technique de l'animation. Quel est votre workflow (libre) ? Il y a quelque chose à voir avec Project Morevna (qui utilise Synfig) ? Ou alors vous utilisez quelque chose de plus traditionnel comme Pencil ?
[^] # Re: Workflow
Posté par Jehan (site web personnel, Mastodon) . Évalué à 5.
Salut,
je vais répondre en même temps à Psychoslave et à toi.
Donc déjà désolé, les logiciels d'animation ne sont pas du tout Libres. :-/ L'animatrice utilise en gros les logiciels de la suite Adobe (et non pas Apple contrairement à ce qu'indique Zenitram): Photoshop, After Effects et Premiere.
La raison est simple. Elle a appris comme cela dans ses études (en Corée, mais je doute que ce soit grandement différent en France) et déjà qu'on n'avait pas le temps comme ça, je l'avais encore moins de lui apprendre autre chose (surtout que j'y connais rien. Mon utilisation de Gimp consiste principalement a redimensionner et couper des images).
Si on fait d'autres projets, j'aimerais qu'on essaye ensemble de regarder les logiciels Libres et voir ce qu'elle en pense avec un esprit ouvert. J'ai déjà commencé a regarder les logiciels libres d’édition et de rendu, et à les lister sur un bout de fichier, mais je n'ai aucune idée de ce que cela donne en vrai tant que je ne les aurai pas essayés avec elle.
Par conséquent, je ne peux pas répondre sur ce qui manque ou quel peut être le processus de création d'animation en tout libre. Mais cela me plairait bien de le savoir aussi et de faire un projet animation 2D en tout libre (pour 3D, je crois que Blender a fait ses preuves plus d'une fois).
Pour ce qui est du son par contre, j'ai l'impression qu'on a des trucs pas trop mal. Mais là encore, je ne suis pas ingénieur du son non plus. Audacity n'a pas une belle interface et a l'air parfois un peu amateur dans son UI même, mais je crois tout de même comprendre qu'il est assez puissant pour manipuler du son.
Ardour quant à lui fait vraiment impressionnant et professionnel dans son UI. Je me demande à quel point c'est vrai, et j'aimerais vraiment avoir l'avis d’ingénieurs professionnels qui connaissent bien les logiciels proprios habituels (Protools surtout de ce que j'ai vu dans les ingés son que j'ai connu).
Finalement pour revenir à l'image, un truc qui m’intéresse, c'est aussi de connaitre les possibilités de cluster de rendu. Faire un rendu de bonne qualité prend du temps fou (même si c'est juste de la 2D, 3D, c'est pire je crois). Et ce qui est intéressant, ce serait de savoir comment partager le travail entre plusieurs serveurs dédiés, comme savent le faire les logiciels proprios. On n'avait pas ça mais l'ordi tout pourri de l'animatrice. Mais dans l’idéal, si on continue, j'aimerais bien connaitre les possibilités de ce genre de cluster de rendu sous Linux (et utilisant des logiciels Libres) pour aller plus loin.
Enfin bon tout ça pour dire que j'en sais pas grand chose, mais que c'est aussi quelque chose qui m’intéresse personnellement.
C'est pour cela que je n'en ai pas parlé dans la news.
Si vous avez des informations, n’hésitez pas à partager. J'en ferai de même si j'explore les alternatives libres avec mon animatrice.
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.