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 Bloody Eyeballs

1 2 3

You should have completed part one to do this tutorial

1. Open your bloody eyeball image from this tutorial. It should have 2 layers, a black background and an eyeball layer. Duplicate the eyeball layer 6 times so you have 7 different eyeball layers. Rename the eyeball layers eyeball 1, eyeball 2, eyeball 3, eyeball 4, eyeball 5, eyeball 6, eyeball 7. Turn off visibility on all the layers except eyeball1 and the background.

3. Switch to image ready by clicking file=> jump to image ready.

4. Open your animation panel.

Frame 1: The first frame is set to 0.1 second and has no changes.

Frame 2: Turn off eyeball 1, turn on eyeball 2 and click on it.. Click edit=> transfrom=> rotate. set rotation to 51 degrees. Frame should be set to 0.1 seconds.

Frame 3: Turn off eyeball 2, turn on eyeball 3 and click on it.. Click edit=> transfrom=> rotate. set rotation to 102 degrees. Frame should be set to 0.1 seconds.

Frame 4: Turn off eyeball 3, turn on eyeball 4 and click on it.. Click edit=> transfrom=> rotate. set rotation to 154 degrees. Frame should be set to 0.1 seconds.

Frame 5: Turn off eyeball  4, turn on eyeball 5 and click on it.. Click edit=> transfrom=> rotate. set rotation to 205 degrees. Frame should be set to 0.1 seconds.

Frame 6: Turn off eyeball 5, turn on eyeball 6 and click on it.. Click edit=> transfrom=> rotate. set rotation to 257 degrees. Frame should be set to 0.1 seconds.

Frame 7: Turn off eyeball 6, turn on eyeball 7 and click on it.. Click edit=> transfrom=> rotate. set rotation to 308 degrees. Frame should be set to 0.1 seconds.

Test out the animation by using the animation player on the bottom of the animation panel.

5. Go back to frame 1 and set the timing to 2 seconds.

 

6. Click back on frame1. Open your optimize panel. Set to Gif, 64colors dithered in the settings drop down menu.

Click save optimized as and save your image a gif.

You may want to try this in different sizes by clicking image=> imagesize. Make sure you save the original first as you will need the original 100X100 image for part 3.

Continue to part 3 to do an animated rollover for your page.



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