Equivalent gif animé

Version imprimable

1 pièce(s) jointe(s)

Ci-joint une unité qui permet de se faire vite fait une petite animation à partir d'une décomposition d'images :

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
54
55
 
unit Umovie;
{$FRAME_RATE 10}
interface
uses
  flash8;
type
 TMovie=class(movieclip)
 private
   indice:integer;
   bmp: BitmapData;
   Arrayimages:array of string;
   mc:array of movieclip;
   procedure setcharge(value:array of string);
 
 public
   procedure onEnterFrame;override;
   constructor create(parent:movieclip);
   property chargeimages:array of string read Arrayimages write setcharge;
 end;
implementation
 
constructor TMovie.Create(parent:movieclip);
 
begin
   inherited Create(parent,'movie', movieclip(parent).getNextHighestDepth());
   indice:=0;
end;
 
Procedure TMovie.setcharge(value:array of string);
var i:integer;
begin
 Arrayimages:=value;
 for i:=0 to value.length-1 do
   begin
    bmp := loadBitmap(Arrayimages[i]);
    mc[i]:=movieclip.Create(self,'',i);
    mc[i].attachBitmap(bmp,0);
    mc[i]._visible:=false;
   end;
end;
 
procedure Tmovie.onEnterFrame;
var i:integer;
begin
  if indice>mc.length-1 then
  begin
   indice:=0;
   for i:=0 to mc.length-1 do mc[i]._visible:=false;
  end;
  mc[indice]._visible:=true;
  inc(indice);
end;
 
end.

un programme tout petit :

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
 
program Pglobe;
{$FRAME_WIDTH 104}
{$FRAME_HEIGHT 104}
{$JPEG  nom1 'g1.jpg'}  //images 52x52 px
{$JPEG  nom2 'g2.jpg'}
{$JPEG  nom3 'g3.jpg'}
{$JPEG  nom4 'g4.jpg'}
{$JPEG  nom5 'g5.jpg'}
{$JPEG  nom6 'g6.jpg'}
{$JPEG  nom7 'g7.jpg'}
{$JPEG  nom8 'g8.jpg'}
{$JPEG  nom9 'g9.jpg'}
{$JPEG  nom10 'g10.jpg'}
{$JPEG  nom11 'g11.jpg'}
{$JPEG  nom12 'g12.jpg'}
{$JPEG  nom13 'g13.jpg'}
{$JPEG  nom14 'g14.jpg'}
{$JPEG  nom15 'g15.jpg'}
{$JPEG  nom16 'g16.jpg'}
{$JPEG  nom17 'g17.jpg'}
{$JPEG  nom18 'g18.jpg'}
{$JPEG  nom19 'g19.jpg'}
{$JPEG  nom20 'g20.jpg'}
{$JPEG  nom21 'g21.jpg'}
 
uses
  Flash8,Umovie;
 
const globe:array[0..20] of string=('nom1','nom2','nom3','nom4','nom5','nom6','nom7','nom8','nom9','nom10','nom11','nom12','nom13','nom14','nom15','nom16','nom17','nom18','nom19','nom20','nom21');
 
 
var movie:Tmovie;
 
begin
  movie:=TMovie.create(_root);
  movie.chargeimages:=globe;
  movie._xscale:=200; //ici parce ce que les images sont petites
  movie._yscale:=200;
 
  stage.scaleMode :='noScale'; //pour éviter la pixelisation
end.

les images sont en pièces jointes.

Si vous connaissez une adresse où trouver des images libres de décomposition de mouvement, je suis preneur. C'est utile pour agrémenter un site web...

je ne me souviens plus d'ailleurs où j'avais trouvé ces images...

bonne soirée

24/07/2012, 06h30
Paul TOTH

1 pièce(s) jointe(s)

très sympa :)

je t'en propose une autre version qui montre la technique des caches (mask) avec un "tileset". L'avantage d'avoir toutes les images dans un seul fichier est double, un seul chargement et une compression globale plus efficace avec un fichier JPG plus petit que la somme des 21 petites images.

Pièce jointe 99630
24/07/2012, 10h47
Archimède

génial :ccool:
Je connaissais le tileset, mais je ne savais pas comment m'en servir.
Maintenant, c'est chose faite...
Le Mask, on en a maintenant une belle explication...
je vais remettre ça en situation ce soir avec un autre tielset, ça me donne envie.

merci pour ta solution plus avantageuse :ccool:

1 pièce(s) jointe(s)

Pour illustrer les travaux de Muybridge sur la décomposition du mouvement, je me suis essayé sur l'homme montant des escaliers...

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
 
program Escalier;
 
{$FRAME_WIDTH 107}
{$FRAME_HEIGHT 201}
{$FRAME_RATE 10}
 
{$JPEG  escalier 'escalier.jpg'}  // 2 x 6 images de 107x201 px
 
 
uses
  Flash8;
 
type
  Tescalier = class(MovieClip)
    Image: MovieClip;
    constructor Create;
    procedure onEnterFrame; override;
  end;
 
constructor Tescalier.Create;
var
  Mask : MovieClip;
begin
  inherited Create(_root, 'escalier', _root.getNextHighestDepth);
  Image := MovieClip.Create(Self, 'image', 0);
  Mask  := MovieClip.Create(Self, 'mask',  1);
  Image.attachBitmap(loadBitmap('escalier'), 0);
  with Mask do
  begin
    beginFill($ffffff);
    lineTo(107, 0);
    lineTo(107, 201);
    lineTo(0, 201);
  end;
  Image.SetMask(Mask);
end;
 
procedure Tescalier.onEnterFrame;
begin
  Image._x := Image._x - 107;
  if Image._x = - 642 then
  begin
    Image._x :=0;
    Image._y := Image._y - 201;
    if Image._y = - 402 then Image._y := 0;
  end;
end;
 
begin
 Tescalier.Create
end.

le code est le même... il faudrait se faire un objet pour charger les tilesets.
ce n'est pas très difficile...

lien du tileset :http://fr.wikipedia.org/wiki/Eadweard_Muybridge

résultat en pièce jointe

Avec une unité utileset pour faire ça rapidement.

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
54
55
56
57
58
59
60
61
62
63
64
65
 
unit UTileset;
 
{$FRAME_RATE 10}
interface
uses
  flash8;
type
 TMovie=class(movieclip)
 private
   c,r,w,h:number;
   sizex,sizey:number;
   Image,Mask: MovieClip;
   procedure setcharge(jpeg:string);
 public
   procedure onEnterFrame;override;
   constructor create(parent:movieclip;col,row,width,height:number);
   property chargetileset:string write setcharge;
 end;
 
implementation
 
constructor TMovie.create(parent:movieclip;col,row,width,height:number);
begin
 inherited Create(parent,'movie', movieclip(parent).getNextHighestDepth());
 w:=width;
 h:=height;
 c:=col;
 r:=row;
 sizex:=w/col;
 sizey:=h/row;
 Image := MovieClip.Create(Self, 'image', 0);
 Mask  := MovieClip.Create(Self, 'mask',  1);
  with Mask do
  begin
    beginFill($ffffff);
    lineTo(sizex, 0);
    lineTo(sizex, sizey);
    lineTo(0, sizey);
  end;
end;
 
 
procedure Tmovie.setcharge(jpeg:string);
begin
 with Image do
 begin
  attachBitmap(loadBitmap(jpeg),0);
  SetMask(Mask);
 end;
end;
 
 
procedure TMovie.onEnterFrame;
begin
  Image._x := Image._x -sizex;
  if Image._x = -c*sizex  then
  begin
    Image._x :=0;
    Image._y := Image._y - sizey;
    if Image._y = - r*sizey then Image._y := 0;
  end;
end;
 
end.

le programme super short:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
program Escalier;
 
{$FRAME_WIDTH  107}
{$FRAME_HEIGHT  201}
 
{$JPEG  escalier 'escalier.jpg'}  // 2 x 6 images de 107x201 px
 
uses
  Flash8,Utileset;
 
begin
 with Tmovie.Create(_root,6,2,642,402) do chargetileset:='escalier';   //6 col, 2 lignes +dim du tileset
end.
 
//j'ai testé avec globe, c'est bon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
program globe;
 
{$FRAME_WIDTH  52}
{$FRAME_HEIGHT  52}
 
{$JPEG  globe 'globe.jpg'}  // 7 x 3 images de 52x52 px
 
uses
  Flash8,Utileset;
 
begin
 with Tmovie.Create(_root,7,3,364,156) do chargetileset:='globe';
end.

très bien, mais ça aurait été plus sympa avec celle là ;)

par contre l'animation se joue en sens inverse et il faut sauter une image...

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
54
55
56
57
 
program Escalier;
 
{$FRAME_WIDTH 179}
{$FRAME_HEIGHT 573}
{$FRAME_RATE 14}
 
{$JPEG  escalier 'escalier.jpg'}  // 2 x 12 images de 2158x1146 px
 
 
uses
  Flash8;
 
type
  Tescalier = class(MovieClip)
    Image: MovieClip;
    constructor Create;
    procedure onEnterFrame; override;
  end;
 
constructor Tescalier.Create;
var
  Mask : MovieClip;
begin
  inherited Create(_root, 'escalier', _root.getNextHighestDepth);
  Image := MovieClip.Create(Self, 'image', 0);
  Mask  := MovieClip.Create(Self, 'mask',  1);
  Image.attachBitmap(loadBitmap('escalier'), 0);
 
  Image._x := - 11 * Stage.Width;
 
  with Mask do
  begin
    beginFill($ffffff);
    lineTo(Stage.Width, 0);
    lineTo(Stage.Width, Stage.Height);
    lineTo(0, Stage.Height);
  end;
  Image.SetMask(Mask);
end;
 
procedure Tescalier.onEnterFrame;
begin
  Image._x := Image._x + Stage.Width;
  if (Image._y < 0) and (Image._x = - 9 * Stage.Width) then
    Image._x := Image._x + Stage.Width;
  if Image._x > 0 then
  begin
    Image._x := - 11 * Stage.Width;
    Image._y := Image._y - Stage.Height;
    if Image._y = - 2 * Stage.Height then Image._y := 0;
  end;
end;
 
begin
 Tescalier.Create
end.

10/08/2012, 10h49
Archimède

Hello, désolé, je reviens de vacances...

Ah oui, c'est nettement plus intéressant :D...;)
Ce tileset m'avait échappé...
A joindre dans tes exemples en pièces jointes, ça donne du piquant :D:ccool: