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>

<script>
 

	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();
  }

}

function diminuLeVent(){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}


function actionstop(){
  clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}

function actionrestart(){
  clearInterval(nbimg);
vitesseDuVent = souvenirvitesse;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}


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;
  	}
  }

function actionx1Press(){
	persistanceretinienne = 15;
  }
function actionx2Press(){
	persistanceretinienne = 14;
  }
function actionx3Press(){
	persistanceretinienne = 13;
  }
function actionx4Press(){
	persistanceretinienne = 12;
  }
function actionx5Press(){
	persistanceretinienne = 11;
  }
function actionx6Press(){
	persistanceretinienne = 10;
  }
function actionx7Press(){
	persistanceretinienne = 9;
  }
function actionx8Press(){
	persistanceretinienne = 8;
  }
function actionx9Press(){
	persistanceretinienne = 7;
  }
function actionx10Press(){
	persistanceretinienne = 6;
  }
function actionx11Press(){
	persistanceretinienne = 5;
  }
function actionx12Press(){
	persistanceretinienne = 4;
  }
function actionx13Press(){
	persistanceretinienne = 3;
  }
function actionx14Press(){
	persistanceretinienne = 2;
  }
function actionx15Press(){
	persistanceretinienne = 1;
  }
function actionx16Press(){
	persistanceretinienne = 0;
  }


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

   } 


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


</script>
<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" onMouseDown="actionx1Press();" style="margin-left:1%;"></div>
      <div class="action" onMouseDown="actionx2Press();" style="margin-left:3%;"></div>
      <div class="action" onMouseDown="actionx3Press();" style="margin-left:5%;"></div>
      <div class="action" onMouseDown="actionx4Press();" style="margin-left:7%;"></div>
      <div class="action" onMouseDown="actionx5Press();" style="margin-left:9%;"></div>
      <div class="action" onMouseDown="actionx6Press();" style="margin-left:11%;"></div>
      <div class="action" onMouseDown="actionx7Press();" style="margin-left:13%;"></div>
      <div class="action" onMouseDown="actionx8Press();" style="margin-left:15%;"></div>
      <div class="action" onMouseDown="actionx9Press();" style="margin-left:17%;"></div>
      <div class="action" onMouseDown="actionx10Press();" style="margin-left:19%;"></div>
      <div class="action" onMouseDown="actionx11Press();" style="margin-left:21%;"></div>
      <div class="action" onMouseDown="actionx12Press();" style="margin-left:23%;"></div>
      <div class="action" onMouseDown="actionx13Press();" style="margin-left:25%;"></div>
      <div class="action" onMouseDown="actionx14Press();" style="margin-left:27%;"></div>
      <div class="action" onMouseDown="actionx15Press();" style="margin-left:29%;"></div>
      <div class="action" onMouseDown="actionx16Press();" style="margin-left:31%;"></div> 

       <div class="action5mn" onMouseDown="actionstop();" style="margin-left:61%;"></div>
       <div class="action5mn" onMouseDown="actionrestart();" style="margin-left:63%;"></div>

      <div class="actionvitesse" onMouseDown="diminuLeVent();" style="margin-left:67%;">-</div>
      <div class="actionvitesse" onMouseDown="acelereLeVent();" style="margin-left:69%;">+</div>
      <div class="actionunivers" onMouseDown="action1Press();" 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="jom.js"></script>
</body>

</html>