generate image in css



width: height: color:
adjustment radian


rotate, opacity, and select position (1 : static, 2 : relative , 3 : fixed, 4 : absolute)

speed , margin-left, and margin-top

Generates image content :



generate sound in js



Select sound : jo audio format, for mix in the video :


Placement of audio files in the video:






get sound : abadie jo audio format, for header javascript :

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16:



Start of the area
to copy / paste the generated video multidirectional

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>multidirectional-talk</title>




<style>

.indique{
  cursor:pointer;
}
.cachemoi {
    display: none;
}

.sortdutrou {
    display: inline;
}

.action{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:blue;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.action5mn{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:red;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.actionvitesse{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:green;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.actionunivers{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:1%;
  background:black;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.actionunivers{
  position:fixed;
  height:4%;
  width:1.4%;
  margin-top:2%;
  border-right:1px solid #BBB;
  cursor:pointer;
}



</style>
</head>

<body">


  <div id='basewave1'> </div>
  <div id='basewave2'> </div>
  <div id='basewave3'> </div>
  <div id='basewave4'> </div>
  <div id='basewave5'> </div>
  <div id='basewave6'> </div>
  <div id='basewave7'> </div>
  <div id='basewave8'> </div>
  <div id='basewave9'> </div>
  <div id='basewave10'> </div>
  <div id='basewave11'> </div>
  <div id='basewave12'> </div>
  <div id='basewave13'> </div>
  <div id='basewave14'> </div>
  <div id='basewave15'> </div>
  <div id='basewave16'> </div>






 <div id="fleur1" class="cachemoi" >

 </div>

<!--bis-->
 <div id="bisfleur1" class="cachemoi" >

 </div>
<!--fin bis-->


 <div id="fleur2" class="cachemoi" >

 </div>

<!--bis-->
 <div id="bisfleur2" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur3" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur3" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur4" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur4" class="cachemoi" >

 </div>
<!--fin bis-->


 <div id="fleur5" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur5" class="cachemoi" >

 </div>
<!--fin bis-->


 <div id="fleur6" class="cachemoi" >

 </div>

<!--bis-->
 <div id="bisfleur6" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur7" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur7" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur8" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur8" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur9" class="cachemoi" >

 </div>

<!--bis-->
 <div id="bisfleur9" class="cachemoi" >

 </div>
<!--fin bis-->


 <div id="fleur10" class="cachemoi" >

 </div>

<!--bis-->
 <div id="bisfleur10" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur11" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur11" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur12" class="cachemoi">

 </div>
<!--bis-->
 <div id="bisfleur12" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur13" class="cachemoi">

 </div>
<!--bis-->
 <div id="bisfleur13" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur14" class="cachemoi" >

 </div>

<!--bis-->
 <div id="bisfleur14" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur15" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur15" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur16" class="cachemoi">

 </div>

<!--bis-->
 <div id="bisfleur16" class="cachemoi" >

 </div>
<!--fin bis-->

      <!-- bare de temps -->
      <div class="action" id="actionx1aPress" style="margin-left:1%;"></div>
      <div class="action" id="actionx2aPress" style="margin-left:3%;"></div>
      <div class="action" id="actionx3aPress" style="margin-left:5%;"></div>
      <div class="action" id="actionx4aPress" style="margin-left:7%;"></div>
      <div class="action" id="actionx5aPress" style="margin-left:9%;"></div>
      <div class="action" id="actionx6aPress" style="margin-left:11%;"></div>
      <div class="action" id="actionx7aPress" style="margin-left:13%;"></div>
      <div class="action" id="actionx8aPress" style="margin-left:15%;"></div>
      <div class="action" id="actionx9aPress" style="margin-left:17%;"></div>
      <div class="action" id="actionx10aPress" style="margin-left:19%;"></div>
      <div class="action" id="actionx11aPress" style="margin-left:21%;"></div>
      <div class="action" id="actionx12aPress" style="margin-left:23%;"></div>
      <div class="action" id="actionx13aPress" style="margin-left:25%;"></div>
      <div class="action" id="actionx14aPress" style="margin-left:27%;"></div>
      <div class="action" id="actionx15aPress" style="margin-left:29%;"></div>
      <div class="action" id="actionx16aPress" style="margin-left:31%;"></div> 

       <div class="action5mn" id="actionstopa" style="margin-left:61%;"></div>
       <div class="action5mn" id="actionrestarta" style="margin-left:63%;"></div>

      <div class="actionvitesse" id="diminuLeVenta" style="margin-left:67%;">-</div>
      <div class="actionvitesse" id="acelereLeVenta" style="margin-left:69%;">+</div>
      <div class="actionunivers" id="action1Pressa" style="margin-left:75%;"></div>


       <div class="actiontexte" style="margin-left:15%;"><p>time line</p></div>
       <div class="actiontexte" style="margin-left:61%;"><p>pause</p></div>
      <div class="actiontexte" style="margin-left:67%;"><p>speed</p></div>
      <div class="actiontexte" style="margin-left:75%;"><p>multidirectional talk</p></div>

<script type="text/javascript" src="example.js"> </script>

<script type="text/javascript" src="jom.js"></script>
</body>

</html>

Part javascript to copy / paste the file example.js


	var persistanceretinienne = 15;
	var nbimg = null;
	var nbboucle = 70;
    	var mua1 = 0;
	
	var ouioui;
	var joueur = 'fleur';
	var joueur1;
	var joueur2;
	var version = 1;
	var joueur3 = 'bisfleur';
	var joueur4;
	var joueur5 = 'bis';
	var joueur7;
	var joueur8;
	var arretimage5mn = 300000;
	var souvenirvitesse = 1000;
	var soud1 = [
];
	var soud2 = [
];
	var soud3 = [
];
	var soud4 = [
];
	var soud5 = [
];
	var soud6 = [
];
	var soud7 = [
];
	var soud8 = [
];
	var soud9 = [
];
	var soud10 = [
];
	var soud11 = [
];
	var soud12 = [
];
	var soud13 = [
];
	var soud14 = [
];
	var soud15 = [
];
	var soud16 = [
];


function acelereLeVent(){

  if(vitesseDuVent>123){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
  }

}
document.getElementById("acelereLeVenta").addEventListener("click", acelereLeVent);

function diminuLeVent(){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}
document.getElementById("diminuLeVenta").addEventListener("click", diminuLeVent);

function actionstop(){
  clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionstopa").addEventListener("click", actionstop);

function actionrestart(){
  clearInterval(nbimg);
vitesseDuVent = souvenirvitesse;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionrestarta").addEventListener("click", actionrestart);

function decoupe2(joueur4){//1
  document.getElementById(joueur4).className = 'cachemoi';
}//3

function decoupe1(joueur2){//1
  document.getElementById(joueur2).className = 'cachemoi';
}//3

function decoupe3(joueur1){//1
  document.getElementById(joueur1).className = 'sortdutrou';
}//3

function restecalme(joueur1,joueur8,ouioui){//1



  if(version == 1){//2

for (var placier = 1; placier < ouioui; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = 1; placier < ouioui; placier++) {//3


	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3

	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';


}//3


  document.getElementById(joueur1).className = 'sortdutrou';
  document.getElementById(joueur8).className = 'cachemoi';

}//2



  if(version == 2){//2



for (var placier = 1; placier < ouioui; placier++) {//3


	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3

	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';


}//3

for (var placier = 1; placier < ouioui; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3


  document.getElementById(joueur8).className = 'sortdutrou';

  document.getElementById(joueur1).className = 'cachemoi';


}

}



function change(persistanceretinienne)
{

  switch (persistanceretinienne) {

    	case 0:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 1:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 2:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 3:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 4:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 5:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 6:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 7:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 8:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 9:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 10:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 11:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 12:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 13:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 14:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
    	case 15:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);

   	break;
 
  }

}



function durermax()
{
  clearInterval(nbimg);
/*   lancerChange4();	*/
}
function seance()
{



change(persistanceretinienne);
  persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{ 
/* selection du nombre d'image*/
/* persistanceretinienne = 3;*/
persistanceretinienne = 15;
nbboucle = nbboucle-1;
}


}

function lancertout()
{
  nbimg = setInterval(seance, vitesseDuVent);
  setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne);
}

function lancertout1()
{
lecjo(soud1);
lecjo(soud2);
lecjo(soud3);
lecjo(soud4);
lecjo(soud5);
lecjo(soud6);
lecjo(soud7);
lecjo(soud8);
lecjo(soud9);
lecjo(soud10);
lecjo(soud11);
lecjo(soud12);
lecjo(soud13);
lecjo(soud14);
lecjo(soud15);
lecjo(soud16);

lancertout();
}	

  function JoueLeSon(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1awav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("2awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("3awav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("4awav");
  multia4.play();
  }
  }

  function JoueLeSon1(){
  var multib1 = document.getElementById("1awav");
  multib1.play();
  }
  function JoueLeSon2(){
  var multic1 = document.getElementById("2awav");
  multic1.play();
  }
  function JoueLeSon3(){
  var multid1 = document.getElementById("3awav");
  multid1.play();
  }
  function JoueLeSon4(){
  var multie1 = document.getElementById("4awav");
  multie1.play();
  }
  function JoueLeSon5(){
  var multif1 = document.getElementById("5awav");
  multif1.play();
  }
  function JoueLeSon6(){
  var multig1 = document.getElementById("6awav");
  multig1.play();
  }
  function JoueLeSon7(){
  var multih1 = document.getElementById("7awav");
  multih1.play();
  }
  function JoueLeSon8(){
  var multii1 = document.getElementById("8awav");
  multii1.play();
  }
  function JoueLeSon9(){
  var multij1 = document.getElementById("9awav");
  multij1.play();
  }
  function JoueLeSon10(){
  var multik1 = document.getElementById("10awav");
  multik1.play();
  }
  function JoueLeSon11(){
  var multil1 = document.getElementById("11awav");
  multil1.play();
  }
  function JoueLeSon12(){
  var multic1 = document.getElementById("12awav");
  multic1.play();
  }
  function JoueLeSon13(){
  var multim1 = document.getElementById("13awav");
  multim1.play();
  }
  function JoueLeSon14(){
  var multin1 = document.getElementById("14awav");
  multin1.play();
  }
  function JoueLeSon15(){
  var multio1 = document.getElementById("15awav");
  multio1.play();
  }
  function JoueLeSon16(){
  var multip1 = document.getElementById("16awav");
  multip1.play();
  }



function action1Press(){
	version = version + 1;
	if(version>2){
        version = 1;
  	}
  }
document.getElementById("action1Pressa").addEventListener("click", action1Press);

function actionx1Press(){
	persistanceretinienne = 15;
  }
document.getElementById("actionx1aPress").addEventListener("click", actionx1Press);

function actionx2Press(){
	persistanceretinienne = 14;
  }
document.getElementById("actionx2aPress").addEventListener("click", actionx2Press);

function actionx3Press(){
	persistanceretinienne = 13;
  }
document.getElementById("actionx3aPress").addEventListener("click", actionx3Press);

function actionx4Press(){
	persistanceretinienne = 12;
  }
document.getElementById("actionx4aPress").addEventListener("click", actionx4Press);

function actionx5Press(){
	persistanceretinienne = 11;
  }
document.getElementById("actionx5aPress").addEventListener("click", actionx5Press);

function actionx6Press(){
	persistanceretinienne = 10;
  }
document.getElementById("actionx6aPress").addEventListener("click", actionx6Press);

function actionx7Press(){
	persistanceretinienne = 9;
  }
document.getElementById("actionx7aPress").addEventListener("click", actionx7Press);

function actionx8Press(){
	persistanceretinienne = 8;
  }
document.getElementById("actionx8aPress").addEventListener("click", actionx8Press);

function actionx9Press(){
	persistanceretinienne = 7;
  }
document.getElementById("actionx9aPress").addEventListener("click", actionx9Press);

function actionx10Press(){
	persistanceretinienne = 6;
  }
document.getElementById("actionx10aPress").addEventListener("click", actionx10Press);

function actionx11Press(){
	persistanceretinienne = 5;
  }
document.getElementById("actionx11aPress").addEventListener("click", actionx11Press);

function actionx12Press(){
	persistanceretinienne = 4;
  }
document.getElementById("actionx12aPress").addEventListener("click", actionx12Press);

function actionx13Press(){
	persistanceretinienne = 3;
  }
document.getElementById("actionx13aPress").addEventListener("click", actionx13Press);

function actionx14Press(){
	persistanceretinienne = 2;
  }
document.getElementById("actionx14aPress").addEventListener("click", actionx14Press);

function actionx15Press(){
	persistanceretinienne = 1;
  }
document.getElementById("actionx15aPress").addEventListener("click", actionx15Press);

function actionx16Press(){
	persistanceretinienne = 0;
  }
document.getElementById("actionx16aPress").addEventListener("click", actionx16Press);


/**passerelle firefox 48 pour remplacer le bouton d'appel java**/
   function load() { 
lancertout1(); 

   } 


 document.addEventListener("DOMContentLoaded", function(event) {
    load();
  });
/**fin passerelle firefox 48**/