Groups | Blog | Home
all groups > flash actionscript > december 2005 >

flash actionscript : Rotation of compass objects on oblong path in response to user degree input


adetchells
12/26/2005 11:15:41 PM
PLEASE DON'T BE SCARED AWAY BY THE LENGTH OF THIS POST.

An explanation of the problem is followed by some possible solutions I've
developed.
Please feel free to ask for clarification...

-------------------------------------------------
I want the current heading in degrees to be translated to a sort of on screen
compass. The flash program would display the current heading at the top of an
oval path. There will be 8 directions that can be displayed (N, NE, E, SE, S,
SW, W, NW).

if the current compass direction is 45 deg., the flash program would display:

--------------------------------------------------------------------------------
---------------------

--------------------------------------------NE----------------------------------
------------------

--------------------N-----------------------^-------------------------E---------
------------------

--------------------------------------------------------------------------------
---------------------

--------------------------------------------------------------------------------
---------------------

--------NW----------------------------------------------------------------------
SE--------------

If the current reading was 23 degrees,

--------------------------------------------------------------------------------
---------------------

--------------------------------------------------------------------------------
---------------------

-----------------------------N--------------^-------------NE--------------------
-----------------

--------------------------------------------------------------------------------
---------------------

-------------NE---------------------------------------------------------------E-
------------------

--------------------------------------------------------------------------------
---------------------

-Is there a way to do this in actionscript?

-------------------------------------------------
One (utterly undesirable) solution would be to draw 359 separate images in
freehand or flash corresponding to the 359 possible compass headings (360 and 0
degrees are the same). Then enter transfer each to a separate level in a single
swf and program some actionscript so that only the level corresponding to the
current bearing is displayed.

This would obviously be an enourmous PITA, unless there would be some way to
automate the image creation process.
-Is there any way to automate this process?

-------------------------------------------------
Another method would be to use an oval path for the 8 text directions to
follow. This is even worse, as it requires manually setting the position of all
8 objects for the 359 possible headings. The possiblity of coding the position
of 8 objects a total of 3000 times is not a thought I cherish. Also, I would
eventually like to implement tic marks between the 8 directions.

The actionscript code I've read indicates you can rotate objects
programatticaly, but this only rotates them around their own axis.
-Is there a way to use actionscript to set the axis of rotation outside of the
object?

This also doesn't work, because text always needs to be oriented vertically.
-Is there some sort of 'revolve' command that maintains the vertical
orientation, kind of like a ferris wheel?

Even if I can set the axis of rotation and maintain vertical orientation, I'll
still have troubles. In my oval compass the distance of the axis of rotation
would have to vary as the object revolves (the radius isn't constant in an
oval).
-Is there a way to overcome this behavior? Can position on an oblong path be
specified via the projection of degree measurment?

-------------------------------------------------
Another possible method would be to essentially fake an oblong path and
actually just display a smaller portion of a larger circlur path, say from -45
to 45 degrees. Then use some sort of conversion to halve the degree measure for
bearings within 90 degrees of the current heading.

I can see some problems with this, in addition to the issue of vertical
orientation and a different axis of rotation already discussed above.
-Must rotation be specified in relative terms? Can the rotation be specified
in absolute terms?


kglad
12/26/2005 11:37:53 PM
i'm sure it can be done. i just don't understand what you want.

what's the "oval path"? is that just your compass display? like a
speedometer except the compass heading rotates and the needle is stationary?
adetchells
12/27/2005 12:26:33 AM
Exactly right about the speedometer but with a stationary needle part. Good way
to phrase the problem succinctly.

The 'oval path thing' is referring to the shape of the desired compass
display.

If it was a circular path, the a compass would look like the following:

--------------------------------------------------------------------------------
---------------------

---------------------------------------------N----------------------------------
-------------------

---------------------------------------------^----------------------------------
--------------------

-----------------------------NW------------------------NE-----------------------
----------------

--------------------------------------------------------------------------------
---------------------

--------------------------------------------------------------------------------
---------------------

-------------------------W------------------------------------E-----------------
-----------------


What I want to do is use a more oblong path. Essentially, this flattens the
above circular 'speedometer/compass thing' into an oval, like this:

--------------------------------------------------------------------------------
---------------------

---------------------------------------------N----------------------------------
------------------

---------------------------------------------^----------------------------------
--------------------

--------------------NW----------------------------------------------NE----------
---------------

--------------------------------------------------------------------------------
---------------------

--------------------------------------------------------------------------------
---------------------

-----------W--------------------------------------------------------------------
-E---------------
kglad
12/27/2005 2:09:52 AM
i still don't understand what's oval and what's round. here's a alpha version
to start with and add corrections:

http://www.gladstien.com/new/compass.fla

drag the compass needle around and the compass display at the top changes.
what is it about the compass display at the top that fits your needs and what
about it doesn't fit.
kglad
12/27/2005 5:26:52 AM
adetchells
12/27/2005 5:27:13 AM
That is so cool! Thanks!

A couple questions about how you did this...
The 'compass needle' object, how did you set it's point of rotation
(anchoring it at the base)? I don't see anything in the actionscript, did the
program just assume the axis would be the center of the image (denoted by the
cross)?

Is all actionscript contained in the a.s. layer, or is there something else
I'm missing?

How would I program an entry box to input the degree instead of using the
compass needle. I assume I'd go insert>new symbol...>button, advanced then type
in the actionscript class. What class is a user input box?

What does the atan2 function do?

About the '_ymouse' and '_xmouse'...
-Are these absolute or relative values?
-Are they relative to the position of the mouse when the listener 'lo' is
defined?
-What is the purpose of the subtraction operation here (120-ymouse, etc)?

My highschool calculus is a little fuzzy. Is the entire
'Math.atan2(120-_ymouse, 70-_xmouse)*180/Math.PI-90' a conversion from radians
to degrees?
If not what is it?

It seems clear that 'cn' in the code responds to the 'compass needle' object.
Where is this abbreviation set? I didn't find anything in the 'compass needle'
properties.

The if (r<0) {...} statement. It seems to me this is what switches whether the
majority of the compass object is on the left or right. Makes sense. Am I right?

Speaking of the compass object, how did you get a created object like 'Symbol
1' onto a layer, in our case 'compass'

The 'compass._x = compassX0-r*106/90' line. Tell me if this is correct.
compassX0 This is the position of the compass object when the actionscript
is first initialized.
r*106/90 This converts the degrees into position. 106 is the distance from
each cardinal direction (N,E,S,W). 90, since there is one of them every 90
degrees. Makes sense.

Regarding cn.onRelease = cn.onReleaseOutside=function () {...}
What is the significance of cn.onReleaseOutside=function? This stumped me.

Thanks for your help in answering all these questions about the program. I'll
let you know how I need to change this after I've figured out how the code thus
far actually works. Thanks!

lo = new Object();
lo.onMouseMove = function() {
var r = Math.atan2(120-_ymouse, 70-_xmouse)*180/Math.PI-90;
cn._rotation = r;
if (r<0) {
r += 360;
}
compass._x = compassX0-r*105/90;

};
compassX0 = compass._x;
cn.onPress = function() {
Mouse.addListener(lo);
};
cn.onRelease = cn.onReleaseOutside=function () {
Mouse.removeListener(lo);
};
adetchells
12/27/2005 7:15:04 AM
Basically NS's approach to the problem is what I was thinking of. Any idea what
the problem is with your code, though?
Also, can flash receive passed information from other programs? The eventual
application of this tinkering would be an in-car PC. The display would include
the compass (with some further enhancements), interior and exterior
temperatures, engine readings, MPG, current GPS coords and other info. These
discrete bits of information would then be assembled into a single screen. I
figured flash would able to handle any kind of animation I through at it, but
I'm wondering if my needs might be better suited by a legitimate language.
What are your thoughts? Might the performance overhead on flash be too much?
NSurveyor
12/27/2005 7:34:27 AM
Try my movie again (don't forget to clear cache!)

I haven't done trig yet, but I think I can answer some of your q's...

[quoted text, click to view]
compass needle. I assume I'd go insert>new symbol...>button, advanced then type
in the actionscript class. What class is a user input box?

You can use the Text Tool to draw a textfield, and then set its type to Input
Text and give it an instance name to be able to control it with actionscript.

[quoted text, click to view]

I *think* you can use it to determine the angle... like if you know where the
mouse is, you can determine the rotation for the compass.

About the '_ymouse' and '_xmouse'...
-Are these absolute or relative values?
-Are they relative to the position of the mouse when the listener 'lo' is
defined?
-What is the purpose of the subtraction operation here (120-ymouse, etc)?

If you have _root._xmouse, _root._ymouse they will be absolute values, just
using _xmouse, _ymouse will be the coordinates relative to the current timeline
(remember, _xmouse and _ymouse are properties of ALL MovieClips).
The subtraction I think has to do with using atan2. The 70,120 determines the
vertex of the angle... If you look in kglads sample, the bottom of the arrow is
at 70,120.

[quoted text, click to view]
'Math.atan2(120-_ymouse, 70-_xmouse)*180/Math.PI-90' a conversion from radians
to degrees?
If not what is it?

There are 2Pi radians in a circle (360 degrees), so radians*180/Math.PI will
convert to degrees. That is calculating the degrees to turn the compass.

[quoted text, click to view]
object. Where is this abbreviation set? I didn't find anything in the 'compass
needle' properties.

In order to control a symbol through actionscript, it has to have an Instance
Name. If you click on the arrow (after you unlock the layer - clicking on the
lock next to the "compass needle" layer) and open the Properties Panel, you
should see "cn" in the Instance Name box.

[quoted text, click to view]
the majority of the compass object is on the left or right. Makes sense. Am I
right?

I think that has something to do with the way atan2 works... if the angle is
less than 0, adding 360 will keep angle the same...

[quoted text, click to view]
'Symbol 1' onto a layer, in our case 'compass'
You can create a symbol, by either: 1. selecting something you've drawn and
going to Modify > Convert To Symbol or 2. Going to Insert > New Symol and then
make. This stuff is pretty basic...I suggest you look into the help files and
the getting started tutorials.

[quoted text, click to view]
What is the significance of cn.onReleaseOutside=function? This stumped me.

The onRelease event only occurs when you release the mouse (after onPress)
while the mouse is still ontop of the movieclip. If you notice when you run the
file, when you start dragging the compass, you can move the mouse away and keep
on dragging. If there wasn't onReleaseOutside, when you release the mouse, the
dragging would continue.
adetchells
12/27/2005 2:54:15 PM
Thanks! I still can't seem to get your movie working though, NS. Hmmm...How
would I go about emptying my cache?
Some more questions...

About the cn.onReleaseOutside thing, should have been more specific. What
actually perplexed me was exactly how the statment is parsed.
cn.onRelease = cn.onReleaseOutside=function () {...};

Basically my hold-up is why the cn.onRelease item is even in this line of
code. The movie also works with cn.onReleaseOutside=function () {...};
What gives, why the extra 'cn.onRelease = '?

[quoted text, click to view]
'Math.atan2(120-_ymouse, 70-_xmouse)*180/Math.PI-90' a conversion from radians
to degrees?
[quoted text, click to view]
convert to degrees. That is calculating the degrees to turn the compass.
I understand the conversion now, but what is the deal with the - 90? After
reading up on the help page for Math.atan2 it seems this is necessary because
atan2 measures the angle from the x-axis, but we want the angle in relation to
the y axis. Am I correct?

Thanks!
NSurveyor
12/27/2005 3:13:26 PM
If you use Internet Explorer, go to Tools > Internet Options. Click Delete
Files and hit OK. Then go to that link. For example, type in 45 in the
textfield, and then hit GO. The compass should spin to NE. Type in 23 and hit
GO; the compass should move to between N and NE.

http://www.geocities.com/swf7463/compass.html
http://www.geocities.com/swf7463/compass.fla
NSurveyor
12/27/2005 3:27:16 PM
onReleaseOutside is only triggered when you release while the mouse is not
ontop of the symbol. But, if you are dragging and you keep the mouse over the
red arrow for exampe and you release, onReleaseOutside won't be triggered, but
onRelease will. You see, if you don't have onRelease, releasing while the mouse
is ontop of the arrow will keep the arrow dragging.
kglad
12/27/2005 3:33:11 PM
the cn.onRelease=cn.onReleaseOutside applies the same function to both events.

Math.atan2(120-_ymouse, 70-_xmouse)*180/Math.PI-90;

there are a few things going on in the above statement. most have been
explained by ns, so here's some duplication:

ang=Math.atan2(120-_ymouse,70-_xmouse);

computes the arc tan (ie, angle in radians) between (x,y) = (120,70) (the
compass needle base location) and (_ymouse,_xmouse);

ang = ang*180/Math.PI

converts radians to degress (but this was unnecessary and mostly reflects my
comfort with degrees over radians).

ang = ang -90;

was done because flash uses a y-axis that's the opposite of a traditional
cartesian y-axis.
kglad
12/27/2005 3:34:36 PM
AddThis Social Bookmark Button