Solved

magnify/enlarge a button when mouse is placed on it

Posted on 2011-03-03
2
411 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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
AIR Desktop App - open PDF file 6 940
Flex 3 trace output 13 735
flex simple crossdomain problem 1 849
How to export vector graphics from Actionscript 3.0 SWF? 4 1,203
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…
ConnectWise and their customers need to ensure critical alerts automatically reach the right person at the right time. MSP superheros efficiently respond to these alerts key is providing automatic, intelligent alerting that generates a complete audi…
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

828 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