Création de vidéo interactive HTML en mode avancé

Director: Abadie joris (born Juillet 17, 1990)
Homme et Temps joris Abadie

Raison du mode avancé.

Le mode avancé s'aborde qu'une fois que les autres concepts de la vidéo interactive en HTML5 ont été assimilés
Le mode avancé n'apporte rien à la communication
Le mode avancé est une dépendance des technologies du moment
Le mode avancé génère le HTML5 avec du javascript pour obtenir des vidéos interactives légères.

Concept du mode avancé.

En mode classique quand nous créons un personnage, nous le redessinons dans chaque image
En mode avancé, nous dessinons une seule fois le personnage, et nous l'appelons dans les images de la vidéo à l'aide du javascript
Le javascript permet aussi de modifier qu'une petite partie du personnage.

Appel d'une fonction javascript dans une image générée en css.

Pour appeler la fonction javascript nommée lance1.
Il faut écrire dans le body de l'image

<script type="text/javascript">lancer1();</script>

Démonstration par l'exemple.

getElementsByClassName

<!doctype html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>mode avance 1</title> 
    <script> 
/*mes variables*/ 
var x = document.getElementsByClassName("carrer16"); 
var i; 
/*mes fonctions*/ 
function lancer1() 
{ for (i = 0; i < x.length; i++) {  x[i].style.backgroundColor = "#009999"; } } 
 </script> 
<style> 
.carrer16{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;} 
</style> 
    </head> 
<body> 
    <div style="margin-top: 50px;"> 
    <div class="carrer16" style="margin-left: 50px; background: yellow;"></div> 
<script type="text/javascript">lancer1();</script></div> 

    <div style="margin-left: 150px;"> 
    <div class="carrer16" style="margin-left: 50px; background: yellow;"></div> 
</div> 

</body> 
</html>

getElementById

<!DOCTYPE html>
<html>
    <head>
        <title>Manipulation video</title>
    <script>
var lance1fin = false;
function lancer1() {
   lance1fin = true;
        var alfa1 = document.getElementById('fleur1');
        var classon = alfa1.getAttribute('class'); 
        alert(classon);
        alfa1.setAttribute('class', 'carrer1'); 
        if(lance1fin == true)
        return;}

function attrape() {
   lance1fin = true;
        var alfa1 = document.getElementById('fleur1');
        var classon = alfa1.getAttribute('class'); // On récupère l'attribut « class »
        alert(classon);
        alfa1.setAttribute('class', 'carrer16'); // On édite l'attribut « class »
        if(lance1fin == true)
        return;}
    </script>
<style> 
.carrer16{position: absolute; width: 40px; height: 40px; background: #ff9999; -webkit-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;border-radius:1% 90% 1% 90% / 90% 90% 1% 90%;-moz-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;-o-border-radius:1px 72px 1px 72px/36px 36px 0px 36px;} 
.carrer1{position: absolute; width: 40px; height: 40px; background: #ff9999; } 
</style> 
    </head>
<body>
 <div id="fleur1" class="carrer16">
<div><script type="text/javascript">lancer1();</script></div> 
</div>
<button onclick="attrape()" style="margin-left: 150px; margin-top: 150px;"> anti</button>
</body>
</html>