magnify/enlarge a button when mouse is placed on it

hi guys
I have a requirment where if a user points his/her mouse on a button the button should enlarge or magnify little bit. Does anyone have the code for it? I looked on google but no luck.

any help appreciated
thanks
royjaydAsked:
Who is Participating?
 
ute_arbeitCommented:
You should create a component for such a button. You can dreive it from the Button class.
You can simply define one effect for growing that is executed on mouse rollOvers and another effect for shrinking that is assigned on mouse rollOuts.
As an example with simple effects that grow and shrink the size by 5 pixel on each border within 200 milliseconds:

MagnifyingButton.xml
<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
	rollOverEffect="{grow}"
	rollOutEffect="{shrink}"
	width="150"
	height="30"
	horizontalCenter="0"
	verticalCenter="0"
	>
	<mx:Resize id="grow" duration="200"
		heightFrom="30" heightTo="40" widthFrom="150" widthTo="160"/>
	<mx:Resize id="shrink" duration="200"
		heightFrom="40" heightTo="30" widthFrom="160" widthTo="150"/>
</mx:Button>

Open in new window


If you want the growing/shrinking to be more organic you can use easing functions for the execution of the effect, e.g.
<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
	rollOverEffect="{grow}"
	rollOutEffect="{shrink}"
	width="150"
	height="30"
	horizontalCenter="0"
	verticalCenter="0"
	>
	<mx:Script>
		<![CDATA[
			import mx.effects.easing.Cubic;
			import mx.effects.easing.Exponential;
		]]>
	</mx:Script>
	<mx:Resize id="grow" duration="200"
		heightFrom="30" heightTo="40" widthFrom="150" widthTo="160"
		easingFunction="{Exponential.easeInOut}"/>
	<mx:Resize id="shrink" duration="200"
		heightFrom="40" heightTo="30" widthFrom="160" widthTo="150"
		easingFunction="{Cubic.easeInOut}"/>
</mx:Button>

Open in new window

This is just a start for your own creativity to enhance the look and feel of the button.

Then you can just use your new button component like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:local="*">
	<local:MagnifyingButton label="MagnifyingButton"/>	
</mx:Application>

Open in new window

0
 
royjaydAuthor Commented:
thanks a lot. can you plz help out with this next question...thanks

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26864054.html

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.