Image Componet to load swf, images and resize

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&#8221; 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>

About these ads

6 thoughts on “Image Componet to load swf, images and resize

  1. 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

  2. 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.

  3. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s