Solved

magnify/enlarge a button when mouse is placed on it

Posted on 2011-03-03
2
406 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
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

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…
In this article, I will show you HOW TO: Create your first Windows Virtual Machine on a VMware vSphere Hypervisor 6.5 (ESXi 6.5) Host Server, the Windows OS we will install is Windows Server 2016.
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now