How to apply graphic effects to an object

This lesson will show us how to apply some of LiveCode's built in graphics effects to an object.

Create a stack and create a graphic

Create a stack and create a graphic

1) Create a new stack and select the 'Freehand Polygon' tool.

2) Draw a nice looking random shape on the card. Each mouse click will create a point in your polygon. Double click to release the mouse when you are finished.

Setup the polygon

Setup the polygon

In order to get the best view of our effects in action we need to:

1) Set the 'Opaque' property of the stack to true

2) Set the 'Line thickness' property to 0 (removing the border)

3) Go to the 'Colors' tab and set the 'background fill'. I chose this nice blue.

Select an effect

Select an effect

1) With your polygon selected, choose the 'Effects' tab in the Property Inspector

2) Select an effect to apply (In this case 'outerGlow')

3) Increase the 'size' property until you are happy with your effect

It's easy to apply any other effect. Just select it and play with the settings to create some really cool effects.

Play around to achieve some cool effects

Play around to achieve some cool effects

4 Comments

Barry Levine

Very nice effects. Can the graphic, with the effects intact, be exported from the stack to a file? I'm thinking of acjpeg or tiff or pdf, etc.

Michael McCreary

Hi Barry

You can export the graphic to an image using the export snapshot command, remembering to specify "with effects".

export snapshot from graphic "" with effects to file ".png" as PNG

See the export snapshot dictionary entry for more information.

You can also export the contents to PDF using the print commands. See the following lesson for more info.

http://lessons.runrev.com/spaces/lessons/buckets/809/lessons/29177-How-to-create-PDFs-using-LiveCode

Warm Regards,

Michael

Ryan Simmons

I'm trying to create a button using a round rectangle and all of the graphic effect properties are disabled except for the drop shadow property. The properties for the inner glow effect are all disabled. I can see them but they are disabled. I downloaded all versions of livecode and they are still disabled. Please help!

Ryan

Hanson Schmidt-Cornelius

Hi Ryan,

try selecting the line rather than the tick box. You should find that the blue highlight bar moves onto the line you select. The controls become active if you then select the tick box.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment