Skip to main content
Known Participant
July 23, 2009
Question

Rotating Menu ...continued

  • July 23, 2009
  • 1 reply
  • 4591 views

hi all

still progressing with the rotating menu, I am trying change the values so that I can position correctly but I can't seem to tweak it?

as the menu rotates the other images resize and get smaller, I think its somewhere within the script that is doing this, I would like it not to resize as it rotates away from center.

but I can't seem to find what is making it do this?

is this making any sense, i have been changing these values, but not quite working;


values I have been looking at on the circleMenu.as at line 38

[CODE]

private var _activeItemScale:                    Number                = 0.7;  
        private var _minVisibleScale:                    Number                = -2.9;
        private var _minVisibleAlpha:                    Number                = 0.5;


this changes the sizes of images but does not effect resize as it rotates?

and this at line 155


[CODE]

public function get visibleItems():int
        {
            return _visibleItems;
        }
       
        public function set visibleItems( value:int ):void
        {
            if ( value < 2 ) value = 2;
            if ( value / 2 is int ) value += 1;
           
            _visibleItems = value;
            _maxOffset = Math.round( value / 2 );
            positionItems();
        }


and line 383

private function positionItems():void
        {
            if ( numChildren == 0 ) return;
           
            var maxAngle:Number = _maxOffset * _angleSpacing;
           
            var item:Sprite;
            var hideItem:Boolean;
            var angle:Number;
            var offset:int;
           
            var tX:Number;
            var tY:Number;
            var tS:Number;
            var tR:Number;
            var tA:Number;

            for (var i:int = 0; i < numChildren; i++)
            {
                offset = (i + 1) - _currentIndex;
                angle = limit(offset * _angleSpacing, -180, 180) * toRADIANS;
                hideItem = Math.abs( offset ) >= _maxOffset;
               
                item = super.getChildAt(i) as Sprite;
                item.mouseChildren = !hideItem;

                tX = _innerRadius * Math.cos( angle );
                tY = _innerRadius * Math.sin( angle );
                tS = offset == 0 ? activeItemScale : 1 - ( Math.abs(offset / (_maxOffset - 1)) * ( 1 - minVisibleScale ) );
                tR = angle * toDEGREES;
                tA = hideItem ? 0 : 1 - ( Math.abs(offset / (_maxOffset - 1)) * ( 1 - minVisibleAlpha ) );
               
                if ( tS < 0 ) tS = 0;
               
                TweenLite.to( item, 0.5, { x:tX, y:tY, rotation:tR, scaleX:tS, scaleY:tS, alpha:tA, ease:Expo.easeOut } );
            }
        }


I have been trying to change the values with the as files but I cannot seem to get the menu how I want it regarding size and space of images, everytime I change a value it makes another part of the menu images to resize???

would anyone beable to help with any suggestions as to which are the correct values to change within the main.as and/or circleMenu.as

if you like you can download the files from the links below, I have attached a jpg layout of what I am trying to get it looking like

cs4
http://art.clubworldgroup.com/rotate_menu_cs4.zip

cs3
http://art.clubworldgroup.com/rotate_menu_cs3.zip


I have also attached a folder containing just the as files

main.as & circleMenu.as

many thanks for any help

This topic has been closed for replies.

1 reply

Ned Murphy
Legend
July 23, 2009

The part that changes the size of the objects is the Tween.  If you remove that property from the Tween then the sizes will not change.

TweenLite.to( item, 0.5, { x:tX, y:tY, rotation:tR, scaleX:tS, scaleY:tS, alpha:tA, ease:Expo.easeOut } );

Also, since you won't be changing the tween, you can save the added calculations for defining the tS value...

tS = offset == 0 ? activeItemScale : 1 - ( Math.abs(offset / (_maxOffset - 1)) * ( 1 - minVisibleScale ) );

Then if you want to change the angular spacing and/or radial distance, you can assign those in the Main.as file where you instantiate the CircleMenu object.  You can refer to the CircleMenu file to see what the argument values are....

circleMenu = new CircleMenu( 500, 17, 12 );

Known Participant
July 23, 2009

Hi Ned

if I put that line back in it allows me to use the values

private var _activeItemScale:                    Number                = 0.8; 
        private var _minVisibleScale:                    Number                = 0.4;
        private var _minVisibleAlpha:                    Number                = 1.8;

but again, only three images, two small and one large only are visible on the stage, when you rotate the menu it looks like they fade to small and then out so not visible, is there away that I can just stop this little bit where it fades to small, and just show all on the menu?

Known Participant
July 23, 2009

You are going to have to explain what you want more clearly.  If you look at that Tween line of code in the CircleMenu file, it controls what happens to each piece.  So if you don't want things to fade, then you remove the portion that changes the alpha value in that line.  If you don't want the scale to change, then you don't iinclude the scaleX/Y parts.  If you want more thing s to appear together, then you change the angle from 17 to something smaller.


sorry, not sure if that was posted before my last post?

was that explained better?