dcsimg
A Flash Developer Resource Site

Results 1 to 20 of 24

Thread: Rotating Menu ...continued

Hybrid View

  1. #1
    Senior Member
    Join Date
    Jul 2009
    Posts
    167

    Rotating Menu ...continued

    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

    Code:
    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
    Attached Images Attached Images
    Last edited by Donkey kong; 07-28-2009 at 10:25 AM.

  2. #2
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    can any help shine a little light on this problem.

    I have changed all the values related to postionItem but there it an offset which seems to be stopping me from resizing all the images, and then some resize and some don't arrrgghhhhh!

    its something to do with lines between 397 - 421 of the circleMenu.as but just can't get it working


    any help

  3. #3
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    ok, I have been playing around with the values between lines 370 -421 of the circleMenu.as

    I can change the outer image sizes but still cannot change certain images, I think its something to do with the offset??

    I have attached two jpg images of what I have now with a description of what I am trying to do, and a jpg of what I would like it to look like

    would anyone beable to help with this;



    this is the script area I have been working with;


    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();
      }
      
      //覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧覧
      
      private function positionItems():void
      {
       if ( numChildren == 0 ) return;
       
       var maxAngle:Number = _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 - 2)) * ( 2 - minVisibleScale ) );
        tR = angle * toDEGREES;
        tA = hideItem ? 0 : 2 - ( Math.abs(offset / (_maxOffset - 2)) * ( 0 - 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 } );
       }
      }
    Attached Images Attached Images

  4. #4
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    trying to break this down;


    the values at lines 38+39 of circleMenu.as;

    1.) activeItemMenu, this size is what you see and what the menu changes to when selected


    2.)minVisibleScale, this is the size of the images before it disappears, and effectively does not change the images in between. see below for script.


    Code:
    private var _activeItemScale:     Number    = 0.8;   
      private var _minVisibleScale:     Number    = 0.4;



    So what I did was move the menu center stage, to see whats happening, you will see that on the left side the image is small and at a size of 0.4(minVisibleScale. this is the size I would like to get all the images that make up the menu to be) and the image to the right(activeItemMenu) at a size of 0.8(this is the correct size for the selected menu image) download the files here: http://art.clubworldgroup.com/menu_breakdown.zip



    you will see now what is happening to the images in between from the left the image starts at 0.4 then each other image rotating around increases in size!


    so, something is making it increase in size as it goes around the menu, my question is, what is it, is it something to do with the offset, between lines 383 - 417??


    there must be away of getting the images all to be the same size of 0.4 apart from the selected(activeItemMenu) which should be a size of 0.8, which it does do at present.



    I am really trying to break this down the best I can, can any one help?



    feels a little lonely out here

  5. #5
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    ok, here we go, for anyone that is following this thread

    having looked into the tweening, line 424 of the circleMenu.as, here;


    Code:
    TweenLite.to( item, 0.5, { x:tX, y:tY, rotation:tR, scaleX:0.4, scaleY:0.4, alpha:tA, ease:Expo.easeOut } );
    if you change the values from scaleX:tS, scaleY:tS to scaleX:0.4, scaleY:0.4

    this will then set all the image menu items to the size 0.4

    just need to now set the activeItemMenu to 0.8

  6. #6
    Member
    Join Date
    Apr 2008
    Posts
    65
    It looks like it is coming along well. Did you figure out how to change the size of the activeItem? I wanted to mention something with the mousescroll. Scrolling slowly through the menu is smooth, but a fast scroll causes the radius of the menu to shrink. Did you notice that?

  7. #7
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    no, it appears that loading in the 'anim' movieclip this way distorts the menu, is there another way?

  8. #8
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    hi anyone

    would someone beable to explain how to get an animated button to work when it has been exported and given a class name?

    I have a button that animates when rollover, but when I apply/attach this to the rotating menu the button appears around the images button does not animate when rollover. I have been using a tutorial to create as3 animated button, got that working but when try to attach, does not seem to work?

    would anyone beable to help as to why this maybe, here is how I attach the button and then try and use the over script functions


    Code:
    var btn1:btn = new btn();
    
    //move the instance where ever
    holder.addChild(btn1);
    				
    btn1.width = 230;  // changes size of anim movieclip object
    btn1.height = 230;
    			
    btn1.x = -84;  // where to have the tooltip on x axis in the holder
    btn1.y = -30;

    and what I have for the animated button;

    Code:
     Btn1 Over function
    function btn1Over(event:MouseEvent):void {
    btn1.gotoAndPlay("over"); // go into btn1 movieclip and play the over frame label
    }
    // Btn1 Out function
    function btn1Out(event:MouseEvent):void {
    btn1.gotoAndPlay("out");	// go into btn1 movieclip and play the out frame label	
    }
    // Btn1 Down function
    function btn1Down(event:MouseEvent):void {
    //this.gotoAndPlay("myLabel"); // play any frame label in any movieclip
    }
    // Btn1 listeners
    btn1.addEventListener(MouseEvent.ROLL_OVER, btn1Over);
    btn1.addEventListener(MouseEvent.ROLL_OUT, btn1Out);
    btn1.addEventListener(MouseEvent.CLICK, btn1Down);

    would some please help me on this one

  9. #9
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    hi there

    would anyone be able to help me solve my animated button problem?

    I will explain what I have;

    I have created an animated button, that when rollover it triggers an 'over' anim and when roll out again triggers an 'out' anim, this works great on its own!

    but;

    the root problem;
    when I try to apply this button to my rotating menu the button appears but the actual animation when rollover does not happen......what am I missing???

    i CAN'T SEEM TO GET THE SCRIPT WORKING FOR BOTH, ADDING BUTTON TO MENU AND THEN THE ACTIONSCRIPT FOR THE BUTTON.


    would some explain to me what I am doing wrong,

    I thought it would be easier just to attach files rather than paste sections of my script as it could get confusing, I hope this makes things clearer for people to see exactly what I have done.

    I have commented the place where the button script and addchild script are.


    link:
    http://art.clubworldgroup.com/rotating_menu_30_July.zip


    thank you for your help, a very heavy head:

  10. #10
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    would people prefer it if I paste the code so you don't need to download?

    these are the two areas I can not get working, its probably something really simple, maybe I am getting the labeling mixed up?

    for the button
    Code:
    button_mc.addEventListener(MouseEvent.ROLL_OVER, onRoll); 
    button_mc.addEventListener(MouseEvent.ROLL_OUT, onRollout); 
    button_mc.stop(); 
    			
    function onRoll(event:MouseEvent):void 
    			{         
    //if(event.target.currentLabel == "over_btn") 
    //{ 
    event.target.gotoAndPlay(1); 
    //} 
    } 
    			
    unction onRollout(event:MouseEvent):void 
    { 
    //if(event.target.currentLabel == "rollout_btn") 
    //{ 
    event.target.gotoAndPlay(6); 
    //} 
    } 
    			
    button_mc.buttonMode = true;
    to attach to menu

    Code:
    var button_mc:Btn1_mc = new Btn1_mc();
    holder.addChild(button_mc);
    				
    button_mc.width = 230;  // changes size of anim movieclip object
    button_mc.height = 230;
    	
    button_mc.x = -84;  // where to have the tooltip on x axis in the holder
    button_mc.y = -30;
    is this better for explaining?

  11. #11
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    would some one please help me with this, I have been pulling my hair out now for over a week and I just can't get it working.....I am sure it's really simple if you know how...

  12. #12
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    is here a way that I can do an animated rollover button without the AS3 script?

  13. #13
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    Still working with the menu, I have all working now but one final thing I am trying to do, if anyone has any solutions to this problem I would be very grateful of your input!

    what I have;
    The menu rotating and stoping at the point of the last and first image.

    root problem(what trying to do)
    to make a complete 360 continues loop of menu.



    you can download what I have so far here for a better explaination
    http://art.clubworldgroup.com/rotatingmenu_4.zip

    the script for the menu is in the file circleMenu.as


    any help or ideas I would be very grateful



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center