Great widget alike button with motion glow
In this Macromedia Flash tutorial you will see how to make a flash button with an animated letter, the animation will contain a mask layer that gives a glowing edge to the letter.
1.
First of we will make the square button shape.
Make a gradient going from blue to a darker blue, then draw a shape on the stage with rounded corners.
with a stroke gradient from gray to black.
You may need to use the gradient transform tool to rotate the gradient vertical, as in the image below.
2.
Now we want to make a reflection to the shape.
So right click our shape and choose break apart, now select the fill part of the button and make a copy of it on the stage.
drag it outside so we have room to work in. select and delete the bottom part so it looks like in the image below.
3.
Now we will add a gradient to it from white to transparent, so select the shape, and go to the properties menu click the fill color and choose gradient and make a gradient as below.
Then use the gradient transform tool to rotate the gradient to vertical.
Right click the reflection layer and convert it to a movie clip
Move the reflection back on top of the shape from before.
4.
Now you can double click the reflection shape and move the mouse cursor close to the edge of the shape, and drag it to reshape as mine below.
5.
Now we will make the inside content of our button.
So with the text tool create the letter A, right click and choose break apart.
Right click again and choose distribute to layer.
6.
We will now change the color of our letter.
So make a radial gradient and click the letter with the paint bucket to fill the shape with the gradient.
Also add a light gray stroke
7.
Right click the letter and convert it to a movie clip.
Double click the letter to get into the movie clips timeline.
8.
Now we will make the glowing mask effect to the letter.
Make a copy of the letter, place it precisely on top of the original, right click it and choose distribute to layer.
9.
With the free transform tool make the new letter shape a bit bigger then the original, as shown in the image below.
Then place it center of the original letter.
10.
In the timeline make a new layer on top of the others, name it mask.
11.
In the new layer make a rectangular shape like mine below.
Make sure its width is longer then the letters width.
12.
Right click at frame 35, create new key frame, and drag the shape to the bottom of the stage, right click between the two key frame and make a motion tween.
13.
The new letter from step 11, we have to make some changes to.
With the paint bucket, make it white, and go to the filters properties, give it an glow effect with a green color as shown in the image below.
14.
Now in the time line layers panel right click the layer called mask and choose mask, now you have a mask layer, that masks over both the big and small letter.
So the only thing we need to do it to drag the original letter layer down so its not involved with the mask.
(You can see the different between a masked layer and not masked from the small icon to the left of the layer.)
Now go to the main stage, and play the movie, It may seem a bit confusing at first but try to read the tutorial a couple of times, and I hope it will make sense.