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