Introduction
Mon souhait au travers ce projet serait de rendre une vidéo interactive. J’aimerais rendre une vidéo interactive, soit adapter le système du « Livre dont on est le héros » mais en vidéo. Le but ici serait de reconfigurer le réseau de relation dans lequel le dispositif de design est mis en œuvre, selon un nouveau milieu technique. Pour ce faire, plusieurs points seront à aborder tels que l’interactivité, la vidéo, quelques notions de la philosophie des jeux vidéo ainsi que la narration interactive. Il serait aussi intéressant d’étudier le dispositif hybride qu’est la vidéo interactive. Les termes abordés sont définis dans le glossaire. Tout d’abord, une vidéo interactive est un type de vidéo numérique qui prend en charge l’interaction de l’utilisateur. Ces vidéos se comportent comme des fichiers vidéo, mais comprennent des zones cliquables, qui effectuent une action lorsque l’on clique sur elles, elles sont très proches des jeux vidéo. Ce nouveau dispositif technique ouvre le champ d’application du graphiste, il lui permet de se pencher sur de nouveaux domaines. Ainsi, on pourrait se demander comment le numérique et l’interactivité peuvent étendre l’univers du design graphique ?
1 / Du design graphique à la question de l’interactivité
La vidéo est une nouvelle forme de graphisme. L’interactivité dans la vidéo est une certaine manière de traiter l’image. On rend ces images interactives, ce qui peut être un service rendu au cœur du graphisme. C’est du graphisme en mouvement. Ce qui devient une nouvelle manière de travailler l’image et ouvre de ce fait le champ d’application du graphiste. Le façonnage, l’imposition, la conception globale du livre devient alors le montage vidéo. Cette partie sera approfondie dans la synthèse.
L’interactivité se développant, et touchant divers domaines, il serait intéressant de se demander comment la vidéo et interactivité se rencontrent ? Tout d’abord, la vidéo interactive est une rencontre entre l’univers de la vidéo et l’univers du jeu. Le jeu vidéo pourrait se définir comme étant du cinéma, avec quelque chose en plus, tel que de l’interactivité ou de l’immersion. Le jeu vidéo est-il simplement du cinéma, l’interactivité en plus ? À moins que l’interactivité n’exige en réalité un tout autre type de discours à l’écran que celui du cinéma ? Un des aspects de la vidéo interactive serait une transformation du « livre dont on est le héros » en vidéo. Il y a ici la place du héros, d’un usager. Comment ce personnage prend le contrôle de l’histoire ? La narration est aussi un élément primordial de ces vidéos interactives. Quelle théorie peut-on ressortir de la notion de narration interactive ? Les jeux vidéo ont donné naissance à un nouveau type de spectateur, à la fois observateur et acteur. Certains voudraient voir dans les jeux la forme achevée du cinéma : un cinéma que l’on ne regarde plus simplement de l’extérieur en spectateur passif, mais un cinéma interactif auquel on participe de l’intérieur, à travers les actes de son avatar. Ma fiche de lecture sur le livre de Marida Di Crosta, Entre cinéma et jeux vidéo : l’interface-film, éditions INA, 2009, pourrait éclairer ces propos.
Cependant, il semblerait que l’interactivité soit liée au numérique. Mais qu’est-ce que l’interactivité ? Dans le passé, étions-nous sans interactivité ? On pourrait ainsi se demander si l’interactivité suppose le numérique ? N’existerait-il pas des formes d’interactivité bien avant le numérique ? De ce fait, il faudra se questionner sur le rapport actif et passif. Qu’est-ce que c’est que d’être actif ? On pourra se demander quelles sont les différentes formes d’interactivité qu’il peut exister. Ces questions seront notamment abordées dans ma fiche d’ATC.
2 / L’actualité de la question
Aujourd’hui, nous ne sommes plus de simples spectateurs face à l’œuvre, nous en sommes utilisateurs. Nous faisons partie intégrante du dispositif. Avant le public regardait l’œuvre, maintenant le public se situe dans l’œuvre, il en est l’acteur, le public fait l’œuvre. La place du public et de l’œuvre change. Nous sommes « spectacteurs ». Le fait de rendre une vidéo interactive donnerait à l’utilisateur la possibilité d’être face à des choix multiples. C’est l’utilisateur qui va faire évoluer le scénario, il sera aux commandes de la vidéo, tel un metteur en scène, un réalisateur ou encore un scénariste. Ces dispositifs techniques se multiplient de jour en jour.
De plus en plus d’établissement public, d’espaces culturels, tel que le FRAC, Museomix font des courtes vidéos pour faire connaître leurs évènements. Ils peuvent désormais facilement les diffuser via les réseaux sociaux ou directement sur leur site Web. Les rendre interactives seraient donc un plus pour ces lieux. Il y a une demande par ces établissements de nouveaux supports d’intervention. De ce fait, l’entretien avec Annabelle Arnaud du FRAC PACA pourrait approfondir ces propos.
Ainsi, mon macro projet tend à s’orienter vers des vidéos interactives créées pour des établissements culturels en tant que médiation culturelle. Les vidéos sont souvent utilisées comme making of. De ce fait, on pourrait par exemple proposer par le biais d’une vidéo interactive, de découvrir les coulisses d’une exposition et par conséquent voyager avant l’exposition, d’être présent lors du montage de celle-ci, de participer virtuellement au vernissage et de se déplacer dans l’exposition. Ce qui permettrait d’effectuer un archivage d’anciennes expositions.
Les techniques de réalisation de vidéos seront nécessaires. Je pourrais me rapprocher d’Éric Bernaud (Motion Designer) pour accroître mes connaissances. Les vidéos seront ensuite gérées sur les logiciels Premiere Pro et After Effects, l’interactivité sera créée grâce aux logiciels Flash ou Processing. Je vous renvoie ici à mon rapport de stage, qui m’a permis d’apprendre les techniques liées à la vidéo. Je pourrais ainsi rencontrer l’association Design the Future Now ou encore le Fab Lab de la Friche pour les questions d’interactivité.
Les vidéos interactives sont donc un nouveau support graphique intéressant par leur côté narratif et innovant. Pour le designer graphique, le fait de maîtriser ces différentes compétences lui permet de mettre en place une nouvelle forme de graphisme.
3 / Structure des projets
Les vidéos interactives se multiplient. On en retrouve dans différents milieux. Dans des espaces culturels avec par exemple le workshop Borély Hacking. Des vidéos immersives nous plongent à travers une autre réalité comme dans des scènes de la vie quotidienne des domestiques du Château Borély. On en retrouve dans des clips de musiques, dans lequel il est possible de choisir la suite du scénario. Ou encore dans des publicités comme par exemple la publicité pour les montres Casio Five minutes. Dans cette publicité l’utilisateur est aux commandes du scénario et doit interagir avec divers éléments. Il doit par exemple dessiner un rond à l’écran pour tourner la clé dans la porte. Ma fiche concernant la prise en main d’un dispositif technique témoigne de la réalisation d’une vidéo interactive au sein d’un établissement culturel.
Espace culturel :
Clip vidéo :
Publicité :
Web série :
1 / D’un média à l’autre
2 / Le film interactif
3 / Le rôle de l’interface
1 / L’Art aujourd’hui
2 / Une nouvelle forme d’échange
3 / L’interactivité au service de l’Art
C’est durant le projet OpenFrac#2, se déroulant au FRAC PACA, que j’ai rencontré Annabelle Arnaud. Pendant ce projet, nous sommes intervenus en tant qu’étudiants en DSAA option design graphique afin de travailler dans les murs du FRAC, pour mettre en place une médiation numérique autour de l’exposition « Histoires parallèles ». Je vais ici questionner Annabelle Arnaud sur les rapports qu’entretient aujourd’hui le FRAC avec son public.
1 / Quel est ton rôle au sein du FRAC PACA ?
2 / Quelle est l’utilité des objets de médiations présentés au public ?
3 / Pourquoi les FRAC s’intéressent-ils aujourd’hui à l’interactivité ?
4 / Que représente des évènements comme l’OpenFrac#2 pour le FRAC PACA ?
5 / Pourquoi faire appel à des graphistes pour mettre en place cette médiation ?
I - L’interactivité
II - Le jeu vidéo
III - Entre vidéo et jeux vidéo, un dispositif hybride
Test de vidéo interactive lors du projet OpenFrac#2
Projet avec l'artiste Olivier Rebufa pour le FRAC
Réalisation d'une valise pédagogique intitulé “Studio de poche” permettant de découvrir le travail d'Olivier Rebufa et contenant un kit qui permet de recréer une photo tel que le fait l'artiste. La valise contient :
Porte clé USB 3D
Porte clé USB 3D réalisé à l'aide de 123D Catch, Meshmixer et Blender. Le Fab Lab de La Charbonnerie va se charger de finaliser le fichier pour l'imprimer en 3D. La clé USB sera en forme de LEGO.
Jeu de 7 Familles
Nous avons sélectionné les photographies qui constituerons les 7 familles. Les 7 familles sont :
Recherches de mise en page. J'ai pensé réutiliser le code couleur des LEGO ainsi que le système de bloc/briques qui s'assemblent. Pourquoi pas proposer par l'intermédiaire d'un flashcode présent sur les cartes, de découvrir du contenu pédagogique supplémentaire.
Affiches pédagogiques
Recherche de mise en page. Affiche format A2, pliée en A5, reprenant le code couleur LEGO ainsi que le système de bloc/brique.
Vidéo interactive
J'ai essayé de programmer une vidéo interactive sur Processing. Contrairement à Flash, ce logiciel est Open Source. Or Processing possède ses limites, il n'est pas adapté pour programmer des vidéos aussi lourdes, le logiciel rame à force de rajouter des informations et des vidéos.
Code de la vidéo interactive sur Processing :
//importer librairie import processing.video.*; import ddf.minim.*; //déclaration des variables Movie movie1, movie1_1, movie1_2, movie1_3, movie1_4; PImage image1, image2, image3, image4; Minim minim; AudioPlayer song; //position + taille du bouton float x = 300; float y = 200; float w = 100; float h = 100; //état initial du bouton boolean etatBouton1 = false; boolean etatBouton2 = false; boolean etatBouton3 = false; boolean etatBouton4 = false; // position du bouton 1 float x_b1=300; float y_b1=450; float r_b1=50; // rayon bouton // position du bouton 2 float x_b2=600; float y_b2=450; float r_b2=50; // rayon bouton // position du bouton 3 float x_b3=600; float y_b3=550; float r_b3=50; // rayon bouton // position du bouton 4 float x_b4=800; float y_b4=550; float r_b4=50; // rayon bouton void setup(){ // son minim = new Minim(this); song = minim.loadFile("fantome_cmjn.mp3"); size(1440,816); //taille de la fenêtre background(0); stroke(0); noFill(); // Load and play the video in a loop //Vidéo 1 movie1 = new Movie(this, "1.m4v"); movie1.loop(); //Vidéo 1_1 movie1_1 = new Movie(this, "1_1.m4v"); movie1_1.loop(); //Vidéo 1_2 movie1_2 = new Movie(this, "1_2.m4v"); movie1_2.loop(); //Vidéo 1_3 movie1_3 = new Movie(this, "1_3.m4v"); movie1_3.loop(); //Vidéo 1_4 movie1_4 = new Movie(this, "1_4.m4v"); movie1_4.loop(); //Bouton interaction 1 image1 = loadImage("bouton_interaction.png"); //Bouton interaction 2 image2 = loadImage("bouton_interaction.png"); //Bouton interaction 3 image3 = loadImage("bouton_interaction.png"); //Bouton interaction 4 image4 = loadImage("bouton_interaction.png"); } //lire les movie void movieEvent(Movie m) { m.read(); } void draw(){ //Apparition de la vidéo 1 image(movie1, 0, 0, width, height); //SON if(millis() > 0){ song.play();} //Timer 1 if(millis() > 21000){ //Lancement après 4s image(image1, x_b1, y_b1, 2*r_b1, 2*r_b1); //zone de click sur le bouton : //x_b = position en x du bouton //y_b = position en y du bouton //2*r_b = diamètre du cercle (r = rayon) fill(255); //Action sur bouton1 if(etatBouton1){// si le bouton est pressé //println("The mouse is Clicked"); etatBouton1 = true; // mémorisation de l'état "appuyé" du bouton image(movie1_1,0,0,width,height); //apparition de la vidéo 1_1, sa position et sa taille //do stuff } } //Timer 2 if(millis() > 49500){ //Lancement après 4s image(image2, x_b2, y_b2, 2*r_b2, 2*r_b2); //zone de click sur le bouton : //x_b = position en x du bouton //y_b = position en y du bouton //2*r_b = diamètre du cercle (r = rayon) fill(255); //Action sur bouton2 if(etatBouton2){// si le bouton est pressé //println("The mouse is Clicked"); etatBouton2 = true; // mémorisation de l'état "appuyé" du bouton image(movie1_2,0,0,width,height); //apparition de la vidéo 1_2, sa position et sa taille //do stuff } } //Timer 3 if(millis() > 48800){ //Lancement après 4s image(image3, x_b3, y_b3, 2*r_b3, 2*r_b3); //zone de click sur le bouton : //x_b = position en x du bouton //y_b = position en y du bouton //2*r_b = diamètre du cercle (r = rayon) fill(255); //Action sur bouton3 if(etatBouton3){// si le bouton est pressé //println("The mouse is Clicked"); etatBouton3 = true; // mémorisation de l'état "appuyé" du bouton image(movie1_3,0,0,width,height); //apparition de la vidéo 1_3, sa position et sa taille //do stuff } } //Timer 4 if(millis() > 52800){ //Lancement après 4s image(image4, x_b4, y_b4, 2*r_b4, 2*r_b4); //zone de click sur le bouton : //x_b = position en x du bouton //y_b = position en y du bouton //2*r_b = diamètre du cercle (r = rayon) fill(255); //Action sur bouton4 if(etatBouton4){// si le bouton est pressé //println("The mouse is Clicked"); etatBouton4 = true; // mémorisation de l'état "appuyé" du bouton image(movie1_4,0,0,width,height); //apparition de la vidéo 1_4, sa position et sa taille //do stuff } } } //Zone de click sur le bouton1 void mousePressed(){ if ( (sq(mouseX-(x_b1+r_b1))+sq(mouseY-(y_b1+r_b1)))<=sq(r_b1)){ //équation pour que la zone de click se situe sur le bouton //sq() = au carré etatBouton1 = !etatBouton1; // mémorisation de l'état "appuyé" du bouton } //Zone de click sur le bouton2 if ( (sq(mouseX-(x_b2+r_b2))+sq(mouseY-(y_b2+r_b2)))<=sq(r_b2)){ //équation pour que la zone de click se situe sur le bouton //sq() = au carré etatBouton2 = !etatBouton2; // mémorisation de l'état "appuyé" du bouton } //Zone de click sur le bouton3 if ( (sq(mouseX-(x_b3+r_b3))+sq(mouseY-(y_b3+r_b3)))<=sq(r_b3)){ //équation pour que la zone de click se situe sur le bouton //sq() = au carré etatBouton3 = !etatBouton3; // mémorisation de l'état "appuyé" du bouton } //Zone de click sur le bouton4 if ( (sq(mouseX-(x_b4+r_b4))+sq(mouseY-(y_b4+r_b4)))<=sq(r_b4)){ //équation pour que la zone de click se situe sur le bouton //sq() = au carré etatBouton4 = !etatBouton4; // mémorisation de l'état "appuyé" du bouton } } void stop() { minim.stop(); super.stop(); }
Je pense donc essayer d'obtenir un programme stable en utilisant le logiciel Flash. Pour le contenu de la vidéo interactive, il serait intéressant d'y insérer un changement des points de vues. Étant donner que l'artiste change les échelles, il se met au même niveau des Barbie, on pourrait proposer à un certain moment de la vidéo d'échanger le point de vue entre le point de vue de l'artiste et le point de vue des Barbie. On se retrouverait donc à la place des Barbie et l'on verrait comment l'artiste travaille. Voici un exemple de ce que cela pourrait donner : Coca Cola