Techy

Image Componet to load swf, images and resize the same to fit in the container width , height.

Just copy paste the following in a notepad and save it as imageComp.mxml.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”100%” height=”100%”
styleName=”{style_name}” initialize=”onInit();showLoading(true);”
verticalScrollPolicy=”off” horizontalScrollPolicy=”off” creationComplete=”onAppInit();”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import flash.utils.setInterval;
import flash.utils.clearInterval;
import mx.events.ResizeEvent;
import mx.controls.Text;

import flash.display.*;
import flash.net.URLRequest;

/**
* This property is used to hold style of this Image Component.
*/
[Bindable]
public var style_name:String = null;

/**
* This property is used to hold URL of the Image.
*/
[Bindable]
private var _image_source:String = null;

private var tempTxt:Text;
private var timer:uint = 0;
private var timerSize:uint = 0 ;

[Bindable]
public function set image_source(str:String):void
{
_image_source = str;
}

public function get image_source():String
{
return _image_source;
}
private function onInit():void
{
if(image_source == “”){
Alert.show(“The image URL is empty.”);
}
dispatchEvent(new Event(“onInit”,true));
}

private function onAppInit():void
{
dispatchEvent(new Event(“CREATION_COMPLETE”,true));
}

private var pictLdr:Loader = new Loader();

private function showLoading(val:Boolean):void
{

if(val)
{
tempTxt = new Text();
tempTxt.text=”Loading…”;
this.canv.addChildAt(tempTxt,1);
tempTxt.x = (this.width/2)-(tempTxt.width/2 );
tempTxt.y = 30;
trace(“Image Source :: “+image_source +” :: Image Holder Intialize ::”);
var pictURL:String = image_source;
// Image is loaded in advance to overcome the resizing issue in cae of crossdomain files access
// the same can be removed if not required.

var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);

}else
{
if(this.canv.getChildAt(1) == tempTxt)
this.canv.removeChildAt(1);

}

}
private function imgLoaded(e:Event):void
{
imgControl.source = image_source;
}

private function resize():void
{
clearInterval(timer);
imgControl.visible = true;
imgControl.x = (this.width/2)-(imgControl.width/2 );
imgControl.y = (this.height/2)-(imgControl.height/2);
}
private function resized(e:Event):void
{
imgControl.callLater(resized1);
}

private function resized1():void
{

tempTxt.x = (this.width/2) – 25;
tempTxt.y = (this.height/2) – 25;
imgControl.removeEventListener(ResizeEvent.RESIZE,resized);
timerSize = setInterval(getSizes,5000);
}
private function getSizes():void
{

if(imgControl.width == 0 && imgControl.height == 0){
return
}
trace(“Image Source :: “+image_source +” :: called Resized Event Of Image Component after 5 seconds:: “+imgControl.width+”,”+imgControl.height);
var perRatio:Number;
if (imgControl.width > imgControl.height ) {
if((this.width-8) > imgControl.width){
perRatio = ((this.height – 8)/imgControl.height);
}else{
perRatio = ((this.width-8)/imgControl.width);
}
trace(“Width More perRatio :: “+perRatio);
imgControl.scaleX = imgControl.scaleY = perRatio > 1 ? 1: perRatio;
} else {
if((this.height-8) > imgControl.height){
perRatio = ((this.width-8)/imgControl.width);
}else{
perRatio = ((this.height – 8)/imgControl.height);
}
trace(“Height More perRatio :: “+perRatio);
imgControl.scaleY = imgControl.scaleX = perRatio > 1 ? 1: perRatio;
}

imgControl.visible = true;

timer = setInterval(resize,2);
clearInterval(timerSize);
}
private function ioErrorFnc(eve:Event):void
{
Alert.show(“Missing Image”);
}
private function setXY():void
{
imgControl.x = (this.width/2)-(imgControl.width/2 );
imgControl.y = (this.height/2)-(imgControl.height/2);
trace(imgControl.x +”-X/Y in getSizes1-”+ imgControl.y)

}
private function getSizes1():void
{
if(timer == 0){
getSizes();
}
setXY();
}

]]>
</mx:Script>

<mx:Canvas id=”canv” >
<mx:Image id=”imgControl” resize=”getSizes1()”
complete=”showLoading(false)” visible=”false” ioError=”ioErrorFnc(event)” />
</mx:Canvas>

</mx:Canvas>