You are here: Home | Interactives | Shockwave3D Developer's Guide | Code Thumbnails

Code Thumbnails

Update - The thumbnailer script now works with all three thumbnail sizes. Just pass in #small, #medium, or #large (defaults to #medium if ommitted) to create thumbnails of the indicated size.

A screenshot showing what code thumbnails look like.

Director is good at presenting you with visual thumbnails of graphics assets for management using the cast window, but the thumbnails it uses for script items arent's so easy on the eye. Also, the script type divisions are crude at best - if you have member type icons turned on, you get a visual differentiation between movie, behavior, and parent scripts, and that's about it.

A better way to organize scripts is based on a color scheme that works to apply color labels to particular types of scripts for your project. For instance, if you're using a model-view-controller model, it might be handy to color-code the models, views, and controller scripts separately.

Unfortunately, there's no easy way to do this in Director. Until now. Below is a little script that will create thumbnails for your scripts to make them easier to browse.

It works by scanning through all the script members in your casts and checking their names against a list of predefined prefixes. In my case, I used "Model:", "View:", "Controller:", "Utility:" and others. When it finds members with known prefixes, it looks up the related colors, renders the thumbnail, and applies it.

To use it yourself, first make sure you have installed the awesome and free Silkscreen small-format font, as this is the font the thumbnails use. Then, just cut and paste the below code into a movie script member, tweak the prefixes and colors if desired, and invoke the makeThumbnails() command. Whenever you add a new script with a given prefix, run it again to bring everything up to date.

If you're worried about the filesize overhead of these thumbnails, all you have to do is invoke clearThumbnails() before your final publish, and it will clear out the thumbnails. You can strip out and recreate the thumbnails at will using these routines.

As usual, this is just a quick-and-dirty script that helps you during authoring. You can probably improve on the script considerably if you want some other features. For instance, perhaps your workflow uses suffixes instead of prefixes. Just don't spend too much time on it - this script is supposed to save you time!

-- Utility:Thumbnailer

-- makeThumbnails( theSize )
-- Steps through all scripts, and tries to make a thumbnail for each.
-- Pass in #small, #medium, or #large (or void for #medium)

on makeThumbnails theSize
  
  case theSize of
    #small: thumbnailsize = [#width: 43, #height: 32]
    #large: thumbnailsize = [#width: 79, #height: 59]
    otherwise: thumbnailsize = [#width: 55, #height: 41]
  end case
  
  -- Create a bitmap source
  bitmapsource = new(#bitmap)
  bitmapsource.name = "thumbnail_maker_bitmap"
  
  -- Create a text source
  textsource = new(#text)
  textsource.name = "thumbnail_maker_text"
  textsource.font = "Silkscreen"
  textsource.fontsize = 8
  textsource.width = thumbnailsize.width
  textsource.antialias = false
  textsource.fixedlinespace = 10
  textsource.kerning = 1
  textsource.charspacing = -1
  textsource.bottomspacing = 0
  textsource.fontstyle = [#plain]
  
  -- Loop over all scripts
  repeat with looper = 1 to the number of castlibs
    repeat with loop2 = 1 to the number of members of castlib looper
      m = member(loop2, looper)
      if (m.type = #script) then makeThumbnail(m, bitmapsource, textsource, thumbnailsize.width, thumbnailsize.height)
    end repeat
  end repeat
  
  -- Get rid of temporary members
  erase bitmapsource
  erase textsource
  
end makeThumbnails


-- makeThumbnail()
-- Creates a thumbnail for the given script member.
-- Pass in a bitmap source (for picture grabbing) and a
-- text source (for rendered text on thumbnails).
-- There is a list of reference colors and their membername
-- prefixes for selecting them which you should edit to
-- be appropriate for your own project.
on makeThumbnail m, bitmapsource, textsource, w, h
  
  if (voidp(textsource)) then textsource = member("silkscreen")
  if (voidp(bitmapsource)) then bitmapsource = member("stest")
  
  i = image(w,h,32)
  n = m.name
  
  -- Define your colors here
  -- Use the paletteindex to define the top and bottom colors as desired.
  -- All scripts that get thumbnailed must begin with one of the prefix tags.
  
  refcolors = []
  refcolors.add([#tag:"Manager:", #topColor: 59, #bottomColor: 3])
  refcolors.add([#tag:"Model:", #topColor: 207, #bottomColor: 121])
  refcolors.add([#tag:"View:", #topColor: 203, #bottomColor: 118])
  refcolors.add([#tag:"Controller:", #topColor: 140, #bottomColor: 54])
  refcolors.add([#tag:"Utility:", #topColor: 252, #bottomColor: 248])
  refcolors.add([#tag:"Interpreter:", #topColor: 107, #bottomColor: 20])
  refcolors.add([#tag:"Behavior:", #topColor: 101, #bottomColor: 51])
  refcolors.add([#tag:"MVC:", #topColor: 137, #bottomColor: 94])
  refcolors.add([#tag:"Scene:", #topColor: 137, #bottomColor: 94])
  
  -- Check to see if this script member starts with any of the prefixes
  refcolor = 0
  repeat with rc in refcolors
    if (n starts rc.tag) then
      refcolor = rc.duplicate()
      exit repeat
    end if
  end repeat
  if refcolor = 0 then return
  
  -- Render the thumbnail
  delete char 1 to (refcolor.tag.length) of n
  mtype = refcolor.tag
  delete char (mtype.length) of mtype
  
  textsource.wordWrap = false
  textsource.text = mtype
  textsource.forecolor = 0
  classname = textsource.image.duplicate()
  
  textsource.wordWrap = true
  textsource.text = n
  textsource.forecolor = 255
  memtitle = textsource.image.duplicate()
    
  i.fill( i.rect, paletteindex(refcolor.bottomColor) )
  i.fill( rect(0,0,w,10), paletteindex( refcolor.topColor) )
  i.draw( point(0,10), point(w,10), [#linesize: 1, #shapetype: #line, #color: rgb(0,0,0)] )
  i.usealpha = false
  
  i.copypixels(classname, classname.rect, classname.rect)
  i.copypixels(memtitle, offset(memtitle.rect, 0, 10), memtitle.rect)
  
  -- Apply the thumbnail
  bitmapsource.image = i
  m.thumbnail = bitmapsource.picture
  
end makeThumbnail

-- clearThumbnails()
-- Steps through all scripts, and clears any custom thumbnails.
on clearThumbnails me
  
  -- Loop over all scripts
  repeat with looper = 1 to the number of castlibs
    repeat with loop2 = 1 to the number of members of castlib looper
      m = member(loop2, looper)
      m.thumbnail = void
    end repeat
  end repeat
  
end clearThumbnails

Made on Mac