explanation of the code contained in multidirectional-talk.html

multidirectional-talk.html

Part used for construction

This is an HTML file:
<!DOCTYPE html>
<html>
With a header :
<head>
<meta charset="UTF-8">
Which calls a css page :
<link rel="stylesheet" href="multidirectional-talk.css"/>
</head>
We open the page body and give a title :
<body>
<h2>generate image in css</h2><br><br>
The concept of multidirectional design is that there is a shape, as soon as we begin to draw. That the aspect of this form is the result of several dimensions in equilibrium. Depending on the values entered in the dimensions, we obtain a circle, a rectangle. All forms are of the same nature. To achieve a shape we place a value selector by dimension, for example for the width dimension :
width:<input type="number" min="1" max="500" name="nb1" id="Nb1">
Et ceci pour chaque dimension
We indicate that the tool after is used to generate the shape by indicating where to generate it. :
<p>Generates image content :</p>
We create as many buttons as there are images in the video, as example for image 1 :
<button id="tet1" >1</button>
We create a sound file selector :
<br><br>
<h2>generate sound in js</h2><br><br>
<p>Select sound : jo audio format, for mix in the video :</p>
<input type="number" min="1" max="16" name="nbson" id="Nbson"><br>
We indicate how many audio files there are, because this changes the jom.js code :
<br><br>
<h2>generate sound in js</h2><br><br>
<p>Select sound : jo audio format, for mix in the video :</p>
<input type="number" min="1" max="16" name="nbson" id="Nbson"><br>
With a button, we indicate to which image to attach the sound file. The fact of fixing the sound to the image allows that this one is mixed with the change of speed, and not deformed.
<p>Placement of audio files in the video:</p>
<button Id="snd1">1</button>
We will look for sound files in audio format abadie.jo on the computer to prepare them :
<br><br><br>
<p>get sound : abadie jo audio format, for header javascript :</p>
<p>
1:<input type="file" name="Gsnd1" id="gsnd1" onchange="gens1(this.files)"/>

Construction Support Base

First part the html file of the video

We indicate first that this is an HTML page and open the header :

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

We begin to draw the first databases like the one that hides the drawings, this property of the drawing is deactivated only when we want the drawing to appear. The concept is that all designs are permanently in the video with a property that masks them. Assumes to a position counter in time, the function that hides the drawing is deactivated according to the image :

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

We place a first marker in order to be able to generate the code in the css header of the HTML page :
<div id='repere_tourne'> </div>
We close the css of the header, close the header and open the body of the HTML page :
```
</style>
</head>
<body>
```
First we create the slots or will be generated the audio files :
```
<div id="basewave1"> </div>
```
We create our first image by hiding it using the class css cachemoi :
```
<div id="fleur1" class="cachemoi" >
```
This image is the one that will appear last, because the counter that creates the time base subtracts. The tag of the image is not closed so that the generated code is contained in the tag.
We create a location where images will be generated using the generated css code:
```
<div id='repere_injection_monde1_img16'> </div>
```
We close the tag of the first image :
```
 </div>
```
The operation is repeated as many times as there are images and universes in the video.
We create a navigation bar in time so that the user can approach the document by a place of attachment, after a first quick view :
```

<div class="action" id="actionx1aPress" style="margin-left:1%;">
</div>
```

We create a freeze-frame action, with its return to playback and other possibilities of use on speed:

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

We place the links to the 4 useful files to the video, the files to copy / paste generated below in the HTML page generator :

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

We close the HTML page to copy / paste :
```
</html> 
```

Part 2 the javascript file of the video,
example.js

We announce that the code is that of example.js :
<h2>Part javascript to copy / paste the file example.js</h2>
We create a position variable, and we put it at the beginning of 15.
Because in the example, there are 16 images per universe, that the 0 is an image, and that it is a reborn account :
var persistanceretinienne = 15;
We create a management variable for the time counter:
var nbimg = null;
We create a variable to indicate how many times the video is played in a loop :
var nbboucle = 70;
We create a management variable :
var mua1 = 0;
We create a cue point so that the user can indicate the initial speed :
</pre><div id="vitesse"> </div><pre>

We create variables useful for construction :

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;

Preparation to be able to generate the sounds as soon as the video is opened :
var soud1 = [</pre><div id="donner_son1"> </div><pre>];
Creation of a function that accelerates the video at the click of a button, and tracking of the acelereLeVenta button by the line below :
function acelereLeVent(){
if(vitesseDuVent>123){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
}
}
document.getElementById("acelereLeVenta").addEventListener("click", acelereLeVent);
Creating a function that slows down the video by clicking a button, and tracking the button decreases the Venta by the line below :
function diminuLeVent(){
clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}
document.getElementById("diminuLeVenta").addEventListener("click", diminuLeVent);
Creating a function that pauses the video at the click of a button, and tracks the actionstopa button by the line below :
function actionstop(){
clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionstopa").addEventListener("click", actionstop);
Creating a function that pauses the video at the click of a button, and tracks the actionstopa button by the line below :
function actionstop(){
clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionstopa").addEventListener("click", actionstop);
Creation of a function that restarts the video at the click of a button, and tracking of the button actionrestarta by the line below :
function actionrestart(){
clearInterval(nbimg);
vitesseDuVent = souvenirvitesse;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionrestarta").addEventListener("click", actionrestart);
Display management :
function decoupe2(joueur4){
document.getElementById(joueur4).className = 'cachemoi';}
function decoupe1(joueur2){
document.getElementById(joueur2).className = 'cachemoi';}
function decoupe3(joueur1){
document.getElementById(joueur1).className = 'sortdutrou';}
function restecalme(joueur1,joueur8,ouioui){
if(version == 1){
for (var placier = 1; placier < ouioui; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';}
for (var placier = 1; placier < ouioui; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';}
document.getElementById(joueur1).className = 'sortdutrou';
document.getElementById(joueur8).className = 'cachemoi';
}
if(version == 2){
for (var placier = 1; placier < ouioui; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur4 = joueur3 + placier;
document.getElementById(joueur4).className = 'cachemoi';
}
for (var placier = 1; placier < ouioui; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
for (var placier = ouioui+1; placier < 17; placier++) {
joueur2 = joueur + placier;
document.getElementById(joueur2).className = 'cachemoi';
}
document.getElementById(joueur8).className = 'sortdutrou';
document.getElementById(joueur1).className = 'cachemoi';
}
}
Creating a function that positions the image in time and places the sound :
function change(persistanceretinienne)
{
switch (persistanceretinienne) {
case 0:
ouioui = persistanceretinienne + 1;
joueur1 = joueur + ouioui;
joueur8 = joueur3 + ouioui;
restecalme(joueur1,joueur8,ouioui);
</pre>
<div id="repere_son16"> </div>
<pre>
break;
We set a limit on the time counter :
function durermax()
{
clearInterval(nbimg);
}
We create the time counter using a loop that decrement the position of the image "persistanceretinienne--":
change(persistanceretinienne);
persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{
/* selection du nombre d'image*/
/* persistanceretinienne = 3;*/
persistanceretinienne = 15;
nbboucle = nbboucle-1;
}
}
We start playback of the video :
function lancertout()
{
nbimg = setInterval(seance, vitesseDuVent);
setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne);
}
We start the generation of sounds and lancertout :
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();
}
We create our audio file selector so that the same sound can be played several times at the same time. The technique is to create several times the same sound using different names, and the function calls each time a different name :
function JoueLeSon(mua1){
(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();}
}
We create a function that allows to change universes with each click of a button:
function action1Press(){
version = version + 1;
if(version>2){
version = 1;}
}
We click on the position buttons to change positions in the video:
document.getElementById("action1Pressa").addEventListener("click", action1Press);
function actionx1Press(){
persistanceretinienne = 15;}
We click on the position buttons to change positions in the video:
document.getElementById("action1Pressa").addEventListener("click", action1Press);
function actionx1Press(){
persistanceretinienne = 15;}
We ask the javascript files to start as soon as the HTML page is loaded :
document.addEventListener("DOMContentLoaded", function(event) {
load();
});
We will look for javascript multidirectional-talk.js:
<script type="text/javascript" src="page-scripts/multidirectional-talk.js"
And we close the HTML page generator :
</body>
</html>