Flash Tutorial - Adding an animated shine effect to your logo
This is a basic flash tutorial which explains how to apply an animated shine effect to a logo or image, as displayed in the example. This technique only really works well with colour logos.
You will need Flash 8 or above, as the effect utilises the filters which were a new addition in version 8. The source file for this project is available for download at the bottom of the tutorial.
Leave a comment if you find this useful!
GETTING STARTED
- Open a new flash document
- Go to 'File ->Import -> Import to Stage...' (or CTRL+R) and import your logo image.
- Move your logo to the top left corner of the stage (position 0,0)
- Go to 'Modify -> Document' (CTRL+J) and set your document's height and width to the height and width of your logo image. Set the framerate to 12fps.
CREATING THE SHINE
- Create a new layer above the logo layer for your shine
- In your new layer draw a white rectangle with no outlines (about 25ph high and the width of your logo)
- Select your rectangle and go to 'Modify -> Convert to Symbol' (F8) and choose 'Movie clip' as the symbol type, name it 'shine'.
- Double click on your new movieclip to open it, select the rectangle again and repeat step 4, converting it into another new Movie clip, but this time name it 'rectangle'.
ANIMATING THE SHINE
- Inside your 'shine' movie create a new keyframe at frame 25. This keyframe will be the point that your rectangle ends at after it has moved accross the logo. Frame 1 will be it's starting point. See images opposite.
- Set the starting point for your rectangle on frame 1. Then go to frame 25 and move it to its ending point. You can also rotate your rectangle as I have done in the opposite example.
- Right click on the first keyframe in the timeline and select 'Create Motion Tween' from the dropdown menu.
- Press return to preview your animation
- You will notice that in my example I have added some blank keyframes to the timeline to add a couple of seconds pause between each shine.
ADDING THE EFFECTS
- Select your 'rectangle' movie clip on frame 1 of the timeline, and open the filters properties ('Windows -> Properties -> Filters').
- Click on the plus symbol to add a new filter and select 'blur' from the list.
- Set the Blur X and Blur Y values to about 25, and set the quality to Medium. See opposite.
- Make sure the same values are set for the blur filter on frame 25.
- Go to Scene 1 of your flash project. Select your 'shine' movie clip and in the Properties panel change its Blend mode from 'Normal' to 'Overlay'
Hi!
I’ve been searching for such a tutorial for a long time!thank you!!
I just wanted to ask if it’s possible to activate the effect on rollover with actionscript, it would be for a website!
thank you very much,
Valentina
Hi Valentina
You could attach the effect to a button or movie clip rollover. You could attatch it to the rollover state of a button without any actionscript. You could also activate the rollover effect in as2 using the following method:
1. Select the shine (Symbol 3) movieclip and give it the instance name ’shine’
2. Add this action to frame 1 of the ’shine’ movie clip:
stop();
3. Create a button. you could make it transparent by setting it’s alpha to 0.
4. Add this action to the button:
on (rollOver) {
shine.play();
}
I hope this helps.
Sam
Hi Sam and thank you very much for your infos. I am a newbie of flash and actionscript so I always need every step to be clear like in your tutorial to do it
Could u help me out with a sample flash file?you could send it to my email if that’s not a problem for you.
I would really like to understand both ways to make such a rollover button, love your tutorial!
thank you very much,
valentina
hey
thanks for your sharing but. ı have some problem
I downloand the .fla document but ı didnt open it with mocromedia flash 8 can you help what is he problem please ? ı am waiting your answer
Well Done just what I was looking for!!!
Thank You!!!
Nice tutorial, also would be great if only as3 version will be posted