As a picture says a 1000s words please look at the attached file.
This is a nice file, congratulations.
hi
i’m not a script god but the only way i know of doing this without actionscript it’s by using guide layers,if you have a button thar represent de letters and put several instances of it on the stage you can do a tweening with guide layers,with script i can’t help you
Here is a point in the right direction.
http://www.kirupa.com/developer/mx/circular.htm
Just don’t make the radius and speed random.
What can I say?,
AWWW YOUR GOOD
YOUR GOOD YOU,
YOU, YOU GOT A GIFT.
I had a look at that tute and unless I didn’t understand it…
The circles are only having their X,Y position changed, not their rotation.
I need to have buttons within a movie upright at all times, even when the movie they are in, is rotating.
The way I figure,
I need to set up a movie… this will be told to rotate left or right on a button mouse over. (?)
I need to set up some additional buttons that are within this rotating moive so that they constantly check their rotation and set themself to 0deg (upright). However I am not sure exactly how to script this. (?)
Any help guys ?
I think the file that was attached was the easiest way to discribe it.
Here’s how I do it. It’s not the most efficient way because you need an additional MC for the button to “piggy-back” on. The idea is to rotate your buttons (your alphabet buttons in this case) the oppostite direction by the same amount as your big circle MC is rotating. Hope this helps:ub:
*Originally posted by bamb0006 *
**The circles are only having their X,Y position changed, not their rotation.
**
Well yeah, of course their x,y position is changed. You aren’t rotating them (as that would involve turning them as example 1 in your movie), you are moving them in a circular motion.
Yeah, I am moving them in a circular motion…
But, because they are in another movie clip that is rotating like in my picture, they rotate as well… hence my problem…
How to make them stay upright when they are being rotated by the movie they are in ?
I looked at your example… what can I say
Sweeeeeeet…
Now I that I have your example I hope I can put what I was trying together…
Thanks to all for your help as always !
Using only the Circular Motion tutorial to help me out (and ElectronGeek a bit too :P) I came up with this…
I won’t give you the source file, but I can teach you step by step what I did. That way you can learn how to do it.
Nice job,
I dont have much time on my hands with work and UNI so I haven’t had a chance to try make one myself.
I dont know how you made yours exactly, but what I was going to try.
Make your outer cirlce a clip. On mouse over the buttons tell it to rotate left or right. I dont know if using this…
*** _rotation+=5; ***
will provide smooth scrolling or just move it 5deg and stop.
Also for the mouse over I was going to address each button and have it rotated in the oposite direction buy the same amount. I carnt think of any other way of doing it. (that i could script)
I was also going to add a if statement to the buttons that rotate it. As I only want the buttons to scroll back and forth in the bottom half of the circle.
guess something like
onClipEvent (enterFrame) {
[MOUSE OVER LEFT BUTTON, SAY]
if(Circle_rotation < 90 && Circle _rotation < 270){
Circle_rotation+=5
Button1_rotation-=5
Button1_rotation-=5
}
I will be honest with you…
I have never read anything on flash scipt…
I dont know the difference between
onClipEvent (enterFrame)
onClipEvent (load)
Hell, I only have a faint idea on the concept of parents and how to address them.
Its the same with UNI and Java, since I never went to lectures, I couldn’t tell you jack about how it works, what a class is.
All I know is from guessing what I think might work and looking at examples. Its not hard for one to guess the diff between a string and a int.
So when I script, I can imagine what I want it to do, I can guess at how it would be scripted, but since I dont know the script well enough, I go through trial and error, or try to find something simialr that gives me a hint as to how to script it. When that dont work I POST for help.
There is a Macromedia MX book I have seen that I plain to buy and read oneday, when I get around to it, untill then I will just keep on slowly learning.
Any hints or pointers you toss my way, I would be thankfull for =)
What I am doing is making a flashsite/cd portfolio for my girlfriend who is a graphic designer.
Previously you helped me with that side scroller that would scroll left and right and stop on the edges… side scrollers are everywhere, and I wanna try be a little different.
So I was toying with the idea of the circle menu as I dont remember seeing it anywhere.
Instead of the 4 buttons, there will be 10 (say) but you can only see 5 in the bottom half of the circle at one time. Hence you scroll (rotate) to see the rest.
Clicking on the buttons would display the work in the center of the circle.
That is idea I am playing with, I dont have a layout or style yet. I am still thinking of ways to display the work.
Trying to be at least a little original !
Circle menus like these were very popular a while ago, but now its made way for sliding menus and such.
Ok, I will go over how I made my menu, and that will give you a base, then you can experiment with it from there.
<HR COLOR="#000000" SIZE=“2”>
First what I did was created a light grey circle on a layer. My circle is 233.5x233.5 px. I then proceeded to create a layer above that layer and drew a smaller dark grey circle that is 157.5x157.5 px. Keep in mind dimensions don’t matter, but with the script I will use later I am being precise since that is what my script works with. Now that we have the base shape of our menu we can continue with the components used within the menu.
Create a layer above the two circles. In this layer you will create a smaller circle. In my example it is light grey with a black border. And it is placed in the center of our main shape. You will need to convert this circle to a movie clip symbol (F8 for convert to symbol panel). After converting the item to a movie clip symbol you will need to select it and then open the properties panel (CTRL+F3) and you will see a textBox that says “Instane Name”. In there you will give it the instance name “alignmentClip” (no quotes). This clip is an integral part of the menu even though it is so tiny. What this clip will do later is actually provide the centerpoint of your menu for your buttons to rotate around. This will allow you to easily relocate your menu and have everything work out just fine.
Alright… you caught up now? If so, we can now create our buttons. I created another new layer to house all of my buttons. My buttons are actually just black circles with an orange number on them. They are 32.5x32.5 px in size. I then converted each of these individual buttons to movie clip symbols. It is important that these be movie clip symbols and NOT button symbols otherwise the code will not work. After converting them to movie clips you will have to give each clip a seperate instance name. I named my clips circleMC1, circleMC2, circleMC3, and circleMC4. You can name them whatever you want though. Also, where you put these buttons on the stage does not matter. I personally suggest somewhere off to the side of your stage so they don’t interfere with your view while you are editing your movie. The script later will automatically move them where they need to be.
After the buttons for the menu are created I created the buttons that control the direction on rollOver. These are just basic buttons. They can be button symbols or movie clips symbols, either will work in this specific situation for them.
Ok, so far I covered, basic layout shape, alignment clip, and buttons. That is basically it for things you actually have to draw.
Stay tuned for code 
Alright, time for the coding of this menu. Create a new layer and give it the name “actions” This is to let you know that you should only put actions on this frame to prevent confusion.
We click on the keyframe of this layer and we open the actions panel (F2). I am assuming your actions panel is set to Advanced Mode, where you can type in your code manually. The option to change it is in the upper right corner right under the “x” button.
The first bit of code we do is to define a variable that sets the direction. We will declare the variable “dir” (no quotes) and set its value to 0 (will be explained later).
var dir = 0;
Next we will need to create a function that makes our little circle buddies spin like they just chugged a case of beer or something :crazy: So right under the dir variable we will create our prototype function.
MovieClip.prototype.spin = function(rad, deg) {
var radian;
var radius = rad;
var speed = 5;
var degree = deg;
var xcenter = alignmentClip._x;
var ycenter = alignmentClip._y;
this.onEnterFrame = function() {
if (dir == -1) {
degree -= speed;
} else if (dir == 1) {
degree += speed;
}
radian = (degree/180)*Math.PI;
this._x = xcenter+Math.cos(radian)*radius;
this._y = ycenter-Math.sin(radian)*radius;
};
};
Alright, the first line there declares the prototype function called “spin”. You can read more about the differences of Functions and Prototypes by GOING HERE. And to further clarify, the main reason I used a prototype instead of a function is because I have the ability to use “this” inside, which isn’t available inside a typical function. You will notice inside my function I have 2 parameters… “rad” and “deg”, we will use this to define the radius and degree of rotation when we call on the function.
Alright, all caught up on prototypes and functions? Time to move onto what is inside that prototype. We will start with the group of variables…
var radian;
var radius = rad;
var speed = 5;
var degree = deg;
var xcenter = alignmentClip._x;
var ycenter = alignmentClip._y;
Alright, these are all explain in the circular motion tutorial (FOUND HERE) , but real quick…
radian = used in the equation later to convert from degrees to radians (important to do in Flash).
radius = Defines the radius distance of the circle which the clip will spin on. As you see it uses the variable “rad” (which is a parameter in our function) instead of a set number, this lets you change that on your clips if for any reason you need to. You can make this a set number if you want, but be sure to remove the parameter inside the function if you decide to do that.
speed = Well… the speed at which these little buggers move.
degree = define degree of rotation. This is important to have as a parameter in your function as all clips must follow a different degree of rotation otherwise your clips will all overlap eachother.
xcenter and ycenter = This is why the alignment clip was important. This gets the (x,y) position of the aligment clip and makes that the centerpoint of the clips orbit. Move that clip and your rotating circles will move too.
Alright. I think thats it for that 
Onto the dynamic event handler I used
this.onEnterFrame = function(){ }
This is what is known as a dynamic event handler. They are introduced in MX and quite a handy dandy little tool. They allow me to use an onClipEvent(enterFrame), but inside a frames actions instead of inside a movie clip symbols actions. You can read more up on Dynamic Event Handlers by GOING HERE.
Inside that dynamic event handler we have a few actions.
if (dir == -1) {
degree -= speed;
} else if (dir == 1) {
degree += speed;
}
radian = (degree/180)*Math.PI;
this._x = xcenter+Math.cos(radian)*radius;
this._y = ycenter-Math.sin(radian)*radius;
First I will explain the if statement. What this does is checks if the variable dir (which we are using to define direction) is equal to -1, then the clips are instructed to rotate clockwise, or else if the dir variable is equal to 1, then the clips will rotation counter clockwise. Now since we set the variable to 0 way in the beginning here neither of these statements are true, so the menu does not move at all.
Now we finally have the radian variable do something. This is where it actually converts degrees to radians.
The next two items just move the clip on the x and y axis in a circular motion using sin and cosine equations that use the xcenter and ycenter variables as their centerpoint of rotation.
Ok, now that I defined out direction variable, and wrote out our prototype it is time to actually get this puppy to work. Right underneight the prototype we will add more code to get this to work.
circleMC1.spin(98, 75);
circleMC2.spin(98, 50);
circleMC3.spin(98, 25);
circleMC4.spin(98, 0);
Now remember circleMC1, circleMC2, etc were our instance names of our movie clips acting as buttons. Well what this does is assigns the prototype spin to your movie clips so only those clips will spin. The 98 is the value of our “rad” parameter, and the 2nd number is our “deg” parameter. As you see our radius is 98 for all clips, but the degree is decreased by 25 for each clip down to 0 (last clip being at 0). What this does is basically spaces the clips apart, and in this case 25 seemed to be a good spacing number, but you can edit it however seems fit in your situation.
Now if you test your movie now, you will notice it still does not work. That is because our dir is still set to 0. We need to define the actions on our rollOver buttons to change the variables value.
On the button you will be using to rotation the clip clockwise use this code…
on (rollOver) {
_root.dir = -1;
}
on (rollOut) {
_root.dir = 0;
}
Is is pretty self explanitory, on RollOver it sets the variable “dir” in the _root timeline to -1, which in our code makes it go clockwise, then on rollOut it makes the dir value be 0, which stops the motion.
The code to make the circles move counter clockwise is basically the same, but with a positive 1.
on (rollOver) {
_root.dir = 1;
}
on (rollOut) {
_root.dir = 0;
}
Voila… we our done our circular menu.
But wait… how do you add actions to a movie clip acting as a button? Simple. Flash MX allows movie clip symbols to use on handlers just like a button. So you can do the typical on (release), on (rollOver), on (rollOut), etc on a movie clip symbol as well.
Have a ball experimenting.
[edit] Electrongeek drew the layout and provided the base code for me to work with… so thank him too if you use this method :)[/edit]
Thanks for that…
I dont know about having fun…
But I will have a good look at it…
Thanks for all that !
Oneday when I get her site done, I will mention that it would not have been posible without you… and link to your site…
Thats only if you think it is good enough to link to you…
It’s no problem If anything in the above tutorial confuses you, just let me know so I can elaborate on it more. I was afraid of using up my max characters amount for a post so I kept things short and to the point.
You don’t have to link to me. I don’t help people for links to my site. But if you want to, it is fine with me
