Button Rollover Animation, by cmonney Options

[cmonney]

Tutorial By cmonney(Carlos M. Monney)

[ rollOver animation ]

1. create a 80x100 green solid shape
1a. name it: picture

2. copy(Ctrl+C) "picture"
2a. pasteInPlace(Ctrl+Shift+V)
2b. change color to: white(FFFFFF)
2c. change alpha to: 20%
2d. make sure that the "Anchor Point" is set to: center
2e. name it: screen

3. double click on frame 10 of "screen" timeline. This will create a Move effect.
3a. double click on the effect to display the effect properties dialog box
3b. in Motion Tab click on Xscale and select: Decrease by 100% (make sure X=Y is checked)
3c. in Easing Tab check the Scale End box and set the acceleration to: 2 (this will make the scale effect to slow down smoothly towards the end)
3d. Close the effect properties dialog box

4. copy(Ctrl+C) "screen"
4a. pasteInPlace(Ctrl+Shift+V) twice(2 times)
4b. you should have 4 shapes(3 screen & 1 picture)

5. position the Move effect for the bottom "screen" to frame 2
5. position the Move effect for the middle "screen" to frame 6
5. position the Move effect for the top "screen" to frame 10

6. copy(Ctrl+C) "picture"
6a. pasteInPlace(Ctrl+Shift+V)
6b. change the Fill from green to: None
6c. use a Line (0 to 2 width would be good)
6d. name it: border

7. select all 5 shapes
7a. group them into one sprite (Modify > Grouping > Group as Sprite)
7b. name the sprite: pictureContainer
7c. on the Sprite Properties Tab make sure that Stop playing at end of sprite IS NOT checked

8. inside "pictureContainer" sprite, right click on frame 1 and add a stop action(Movie Control > stop())

9. select "picture" and switch to Script Tab and add this code(which will trigger the animation):
on(rollOver){nextFrameAndPlay()}
9a. add this code(which will link/trigger any action, url, etc.):
on(release){getURL("http://www.13dots.com")}

Attached File(s)

 picRollOverFX.swi ( 62.81K ) Number of downloads: 11

 

[Eddie_K]

Thanks for adding c$. It's a really nice effect

[RedDragon]

Nice tut Carlos, thx for adding !!

[*D*]

Great little effect C

[Gabe]

Nice Tut Carlos, thanks for sharing it
When i get the hang of Swish ill give it a go

Regards Gabrielle

[Faakher]

much preety.......

Thanks for Sharing

Faakher

[eje0100]

Thanks nice tut will come in handy!!!!!

[mryes]

sweet thx for adding

[weidley]

Nice!

[jeet123]

Hi I tried to download picRollOverFX.swi but I always end up with error, can't download this file.. n I tried to follow all steps, I made it work but only problem is that this effect keep playing... I couldnt make it rollover.... anyone please help....

I believe I m confuse on step #8 [8. inside "pictureContainer" sprite, right click on frame 1 and add a stop action(Movie Control > stop()) ]