In this tutorial we will learn how to create a beautiful fade effect, using a timer component, when our application

will run. We will use Microsoft Visual Studio 2010 Ultimate with Visual Basic Language(also can be used an older version, such as Visual Studio 2008 Professional or Express Edition). Difficulty: Easy Language: Visual Basic .NET Framework Version: 3.0

Step 1 What we need

First of all create a New Project (CTRL+SHIFT+N) named form_fade_effect, select Visual Basic Windows Windows Forms Application and .NET Framework 3.0.

We need to drag into Form1 the following components from Toolbox (CTRL+ALT+X): Two Components One for Fade In One for Fade Out

One Component Our form should look like the one below:

Step 2 Fade In Effect

Now when you will double click on your form, you will access the Form1_Load Event. Our page in Code View should look like this:

1 2 3 4 5 6 7

Public Class Form1

Private Sub Form1_Load(ByVal sen</code>der As System.Obje As System.EventArgs) Handles MyBase.Load 'Form1 Code Here for Load Event End Sub End Class

First of all what you need to know about Opacity Property is that has values between 0 and 1. Now under the Form1_Load Event Line we should initialize components properties:

1 2 3 4 5 6 7

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e System.EventArgs) Handles MyBase.Load Me.Opacity = 0 'Set Opacity 0 to the current form Timer1.Interval = 20 'How often timer will repeat the (in miliseconds) Timer1.Enabled = True Timer2.Interval = 20 Timer2.Enabled = False End Sub

Go to Design Page and double click on the Timer1 to create the Tick_Event. This event means that the timer will repeat the code every 20 milliseconds. So now we need to find a way to increment the opacity with 2 units, but how we will do that? See the code below:

1 2 3 4 5 6 7

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal System.EventArgs) Handles Timer1.Tick If Me.Opacity = 1 Then Timer1.Stop() 'if Opacity = 1, Timer1 will stop Else Me.Opacity += 0.02 'Opacity value will be increase 0.02 End If End Sub

To test your project go to Debug Start Debugging (F5). The form will appear smoothly and clean. OK. Now we need to create the Fade Out Effect on the Timer2_Tick_Event, so drag and drop (create) a Button from Toolbox Window. We add this button because we need to close the window and to see the fade effect much better.

Step 3 Fade Out Effect

Double click on Timer2 component to create the Tick_Event and place the code below, but remember that the Timer2 is Not Enabled (we disable it previously on the Form1_Load_Event).

1 2 3 4 5 6 7 8

Private Sub Timer2_Tick(ByVal sender As System.Object, ByVal System.EventArgs) Handles Timer2.Tick If Me.Opacity = 0 Then Timer2.Stop() End 'Close the Application Else Me.Opacity -= 0.02 'Opacity will decrement with 0. End If

End Sub
And to start the Timer2 we need to make it through the new created button. Double click on Button1and write the code below: (to avoid the conflict between Timer1 and Timer2, create an If Function to create action when the Opacity is equal with 1)

1 2 3 4 5

Private Sub Button1_Click(ByVal sender As System.Object, ByVa System.EventArgs) Handles Button1.Click If Me.Opacity = 1 Then Timer2.Enabled = True End If End Sub

And we are done. If you have any questions do not hesitate ti ask. Thank you for reading this tutorial.

Final Results