Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member tibberous's Avatar
    Join Date
    Aug 2003
    Posts
    195
    Member #
    2535
    This is a basic tutorial that will let you make a space scene link the one here. More importantly it will show how to calculate circular motion paths and use trig in programming, as well as being good practice at action script. This tutorial assumes a basic knowledge of Flash MX and Action Script, and requires Flash MX. This will be done in a series of posts, please do not post until I am done.

    So, letís begin. To start we will need a 400x400 stage and 2 planets, one 50 x 50, one 160 x 160.



    Once the planets are drawn, convert them to graphics (select the symbol, right click, go to 'convert to symbol') When the conversion window appears, you can name them whatever you want. Set the behavior to graphic and set registration to the center one, as shown in the picture.



    As a finishing touch, set the stages color to black. You can add stars or anything else you like in the background.



    Now, the small planet is going to rotate around the large planet. The small planet will be moved with action script but the large planet will be stationary, so go ahead an move it to the center of the stage (X = 120, Y = 120).

  2.  

  3. #2
    Senior Member tibberous's Avatar
    Join Date
    Aug 2003
    Posts
    195
    Member #
    2535
    Now, we need to keep track of time as the program runs. Start off by creating a variable to store the time. This should be placed in the actions for the first frame.

    _root._t = 0;

    Now, the bulk of the code will be placed in the enter frame event of the small planet. The enter frame event is called x times a second, where x is the frame rate of the movie. Before clip events can be given, the symbol behavior must be changed to Movie Clip.



    Once that is done, the selection can have actions applied to it. Add the following code.

    PHP Code:
    onClipEvent(enterFrame){
     
    _root._t ++;

    This will basically add 1 to time everything the frame is entered. This will be useful later on.

    Before we go into coding motion, lets first look at this diagram.



    The red dot is the large planet; the green dot is the small one. Now, h and w are the height and width between the 2 points, and r is the radius, which in our case is 150. The last value is t, which is time. Notice that as t changes, the height and width change, and the radius stays the same. Also notice that everything comes together to form a right triangle, and that its angles are 90, t and (90-t).

    Now, we are going to need to find the x and y coords for our small planet. Before we do that, lets give it an instance name so we can refer to it better. It can be anything, for the tutorial we will call it mars.



    Alright, now we can refer to it as _root.mars. Also, give the other planet a name. For the tutorial, it will be called sun.

    It is important to realize that the angle t (see the diagram) is dependent on time. Since an angle cannot be bigger than 360 degrees, add this line right after the _root._t++ line.

    PHP Code:
    if(_root._t 360)
    _root._t 0
    Alright, now for some planet moving!

    Flash functions want radians though, not degrees. The first line we need:

    PHP Code:
    var radians _root._t * (Math.PI/180); 
    Will convert our degrees into radians. With this we can find the x and y coords of our planet. The formulas is:

    _root.mars._x = offset + Math.cos(radians) * radius;
    _root.mars._y = offset + Math.sin(radians) * radius;

    So, our code will read:

    PHP Code:
    _root.mars._x 200 Math.cos(radians) * 150;
    _root.mars._y 200 Math.sin(radians) * 150
    And there you have it! Press ctrl+enter to see your planet rotate around the other planet. Stay turned for the exciting 3rd part of the series when we will discuss how to change the size, make the path elliptical and make the planets swap depths.

  4. #3
    Senior Member tibberous's Avatar
    Join Date
    Aug 2003
    Posts
    195
    Member #
    2535
    The first thing we need to do now is make the path more elliptical, this gives the impression we are looking from the side rather than top down. This is quite easy to change, just lower the vertical radius. So, replace the line:

    PHP Code:
    _root.mars._y 200 Math.sin(radians) * 150
    With:

    PHP Code:
    _root.mars._y 200 Math.sin(radians) * 50
    Press ctrl+enter to check out the changes.

    You should notice an error, as the rotating planet is always behind the stationary planet. What we need to do is store whether the rotating planet is on the top or bottom. So, in the main frame, add the line:

    PHP Code:
    _root.mars._onTop false
    Now, here is the next bit of code.

    PHP Code:
    if(_root.mars._x _root.mars._last && !_root.mars._onTop){
     
    _root.mars.swapDepths(_root.sun);
     
    _root.mars._onTop true;
    }
    if(
    _root.mars._x _root.mars._last && _root.mars._onTop){
     
    _root.mars.swapDepths(_root.sun);
     
    _root.mars._onTop false;
    }

    _root.mars._last _root.mars._x
    It is a little confusing but basically what it does is this. It stores the last place x was, then compares it to where x is this time. If x changes direction, it swaps depths and changes the _onTop property.

    Almost done! Next we need to change the size of the planet. To do this we will find the distance of the planet from the center. When the planet is close to the center, it is either going to be very large or very small. As it moves away from the center it will be closer to the base size. So, lets first find the offset:

    PHP Code:
    var offset = (182-(Math.sqrt(Math.pow(_root.mars._x-2002)+Math.pow(_root.mars._y-2002)))) / 5
    182 is the farthest it can be away from the center, so the greater the distance away, the small the offset. The bulk of the code (Math.sqrt(Math.pow(_root.mars._x-200, 2)+Math.pow(_root.mars._y-200, 2))) is just the distance formula. Remember, the distance formula is:

    D = sqrt ( (X1 - X2)^2 + (Y1 - Y2)^2 )

    It is divided by 4 at the end to make the results less extreme. To increase the illusion of depth, the number can be lowered.

    So, now we have our offset, but what we do with it depends on whether our planet is on top or on bottom. This line will add it to the height and width if _onTop is true, subtract it if false. Notice that the 50 in this line in the base size of the object.

    PHP Code:
    _root.mars._height _root.mars._width _root.mars._onTop 50 offset 50 offset
    Note : this formula does have a slight error, as size should increase more towards the outside. Works good enough, feel free to suggest better formulas.

    The last thing left is to add a diagonal slant to the orbit path. To do this, just add (Math.cos(radians) * 100) to the y coord. This way when the planet in on the left side, it is higher than on the right.

    Anyway, that is basically it. Feel free to add space ships, asteroids, collision detection, whatever. Feel free to ask any questions or comments. Please realize this was my first tutorial, so, be nice Also, would anyone be interested in a tutorial on dynamically creating objects and making a particle engine? How about making and using sounds? Simple collision detection?


    Anyway, that is it, download the fla file for a final version.

    Trent

  5. #4
    Senior Member tibberous's Avatar
    Join Date
    Aug 2003
    Posts
    195
    Member #
    2535
    Final Version

    Here is the final product.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Awesome tutorial, man... good primer for those who've wanted to get started with ActionScript.

    I altered your planets slightly and changed the frames per second to 30 and came up with this:

  7. #6
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Cool
    JR

  8. #7
    Senior Member tibberous's Avatar
    Join Date
    Aug 2003
    Posts
    195
    Member #
    2535
    ...

    Transio's version is a lot better than mine! The framerate could mess it up on slower computers but the planets are wholly better. Transio, don't suppose I could use them for my site? Please?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com