Tween Woes
A Flash Developer Resource Site

Results 1 to 17 of 17

Thread: Tween Woes

  1. #1
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124

    Tween Woes

    I need a way to tween circles and arcs. How could you do that with as3 when you enter a start x and y, an end x and y, and a radius value? Thanks.

  2. #2
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    Look at the orbit function in this class: http://code.google.com/p/ooas/source...imator.as?r=19
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  3. #3
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Interesting, but is the distance supposed to be the radius? and how would I set and endX and endY position?

  4. #4
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    I tried those functions and can't get them to do anything.

  5. #5
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    are you trying to tween a line shaped in an arc or are you trying to tween something else along the path of an arc?

  6. #6
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    I'm trying to tween something else along an arc.

    Like say I have mc1.

    I want mc1 to start at point X:20, y:20, and arc with a radius of 50, to point x:80, y:80.

    I need something that would allow me to do that.

    I looked at the math, but can't seem to get it exactly.

  7. #7
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    Tweener and TweenMax both allow you to tween along a bezier curve...although those won't give you perfect semi-circles (read this).

    You could also set this up by hand using polar coordinates...moving around the origin on a radius of 50 would be xyPoint = Point.polar(50, angle); where angle is the tweened value, measured in radians.

  8. #8
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    I've been trying things like that with no luck. Could you show me an example? Thanks.

  9. #9
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    On the TweenMax page the first demo is a bezier example, just grab the line and drag to make an arc and then hit 'tween'...it will generate the code automatically.

    And here's a simple demo you can drop into an empty flash file to push a sprite around a circle:

    PHP Code:
    var s:Sprite addChild(new Sprite()) as Sprite;
    s.graphics.beginFill(0xFF6600);
    s.graphics.drawCircle(0012);

    var 
    currentAngle:Number 0;
    var 
    xyPoint:Point;

    addEventListener(Event.ENTER_FRAME, function(e:Event):void{
        
    xyPoint Point.polar(50currentAngle);
        
    currentAngle += .1;
        
    s.xyPoint.100;
        
    s.xyPoint.100;
    }); 

  10. #10
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    If you look at the home page of my site, I use something like the code I posted to move the clock along an arc. If I can find the FLA, I will post the code I used for that.

    http://visualflowdesigns.com/
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  11. #11
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Thanks, that really helps, but how would I tell it an end point? What's the math necessary to do all of this? Like say I used the code neznein9 posted, I have a start point, and an end point, which then I would determine the distance between the two points, and then I would have to find where to put the start point for the radius.

    And Kortex, thank you as well, I hope you don't mind but I did get a hold of some of the code you used on your site through a decompiler, although that's all I've done is take a look at it. I see what's you've done as well, although I still have the trig problem, or how to find a start point.

    I'll attach a picture for further clarification.

    Attached is a JPG called Circ. Known is the start Point, end point, radius, and distance between the start and end points expressed as a straight line. How do I find the unknowns shown in that image? If I can find that, I think I should be able to write a new method that will draw arcs perfectly.

    Thanks.
    Attached Images Attached Images

  12. #12
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    Oh I don't mind. Hell I post enough code there as it is so if you want to go through the effort of decompiling, you save me the trouble of having to track it down again.

    If you have enough time (and if you do, you need to evaluate your social life) when you let that animation go on my home page long enough, the moon resets itself back to its origin when it reaches the horizon on the right side of the tower, so I know I am doing a starting and ending point at least in that manner.

    So it is a kind slow half arc. Basically what you are doing for this is Trig (math). Since I don't gave my code in front of me, you are basically looking at the code that calculates the x and y coordinate differences and a variable called angle I believe. It is this calculation that gives you the point along the arc.
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  13. #13
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Here's your code:

    Code:
    // Action script...
    
    // [Action in Frame 1]
    function startSkills()
    {
        for (x = 0; x < skillList.length; x++)
        {
            skills_mc.duplicateMovieClip("s" + x, x + 1);
            this["s" + x].skills_txt.autoSize = true;
            this["s" + x].skills_txt.text = skillList[x];
            this["s" + x].dir = 1;
            skillsArray.push(this["s" + x]);
        } // end of for
    } // End of the function
    function tweenSkills()
    {
        trace ("Tweening skills " + skillsArray.length);
        var _loc2 = Math.round(Math.random() * (skillsArray.length - 1));
        skillsArray[_loc2]._x = Math.max(Math.random() * Stage.width - skillsArray[_loc2]._width, 0);
        skillsArray[_loc2].onEnterFrame = function ()
        {
            if (this._y > Stage.height + 75)
            {
                this._y = Stage.height;
                this.dir = this.dir * -1;
                this._x = Math.max(Math.random() * Stage.width - this._width, 0);
            }
            else if (this._y < -75)
            {
                this._y = -70;
                this.dir = this.dir * -1;
                this._x = Math.max(Math.random() * Stage.width - this._width, 0);
            } // end else if
            if (this._y > 0 && this._y < Stage.height)
            {
                this._alpha = Math.random() * 50 + 50;
            }
            else
            {
                this._alpha = 100;
            } // end else if
            this._y = this._y + this.dir;
        };
        skillsArray.splice(_loc2, 1);
        if (skillsArray.length == 0)
        {
            trace ("Clearing interval");
            clearInterval(st);
        } // end if
        trace (skillsArray);
    } // End of the function
    function moveMoon()
    {
        trace ("Moon");
        var _loc1 = deg2rad(moon_mc.ang);
        moon_mc._x = moon_mc.xc + moon_mc.rad * Math.cos(_loc1);
        moon_mc._y = moon_mc.yc + moon_mc.rad * Math.sin(_loc1);
        moon_mc.ang = moon_mc.ang + moon_mc.angC;
        moon_mc.ang = moon_mc.ang % 360;
        if (moon_mc.ang == 0)
        {
            moon_mc.ang = 175;
        } // end if
        trace (moon_mc.ang);
    } // End of the function
    function deg2rad(degree)
    {
        return (degree * 1.745329E-002);
    } // End of the function
    function updateClock()
    {
        var _loc1 = new Date();
        var _loc4 = _loc1.getHours();
        var _loc2 = _loc1.getMinutes();
        var _loc3 = _loc1.getSeconds();
        moon_mc.hh_mc._rotation = 30 * _loc4 + 30 * _loc2 / 60;
        moon_mc.mh_mc._rotation = 6 * _loc2 + 6 * _loc3 / 60;
        moon_mc.sh_mc._rotation = 6 * _loc3;
    } // End of the function
    function startOrbs()
    {
        var _loc4 = 1;
        var _loc3 = -1;
        for (x = 0; x < 20; x++)
        {
            _loc4 = _loc4 * -1;
            _loc3 = _loc3 * -1;
            orb_mc.duplicateMovieClip("orb" + x + "_mc", _root.getNextHighestDepth());
            _root["orb" + x + "_mc"]._x = Math.random() * Stage.width;
            _root["orb" + x + "_mc"]._y = Math.random() * Stage.height;
            _root["orb" + x + "_mc"].ydir = _loc4;
            _root["orb" + x + "_mc"].xdir = _loc3;
            _root["orb" + x + "_mc"].onEnterFrame = function ()
            {
                if (this._y > Stage.height + 75)
                {
                    this._y = Stage.height;
                    this.ydir = this.ydir * -1;
                }
                else if (this._y < -75)
                {
                    this._y = -70;
                    this.ydir = this.ydir * -1;
                } // end else if
                if (this._x > Stage.width + 75)
                {
                    this._x = Stage.width;
                    this.xdir = this.xdir * -1;
                }
                else if (this._x < -75)
                {
                    this._x = -70;
                    this.xdir = this.xdir * -1;
                } // end else if
                this._alpha = Math.random() * 75 + 25;
                this._y = this._y + this.ydir;
                this._x = this._x + this.xdir;
            };
        } // end of for
    } // End of the function
    var st;
    trace ("vfd main");
    var skillList = new Array("ActionScript", "HTML", "JavaScript", "CSS", "PHP", "jQuery", "Prototype", "XML", "MySql", "Postgresql", "Flex", "AIR");
    var skillNum = 0;
    var skillsArray = new Array();
    var dta = 50;
    var st;
    var ltin = new mx.transitions.Tween(welcome_mc, "_alpha", none, 100, 0, 5, true);
    ltin.onMotionFinished = function ()
    {
        startSkills();
        new mx.transitions.Tween(main_temple_mc, "_alpha", none, 0, 100, 2, true);
        new mx.transitions.Tween(l_mount_mc, "_alpha", none, 0, 100, 2, true);
        new mx.transitions.Tween(r_mount_mc, "_alpha", none, 0, 100, 2, true);
        new mx.transitions.Tween(water_mc, "_alpha", none, 0, 100, 2, true);
        new mx.transitions.Tween(moon_mc, "_alpha", none, 0, 100, 2, true);
        startOrbs();
        st = setInterval(tweenSkills, 5000);
    };
    moon_mc.xc = Stage.width / 2;
    moon_mc.yc = Stage.height;
    moon_mc.rad = 400;
    moon_mc.ang = 225;
    moon_mc.angC = 1;
    moveMoon();
    var orbit = setInterval(moveMoon, 8000);
    updateClock();
    setInterval(updateClock, 1000);
    Where exactly is everything set? I guess I'm just having a bit of a hard time seeing things just right.

    I can make things work, but only with angles in polar coordinates. I need it to be on a start and end X, Y plane, and that's where my troubles at.

    Could you explain this a bit more? Thanks.

    Also, if you'd like me to remove this post, let me k now and a I will, as I know it is your code.

    Thanks for sharing.

  14. #14
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    This would be the stuff from that, that you are interested in.

    function moveMoon()
    {
    //convert the angle value to a radian value
    var _loc1 = deg2rad(moon_mc.ang);
    //caclulate the x coordinate along the arc
    moon_mc._x = moon_mc.xc + moon_mc.rad * Math.cos(_loc1);
    //caclulate the xycoordinate along the arc
    moon_mc._y = moon_mc.yc + moon_mc.rad * Math.sin(_loc1);
    //update the angle variable using the incriment value for the next raound of calculations
    moon_mc.ang = moon_mc.ang + moon_mc.angC;
    //ensure that the angle variable stayes below 360.
    moon_mc.ang = moon_mc.ang % 360;

    //if the angle value of the clock has reached 0 or the 3 o clock positon along the arc, reset the position to llook like it is comming out of the horizon near the 9 o clock positon
    if (moon_mc.ang == 0)
    {
    moon_mc.ang = 175;
    } // end if
    trace (moon_mc.ang);
    } // End of the function
    //utilitly function for converting degree value to a radian value
    function deg2rad(degree)
    {
    return (degree * 1.745329E-002);
    } // End of the function
    //calculate a center point for which the arc will be calculated arround. This is the pivot point from which the distance and degree cacluation will stem from.
    moon_mc.xc = Stage.width / 2;
    moon_mc.yc = Stage.height;

    //radius, the distance from the calculated center point that the object should arc arround.
    moon_mc.rad = 400;
    //inital value for the angle. This determines starting location along the arc.
    moon_mc.ang = 225;
    //angle incriment value. This value gets added to the angle value on each update moving the object along the path. The higher the value the more it moves on each update.
    moon_mc.angC = 1;
    moveMoon();
    var orbit = setInterval(moveMoon, 8000);
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  15. #15
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Cool.

    Thanks.

    Okay, I've translated this into AS3, and only have a few questions.

    1. What variable holds the starting X and Y value, and what hold the ending X and Y values?

    2. I see where your calculating the center point, but how would I do that dynamically? Like say I have a starting point of X 20, and Y 20, and an end point of X 80, and Y 80, and want to make an arc between the two with a radius of 100. How would I calculate where the center point is? Thanks.

  16. #16
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    Have you looked into this?
    http://www.kirupa.com/forum/showthread.php?p=2336246

    Been playing with it and it may be simpler to start with this.
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  17. #17
    Senior Member jweeks123's Avatar
    Join Date
    Mar 2006
    Posts
    1,124
    Yeah, I've seen that before although, for what I'm doing the arcs must be precise and can not be done with beziers, so I'm unfortunately unable to use TweenMax or any of the other third party Tween classes out there, although I've done a bunch of math going as far as into Trigonometry, Algebra, Geometry and Calculus to an extent to write a method to make the arcs that I need based ont he information I have.

    I've come really close and I'm just bug checking now. I have the method written, my main issue now is how to tell the arc which way to render itself. Like I have a formula to find the center point, although it does find it, it's hard to make the arc start in one quadrant versus another.

    If you'd like to take a look, hit me up at jonathon.weeks@gmail.com and I'll send you a copy and you can let me know wha tyou think, because as far as I know, you still can not attach AS files on this forum, which I still find to be kinda wierd.

    Thanks though. And BTW, your code is what got me the heads up I needed to get where I am now. Just a few pieces missing to be where I want to be.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center

Poll by Flashkit.com