Posted on March 27, 2011 in Visual Basic Category
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).
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):
Our form should look like the one below:
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:
Public Class Form1 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e 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:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Me.Opacity = 0 'Set Opacity 0 to the current form Timer1.Interval = 20 'How often timer will repeat the code (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:
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As 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 increased with 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.
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).
Private Sub Timer2_Tick(ByVal sender As System.Object, ByVal e As 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.02 End If End Sub
And to start the Timer2 we need to make it through the new created button. Double click on Button1 and 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)
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As 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.