10 Replies Latest reply on Dec 16, 2012 3:31 PM by sinious

    Placing 8 objects on stage in a circle

    saratogacoach Level 1

      Hi,

       

      Need some help placing 8 150X150 circles on stage at equidistant locations around a larger circle (644X644, line width 4, centered on stage). Stage is 750X750.

       

      This is not dynamically drawn in runtime. Simply getting the correct coordinates for the 8 circle objects to place them around the 644X644 circle.

       

      Have tried to do it with snapping, grid, by rough estimate, all with poor results. There must be a better way to determine the correct coordinates.

       

      Any help appreciated.

       

      Regards,

        • 1. Re: Placing 8 objects on stage in a circle
          kglad Adobe Community Professional & MVP

          :

          the ith circle (i=0,..,7) should have its center at:

           

          x=322+322*Math.cos(i*Math.PI/4)

          y=322+322*Math.sin(i*Math.PI/4)

          • 2. Re: Placing 8 objects on stage in a circle
            saratogacoach Level 1

            Hi kglad,

             

            Thanks for your reply. Been a while since math classes, so I'm not sure how to use this. Is it a script (AS3) or a formula to calculate the X,Y coordinates for each of the 8 circles?

             

            I don't need to draw and place them dynamically. Simply add each in a circular pattern around the circular ring on the stage as a design. The circle objects already have been manually added to the stage, each instance named, and are scripted in the animation. They are just not quite in the correct places.

            • 3. Re: Placing 8 objects on stage in a circle
              kglad Adobe Community Professional & MVP

              i wrote the formulas in as3 but you don't need to use as3.  just look up those values (cos and sin) in a trig table and do the arithmetic.

              1 person found this helpful
              • 4. Re: Placing 8 objects on stage in a circle
                sinious Most Valuable Participant

                Even though you want to do it by hand you really should just use code, it's far more precise.

                 

                Here's an example demoing Kglads code that should help you understand how it works. All you have to do is modify what is being positioned in the loop. I'm generating a small black circle just for example.

                 

                Open a new AS3 doc and paste this in frame 1's script:

                 

                import flash.display.Sprite;

                 

                var xCenter:int = int(stage.stageWidth / 2);

                var yCenter:int = int(stage.stageHeight / 2);

                var cirRadius:int = 100;

                 

                for (var i:int = 0; i < 8; i++)

                {

                    // generating a black circle

                    var c:Sprite = new Sprite();

                    c.graphics.beginFill(0x0,1);

                    c.graphics.drawCircle(-10,-10,10);

                    c.graphics.endFill();

                    addChild(c);

                 

                    c.x = xCenter + cirRadius * Math.cos(i*Math.PI/4)

                    c.y = yCenter + cirRadius * Math.sin(i*Math.PI/4)

                }

                 

                For you, you can keep an array of references to objects you want to position and use that. The code would change like this (expecting these objects to be on the stage, item_1, item_2, etc):

                 

                var xCenter:int = int(stage.stageWidth / 2);

                var yCenter:int = int(stage.stageHeight / 2);

                var cirRadius:int = 100;

                 

                // array of objects to reposition (must be on stage, change names to what you want)

                var objs:Array = [item_1, item_2, item_3, item_4, item_5, item_6, item_7, item_8];

                 

                for (var i:int = 0; i < 8; i++)

                {

                    objs[i].x = xCenter + cirRadius * Math.cos(i*Math.PI/4)

                    objs[i].y = yCenter + cirRadius * Math.sin(i*Math.PI/4)

                }

                 

                 

                If you want to specify the angles around the circle yourself, make another array with those:

                 

                var xCenter:int = int(stage.stageWidth / 2);

                var yCenter:int = int(stage.stageHeight / 2);

                var cirRadius:int = 100;

                 

                // array of objects to reposition (must be on stage, change names to what you want)

                var objs:Array = [item_1, item_2, item_3, item_4, item_5, item_6, item_7, item_8];

                 

                // angles of each item desired

                var desiredAngles:Array = [0,45,90,135,180,225,270,315];

                 

                for (var i:int = 0; i < 8; i++)

                {

                    objs[i].x = xCenter + cirRadius * Math.cos(desiredAngles[i] * (Math.PI/180));

                    objs[i].y = yCenter + cirRadius * Math.sin(desiredAngles[i] * (Math.PI/180));

                }

                 

                You don't need to loop over the objects, you can manually write each one if you want if that's easier of course..

                 

                // circles center at 300px, 100px radius, angle 90

                someClip_mc.x = 300 + 100 * Math.cos(90 * (Math.PI/180));

                someClip_mc.y = 300 + 100 * Math.sin(90 * (Math.PI/180));

                1 person found this helpful
                • 5. Re: Placing 8 objects on stage in a circle
                  saratogacoach Level 1

                  Hi kglad and sinious,

                   

                  Thank you for these suggestions. I am trying to clean up a project that is already working well  after much scripting effort and help. Rather than add to the script by dynamically craeting these circles, I think that it would be better for the project and my limited skills if I simply place these 8 circles equidistantly on the circular ring.

                   

                  I probably will need to first go into Illustrator, build a model with the  AI drawing features, then use it as a template for the Flash stage. (I can see already that a 644X644 ring on a 750X750 stage will be too big to place the circle objects without their going off stage. So will probably need to redesign the ring at something like 600X600.)

                   

                  Thank you for these suggestions which I will save for further use.

                   

                  Kind Regards,

                  • 6. Re: Placing 8 objects on stage in a circle
                    sinious Most Valuable Participant

                    To re-iterate my last bit of code, it's really easy to programmatically solve your issue in a simple frame script.

                     

                    Go to the frame you have the 8 objects on. Add a layer for code if you don't already have one. Add a blank keyframe in the code layer right on the frame you want the position all 8 clips.

                     

                    Now all you need to know is the instance names of the clips, (e.g. myclip_1 for my example)

                     

                    Decide how big you want your circle (you said 644x644 was too large, lets assume 600 just for fun).

                     

                    The radius is half the diameter, so half of 600 is 300.

                     

                    Now decide how many pixels from the center of the circle to extend out. Let's say 250px.

                     

                    Lastly pick the angle to add it at. In AS3, 0 degrees is at 3:00 on a clock. I'll choose an angle of 120 degrees.

                     

                    So 300px radius, 250px out from the center and at the 120 degree angle.

                    myclip_1.x = 300 + 250 * Math.cos(120 * (Math.PI/180));

                    myclip_1.y = 300 + 250 * Math.sin(120 * (Math.PI/180));

                     

                    Paste that code in once for each object you want to position. So paste it in 7 more times, changing the instance name and the angle. That's pretty easy.

                     

                    If you have 8 clips then you paste that code 8 times all you need to change is the angle (120) to the angles you'd like objects to appear in. Now your objects are absolutely perfectly positioned.

                     

                    There's 360 degrees in a circle so the power in this is if you want to change the numbers of objects just divide 360 the number of objects by 360 to get perfectly equal angles. e.g. 6 objects then  360 divided by 6 = 60 degrees between each object. So angles could be 0, 60, 120, 180, 240, 300.. Same thing for 12 objects, or 20, or 50..

                    1 person found this helpful
                    • 7. Re: Placing 8 objects on stage in a circle
                      kglad Adobe Community Professional & MVP

                      again, you don't need to use actionscript and you don't need to position/place those circles dynamically.  here are the coordinates of your 8 circles obtained by doing that arithmetic for you:

                       

                       

                        x  |  y

                       

                      644 | 322

                      549.65  |  549.65

                      322  |  644

                      94.3 | 549.65

                      0 |  322

                      94.3 |  94.3

                      321.95 |  0

                      549.65 |   94.3

                      1 person found this helpful
                      • 8. Re: Placing 8 objects on stage in a circle
                        saratogacoach Level 1

                        Thanks to kglad and sinious.

                         

                        I will try the script to see if I can adapt it. Having the hard-coded X,Y coordinates available is helpful in case I can't figure it out.

                         

                        Regards,

                        • 9. Re: Placing 8 objects on stage in a circle
                          kglad Adobe Community Professional & MVP

                          you're welcome.

                          • 10. Re: Placing 8 objects on stage in a circle
                            sinious Most Valuable Participant

                            You're welcome and good luck!