Text Glint Tutorial - Beginner

  • willstein
  • Loser
  • Loser
  • willstein
  • Posts: 117
  • Loc: Maryland

Post 3+ Months Ago

Hey I thought I would post this tutorial for some of the beginners out there. It's a nice effect you can use, and it gives you some knowledge of working with masks.

Masks are a very important thing to learn, and can create some very poweful stuff if used right.

Of course, this is just the beginning flash stuff.


Tutorial:
Sorry can't take credit, it was taken directly from http://www.flashkit.com.




Introduction

In this tutorial you will learn how to make text do more than just move. I have outlined for you a very basic special effect which is extremely simple in terms of both its graphical nature and its ease of creation. But it looks really cool.


This is a glint. I don't know a better name for the effect, so it's a glint. Anyway, you can create this effect and numerous other variations in just a few easy steps that are outlined in the remainder of this tutorial.




1.) Step One: Creating the Text

Firstly, you create the text that you are going to place the effect on:



Image



Simply click the text tool, click somewhere on the stage, and type whatever. Notice that I used a "thick" font, which will allow more of the effect to be seen. But it is not necessary that you use a font like that, the effect will still look good on any text. Don't spend time trying to perfect the color of your text, as it will be used as a mask later, and you won't be able to see the color of the text anyway.




Step 2: Create the Effect

The second step here is to create the effect which you'll be applying to your text. What I used for my example was just a rectangle, filled with a linear gradient:



Image



Click the rectangle tool, make sure that there will be no outline on it by clicking in the Stroke color box and clicking the white box with a red line through it. Draw the rectangle so that it is taller than your text and about twice as wide. Then click the rectancle you just made and find the Fill panel. This is where you get to pick your colors and effects. For the example above, I did a linear gradient that went from grey to white to grey, making the white portion small compared to the rest of the gradient. Then I used the fill editor tool to rotate the "glint" to the angle it's at. But that's just the way that I did it. You have unlimited creative freedom here.




Step 3: Applying the Mask

Now, the moment you've been waiting for. How does the effect work?

Make sure your rectangle layer is beneath your text layer. Right click on the text layer and click Mask.



Image



Your text should now look like this:



Image



With your text being filled by the rectangle that you made

Looks cool, huh?




Step 4: Moving the Effect

Now to make the effect move with a simple motion tween applied to the rectangle. Unlock both layers so that you can see the rectangle again. Now right-click on Frame 1 of the rectangle layer and click on Create motion tween. Now, depending on how fast you want the effect to be, create a keyframe later in the timeline. If you put a keyframe at 15, you'll have a fast effect, if you put it at 300, you'll have a slow effect. Experiment and learn. When you have the keyframe on the effect layer, right-click on the frame directly above the effect's second keyframe and select insert frame. This will make sure that the text stays on the stage while the effect rolls along.

Your timeline should look something like this:



Image






Step 4: Moving the Effect (cont.)
Now, click on the first keyframe of the Effect layer and position your effect so that the "original color" of the effect is on the text, as shown above. Now, click on the second keyframe of the effect layer and position your effect so that the effect is completely on the other side of the text.

Like this:



Image



Now lock both layers again so that the mask works and play your movie. You should have a similar effect to the example at the top of the page. Voila! Now you know how to make the "Glint" effect. Not only that, but you now know how to use text as masks to "fill" text with moving objects such as photos or movie clips.
Tutorial from http://www.flashkit.com.


Hope you enjoyed it. I guess it's a present to you on my birthday.
love ya lots.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Very cool of you to post a tutorial. It would have been best if it was your own tutorial though. Can I make one suggestion? Instead of using .bmp for your images, convert them to .jpg images. It would speed up how long it takes to load this page, plus save you a ton in bandwidth because the file sizes would be drastically smaller.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Nice.

Here is another variation (not written by me)...

http://www.kirupa.com/developer/flash5/lightingmask.htm

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 11 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.