Creating a Digital Portfolio, Part 3

March 5, 2002
by Will Turnage

In the first two installments of this series (Part 1 and Part 2), you learned how to take a cast of images or an external folder of images, and turn those into your own digital portfolio. Before you start sending out these portfolios, the last thing you'll need to add is some text describing each of the images.

To begin, you actually have to write all of the text. You have two options for creating this text. If you want all of your text to appear as plain, black text, then you can just create a series of plain text files in Notepad or SimpleText. However, if you want special formatting in your text, then instead of plain text files, you'll need to create HTML files that contain all of your formatting.

For each image in your portfolio, you will need to make a separate, corresponding text file containing the information about that image. In order for this to work correctly, you need to name the text file the exact same name as your image. So if your image is pix-012.jpg or pix-012.tif, then your text file needs to be named pix-012.txt or pix-012.htm. When you're done creating all of your text files, they need to placed inside a folder called text which will sit in the same directory as your images folder. If you were to open each folder, though, the contents of the text folder should have the exact same names as the contents of the images folder (with the exception of the file extensions)

If you're putting all of your text inside Director movie instead of externally, then just create separate text members for each image in your portfolio. You will also need to make sure that these text members have the exact same member name as the corresponding image. Also, these text members need to be in the same cast as all of your bitmaps.

Once you've created your text, then you're ready to insert a few lines of code into your existing behavior. You'll start by adding three properties to your behavior:

property pTextType
property pTextDisplayMem
property pTextList

Two of which will be defined in your getPropertyDescriptionList handler.

props.addProp (#pTextType, [#format: #symbol, #default: #text, #comment: "Select the type of text to use:", #range: [#text, #html]])
props.addProp (#pTextDisplayMem, [#format: #text, #default: 0, #comment: "Select the text member to display your info in:"])

The first property, pTextType, determines if you want to just display plain text for your images, or if you want to display formatted HTML text instead. The second property, pTextDisplayMem, is a reference to the specific text member in your Director movie that will display the text about each individual image.

Once those properties are defined, then you need to store the text in a list. This is done at the same time as you are building your thumbnail image. If you are using external files, then here's how you will get the text information:

    pImageList = []
    pFileList = []
    pTextList = []

    if the platform contains "Windows" then
      imagePath = the moviePath & "images\"
      textPath = the moviePath & "text\"
    else
      imagePath = the moviePath & "images:"
      textPath = the moviePath & "text:"
    end if

    repeat with i = 1 to 10000
      imageName = getNthFileNameInFolder (imagePath, i)
      if imageName = EMPTY then
        exit repeat
      else
        member ("imageHolder").filename = imagePath & imageName
        updateStage
        pImageList.append (member ("imageHolder").image.duplicate ())
        pFileList.append (imageName.char[1..(imageName.char.count - 4)])
      end if
    end repeat

You start by initializing the three lists you will use in this section. The pImageList variable will keep track of the images, pFileList will keep track of the names of the images, and pTextList will keep track of the text for each image. Next, depending on the platform you are running on, you define the folders that will contain your images and information. In this case, the images are placed in an images folder and the information is placed in the text folder. Next you loop through the images folder and add each of the images to your list. Also, you add the names of these files (minus their three letter extensions) to the pFileList.

When this is completed, you will have a list of all the image names that were in the folder. Now, you're going to use that list of names to get the text.

fileXtraObj = new (xtra "filextra3")

    repeat with i in pFileList

      if pTextType = #text then
        textName = i & ".txt"
      else
        textName = i & ".htm"
      end if

      if fileXtraObj.fx_fileExists(textPath & textName) then

        fileObj = new (xtra "fileio")
        fileObj.openFile(textPath & textName, 1)
        pTextList.append(fileObj.readFile())
        fileObj.closeFile()
        fileObj = 0
      else
        pTextList.append(EMPTY)
      end if

    end repeat

    fileXtraObj = 0

This code takes advantage of two free Xtras. The first is the FileXtra3 which is available for download at http://www.kblab.net/xtras/. The second Xtra is the FileIO Xtra which ships free with Director.

Your code starts by creating an instance of FileXtra3. Next, you loop through your list of file names. For each name in the list, you calculate what the name of its corresponding text file should be by adding either .txt or .htm to the end of the file name. Next, you check to see if this theoretical text file really exists inside the text directory. If it doesn't exist, then you just add an EMPTY string to your text list and move on. However, if the text file does exist, then you create an instance of the FileIO Xtra. Using this instance, you open the file, read the text in from the file, add it to your text list, and finally close the text file. Once this is completed, you delete your instance of the FileIO Xtra. Finally, when you're done retrieving all of your text, then you delete the instance of the FileXtra3.

If you're storing your text inside a Director cast instead of in external folders, then this is the code you would use instead:

    castName = pSource.char[1..(pSource.char.count - 5)]
    repeat with i = 1 to (the number of members of castlib castName)
      if member (i, castName).type = #bitmap then
        pImageList.append (member (i, castName).image.duplicate ())
        pFileList.append (member(i, castName).name)
      end if
    end repeat

    repeat with i = 1 to (the number of members of castlib castName)
      if member (i, castName).type = #text and pFileList.getPos (member (i, castName).name) then
        if pTextType = #text then
          pTextList.append (member (i, castName).text)
        else
          pTextList.append (member (i, castName).html)
        end if
      end if
    end repeat

You start by determing the cast name the user selected in the behavior's property inspector. You go through each member of this cast and add all of the images to the image list. In addition you also add the name of the cast member to pFileList. Once you've finished going through every member of the cast looking for images, you repeat through the entire cast again, only this time you look for the text members instead of the images. If you find a text member, then you double check to make sure that its name matches the name of one of the images in your list. If you've got a match, then add the text of that member to your list. When you're done, you will have a list that contains all of the text or html describing your images.

The final step is to write the code that will display the text. When the user clicks on your thumbnail, you loop through your list of images and determine which image was clicked. Then based on that result, you just set the text of your member, like this:

if pTextType = #text then
        pTextDisplayMem.text = pTextList[i]
      else
        pTextDisplayMem.html = pTextList[i]
      end if

And then when the user clicks on the image again to return to the thumbnails, you clear the text by saying:

pTextDisplayMem.text = EMPTY

And that's all there is to displaying text information about your images. The final result will look something like this:

A sample Director 8.5 movie is available for download in ZIP or SIT archive format.

All colorized Lingo code samples have been processed by Dave Mennenoh's brilliant HTMLingo Xtra, available from his site at http://www.crackconspiracy.com/~davem/

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/.