Title: Scrolling Text Faded Edges
Author: AEvision
Difficulty: Beginner
Requirements: Any version of Adobe Flash
Prerequisites: Motion Tween

In this tutorial we are going to add a simple effect to fade the edges of a horizontally-scrolling text, as shown in the Demonstration box to the right.

We are going to use the Linear Fill tool as a simple approach to achieving this effect. Two linearly-filled rectangles will be used, each on one side of the window within which the text would scroll. These two rectangles will be positioned on a layer above the scrolling text layer, giving an impression that the text fades at the edges of the screen.





The first step is to draw a rectangle, which will be linearly-filled, at the edge of the stage.

  • Let's start by selecting the Rectangle Tool, as shown in Fig 1.

  • Set the Stroke color to 'none', as shown in Fig 2.

  • draw a rectangle at one corner of the stage, as shown in Fig 3.

    Because I'm going to fill my rectangle with white, I changed my stage background color to blue, in order to better observe the effect.

Fig 3


Your rectangle should now look something like in Fig 4, filled with solid color.

In this step we are going to fill it with Linear fill.

  • At the top menu, go to Window>Color Mixer. The color mixer panel will appear on the right hand side.

  • Select the rectangle, then in the Color mixer, change the color fill type from solid to Linear, as shown in Fig 5.

  • To achieve the faded edges effect, we are going to fill the rectangle from a solid color (Alpha 100%) towards transparency (Alpha 0%), as shown below, in Fig 6.

Fig 6


Fig 1

Fig 2






Fig 4




Fig 5

1 | 2 | Next

Main | Tutorials | BestFlash | Goodies | Forums | Portfolio | Contact Us
AEvision Tutorials 2.0 - All rights reserved AEvision Designs 2002-2005
Icons provided by iconpacks.com