Adobe Flash Tutorial- Glint/Shine

Glint top

Here is a neat tutorial I’d like to pass along after being asked to make this effect on a logo for a client. Maybe you have seen it too, but never knew how to do it. Hopefully I can take out the guess work and explain it in a way that is easy to understand. For this tutorial I will be using Flash CS4, although I know that it also works using CS5.5. To see how the finished glint/shine will look CLICK HERE.

1. Create a new Flash Document by opening the Properties tab and set the dimensions for your file by clicking Edit. Set the pixels and frame rate as shown in the figure below or for whatever works best for your project.

Glint doc setup2. Import your Logo/Graphic by choosing File > Import > Import to stage from File in the main menu bar. For this tutorial I chose to use Captain America’s shield.

3. Align your image properly by using the Align panel. This can be done by choosing Window > Align.

Align Panel4. Now that the image is aligned to the stage, it is time to create our Moving Glint/Shine. Start by adding a New Layer. This can be done by clicking the left most icon in the Timeline panel.

Glint layer5. Next we will create the Glint/Shine Effect. With the new layer selected, select the Rectangle tool from the Tools panel. With your Rectangle tool selected, set your fill to white and stroke to none from the Properties panel and draw a long vertical rectangle outside of the stage area that is longer than your object you are adding the glint/shine to.

Glint Rectangle Fill

Glint Rectangle Draw

6. Now we need to add a gradient to our Glint/Shine Effect. With the new layer selected, select the rectangle that you just drew. Go to the Color Panel and select Linear from the Type drop down menu. Now double click on the middle slider to select your color. For this tutorial I chose white, but light gray also works well too. You can try different colors based on the image you are going over. Next click on each end slider one at a time. Select the same color as you did for the middle slider and change the Alpha (Transparency) for each to 0%.

Glint Sliders7. Our next step is to angle the Gradient. To do this hold down the Free Transform Tool and then select the Gradient Transform Tool. The Gradient Transform Tool contains handles to angle the gradient and increase or decrease its size. Just play around with it until you get the angle and size that works for you.

Glint Transform8. Now let’s add some additional frames to our first layer (control-click-Insert Frame on your Mac) or Insert > Timeline > Frame on a frame farther up the Timeline. Let’s also move the starting place of the Glint/Shine. To do this, click on the Keyframe where the Glint/Shine is located and hover until you get a small white box. Now click the Keyframe, hold down and drag it up the Timeline to your desired spot.

Glint White Box9. Next add a Motion Tween. Select the rectangle Glint/Shine and go to Modify > Convert to Symbol and select Graphic from the Type option. You can name the symbol Glint if you want. Click Ok to save your new symbol. Now with your symbol selected, go to Insert > Motion Tween. Select a frame farther up the Timeline and insert a frame like we did on Step 8. This should turn all the previous frames on that layer blue. (See below)

Glint SymbolGlint Tween10. To add the actual motion, click on the last frame of your motion tween. (It should look like the picture above). Now drag your Glint/Shine symbol completely across your image. If you have done it correctly, you will see a black mark on your timeline as well as see the colored path of your motion like it is below.

Glint Motion11. Now it’s time to create a mask that will confine the glint/shine to only the area we want. In this case, I only want the glint/shine to show in the star. First add a new layer like we did in Step 4. Then insert a Keyframe in the same place on the Timeline as the start of our Motion Tween on the Layer below. For this tutorial that would be on the 10 spot on the Timeline. To insert a Keyframe go to Insert > Timeline > Keyframe. Now with the Pen Tool selected, draw around the star and fill it with color. The fill color can be whatever you want, it won’t show up on the final product.

Glint Pen Tool12. The final step is to activate the mask. To do this click on the Layer where you have the star and Control-Click to select Mask. This results in the Motion Tween Glint/Shine Layer becoming a sub layer to the Mask thereby hiding and confining the Glint/Shine to only the Star shape. if the Mask is done correctly your Timeline should look similar to the one below.

Glint Mask

That’s it! You now have a really cool Captain America Shield with a Glint/Shine effect. This effect can be used on text as well. So experiment with other objects, mask shapes, and colors to make the effect unique to you!