Discussion :

[Roland Chastain]

Bonjour !

En regardant ces photos

http://www.flickr.com/photos/theatru...07552964/show/

je me suis aperçu que la page était faite en Flash.

Sans viser un résultat aussi sophistiqué, j'aimerais bien savoir faire un diaporama. Auriez-vous des idées à me donner sur le sujet ? En attendant, je suis en train de regarder d'anciens exemples pour voir si le sujet n'a pas déjà été traité.

[Roland Chastain]

Voici un premier essai, d'après le Globe de Paul TOTH.

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
54
55
56
57
58
59
60
61
62
program Diaporama;
 
{$FRAME_WIDTH 800}
{$FRAME_HEIGHT 600}
{$FRAME_RATE 10}
 
{$JPEG photo1 'januar2013_1.jpg'}
{$JPEG photo2 'januar2013_2.jpg'}
 
uses
  Flash8;
 
const
  SCALE = 1;
 {ORG_X = 0;
  ORG_Y = 0;}
  ORG_X = 800 div 4;
  ORG_Y = 600 div 4;
  NOMBRE_PHOTOS = 2;
  DELAI = 30; // 3 sec.
 
type
  TDiaporama = class(MovieClip)
    Index: Integer;
    Compteur: Integer;
    Image: MovieClip;
    constructor Create;
    procedure onEnterFrame; override;
  end;
 
constructor TDiaporama.Create;
begin
  inherited Create(_root, 'diaporama', _root.getNextHighestDepth);
  Index := 1;
  Compteur := 0;
  _x := ORG_X;
  _y := ORG_Y;
  Image := MovieClip.Create(Self, 'image', 0);
end;
 
procedure TDiaporama.onEnterFrame;
begin
  if Compteur = 0 then // toutes les 3 sec.
  begin
    Image.Clear;
    Image.attachBitmap(loadBitmap('photo'+IntToStr(Index)), 0);
    Inc(Index);
    if Index >  NOMBRE_PHOTOS then
      Index := 1;
  end;
  Compteur := (Compteur + 1) mod DELAI;
end;
 
begin
  with TDiaporama.Create do
  begin
   {_xscale := 100 * SCALE;
    _yscale := 100 * SCALE;}
    _xscale := 50 * SCALE;
    _yscale := 50 * SCALE;
  end;
end.

Joyeuses Pâques !

[Paul TOTH]

Hello,

alors tu as quelque chose qui s'en approche sur mon site.

c'est développé avec FlashPascal mais je n'ai pas livré les sources, bien qu'il soit expliqué ici.

Mais ce qui est surtout intéressant c'est l'utilisation d'un MovieClipLoader, les images sont alors chargées dynamiquement depuis le site web au lieu d'être intégrées au .SWF...lui sera tout petit et s'initialise rapidement avec une barre de progression pendant le chargement de l'image; quand les images sont intégrées, il faut attendre que tout le SWF soit chargé avant qu'il ne s'affiche.

voici une version modifiée de ton code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
 
program Diaporama;
 
{$FRAME_WIDTH 800}
{$FRAME_HEIGHT 600}
{$FRAME_RATE 10}
 
{-$JPEG photo1 'januar2013_1.jpg'}
{-$JPEG photo2 'januar2013_2.jpg'}
 
uses
  Flash8;
 
const
  SCALE = 1;
 {ORG_X = 0;
  ORG_Y = 0;}
  ORG_X = 800 div 4;
  ORG_Y = 600 div 4;
  NOMBRE_PHOTOS = 2;
  DELAI = 30; // 3 sec.
 
type
  TDiaporama = class(MovieClip)
    Index: Integer;
    Compteur: Integer;
    Image1: MovieClip;
    Image2: MovieClip;
 // le chargeur d'images
    loader: MovieClipLoader;
  // numéro d'image à charger
    Index : Integer;
  // juste pour le debug
    log   : TextField;
    constructor Create;
//    procedure onEnterFrame; override;
   // les évènements du loader
    procedure onLoadProgress(target_mc: MovieClip; loadedBytes, totalBytes: Integer);
    procedure onLoadError(target_mc: MovieClip; ErrorCode: string; HttpStatus: Integer);
    procedure onLoadComplete(target_mc: MovieClip; httpStatus: Integer);
  end;
 
constructor TDiaporama.Create;
begin
  inherited Create(_root, 'diaporama', _root.getNextHighestDepth);
  Index := 1;
  Compteur := 0;
  _x := ORG_X;
  _y := ORG_Y;
// on crée deux images
  Image1 := MovieClip.Create(Self, 'image1', 1);
  Image1._x := -150;
  Image1._y := -150;
  Image2 := MovieClip.Create(Self, 'image2', 2);
  Image2._x := +150;
  Image2._y := +150;
// pour le debug
  Log := TextField.Create(Self, 'log', 3, 0, 0, 100, 100);
// le chargeur d'images
  loader := MovieClipLoader.Create;
// lui dire de nous envoyer les évènements
  loader.addListener(Self);
// chargement de la première image dans Image1
  Index := 1;
  loader.loadClip('januar2013_1.jpg', Image1);
end;
 
// dessin d'une barre de progression (non visible en local, c'est trop rapide)
procedure Progress(Image: MovieClip; width: Number);
begin
  Image.moveto(100  , 180);
  Image.lineto(100+width, 180);
  Image.lineto(100+width, 220);
  Image.lineto(100, 120);
  Image.lineTo(100, 180);
end;
 
// pendant le chargement, afficher la barre de progression
procedure TDiaporama.onLoadProgress(target_mc: MovieClip; loadedBytes, totalBytes: Integer);
begin
  target_mc.beginFill($ffffff);
  Progress(target_mc, 200 * loadedBytes / totalBytes);
end;
 
// en cas d'erreur afficher dans log
procedure TDiaporama.onLoadError(target_mc: MovieClip; ErrorCode: string; HttpStatus: Integer);
begin
  log.text := ErrorCode;
end;
 
// image lue, charger la suivante dans image2
procedure TDiaporama.onLoadComplete(target_mc: MovieClip; httpStatus: Integer);
begin
  Inc(Index);
  if Index = 2 then
    loader.loadClip('januar2013_2.jpg', Image2);
end;
(*
procedure TDiaporama.onEnterFrame;
begin
  if Compteur = 0 then // toutes les 3 sec.
  begin
    Image.Clear;
    Image.attachBitmap(loadBitmap('photo'+IntToStr(Index)), 0);
    Inc(Index);
    if Index >  NOMBRE_PHOTOS then
      Index := 1;
  end;
  Compteur := (Compteur + 1) mod DELAI;
end;
*)
begin
  with TDiaporama.Create do
  begin
   {_xscale := 100 * SCALE;
    _yscale := 100 * SCALE;}
    _xscale := 50 * SCALE;
    _yscale := 50 * SCALE;
  end;
end.

sur le 'livre' de mon site, la liste des images est stockée dans un fichier XML, ça évite de devoir recompiler le SWF à chaque fois que je veux ajouter une photo, au lieu d'avoir la liste des images en dur, il charge le fichier XML

[Roland Chastain]

Merci beaucoup Paul pour cet exemple, très intéressant en effet.

J'aime bien le code de la barre de progression : très simple, très beau. Bien noté aussi l'astuce du fichier XML.

J'ai retravaillé le code, avec de nouvelles photos, de différents formats cette fois. Je voulais centrer les photos. Pour celles qui dépassent de mon cadre, je pensais me contenter dans un premier temps de les placer tout en haut à gauche.

Le code ne donne pas l'effet attendu. On dirait que l'image est placée de façon aléatoire.

Dans cet exemple je n'ai mis qu'une seule image pour faire plus simple, mais j'ai bien noté l'astuce des deux images.

Pourrais-tu me dire ce qui ne va pas dans ce code ?

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
procedure TDiaporama.onEnterFrame;
begin
  if Compteur > 0 then
    Inc(compteur);
 
  if Compteur = DELAI then
  begin
    Loader.LoadClip('1871\'+IntToStr3(Index)+'.jpg', Image1);
 
    if (Image1._width > LARGEUR) or (Image1._height > HAUTEUR) then
    begin
      Image1._x := 0;
      Image1._y := 0;
    end else
    begin
      Image1._x := (LARGEUR - Image1._width) / 2;
      Image1._y := (HAUTEUR - Image1._height) / 2;
    end;
 
    Compteur := 0;
  end;
end;

[Paul TOTH]

je n'ai pas regardé le .ZIP mais la position de l'image ne devrait être définie qu'à la fin du chargement (onLoadComplete) avant cela Image1 possède la taille de l'image précédente.

arg, en fait non, il faut utiliser onLoadInit

It's important to understand the difference between MovieClipLoader.onLoadComplete and MovieClipLoader.onLoadInit. The onLoadComplete event is called after the SWF, JPEG, GIF, or PNG file loads, but before the application is initialized. At this point, it is impossible to access the loaded movie clip's methods and properties, and therefore you cannot call a function, move to a specific frame, and so on. In most situations, it's better to use the onLoadInit event instead, which is called after the content is loaded and fully initialized.

http://www.kirupa.com/forum/showthre...ovieClipLoader)

[Roland Chastain]

D'accord, je vois mon erreur, et aussi la différence entre onLoadComplete et onLoadInit. Je vais modifier mon code en conséquence.

[Roland Chastain]

voilà, ça fonctionne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
procedure TDiaporama.onLoadInit(target_mc: MovieClip);
begin
  Image1._x := (LARGEUR - Image1._width) / 2;
  Image1._y := (HAUTEUR - Image1._height) / 2;
end;

J'ai corrigé le code et remplacé l'archive (voir plus haut).

J'ai choisi un cadre assez grand pour que toutes mes photos y entrent : je n'ai pas eu besoin de mettre les images à l'échelle mais on pourrait facilement le faire suivant la même méthode.

Il y a encore d'autres améliorations auxquelles on pourrait penser, mais je crois que la discussion est résolue.

[Paul TOTH]

en jouant avec deux images tu pourras faire des effets de fading ( ._alpha va de 100 à 0 pour la précédente et de 0 à 100 pour la suivante) voir des mélanges d'image, etc...MovieClip comprend des fonctions de traitement d'image assez puissantes (cf exemple Wood)

[Roland Chastain]

en jouant avec deux images tu pourras faire des effets de fading ( ._alpha va de 100 à 0 pour la précédente et de 0 à 100 pour la suivante) voir des mélanges d'image, etc...MovieClip comprend des fonctions de traitement d'image assez puissantes (cf exemple Wood)

C'est noté.

[Archimède]

C'est noté.

Sympa ce petit diapo... C'est vrai qu'en ajoutant à la fin du onEnterFrame :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
     Compteur := 0;
  end;
  image1._alpha:=100*compteur/DELAI;//ici
end;

tu as les images surgissantes...



anthony