Rollover Effect, Photoshop and SwishMAX Tutorial Options

[DPC]

Text or Button Rollover Tut By Patrick 23.08.2005

My finished result - Roll Over




This tutorial combines Photoshop & Swishmax at a very simple level for beginners to see how easy it is to make simple but effective effects on a Rollover command in SwishMAX.


1. Ok let us start by opening Photoshop for my Tut I used the Preset 800*600 form with background contents set to "Transperent" size of the empty worksheet is not important aslong
as the word or button you want to use fits


2. Next Grab the text tool and mark the space where you wish to type your text, and type your text like so





3. Then go to the >Layer>Layer Style> and set the options as shown below just click the check boxes the standard settings are ok. and then set the Bevel size to 3 as shown




4. Now Get yourself the Rectangular Marquee tool at the top of the tools palette and mark out the desired section as shown. Now use the >Edit>Copy Merged or press shift+ctrl+c
(I'm not a photoshop addict )




5. Now go to >File>New the settings should bet the right size for your new image.Press ctrl+v or go to >Edit>Paste to insert your new image. now >File>Save for Web a new window should now open and use "PNG-24" this way your images will keep its tracperance.




6. Now goback to your original image / text and then go to >Layer>Layer Style> and set the bevel size up 2 pixels (eg.From 3 to 5) (DO NOT REMOVE THE MARQUEE TOOL)


7. Now go and repeat steps 5&6 about 7 or 8 times untill u you have about 8 images all the same size with different bevel sizes.


9. The Animation Part Open SwishMAX and start a new Empty movie


10. Go to >Insert>Image then mark all images like so and press OK (This Method insures that all images are perfectly ontop of each other (Very Important))




11. Now Mark all the imported images like so




12. With all images marked go to >Modify>Group>Group as Sprite and give the Sprite a name


13. Now using Place and Remove you can animate the text like this




14. Add this code to your Sprite where the images are.

CODE

onSelfEvent (rollOver) {    gotoAndPlay(2); } onSelfEvent (rollOut) {    gotoAndPlay(9); } onFrame (2) {    stop(); } onFrame (8) {    stop(); } onFrame (14) {    gotoAndPlay(1); }

15. Press Play and test your file


Hope you enjoyed this Tutorial


Cheers Patrick


:: FILES ::

[*D*]

Kewl I see you worked out how to add swfs in.

but theres an easier method :

CODE

[FLASH=400,60]http://www.yourwebsite.com/your.swf[/FLASH]

Trully nice text effect

[DPC]

Now you tell me

If i knew that .....

Thanks

Cheers Patrick

[*D*]

Sorry thought you knew, we allow swfs inside tutorials upto 585x550 for display purposes of final result of course logically some things cannot be displayed, and also sig banners :: Here ::

[DPC]

Haddn't gotten that far yet i read the tuts one and how you all got started and the like but missed that one :whistle:

Cheers

[Adrian]

Nice tute patrick, thank you for your contribution.

-Adrian

[RedDragon]

simple but effective! thx for adding!

[Eddie_K]

Thanks for the tut.



Eddie

[cmonney]

awesome contribution!~

[yusuf]

Nice TUT!