View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Tips and Tricks for Graphics/Animation in Squeak


This tutorial is meant to elaborate on the concepts discussed in class that I used to employ some useful techniques for my project. I will briefly go over the basic concepts, but you will find much better resources on the coweb and in the class text. I will then discuss the more useful techniques that I developed for my project.

ImageMorph Basics

One of the problems I faced in this project was trying to decide how to do graphics with Squeak. Should I have morphs that draw using the Squeak environment from scratch or should I develop my images outside of the environment and import them. I decided the latter technique would give me the best results so that led me to the ImageMorph. Here are the methods I used when using this class.

Morph and Layouts

One of the biggest issues I encountered was on how to position morphs correctly. I was drawing from my previous experience with Java and graphics layouts. It turns out Squeak behaves in pretty much exactly the opposite way that Java does. In java, you would create a layout and define how the layout would orient the objects. It turns out in Squeak, you create the layout and the basic way it will orient objects, but you let the child object define more specifically how to orient itself within the parent morph.

Morph Animation

Here are the animation concepts I used to do my basic animation that is basically a glorified animated GIF that you would regularly encounter on the internet.

Simple Animation

Using these concepts I was able to do a very simple task of chaining together images together much like a digital flip-book. Here is the code I used to accomplish this:

"Instance variables"

stepCount Integer – the current iteration that the animation morph is in

filePrefix String – the prefix of the file to be loaded, step count is concatenated to this

to load the correct image to display.

animType Symbol – type of animation sequence to display to the user

myinitialize: animation

"Initializes the animation"

stepCount := 0.

animType := animation.

(animation = #slap) ifTrue:[ filePrefix := 'slap-' ].

(newBounds notNil) ifTrue:[
self position: newBounds center - (self extent // 2).

self openInWorld.

self startStepping.


"Changes image to be displayed"

| file |

stepCount := stepCount + 1.

file := filePrefix, stepCount asString, '.gif'.

self image: (Form fromFileNamed: file).


"Step to the next part of this animation's cycle"

(animType = #slap) ifTrue:[
(stepCount = 5)

ifTrue:[ self delete ]

ifFalse:[ self nextImage ]



"Step to the next part of this animation's cycle"

^ 1500


Using the above methods you should be able to produce a pretty simple and clean looking animation. Just save the following images and create file. You can then instantiate it with "Animate new #slap" to see how it works.

External Image
External Image
External Image
External Image
External Image

Link to this Page