This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

#1 2010-06-29 14:34:26

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Squeak - A step-by-step beginner's tutorial

I seem to find making tutorials somewhat fun. Here's another one.
This tutorial is about working in Squeak, the language Scratch is written in.
It starts from Scratch (ha... ha... ha...) and works down to the most intricate pieces of code.

A good place to start if you are thinking of making your own mod!

NOTE:
This tutorial uses the Scratch Source Code as a referral point. If you are using the normal Scratch 1.4, please download the Source from this page and use it instead. I recommend you also copy the SCRATCH.EXE file from the Scratch installation folder along with all the Plugin.dll's to have features such as presentation mode enabled. This tutorial also talks about the Scratch skin. Download the Skin zip folder and unzip it into the source code directory with "ScratchSkin" as a name.

another important note
if you are planning to publish your mod, please read the scratch source code license.
And please be creative, add something other than blocks (as requested by nXIII and annoys many other Squeakers!)

By this point you should have the browser open, that green window where all the coding's done. here's an explanation of it:
http://i47.tinypic.com/2qvs3k9.png
on top, there are four panes. from right to left:
1. 'categories'. for organization. dont appear in code
2. 'class names'. learn about these later on (not to be confused with CLASS!)
3. 'message categories'. for organization. don't appear in code
4. 'methods'. individual methods, or functions, belonging to each instance of a class (instance methods) or the class itself (class methods).

on bottom is the code pane. here the code for the selected method is inserted.
the path selected here is the one of the blockSpecs, used later on.
for more info on blockSpecs and how they work, visit the first page of this thread.

Here we go with the tutorial:

The Squeak Syntax

The squeak syntax used in Scratch is very basic:

- initialize methods are ones that are called when a Morph Object is created.

- Morphs are the graphic elements

- There are many 'classes', which are groups of code or separate morphs

- classes have two two types of methods, instance methods and class (static) methods.

- inside the classes (again, not to be confused with 'the class' above) are methods

- methods are the actual code that make the program work.
   they execute code when they are called, and can optionally return a value.
   different methods can call each other by using 'self nameOfMethod' if in
   the same class (in an instance) or 'NameOfClass new nameOfMethod' for
   a separate class.

Common squeak commands - "what's inside that code?"

Understanding and coding squeak commands is not easy without the knowledge of some simple basics; here are a few of the most used ones.

-> Always separate lines of code by a period (or full stop for english)
    That way squeak knows it can move on to the next command

-> true/false statements: this method performs a certain action if the statement
    is true, and a different if the statement is false.

Code:

valueYouWantToTest = true ifTrue: [self doThis]
                           ifFalse: [self doThat].

-> reporting a value: you can report a value using the little hat key (shift+six) ( ^ ).
    this is used when creating methods for either Scratch's reporter blocks or methods
    which can be called using if statements. note that the arrow also serves as a script
    stopper, so it can be used before commands too if you want it to be the last one.

-> declaring variables: squeak makes a large use of variables. if a variable is not included
    in the method title and you want to use it in your code, add this to the first line:

Code:

 | t1 t2 t3 |

that jut declared (created) three variables - t1, t2, and t3.

-> setting variables: your variables are no use if you can't set them to a value or string.
    to do this, you need to add this code:

Code:

t1 _ 'hello'
OR
t1 _ 53

the first one set the variable to the string 'hello', the second to the number 53. make sure you use quotes when typing strings! note: the underscore should appear as an arrow pointing left.

Useful to know when creating a mod or editing scratch

On to Scratch itself now. Ever wondered how the blocks are made? Or where the interface all starts from? This bit here will answer your questions.

-> The blocks are created in ScriptableScratchMorph's (class) blockSpecs (method).
add blockSpecs using this thread. Once you're used to it, you can try your own blocks.

On to the Scratch UI, or user interface. all of the graphics visible in scratch start from ScratchFrameMorph. that's the main graphic element which covers the whole area of the scratch window. You can find it along with all the other elements in Scratch-UI-Panes. From there you can edit a number of things, including:
-> the window title
    under private > updateProjectName, change the names that say 'Scratch'

-> all of the scratch skin, including fonts
    to edit graphic elements of the skin, change them in the ScratchSkin folder and then load them into the skin using

Code:

 ScratchFrameMorph readSkinFrom: (FileDirectory default directoryNamed: 'ScratchSkin') ifAbsent: [^ nil]

-> menus
    under 'menu/button actions', find individual menus called editMenu:, helpMenu:
    and so on. to add a simple menu item, use this code:
    menu add: 'some text' action: #chooseWhateverMethodHere.
    to add a separator, use: menu addLine.

-> dialogs
    Dialogs are created using the morph DialogBoxMorph.
    Simple dialogs can me shown with the code DialogBoxMorph inform: 'something'
    If you want to add a title you can use DialogBoxMorph inform: 'contents' title: 'title'
    TBC
_____________

This post is continuosly updated. coming soon: how to show advanced dialog boxes (wierd. i posted it already but seems to have deleted all of my work on it boohooo)

feel free to suggest stuff to add to this post. i am open to suggestions!

Last edited by LS97 (2010-10-12 08:20:52)

Offline

 

#2 2010-06-29 14:39:28

coolstuff
Community Moderator
Registered: 2008-03-06
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

Ooh, this looks interesting! It'll certainly be helpful in the up-and-coming field of modding Scratch.

Offline

 

#3 2010-06-29 15:09:43

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

It surely wiil be!
as soon as I finish it it might be a good topic to sticky.

Offline

 

#4 2010-06-29 16:55:20

johnnydean1
Scratcher
Registered: 2010-02-12
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

http://scratch.mit.edu/forums/viewtopic.php?id=39180 I posted this seconds after lol


You can now reach me on Twitter @johnnydean1_

Offline

 

#5 2010-06-29 18:36:34

nXIII
Community Moderator
Registered: 2009-04-21
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

I think you mean ScriptableScratchMorph's (class)


nXIII

Offline

 

#6 2010-06-29 22:24:34

cds56
Scratcher
Registered: 2008-05-02
Posts: 500+

Re: Squeak - A step-by-step beginner's tutorial

Yay! Squeak tutorials!

We need some of those.


http://img192.imageshack.us/img192/909/meowdevlogo.pnghttp://i32.tinypic.com/pucti.png

Offline

 

#7 2010-06-30 00:40:20

fg123
Scratcher
Registered: 2008-11-13
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

Thank you! I love this!  tongue


Hai.

Offline

 

#8 2010-06-30 08:16:02

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

fg123 wrote:

Thank you! I love this!  tongue

i hope it will be useful to you then  smile

Offline

 

#9 2010-06-30 08:32:50

ScratchReallyROCKS
Scratcher
Registered: 2009-04-22
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

Someone should sticky this......

EDIT: Oh, and to help Mac users, where you wrote:

I recommend you also copy the SCRATCH.EXE file....

could you add SCRATCH.APP too? Not that I'm complaining, I just think It would look and work better.

Last edited by ScratchReallyROCKS (2010-06-30 08:36:51)


http://imageshack.us/a/img694/3806/sigmad.png

Offline

 

#10 2010-06-30 09:07:33

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

ScratchReallyROCKS wrote:

Someone should sticky this......

i already asked for this to be stickied, but it hasnt yet  sad

then, ScratchReallyROCKS wrote:

EDIT: Oh, and to help Mac users, where you wrote:

I recommend you also copy the SCRATCH.EXE file....

could you add SCRATCH.APP too? Not that I'm complaining, I just think It would look and work better.

i could add that, but it might confuse windows users too. plus, i'm nt sure about the files and plugins that Mac uses  hmm

Offline

 

#11 2010-06-30 14:49:56

fg123
Scratcher
Registered: 2008-11-13
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

LS97 wrote:

fg123 wrote:

Thank you! I love this!  tongue

i hope it will be useful to you then  smile

I will when I make my own Mod!  wink


Hai.

Offline

 

#12 2010-08-04 11:14:23

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

first post updated. added dialog boxes
---
in other news...

HEAR YE, HEAR YE!
Bingo 1.2.0 has been released now!
it includes many changes!
visit http://bingoprogramming.weebly.com for more details!
download here!

Offline

 

#13 2010-08-04 12:26:07

markyparky56
Scratcher
Registered: 2008-03-20
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

johnnydean1 wrote:

http://scratch.mit.edu/forums/viewtopic.php?id=39180 I posted this seconds after lol

Seconds as in hours...?


http://j.mp/jgVnTq
Check out my game engine development site: NewDawn I'm a Level 171 Scratcher.I am http://bit.ly/nkvLNT

Offline

 

#14 2010-08-04 13:02:06

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

markyparky56 wrote:

johnnydean1 wrote:

http://scratch.mit.edu/forums/viewtopic.php?id=39180 I posted this seconds after lol

Seconds as in hours...?

lol, true!

Offline

 

#15 2010-08-06 03:44:17

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

woah! i'll do my best to change that  smile
but i still have a couple of things i dont like.
- first of all, i know that the iftrue ifflase is a method, i've seen it before, but that's the simplest way of executing a piece of code depending on the boolean returned...
- i know squeak doesn't have data types like other languages (c, c++...) but what do you expect me to put? every single data type in squeak?
- as far as i'm concerned, _ and := are exactly the same thing.
- that variable declaration bit you added is just plain useless  tongue
- the rest is just great. thanks for taking so mich time to give feedback  smile

Last edited by LS97 (2010-08-06 03:58:51)

Offline

 

#16 2010-08-06 04:13:24

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

btw, please delete your suggestions. they take up a lot of forum space

Offline

 

#17 2010-08-06 17:53:39

nXIII
Community Moderator
Registered: 2009-04-21
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

LS97 wrote:

woah! i'll do my best to change that  smile
but i still have a couple of things i dont like.
- first of all, i know that the iftrue ifflase is a method, i've seen it before, but that's the simplest way of executing a piece of code depending on the boolean returned...
- i know squeak doesn't have data types like other languages (c, c++...) but what do you expect me to put? every single data type in squeak?
- as far as i'm concerned, _ and := are exactly the same thing.
- that variable declaration bit you added is just plain useless  tongue
- the rest is just great. thanks for taking so mich time to give feedback  smile

- At least you might want to go into how this method works, it's a great introduction to the usefulness of blocks. (If you passed code outside of blocks it would already have been evaluated!  yikes )
- No, just say "to assign a value to a variable, use ':=' or '_'. Some syntax:
-Strings: 'Hello, World'
-Integers: 12345
-Floats: 12345.67890
- Arrays: {'Item 1'. 'Item 2'. {'Sub-List Item 1}. 'Item 4'}" or something like that
- [digital equivalent of a shrug]
- Nah, it saves memory (and speed!) if you use a lot of temp variables, but only inside a block (if statement, etc.) to declare them in there
- You're welcome!  big_smile
(You should have seen what the "Delete Post?" prompt looked like! It overflowed onto the left margin!  yikes

Last edited by nXIII (2010-08-06 17:53:52)


nXIII

Offline

 

#18 2010-08-07 08:55:50

sonicjosh
Scratcher
Registered: 2007-10-28
Posts: 86

Re: Squeak - A step-by-step beginner's tutorial

I'm still not sure how you upload the skin to a mod. Can you explain it a bit more? :S


http://i35.tinypic.com/14yacn6.jpg
Need help with your mod? Visit Mod Central!

Offline

 

#19 2010-08-07 10:15:26

majormax
Scratcher
Registered: 2008-04-06
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

Wow I understand Squeak way more now. This guide is awesome! When I get home from the outer banks I will have to get on the computer to use my new knowlege! Maybe you could make a list of what the different categories contain?

Offline

 

#20 2010-08-07 14:15:04

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

majormax wrote:

Wow I understand Squeak way more now. This guide is awesome! When I get home from the outer banks I will have to get on the computer to use my new knowlege! Maybe you could make a list of what the different categories contain?

different categories?
anyway thanks a lot for all those compliments!  big_smile

(btw, i suggest you use a copy of the scratch source code as a sandbox to experiment, then move onto customizing your own scratch version. if you think it's worth sharing, you can post it up on a site!)

Offline

 

#21 2010-08-07 14:21:14

HD123
Scratcher
Registered: 2009-12-05
Posts: 500+

Re: Squeak - A step-by-step beginner's tutorial

This should be stickied

Last edited by HD123 (2010-08-07 14:21:38)


~~HD123~~
Treat others as you want to be treated. |  big_smile  | http://i.imgur.com/OaNrY.gif | http://blocks.scratchr.org/libstatus.php?user=HD123&online=http://lemonfanatic.webs.com/ONLINE.png&offline=http://lemonfanatic.webs.com/OFFLINE.png

Offline

 

#22 2010-08-07 15:01:25

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

HD123 wrote:

This should be stickied

it's already been proposed. if you want to support it, try posting on this thread

Offline

 

#23 2010-08-15 06:18:30

sonicjosh
Scratcher
Registered: 2007-10-28
Posts: 86

Re: Squeak - A step-by-step beginner's tutorial

sonicjosh wrote:

I'm still not sure how you upload the skin to a mod. Can you explain it a bit more? :S

HELLO!!! Please help! I just don't know how...


http://i35.tinypic.com/14yacn6.jpg
Need help with your mod? Visit Mod Central!

Offline

 

#24 2010-08-15 06:32:49

LS97
Scratcher
Registered: 2009-06-14
Posts: 1000+

Re: Squeak - A step-by-step beginner's tutorial

Offline

 

#25 2010-08-16 18:13:49

stickdude123
Scratcher
Registered: 2010-05-31
Posts: 100+

Re: Squeak - A step-by-step beginner's tutorial

LS97 wrote:

[topic post - shortened by request of topic owner]

thank you!

Last edited by Wolfie1996 (2010-08-17 12:48:38)


http://internetometer.com/imagesmall/34259.png http://www.mediafire.com/convkey/418e/lkb7wmv2n2k73rz5g.jpg         http://blocks.scratchr.org/API.php?user=stickdude123&action=onlineStatus&type=square

Offline

 

Board footer