Visual Basic: Forms with Fade In/Fade Out Effect

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).

  • 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 timer Components (one for fade in and one for fade out)
  • One button 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:

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
		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.


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).

Private Sub Timer2_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer2.Tick
	If Me.Opacity = 0 Then
		End     'Close the Application
		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.

Final Results

Visual Basic Fade In Fade Out

Related Articles
  1. Anonymous says:

    Works Perfectly, Thanks<3

  2. maman says:

    tq bro…

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

8 × four =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.