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.


flashbuttonexample Create an Animated Flash button

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.

flashbutton1 Create an Animated Flash button

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.

flashbutton2 Create an Animated Flash button

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.

flashbutton3 Create an Animated Flash button

11. Finally create a third layer and add > stop(); onto frames 1, 7 and 12.

flashbutton4 Create an Animated Flash button

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.

download Create an Animated Flash button

Related posts:

  1. Magento: Create XML Blocks
  2. Best Flash Resources
  3. HTML5 vs Flash
  4. Javascript vs. Flash
  5. Quicktip 16 – WP Easy Flash Embed

Leave a Reply


Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482