Lingo Tutorial: Painting Tool

READING:Manual pages of the commands described here

File "paint2.dir"

This is a simple toy: allowing the user to draw with a variety of colors and brushes. I have taken it from an earlier student project and have simplify it a little, yet the set of options available make it easily confusing.

First, let us examine the score's sprites (channels). Here is a description of the important elements they contain:
1: a rectangle that will constrain the area we are drawing
2: a reinhardt painting equal to the rectangle
5: the "done" button
6: the hilited "done" button on top of the previous. Will appear on mouseWithin
9: the brush
16: the hilited brush
17: an empty rectangle to serve as hiliting the ink squares
19-24: the 6 ink squares: red, orange, yellow, green, blue, purple
26-35: elements of the "select brush" menu
35: the hilite square used to indicate color selection. (See Drawing Frame code).
36-59: Twenty four sprites with the appropriate size (4 choices) and color circle (6 choices) to be used as the tip of the painting tool, corresponding 1-1 to cast members 43-66. They are all hiding below the visible stage.

Now let us examine the scripts that make all these happen.

There is a global variable, paint: when "true" then we are in painting mode.

 

on startMovie
  global paint
  paint = false
    
  sprite(6).visible = false --make the highlited done button invisible   
  sprite(16).visible = false --make the highited brush button invisible
end
      

The program proceeds in 3 stages:
Prepare for painting ("Preparatory"),
do the painting ("Drawing"), and
finish the painting ("congratulatory").

There are 4 different brush sizes, controlled by the global brushsize: 1-4 going from smallest to biggest.
These 4 brush sizes have 6 different colors each, (for a total of 24) controlled by the global paintcolor.
By default we start with a medium brush with no color.

 

-- PREPARATORY FRAME
on enterFrame 
  global paintcolor,brushsize
  brushsize = 3 --default brushsize is 3 = medium
  paintcolor = 42 --default paint brush color is empty (not selected yet)
end

on exitFrame
  _movie.go(_movie.frame)
end
      

As soon as the user chooses a color, we are entering the Drawing frame.

 

-- DRAWING FRAME
on enterFrame
  global paintcolor,brushsize
  
  if brushsize = 1 then
    sprite(35).loc = sprite(26).loc --move the hilite rect to the smallest button
  end if
  if brushsize = 2 then
    sprite(35).loc = sprite(27).loc --move the hilite rect to the small button
  end if
  if brushsize = 3 then
    sprite(35).loc = sprite(28).loc --move the hilite rect to the medium button
  end if
  if brushsize = 4 then
    sprite(35).loc = sprite(29).loc --move the hilite rect to the largest button
  end if
  
  sprite(1).cursor = 2 -- inside the drawing rectangle, the cursor is thin cross 
end

on exitFrame
  _movie.go(_movie.frame)
end
      

The above is better done with a case statement, on exitframe. Change it to do that.

Finally, the congratulatory frame simply writes:

 

--CONGRATULATORY FRAME
on enterFrame
  global name
  name = "George"
  member(23).text = name & "!" --set the text in the title to be the user's entered name
  
  sprite(1).cursor = 0 -- no special cursor inside the painting rectangle
end

on exitFrame
  _movie.go(_movie.frame)
end
      

Now is the interesting thing. When the user selects an ink, say red, we execute this code:

 

on mouseUp
  global paint,paintcolor,brushsize
  paint = true
  if brushsize = 1 then
    paintcolor = 54 --smallest red brush
  end if
  if brushsize = 2 then
    paintcolor = 48 --small red brush  
  end if
  if brushsize = 3 then
    paintcolor = 42 --medium red brush
  end if
  if brushsize = 4 then
    paintcolor = 36 --largest red brush
  end if
  
  -- when the user clicks on this button, the red
  -- paint brush of size brushsize is selected
  _movie.go(2
  _movie.updateStage()
  
  sprite(18).loc = sprite(19).loc --move the highlight to the location of the red button
end

on mousewithin
  if the frame = 1 then
    sprite(17).loc = sprite(19).loc
    --move the highlight to the location of the red button
  end if
end

on mouseleave
  sprite(17).locH = -10
  sprite(17).locV = -10
end
      

Selecting the smallest dot:

 

on mouseDown
  global brushsize,paintcolor,paint
  paint = true
  sprite(35).loc = sprite(26).loc
  brushsize = 1 --set the brushsize to 1 = smallest
  
  --next change the brush to the smallest size brush
  --of current paintcolor
  case (paintcolor) of
    36,42,48: paintcolor = 54 --smallest red brush
    37,43,49: paintcolor = 55 --smallest orange brush
    38,44,50: paintcolor = 56 --smallest yellow brush
    39,45,51: paintcolor = 57 --smallest green brush
    40,46,52: paintcolor = 58 --smallest blue brush
    41,47,53: paintcolor = 59 --smallest purple brush
  end case
end


on mouseUp  
  _movie.go(2)
  _movie.updateStage()
end
      

Drawing within the rectangle:

 

on mouseWithin
  global paint,paintcolor
  
  if paint = true then
    sprite(paintcolor).constraint = 1
    -- only allow user to paint within the reinhardt painting
    
    sprite(paintcolor).loc = the mouseloc
    
    if the mouseDown = true then
      sprite(paintcolor).trails = true
    end if
    
    if the mouseDown = false then
      sprite(paintcolor).puppet = false -- paint dot not active anymore
      sprite(paintcolor).trails = false
    end if
  end if
end
      

Selecting a brush:

 

--make the highlited brush button pop up when
--the user rolls over the brush button
on mousewithin
  sprite(16).visible = true
end

on mouseleave 
  sprite(16).visible = false
end

on mouseUp
  global paint,paintcolor
  paint = true
  sprite(paintcolor).visible = true
  --if the brush button is pressed, enable the paint tools
  _movie.go(3)
  _movie.updateStage()
end
      

And the Done button:

 

on mousewithin
  sprite(6).visible = true
end

on mouseleave
  sprite(6).visible = false
end

--make the highlited done button pop up when the
--user rolls over the done button

on mouseup
  global paint
  _movie.go(4)
  --this is so we can change the text up top to 
  --say "It's gorgeous!"
  
  paint = false
  --turn off the paint tools when the user clicks the done button
end

 

Maintained By: Takis Metaxas
Last Modified: April 22, 2009