Tween Woes

[jweeks123]

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.

[kortex]

Look at the orbit function in this class: http://code.google.com/p/ooas/source...imator.as?r=19

[jweeks123]

Interesting, but is the distance supposed to be the radius? and how would I set and endX and endY position?

[jweeks123]

I tried those functions and can't get them to do anything.

[neznein9]

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?

[jweeks123]

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.

[neznein9]

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.

[jweeks123]

I've been trying things like that with no luck. Could you show me an example? Thanks.

[neznein9]

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(0, 0, 12);

var currentAngle:Number = 0;
var xyPoint:Point;

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


[kortex]

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/

[jweeks123]

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.

[kortex]

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.

[jweeks123]

Here's your 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.

[kortex]

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);

[jweeks123]

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.

[kortex]

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.

[jweeks123]

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.