Solved

magnify/enlarge a button when mouse is placed on it

Posted on 2011-03-03
2
410 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:royjayd
2 Comments
 
LVL 4

Accepted Solution

by:
ute_arbeit earned 500 total points
ID: 35034740
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
 

Author Comment

by:royjayd
ID: 35036732
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

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
flex spark videoPlayer: how to get total time ? 3 589
AdvancedDataGrid 5 513
labelFunction 3 281
Flex Mobile - update/refresh current view 7 1,268
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Do you use a spreadsheet like Microsoft's Excel?  Have you ever wanted to link out to a non excel file on your computer or network drive?  This is the way I found to do it!
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question