Creating a Digital Portfolio, Part 1

January 17, 2002
by Will Turnage

Dear Multimedia Handyman,

I am creating a digital portfolio for my artwork & photography. I have tons of images scanned and ready to go, and the output project will be on a CD.

My objectives to complete are for a user to browse this gallery of images and perhaps even have an option to "save" the image to the user's computer.

Ankit Patel

Ankit-

A digital portfolio isn't that hard to make in Director. You could very easily just lay out all of the images in the Score, and use Director's built-in behaviors to navigate between the images. However, the hard part of the process is if you want the program to use a dynamic set of images, or if you want it to use a folder of images external to your movie. One way to add that functionality to your movie involves a little bit of imaging Lingo.

The first step in your project should be to import your graphics into Director and store the images in a list. This can be done ahead of time or on-the-fly when you run your project. For instance, if all of your graphics are already imported into your Director movie, then just put them in their own individual cast named graphics. Then, you can store the images in a list using this code:

    pImageList = []
    pFileList = []
    repeat with i = 1 to (the number of members of castlib "graphics")
      if member (i, "graphics").type = #bitmap then
        pImageList.append (member (i, "graphics").image.duplicate ())
        pFileList.append (member (i, "graphics").name)
      end if
    end repeat

This code starts by initializing two different lists. One list will store the image objects themselves and the other list will store the names of the images. Next, you loop through each member of the entire castlib and if it's a bitmap, you add a duplicate of its image object to your list then add the name of the member to pFileList. When the repeat loop has finished, you will have a list of all of the image objects along with another list of their names.

But your graphics don't have to be inside a Director cast. You could also keep them outside of your movie in a folder called images. To import this folder of images into your movie, you need to have one bitmap member in your movie named ImageHolder. Then you can use this code:

    pImageList = []
    pFileList = []

    if the platform contains "Windows" then
      imagePath = the moviePath & "images\"
    else
      imagePath = the moviePath & "images:"
    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)
      end if
    end repeat

Just like in the other example, this code starts by initializing two lists. You create a variable that contains the path to your images, making sure that you're using the correct path delimiter for Mac or Windows. Next, you loop up to your theoretical maximum number of pictures, and on each repeat you import a different picture.

The repeat loop starts by using the counter combined with getNthFileNameInFolder to get the name of a new image file. If this name is an empty string, that means you've already have all of the images in the folder, so you exit the repeat loop. But if a filename is returned, then you set the filename of cast member imageHolder to the full absolute path of the particular image. Now that your image is linked to a Director cast member, you can add a duplicate of its image to your image list. Also, you should add the full path to the file in your pFileList variable. You should make a note that the getNthFileNameInFolder cannot be used in Shockwave, so this code example will not work online.

Once you have all of your image objects in a list, the next step is to use imaging Lingo to build one large image that contains smaller thumbnails of each individual image. The first step in this process is to decide what you want the layout of your thumbnails to look like. For this example, we will create thumbnails that look like this:

There will be a maximum of three thumbnails across, and the largest possible size for the thumbnail graphic is 80x80. There will also be 20 pixels of space vertically and horizontally between the thumbnails. In code, you can create the composite of the thumbnails this way:

pMaxHeightOrWidth = 80
pHorizontalSpacing = 20
pVerticalSpacing = 20
pImagesAcross = 3

To create an image of thumbnails, the first step is to calculate the size of the larger image that will contain all of your thumbnails.

masterImageWidth = (pImagesAcross * pMaxHeightOrWidth) + ((pImagesAcross + 1) * pHorizontalSpacing)

numberOfRows = pImageList.count / pImagesAcross
if ((pImageList.count mod pImagesAcross) <> 0) then
numberOfRows = numberOfRows + 1
end if

masterImageHeight = (numberOfRows * pMaxHeightOrWidth) + ((numberOfRows + 1) * pVerticalSpacing)

pThumbImage = image(masterImageWidth, masterImageHeight, 16)

This code starts by calculating the width of the composite image by multiplying the number of thumbnails across and adding the exact amount of space between theml. To calculate the height of the image, you divide the number of total thumbnails by the number of thumbnails across. If the total number of thumbnails isn't an exact multiple of the number of thumbnails across, then you'll need to add an extra row to allow for those last few thumbnails to show up. Once you've calculated your new height and width, then you create a new image with those dimensions.

To actually create the master image of thumbnails, this is what you do:

  pRectList = []
  rowCount = 1
  colCount = 1

  repeat with i = 1 to pImageList.count
    tempH = (colCount * pHorizontalSpacing) + ((colCount - 1) * pMaxHeightOrWidth)
    tempV = (rowCount * pVerticalSpacing) + ((rowCount - 1) * pMaxHeightOrWidth)

    if pImageList[i].width > pImageList[i].height then
      -- it's a landscape image
      newHeight = (pImageList[i]Height * pMaxHeightOrWidth) / pImageList[i]Width
      tempV = tempV + ((pMaxHeightOrWidth - newHeight) / 2)
      destRect = rect (tempH, tempV, tempH + pMaxHeightOrWidth, tempV + newHeight)
    else
      -- it's a portrait image
      newWidth = (pImageList[i]Width * pMaxHeightOrWidth) / pImageList[i]Height
      tempH = tempH + ((pMaxHeightOrWidth - newWidth) / 2)
      destRect = rect(tempH, tempV, tempH + newWidth, tempV + pMaxHeightOrWidth)
    end if

    pRectList[i] = destRect
    pThumbImage.copyPixels (pImageList[i], destRect, pImageList[i].rect)

    colCount = colCount + 1
    if colCount > pImagesAcross then
      colCount = 1
      rowCount = rowCount + 1
    end if
  end repeat

  sprite (me.spriteNum).member.image = pThumbImage
  sprite (me.spriteNum).member.regPoint = point (0, 0)

You start by creating a list that will store the rect of where each thumbnail will be within the page of thumbnails. Then you initialize two variables called rowCount and colCount. These variables are used to calculate the on-screen location of each thumbnail, starting with the image in the first row and the first column.

For each image in your list, you calculate the upper-left corner of where it should be in the picture. This is done by taking the current row and column you're on, and multiplying it by its position across combined with the amount of spacing that should be between each picture. Once you have these numbers, you need to determine if your image is portrait or landscape. Using the dimensions of your full-sized image, you calculate the exact size of your thumbnail using a smaller scale but ensuring that the proportions of the image remain intact. So if the original image was 640x480, then the thumbnail size would by 80x60. And if the original image was a tall 280x560 image, then the thumbnail would be 40x80.

Once you've calculated this scaled-down rect, it is added to your list, and the image is copied onto the master thumbnail image. The final step in the repeat loop is to increase your colCount and see if you need to move on to the next row. Once you've made it through all of your images, then you copy the thumbnail image to your on screen display, and you can see it.

And that's how you make a series of thumbnails using imaging lingo. In the next installment, you'll learn how to make the images scrollable and how to display a large version of the image on the screen.

Sample movie and images are available for download as Windows or Mac archives.

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