Album de famille. Animation

Suite de l’article « Album de famille ».

8 mois se sont écoulés depuis la sortie de la première version de « Family Album ». Et j’avais une raison de continuer cette histoire de manière positive. Le fait est que lors du développement de ce programme, j’ai rencontré un problème très sérieux : les faibles performances des composants responsables de l’affichage des images : le simple chargement d’une image à partir d’un fichier et son affichage sur le formulaire peut prendre une seconde voire plus, selon la taille du fichier. À de telles vitesses, vous pouvez oublier le mode présentation et le projet lui-même peut être transféré dans la catégorie des projets éducatifs. Cependant, après une série d’expériences avec la transparence des formes, j’ai réussi à obtenir une animation acceptable lors du changement d’images avec pour effet une transition douce d’une image à l’autre.

Une autre raison de revenir sur ce projet était mon désir d’inclure des modules pour travailler avec des graphiques dans le programme ClearApp, j’ai donc porté le projet « Family Album » vers la dernière version de ClearApp afin de synchroniser ensuite les versions des modules individuels. En conséquence, l’apparence du programme a légèrement changé : il a acquis un menu principal et d’autres fonctions auxiliaires : paramètres de thème, aide interactive et possibilité d’enregistrer le programme.

Le mode présentation passe en plein écran. Sur mon moniteur 2K, cela a plutôt bien fonctionné, même si pour une raison quelconque, l’animation dans l’enregistrement n’est pas aussi fluide – apparemment, le programme de capture vidéo a échoué.

Un tour de passe-passe

Pour obtenir cet effet, j’ai dû créer trois formes :

• frmPlayer – un formulaire avec des boutons de contrôle de présentation ;
• frmFrame1 – formulaire d’affichage d’image ;
• frmFrame2 – est une autre forme d’affichage d’image.

frmFrame1 et frmFrame2 sont étirés pour remplir tout l’écran et, après avoir chargé l’image dans le composant TdbImage, ils se déplacent alternativement au premier plan. L’animation est obtenue en modifiant la propriété AlphaBlendValue de 0 (transparence totale) à 255 (opacité totale) de la forme qui se trouve au-dessus.

Le programme utilise deux minuteries : pour changer séquentiellement les images et pour masquer automatiquement les boutons du lecteur 5 secondes après que le curseur de la souris les quitte.

Scripts

La bibliothèque ClearApp doit être reconstituée avec un dossier ImageEdit entier, qui contient quatre modules :

• IEConstVar.pas – constantes et variables de l’éditeur d’images
• ImageEdit.pas – éditeur d’images
• TargetImage.pas – classe virtuelle de vignettes de l’éditeur d’images
• TargetImagePanel.pas – classe virtuelle pour le panneau de vignettes

Ajout de deux procédures de formulaire utiles :

• Form_SavePosSize – enregistrement de la position de la fenêtre dans les paramètres
• Form_RestorePosSize – restaure la position et la taille de la fenêtre en fonction des données des paramètres.

const
  FORM_PARAM_POS_SIZE = 'FormPosSize_';
  FORM_SECTION = 'Forms';
  FORM_WIDTH_DEF = 800;
  FORM_HEIGHT_DEF = 600;

procedure Form_SavePosSize(Sender: TObject;);
// enregistrement de la position de la fenêtre dans les paramètres
var
  tmpForm: TAForm;
  tmpName: string;
  tmpValue: string;
  tmpSection: string;
begin
  tmpForm := TAForm(Sender);
  // Parfois, le formulaire n'est pas visible pour des raisons inconnues
  // nous vérifions donc l'affichage complet sur l'écran.
  if (tmpForm.Top > 0) and (tmpForm.Left > 0) and ((tmpForm.Top + tmpForm.Height) < Screen.Height) and
    ((tmpForm.Left + tmpForm.Width) < Screen.Width) then
  begin
    tmpName := FORM_PARAM_POS_SIZE + TComponent(Sender).Name;
    if tmpForm.WindowState = wsMaximized then
      tmpValue := 'Maximized'
    else
      tmpValue := IntToStr(tmpForm.Left) + ',' + IntToStr(tmpForm.Top) + ',' + IntToStr(tmpForm.Width) + ',' +
        IntToStr(tmpForm.Height);
     tmpSection := FORM_SECTION;
    IniFile_Write(tmpSection,tmpName,tmpValue);
  end;
end;

procedure Form_RestorePosSize(Sender: TObject;);
// Restauration de la position et de la taille de la fenêtre en fonction des données des paramètres
// ATTENTION! la propriété Position du formulaire doit être définie sur poDesignedvar
var
  tmpName: string;
  tmpForm: TAForm;
  s: array of string;
  tmpValue: string;
  tmpImage: TdbImage;
  tmpSection: string;
begin
  try
    tmpForm := TAForm(Sender);
    tmpName := FORM_PARAM_POS_SIZE + TComponent(Sender).Name;
    tmpSection := FORM_SECTION;

    tmpValue := IniFile_Read(tmpSection,tmpName,'');
    if tmpValue <> '' then // Si le paramètre existe, alors
    begin // Restaurer la position et la taille
      s := SplitString(tmpValue, ',');
      if s[0] = 'Maximized' then // Si le formulaire a été agrandi en plein écran 
      begin
        tmpForm.Width := FORM_WIDTH_DEF;
        tmpForm.Height := FORM_HEIGHT_DEF;
        Form_Centered(tmpForm);
        tmpForm.WindowState := wsMaximized;
      end
      else
      begin
        tmpForm.Left := StrToInt(s[0]);
        tmpForm.Top := StrToInt(s[1]);
        tmpForm.Width := StrToInt(s[2]);
        tmpForm.Height := StrToInt(s[3]);
      end;
    end
    else
    begin
      Form_Centered(tmpForm);
    end;
  except
    RaiseException('Form_RestorePosSize() - '+ExceptionMessage);
  end;
end;Langage du code : Delphi (delphi)

Le lecteur

La forme du lecteur dans le concepteur n’a pas l’air très présentable, mais grâce au chargement automatique des images pour les boutons, elle devrait être tout à fait fonctionnelle. Certes, je n’ai toujours pas dessiné de bouton pour quitter le mode présentation, mais je promets de corriger ce malentendu prochainement.

Sur le formulaire se trouve un tableau invisible avec une liste d’images à afficher. La méthode clé du formulaire est la procédure frmPlayer_LoadData – chargement animé de l’image suivante de la liste :

procedure frmPlayer_LoadData;
// Chargement des données
var
  tmpRow: integer;
  i: integer;
begin
  tmpRow := frmPlayer.tgrImageList.SelectedRow;
  if tmpRow <> -1 then
  begin
    if not frmFrame1.Visible then
    begin
      ImageEdit_LoadImageFromBase( frmFrame1.imgMain, StrToInt(frmPlayer.tgrImageList.cells[0,tmpRow]), IE_FT_ORIGINAL, IE_IT_IMAGE);
      frmFrame1.AlphaBlendValue := 0;
      frmFrame1.Show;
      frmPlayer.Show;
      for i := 0 to 127 do
      begin
        frmFrame1.AlphaBlendValue := i*2;
        Application.ProcessMessages;
        sleep(5);
      end;
      frmFrame2.Visible := False;
    end
    else
    begin
      ImageEdit_LoadImageFromBase( frmFrame2.imgMain, StrToInt(frmPlayer.tgrImageList.cells[0,tmpRow]), IE_FT_ORIGINAL, IE_IT_IMAGE);
      frmFrame2.AlphaBlendValue := 0;
      frmFrame2.Show;
      frmPlayer.Show;
      for i := 0 to 127 do
      begin
        frmFrame2.AlphaBlendValue := i*2;
        Application.ProcessMessages;
        sleep(5);
      end;
      frmFrame1.Visible := False;
    end;
  end;
end;Langage du code : PHP (php)

Évidemment, cette procédure nécessite des améliorations – nous devons nous débarrasser d’un code similaire en créant une procédure distincte avec deux paramètres, mais pour l’instant, qu’il en soit ainsi.

À suivre…

Traduction : Yann Yvnec