Image drag effect

  • Posted by Vasudeva Mahavisno
  • Friday, May 30, 2008

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

  • Posted by Vasudeva Mahavisno

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

 

Image embed and resizing

  • Posted by Vasudeva Mahavisno
  • Thursday, May 29, 2008

The follwing example shows you how you can import an image (gif, jpeg, png ...) on a canvas


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

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

<mx:Canvas width="100%" height="100%">

<mx:Image
id="imageLoader"
source="@Embed('assets/myImage.jpg')"
width="200"
height="250"
x="10"
y="10"
scaleContent="true">
</mx:Image>

</mx:Canvas>

</mx:Application>




By adding the @Embed directive onto the image control, causes the complier to include the image file (in this case a JPG file) with the SWF file. You could also provide an absolute URL path:



<mx:Image id="imageLoader" source="http://[YOUR HOSTNAME]/myImage.jpg')" />





Scaling an image

You can scale an image size using the 'scaleX' or 'scaleY' properties. The default value is set at '1' and its relative size can be adjusted to a fraction (decimal) value that represent percentage. For example setting the scaleX='2.0' would essentially resize the width of the image by 200%.



<mx:Image
id="imageLoader"
source="@Embed('assets/myImage.jpg')"
scaleX="2.0">
</mx:Image>



 

Subscribe to: Posts (Atom)

Labels