Importing Graphics

July 13, 1998
by Pat McClellan

Dear Multimedia Handyman,

I'm fairly new at all of this and I am trying to create a program in which the user can import their own graphics to personalize the program. These pictures will create a photo album. I would prefer letting them just select the photos off of their computer, but I suppose they could be downloaded from the web. Where do I start?

Vicky

Dear Vicky,

One approach to achieving this is to have the user place all their "photos" or graphic files into the directory with the Projector. In this case you could use the Lingo I wrote for a "slide viewer" for this column several months ago. Those routines use the getNthFileNameinFolder command to cycle through all the graphics there. Note that this approach would place all of the graphics in alphabetical sequence.

Another reader recently asked about letting the user import their own picture into a program using a standard system OPEN dialog box. I think I'll combine that with your question and hammer out some Lingo which will let your user gain some specific control. We'll be using a great little xtra called FileIO. This inauspicious xtra claims to do nothing but open, read, write, and close text files. Hey wait... we're dealing with graphic files, not text! Why FileIO?

FileIO has this nifty method called displayOpen(instance) which displays the platform specific Open dialog box, allowing the user to specify a file. It returns the filePath and fileName -- which is exactly what we need for our graphic files. Normally, you'd use this info in FileIO to open & read or write to a text file. We're just going to grab the file info and dispose of that instance of FileIO.

So, for this Photo Album program, let's say that we have 20 pages with 1 photo each. On each page (frame), you'll need a button that says something like "Change/Add Photo". The script attached to that button will open the Open Dialog box, capture the filePath and fileName, and assign it as the linked filepath for a displayed castMember. Keep in mind that if you want the user to be able to save their selections, the program will need to be installed on their harddrive.

Start by setting up your score. Create a graphic placeholder castmember for each photo to be placed in the score. To create a placeholder, simply open the graphic paint window and draw anything at all. Close the window and name the castMember. Reopen the graphic, select all and delete. Now you have an empty graphic member. Place it on the stage -- let's assume all "photos" will go in sprite channel 2. You'll need to duplicate this graphic placeholder for each photo page. Name each of them something different, like "photo1", "photo2", etc.

Sprite Script for button


on mouseUp me
  
  -- add the name to our list 
  set myFile = new(xtra "fileio")
  if the machineType = 256 then
    -- Windows
    setFilterMask(myFile, "*.bmp, *.jpg, *.gif")
  end if
  set photoFileName = displayOpen(myFile)
  setaProp  (gPhotoList, marker(0), photoFileName)
  
  -- assign the filename to the displayed castmember
  set whichMember = the member of sprite 2
  set the fileName of member whichMember ¬
    = photoFileName
  
  -- dispose of xtra
  set myFile = 0  
end

Note the line regarding setFilterMask. This command is supposed to let you specify which file types will appear in the open dialog box. I have set it correctly for Windows, though there appears to be a bug which won't let you set the file type on the Mac to include PICT. It works for JPEGs and GIFs, but when you include PICT in the available file types, all files appear. Therefore, I didn't specify a filter for the Mac. This is a known bug since version 5, so I don't really expect things to change.

After clicking the Add Photo button, your user may want to move the photo around. Simple select movable for sprite channel 2. You might also want to apply the special cursor on mouseOver and mouseDown behavior to it. You can find this behavior in the Behavior Library (under Xtras). It would also be a nice touch to add an editable field on each page so that the user can enter a caption for each photo.

Finally, you'll want to provide a way for your user to save their selections, including photos and positioning. Put a Save button in the program.

Save Button script


on mouseUp me
        saveMovie
end

That should give you the basics for creating your user-customizable photo album. The same techniques can be used for things like adding a customer's logo to a sales presentation. Good luck with your program.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.