Click here to Skip to main content
Click here to Skip to main content

Alpha Blend Fade In/Out Images

By , 27 Mar 2009
 

Introduction

I have always tried to imitate the fading effect used by the Windows Vista Operating System. Here's how to apply this wonderful effect to your images..

Using the code

To start, we need two images which will overlap each other depending on the situation.

01.png

Normal status

02.png

Mouse over image

We start by declaring the global variables that we need:

Dim increase As Boolean = True
Dim speed As Single = 0.05 'The speed is: 0 to 1

The speed variable can be configured. A high value corresponds to a high speed of the effect.

We can now write the code in the timer Tick event (interval = 1 ms, or a lower value):

Static current_alpha As Single = 0.0
Dim i1 As New Bitmap(My.Resources._01)
Dim i2 As New Bitmap(My.Resources._02)

Dim g As Graphics = Graphics.FromImage(i1)

Dim cm As New Imaging.ColorMatrix(New Single()() { _
                     New Single() {1, 0, 0, 0, 0}, _
                     New Single() {0, 1, 0, 0, 0}, _
                     New Single() {0, 0, 1, 0, 0}, _
                     New Single() {0, 0, 0, current_alpha, 0}, _
                     New Single() {0, 0, 0, 0, 1}})
Dim ia As New Imaging.ImageAttributes
ia.SetColorMatrix(cm, Imaging.ColorMatrixFlag.Default, Imaging.ColorAdjustType.Bitmap)
g.DrawImage(i2, New Rectangle(0, 0, i2.Width, i2.Height) _
       , 0, 0, i2.Width, i2.Height, GraphicsUnit.Pixel, ia)
g.Dispose()

If increase Then
    current_alpha += speed
Else
    current_alpha -= speed
End If

PictureBox1.Image = i1

If current_alpha >= 1 Then
    current_alpha = 1
    tmrBlend.Enabled = False
ElseIf current_alpha <= 0 Then
    current_alpha = 0
    tmrBlend.Enabled = False
End If

Now, we have to activate the effect at the right time: with a PictureBox, we can use the MouseEnter and MouseLeave events.

In these events, we must always activate the timer. In MouseEnter, we set increase = True, and in MouseLeave, we set increase = False.

Points of interest

I also tried a pixel-by-pixel replace... it was too slow! It was necessary to lock bits... it works, but the code is longer than this. And, this is also cleaner!

History

  • 27/03/2009 - First version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Daniele Di Sarli
Italy Italy
Member
No Biography provided

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
Questionnicemembertamash_ionut29 Mar '09 - 4:01 
but how could i apply something similar to borders in a form?
cheers mate! Big Grin | :-D
AnswerRe: nicememberDaniele Di Sarli29 Mar '09 - 5:59 
The borders of a form are in the non-client area (read some articles here on codeproject).
It's very difficult to control this area... the only solution i know is to manually paint the form borders, title bar, etc. setting FormBorderStyle = None and managing the maximize, minimize, close buttons, and also the form drag.
In any case, there is a long work to do.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130523.1 | Last Updated 27 Mar 2009
Article Copyright 2009 by Daniele Di Sarli
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid