Screenshot with Effects

The functionality LiveCode provides us with to import a snapshot of an object has some extremely useful applications. LiveCode gives us the ability for this snapshot to include graphical effects such as blending, shadows, and color overlays. This lesson will demonstrate how to import a snapshot from an object which has graphical effects applied to it.

You can obtain the stack used in this lesson at the following URL:

Setting up the stack

Setting up the stack

First we will need to set up a stack. Our stack will consist of two cards - the first will contain the object from which the snapshot is to be taken, and two buttons to take the snapshot itself. The second card will be for displaying the end result of the snapshot.

Using code to take a snapshot

Using code to take a snapshot

Now that we have a stack ready, we can apply code to the buttons 'import snapshot' and 'snapshot with fx'. Here is what the code should look like for the 'snapshot with effects' button - an explanation follows.

on mouseUp
   lock screen
   import snapshot from grc "testgraphic" with effects ## omit 'with effects' on the 'import snapshot' button
   set the width of img "displaysnapshot" of card "show snapshot" to the width of the last image
   set the height of img "displaysnapshot" of card "show snapshot" to the height of the last image
   set the text of img "displaysnapshot" of card "show snapshot" to the text of the last image
   delete the last image
   go cd "show snapshot"
   unlock screen
end mouseUp

The purpose of this code is to import a snapshot, and copy it to our snapshot viewing image on the second card so that we can look at it, then clean up by deleting the snapshot image (this is not necessary, but is good practice to prevent multiple snapshot images cluttering up our card).

The code for the ’import snapshot’ button is identical, apart from the 3rd line - import snapshot from grc"testgraphic" with effects. On the code for the 'import snapshot' button, the 'with effects' part is omitted to demonstrate the difference. This 'with effects' instructs Livecode to recognize any graphical effects present when creating the

When the snapshot is taken, an image is created to contain it. We can refer to this image conveniently as 'the last image'. The two lines after the aforementioned line of code therefore set the dimensions of our 'displaysnapshot' image to the dimensions of the snapshot - thus ensuring that it is large enough to fit the contents of the snapshot image.

The following line uses the 'text' keyword to refer directly to the data of each image, and copies the contents of the snapshot to our 'displaysnapshot' image using it.

The next two lines delete the snapshot image and go to our second card, on which we can view the 'displaysnapshot' image to see the results.


Demonstrating the impact on snapshots

Demonstrating the impact on snapshots

We can see the difference that the 'with effects' instruction makes to the snapshot of the test graphic I used in this app. This graphic includes a drop shadow, colour overlay, blending, and an inner shadow. Simply importing the snapshot ignores these and produces a blank white circle graphic. Importing with effects produces an image which is identical in appearance to the graphic.

The target of the snapshot doesn't necessarily need to be a graphic, it can be any object at all (as long as graphical effects can be applied to it). Feel free to alter the target of the snapshot as much as you want in order to view the effects.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.