Tutorial in Using Adobe Director's Lingo/Javascript Authoring Environment for Exprimental Arts

Stephen Wilson, Professor, Conceptual Information Arts Program, SFSU

What is Director?

Director has been around for a long time and actually has several layers:

1.  Multimedia 2-D Animation:  It is a 2-D multimedia animation program that allows you to create or import images and sounds and orchestrate their movement over time.  This is accomplished by creating image, text, and audio cast members and placing them on a timeline based score that controls their motion and appearance.

2.  Interactive Multimedia Navigation:  Director allows you to divide the score up into sections indicated by markers.  It allows your to create buttons, hypertext, and hot images that control the navigation among areas of the score.  It has built in behaviors that allow you to link user actions such as rolling over an image or clicking a mouse button to movement to particular sections.

3  Lingo/Javascript programming support:  Director incorporates a programming language which gives you many of the capabilities available in full languages such as C, Pascal, or BASIC.  The language is fully integrated with the multimedia capabilities such as digital video so that you can create much more complex possibilities than are available with the simple navigation behaviors.  Starting with Director MX2004, Director supported 2 different programming environments - Lingo and Javascript.  Lingo is unique to Director.  Javascript is the standard language used to control interactive web pages. To use either, however, you must learn the fundamentals of the language.  These tutorials include examples on both  Lingo and Javascript.

4. Director as control center:  Director is extensible via special added software capabilities called Xtras .  For example with appropriate Xtras (and in some cases hardware), Director can be used to control speech synthesis and recognition, sensors and robotic devices, 3-D animations, and MIDI synthesizers.  Most recently extensive Internet capabilities have been added so that Director can control web browsers or incorporate information fetched from the Web.  Saving interactive Director movies in Shockwave format allows them to be sent out over the Web and appear within Web pages.
 

Basic Components of Director

Every media element you use - shapes, text, sounds, digital movies, vector images, scripts become cast members.  The screen display is called the stage.  The flow of events is orchestrated in a time line called the score which is composed of frames.  You bring cast members to the score to appear during specified ranges of frames.  Cast members become sprites when  placed in a channel.  The sprite appears on the stage for  whatever frames you designate.  The same cast member can be reused throughout the movie in different sections.

How Do Lingo and Javascript Work?

They are referred to as  modified object oriented languages.  Everything created in Director - for example, images, sounds, text are called objects.  They become cast members and once placed on the stage, each instance is called a sprite  You create  scripts to give the objects the intelligence to do things.   For example, user actions send messages to objects such as the mousebutton has been pushed down when the pointer was sitting over an image.  Normally nothing happens.  You can add a  script, however, to the image so that it will respond to a button press - for example, by navigating to a certain place in the score.  Director can also send messages to itself - for example, a timer can cause actions to happen after a certain amount of time has passed.

These langauges and Director have enormous possiblities but not everything is possible. Learning a language means learning  the range of possibilities it possesses, learning the special vocabulary of words it understands, learning the appropriate syntax for expressing your ideas, and learning the logical organization of Lingo and multimedia components necessary to create your events.  Computer languages require absolute precision of expression.  One word misspelled or an extra comma will cause errors and stop your program cold.  This inflexibility is one thing that throws many artists in learning the language.

Artistic Challenge of Working with a Limited System

Basically all you have to work with in interactive computer media is the user's movement of a mouse and actions on a keyboard.  You can manipulate sound, image, and text.  Your challenge is within the limited world of a computer system, how can you create events that are conceptually and expressively rich.  How do you take the things the system can read and do and link them in interesting ways?
 

What Kind of Events do the languages understand?

(***Note this list and the next do not list all  capabilities; their primary purpose is to suggest possibilities for the reader to start considering.)

What kind of events does they understand?  What user actions can be used to set up events?  What self induced, non user actions can it work with?  The first prerequiste for working with a language artisically is knowing what possibilities exist - what actions can it respond to and what are possibilities for what it can do with image, sound, text, and digital video.  The list below shows specific Lingo  and Javascript messages, commands and functions that you would need to tap into these possiblities.  Don't worry if you don't understand the words in the parentheses; they are examples of Lingo that relate to the events and will become clearer later.  Many detailed tutorial examples are offered after the list.

User Action

Movement of the mouse pointer - entering, staying within, and leaving the boundaries of an image sprite. ( mouseEnter, mouseWithin, mouseLeave)
Clicking the mouse button while pointing at something, double clicking (mouseDown, mouseUp, stillDown, hyperlinkClicked, mouseUpOutside, clickLoc, clickOn)
Location of the mousepointer on the screen (functions called the mouseLoc, mouseH (horizontal), and mouseV (vertical)
Entering text in a text entry field (the text of member "example")
Which keyboard keys are pressed (keyDown, keyUp. controlDown, optionDown, shiftDown, the key)
Grabbing and dragging an image sprite on the screen, contact between images (sprite 1 itersects sprite 2)
Opening, closing, moving, and deactivating windows (openWindow, closeWindow, moveWindow).
The starting or stopping of the movie (startMovie, stopMovie, preparemovie)
 

System Events

The passing of time since an action (the lastClick,  lastKey, lastEvent, lastRoll, the timer, the ticks)
The time of day or date  (the date, the time)
The movement of movie to different frames of the score (enterFrame, exitFrame)
The movement of a movie to the place a sprite exists (beginSprite, endSprite, prepareSprite)
A idle event Director continuously sends while it is running (Idle)
The touching or enclosure of image sprites (within, intersects)
The movement of a sound or digital movie past cue points
The status of a sound soundBusy(x)
The status of a digital movie (the movieTime)
 

What Can You Control in Lingo/Javascript

Images

Location of images (hloc,vloc)
Size and crop of images (the rect, crop)
Color of images (backColor, foreColor)
Replacement images ( the member of sprite x)
Visibility of images (the visible of sprite x)
Degree of transparency of images (the blend of sprite x)
Ink of image- for example opaque, reverse, invert, OR (the ink of sprite)
Palette of image
Orientation (horizontal and vertical flip, rotation, layering)
Shape and vertexes of vector images
Button style
User movability

Interface features
Appearance of the cursor
Custom menus and menuitems

Sound
Play a sound, stop, pause (sound playfile, sound stop)
Control volume (fadeIn, fadeOut, the volume of a sound)
beep

Text
Control location of text, movement, size, font, style, alignment, color, hilight
Scroll text (by line, page)
Appearance of text box (border, boxDropShadow)
Manipulate text by character, word, item, line User editability
Generate alert boxes

Digital video
Start, stop, pause, move to particular time points (movieTime)
The size of window, crop, location, mask
The speed of movie, direction of play
The status of sound in the movie, the volume
Control of quicktimeVR movies

Navigation and timing of movie
Move to frames (by marker, next, previous)
Halt, pause, continue, stop the flow of the movie
Change the tempo of a movie
Change the transitions between frames

Mathematical and Data Functions
add, subtract, divide, multiply, sine, cosine, tan, integer, round, log, sqrt, max, min
random
number of items (strings, lists)
manipulate ordered lists, find items, sort, attach properties, locate items

Net
Dowload items from the Web
Control a browser
Monitor progress
 

Introductory Examples

Here are some brief examples of Lingo/Javascript scripts.
 
 

Lingo
Javascript
This one would navigate when some one clicks a button  on mouseUp
  go frame "birthday"
end mouseUp
function mouseUp() {
_movie.go("birthday");
}

This one would stop a sound when someone moved out of a sprite image  on mouseLeave
  sound stop 3
end mouseLeave
function mouseLeave() {
sound(3).stop());
}
This one would show an alert box when the movie reached a certain frame on enterFrame
  alert "Why are you here?"
end enterFrame
function enterFrame()
{
_player.alert("why are you here);
}


 

Where do you put scripts?

Beginners are often confused about where to attach scripts.

Some specific examples - Wilson Tutorials

General Director Guides

List of Lingo Commands - arranged by category
Guide to Basic Animation Capabilities of Director

Adobe Director 11 Using Director Director Manual -
http://help.adobe.com/en_US/Director/11.0/Part02_Using_Director_1.html#1028301
http://help.adobe.com/en_US/Director/11.0/director_11_help.pdf

Adobe Director 11 Scripting Manual -
http://help.adobe.com/en_US/Director/11.0/Part02_Scripting_Dictionary_1.html#1028301
http://help.adobe.com/en_US/Director/11.0/Part02_Scripting_Dictionary_1.html


Javascript References

Javscript is a general purpose language called ECMAScript. It is used mostly on interactive web pages.  Many tutorials and references focus on the web capabilities.  The language has many generic methods and event handling capabilities. They are applied to objects. Most tutorials focus on manipulating the objects related to web pages - such as background colors, images on the page, urls, web page formatting.  Those are mostly not relevant to use of Javascript in Director.  Think of Javascript as a language that could be applied to various environments - web or director.  Each environment has its own set of objects and then Javascript will let you manipulate them.  For example, Director does not have web  page background color.  The Web does not have members and sprites.  Ideally you would learn the general aspects of Javascript and the objects specific to Director.  The Director 11 Scripting Manual  lists the special aspects of Director.  Here are some general guides to Javascript.

Brown University intro tutorial to Javascript
http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html#3.1
w3 schools javascript tutorials
http://www.w3schools.com/JS/default.asp
w3 javascript object reference
http://www.w3schools.com/jsref/default.asp



Wilson Director Annotated Examples

**note the gif's are screen grabs that show the script.  The sample director file and a zip compressed version are also often available.  You would need to use a utility to uncompress the zip file.


=========
--Basic Navigation, Lingo Control of Images and Text Fields

Javascript Examples

Javascript  navigation demo.    Using Javascript to set up navigation using markers and sections of the score.    Naviagation.dir zip version of Director file     nav text version
Javascript control of sprite visual appearance (change size, location, ink, rotation,blend, visibility and change image when rollover)   spritechange.dir zip version    sprite text version  
Javascript control of text field properties (font, fontsize, fontstyle,color) and dynamic placement of text in field from user input   control of text zip version   textchange text version  

Lingo examples

Lingo Marker navigation demo    Using Lingo to set up navigation using markers and sections of the score.
Lingo control of sprite visual appearance demo (change size, location, ink, rotation,blend, visibility and change image when rollover)
Lingo control of text field properties (font, fontsize, fontstyle,color) and dynamic placement of text in field from user input
Lingo Pause and continue demo   Controls the flow of animation using variable to pause and continue.


=========
--Sound, Speech

Javascript examples

Javascript Basic Sound Guide.html  - Play, pause,stop. Check if a sound is still playing before playing it again. Check if a sound is done before going to next section of movie.  Loop a sound.  Start a new sound when animated sprite reaches a particular position.Control the volume and fade-ins and outs. Playlists. queues for sounds. Currenttime of a sound. Set up property list for a sound - start, end, loops. Timing Delays in Director.   Javascript sound example movie screeshot.   Zip version of sound director movie 
Javacript Speech Commands - synthesized speech commands list (in Director MX and later only)

This routine shows how to use the intersect function to detect whether sprites are touching.  In this example, speech synthesis is used to let one sprite apologize for touching the other.

Lingo examples

Sound manipulation (image of handout) - play background sound and pause while sounds plays via rollover of other sprites, sound activated when sprite reaches particular place of the screen,  activate sound only when sprites intersect, change volume based on where mouse is inside of a sprite, activate sound when animation reaches a certain point, activate automatically without user action.  (zip version of acutal sound manipulation Director Movie and associated sound files)
Speech Commands - synthesized speech commands (in Director MX and later only)
Sound Demo (revised)   General Principles, Controlling animation by sound, activating sound by user motion, Activating Sound by User Movement, reading collisions, Director 8 sound commands
Multiple simultaneous sounds - plays several sounds simultaneously - rolling in and out of buttons makes sounds audible and inaudible
Repeal loop sound  - sequence sounds and random sounds from a list - alternative exit frame method not use repeat loops


=========
-- Randomness, mouse movement tracking, storing user actions, repeat command

Javascript Examples

This routine shows several examples of using Director's  javascript random function.  It rotates a sprite to a random rotation; it changes a text field's font; it maps randomly selected cast members to a sprite; it creates random sentences by picking different nouns and verbs out of lists of words; it shows how to play random sounds picked from a list of possible sounds.


- javascript - Mouse follow screenshot     A sprite follows the movements of the mouse  javascript mousefollow.dir  zip file 

- javascript Repeat Demo screenshot   Shows how to control movement and other actions using repeat structure   javascript repeat.dir zip file


Lingo Examples

Text manipulation (image of handout)  - take user input into other members, rotate text, increase size of text, speak user input, scroll text in moving message, start and stop scrolling, random generation of sentences from list of words, activate automatically wihout user action (zip version of actual text manipulation Director Movie)
Using the random function - uses random to control rotation, word in text field, font of the text, and sound that is played
^if.choice.demo.html  - Check if buttons have been clicked 3 times, check if each button has been clicked at least once, check if sound is done before playing, check if 2 sprites intersect before playing sound
3 property demo.  Shows dynamic assignment of graphic cast members and text to moving sprites.  a412.3prop.demo.gif
fontsize   Shows the dyamic control of the font and size of text.
Mouse fontsize demo   The size of text changes dynamically with movements of the mouse
Mouse follow demo     A sprite follows the movements of the mouse.
Repeat Demo   Shows how to control movement and other actions using repeat structure
Opinion Storing Demo   Shows how to store and access text that users type


========
-- ExitFrame demo- Automatic activation of functions in exitframe scripts.  The text file demonstrates automatic fontsize change, sprite rotation, fading in or out, sprite moving across screen (staying at border), sprite moving across screen (coming back on the other site),  checking if sprites or touching or are inside each other.


Javascript examples


Lingo examples

Examples of  exitframe scripts (text file)  - automatic rotation,transparency, detection of sprite intersections

===========
--Control digital video

Javascript Example
Javascript Video control screenshot - start, stop, control rate, move to particular position, activate events based on position    Javascript Video control.dir zip file

Lingo Example

*Video control commands - start, stop, control rate, move to particular position, activate events based on position


=========

--games,  arrow keys move sprite, check for word typed, check if user has clicked all the buttons, check if they have moved puzzle pieces to the right place, check for intersection of sprites


Javacript Examples

This routine reads the user typing on arrow keys and moves a sprite accordingly (up, down, right, left).  It also tests for when the sprite touches a target and responds.  Makes use of keydown function and intersects property

This example contains two routines.  Routine 1 offers the user 3 sprites.  It does not move to the next exvent until the user has clicked 3 times on any comtination of the sprites.  Routine 2 offers the user 3 sprites.  It does not move on until the user has clicked at least once on each of the 3 sprites.
This routine offers the user 3 sprites and 3 boxes.  Like a jigsaw puzzle, each sprite must be put in the appropriate box determined by the author.  The next event does not happen until the user has moved each sprite to its box.

This routine shows how Director javascript can check what word  the user has typed into an entry field. It uses the keydown function to test for the user typing the enter key.  Once it detects the enter/return key, it checks for particular words the user has typed and responds.  In this example, it uses speech synthesis to say something appropriate to what they have typed.


This routine shows how to use the intersect function to detect whether sprites are touching.  In this example, animated sprites move on the screen.  Speech synthesis is used to let one sprite apologize for touching the other.


Lingo Examples

arrow move -  check for arrow keys, move sprite based on arrow keys
check for buttons clicked -  example 1 Only do action after 3 buttons clicked.  example 2  Only do action after each of 3 buttons clicked
check for intersection  - only do action if two sprites are touching
move puzzle pieces  -  example 1 Only do action if 3 puzzle pieces moved into certain space.   example 2 Only do action if each puzzle piece is moved to its right spot
check for word typed  -  only do action if particular words are typed into a field


keep track of avatar objects - This movie shows how to keep track of objects an avatar may have picked up and then later to check if they have that object.  The link is actually to a movie in zip format.  You will need to uncompress/unzip it.  Double clicking on it works in the mac.  I think it also may work in the pc.

Avatar keep track of avatar objects

  This movie demonstrates how to keep track of what objects an avatar has collected.  There are two sections demonstrated.  On the first section (pick 1) the user clicks on objects he/she wants.  Lingo puts them in a variable.  In the example, they just click on the objects to gather them.  You could use the other techniques showed previously such as intersecting them or putting one inside of another.
  It uses the list structure which lets you keep a list of what they have collected. Lists look like this [circle, rectangle...] . Then director gives you many commands to check what is going on in the list which you might want to check later - for example do they have a certain object.  In the example there are two variables == avatar1 and avatar2.  Names are arbitrary.  Only avatar1 is illustrated.  Avatar 2,3... etc would let you keep track of objects picked up in different places.  Notice every time you use an avatar that at the beginning of the on handler you must tell Director it is a global variable.  This means even in other places in the  movie it will be able to access the variables.
  Section 2 - payoffchecks whether they have a certain object.  In this example, it just speaks a different phrase.  You could have it do anything you want such as taking them to another place (section marked by marker).
  Scripts are in many places -- attached to the movie, the frames, and the objects.  One gets access to the movie script by opening the script window when nothing else on the screen is selected.
  Since this movie starts not at frame 0 you need to run it to see the demo.  -- each script has comments tto explain how it works.
  The zip format is a compressed version of the actual movie.  Feel free to build on it as long as you take the effort to learn how it is working.  Clicking on the file will unzip (compress it)  On the mac it will open it in director 11.  To get it to work in director mx, you need to start up director mx and then use the open command to bring it in.

 


=========
--More complex demos - games, time, web control

Lingo Examples (note would need to modify for javascript)

Urgency.mole2.dir - demonstrates how to create an elapsed time and countdown time function. Lingo can be used in many kinds of movies  This sample moves a ball down to indicate time and indicates in text field elapsed and remaining time.  Also demonstrates a moving mole game which the user has to try to click.  If user succeeds movie goes to success frame; if time runs out goes to failure frame.  Also shows lingo  to check if user dragged ball into a box.  text version to paste into script window   zipped version of the director movie

Game Demos - simple capture game, memory game, card game, board game

Revised memory game (you will need to decompress the zip file - make do it automatic- you will need to open director mx and then open the filed douple click might not work)  There may still be some minor things wrong with this demo.

Shockwave movie as alternative browser (using netlingo to let movie access web pages, methods of setting up frames)
Time Demo  Shows how to use the date and time functions Text version for pasting time.movie.sit  time movie.zip
Urgency.time.demo  Shows how to use duration lingo comands  Text version for pasting urgency.siturgency.zip
Timeurldemo  - Access web pages every 15 seconds, other actions at intervals, act at specific second

*urgencyboxmove.txt -  user is challenged to drag 3 objects into a box before the timing object falls below a certain level (paste the text into an exitframe script - create the needed sprites)


CIA  sound resource links

editors/archives

Director On-Line Resource


*Dean's Links -  Tutorias faq, lingo info Director info sites, shockwave demos - games, art,etc ,3d,qtvr (http://www.deansdirectortutorials.com/  - University of New South Wales)

Macromedia site for download of free trial version   - (http://www.macromedia.com/go/try_dmx2004)
Director - Wikipedia


Tutorlands list of links for director tutorials  (http://www.tutorialfind.com/tutorials/macromedia/director/)
Online video Director Training


Adobe director 11 adobe help pdf
http://help.adobe.com/en_US/Director/11.0/director_11_help.pdf

Adobe scripting reference
http://help.adobe.com/en_US/Director/11.0/help.html?content=Part02_Scripting_Dictionary_1.html#1028301
http://help.adobe.com/en_US/Director/11.0/Part02_Scripting_Dictionary_1.html

Macromedia index of tutorials
(mostly advanced topics   http://www.macromedia.com/support/director/tutorial_index.html)
Advanced topics - Imaging Lingo (Chuck Neal)
Tutorial on Imaging Lingo
Lingo tutorials, scripts, etc
Advanced topics - Animation math in lingo   - JM Hayward
Director Web Tips for Lingo Programming


Eliens Director manual including Lingo Tutorials
Fbe work flow tutorial on Lingo scripting 
Macromedia - using Director 8  behaviors
Macromedia Director Xtras
Macromedia Tutorial Page (intermediate concepts)
Gary Rosenzweig's Director Page
Director Web
Lingo User's Journal
Macromedia - Director Multimedia index
Macromedia: Director Technotes Index
Macromedia: Welcome to Macromedia!
THE MACINTOSH STUFF PAGE
Update Stage - http://www.updatestage.com/
Clever Media - http://www.clevermedia.com/
Gmatter - http://www.gmatter.com/
Canter Development - http://www.mediaband.com/mbkit/index.html
CSCI E-14: On-line Director resources


http://www.mcli.dist.maricopa.edu/director/ - director stuff
http://www.shocker.com/digests/index.html - shockwave email news subscription
http://nuttybar.drama.uga.edu/mailman/listinfo/dirgames - director games info
http://www.acm.org/crossroads/xrds6-5/macromedia.html - prototype testing with director
http://www.director-online.com/ - tips & tricks
http://www.herts.ac.uk/lis/mmedia/directortutorial/ - director tutorial basics
http://www.sfx.co.nz/tamahori/thought/shock_3d_howto.html -shockwave 3d how-to
http://www.monkeyfarm.com/howtomakegames.html - duhh - doh!
http://www.director-online.com/ -send questions get replys...
http://www.dubbus.com/devnull - director 3d polygons using dave's engine - dave makes the most popular lingo 3d engine - don't ask me how it works i haven't figured it out yet.
Dean's director  video tutorial- http://www.deansdirectortutorials.com/resources/
Dean's FAQ - http://www.deansdirectortutorials.com/FAQ/
Adding que points to Director - http://www.director-online.com/buildArticle.php?id=988
Adding que points II  - http://www.mcli.dist.maricopa.edu/director/tips/qt/012.html

Interesting Xtras
FFT  - reads sound levels - http://www.schmittmachine.com/asFFT/doc.html

 
 

More information about the course exploring the artisitic use of these capabilities is available at the description of the Art 412 Conceptual Information Arts: Introduction to Art & Technology.
 
rev 1/5/09
Stephen Wilson, Professor, Art, Conceptual/Information Arts Program, San Francisco State University
Information about the Conceptual/Information Arts program    (415) 338-2291   swilson@sfsu.eduWilson web page
Copyright, Stephen Wilson, 1999 - You are free to use the text as long as you attribute source and do not use it commercially.