Solved

magnify/enlarge a button when mouse is placed on it

Posted on 2011-03-03
2
413 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free eBook: Backup on AWS

Everything you need to know about backup and disaster recovery with AWS, for FREE!

Question has a verified solution.

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

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…
Had a business requirement to store the mobile number in an environmental variable. This is just a quick article on how this was done.
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

752 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