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
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
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?
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?
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
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;
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.
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
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
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!
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 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.
Reply With Quote
