Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
You will now see how to easily create that shining animation, and I will also explain you why this button is in fact a movie clip symbol.
27. Lock the gloss layer. Make a new layer above it and name it shine animation.
28. Unlock the base shape layer.
29. You will now repeat the same procedure you did in steps 13 through 17, but for the shine animation layer, instead of gloss:
30. The newly pasted shape should still be selected. Press F8 (or select Modify > Convert to Symbol) to turn it into a symbol. Select Movie clip as type, like you did before, name it rollover effect and click OK. You have just made a movie clip inside a movie clip.
31. Double-click on this new movie clip on the stage (with the Selection tool) to access its timeline. Once again, if you look above the layers, you will see that Flash has duly informed you that the current timeline you are working in is that of the movie clip rollover effect. Cool. :)
32. Go over to the timeline. Click with your mouse on the first keyframe and drag it one frame forward. Once there, release it. This simple step can easily be understood if you just look at the sequence of three screenshots below.
Why this must be done? Simply because the animated shine rollover effect must not be visible while the user isn't interacting with the button. This means that the shine must not be displayed if the user has not moved her mouse over the button. And if you leave it on the first frame, it will be visible.
What follows next is some simply tweaking around (once again) with the linear gradient fill.
33. Click once on the fill shape on the stage to select it - to bring it into focus. This is done, of course, with the Selection tool (V).
34. Once again, go to the Color Mixer panel. Select Linear as fill type.
Add a third color to the gradient strip, just like you did before and put it exactly in the middle. Set the following color and alpha values: all three squares should again be pure white, aka #FFFFFF, and the alphas should be (from left to right): 0%, 69% and 0%.
35. Select the Gradient Transform tool (F). Place your cursor over the rotational handle (the little white circle). Click and start moving the gradient clockwise until you reach a 45° turn.
36. Now place your cursor over the handle that is used to stretch or compress the gradient - it is the little white square. Once you do that, your cursor will turn into a two-pointed horizontal arrow. Click and start pushing inwards. The gradient will compress - its height will be reduced.
37. Place your cursor over the handle that serves to move the gradient - the little white circle in the middle. Your cursor will change into a cross with an arrow on each end. Click and move the gradient upwards and to the left, so that its lower part covers just a portion of the button's upper left corner.
The remaining actions that need to be done will consist just of adding new keyframes and moving the gradient around.
38. Go back to the layer's timeline. Right-click on frame 3 and select Insert Keyframe from the menu.
When you insert a new keyframe in the layer, the previous keyframe's contents are automatically and completely copied to the new one. Which suits you just fine, because you are right now making a frame-by-frame animation. Therefore, you will just change the position of the gradient in this new keyframe.
39. Don't move anywhere on the timeline. Just go back to the stage and using the Gradient Transform tool (F), move the gradient a little bit down and to the right.
40. Add a new keyframe to the layer: right-click on frame 4 and insert a keyframe, just like you did in step 38.
41. On the stage, move the gradient again. In the same direction - diagonally downwards and right.
42. Add the fifth and the final keyframe to the animation: right-click on frame 5 and insert a keyframe.
43. ...and move the gradient for the last time.
Yes! That's it concerning the animation work! It was easy, wasn't it? Sure! It will become second nature to you before you'll even know it :)
It's time to see this animation in action! Just select Control > Test Movie (shortcut: Ctrl+Enter). The test movie window will appear and you'll see the animation play continually over and over again, like in the example shown below.
This is normal, because every animation in Flash behaves like this unless you tell it otherwise. With ActionScript, of course. And that is just what you will do next: control the animation via some simple ActionScript code. Also, don't be alarmed if the animation seems to be too quick. This will be just fine once you add some interaction to your movie clip (that is acting as a button).
44. Call the current layer animation and lock it.
45. Add a new layer and call it actions.
46. Click on the action layer's first (and only) keyframe to select it...
...and select Window > Actions (shortcut key: F9) to open the Actions panel. Insert the following code inside:
stop();
This simple action will prevent the animation from starting and going endlessly in a loop. Also, you will add some ActionScript code later that will make possible for the shiny rollover effect to appear only once. The user will roll over the button with her/his mouse, the animation will play out, and once it comes back to the first frame, it will stop because of the stop(); action you have just put there. Simple and effective.
47. Click on the animated shiny button link above the layers to go back to it.
You are doing this to add some final touches to your button: the button's label. If you had clicked on Scene 1 link, you would have gone back to the main timeline and then go back inside your movie clip again.
48. Select the rollover effect movie clip you were just inside of a moment before, by clicking once on its registration point - the little white circle looking like a crosshair. To be sure that you have selected it, just check out the Properties panel: you should see "Instance of: rollover effect" displayed there.
Why click on this particular spot? Well, since the first frame inside the rollover effect movie clip is empty, there is nothing to click on except the registration point. :)
49. Go to the left side of the Properties panel and in the Instance name input field enter this movie clip's name: call it glitter.
50. Lock the shine animation layer and make a new layer above all the current ones and call it label.
51. Select the Text tool (T). Go down to the Properties panel and set the following options for your text field (the numbers of the list correspond to the numbers in the image):
52. Click somewhere over the button and type in the label for your button: I typed portfolio. Write anything you like that goes well with your link.
53. Once you're done, press Esc to exit the text editing mode. Use the arrow keys on your keyboard now to move the label into a good position - centering it inside your button looks ok.
Lock the current layer. If you wish, you can move the label layer below the gloss and shine animation layers for a different effect. Doing this will pull an "effect cover" over the label. Try it out and see what works best for you.
Ok now, let's make this baby shine for your site visitors! So please continue onto the third page of this tutorial.
