Click here to Skip to main content
11,495,319 members (66,432 online)
Click here to Skip to main content

Star Wars style text scroller

, 9 Jul 2007 CPOL 92.3K 2K 106
Rate this:
Please Sign up or sign in to vote.
Text scroller control with 3D-look (like in the intro of the Star Wars movies)

Screenshot - preview.jpg

Introduction

You can find text scrollers in many programs, especially in their About dialogs. In most cases, it's a simple colored text that moves up. In this article, I attempted to create something unusual. I decided to write an "outgoing" text component, which looks like a 3D effect such as in the intro to the Star Wars movies.

GDI+ provides many easy-to-use objects and functions. Using these functions, you can do something special without much trouble. Before writing this component with the help of GDI+, I tried to create it with GDI. This required much more time and resulted in ten times more code. It seemed to be a hard task, but later I recreated this same component in GDI+. That was easy. After that, I decided to write this article to demonstrate some features of GDI+.

How we can do this

We can create this "outgoing" effect by transforming all points of text from rectangular to trapezoidal shape:

Transform process.

To animate our transformed text, we'll use an offset variable and timer. On the timer tick, we'll change this variable and repaint the control.

The code

The most useful code is situated in the Paint event handler. First of all, we need to enable anti-aliasing for better quality:

e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;

After that, we erase background to clean the previous frame:

e.Graphics.FillRectangle(new SolidBrush(this.BackColor), 
    this.ClientRectangle);

Then we create a GraphicsPath object and fill it with visible lines of text depending on the offset:

GraphicsPath path = new GraphicsPath();
for (int i = m_text.Length - 1; i >= 0; i--)
{
    Point pt = new Point((int) 
        ((this.Width - e.Graphics.MeasureString(m_text[i], 
        this.Font).Width) / 2), (int)(m_scrollingOffset +
        this.Height - (m_text.Length - i) * this.Font.Size));

    // Adds visible lines to path.
    if ((pt.Y + this.Font.Size > 0) && (pt.Y < this.Height))
        path.AddString(m_text[i], new FontFamily("Arial"), 
        (int)FontStyle.Bold, this.Font.Size,
        pt, StringFormat.GenericDefault);
}

After that, we transform our GraphicsPath from rectangle to trapezoid:

path.Warp(new PointF[4] 
{ 
    new PointF(this.Width / 3, 0),
    new PointF(this.Width * 2 / 3, 0),
    new PointF(0, this.Height),
    new PointF(this.Width, this.Height)
},
new RectangleF(this.ClientRectangle.X, 
this.ClientRectangle.Y, this.ClientRectangle.Width, 
this.ClientRectangle.Height),
null, WarpMode.Perspective);

The text is now ready. Next, we need to draw it and dispose of the GraphicsPath object:

// Draws wrapped path.
e.Graphics.FillPath(new SolidBrush(this.ForeColor), path);
path.Dispose();

To make control more realistic, we can draw some "fog" using LinearGradientBrush with transparent color:

// Draws fog effect with help of gradient brush with alpha colors.
using (Brush br = new LinearGradientBrush(new Point(0, 0), 
    new Point(0, this.Height),
    Color.FromArgb(255, this.BackColor), Color.FromArgb(0, 
    this.BackColor)))
    {
        e.Graphics.FillRectangle(br, this.ClientRectangle);
    }

Using the code

The Scroller class represents an easy-to-use component with customizable font, background color, text color and, of course, text content. You can simply copy the Scroller class to your project to use it. Also, you can create a separate class library for the Scroller class.

Properties of the Scroller control

This control has the following properties:

  • TextToScroll – this text will be separated into lines at the \n symbol
  • BackColor – color of background
  • ForeColor – color of text
  • Interval - delay in milliseconds between frames for controlled scrolling speed
  • TextFont - font that is used to draw; units must be set to GraphicsUnit.Pixel
  • TopPartSizePercent - top part size of text in percent of control width

Methods of the Scroller control

  • Start() – starts the animation from the beginning
  • Stop() – stops the animation

Points of interest

When I was creating this control, I noticed that the GraphicsPath class can help you in situations where you need some specific transformation of graphics objects, including point transformations.

Disclaimer

You can use this code in any type of project, free or commercial. If you do, please add a link to this article in your code comments or the About dialog box.

Thanks for reading and thanks to all who have helped me improve this article.

History

  • 9 July, 2007 - First updated version posted
    • Fixed bug with text offset: Font Units is now set to GraphicsUnit.Pixel
    • Added cycle scrolling feature
    • Added Interval property
    • Added TextFont property
    • Added TopPartSizePercent property
  • 16 May, 2007 - Original version posted

License

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

Share

About the Author

alexey N
Software Developer
Russian Federation Russian Federation
No Biography provided

Comments and Discussions

 
QuestionHow to set the background color to transparent? Pin
andre_muc22-Jan-13 13:20
memberandre_muc22-Jan-13 13:20 
GeneralMy vote of 5 Pin
xhantt19-Sep-12 19:29
memberxhantt19-Sep-12 19:29 
GeneralMy vote of 5 Pin
manoj kumar choubey18-Feb-12 1:13
membermanoj kumar choubey18-Feb-12 1:13 
GeneralIs it possible to add images to the text Pin
Joe Sonderegger24-Jan-11 20:28
memberJoe Sonderegger24-Jan-11 20:28 
QuestionVB wanted? Pin
dherrmann9-Jun-09 1:48
memberdherrmann9-Jun-09 1:48 
AnswerRe: VB wanted? Pin
alexey N9-Jun-09 7:30
memberalexey N9-Jun-09 7:30 
GeneralRe: VB wanted? [modified] Pin
dherrmann11-Jun-09 0:49
memberdherrmann11-Jun-09 0:49 
GeneralPause Pin
Member 327739631-Mar-09 2:40
memberMember 327739631-Mar-09 2:40 
GeneralRe: Pause Pin
alexey N31-Mar-09 7:45
memberalexey N31-Mar-09 7:45 
GeneralTotally Awesome Pin
jwdyott26-Jan-09 7:11
memberjwdyott26-Jan-09 7:11 
Generalcpu Pin
zmrcic12-Aug-08 2:39
memberzmrcic12-Aug-08 2:39 
GeneralRe: cpu Pin
alexey N12-Aug-08 7:29
memberalexey N12-Aug-08 7:29 
Questionc# c++? Pin
cccfff77723-Jan-08 1:54
membercccfff77723-Jan-08 1:54 
AnswerRe: c# c++? Pin
alexey N13-Feb-08 18:10
memberalexey N13-Feb-08 18:10 
Generalscroller Pin
Mr Imacx10-Oct-07 17:11
memberMr Imacx10-Oct-07 17:11 
GeneralFix for text centering Pin
logan13373-Oct-07 13:27
memberlogan13373-Oct-07 13:27 
GeneralRe: Fix for text centering Pin
alexey N10-Oct-07 8:50
memberalexey N10-Oct-07 8:50 
GeneralAwesome!! Pin
logan13372-Oct-07 19:04
memberlogan13372-Oct-07 19:04 
GeneralRe: Awesome!! Pin
alexey N2-Oct-07 19:13
memberalexey N2-Oct-07 19:13 
Questioncontrol Pin
Tamtararamtam11-Aug-07 6:38
memberTamtararamtam11-Aug-07 6:38 
AnswerRe: control Pin
alexey N12-Aug-07 19:55
memberalexey N12-Aug-07 19:55 
GeneralNeat Pin
Paul Conrad14-Jul-07 9:27
memberPaul Conrad14-Jul-07 9:27 
GeneralAngle of trapeze Pin
ChrlsHrdy7-Jul-07 17:30
memberChrlsHrdy7-Jul-07 17:30 
GeneralRe: Angle of trapeze Pin
alexey N11-Jul-07 1:10
memberalexey N11-Jul-07 1:10 
GeneralNice article Pin
Rohit_kakria1-Jun-07 0:53
memberRohit_kakria1-Jun-07 0:53 
GeneralRe: Nice article Pin
alexey N1-Jun-07 2:13
memberalexey N1-Jun-07 2:13 
GeneralReinit Pin
fWire22-May-07 1:20
memberfWire22-May-07 1:20 
GeneralRe: Reinit Pin
alexey N22-May-07 18:52
memberalexey N22-May-07 18:52 
QuestionWhy is the text so jumpy? Pin
Nice Life21-May-07 21:49
memberNice Life21-May-07 21:49 
AnswerRe: Why is the text so jumpy? Pin
alexey N22-May-07 19:15
memberalexey N22-May-07 19:15 
GeneralRe: Why is the text so jumpy? Pin
Nice Life22-May-07 23:03
memberNice Life22-May-07 23:03 
GeneralAwesome Pin
merlin98117-May-07 4:07
membermerlin98117-May-07 4:07 
GeneralRe: Awesome Pin
alexey N17-May-07 18:32
memberalexey N17-May-07 18:32 
GeneralLooks Really Great Pin
Neeraj_Saluja16-May-07 12:57
memberNeeraj_Saluja16-May-07 12:57 
GeneralRe: Looks Really Great Pin
alexey N16-May-07 19:42
memberalexey N16-May-07 19:42 
GeneralRe: Looks Really Great Pin
Robert Rohde16-May-07 22:37
memberRobert Rohde16-May-07 22:37 
GeneralRe: Looks Really Great Pin
alexey N16-May-07 22:46
memberalexey N16-May-07 22:46 
GeneralRe: Looks Really Great Pin
Goran Mitrovic17-May-07 0:44
memberGoran Mitrovic17-May-07 0:44 
GeneralRe: Looks Really Great Pin
alexey N17-May-07 3:03
memberalexey N17-May-07 3:03 
GeneralThis should be the sample text Pin
Kiliman16-May-07 12:09
memberKiliman16-May-07 12:09 
GeneralRe: This should be the sample text Pin
alexey N16-May-07 19:45
memberalexey N16-May-07 19:45 
GeneralReally cool Pin
Muhammed Sahin16-May-07 10:48
memberMuhammed Sahin16-May-07 10:48 
GeneralRe: Really cool Pin
alexey N16-May-07 19:43
memberalexey N16-May-07 19:43 

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 | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 9 Jul 2007
Article Copyright 2007 by alexey N
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid