Welcome to the new and improved Lingo Web Tutorial! This resource is intended to provide instruction, with clear examples, in using the Lingo scripting language for Director movies.

Before spending any more time online, you might like to download the offline version of this page, LingoOnline1.pdf.

This project was funded by the Advisory Group on Computer Graphics, a division of JISC.

How to use the resource
Locate a topic of interest, pick a movie from the topic group list, read more about it in the "Details" page and download it. When you've downloaded and unpacked the movie (Director 5 remember!), study the code and movie organisation and adapt it to your own requirements. It's as simple as that!
  Great care has been taken to make the movies as small as possible, while keeping them informative, to minimise your download times. However, if you want more than two or three movies from a group it will probably be quicker to download the whole group archive. If you have a fast connection (or someone else is paying), you may prefer to download the complete project archive in either zip format (1253K) (use Stuffit or Winzip to decompress) or self-extracting executable (1279K). (only works for Windows95/NT PCs).
If you have any constructive comments about this resource, please mail me.

Resource | Movies | Contents

About the resource
This resource is based upon earlier work producing tutorial movies for art and design students learning Lingo. The downloadable movies are all cross-platform. They are currently in Director 5 format and have been tested with Version 5.0.1 for MacOS and Version 5.0 for Win95. There are no plans for Win3.1 versions.

The movies incorporate a number of features to make them easy to understand. For example, they contain heavily-commented Lingo code and castmembers named and organised to minimise confusion. However, they are designed as a learning resource for those following some course of instruction rather than as a complete open learning package. Please bear this in mind.

About the movies
The movies are in thematic groups but be aware that there is no hard-and-fast division between these groups. Any Lingo project will probably involve concepts and techniques from more than one group. There is also no need to progress in linear fashion from the first group to the last when downloading and studying the movies, though this is advisable.

Basic Lingo
In this group you will find movies demonstrating:
  + execution of statements and flow of control
  + simple use of local and global variables
  + basic text handling
  + simple use of lists
There are several examples in some categories. A number of the examples use the same graphic sprites in an attempt to focus on the differences in the Lingo constructs. These differences will only become clear when you download and open the movies.

BasicLingo01 - Sequential execution of statements

Lingo executes individual program 'statements' sequentially, in common with most other programming languages. In this movie, four statements are attached to buttons designed to be clicked in sequence. A 'Reset' button executes all four statements in reverse order. Additional feature is status messages about each button click.
Back to BasicLingo list...

BasicLingo02 - Conditional execution of statements 1

Lingo can execute statements conditionally, by 'branching'. The simplest form of branch is:
IF <condition> THEN
  <action(s)>
END IF
In this movie, an alarm sounds IF a clockface shows a particular hour. A 'Reset' button resets the time. Additional features are: an alarm cutoff button and a status message sent when Director enters the branch.
Back to BasicLingo list...

BasicLingo03 - Conditional execution of statements 2

Lingo can execute statements conditionally, by 'branching'. This movie illustrates the two-way branch:
IF <condition> THEN
  <action(s)>
ELSE
<alternative action(s)>
END IF
In this movie, an alarm sounds IF a clockface shows a particular hour. An alert dialogue is displayed when the alarm is switched off: it is worded one way IF user's machine is a Mac ELSE if user's machine is a PC, it is worded differently. A 'Reset' button resets the time. Additional features are: an alarm cutoff button and a status message sent when Director enters the branch.
Back to BasicLingo list...

BasicLingo04 - Conditional execution of statements 3

Lingo can execute statements conditionally, by 'branching'. A multiple branching logic is more efficient than repeated use of 'IF...THEN...' statements. This movie illustrates the multi-way branch:
'CASE <case condition> OF
  <expression1: action(s)>
  <expression2: action(s)>
  <expression3: action(s)>
  <...>
  <[otherwise action(s)]>
end CASE
In this movie, an alarm sounds IF a clockface shows a particular hour. An alert dialogue is displayed after the alarm is switched off: it is worded differently according to the current day of the week. A 'Reset' button resets the time. Additional features are: an alarm cutoff button and a status message sent when Director enters the branch.
Back to BasicLingo list...

BasicLingo05 - Repeated execution of statements 1

Repeated execution of sequential statements is more efficient and less tedious to code (or read) if Lingo's 'repeat loop' capabilities are employed. There are four constructs:
REPEAT WITH <counter> = <start> TO <finish>
  <action(s)>
END REPEAT

REPEAT WITH <counter> = <start> DOWN TO <finish>
  <action(s)>
END REPEAT

REPEAT WITH <variable> IN <aList>
  <action(s)>
END REPEAT

REPEAT WHILE <testCondition>
  <action(s)>
END REPEAT
This movie demonstrates repeated execution of Lingo statements using the REPEAT WITH.... keyword construct. Castmembers representing the hands of the clock are swapped a set number of times. An alert dialogue gives the number of repeats performed. Additional features are: an alarm cutoff button and status messages sent just before and just after Director enters the loop.
Back to BasicLingo list...

BasicLingo06 - Repeated execution of statements 2

There is a companion construct to 'REPEAT WITH...': 'REPEAT WITH... DOWN TO...'. This movie demonstrates use of this construct to run a clock backwards. An alert dialogue gives the number of repeats performed and the (slightly unusual) construct used. Additional features are: an alarm cutoff button and status messages sent just before and just after Director enters the loop.
Back to BasicLingo list...

BasicLingo07 - Working with variable values

We often wish to work with values that we do not know in advance. Such values can be stored as 'variables' and Lingo has two kinds: local and global. Here is an example use of a local variable:
set myName = "Ian"
put "Hello" &&myName
The double ampersand concatenates (joins) the text in quotes and the variable with a space between, producing the output:
Hello Ian
Local variables do not have to be declared but the value of a local variable is not transmitted beyond the handler containing it. If that facility is required, then a global variable must be used. Global variables have to be declared. Here is an example use of a global variable:
global gMySpecialSprite

on mouseDown
  set gMySpecialSprite = the clickOn
  puppetSprite gMySpecialSprite, TRUE
end

on mouseUp
  set x = random(100)
  set y = random(100)
  set the loc of sprite gMySpecialSprite = point(x,y)
  updatestage
end
Both 'mouseDown' and 'mouseUp' handlers have access to the global variable's value. Note that the 'mouseUp' handler also uses two local variables, 'x' and 'y'. Any sprite with this script attached would be moved around the stage when clicked.
This movie demonstrates use of local and global variables within repeated execution of Lingo statements. It is based on the 'REPEAT WITH...' demo movie, BasicLingo05 but here the clock animation loop uses a local variable for the castmember required and sets a global variable recording the number of repeats. Additional feature: the ALERT message giving the number of repeats performed takes the number from the value of the global variable set by the animation repeat loop, instead of having it 'hard-coded' into the relevant button script.
Back to BasicLingo list...

BasicLingo08 - Storing and retrieving data with lists

Data can be stored in 'lists', of which the simplest form is a linear list. Here is an example of a linear list:
set myList = ["jack","jill","fred"]
Here the list is set up with three text entries. The entries could equally well be numbers, symbols (starting with the hash character #) or variables. Lists are manipulated with special commands such as:
getAt(myList,2)
which will retrieve "jill", the second entry in the list, and:
add myList,"sue"
which will add "sue" at the end of the list. A list would typically be intitialised empty and entries would be added later, perhaps using a repeat loop. For example:
set myList = [ ]
repeat with i = 1 to the number of members of castLib "Internal"
  add myList,(the name of member i)
end repeat
This loop will cycle through the internal cast, adding an entry consisting of the member name each time.
  This movie demonstrates use of linear lists, using loops similar to the above to build two lists. The button 'List Entire Cast' does just that, calling a handler which produces a list containing one entry for each castmember name. The button 'List Specified Cast' builds another list, using an 'IF THEN' construct with two conditions: that the entry contains both "Countdown' and 'BMP'. These characters are found only in those members used in the clock hands animation. Additional features are: feedback messages in status field and two buttons, 'List Entire Cast' and 'List Specified Cast'.
Back to BasicLingo list...

BasicLingo09 - Repeated execution of statements 3

There is a companion construct to 'REPEAT WITH...': 'REPEAT WITH <variable> IN <aList>'. The syntax is:
REPEAT WITH <variable> IN <aList>
  <action(s)>
END REPEAT
This assigns successive values from the specified <aList> to the <variable>. It may be a more convenient REPEAT construct if the loop control or actions are related to data best held in a list. It is necessary to have some familiarity with variables and lists to use this form: these topics are introduced in earlier movies.
This movie demonstrates use of this construct to create the clockface animation by looping through a list of the relevant bitmap castmembers. An alert dialogue gives the number of repeats performed, as in earlier REPEAT movies. Again as in an earlier movie, this number is taken from the value of the global variable set by the animation repeat loop, instead of having it 'hard-coded' into the relevant button script.
Back to BasicLingo list...

BasicLingo10 - Repeated execution of statements 3

The last form of repetiton in Lingo is REPEAT WHILE <condition>. This movie uses the number of the last animation castmember as the loop test condition. In other respects, the Lingo is very similar to that in the REPEAT WITH... movie. An alert dialogue gives the number of repeats performed, as in earlier REPEAT movies. Again as in an earlier movie, this number is taken from the value of the global variable set by the animation repeat loop, instead of having it 'hard-coded' into the relevant button script.
Back to BasicLingo list...

Sprite Control
In this group you will find movies exploring sprite control:
  + with buttons
  + by moving another sprite
  + by dragging a sprite
  + by external events (key press, mouse click etc)
There are several examples in some categories.

SpriteControl01 - Control by button 1

Sprites can be controlled by designating them as puppets and changing one or more of their properties. This movie demonstrates control of a property with buttons. The property changed is 'the locH of sprite'.
  A global variable is used to identify the puppet sprite and a local variable to modify the horizontal location. There is no limiting or error-checking code.
Back to SpriteControl list...

SpriteControl02 - Control by button 2

In this movie, the following properties of a sprite are changed:
a. foreColor of sprite
b. stretch of sprite
c. height of sprite and width of sprite
There is no limiting or error-checking code.
  Additional feature: status messages about current values of properties; Reset button.
Back to SpriteControl list...

SpriteControl03 - Control by button 3

In this movie, the following properties of a sprite are changed:
a. locH of sprite
b. locV of sprite
c. foreColor of sprite
d. backColor of sprite
There is no limiting or error-checking code.
  Additional feature: status messages about current values of properties; Reset button.
Back to SpriteControl list...

SpriteControl04 - Control by button 4

In this movie, the horizontal location of the sprite is changed with two arrow buttons. The sprite moves continuously while mouse button is held down. Limiting and error-checking code is introduced to provide the following additional features:
a. movement is constrained to invisible 'play area'
b. movement is reversed if sprite hits limit
c. aural feedback if sprite hits limit
The 'continuous operation' code is adapted for the movie 'SpriteControl05'.
Back to SpriteControl list...

SpriteControl05 - Control by moving another sprite

This movie demonstrates control of a gauge sprite with a slider constrained to move only between the top and bottom of a track. The 'height of sprite' property of the gauge sprite is changed by moving the slider, with the height value being calculated from the vertical position of the slider.
  This technique can be applied to the control of sound volume or the playing of digital video. Digital video members can of course be 'sound-only'. Additional feature: display of code fragment, containing a 'repeat while the stillDown' loop, which controls both slider and gauge.
Back to SpriteControl list...

SpriteControl06 - Control by dragging 1

This movie demonstrates mouse control of a sprite constrained within a non-rectangular path.
Additional features are:
a. visual and text feedback if illegal move is made
b. visual, text and aural feedback
    if sprite is moved to end of path
c. a score conditional on number of illegal moves
d. elapsed time readout seconds
Back to SpriteControl list...

SpriteControl07 - Control by dragging 2

This movie demonstrates the checking of a moveable sprite's location, using the comparison operators 'Sprite...Intersects' and 'Sprite...Within' The different results obtained using COPY and MATTE inks for the sprites can be observed. Additional features are:
a. visible bounding boxes round the fixed and moveable sprites
b. ability to switch between COPY and MATTE ink frames, to observe effect on truth of comparison. There is also a status message giving the position of the square relative to the circle.
Back to SpriteControl list...

SpriteControl08 - Control by dragging 3

This movie is another demonstration of the use of the comparison operators 'Sprite...Intersects' and 'Sprite...Within'. When used in this way, there is obviously a need for some additional code to prevent the 'ball' being moved into the 'water' through the side of the 'bucket'.
Back to SpriteControl list...

SpriteControl09 - Control by events 1

This movie demonstrates sprite control through response to events: mouse clicks in this case. A list of four sprite properties is created on startup and each click on the ball sprite selects a property at random. A new value for the selected property is also generated; at random but within fairly small limits.
  Use of modifier keys to select a particular property is suggested as a possible development. Additional feature: a 'panic reset', triggered by holding down the CONTROL key while clicking anywhere on-stage, for use if any operation renders the sprite invisible.
Back to SpriteControl list...

SpriteControl10 - Control by events 2

This movie demonstrates sprite control through response to events: key presses in this case. A handler determines which of the four arrow keys has been pressed and another handler then moves the sprite in the appropriate direction. The moving sprite is constrained within a non-rectangular path. Additional features are:
a. visual and text feedback if illegal move is made
b. visual, text and aural feedback if sprite is moved to end of path
c. a score conditional on number of illegal moves being below a set limit
d. sprite location readout in the form point(x,y)
There is also a status message about the direction of travel.
Back to SpriteControl list...

Navigation
In this group you will find Lingo-based approaches to such navigational aids as defining hotspots and referencing framelabels. The hotspot techniques can employed to create toolbars or navigation buttons in the manner of of a WorldWideWeb image-map.

Navigation01 - Defining rectangular hotspots 1

Navigation in a Director project often relies on locating the cursor in relation to parts of the stage designated as 'hotspots'. This movie demonstrates the division of the stage into regular, rectangular hotspots or zones with invisible 'position detector' sprites made from a bitmap. Additional features are: feedback messages in status field; buttons to show the individual zones used and a button to show all zones simultaneously overlaying a map.
Back to Navigation list...

Navigation02 - Defining irregular hotspots 1

Irregularly-shaped hotspots are sometimes required. This movie uses a bitmap castmember for a sprite with 'Matte' ink which is overlaid on a map to create the hotspot. Th function 'the mouseCast' is used instead of 'rollOver()' to detect positioning of the cursor inside the actual shape, rather than just somewhere within the bounding box. Additional features are: invisible detector sprites dividing rest of 'stage' into rectangular zones and feedback messages in status field.
Back to Navigation list...

Navigation03 - Defining rectangular hotspots 2

Rectangular zones can be defined without using sprites. This movie uses a property list to define the zones. Avoiding sprites frees channels for other uses and reduces movie file size. Additional features are: a permanent crosshair marking junction of zones; feedback messages in status field.
Back to Navigation list...

Navigation04 - Using framelabels

Text in fields can be made clickable. This movie uses 'the labelList()' function to build a list of framelabels which is stored in a field, one label to a line. The labels can then be used to navigate a movie. The technique could be applied outside of the Shockwave environment to generate a clickable list of filenames. Additional features are: popup display of framelabels in the score; feedback messages in status field.
Back to Navigation list...

Navigation05 - Mapping the cursor position

Lingo provides a means of mapping one rectangle onto another. This function can be used to map the cursor position from a small 'model' rectangle to a larger 'real' one. This movie demonstrates modelling of a restricted part of the stage and use of the 'map()' function to move a sprite around the 'stage'. Additional feature: a button to show comparative proportions of model and stage rectangles.
Back to Navigation list...

Navigation06 - Calculating proximity to the cursor position

Relatively simple maths can be used to calculate the proximity of the cursor to designated sprites. This movie demonstrates the application of this technique to the making of responsive hotspots. This is done by changing certain sprite properties in response to cursor movement. Additional features: display of the calculation code; feedback messages in status field. The proximity routines were devised by Mark Peden. Check out more of his work at his home page; his amoebic lifeforms page and his online life page.
Back to Navigation list...

Animation
In this group you will find Lingo-based approaches to such animation techniques as colour-cycling, image-swapping, and using a list of points to position an image. These techniques can be employed to create small and efficient animations which play well in the environment of a WorldWideWeb browser.

Animation01 - Colour cycling

Colour-cycling is an efficient way to produce simple animation. There are two classic techniques: changing the colour of an object and changing the palette of colours applied to a whole scene.
  Palette cycling can be unpredictable in a browser environment, since everything in the window is subject to change, so this movie demonstrates the cycling of sprite colours. These were chosen from the D5 Netscape palette. Additional features: Status messages; display of essential code fragment.
Back to Animation list...

Animation02 - Image swapping 1

Traditional animation consists of a number of frames shown in rapid succession to create the illusion of movement, a technique sometimes called 'swap-frame' animation. To avoid confusion with Director's use of the term 'frame', the technique will be referred to as 'swap-image' (or image swapping) in this project.
  There is a trade-off between image quality and file size: in this movie 1-bit images created in Director are used and a very small file results. Images can however be produced with any graphics software capable of saving files in PICT format.
  This movie demonstrates how Lingo can be used to swap the images assigned to a sprite which stays in one position on-stage. Additional features: speed control buttons; Status field messages.
Back to Animation list...

Animation03 - Image swapping 2

This movie demonstrates application of the image swapping technique to creating the illusion of motion. 32-bit images have been imported from a graphics program and downsampled to 8-bits in Director, using the Netscape palette. This improves image quality at the expense of file size. Additional features: speed changing buttons; Status messages.
Back to Animation list...

Animation04 - Using a list of points 1

It is obviously better to move a small image against a static background than to swap large images, if possible. In this movie, the location of the green telltale is set successively to points stored in a list. Note that points may have to be tweaked to get alignment with other sprites, as has been done in this case.
  The technique can produce very fast animation: this example is deliberately slowed down to improve visibility. Image quality can also be higher as far fewer castmembers are required. The two used in this movie are 32-bit. Additional features: speed changing buttons; Status messages.
Back to Animation list...

Animation05 - Using a list of points 2

In this movie, the 'point-list' method of changing the location of a sprite is combined with two methods of hiliting other sprites based on that location. The technique is used to illustrate the flow of control in a REPEAT WHILE... loop.
  The animation in this movie was originally produced as a Score animation and took 404 frames: this version uses only 2 frames. The original Score animation was used as source for a QuickTime movie which was 332K: this movie is 195K.
  The main problem with the technique when used to produce Shocwave movies is that animations have to be artificially slowed to be visible at all. This can produce the rather jerky results evident in this example when viewed on some systems. Compare the animation in the downloaded movie with what you see here. Additional features: status messages; aural feedback on START and 'passTestCondition'.
Back to Animation list...

Object-Oriented Programming
In this group you will find just two movies. One demonstrates the application of object-oriented programming techniques to the creation of utilities. Once you have understood the issues and possibilities, you can use this movie as a basis for making your own utilities. The second movie demonstrates the oop approach to animating sprites.
  You are strongly advised to consult 'Lingo Sorcery: The magic of lists, objects and intelligent agents', SMALL [1996] for more detailed information and examples.

OOP01 - creating utility objects

This movie demonstrates an object-oriented approach to programming utilities and interacting with them. The approach outlined can be applied to offline tasks such as managing files and folders in a CD-ROM project. SMALL [1996] explores the issues in considerable depth. Additional features: text input field; custom message fields to replace 'alert' dialogues; custom messages.
Back to Object-Oriented Programming list...

OOP02 - creating animated sprites

This movie (by Mark Peden) demonstrates object creation and control in Director through the animation of sprites. Additional feature: extensive tutorial comments in the code. Study Mark's great tutorial comments in the downloaded movie carefully... Check out more of his work at his home page; his amoebic lifeforms page and his online life page.
Back to Object-Oriented Programming list...

NetLingo
In this group you will find movies demonstrating two aspects of Shockwave-specific Lingo:
a. Using one movie to retrieve another
b. Storing and retrieving data locally
You are strongly advised to consult 'Shocking the Web', CLARKE & SWEARINGEN [1997] for more detailed information and examples.

NetLingo01 - covering Shockwave download times

This link loads one small animation which in turn loads a larger movie. The first movie ('NetLingo01a') demonstrates application of the point-list animation technique introduced in the 'Animation' group to the creation of a Shockwave load-time cover movie. This movie preloads the second one. There are no additional features.
  The second movie ('NetLingo01b') appears only when loading is complete, minimising the time spent looking at a blank screen. This movie could be anything at all: in this case we use a cut-down version of 'NetLingo02', which loads a previously-saved data file to create a drawing. Note that you have to load 'NetLingo02' at least once and save a drawing before anything will appear in this movie.
  The first movie in the sequence is 18K; the second 95K. Note that movie file size has no impact on the time taken to load the plugin. This is dependent upon the user's platform (the Win95 implementation is appreciably faster than the MacOS 7 one) and machine configuration. There is therefore a limit as to how much benefit you can derive from the 'load-time cover' technique.
Back to NetLingo list...

NetLingo02 - storing and retrieving data locally

This movie demonstrates use of the Shockwave-specific Lingo elements 'setPref' and 'getPref' to store and retrieve local data. Note that most Lingo facilities for file operations are disabled or frowned upon in Shockwave, in line with general thinking on security.
  In this example application, the two elements are rolled into handlers to store and retrieve drawings on the user's machine. Additional features: drawing area; buttons to Save and Load data; buttons to Clear or Redraw the area; Status messages.
  The idea and core coding come from Mark Peden. Check out more of his work at his home page; his amoebic lifeforms page and his online life page.
Back to NetLingo list...
Use | Resource | Movies | Contents

Graphics     Multimedia      Virtual Environments      Visualisation      Contents