Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: Simple text effect using the mask

Wednesday, October 15, 2008

Simple text effect using the mask

See this lesson and learn how to create a cool text effect, using the mask and alpha in flash. You will also learn how to design a text, how to animate it and more. To create this lesson, you don’t have to use action script.This lesson is so simple to create, but in the same time so useful.

Step 1

Create a new flash document. Choose Modify > Document (Shortcut key: Ctrl+J) and set the width of your document to 200 pixels and the height to 70 pixels. Select #131313 as background color. Set your Flash movie’s frame rate to 24 and click ok.

Step 2

Take the Rectangle Too (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #D22C00 and draw a “rectangle” about 160×25px. See the picture below.

Step 3

While the rectangle is still selected, go to the Align Panel (Ctrl+K) and do the following.

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Now you have aligned a rectangle with the background.

Step 4

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field
2. Select a Tw Cen MT Condensed Extra Bold font,
3. Choose 20 as font size and bold it.
4. Select white as color,
5. As the rendering option, select Anti-alias for readability.

Then, type any text on the rectangle. See the picture below.

Step 5

Double click on layer 1 to rename its name in rectangle. After that, take the Selection Tool (V), select only the text and press Ctrl+X key (Cut). Then, create a new layer above the rectangle layer and name it text. Select it and press Ctrl+Shift+V key (Paste in Place).

Step 6

Create again a new layer above the rectangle layer and name it effect. Then, take the Rectangle Tool (R) again. In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #E99A85 and draw a “rectangle” about 60×80px and place it on the position like it is shown on the picture below.

Step 7

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.

Step 8

After that, while the new made Movie Clip (rectangle) is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 92%. See the picture below.

Step 9

Take the Free Transform Tool (Q), select the rectangle and do the following:

Step 10

Click on frame 20 and press F6 key. After that, move the rectangle on the right side using the mouse or by arrows key. See the picture below.

Step 11

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 12

Go back on frame 1 and press Ctrl+C key (Copy) to copy a rectangle.

Step 13

After that, create a new layer above the effect layer and below the text layer and name it effect 1. See the picture below.

Then, click on frame 15, press F6 key (Keyframe) and after that Ctrl+Shift+V key (Paste in Place).

Step 14

Take again the Free Transform Tool (Q), select the rectangle that you have just copied, press and hold down Shift key and do the following:

Step 15

After that, duplicate the rectangle that you just decreased (Take the Selection Tool (V), press and hold down Alt+Shift key, select the rectangle and duplicate it) like it is shown on the picture below.

Step 16

Click on frame 35 and press F6 key. Then, place the rectangles that you just copied on the right side. See the picture below.

Step 17

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 18

Create a new layer above the effect 1 layer and name it mask.

Step 19

Go back on the rectangle layer, take the Selection Tool (V) and select the rectangle. Then, press Ctrl+C key (Copy), click on the first frame of layer mask and press Ctrl+Shift+V key (Paste in Place).

Step 20

Select mask area layer and convert it to a mask by right-clicking on the mask area layer and selecting Mask. See the picture below.

Step 21

Take the Selection Tool (V) and using the drag and drop technique, move the effect layer above the effect 1 layer. See the picture below.

Test your movie (Ctrl+Enter).

We're done!

Enjoy!

Download example