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;
}
clearInterval(timer);
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>
Hi Jasmeet,
Check out Ely Greenfield blog. SuperImage Component is best suited for List based ImageItemRenderers.
http://www.quietlyscheming.com/blog/2007/01/23/some-thoughts-on-doubt-on-flex-as-the-best-option-orhow-i-made-my-flex-images-stop-dancing/
Elango
Thanks for the info Elango
Update to code::
<![CDATA[
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 ;
private var _width:int = 368;
private var _height:int = 140;
[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;//;(this.height/2)-(tempTxt.height/2);
var pictURL:String = image_source;
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);
//imgControl.addEventListener(ResizeEvent.RESIZE,resized);
}
}
private function imgLoaded(e:Event):void
{
//canv.addChild(pictLdr.content);
imgControl.source = image_source;
}
private function resize():void
{
this.visible = false;
if (( this.width - 8 ) < imgControl.width || ( this.height - 8 ) < imgControl.height ) {
//reduse .2 to ,o1 if more accuracy required.
imgControl.scaleX -= .02;
imgControl.scaleY -= .02;
}else{
clearInterval(timer);
imgControl.visible = this.visible = true;
setXY();
return;
}
// break here
return;
}
private function resized(e:Event):void
{
imgControl.callLater(resized1);
}
private function getSizes():void
{
trace((imgControl.width < (this.width-8)) && (imgControl.height
Easiest and accurate way to resize image proportionately.
img_mc._height = 100;// Height of the container.
img_mc._xscale = img_mc._yscale; // This will resize image proportionately.
But how to resize an image on to disk?
hi delta,
for resize on disk you will have to right a new file to disk after it is resized in player, and you have created a new resized binary data.