[Part 4 of 8]
As a function, the image() keyword creates a new image object and returns a reference to the new object. That's what we want, image objects where we can perform our modifications. The required parameters for the image function are the image's width, height and bit depth. There are also parameters for specifying the alpha channel bit depth and a palette, but we don't use those. We actually need two image objects: one set to the original source size and one set to a smaller size. The original image is placed in the full-size object, copied to the smaller, then copied back to the full-size one. For the full-size image, we use the width and height of the original image, and the current color depth of your system. By the way, this is probably going to look best if you are running at full (32 bit) color.
Here's the full handler:
on mouseUp
global stepNumber, gSourceImage,
gSourceMember
w = gSourceImage.width
h = gSourceImage.height
-- Create an image object
imSource = image(w, h, the colorDepth)
-- Each modification starts with the
-- original image, otherwise you are
-- modifying a modification.
imSource = gSourceMember.image.duplicate()
-- Create an image object that is smaller
imSmall = image(w/(stepNumber*4),
h/(stepNumber*4),
the colorDepth)
-- Copy the original image into the small
-- image
imSmall.copyPixels(imSource, imSmall.rect,
imSource.rect)
-- Copy the small image back into the
-- larger, resulting in the desired
-- modification
imSource.copyPixels(imSmall, imSource.rect,
imSmall.rect)
-- Put the modified image in the sprite's
-- member
gSourceImage.image = imSource
-- Get ready for the next, greater,
-- modification
stepNumber = stepNumber + 1
end
The image imSource is the full-size image object. Once the object is created, the image property is used to place an image in imSource, taken from gSourceMember. There are two concepts that need clarifying here. First, the duplicate function is used instead of directly assigning the image. By default, when you access the image of a cast member and assign it to an image object, Director creates a reference to the member's image. If you then modify the image object, the cast member's original image is also modified. Since we want to maintain the original image intact, we use the duplicate function to create a copy of the original instead of a reference to it.
Second, we use the image from the original cast member, rather than the possibly-modified new cast member. In other words, the process is original image into full size object, object into smaller object, smaller object back into full-size object, full-size object into new member. At each step the small object gets progressively smaller, providing the mosaic effect. It also works if you begin with the modified object instead of the original object at each step, but the modification looses its relationship to the original faster and doesn't look as good.
The image object imSmall is the small-size object. The size is determined by the stepNumber counter variable:
imSmall = image(w/(stepNumber*4),
h/(stepNumber*4), the colorDepth)
To begin with, stepNumber is 1 and the small-image object is one-fourth the size of the original. At each step, stepNumber is increased by one and the imSmall object is recreated as a smaller object. The factor of 4 was chosen because I think it looks good. In a more robust version the choice of factors should be one of the user-settable properties for the transition.