FakeFlash Title

hxxbin

3.09/5 (20 votes)

Jan 10, 2004

2 min read

83353

2521

Animated title component.

Sample Image - FFTitle.jpg

Introduction

This component is for demonstrating a simple animation with the Graphics class from .NET. This component can be used in a wizard or main form to display the name of your application more cute. It's easy to modify and use.

Graphics on .NET

In .NET, there are many class and interfaces for paint and manipulation of graphics and images. I'm a web master, and I love Flash. But I like C#, and I tried to find a way to get some effects into C# that I used to do in ActionScript, like draw with random points and colors, and I got it. The Graphics Classes provide many useful methods for development in GDI+.

How it works

Well, this component, uses a timer to update and invalidate a Draw event (OnPaint) from the main form. This event draws the main gradient, the vertical bars and the title. This is the OnPaint event, read the comments to understand every line:

protected override void OnPaint(PaintEventArgs e) 
{
  base.OnPaint(e); /* Support to draw the component */
  Rectangle sqb = new System.Drawing.Rectangle(0,0,this.Width,
    this.Height); /* Create a rectangle for allow draw the gradient */
  LinearGradientBrush lgbb = new 
    System.Drawing.Drawing2D.LinearGradientBrush(sqb, 
    this.startColor, this.endColor, 0, true);   
  lgbb.GammaCorrection = true; /* Add correction to the converge 
                           of color, to make the fade more cute =P */
  Rectangle sqs = new System.Drawing.Rectangle(0,0,10,this.Height);
  LinearGradientBrush lgbs = new 
    System.Drawing.Drawing2D.LinearGradientBrush(sqb, 
    this.BackColor, Color.Transparent, 90, true);
  lgbs.GammaCorrection = true;
  e.Graphics.FillRectangle(lgbb, 0, 0, this.Width, this.Height);
  Random rnd = new 
    Random(unchecked((int)DateTime.Now.Ticks)); /* Create a random number */
  for (int i=0; i < this.bars; i++)
  {
    int rnm1 = rnd.Next(this.Width-20);
    int rnm1a = rnd.Next(10)+10;
    e.Graphics.FillRectangle(lgbs, rnm1, 0, 
      rnm1a, this.Height); /* With the random numbers draw the bars */
  }
  e.Graphics.SmoothingMode = 
     System.Drawing.Drawing2D.SmoothingMode.AntiAlias; 
     /* Add Antialias to linew more soft */

  if(this.moving) 
  /* When MarqueeOn is fire this bool allow to the text scroll */
  {
    switch(this.direction)
    {
      case 0:
        MoveVertical();
        break;
      case 1:
        MoveHorizontal();
        break;
      default:
        MoveHorizontal();
        break;
    }
  }
  e.Graphics.DrawString(this.Text, this.Font, 
      new SolidBrush(Color.Gray), 
      (this.xstr+1), (this.ystr+1)); /* Draw the text */
  e.Graphics.DrawString(this.Text, this.Font, 
      new SolidBrush(this.ForeColor), 
      this.xstr, this.ystr); /* Draw the shadow text */
}

Source Code

Some points for explanation are:

ControlStyles: with this I can make the control repaint itself by Resize events. With DobleBuffer, you can allow the form to use two graphic buffers, one for the next paint, and one for the actual paint. This style needs the UserPaint and WmPaint, becauses this allow repaint without the OS request.
```
SetStyle(ControlStyles.ResizeRedraw, true);
SetStyle(ControlStyles.DoubleBuffer | ControlStyles.UserPaint 
             | ControlStyles.AllPaintingInWmPaint, true);
UpdateStyles();
```
Brushes: the Brush class, in special, LinearGradientBrush gives you the power for filling shapes and strings into a panel. You can query the .NET docs about the other brushes, like PathGradientBrush or SolidBrush.
```
LinearGradientBrush lgbb = new 
  System.Drawing.Drawing2D.LinearGradientBrush(sqb, 
  this.startColor, this.endColor, 0, true);
```

Updates

02/02/2004

Fixed Marquee and Tester.

29/01/2004

Added support to Marquee-style to the text.
Added drop shadow to text.
Added speed properties to choose the bar's speed.
Gamma correction to the gradients.

Something else

Well, it's my first article, I tried to make my best. My mother language isn't English (it's Spanish), for this reason, forgive me about bad spelling =D.

Try the demo file, I hope to update this component soon.

Thanks.