Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Animating a Butterfly MouseOver button

1. Duplicate your butterfly symbol 2 times.

2. Open the butterfly copy 1 and edit the mask by first unlocking the mask. Use the lasso tool to highlight the right hand wing from the Erase the highlighted mask so that it only covers the body and left wing.

3. Open the butterfly copy2 and edit the mask by unlocking the mask. Use the lasso tool to highlight the left wing and body and Erase the selection to leave the right wing only.

4. Open the Butterfly copy 1 again. Add a layer on top of the mask. Drag Butterfly copy 2 into the frame 1 of butterfly copy 1. Arrange this instance right over the other wing so it appears to originate from the middle of the abdomen.

5. Insert a new symbol that is a movie clip. Call it flutter. In frame 1 insert the butterfly symbol and turn onion skin on. Insert a key frame in frame 2,4, and 12 by highlighting these frames and hitting F6, and insert frames to frame 20 by hitting F5. Click on frame 2. Delete the contents of frame 2. Drag your butterfly copy1 into frame 2 and use your move tool to position it right over the butterfly with the wings expanded.

6. Insert a new symbol. Call it button and make it the properties of a button.

8. In frame 1 (up) place the full butterfly symbol. 

9. Insert a blank key frame in frame 2(over). Turn onion skin on. Drag the movie clip for flutter in frame 2. Use the move tool to position it right over the snake in frame 1(onion skin allows you to see it.).

10. Add a new layer to your button. Insert a key frame in the over and extend to the hit.

11. Place your button on your stage and test it!



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2008 All Rights Reserved
Privacy and Legal