Help - Search - Members - Calendar
Full Version: Glass Like Buttons
13Dots Forum > Tutorials And Articles > Swish2/SwishMax And Swish Max2 Tutorials
the_iceman
I posted this on another site but thought it would be a good idea of putting it here for all us dotters.

Forgive me if this tutorial is pale in comparrison to those wonderful tutorials which people have already done and if this topic has already been covered (didn't see it but doesn't mean it isn't there).

With some of the vector capabilities SWiSHmax has I thought I would put together a little tutorial on how to make a semi-realistic glass button.

I've created a little flash for the tutorial and it can be found HERE:

Glass Button Tutorial

NEW GLASS BUTTON TUTORIAL

I like this little method of creating glass objects because it gives a little level of flexability in the changing of the 'glass' colors without having to change anything else.

Anyway.... it is a very easy type tutorial and I do hope you enjoy it.

Again apologies if this topic for SWiSHmax has been covered and there are much better tutorials regarding this out there.

Jeff
Eddie_K
Very nice tut. Easy to follow and understand.

Thank you for sharing with us flowers.gif
*D*
Great little tutorial Jeff, thankyou for sharing this and no I don't think we have this up anywhere, nice end result as well. New users to Swish love these.

Many thanks
BlueHall
nice tut. so easy, i kicked myself.
alias.infnit
That is very....what's the word to describe it?

I want to use neat but that's usually said when something is goofy but you want to be nice.....


Well it is very neat and creatively awesome! And takes that as a grammy bigwink.gif
VidTeach
nice turorial
Zeerus
great tut Iceman, very easy to follow. There was another way to create an orb in the huge drawing tutorial, but I think this one is much better.
SmC
Nice tut, nice effect !

Thx for this !
airiz
cool tutorial...
theyell4
thats well good!

cheers,
Jon
My myspace
duk_designz
i really like this tut! thanks! fud.gif
barkhan
awsome :xmasnaughty:
groboug
Thank you for sharing this easy tut
mpfeiffer
Super cool.

I used it as a start to an animated glass button that fills with a fizzy liquid. When I put the finishing touches on it, I'll post it.

I love the things that seem simple (and are if you have someone giving you the step-by-step) but come out so damn good-looking.

Peace.

Mike
Faakher
I have Seen and its realy grat for me..
and thanks for sharing it

Faakher
Zyth
Very nice tutorial!
The best and easiest that I've seen on this subject. (Also the best results!)
Thanks!
the_iceman
Glad Y'all like it! ... with the new Flash 8 Blends .... it can be even better. smile.gif
the_iceman
I may create a tut for the flash8 filters however what I can give at this time is an 'update' to doing glass buttons.

With Flash 8 there are some great filters (drop shadow, bevel, glow, etc). Not only that you can now use BLEND MODES (similar to how you blend layers together in PS or PSP).

Here is a link to show a glass button using the following new enhancements:

Blend Modes:

Normal Layer
Multiply Layer

Filters:
Glow Filter
Drop Shadow Filter

Glass Ball using above filters

Glass Ball .swi file

Glass Ball .swf file

Simply download the .swi file and see how easy it is to make glass buttons with it. Little code and you don't have to muck around with the transparencies to try and get the gels to look round.

All you have to do is play around with what color you want for the BASE color and it works perfectly.

*NOTE: PLEASE REMEMBER TO TEST THIS IN A BROWSER. You need to ensure you export it as FLASH8 and it will only work if you test it in a browser which has FLASH8 installed as a plugin.

Jeff
Umaynome
QUOTE(the_iceman @ Jan 3 2006, 10:40 AM) *
I may create a tut for the flash8 filters however what I can give at this time is an 'update' to doing glass buttons.

With Flash 8 there are some great filters (drop shadow, bevel, glow, etc). Not only that you can now use BLEND MODES (similar to how you blend layers together in PS or PSP).

Here is a link to show a glass button using the following new enhancements:

Blend Modes:

Normal Layer
Multiply Layer

Filters:
Glow Filter
Drop Shadow Filter

Glass Ball using above filters

Glass Ball .swi file

Glass Ball .swf file

Simply download the .swi file and see how easy it is to make glass buttons with it. Little code and you don't have to muck around with the transparencies to try and get the gels to look round.

All you have to do is play around with what color you want for the BASE color and it works perfectly.

*NOTE: PLEASE REMEMBER TO TEST THIS IN A BROWSER. You need to ensure you export it as FLASH8 and it will only work if you test it in a browser which has FLASH8 installed as a plugin.

Jeff



Im new to swish and would love to try this...can someone tell me more about step 2. His read me is not to hard but Im hanging on step 2. Thanks
Umaynome
Im new to swish and would love to try this...can someone tell me more about step 2. and step 5 please ...........Or if you have a picture you can upload of where its at that would help to as I read these read mes the pictures really help the new people
the_iceman
Umaynome,

Step 2 is applying a linear gradient fill.

This is accomplished by creating the shape and then going to the shape panel on the right side of your screen.

It might show the shape is being filled by a solid color. Click on the solid button and then change it from SOLID to LINEAR GRADIENT

Then you can select which linear gradient you want (in step 2 it is in the drop-down list ... find the gradient (first or 2nd one) that goes from WHITE to BLACK.

Step 5 is pretty much doing the same thing. You can select the same gradient but then you change the 'transparency' of the white and black. You can change them by simply clicking on the little color indicators on the gradient line. You can change the transparency of the white to 0% (alpha) and the black to 80%

Hope that helps.
Umaynome
ice man thank you so much for helping me so far, I got what you said but where does the 45 angle go at into swish from the step 2 process?
the_iceman
Umaynome,

There is a little 'properties' button above the little window that shows the gradient.

If you click on the properties button it gives you additional options like moving the x/y coordinates, the angle the size... and more.


Hope that helps.
eje0100
Very nice tut nice and easy even I can do it. lol
2ksaint
great job iceman

i just wanted to download the glassbutton.swi file but the link is broken

please upload the file again the one used with flash8 filters

thanks smile.gif
*D*
QUOTE(2ksaint @ Mar 14 2006, 10:51 AM) *
great job iceman

i just wanted to download the glassbutton.swi file but the link is broken

please upload the file again the one used with flash8 filters

thanks smile.gif


This is a tutorial, follow it correctly and you'll have your buttons. There is no download swi for this.
the_iceman
I hated that lil flash tutorial..... so in place I'm putting in a new link to a much better tutorial.

I updated the original post as well with the new link as well.

I'll also be posting a new FLASH8 version since there was never a tutorial for it.

The flash tutorial is about 4mb in size .... but I'm trying out some FLASH-tutorial software.

Oh... BTW ... at the end of the tutorial it does give a button to download the actual .swi smile.gif


NEW GLASS BUTTON TUTORIAL
*D*
Awesome update Jeff. thumbsup.gif
photomaxcairo
thnks master>>>
it is great tut
chmichael
Looks pretty
teamneon
cool tutorial
ostaz
very nice tutorial
seulater
Awesome Tut. and thaks for taking the time to teaching us these neat tricks.
i just bought SwishMax 2 and allot of the things shown in the movie are not in there. Or at least i cannot find them. you would not happen to have another Tut. for SM2 would ya ?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.