Rotate & Scale From Center Using Matrix and mouse scroll

If you want to rotate from center then move center point to 0,0 and then after rotate reset it's to original.

Here is some sample code.

"<"mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"">"
"<"mx:Script">"
"<"![CDATA[
import mx.events.FlexEvent;

private var st:Number = 0;
private var img:Box;

private function init():void
{
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
can.setFocus();
}
private function mouseDownH(event:MouseEvent):void
{
event.currentTarget.startDrag(false,new Rectangle(0,0,can.width - event.currentTarget.width ,can.height- event.currentTarget.height));
}
private function mouseUpM(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
private function rotateright():void
{
if(st == 360)
st = 0;
st = st + 5;

var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var radians:Number = st * (Math.PI / 180.0);
var m:Matrix = new Matrix();

m.translate(-ofx, -ofy);
m.rotate(radians);
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;

st = st - 5;
}
private function rotateleft():void
{
if(st == 0)
st = 360;

st = st - 5;

var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var radians:Number = st * (Math.PI / 180.0);
var m:Matrix = new Matrix();

m.translate(-ofx, -ofy);
m.rotate(radians);
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;

st = st + 5;
}

private function complateLoad(event:Event):void
{
Bitmap(event.currentTarget.content).smoothing = true;
event.currentTarget.x = (can.width/2) - (event.currentTarget.width / 2);
event.currentTarget.y = (can.height/2) - (event.currentTarget.height / 2);
}
private function doMouseWheel(event:MouseEvent):void
{
trace(event.delta);
var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var m:Matrix = new Matrix();
m.translate(-ofx, -ofy);
if(event.delta "<" 0)
{
m.scale(img.scaleX + 0.2,img.scaleY + 0.2);
}
else
{
if(img.transform.matrix.a > 1)
{
m.scale(img.scaleX - 0.2,img.scaleY - 0.2);
}
else
{
return;
}
}
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;
}
private function selimg(curimg:Box = null ):void
{
if(curimg != null)
img = curimg;
for each(var objb:Box in can.getChildren())
{
objb.setStyle('borderThickness','1');
objb.setStyle('borderStyle','solid');
objb.setStyle('borderColor','#ffffff');
}
if(curimg != null)
{
img.setStyle('borderThickness','1');
img.setStyle('borderStyle','solid');
img.setStyle('borderColor','#00ff00');
}
}
]]">"
"<"/mx:Script>
"<"mx:Canvas id="can" height="500" width="800" backgroundColor="#cdcdcd" ">"

"<"mx:Box id="imgb1" mouseDown="mouseDownH(event)" mouseUp="{mouseUpM(event)}"
borderThickness="1" borderStyle="solid" borderColor="#ffffff" moveEffect="Blur" ">"
"<"mx:Image id="imgX1" source="GoogleIcon.jpg" complete="complateLoad(event)" click="{selimg(imgb1)}" /">"

"<"/mx:Box">"

"<"mx:Box id="imgb2" mouseDown="mouseDownH(event)" mouseUp="{mouseUpM(event)}"
borderThickness="1" borderStyle="solid" borderColor="#ffffff" moveEffect="Blur" ">"
"<"mx:Image id="imgX2" source="GoogleIcon.jpg" complete="complateLoad(event)" click="{selimg(imgb2)}" / ">"

"<"/mx:Box ">"

"<"/mx:Canvas ">"
"<"mx:Button label="Right" click="rotateright()"/ ">"
"<"mx:Button label="Left" click="rotateleft()"/ ">"
"<"mx:Button label="clear selection" click="selimg()"/ ">"
"<"/mx:Application ">"

Rotate & Resize using Matrix

In the flex matrix object have 6 property a,b,c,d ,tx,ty .
In this matrix a used for scaling on width , d is used for scaling in height ,b is used for tilt ( moving second part on vertical side i.e. right part ) , c is used for tilt ( moving second part on horizontal side i.e. bottom ),tx is used for move x position , ty is used for move y position.

Internally rotate function and filter is also working on this matrix base.

Here is some sample code of that.




"<"mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
width="1200" height="900" applicationComplete="appcomp()"">"
"<"mx:Script">"
"<"![CDATA[
private var mts:Matrix;
private function appcomp():void
{
mts = img.transform.matrix;
if(mts)
{

ha.value = mts.a;
hb.value = mts.b;

hc.value = mts.c;
hd.value = mts.d;

htx.value = mts.tx;
hty.value = mts.ty;



}
}
private function chagneValue():void
{
var mt:Matrix = new Matrix(ha.value,hb.value,hc.value,hd.value,htx.value,hty.value);
img.transform.matrix = mt;
mt = null;
}
private function setOrg():void
{
img.transform.matrix = mts;
appcomp();
}
private function setVal():void
{
setOrg();

/* var oldtx:Number = img.transform.matrix.tx;
var oldty:Number = img.transform.matrix.ty; */

var angNum:Number = Number(ang.text);

var cala:Number = Math.round(Math.cos(angNum));
var calb:Number = Math.round(Math.sin(angNum));
var calc:Number = - Math.round(Math.sin(angNum));
var cald:Number = - Math.round(Math.cos(angNum));

lbSetVal.text = "a. cos("+ angNum +") - > " + cala.toFixed(0) + " b. sin("+ angNum +") - > " + calb.toFixed(0) + " c. -sin("+ angNum +") - > "+ calc.toFixed(0) + " d. -cos("+ angNum +") - > "+ cald.toFixed(0);

var mtn:Matrix = new Matrix(cala,calb,calc,cald);
img.transform.matrix = mtn;
mtn = null;
}
"]]>"
"<"/mx:Script">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="a"/">"
"<"mx:HSlider id="ha" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"mx:Label text="b"/">"
"<"mx:HSlider id="hb" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="c"/">"
"<"mx:HSlider id="hc" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"mx:Label text="d"/">"
"<"mx:HSlider id="hd" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="tx"/">"
"<"mx:HSlider id="htx" maximum="100" minimum="-100" tickInterval=".1" change="chagneValue()"/">"
"<"mx:Label text="ty"/">"
"<"mx:HSlider id="hty" maximum="100" minimum="-100" tickInterval=".1" change="chagneValue()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="Angle"/">"
"<"mx:TextInput id="ang" text="0"/">"
"<"mx:Button label="SET" click="setVal()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label id="lbSetVal" /">"
"<"mx:Button label="Set Original" click="setOrg()"/">"
"<"/mx:HBox">"

"<"mx:Canvas id="can" width="1000" height="700" horizontalCenter="0" verticalCenter="0" backgroundColor="#CDCDCD"">"
"<"mx:Canvas horizontalCenter="0" verticalCenter="0" ">"
"<"mx:Image id="img" source="@Embed('Sunset.jpg')" scaleContent="false"/">"

"<"/mx:Canvas">"
"<"/mx:WindowedApplication">"

Set Focus SWF File

Hi,

There are many ways to focus your swf file when it's loaded.

1. Using HTML + Javascript code :
"<" body scroll='no'onLoad="document.getElementById('${appSwfVarname}').focus();" ">"
or
"<" body scroll='no'onLoad="document.getElementById('swffilename').focus();" ">"

2. Using ActionScript Code :

ExternalInterface.call('function browserFocus(){document.getElementById(\'swfname\').focus();}');
txtUserName.setFocus();