Rotating Menu ...continued

[donkey2009]

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

[Ned Murphy]

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

[donkey2009]

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

[donkey2009]

in doing those little changes I can't seem to change the scale value no matter what number values I change?

[Ned Murphy]

You kinda had me lost then...  I interprettedyour original post... "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."

as saying you don't want them to change size.

I'll look thru your latest posts, but after your first I can't be sure I will interpret what you really want correctly, so I won't be spending much time trying to figure it out.

[donkey2009]

Hi Ned

think we posted at the same time then.

sorry if it was'nt clear kind of difficult to explain.

let me try;

the menu rotates with lets say images being the size of 0.4,  when an image is selected it centers in the middle right(as it is doing)but then the image thats selected changes to a larger size of, lets say 0.8(just using sizes from the script circleMenu.as line 38 + 39)

does this explain it better?

[donkey2009]

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?

[Ned Murphy]

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.

[donkey2009]

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

was that explained better?

[donkey2009]

as it is at the moment with the tween in, it only show 3 images, I can't seem to get it to show all on menu, rather than it fading out, all hiding the other as it is doing at the moment?

[Ned Murphy]

Sorry, but it isn't any clearer to me, so maybe someone else will come along and be able to figure out what you want versus what you don't want.

[donkey2009]

ok

many thanks for your help

[donkey2009]

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

pleeezzzzzzzzzzzzzzzzz, any help with this little mission

[donkey2009]

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;

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

[donkey2009]

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.

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

[donkey2009]

ok, here we go, for anyone that is following this thread

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

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:)

[donkey2009]

Hi all

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

thanks for any helps!

[donkey2009]

ok, for people who are following . .

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;

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

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

- ( Math.abs(offset / (_maxOffset - 1)) * ( 1 - minVisibleScale ) );

and replace with this;

: 0.4

so the complete line should look like this

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;

private var _activeItemScale:                      Number                = 0.8;  

great stuff:crazy:

[donkey2009]

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;

// 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 simply  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?

[donkey2009]

see attached rollver example for a better idea of what I mean

[donkey2009]

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

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

[donkey2009]

.....I found it

I changed the values from

ItemMovie.H = 400; 
ItemMovie.W = 400;

to

ItemMovie.width = 300;
ItemMovie.height = 300;

yeah!!!!!!!:)

[donkey2009]

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!:crazy:

any one now why???

[donkey2009]

no, it appears that loading in the 'anim' movieclip this way distorts the menu, is there another way?

[donkey2009]

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;

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:confused: