Creating a Picture-Based Password System

November 14, 2001
by Will Turnage

Dear Multimedia Handyman,

I am trying to create a pictorial password system in which pictures are used for entering a specific password. So for example you have 10 pictures and the user would select 3 of these to be used as a password every time he/she enters a specific program. Could you please help me?

Manpal

Dear Manpal,

To create a password system like this, the first thing you have to decide is how you will keep track of your passwords and variables. There are many ways you can do this, but to make things easier, you can just use two global variables. One variable will contain the actual password and the other variable will contain the password entered by the user. You can initialize these variables at startup by putting this in a movie script.

global gMasterPassword
global gSelectedPassword

on prepareMovie
gMasterPassword = ["Seismosaurus", "Coleophysis", "Triceratops"]
gSelectedPassword = []
end

Now you're ready to begin. The way the password system will work is simple. Across the top of the screen, there will be several buttons each containing an image. All of these images will be cast members with unique names. As you click on the images, they will appear inside a series of blank buttons across the bottom of the screen. When the blank buttons across the bottom of the screen are entirely filled, then your code will check the password to see if it's valid. Confused? Check out this sample movie which demonstrates the concept.

The code that is used to create these movies is very simple. Only two behaviors are used. The first behavior goes on each of the buttons across the top of the screen, and the second behavior goes on each of the blank buttons. The behavior on the top buttons looks like this:

on beginSprite me
sprite (me.spriteNum).cursor = 280
end

on mouseDown me
sendAllSprites (#addPasswordSelection, [sprite (me.spriteNum).member.name])
end

When the behavior initializes, it automatically sets the cursor of the sprite to 280 -- the pointing finger cursor. When the user clicks on the button, it sends the #addPasswordSelection message to every sprite on-screen, along with its own name inside a list. It's very important that the button's name be located inside a list because it will be used in the other handler (For more details on this technique, check out a previous Handyman article: "Collecting information from sprites")

Once this message gets sent to all sprites, each of the blank buttons will receive it one at a time. Their behavior looks like this:

global gSelectedPassword
global gMasterPassword

on addPasswordSelection me, passwordList

  if passwordList <> [] and sprite (me.spriteNum).member = member ("blank") then

    tempName = passwordList[1]
    passwordList.deleteAt (1)

    sprite (me.spriteNum).member = member (tempName)

    gSelectedPassword.append (tempName)
    member ("gSelectedPassword text").text = string (gSelectedPassword)
    if gSelectedPassword.count = gMasterPassword.count then
      if gSelectedPassword = gMasterPassword then
        go "correct"
      else
        go "incorrect"
      end if
    end if

  end if

end

The first step of this handler is to make sure that two things are true before proceeding. These two things are that a button's name must be in the passwordList passed to the addPasswordSelection handler, and the second is that this button must also be a blank button without any information already displayed in it. If both of these are true, then you store the button's name in a variable called tempName, then delete the name from passwordList. By taking these steps, you are assuring that this handler will only be executed once -- for a single button at the bottom of the screen --even though you used a sendAllSprites command to send the message to all the buttons.

Once you have taken the button name out of the list, you set the member of the blank button equal to the selected image. Then you append the name of the current button name to the end of your global variable which keeps track of the currently selected password.

The final step here is to check the password. First, you check to make sure that your gSelectedPassword list and your gMasterPassword list have the same number of elements in them. If they have the same number of elements, then you check to see if the lists are identical. If they are identical, then your movie jumps to a marker labeled correct. Otherwise, it jumps to a marker named incorrect.

And that's about all there is to adding a picture password system to your project. A sample Director 8 movie is available for download in Macintosh or Windows format.

Will Turnage is a multimedia programmer based in New York City. In addition to his weekly role as Director Online's Multimedia Handyman, he is also the Technology Director for Sony Music's Client Side Technologies Group. You can read more about his work at http://will.turnage.com/.