Avg. Rating 3.2

Problem

Images loaded at runtime don't have a preloader, or filters. Setting scaling to true will image larger than 100% of the original size.

Solution

This class improves upon the SmoothImage class written by Ben Longoria. It adds a centered preloader (SWF written in AS2) while the image loads. When it is loaded, it attaches a drop shadow. It will also scale the image if it is in a smaller bounding box, but not make it larger than 100% of the original size.

Detailed explanation

package pkg{
import mx.controls.Image;
import mx.core.UIComponent;
import mx.core.Application;
import mx.events.FlexEvent;
import mx.core.mx_internal;
import flash.filters.*;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.events.Event;
import flash.display.MovieClip;
import flash.events.ProgressEvent;
import flash.system.LoaderContext;
import caurina.transitions.*;

use namespace mx_internal;

public class SmoothImageLoader extends Image {

[Embed(source="../skin/imagepreloader.swf", symbol="Preloader")]
private var FlashPreloaderSymbol:Class;

private var clip:MovieClip = null;

public function SmoothImageLoader():void {
super();
addEventListener(Event.OPEN,onOpen);
addEventListener(Event.COMPLETE,onComplete);
}

/**
* @private
*/

override mx_internal function contentLoaderInfo_completeEventHandler(event:Event):void {

var smoothLoader:Loader = event.target.loader as Loader;
var smoothImage:Bitmap = smoothLoader.content as Bitmap;
smoothImage.smoothing = true;

super.contentLoaderInfo_completeEventHandler(event);
}

protected function onComplete(event:Event):void
{
removeChild(clip);
event.target.filters = [getBitmapFilter()];
updateDisplayList(event.target.width, event.target.height);
onResize(event);
addEventListener(Event.RESIZE, onResize);
}

protected function onOpen(event:Event):void
{
clip = new FlashPreloaderSymbol();
addChild(clip);
clip.alpha = 0;
Tweener.addTween(clip, {alpha:100, time:.1, delay:.05, transition:"linear"});
clip.x = event.target.x + (event.target.width/2);
clip.y = event.target.y + (event.target.height/2);
}

private function getBitmapFilter():DropShadowFilter {
var distance:Number = 0;
var angle:Number = 90;
var color:Number = 0x000000;
var alpha:Number = 1;
var blurX:Number = 12;
var blurY:Number = 12;
var strength:Number = 0.5;
var quality:Number = BitmapFilterQuality.LOW;
var inner:Boolean = false;
var knockout:Boolean = false;

return new DropShadowFilter(distance, angle, color, alpha,
blurX, blurY, strength, quality, inner, knockout);
}

protected function onResize(event:Event):void
{
var myWidth:Number = event.target.content.width;
var myHeight:Number = event.target.content.height;

if ((myWidth > Application.application.width) || (myHeight > Application.application.height))
{
event.target.scaleContent = true;
} else {
event.target.scaleContent = false;
}
}

}
}

preview here

source here

edit:
I've included the FLA source file for the preloader SWF here:
http://www.infinitearray.com/experiments/smoothimageloader/preloader.zip
The preloader file must be published in AS2, and have a movieclip in the library with linkage ID "preloader".


Report abuse

Related recipes