Skip to main content
Known Participant
July 23, 2009
Question

Rotating Menu ...continued

  • July 23, 2009
  • 1 reply
  • 4590 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
Brainiac
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

many thanks for your reply and help!

I removed the suggested lines and assgined radial distance/spacing etc using circleMenu = new CircleMenu( 500, 17, 12 );

that works great, brilliant thank you!

The only other thing that happens then is the actual size of the images are all the same size when rotating round, I am trying to get the images smaller than the one that has been select and aligns center. I have set the value here

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

so that the activeItemScale is larger than minVisibleScale, but for some reason the minVisible value does not change the images smaller?

I thought this might be adjusted at line 155     public function get visibleItems():int  values but not sure what it is saying, can you explain what this value is doing?

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();

if not adjusted here the only other place I can see is between lines 383 -417, am I close???

thanks for your help