8 Replies Latest reply on Sep 30, 2009 2:00 PM by auron1

# Morph on button selection

Trying to get a square to change to different shapes when you select a button from the menu, it changes from one size to the next. Can anyone help me find a way to get this done, I am more on the designer side of the board but trying to do the back ground work. It need to change shape back and forth no matter which button is selected, without it looking like there is a hitch in the morphing of the square. Thank you for the assistance.

• ###### 1. Re: Morph on button selection

There are probably a number of ways to accomplish what you have in mind. How many buttons do you have to use and how many different sizes of this box shape do you have? Is there a one to one relationship between any given button and any given box size? Is the first button meant to always show the smallest box size, for instance? Are you actually morphing the shape of the box or just enlarging and/or reducing the size of the box?

• ###### 2. Re: Morph on button selection

Right now there are five boxes that relate to each selection of the menu, the boxes morph in the sense they get bigger and longer in some cases, or just smaller and shorter. I am not sure what you by one to one relationship, but when you hit button 4 from 2, it changes size and shape to reflect that selection, you hit button 1 from 4 and it morphs to the shape under selection 1 seamlessly. Each button has its assigned shape.

• ###### 3. Re: Morph on button selection

That would be a one to one relationship. If that's the case then you could use a tween to resize the box for each button's use. So, for instance, you have the box on the stage as a movieClip and you have the five buttons. You don't say which version of Actionscript you are using, so I'll give you both.

Let's name the box instance "box" and the buttons "button1" through "button5".

in AS2:

import mx.transitions.Tween;

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,100,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,120,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,140,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,160,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,180,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,100,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,120,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,140,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,160,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,180,2,true);

button1.onRelease = function() {

boxTween1x.start();

boxTween1y.start();

// whatever else happens when this button is hit...

}

// and similarly for each button.

in AS3:

import fl.transitions.Tween;

import fl.transitions.easing.*;

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,100,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,120,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,140,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,160,2,true);

var boxTween1x:Tween = new Tween(box,"_xscale",mx.transitions.easing.None.easeNone,box._xscale,180,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,100,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,120,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,140,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,160,2,true);

var boxTween1y:Tween = new Tween(box,"_yscale",mx.transitions.easing.None.easeNone,box._yscale,180,2,true);

function button1Up(event:MouseEvent):void {

boxTween1x.start();

boxTween1y.start();

// whatever else happens when this button is hit...

}

// similar for each addtional button, just change the names of the tweens

• ###### 4. Re: Morph on button selection

Thank you for the assistance, but I guess I am being an idiot here. I am trying to place the script to get this to work with no success, attached is the test file I am working with. I am using action script 2

• ###### 5. Re: Morph on button selection

You didn't have the box and button instances on the stage named. I made some changes to the movie, they are listed above the code. I made it simpler for you.

• ###### 6. Re: Morph on button selection

Thank you man, it works great I just have to make some modification. I have a question, if I wanted to move an object, could I change the "scale" command to somehting else, i know the command wouldn't be "move", not sure what it is, but I know would be able to move it on the "x" or "y" axis. Thanks again.

• ###### 7. Re: Morph on button selection

Yes, you can use a Tween to change any property. Look in the online help for more information about that.  If you are interested in exploring this in greater detail, have a look at the TweenLite/TweenMax tweening libraries at http://blog.greensock.com/tweenmaxas3/ This library increases the functionality and the ease of use.