TeamPhotoshop
 
Animated rollover.


Animated rollover effect:
Written by: Edwin Rosero

In this tutorial we will create an animated button similar to the one found on my site. Before reading this tutorial Launch FLASH and make sure your frame rate is at 30fps. You can edit the movie properties by going to Modify>movie . Lets begin...

1.
-First Begin by creating a circle on the Main stage. It should look something like image above.

 2.
- Once you have your circle drawn we need to make it into a button. We do this
by selecting the button and pressing F8. This will bring up the symbol properties.
Chose button and click "OK".

 3.
- Double clicking the button will bring you into edit mode. We first
insert a key frame in the "over frame" by pressing F6 or right clicking on the
"over frame" and choosing insert key frame. Next we need to reverse the colors
by clicking on the "reverse color" button as is shown in the image above.

 4.
-Select the circle who's colors you just reversed and convert it to a Movie Clip
by pressing F8. Double click on the symbol to edit the movie clip. Select the
Circle once more press F8 and Choose "graphic".
 5.
-Select the graphic and go to Edit>copy. Create another layer in the timeline by going to Insert>layer. Click on the first frame of the newly created layer and go to Edit>paste in place.( Paste in place pastes our graphic in the same location it was when we first copied it.).
 6.
- Click on frame 15 and insert a frame by pressing F5.( Do this for both layers). Next insert
a key frame on frames 8 and 15 of the upper layer. Go to frame 8 and select on the "scale" button from the toolbar. Increase the size of the circle until its about twice as big.
 7.
-Once you have scaled the circle to a desired size go to Modify>instance.
Chose the "effect" tab from the instance panel. Select "Alpha" from the scroll
menu and change the Alpha to 19%.
 8.
-Select frame 1 and click on the "frame" tab of the instance cannel. Set the tween type
to motion and set the "easing" to 100. Then click on frame 8 and chose "motion" as the Tween
type and set the easing to -100.
 9.
The final animation should like this:

If you have any questions or comments regarding this tutorial please post it in this thread
http://forum.teamphotoshop.com/showthread.php?t=24779
Print Article


Login / Register
... Or Register


From The Forums...
F/S:Sony Ericsson Idou(Satie),ETEN glofiish X610,Blackberry Curve 8900 @discount rate
Email: [email]mobilestore_limited@live.co.uk[/emai...
F/S:NokiaE75,E71,E65,E55,N97,N85,N96,N95,5730,5320,5 800 XpressMusic@dicount rate
Email: [email]mobilestore_limited@live.co.uk[/emai...
3G iphones,HTC touch,Samsung omnia...$300,Sidekick
DAGAMES ELECTRONIC Ltd is a leading supplier of hi...
Nikon D80 Digital Camera with 18-200mm Lens---$420usd
DAGAMES ELECTRONIC Ltd is a leading supplier of hi...
help with blur on font
No need to rasterize the text layer. Just add the ...
... Go to Forum


Tutorial Image

Make your selections by using the color range command.
Tutorial covering the color range command...
Tutorial Image

Fix a bad photo by using these tools and commands.
Tutorial covering various commands and tools to help you retouch a photo. Use this is a primer before moving onto our me...


© Web Media Network Limited. All rights reserved. No part of this website may be reproduced without written permission. Photoshop is a registered trademark of Adobe Inc.. TeamPhotoshop.com is not associated in any way with Adobe, nor is an offical Photoshop website.
..