Réalisation d'un diaporama

Version imprimable

30/03/2013, 21h32
Roland Chastain

Réalisation d'un diaporama

Bonjour !

En regardant ces photos

Citation:

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

1 pièce(s) jointe(s)

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

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
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 ! :)

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:

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

1 pièce(s) jointe(s)

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

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

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:

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;

04/04/2013, 12h33
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

Citation:

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)
04/04/2013, 14h36
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.
06/04/2013, 00h52
Roland Chastain
voilà, ça fonctionne. :)
Code:

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. :)
06/04/2013, 06h46
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)
06/04/2013, 12h57
Roland Chastain

Citation:

Envoyé par 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)

C'est noté. :ccool:
11/04/2013, 20h42
Archimède
Citation:

Envoyé par Roland Chastain

C'est noté. :ccool:

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

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

:ccool:

anthony