Capturing Images of Scripts

This article or section documents something not included in the current version of Scratch (3.0). It is only useful from a historical perspective.

This tutorial explains how to capture an image of a script and save an image file of Scratch blocks to a computer. Only the Scratch 1.4 editor can directly save images of scripts.

In Scratch 3.0, you can capture an image of a script by taking a screenshot or using the Block Plugin to save an SVG image.

The Methods

Scratch Editor Method

A screenshot of the menu that appears when the Scripts Area is right-clicked.

Note:

This no longer works with the current version of Scratch.

The easiest way to save an image file is to right-click in the Scripts Area and press the "save picture of scripts" button. This method is the easiest, however, it does not offer the best resolution possible, because it saves the images in a .gif file format. .gif files are indexed to a certain set of 256 colors, which causes the colors of the blocks in these images to change slightly. Even though .gif files have their shortcomings, this method can still be used to create clear block images.

The added gray area.

Prior to Scratch 1.4, this feature did not work correctly, and added a gray area around the image.

Image Editing Method

Main page: Help:Script image editing

This method is a more difficult and tedious method of taking images of scripts. First, a screenshot of the script would need to be taken. Second, the screenshot needs to be opened in an image editor. The background of the scripts must be removed. Once that is done, the image should be saved, preferably in the .png file format. This method, however, is more time consuming, but it may produce a clearer image.

Scratch Editing Method

In this method, the System Browser must be opened and edited. Navigate to Scratch-UI-Panes >> ScratchScriptEditorMorph >> menu/button ops.

PNG or GIF

Paste in the following code:

saveScriptsToPNG
	| t1 t2 |
	t2 _ pageViewerMorph contents screenshot.
	t1 _ ScratchFileChooserDialog
				chooseNewFileDefault: ''
				title: 'Save Scripts Snapshot'
				type: #scriptsSnapshot.
	t1 = #cancelled ifTrue: [^ self].
	t1 size = 0 ifTrue: [^ self].
	(t1 asLowercase endsWith: '.png')
		ifFalse: [t1 _ t1 , '.png'].
	t2 writePNGFileNamed: t1

Accept. (Right-click and choose accept or press Alt+S.)

Go to the method scriptsMenu:. Replace it with the following code:

scriptsMenu: t1
	| t2 t3 |
	self target ifNil: [^ self].
	t2 _ CustomMenu new.
	t2 add: 'clean up' action: #cleanUp.
	t2 add: 'save picture of scripts (PNG)' action: #saveScriptsToPNG.
	t2 add: 'save picture of scripts (GIF)' action: #saveScriptsToImage.
	t2 add: 'add comment' action: #addComment:.
	t3 _ t2 localize startUp.
	t3 ifNil: [^ self].
	t3 = #addComment:
		ifTrue: [self perform: t3 with: t1]
		ifFalse: [self perform: t3]

It only adds the line:
t2 add: 'save picture of scripts (PNG)' action: #saveScriptsToPNG.
This calls the saveScriptsToPNG method that was just made. Accept. Save image for end user.

When the Scripts Area is clicked, the following menu will come up:
The "save picture of scripts (PNG)" works exactly the same as a GIF but saves in a different file format.

PNG Only

If a GIF will never be wanted, the saveScriptsToImage method can be changed to the following:

saveScriptsToImage
	| t1 t2 |
	t2 _ pageViewerMorph contents screenshot.
	t1 _ ScratchFileChooserDialog
				chooseNewFileDefault: ''
				title: 'Save Scripts Snapshot'
				type: #scriptsSnapshot.
	t1 = #cancelled ifTrue: [^ self].
	t1 size = 0 ifTrue: [^ self].
	(t1 asLowercase endsWith: '.png')
		ifFalse: [t1 _ t1 , '.png'].
	t2 writePNGFileNamed: t1

The scriptsMenu: method need not be edited.

Type PNG or GIF

In this method, it opens the regular dialog, and saves as a PNG unless the filename is specified to end with ".gif".

Replace the saveScriptsToImage method with the following code:

saveScriptsToImage
	| t1 t2 |
	t2 _ pageViewerMorph contents screenshot.
	t1 _ ScratchFileChooserDialog
				chooseNewFileDefault: ''
				title: 'Save Scripts Snapshot'
				type: #scriptsSnapshot.
	t1 = #cancelled ifTrue: [^ self].
	t1 size = 0 ifTrue: [^ self].
	(t1 asLowercase endsWith: '.gif')
		| (t1 asLowercase endsWith: '.png') ifFalse: [t1 _ t1 , '.png'].
	(t1 asLowercase endsWith: '.gif')
		ifTrue: [t2 writeGIFFileNamed: t1]
		ifFalse: [t2 writePNGFileNamed: t1]

If simply "Filename" or "Filename.png" is typed, it will save as a PNG, but if "Filename.gif" is typed, it will be a GIF file.

The scriptsMenu: method need not be edited.

Comparison

The GIF image is very slightly brighter colored than the PNG image, but the difference is barely noticeable.

This is the GIF image.

This is the PNG image.