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.