1. #1
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut Comparaison Javascript Flash

    Je me suis amusé à comparer deux mêmes animations en flash (flashpascal) et html5/javascript.

    C'est plus efficace en javascript. Pourquoi ? je ne pense pas avoir forcément mal écrit mon animation en flash...

    Pour les petites bannières qui accompagnent les sites, je ne crois pas que flash soit la meilleure solution. Heureusement que les possibilités sous flash sont infiniment plus grandes qu'en javascript sinon, il y a du souci à se faire...

    anthony
    Fichiers attachés Fichiers attachés

  2. #2
    Expert éminent sénior
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    novembre 2002
    Messages
    6 665
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2002
    Messages : 6 665
    Points : 21 159
    Points
    21 159

    Par défaut

    OK, j'ai fait quelques recherches...déjà quand on affiche le FPS (GetTimer() - InitialTimer)/FrameCount on constate que le FPS ne dépasse jamais 60 !

    ce qui est confirmé ici http://www.adobe.com/devnet/scout/articles/understanding-flashplayer-with-scout.html

    il convient donc de calculer la position des images en fonction du temps et non simplement d'incrémenter _x à chaque frame.

    voici ce que ça donne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
     
    program Psavant2;
     
    {$FRAME_WIDTH 780}
    {$FRAME_HEIGHT 170}
    {$BACKGROUND $FFFFFF}
    {$FRAME_RATE 60}
     
    {$JPEG  savant 'tilsav.png'}
     
    uses
      Flash8;//,Udefiltil;
     
    type
      TMovie = class(MovieClip)
        t: TextField;
        b1, b2: MovieClip;
        frames: Integer;
        timer: Number;
        constructor Create;
        procedure onEnterFrame(); override;
      end;
     
    constructor TMovie.Create;
    var
      b: BitmapData;
    begin
      inherited Create(_root, 'm', 1);
      b := loadBitmap('savant');
      b1 := MovieClip.Create(Self, 'b1', 1);
      b2 := MovieClip.Create(Self, 'b2', 2);
      t := TextField.Create(_root, 't', 2, 0, 0, 100, 21);
      b1.AttachBitmap(b, 1);
      b2.AttachBitmap(b, 1);
      b2._x := -780;
      timer := GetTimer();
    end;
     
    procedure TMovie.onEnterFrame();
    begin
      Inc(frames);
      t.Text := FloatToStr(frames * 1000 / (GetTimer() - timer));
      (*
      _x := _x + 100/60;
      if _x >= 780 then
        _x := 0;
      *)
      _x := Round((GetTimer() - timer)/10) mod 780;
    end;
     
    begin
     Tmovie.Create();
    end.
    ceci dit ta remarque est très juste, HTML5 fait bcp de concurrence à Flash Le seul bémol pour moi c'est que HTML5 n'est ni compressé ni encodé...et pour protéger ses créations c'est pas top...et en plus ce n'est pas du Pascal
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Produits : UPnP, RemoteOffice, FlashPascal

  3. #3
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut

    En effet ...! Super intéressant tes petites recherches

    Merci pour tes explications et tes remarques pertinentes.
    J'ai bien aimé : "En plus, ce n'est pas du pascal"

    a+

  4. #4
    Expert éminent sénior
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    novembre 2002
    Messages
    6 665
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2002
    Messages : 6 665
    Points : 21 159
    Points
    21 159

    Par défaut

    au passage, en HTML5 il est recommandé de passer par window.requestAnimationFrame (équivalent de onEnterFrame finalement) et non un timer
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Produits : UPnP, RemoteOffice, FlashPascal

  5. #5
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut

    Citation Envoyé par Paul TOTH Voir le message
    au passage, en HTML5 il est recommandé de passer par window.requestAnimationFrame (équivalent de onEnterFrame finalement) et non un timer
    Merci pour l'info , je ne savais pas...

    D'aillleurs, il y a ce lien là qui n'est pas mal non plus :

    http://msdn.microsoft.com/fr-fr/libr...=vs.85%29.aspx

    Il y a même des idées d'exemple pour flashpascal :
    http://ie.microsoft.com/testdrive/Gr...l/Default.html

    là, c'est chaud...

  6. #6
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut

    requestAnimFrame n'est pas encore opérationnel sur tous les navigateurs...
    En effet sur opéra, je n'ai pas d'animation...
    Est-ce que vous, ça fonctionne ? (ci-joint en pièces jointes).

    Donc pour l'instant, Flash peut encore respirer... La balise canvas n'est pas supporté par les navigateurs plus anciens et puis toutes les méthodes ne sont pas supportées par l'ensemble des navigateurs...
    a+
    Fichiers attachés Fichiers attachés

  7. #7
    Expert éminent sénior
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    novembre 2002
    Messages
    6 665
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2002
    Messages : 6 665
    Points : 21 159
    Points
    21 159

    Par défaut

    tu peux définir une fonction crossbrower comme ceci

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    window.requestAFrame = (function () {
    	return window.requestAnimationFrame ||
    		window.webkitRequestAnimationFrame ||
    		window.mozRequestAnimationFrame ||
    		window.oRequestAnimationFrame ||
    		// if all else fails, use setTimeout
    		function (callback) {
    		 return window.setTimeout(function() {
                       callback(new Date().getTime() - startTime)}, 1000 / 60); // shoot for 60 fps
    };
    })();

    ensuite tu utilise requestAFrame de la même façon que requestAnimationFrame
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Produits : UPnP, RemoteOffice, FlashPascal

  8. #8
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut

    Citation Envoyé par Paul TOTH Voir le message
    tu peux définir une fonction crossbrower comme ceci

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    window.requestAFrame = (function () {
    	return window.requestAnimationFrame ||
    		window.webkitRequestAnimationFrame ||
    		window.mozRequestAnimationFrame ||
    		window.oRequestAnimationFrame ||
    		// if all else fails, use setTimeout
    		function (callback) {
    		 return window.setTimeout(function() {
                       callback(new Date().getTime() - startTime)}, 1000 / 60); // shoot for 60 fps
    };
    })();

    ensuite tu utilise requestAFrame de la même façon que requestAnimationFrame
    Oui en effet ainsi, on a une solution de rechange...
    A quand des navigateurs standards qui nous évite de faire de la bidouille

    merci

  9. #9
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut

    J'ai eu un petit souci avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    callback(new Date().getTime() - startTime)}, 1000 / 60); // shoot for 60 fps
    ça ne fonctionnait pas...
    voir ci-dessous-> j'ai rectifié, ci-joint :


    code html5+ javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
     
    <!DOCTYPE html>
    <html lang='fr'>
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      </head>
      <body>
        <canvas id="cancan" width="780" height="170" style="border:1px solid black">
         votre navigateur ne supporte pas la balise canvas
        </canvas>
     
      <script type="text/javascript">
           var c = document.getElementById("cancan");
           var ctx = c.getContext("2d");
           var x=-1;  
           var im=new Image();
           im.src='tilsav.png';
     
          window.requestAFrame = (function(){
           return  window.requestAnimationFrame       ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame    ||
                   function( callback ){
                   window.setTimeout(callback,25);  //intervalle timer  25 ms  c'est mieux, ça scintillait...:fps=1/(25/1000)=1000/25=40 frames/s (Hz)
                   };
           })();
     
     
           function draw() { 
             x+=1;
             ctx.drawImage(im,x,0);
             ctx.drawImage(im,x-780,0);
             if (x==780) {x=-1};
           }
     
            function render(){
             draw();
             window.requestAFrame(render);
            }
     
            render();
     
     </script>
      </body>
    </html>
    La solution du timer est maintenant opérationnel dans opera.

  10. #10
    Expert éminent sénior
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    novembre 2002
    Messages
    6 665
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2002
    Messages : 6 665
    Points : 21 159
    Points
    21 159

    Par défaut

    en effet, il faut initialiser startTime

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    var startTime = new Date().getTime();
     
    window.requestAFrame = (function () {
    	return window.requestAnimationFrame ||
    				window.webkitRequestAnimationFrame ||
    				window.mozRequestAnimationFrame ||
    				window.oRequestAnimationFrame ||
    				// if all else fails, use setTimeout
    				function (callback) {
    					return window.setTimeout(function() {callback(new Date().getTime() - startTime)}, 1000 / 60); // shoot for 60 fps
    				};
    })();

    ton code ne s'en sert pas mais la fonction requestAnimaionFrame possède un paramètre qui indique le temps passé, on peut par exemple faire ceci:

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    function animate(time) {
      // il s'est passé "time" ms depuis le début	
      requestAFrame(animate); 
    }
     
    // lancer l'animation
    requestAFrame(animate);

    d'où l'intérêt de passer en paramètre "new Date().getTime() - startTime"
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Produits : UPnP, RemoteOffice, FlashPascal

  11. #11
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 295
    Points : 1 433
    Points
    1 433

    Par défaut

    Oui, je me suis bien douté qu'il manquait la déclaration mais comme ça ne présentait pas d'intérêt pour faire tourner mon animation, je l'ai zappé...

    Merci pour le complément

Discussions similaires

  1. Intéraction Javascript - Flash
    Par jak0 dans le forum JavaScript
    Réponses: 2
    Dernier message: 17/12/2007, 15h16
  2. [javascript] Flash clickable
    Par lthomas dans le forum JavaScript
    Réponses: 16
    Dernier message: 17/03/2006, 17h24
  3. [FLASH MX2004] Javascript --> Flash
    Par bomber dans le forum Flash
    Réponses: 5
    Dernier message: 03/03/2005, 16h25
  4. [FLASH MX 2004] Communication javascript--flash
    Par meslaey dans le forum Flash
    Réponses: 4
    Dernier message: 28/06/2004, 09h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo