Click here to Skip to main content
Click here to Skip to main content
Go to top

Fade out image or Graphics objects

, 27 Mar 2009
Rate this:
Please Sign up or sign in to vote.
Fade out an image or Graphics object by modifying the alpha value on a new mask placed above the original image.

Introduction

By placing a layer above an image and letting its alpha value increase step by step with a timer, you can realise fade effects for any image or graphics object in C#. In this example, I placed two PictureBoxes and three buttons on a form. The left-sided PictureBox shows the original picture, while the fade effect is demonstrated inside the right-sided PictureBox. You start everything by clicking on the "Start" button. The "Restart" button reloads the original image and lets you start the effect again. By clicking on the "Pick color" button, you can choose a different color to fade to.

Using the code

You start the effect by clicking on the "Start" button and starting the timer tFadeOut.

private void btnStart_Click(object sender, EventArgs e)
{
    //disable buttons and start timer
    btnStart.Enabled = false;
    btnPickColor.Enabled = false;
    btnReload.Enabled = false;
    tFadeOut.Start();
}

The timer ticks, and by every tick, the function Lighter() returns the modified image for the right-sided PictureBox until x is incremented up to 102.

private void tFadeOut_Tick(object sender, EventArgs e)
{
    if (x == 102)
    {
        //if x was incremented up to 102, the picture was faded 
        //and the buttons can be enabled again
        x = 50;
        tFadeOut.Stop();
        btnPickColor.Enabled = true;
        btnReload.Enabled = true;
    }
    else
        //pass incremented x, and chosen color to function 
        //Lighter and set modified image as second picture box image
        pImage02.Image=Lighter(pImage02.Image, x++, colToFadeTo.R, 
                               colToFadeTo.G, colToFadeTo.B);
}

Inside the function Lighter(), the passed image imgLight first gets converted into a Graphics object. The next step is calculating the new alpha value for the mask to place above the Graphics object. Then, this mask is created as a Pen object with the calculated alpha value and the color to fade to. This mask gets drawn above the Graphics object by using the method DrawLine with the pen pLight created in the former step. Saving the final Graphics object by using the method graphics.Save() also saves the new picture to the image imgLight. The final steps are disposing the Graphics object and returning the new, modified image.

private Image Lighter(Image imgLight, int level, int nRed, int nGreen, int nBlue)
{
    //convert image to graphics object
    Graphics graphics = Graphics.FromImage(imgLight);
    int conversion = (5 * (level - 50)); //calculate new alpha value
    //create mask with blended alpha value and chosen color as pen 
    Pen pLight = new Pen(Color.FromArgb(conversion, nRed, 
                         nGreen, nBlue), imgLight.Width * 2);
    //apply created mask to graphics object
    graphics.DrawLine(pLight, -1, -1, imgLight.Width, imgLight.Height);
    //save created graphics object and modify image object by that
    graphics.Save();
    graphics.Dispose(); //dispose graphics object
    return imgLight; //return modified image
}

History

  • 27.03.2009 - First version uploaded to CodeProject.

License

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

Share

About the Author

No Biography provided

Comments and Discussions

 
QuestionLovely code [modified] Pinmemberak1628-Jun-11 1:23 
Generalthanx a lot PinmemberAmit_Bhosale20-Jun-09 21:01 
GeneralThx. Pinmembercnmeta29-Mar-09 18:13 

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

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 27 Mar 2009
Article Copyright 2009 by notorious.madeye
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid