Fade In / Out an About Box or any Modal Delphi Form

Most applications host an "About Box" form used to display product information, version, copyright information etc.

In Delphi applications, such an "about the application" form would be displayed modally using the ShowModal method of the Form object.

Transparency and Opacity

To create a nice effect for the user, you might want to decide the form to fade in - appear gradually from a completely transparent window. Also, when the form is about to be closed - it fades out.

To "prepare" a form for transparency you need to set the AlphaBlend property to True. Once AlphaBlend is True, the AlphaBlendValue property specifies the degree of transparency. This property accepts values from 0 to 255. A value of 0 indicates a completely transparent window. A value of 255 indicates complete opacity.

Fade In / Out of an Modal About Box

Here's how to create a nice fade in / fade out effect for a modal Delphi form:

1. Add an "About Box" form to a Delphi project. This can easily be done by selecting File - New - Other - Delphi Projects - Delphi Files - About box from the main IDE menu.
2. Make sure the newly added form is not created when the application starts. Hint: Project - Options - Auto Create Forms.
3. Drop a TTimer (name "fadeTimer") control on the About box form.
4. Make sure Enabled property for the timer is set to False.
5. You'll need to hanle form's OnCreate and OnCloseQuery events.

Here's how the interface section looks like:

type
  TFadeType = (ftIn, ftOut) ;

  TAboutBox = class(TForm)
    //controls...
    procedure fadeTimerTimer(Sender: TObject) ;
    procedure FormCreate(Sender: TObject) ;
    procedure FormCloseQuery(Sender: TObject; var CanClose: Boolean) ;
  private
    fFadeType: TFadeType;
    property FadeType : TFadeType read fFadeType write fFadeType;
  public
    class function Execute() : TModalResult;
  end;

I have defined an enumeration type called TFadeType. The FadeType custom property is used to store the fade type: in or out. Here's how the OnCreate event should look:

procedure TAboutBox.FormCreate(Sender: TObject) ;
begin
  AlphaBlend := true;
  AlphaBlendValue := 0;
  fFadeType := ftIn;
  fadeTimer.Enabled := true;
end;

When the form is created, FateType is set to "fade in". Timer starts.

Timer's OnTime event does all the dirty work:

procedure TAboutBox.fadeTimerTimer(Sender: TObject) ;
const
  FADE_IN_SPEED = 3;
  FADE_OUT_SPEED = 5;
var
  newBlendValue : integer;
begin
  case FadeType of
    ftIn:
      begin
        if AlphaBlendValue < 255 then
          AlphaBlendValue := FADE_IN_SPEED + AlphaBlendValue
        else
          fadeTimer.Enabled := false;
      end;
    ftOut:
      begin
        if AlphaBlendValue > 0 then
        begin
          newBlendValue := -1 * FADE_OUT_SPEED + AlphaBlendValue;
          if newBlendValue > 0 then
            AlphaBlendValue := newBlendValue
          else
            AlphaBlendValue := 0;
        end
        else
        begin
          fadeTimer.Enabled := false;
          Close; //this time for real
        end;
      end;
  end;
end;

When the form is about to close we create the fade out effect:

procedure TAboutBox.FormCloseQuery(Sender: TObject; var CanClose: Boolean) ;
begin
  //no close before we fade away
  if FadeType = ftIn then
  begin
    fFadeType := ftOut;
    AlphaBlendValue := 255;
    fadeTimer.Enabled := true;
    CanClose := false;
  end
  else
  begin
    CanClose := true;
  end;
end;

Finally, to actually display the About Box, a class method is used:

class function TAboutBox.Execute: TModalResult;
begin
  with TAboutBox.Create(nil) do
  begin
    try
      result := ShowModal;
    finally
      Release;
    end;
  end;
end;

To display the About Box from a menu item click, for example, just add "about" (name of the About Box unit) to the uses caluse of the calling unit and call Execute:

procedure TMainForm.btnAboutBoxClick(Sender: TObject) ;
begin
  TAboutBox.Execute;
end;

That's it. Nice and simple.