Rewind|Forward • Fonction d'animation
Qu'est-ce que c'est, à quoi ça sert ?
Et si l'on redéfinissait notre manière de partager notre expérience, grâce à des outils plus ergonomiques, performants, innovants et attractifs pour nos lecteurs ? Dans vos tutoriaux par exemple, plutôt que de lister une série d'images les unes sous les autres pour chaque étape d'un traitement photo, ne serait-il pas mieux de pouvoir les comparer superposées, rendant ainsi l'appréciation des plus subtils traitements évidente à l'utilisateur tout en améliorant son plaisir de lecture ? Rewind|Forward, fonction d'affichage/animation d'images, est ma réponse à ce problème de consultation « linéaire » des articles en ligne. J'ai développé cet outil pour permettre à mes lecteurs de pouvoir très rapidement et avec une grande efficacité, visualiser et animer manuellement une liste d'images. Particulièrement simple à utiliser, il suffit de placer le curseur de la souris au dessus d'une image et de balayer de gauche à droite (et inversement). La fonction s'active aussitôt, permettant ainsi, alors que l'on balade le curseur, d'afficher les images une à une. Cela me permet d'accompagner débutants et amateurs dans une logique d'apprentissage ouverte de la photographie, au même titre que ma précédente fonction Avant|Après. Si je n'ai jusqu'alors abordé que le domaine de la photographie, les nombreux exemples ci-après sauront illustrer à quel point la fonction est souple. Augmentez la valeur ajoutée de vos contenus en leur offrant une simple, mais véritable structure technique.
Atouts
  • Outil simple, efficace et ludique ;
  • Gratuit ;
  • Affichez/animez ce que bon vous semble ;
  • Parfait pour les tutoriaux et la formation ;
  • Pour tous, photographes, illustrateurs, infographistes 3D, web designers, etc. ;
  • Pour projets perso. ou commerciaux ;
  • Fini les images placées basiquement les unes sous les autres rendant toute comparaison impossible ;
  • Faites impression en utilisant un nouveau concept d'affichage Web ;
  • Multi plate-forme et prochainement pour iOS ! ;
  • Noms de class préfixés pour réduire/éliminer les risques de conflits avec d'autres fonctions.
Comme précédemment, je donne accès gratuitement au code source de cet outil afin que davantage de personnes désireuses de partager leur travail selon ce principe, puissent aisément le faire.

Licence

Licence Creative Commons
« Rewind|Forward • Fonction d'animation » de Édouard Puginier est mis à disposition selon les termes de la licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.
Les autorisations au-delà du champ de cette licence peuvent être obtenues à http://tazintosh.com/contact/.
Démonstrations et idées

La fonction Rewind|Forward offre un large panel d'utilisations. Que vous soyez photographe, illustrateur, infographiste 3D, web designer, formateur, etc., elle saura vous aider à mettre en valeur vos propres créations, formations ou tutoriaux ; sans jamais perdre de vue l'efficacité et la simplicité pour l'utilisateur. Les exemples ci-dessous seront je l'espère suffisamment variés pour pleinement apprécier le champ d'application offert. Noter qu'afin d'illustrer les étapes d'installation décrites à la suite de cet article, le code source de chaque démonstration est disponible juste au dessous de chacune d'entres elles.

Little Metal Plane - frame#01Little Metal Plane - frame#02Little Metal Plane - frame#03Little Metal Plane - frame#04Little Metal Plane - frame#05Little Metal Plane - frame#06Little Metal Plane - frame#07Little Metal Plane - frame#08Little Metal Plane - frame#09Little Metal Plane - frame#10Little Metal Plane - frame#11Little Metal Plane - frame#12Little Metal Plane - frame#13Little Metal Plane - frame#14Little Metal Plane - frame#15Little Metal Plane - frame#16Little Metal Plane - frame#17Little Metal Plane - frame#18Little Metal Plane - frame#19Little Metal Plane - frame#20Little Metal Plane - frame#21Little Metal Plane - frame#22Little Metal Plane - frame#23Little Metal Plane - frame#24Little Metal Plane - frame#25Little Metal Plane - frame#26Little Metal Plane - frame#27Little Metal Plane - frame#28Little Metal Plane - frame#29Little Metal Plane - frame#30Little Metal Plane - frame31

Voir le code

Sketch - frame#01Sketch - frame#02Sketch - frame#03Sketch - frame#04Sketch - frame#05Sketch - frame#06Sketch - frame#07Sketch - frame#08Sketch - frame#09Sketch - frame#10Sketch - frame#11Sketch - frame#12

Voir le code

Merci Clémentine !

Un remerciement tout particulier à
Clémentine Martinez, illustratrice,
pour cette création originale.

Photo originale (RAW)RecadrageBalance des blancsExposition +0,5evAjustement des bleusMise en valeur des teintes chaudesExposition du cielExposition de l'avion, résultat final

Voir le code

Impact d'une vague ≈ 30m de haut #1Impact d'une vague ≈ 30m de haut #2Impact d'une vague ≈ 30m de haut #3Impact d'une vague ≈ 30m de haut #4Impact d'une vague ≈ 30m de haut #5Impact d'une vague ≈ 30m de haut #6

Voir le code

Fichier de base transparentRendu 3D - Passe RGBRendu 3D - Passe masque d'objetMasque d'objet appliqué en canal alphaPhoto d'arrière-planCompositing Arrière-plan/VoitureRendu 3D - Passe d'ombreCompositing Arrière-plan/OmbreRésultat final

Voir le code

Photo d'origine - Fort de JouxAjout - SolAjout - Relief et rempartsAjout - Ville et relief d'arrière-planAjout - CielAjout - Lion de BelfortAjustement - Teintes/luminosité d'arrière-planAjustement - Teinte remparts
Bon, on fait avec ce qu'on a hein, je n'ai pas fait de matte painting depuis 2005 !

Voir le code

IMG_7200IMG_7201IMG_7202IMG_7203IMG_7204IMG_7205IMG_7206IMG_7207IMG_7208IMG_7209IMG_7210IMG_7211IMG_7212IMG_7213IMG_7214IMG_7215IMG_7216IMG_7217IMG_7218IMG_7219IMG_7220IMG_7221IMG_7222IMG_7223IMG_7224IMG_7225

Voir le code

Mise au point : troncMise au point : têteMise au point : transition tête/dos #1Mise au point : transition tête/dos #2Mise au point : transition tête/dos #3Mise au point : transition tête/dos #4Mise au point : dosMise au point : ailesRésultat de l'empilement

Voir le code

Traversée de kangourou…… d'avionVoie ferrée #1Voie ferrée #2Zone inondable #1Zone inondable #2Prudence dépassementDanger incendiePrésence de grues brolga

Voir le code

F-16C Fighting Falcon - Image bruteF-16C Fighting Falcon - Image traitée

Voir le code

Installation en trois étapes
L'outil se décompose comme suit : le code HTML basiquement constitué des images à animer, incluses dans un conteneur ; une feuille de style CSS ; le code javascript pour gérer l'interaction utilisateur.

Historique des versions

Version 1.0 - 20-06-2012
Mise à disposition initiale de la fonction d'animation Rewind|Forward.
Ils l'utilisent déjà !
Si vous aussi utilisez cet outil, faites-le moi savoir et je mettrai à jour cette liste avec votre nom, site web et Twitter.

Participer

Vous souhaitez une option ?
Utilisez le formulaire ci-contre ou postez un commentaire au bas de cet article pour me soumettre vos idées/besoins de nouvelles options. Si vous postez un commentaire, les utilisateurs pourront voter pour votre idée grâce aux symboles + et - associés.
Aussi, si vous apportez des modifications à ce code, merci de les partager en postant un commentaire expliquant le travail réalisé, ou en m'envoyant un e-mail.
What else?

Ce café symbolique serait un véritable témoignage de votre part sur l'appréciation de ce travail.

Participez

Déposer un fichier ici ou cliquer pour télécharger Choisir un fichier
Taille de téléchargement maximum : 268.44Mo