Showing posts with label effect. Show all posts
Showing posts with label effect. Show all posts

Image drag effect

The following example illustrates how to drag an image.



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[

private function onMouseDown (): void
{
var rec:Rectangle =
new Rectangle(0, 0, mainCanvas.width, mainCanvas.width);
imageAnimation.startDrag(false, rec);
}

private function onMouseUp (): void
{
imageAnimation.stopDrag();
}

]]>
</mx:Script>

<mx:Canvas id="mainCanvas"
width="100%"
height="100%"
verticalScrollPolicy="off"
horizontalScrollPolicy="off">

<mx:Image
id="imageAnimation"
source="@Embed('assets/flash_icon.png')"
mouseDown="onMouseDown()"
mouseUp="onMouseUp()">
</mx:Image>

</mx:Canvas>

</mx:Application>






Click on the image and drag it anywhere on the canvas

 

Image move effect

The following example will illustrate the use an effect on component (in this case an image) using your mouse.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script>
<![CDATA[

private function moveAction():void
{
moveImage.end();
moveImage.xTo = mouseX - ( imageAnimation.width / 2);
moveImage.yTo = mouseY - ( imageAnimation.height / 2);
moveImage.play();
}

]]>
</mx:Script>

<mx:Move id="moveImage" target="{imageAnimation}" duration="300"/>

<mx:Canvas width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
click="moveAction()" >

<mx:Image
id="imageAnimation"
source="@Embed('assets/flash_icon.png')" >
</mx:Image>

</mx:Canvas>

</mx:Application>






Click anywhere on the canvas to move the image

 

Labels