Lingoworkshop :: Loading Local Images into the Slider

Loading Local Images into the Slider

There are several different ways you can import images into a movie running in a Projector (or in Authoring). The first step for all the techniques is getting a list of files to import.

For example, if the images are in a folder called "Images" which is in the same folder as the movie, then a function like this will return a list of the JPGs in that folder:

on GetListOfImages (me, inDirectory)
  -- returns a list of files (full path) in specified directory
  fileList = [ ] 
  the itemDelimiter = "." 
  repeat with i = 1 to the maxInteger 
    n = getNthFileNameInFolder(inDirectory , i) 
    if n = EMPTY then exit repeat 
    if n.item[n.item.count] = "jpg" then 
      fileList.append(inDirectory & n) 
    end if 
  end repeat 
  return fileList
end

Once you have this list, you can loop through at 'import' the images. One technique for doing this is to set the fileName of a placeholder cast member. For example

member("PlaceHolder").filename = fileList[1]

Since our slider may use many images, and we only want to create a small thumbnail image for each, it is inefficient to load all the images into memory at once. For this reason, the following script will first load a 'place holder' graphic (which says "image loading") for each file into the slider. Then, one-by-one, it loads the real image into the slider (replacing the place holder as the real image is loaded).

Example source file available here

ImageLoader.local (Parent script)

-- loads images from a local directory (not for shockwave)
property myTempBitmap, mySlider, myIndx, myImagesToLoad
property myTarget


on new (me)
  
  myTempBitmap = member("ImageLoader.local.bitmap")
  if myTempBitmap.type <> #bitmap then 
    myTempBitmap = new(#bitmap)
    myTempBitmap.name = "ImageLoader.local.bitmap"
  end if
  return me
end

on Destroy (me)
  -- erase the bitmap
  if myTempBitmap.ilk = #member then erase myTempBitmap
  -- void our reference to the slider
  myTarget = VOID
end

on stopMovie (me)
  -- will get this message if the timeout is active
  me.Destroy()
end

on loadImagesTo (me, theTargetObject, FolderOfImages)
  -- get list of files to load
  imageFiles = me._GetFileNames(FolderOfImages)
  myTarget = theTargetObject
  -- now load a temporary image into the slider for each real image
  myImagesToLoad = [:]
  repeat with aFilePath in imageFiles
    myImagesToLoad.addProp(aFilePath, member("SliderLoadingImage").image)
  end repeat
  myTarget.LoadImages(myImagesToLoad)
  
  -- now create a thread to actually load the real images
  myIndx = 0
  thread = timeout("ImageLoaderThread").new(100, #LoadNextImage, me)
  
end

on LoadNextImage (me, aTimeout)
  -- called by the timeout
  if myIndx <  myImagesToLoad.count then 
    myIndx = myIndx + 1
    whichFile = myImagesToLoad.getPropAt(myIndx)
    myTempBitmap.filename = whichFile
    -- replace the 'loading' image with the real one
    myTarget.SetImageAt(myTempBitmap.image, whichFile, myIndx)
  else
    aTimeout.forget()
  end if
end

on _GetFileNames (me, inDirectory)
  -- returns a list of files (full path) in specified directory
  fileList = [ ] 
  the itemDelimiter = "." 
  repeat with i = 1 to the maxInteger 
    n = getNthFileNameInFolder(inDirectory , i) 
    if n = EMPTY then exit repeat 
    if n.item[n.item.count] = "jpg" then 
      fileList.append(inDirectory & n) 
    end if 
  end repeat 
  return fileList
end

To demonstrate how this script works with the Slider, here is a behaviour that creates the slider and an instance of this Loader script:

property ancestor
property myMidH, myShift, myAlpha, myOffset
property myTrackingFlag, myStartH
property mySlideLeftRect, mySlideRightRect

on beginSprite me
  
  thisSprite = sprite(me.spriteNum)
  thisRect = thisSprite.rect
  thisMember = thisSprite.member
  thisCanvas = thisMember.image
  thisCanvas.fill(thisCanvas.rect, rgb("#000000"))
  
  --
  myOffset = point(thisRect.left, thisRect.top)
  myMidH = thisSprite.left + (thisSprite.width/2)
  
  -- create the 'hot spots' for sliding
  mySlideLeftRect = rect(thisSprite.left, thisSprite.top, thisSprite.left \
+ (thisSprite.width/3), thisSprite.bottom)
  mySlideRightRect = rect(thisSprite.right-(thisSprite.width/3), \
thisSprite.top, thisSprite.right, thisSprite.bottom)
  
  -- create the slider object
  ancestor = script("HorizontalImageSlider.Class").new()
  me.Initialise(thisCanvas, thisCanvas.rect)
  
  
  -- set the path to the folder containing theimages
  sep = the last char of the moviePath
  folderContainingImages = the moviePath & "Images" & sep
  
  -- create an Object to load up the images
  imageLoaderDaemon = script("ImageLoader.local").new()
  imageLoaderDaemon.loadImagesTo(me,folderContainingImages)
  
  
end

on endSprite (me)
  -- clean up the canvas 
  thisSprite = sprite(me.spriteNum)
  thisMember = thisSprite.member
  thisCanvas = thisMember.image
  thisCanvas.fill(thisCanvas.rect, rgb("#000000"))
end	


on enterframe (me)
  if myTrackingFlag then
    -- the mouse was clicked on this sprite
    if not (the mouseDown) then 
      -- stop tracking
      myTrackingFlag = 0
    else
      -- 'drag' the slider to the current mouse location
      mH = the mouseH
      amt = myStartH - mH
      myStartH = mH
      me.Slide(amt)
    end if
  else
    p = the mouseLoc
    if inside(p, mySlideLeftRect) then
      proposedAmt =  myShift -1
      myShift = Max(-10, proposedAmt)
      
    else  if inside(p, mySlideRightRect) then
      proposedAmt =  myShift + 1
      myShift = Min(10, proposedAmt)
      
    else
      -- slow down to a stop
      myShift = myShift * 0.75
      if abs(myShift) < 2 then myShift = 0
    end if
    me.Slide(myShift)
  end if
end

on mouseDown (me)
  ClickedTile = me.GetTileIDAtPoint(the mouseLoc - myOffset)
  if voidP(ClickedTile) then return 0
  myTrackingFlag = 1
  myShift= 0
  myStartH = the mouseH
  me.SelectTileByID(ClickedTile, (the shiftDown))
  sendAllSprites(#ImageSelected, ClickedTile)
end