Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Rédacteur/Modérateur

    Réalisation d'un diaporama
    Bonjour !

    En regardant ces photos

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

  2. #2
    Rédacteur/Modérateur

    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 !

  3. #3
    Expert éminent sénior
    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
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Le Store Excute Store

  4. ###raw>post.musername###
    Rédacteur/Modérateur
    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;
      0  0

  5. #5
    Expert éminent sénior
    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)
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Le Store Excute Store

  6. #6
    Rédacteur/Modérateur

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

  7. #7
    Rédacteur/Modérateur

    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.

  8. #8
    Expert éminent sénior
    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)
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Le Store Excute Store

  9. #9
    Rédacteur/Modérateur

    Citation Envoyé par Paul TOTH Voir le message
    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é.

  10. #10
    Membre expérimenté
    Citation Envoyé par Roland Chastain Voir le message
    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