Create an Animated Flash button
I’ve been working with Flash for sometime now. Since University and into my professional work I have used Flash to create animations (as seen on this website) as well as flash content for numerous companies. If like you me you are not an expert, you often have to search the web to find a tutorial that shows you how to achieve what you want to do. Unfortunately many assume knowledge and can be hard to follow. Which is why over the next few week I’ll be showing you some of the little tricks I use to give my Flash that all important WOW factor.
To begin with I will explain how to create an advanced button – using a Movie clip, that is linked to a URL but also has a rollover and rollout animation. To demonstrate I’ll use my twitter bird, what I want to happen is for when the user puts their cursor over the bird, a sign saying ‘twitter’ fades in with a smooth animation.
Download – twitterbird.jpg
Download – hover.png
1. Create a new file, set size to 320px Width 320px Height and set the frame rate to 24.
2. File>Import>Import to Stage> add find the file twitterbird.jpg
3. Right click on the twitter bird > Convert to Symbol >and select Movie clip and OK.
4. Double click on the bird and insert a frame on frame 12.
5. Next right click again on the bird > Convert to Symbol > select Button and OK.
6. Left click once on the twitter bird and go to your actions panel and paste the following:
on (rollOver) {
gotoAndPlay(2);
}
on (rollOut) {
gotoAndPlay(8);
}
on (release) {
getURL(”http://twitter.com/morganwebdesign”, “_blank”);
}
7. Next within your Movieclip create a new layer and insert a keyframe on frame 2.
8. File>Import>Import to Stage> add find the file hover.png
9. On the same layer insert a keyframe on frame 7 and frame 12 and create a motion tween between them.
10. Then on frame 2 click on the twitter hover image and in your properties panel select colour > alpha > and change to 0% and do the same for frame 12.
11. Finally create a third layer and add > stop(); onto frames 1, 7 and 12.
12. There you have it a smooth animated rollover and rollout button, as apposed to the average one state on/off button. I’ve used a simple fade in fade out effect button you can do what you wish and make it last as long as you want also, just change the postion of the frames and the code on the button.
If you would like to ask any question please post them in the comments below.
Related posts:
- Magento: Create XML Blocks
- Best Flash Resources
- HTML5 vs Flash
- Quicktip 16 – WP Easy Flash Embed
- HTML 5 Tutorial – Tags
Posted By: Tom
Art and design has always been my love and talent. Like a cat I always land on my feet, achieving a BA in Graphic Design from Coventry University. My specialties include design, illustration, flash and animation.
