====== Médiation ======
  * **Porteur du projet :** Rémi Bargier, Clara Delmon, Jason Garcia, Audrey Herd-Smith
  * **Date :** Du mardi 10 novembre au vendredi 11 décembre 2015
  * **Contexte** : Médiation graphique d'œuvres artistiques présentées dans le cadre de l'exposition Histoires Parallèles.

==== Objectif ====
  * Faire la médiation des médiations. Souligner l'importance de la médiation au musée et accompagner le public dans l'expérience des élèves durant l'Open Frac.

==== Dispositifs à mettre en place ====
  * Communication additionnelle à celle du FRAC, le soir de la nocturne, pour expliquer à l'écrit et signaler les travaux de médiation des élèves.
  * Teaser d'OpenFrac#2
  * Vidéo interactive retraçant le parcours des 4 groupes d'élèves, dans leur réflexion et leur pratiques.

==== Communication visuelle OpenFrac#2 ====

  * **Scotch de chantier**

Notre identité se base sur les diagonales/parallèles jaunes, ainsi le scotch de chantier noir et jaune nous aidera à créer cette identité visuelle. Ce scotch permettra de signaler par un marquage au sol les œuvres sur lesquels ont travaillé les étudiants. Le socle présentant la vidéo sera ainsi customisé par ce scotch.

  * **Logo**

{{:wiki:projets:open-frac-2:logoopenfrac_-_final.jpg?250}}
{{ :wiki:projets:open-frac-2:05_-_copie.png?300|}}

La typographie conçue rappelle les lignes parallèles du dépliant de l'exposition //Histoires Parallèles// et le scotch

  * **Réflexion autour de la communication additionnelle au FRAC**

Proposition d'une pochette correspondant au graphisme d'Histoire Parallèle (selon les diagonales). 

{{:wiki:projets:open-frac-2:img_9062.jpg?300|}}
{{:wiki:projets:open-frac-2:img_9063.jpg?300|}}
{{:wiki:projets:open-frac-2:img_9064.jpg?300|}}
{{:wiki:projets:open-frac-2:img_9066.jpg?300|}}

{{:wiki:projets:open-frac-2:schema_1711.jpg?700|}} 
{{:wiki:projets:open-frac-2:mediation_depliant_1.jpg?300|}}
{{ :wiki:projets:open-frac-2:mediation_depliant_2.jpg?370|}}

  * **Contenu du Dépliant**

{{:wiki:projets:open-frac-2:04.png?330}}
{{ :wiki:projets:open-frac-2:05.png?330|}}

A l'interieur du dépliant on retrouve tous les participants de cet OpenFrac 2 et un flashcode qui conduit à la page wiki de ce projet. Le dos propose un plan qui indique l'emplacement de chaque augmentation par des numéros.


  * **Cartel et Pictogrammes**

{{:wiki:projets:open-frac-2:01.png|}}
{{:wiki:projets:open-frac-2:03.png|}}

Ajout d'un cartel additionnel au cartel existant (stickers ?). Le cartel reprend sur la droite la couverture du dépliant (logo et reprise des couleurs jaunes/noir) afin de signaler au visiteur la correspondance entre le dépliant et les cartels associés aux augmentations. Les numéros en haut à droite permettent de se repérer par rapport au plan ci-dessus. Sur la gauche on retrouve un texte explicatif du projet et des pictogrammes indiquant des actions à faire (appuyer pour l'affiche tactile, se déplacer pour la kinetc...) et des conséquences (impression d'un ticket, engendre du son etc).

{{:wiki:projets:open-frac-2:02.png|}}

==== Teaser OpenFrac#2 ====

{{vimeo>147830772?medium}}


==== Vidéo Interactive - Hacking Of ====

  * **Réflexion autour de la vidéo interactive**

Proposition d'une vidéo interactive qui retrace le processus de réalisation des médiations.

Une vidéo interactive désigne une vidéo dans laquelle le spectateur ne subit pas un flux ininterrompu d’images mais interagit avec des capteurs qui modifient en temps réel ce flux d’images.

Hacking Of présente au public un making of de l’exposition OpenFrac #2 : elle intègre de nombreux focus auquel le public peut accéder grâce à des boutons qui apparaissent à l’écran et qu’il peut décider ou non d’activer. Elle permet également au visiteur de décider par quelle œuvre augmentée il souhaite «entrer» dans la vidéo.


{{:wiki:projets:open-frac-2:mediation_schema_video_interact_copie.jpg|}}
{{ :wiki:projets:open-frac-2:mediation_dessin_flash_1.jpg|}}
{{ :wiki:projets:open-frac-2:mediation_dessin_flash_2.jpg|}}

Lorsque l'utilisateur va appuyer sur un bouton interaction, il va pouvoir obtenir un plan vidéo supplémentaire. Il va pouvoir choisir s'il veut approfondir le champ de vision, suivant sa volonté.

  * **Structure de la vidéo interactive**

__Page 1__ : Page d'accueil

->Click sur le logo pour lancer la vidéo interactive.
{{:wiki:projets:open-frac-2:video_interactive_p1.jpg?500|}}
<code>
// stop l'animation générale
stop();

//action sur bouton openfrac pour aller au menu principal
openfrac.onRelease = function() {
    gotoAndPlay("menu",1);
}

// cacher curseur ou pointeur
//Mouse.hide();
</code>

__Page 2__ : Carte des médiations

->Click sur une des œuvres pour découvrir le déroulement du travail réalisé.
{{:wiki:projets:open-frac-2:video_interactive_p2.jpg?500|}}
<code>
// stop l'animation générale
stop();

// musiques
music1 = new Sound();
music1.attachSound("fantome_CMJN.mp3");
music2 = new Sound();
music2.attachSound("podington_bear_black_eyed_susan_no_future.mp3");
music3 = new Sound();
music3.attachSound("new_life_at.mp3");
music4 = new Sound();
music4.attachSound("pantystep_kinect.mp3");

//action sur bouton AT pour lire le making of affiche tactile
AT.onRelease = function() {
    gotoAndPlay("affichetactile1",1);
	music3.start();
}

//action sur bouton kinect pour lire le making of kinect
kinect.onRelease = function() {
    gotoAndPlay(3);
	music4.start();
}

//action sur bouton cmjn pour lire le making of réalité augmentée
cmjn.onRelease = function() {
    gotoAndPlay(25);
	music1.start();
}

//action sur bouton No Future pour lire le making of installation interactive 
nofuture.onRelease = function() {
    gotoAndPlay(17);
	music2.start();
}
</code>

__Page 3__ : Narration de la vidéo

->Click sur le rond pour obtenir une vue rapprochée de l'objet manipulé par la jeune femme.
{{:wiki:projets:open-frac-2:video_interactive_p3.jpg?500|}}

<code>
// stop l'animation générale
stop();

//action sur bouton_interaction_kinect_1_1
bouton_interaction_kinect_1_1.onRelease = function() { //ajout d'une fonction sur le bouton interaction nommé bouton_interaction_kinect_1_1 placé dans le montage flash
    gotoAndPlay(4); //bouton interaction appuyé, on se déplace alors sur la frame 4 du montage flash. Sur la frame 4 se situera le plan supplémentaire
}

// bouton_interaction_kinect_1_1 //
bouton_interaction_kinect_1_1._visible = false; //permet de nommer l'état d'un bouton interaction, true ou false, correspondant ici à visible ou invisible

setTimeout(myFunction_kinect_A, 7000); //initier un timer, qui permet ici de faire apparaître des éléments à un moment précis. Ici création d'un timer A, qui permettra de faire apparaître un élément au bout de 7000ms
function myFunction_kinect_A(){ //attribuer la fonction du timer A à un élément
	bouton_interaction_kinect_1_1._visible = true; //permet de rendre visible le bouton interaction en suivant la fonction du timer A, c'est à dire le bouton sera visible après 7000ms
	}
	
setTimeout(myFunction_kinect_B, 11000); // initier un timer, qui permet ici de faire disparaître des éléments à un moment précis. Ici création d'un timer B, qui permettra de faire disparaître un élément au bout de 11000ms
function myFunction_kinect_B(){ //attribuer la fonction du timer A à un élément
	bouton_interaction_kinect_1_1._visible = false; //permet de rendre invisible le bouton interaction en suivant la fonction du timer B, c'est à dire le bouton sera invisible après 11000ms
	}
	
</code>

__Page 4-1__ : Plan supplémentaire dans la vidéo si bouton interaction appuyé

{{:wiki:projets:open-frac-2:mediation_zoom.jpg?500|}}

__Page 4-2__ : Plan supplémentaire dans la vidéo si bouton interaction non appuyé

{{:wiki:projets:open-frac-2:mediation_4_2.jpg?500|}}

__Page 5__ : Crédits + retour au menu
{{:wiki:projets:open-frac-2:capture_d_e_cran_2016-02-02_a_14.33.43_copie.jpg?500|}}
<code>
// stop l'animation générale
stop();
music4.stop(); //la musique de la vidéo s'arrête
//action sur bouton retour menu
retour_menu_kinect.onRelease = function() { //ajout d'une fonction lorsqu'on appuie sur le bouton retour_menu
    gotoAndPlay(2); // on revient en frame 2 quand le bouton retour_menu est appuyé, qui correspond à la frame où se situe le menu
}

</code>

  * **Code complet réalisé sur Flash CS6**


Un premier test de vidéo interactive a été réalisé sur Adobe Edge Animate, or nous nous sommes très vite rendu compte que ce logiciel n'est pas fait pour ce type de vidéo interactive, nous avons donc utilisé Flash CS6 pour la réaliser. Flash CS6 est plus adapté pour la réalisation de ce type de vidéo interactive. Voici le code utilisé pour créer la vidéo interactive.


<code>
// stop l'animation générale afin qu'elle débute lorsque l'utilisateur choisira d'interagir
stop();

// musiques
music1 = new Sound(); //permet de rajouter un son "1" dans le code
music1.attachSound("fantome_CMJN.mp3"); //permet de lier le son "1" au code
music2 = new Sound(); //permet de rajouter un son "2" dans le code
music2.attachSound("podington_bear_black_eyed_susan_no_future.mp3");
music3 = new Sound(); //permet de rajouter un son "3" dans le code
music3.attachSound("new_life_at.mp3"); //permet de rajouter un son "3" dans le code
music4 = new Sound(); //permet de rajouter un son "4" dans le code
music4.attachSound("pantystep_kinect.mp3"); //permet de rajouter un son "4" dans le code

//action sur bouton AT (Ticket Boum - Affiche tactile)
AT.onRelease = function() { //fonction signifiant "quand on click sur bouton AT, alors la fonction suivant est déclanchée
    gotoAndPlay(10); //bouton AT appuyé, direction la frame 10 sur laquelle est présent la vidéo correspondant à Ticket Boum
	music3.start(); //bouton AT appuyé, le son "3" se lance
}

//action sur bouton kinect
kinect.onRelease = function() {
    gotoAndPlay(3);
	music4.start();
}

//action sur bouton cmjn
cmjn.onRelease = function() {
    gotoAndPlay(25);
	music1.start();
}

//action sur bouton No Future
nofuture.onRelease = function() {
    gotoAndPlay(17);
	music2.start();
}
</code>

Exemple du code (à dupliquer et renommer)
<code>

// stop l'animation générale
stop();

//action sur bouton_interaction_kinect_1_1
bouton_interaction_kinect_1_1.onRelease = function() { //ajout d'une fonction sur le bouton interaction nommé bouton_interaction_kinect_1_1 placé dans le montage flash
    gotoAndPlay(4); //bouton interaction appuyé alors on se déplace sur la frame 4 du montage flash. Sur la frame 4 se situera le plan supplémentaire
}

// bouton_interaction_kinect_1_1 //
bouton_interaction_kinect_1_1._visible = false; //permet de nommer l'état d'un bouton interaction, true ou false, correspondant ici à visible ou invisible

setTimeout(myFunction_kinect_A, 7000); //initier un timer, qui permet de faire apparaître des éléments à un moment précis. Ici création d'un timer A, qui permettra de faire apparaître un élément au bout de 7000ms
function myFunction_kinect_A(){ //attribuer la fonction du timer A
	bouton_interaction_kinect_1_1._visible = true; //permet de rendre visible le bouton interaction en suivant la fonction du timer A, c'est à dire le bouton sera visible après 7000ms
	}
	
setTimeout(myFunction_kinect_B, 11000); //initier un timer, qui permet de faire disparaître des éléments à un moment précis. Ici création d'un timer B, qui permettra de faire disparaître un élément au bout de 11000ms
function myFunction_kinect_B(){ //attribuer la fonction du timer B
	bouton_interaction_kinect_1_1._visible = false; //permet de rendre invisible le bouton interaction en suivant la fonction du timer B, c'est à dire le bouton sera invisible après 11000ms
	}
	
	
//action sur bouton_interaction_kinect_1_2
bouton_interaction_kinect_1_2.onRelease = function() { //ajout d'une fonction sur le bouton interaction nommé bouton_interaction_kinect_1_2 placé dans le montage flash
    gotoAndPlay(5);  //bouton interaction appuyé alors on se déplace sur la frame 5 du montage flash. Sur la frame 5 se situera le plan supplémentaire
}
		
// bouton_interaction_kinect_1_2 //
bouton_interaction_kinect_1_2._visible = false; //permet de nommer l'état d'un bouton interaction, true ou false, correspondant ici à visible ou invisible

setTimeout(myFunction_kinect_C, 43400); //initier un timer, qui permet de faire apparaître des éléments à un moment précis. Ici création d'un timer C, qui permettra de faire apparaître un élément au bout de 43400ms
function myFunction_kinect_C(){ //attribuer la fonction du timer C
	bouton_interaction_kinect_1_2._visible = true; //permet de rendre visible le bouton interaction en suivant la fonction du timer C, c'est à dire le bouton sera visible après 43400ms
	}
	
setTimeout(myFunction_kinect_D, 46500); //initier un timer, qui permet de faire disparaître des éléments à un moment précis. Ici création d'un timer D, qui permettra de faire disparaître un élément au bout de 46500ms
function myFunction_kinect_D(){ //attribuer la fonction du timer D
	bouton_interaction_kinect_1_2._visible = false; //permet de rendre invisible le bouton interaction en suivant la fonction du timer D, c'est à dire le bouton sera invisible après 46500ms
	}


//action sur bouton_interaction_kinect_1_3
bouton_interaction_kinect_1_3.onRelease = function() { //ajout d'une fonction sur le bouton interaction nommé bouton_interaction_kinect_1_3 placé dans le montage flash
    gotoAndPlay(6); //bouton interaction appuyé alors on se déplace sur la frame 6 du montage flash. Sur la frame 6 se situera le plan supplémentaire
}
		
// bouton_interaction_kinect_1_3 //
bouton_interaction_kinect_1_3._visible = false; //permet de nommer l'état d'un bouton interaction, true ou false, correspondant ici à visible ou invisible

setTimeout(myFunction_kinect_E, 67000); //initier un timer, qui permet de faire apparaître des éléments à un moment précis. Ici création d'un timer E, qui permettra de faire apparaître un élément au bout de 67000ms
function myFunction_kinect_E(){ //attribuer la fonction du timer E
	bouton_interaction_kinect_1_3._visible = true; //permet de rendre visible le bouton interaction en suivant la fonction du timer C, c'est à dire le bouton sera visible après 67000ms
	}
	
setTimeout(myFunction_kinect_F, 70800); //initier un timer, qui permet de faire disparaître des éléments à un moment précis. Ici création d'un timer F, qui permettra de faire disparaître un élément au bout de 70800ms
function myFunction_kinect_F(){ //attribuer la fonction du timer F
	bouton_interaction_kinect_1_3._visible = false; //permet de rendre invisible le bouton interaction en suivant la fonction du timer F, c'est à dire le bouton sera invisible après 70800ms
	}
		

//action sur bouton_interaction_kinect_1_4
bouton_interaction_kinect_1_4.onRelease = function() { //ajout d'une fonction sur le bouton interaction nommé bouton_interaction_kinect_1_4 placé dans le montage flash
    gotoAndPlay(7); //bouton interaction appuyé alors on se déplace sur la frame 7 du montage flash. Sur la frame 7 se situera le plan supplémentaire
}
		
// bouton_interaction_kinect_1_4 //
bouton_interaction_kinect_1_4._visible = false; //permet de nommer l'état d'un bouton interaction, true ou false, correspondant ici à visible ou invisible

setTimeout(myFunction_kinect_G, 74800); //initier un timer, qui permet de faire apparaître des éléments à un moment précis. Ici création d'un timer G, qui permettra de faire apparaître un élément au bout de 74800ms
function myFunction_kinect_G(){ //attribuer la fonction du timer G
	bouton_interaction_kinect_1_4._visible = true; //permet de rendre visible le bouton interaction en suivant la fonction du timer G, c'est à dire le bouton sera visible après 74800ms
	}
	
setTimeout(myFunction_kinect_H, 79000); //initier un timer, qui permet de faire disparaître des éléments à un moment précis. Ici création d'un timer H, qui permettra de faire disparaître un élément au bout de 79000ms
function myFunction_kinect_H(){ //attribuer la fonction du timer H
	bouton_interaction_kinect_1_4._visible = false; //permet de rendre invisible le bouton interaction en suivant la fonction du timer H, c'est à dire le bouton sera invisible après 79000ms
	}
	

//action sur bouton_interaction_kinect_1_5
bouton_interaction_kinect_1_5.onRelease = function() { //ajout d'une fonction sur le bouton interaction nommé bouton_interaction_kinect_1_5 placé dans le montage flash
    gotoAndPlay(8); //bouton interaction appuyé alors on se déplace sur la frame 8 du montage flash. Sur la frame 8 se situera le plan supplémentaire
}
		
// bouton_interaction_kinect_1_5 //
bouton_interaction_kinect_1_5._visible = false; //permet de nommer l'état d'un bouton interaction, true ou false, correspondant ici à visible ou invisible

setTimeout(myFunction_kinect_I, 108500); //initier un timer, qui permet de faire apparaître des éléments à un moment précis. Ici création d'un timer I, qui permettra de faire apparaître un élément au bout de 108500ms
function myFunction_kinect_I(){ //attribuer la fonction du timer I
	bouton_interaction_kinect_1_5._visible = true; //permet de rendre visible le bouton interaction en suivant la fonction du timer I, c'est à dire le bouton sera visible après 108500ms
	}
	
setTimeout(myFunction_kinect_J, 112000); //initier un timer, qui permet de faire disparaître des éléments à un moment précis. Ici création d'un timer J, qui permettra de faire disparaître un élément au bout de 112000ms
function myFunction_kinect_J(){ //attribuer la fonction du timer J
	bouton_interaction_kinect_1_5._visible = false; //permet de rendre invisible le bouton interaction en suivant la fonction du timer J, c'est à dire le bouton sera invisible après 112000ms
	}

//retour au menu
setTimeout(myFunction_kinect_retourmenu_1, 116000);  //initier un timer, qui permet de faire apparaître une fenêtre permettant de retourner au menu. Ici création d'un timer retourmenu_1, qui permettra de faire apparaître une fenêtre permettant de retourner au menu au bout de 116000ms
function myFunction_kinect_retourmenu_1(){ //attribuer la fonction du timer retourmenu_1
	gotoAndPlay(9); // on se déplace sur la frame 9 du montage flash au bout de 116000ms. Sur la frame 9 se situera la fenêtre permettant de retourner au menu
	music4.stop(); // la musique de la vidéo s’arrête au bout de 116000ms
	}

</code>
Code à placer sur la frame qui permettra le retour au menu
<code>
// stop l'animation générale
stop();
music4.stop(); //la musique de la vidéo s'arrête
//action sur bouton retour menu
retour_menu_kinect.onRelease = function() { //ajout d'une fonction lorsqu'on appuie sur le bouton retour_menu
    gotoAndPlay(2); // on revient en frame 2 quand le bouton retour_menu est appuyé, qui correspond à la frame où se situe le menu
}

</code>

====Installation====

Dimensions du socle : 65x43,7cm

Dimension de la tablette : 50x30cm / 17cm profondeur / 1600x900px

{{:wiki:projets:open-frac-2:me_diation_sche_ma_installation_2.jpg?700|}}
{{ :wiki:projets:open-frac-2:openfrac_2_mediation.jpg?direct |}}
{{:wiki:projets:open-frac-2:me_diation_-_installation_1.jpg?340|}}
{{:wiki:projets:open-frac-2:me_diation_-_installation_2.jpg?340|}}

==== Bibliographie ====
  * **Dreamweaver & Flash CS6 pour les nuls**, Janine Warner & Ellen Finkelstein

==== Matériel ====
Fourni par le Frac :
  * socle (repeint en blanc)
  * câblage
  * roulette électrique
  * scotch
  * papier
Fourni par Résonance Numérique :
  *
Fourni par le Lycée :
  * écran tactile
  * casque audio

Fournitures à acheter par le Frac (demander facture / estimer les coûts) :
  * 
==== Échanges ====
Équipe Médiation : 17/11
  * Pouvons-nous avoir les fichiers sources de la communication mise en place pour la nocturne plateau 1, ainsi que les formats pour les autres plateaux ? (si tout n'est pas réuni dans un même programme)
  * Pouvez-vous nous rappeler si vous possédez au FRAC des écrans tactiles (mobiles) ? 

remarques ACC :
Concernant l'idée de pochette, j'attire votre attention sur une pochette existante au format 17,1 x 24,7 cm, en papier cristal, imprimée d'un cercle centré, incluse dans l'identité visuelle du FRAC PACA.
Peut-être est-il délicat d'insérer un élément visuel supplémentaire, qui ne serait issu ni de la communication d'Histoires Parallèles ni de celle du FRAC PACA...En tous les cas, ce ne sont pas des initiatives graphiques très recommandées et elles risquent d'ajouter du bruit à la communication institutionnelle existante.

AA et SP : 
- Pas de problèmes pour avoir les fichiers sources
- Nous n'aurons pas d'écrans tactiles disponibles sur ces dates
-Concernant votre idée pour la com. Nous sommes enthousiaste. Les soirs de nocturnes les pochettes cristal ne sont pas distribuées. On distribue, un A5 recto verso avec le programme de la nocturne et le doc d'accompagnement à la visite de l'expo en cours qui cette fois ci prend une forme particulière.
On vous monte ça mardi prochain.


{{:wiki:projets:open-frac-2:openfrac_2_me_diation.1.jpg?direct&200|}}
{{:wiki:projets:open-frac-2:openfrac_2_me_diation.jpg?direct&200|}}

==== Contact ====
Anne-Catherine Céard, enseignante en DSAA Design mention Graphisme
  * 06 83 77 85 19
  * ac.ceard@gmail.com
Thomas Ricordeau, enseignant en DSAA Design mention Graphisme
  * 06 09 04 88 19
  * thomas.ricordeau@gmail.com
Reso-Nance numérique
  * contact@reso-nance.org

Annabelle Arnaud, responsable projets milieu scolaire et formation
  * 04 91 90 28 72
  * annabelle.arnaud@fracpaca.org
Stéphanie Putaggio, projets milieu scolaire
  * 04 91 90 28 72
  * stephanie.putaggio@fracpaca.org

Commissaires de l'exposition //Histoires Parrallèles//
  * 06 30 30 74 39
  * aricarmingnac@gmail.com
  * gpourtier@yahoo.fr