How to give Zoom Effect to Sprite

[kishore.v]

Hi
I am doing some r&d on Flex drawing API. I have drawn one rectangle, i
would like to give zoom effect when rollOver and rollOut. I have tried
to give flex default zoom effect and manually given width and height.
I am unable to give zoom effect. please see the below my source code
and let me know where i did the mistake.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="drawRec()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function drawRec():void
{
var ref:UIComponent=new UIComponent();
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawRect(300, 300,30,30);
mySprite.addEventListener(MouseEvent.ROLL_OVER,zoomMe);
mySprite.addEventListener(MouseEvent.ROLL_OUT,zoomOutMe);
ref.addChild(mySprite);
this.addChild(ref);
}
private function zoomMe(evt:MouseEvent):void
{
var target:Sprite=new Sprite();
target=evt.target as Sprite;
target.width=50;
target.height=50;
}
private function zoomOutMe(evt:MouseEvent):void
{
var target:Sprite=new Sprite();
target=evt.target as Sprite;
target.width=30;
target.height=30;
}

/* public function doZoom(event:MouseEvent):void {
if (zoomAll.isPlaying) {
zoomAll.reverse();
}
else {
// If this is a ROLL_OUT event, play the effect
backwards.
// If this is a ROLL_OVER event, play the effect
forwards.
zoomAll.play([event.target], event.type ==
MouseEvent.ROLL_OUT ? true : false);
}
} */


]]>
</mx:Script>
<!--<mx:Zoom id="zoomAll" zoomWidthTo="1" zoomHeightTo="1"
zoomWidthFrom=".5" zoomHeightFrom=".5" /> -->

</mx:Application>



advance thanks
kishore.v

[ashok]

Some thing like this.

private function zoomMe(evt:MouseEvent):void
{

mySprite.graphics.clear();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawRect(300,
300,60,60);

}
private function
zoomOutMe(evt:MouseEvent):void
{

mySprite.graphics.clear();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawRect(290,
300,30,30);

[dinesh]

Hi Kishore,

 

Try this..Zoom your UI component which holds the sprite

 

                         var zm:Zoom=new Zoom();
                         var ref:UIComponent=new UIComponent();

                         private function zoomMe(evt:MouseEvent):void
                         {

                           zm.target=ref;
                           zm.zoomHeightTo=2;
                           zm.zoomWidthTo=2;
                           zm.originX = 0; 
                           zm.originY = 0;
                           zm.play();
                          
                         }

 

 

Regards,

DineshKumar.T

[Kalpataru Roy]

Hi Kishore,

Here is the solution....

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="drawRec()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;

public var myUI:UIComponent = new
UIComponent();
public var mySprite:Sprite = new Sprite();
public var myPoint:Point = new
Point(300,300);

private function drawRec():void
{
var pointL:Point =
globalToLocal( myPoint );

mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawRect(0,
0,30,30);

mySprite.addEventListener(MouseEvent.MOUSE_OVER,zoomMe);

mySprite.addEventListener(MouseEvent.MOUSE_OUT,zoomOutMe);

myUI.x = 0;
myUI.y = 0;

myUI.addChild(mySprite);

myCanvas.addChild(myUI);

mySprite.x = pointL.x;
mySprite.y = pointL.y;

}
private function zoomMe(evt:MouseEvent):void
{

var pointL:Point =
globalToLocal( myPoint );
mySprite.width = 50;
mySprite.height = 50;
mySprite.x = pointL.x;
mySprite.y = pointL.y;

}
private function
zoomOutMe(evt:MouseEvent):void
{

var pointL:Point =
globalToLocal( myPoint );
mySprite.width = 30;
mySprite.height = 30;
mySprite.x = pointL.x;
mySprite.y = pointL.y;
}
]]>
</mx:Script>

<mx:Canvas id="myCanvas" />

</mx:Application>


Thanks
Kalpataru Roy
+919850021354