If you own SlideShowPro, you get access to lots of examples including the wet floor effect. While I'm sure some will dismiss the look as frivolous or simply too popular to be original, it's so ubiquitous nowadays because (1) we or rather computers can create it on the fly and (2) it does add interesting depth to what would otherwise be a flat, two-dimensional screen. What's wrong with a bit of trompe l'oeil?

Unfortunately for those who've decided to move wholly to ActionScript 3, the SlideShowPro guys haven't yet had time to post an updated version of their AS2 example. No worries - they're working on other good stuff such as smart albums (can't wait).

Adobe have however posted a generic solution for creating movie clips with reflections in ActionScript 3.0 which includes a class file. As this sneak preview of the fabled colour-managed, xml- and database-powered, AS3-coded, modular-build and still-to-be-unleashd Flash site shows, the reflect.as class can be adapted relatively easily to specific requirements such as SlideShowPro. If you want to read how….. 3 elements are needed - calling up the reflect.as class, using onImageFormatEvent to trigger repositioning of the reflection, adding a repositioning function to reflect.as.

OK, my ssp component is in a movie clip called sspGalleries, so….

Calling up that Relect.as class in my movie:

import com.pixelfumes.reflect.*;
var r1:Reflect=new Reflect({mc:this.sspGalleries,alpha:60,ratio:30,distance:0,updateTime:0,reflectionDropoff:1});

Next I use the ssp as3 onImageFormat event to reposition the reflection - important because the vanilla reflect.as class will create a reflection beginning at my ssp movie clip's bottom edge. That's no good - it leaves a gap - if my image isn't as tall as the ssp component. So I use onImageFormatEvent to get the dimensions and position of the currently-displayed image within the ssp component.

function onImageFormatEvent(event:SSPImageFormatEvent) {
	if (event.type=="imageFormat") {
		//trace( event.h + " " + event.y + " " + this.sspGalleries.y);
		var reflectionTop =  event.h + event.y + + my_ssp.y ;
		r1.reposition(reflectionTop, my_ssp.height) ;
	}
}
my_ssp.addEventListener(SSPImageFormatEvent.IMAGE_FORMAT, onImageFormatEvent);

What this does is run a function called reposition which I added to the reflect.as class and which takes two variables. One is needed for images which are not as tall as the ssp component and calculates the bottom of the image by grabbing its height, its vertical position within the ssp component (this deals with centred content), and the vertical position of the ssp component within the movie. The other is the height of the ssp component - this is like a backstop and will set the maximum vertical position of the reflection.

Now the third thing you need to do - add a function to the reflect.as class:

		public function reposition(position:Number, objHeight:Number ):void {
			// moves the bitmap reflection - John [2009]
			//trace(gradientMask_mc.y + " " + reflectionBMP.y);
			if (position
The two important entities in the class are the reflection bitmap, or reflectionBMP, and the gradient mask that makes it fade away - this is gradientMask_mc. This function checks if the reflection's calculated y position is greater than the ssp component's height - ie if the image fills the component. In that case, the reflection is positioned at the bottom of the ssp component. If not - eg the image is landscape and centred - the reflection's positioned at the bottom of the image within.