Discussion :

[Archimède]

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

[Paul TOTH]

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

[Archimède]

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+

[Paul TOTH]

au passage, en HTML5 il est recommandé de passer par window.requestAnimationFrame (équivalent de onEnterFrame finalement) et non un timer

[Archimède]

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

[Archimède]

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+

[Paul TOTH]

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

[Archimède]

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

[Archimède]

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.

[Paul TOTH]

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"

[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