Comparaison Javascript Flash

Version imprimable

04/11/2013, 12h16
Archimède

1 pièce(s) jointe(s)

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

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:

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

04/11/2013, 18h42
Archimède

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

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

a+
05/11/2013, 06h44
Paul TOTH

au passage, en HTML5 il est recommandé de passer par window.requestAnimationFrame (équivalent de onEnterFrame finalement) et non un timer :)
05/11/2013, 17h12
Archimède

Citation:

Envoyé par Paul TOTH

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...:ccool:

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...:)
09/11/2013, 10h44
Archimède

2 pièce(s) jointe(s)

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+

tu peux définir une fonction crossbrower comme ceci

Code:

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

Citation:
Envoyé par Paul TOTH
tu peux définir une fonction crossbrower comme ceci
Code:

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... :ccool:
A quand des navigateurs standards qui nous évite de faire de la bidouille :D

merci

J'ai eu un petit souci avec :

Code:

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:

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.

en effet, il faut initialiser startTime

Code:

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:

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"

10/11/2013, 14h45
Archimède

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