dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 24

Thread: Rotating Menu ...continued

  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
    hey scradbrad

    no not been able to figure that out yet, yes I dd notice the distortion when scroll faster, that is the tween effect, sill getting my head around that one also

  8. #8
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    Hi all

    would anyone beable to help with changing the size of the 'activeItemMenu' image in this menu?

    thanks for any helps!

  9. #9
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    ok I have been given this;

    Code:
    var tS = (item == activeItemMenu) ? 0.8 : 0.4;

    but not sure how to incorporate into script as when I simply copy and paste I get errors and the menu does not work, these are the errors


    1120: Access of undefined property activeItemMenu.
    Wanring: 3596: Duplicate variable defintion.

    any ideas anyone?

  10. #10
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    ok, for people who are following . . if any

    I managed to get the smaller images to resize and give back full control of them and enable to resize smaller, this is what I did.

    circelMenu.as, line 418, where it says;

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

    what I did was remove the offset section, so remove this;

    Code:
    - ( Math.abs(offset / (_maxOffset - 1)) * ( 1 - minVisibleScale ) );
    and replace with this;

    Code:
    : 0.4
    so the complete line should look like this

    Code:
    tS = offset == 0 ? activeItemScale : 0.4
    so the '0.4' now becomes the size for the smaller images around the circle menu, 'activeItemMenu' size is the same place as before, line 38, looks like this;

    Code:
    private var _activeItemScale:	                  Number	            = 0.8;

    great stuff

  11. #11
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    hi all

    continuing with the menu

    would anyone be able to help me and advise as to the best way of creating a simple rollover moveclip that is triggered when the mouse enters the images and somehow attach it to my rotating images?

    this is how I thought it would be possible, tell me if I am wrong;

    1. create animation movie clip in the library
    2. somehow attach this to the already rotating image menu.

    Yes?

    within my script, main.as I have a container that loads the images and it goes like this;

    Code:
    // Load images using standard Loader
    				var loader:Loader = new Loader();
    				
    				// Listen for complete so we can center the image
    				loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageComplete);
    				loader.load(new URLRequest(imagePath));
    			
    				// Create a container for the loader (image)
    				var holder:MovieClip = new MovieClip();
    				holder.addChild(loader);

    is there away to add the little animation from the library to this script, or is there a better way of doing this completely?

    the animation is just asimply an expanding white box that fades in and out when rollover, I have attached a jpg example of the rollover to give you a better idea.

    any thoughts?
    Attached Images Attached Images

  12. #12
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    am I basically loading in a movieclip from the library into an already existing container/loader??

  13. #13
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    will some help me how to get the correct script for addchild.

    from what I am reading this enables you to add a movieClip from the library and load it into and already existing container/holder....is this correct, and if so, would someone one help me with the script as I can't seem to get right.

    this is part of my script;
    Code:
    	private function onXMLComplete(event:Event):void
    		{
    			// Create an XML Object from loaded data
    			var data:XML = new XML(xmlLoader.data);
    			
    			// Now we can parse it
    			var images:XMLList = data.image;
    			
    			for(var i:int = 0; i < images.length(); i++)
    			{
    				// Get info from XML node
    				var imageName:String = images[i].@name;
    				var imagePath:String = images[i].@path;
    				var titles:String = images[i].@title;
    				var texts:String = images[i].@text;
    				
    			
    				
    				// Load images using standard Loader
    				var loader:Loader = new Loader();
    				
    				// Listen for complete so we can center the image
    				loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageComplete);
    				loader.load(new URLRequest(imagePath));
    			
    				// Create a container for the loader (image)
    				var holder:MovieClip = new MovieClip();
    				holder.addChild(loader);
    				
    				
    			
    				var tooltip:ToolTip = new ToolTip();
    				tooltip.field.text = titles;
    				tooltip.field2.text = texts;
    				
    				tooltip.x = -350;  // where to have the tooltip on x axis in the holder
    				tooltip.y = 0;    // where to have the tooltip on y axis in the holder
    				holder.addChild(tooltip);
    				
    				// Same proceedure as before
    				holder.buttonMode = true;
    				holder.addEventListener( MouseEvent.CLICK, onMenuItemClick );
    				
    				// Add it to the menu
    				circleMenu.addChild(holder);
    			}
    		}
    do I simply use something lilke

    holder.addChild(anim); 'anim' being the name of movieClip in library

  14. #14
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    anyone suggest the best way to add an animated movieclip to my menu images?

    whats the best way?

  15. #15
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    hi all

    I am a newbie to this, I have been told I need to break it down a little, to make clear, so this is what I am trying to do and what I have

    what trying to do
    basically, just trying to add a movieclip that will rotate around with the images that will animate when rolled over.


    what I a have done

    1.) created movieclip, which contains the animation, exported it out and gave a class name 'Anim' and base class name 'ItemMovie' (wasn't sure what base class was but for anyone a little confused as I was this is how you name it, simply drag your movieclip, onto stage, select it then name it in the instance property) you can then delete off stage. hope that helps us newbies


    N.B at present in my script I already have a contanier called 'holder' that loads i the images from the xml file, so what I did was attach the new movieclip 'anim' to the contanier 'holder'

    so now this is my script for loading in the new 'anim' movie



    Code:
    var ItemMovie:Anim = new Anim();
    
    //move the instance where ever
    holder.addChild(ItemMovie);
    				
    ItemMovie.H = 400;  // size of object
    ItemMovie.W = 400; 
    				
    ItemMovie.x = -350;  // where to have the tooltip on x axis in the holder
    ItemMovie.y = 0;
    with this the anim loads in and I am able to reposition using the x & y values.

    BUT THE H & W VALUES DO NOT WORK!!!!!

    that is now my problem. RESIZING THE ANIM


    could someone help with this little script, how to enable resizing of 'anim' movieclip

    I hope this has made things a little clearer!!!

    thank you for all your help

  16. #16
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    .....I found it


    I changed the values from


    Code:
    ItemMovie.H = 400;  
    ItemMovie.W = 400;

    to

    Code:
    ItemMovie.width = 300;
    ItemMovie.height = 300;
    yeah!!!!!!!

  17. #17
    Senior Member
    Join Date
    Jul 2009
    Posts
    167
    in re positioning the 'anim' movie clip, for some reason the selected image that centers now repositions a little up the stage and is no longer central, doh!


    any one now why???

  18. #18
    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?

  19. #19
    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

  20. #20
    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:

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