Webmaster Forum / Flash / Flash Actionscript / July 2005

First, create a movieclip and draw a circle in it. Give it the instance name,
myCircle. Then create a movieclip, to act as the "pins". (Don't put it on the
stage though). Now open the library, right click your pin, and select linkage.
Check off Export for ActionScript. Type in myPoint as identifier. Finally add
this script to the frame that holds your circle:

circle = myCircle;
pointer = 'myPoint';
years = 4;
dates = [
        new Date(2004,9,10),
        new Date(2005,1,12),
        new Date(2003,9,2),
        new Date(),
        new Date(2004,4,21)
        ]

counter = 0;
today = new Date();
edge = new
Date(today.getFullYear()+4,today.getMonth(),today.getDate(),today.getHours(),tod
ay.getMinutes(),today.getSeconds(),today.getMilliseconds())
pdates = dates.slice(0);
plotter = setInterval(plotPoints,100);
function plotPoints(){
    var cIndex = random(pdates.length);
    var cDate = pdates[cIndex];
    pdates.splice(cIndex,1);
    var percentage =
(today.getTime()-cDate.getTime())/(today.getTime()-edge.getTime());
    var dist = circle._width/2*percentage;
    var angle = random(360);
    var rads = angle/(Math.PI/180);
    var sin = Math.sin(rads);
    var cos = Math.cos(rads);
    var y = sin*dist;
    var x = cos*dist;
    var centerX =
(circle.getBounds(circle._parent).xMin+circle.getBounds(circle._parent).xMax)/2
    var centerY =
(circle.getBounds(circle._parent).yMin+circle.getBounds(circle._parent).yMax)/2
    cPoint =
circle._parent.attachMovie(pointer,'point'+(++counter),circle._parent.getNextHig
hestDepth(),{_x:centerX+x,_y:centerY+y,date:cDate});
    cPoint.onRollOver = function(){

        _root.createTextField('tooltip',_root.getNextHighestDepth(),_root._xmouse,_roo
t._ymouse,0,0);
        _root.tooltip.border = true;
        _root.tooltip.background = true;
        _root.tooltip.backgroundColor = 0xFFFFCC;
        _root.tooltip.selectable = false;
        _root.tooltip.autoSize = 'left';
        _root.tooltip.text = this.date;
        cPoint.onEnterFrame = function(){
            _root.tooltip._y = _root._ymouse-_root.tooltip._height;
            _root.tooltip._x = _root._xmouse;
            updateAfterEvent();
        }
    }
    cPoint.onRollOut = function(){
        _root.tooltip.removeTextField();
        delete this.onEnterFrame;
    }
    if(pdates.length==0){
        clearInterval(plotter);
    }
}

Is that the kind of effect you want?

I'm really quite interested in this project. I have a few questions. Since you
are plotting in two dimensions - distance from center and rotation around the
circle ? what is the other dimension for? Or is it just to look pretty?  I also
have a couple of suggestions ? none of which I have worked through, so they
might not be helpful. I might look at recentering the myCircle clip. That
should make the math easier. You would just use polar coordinates ? radius for
time and angle for whatever that is for.  Also in the tool tip part of the
code, NSurveyor, I don't think you need the updateAfterEvent. Since that code
is in an onEnterFrame it will only be executed once every frame and will be
redrawn anyways.  Also I would redesign this in two ways. One I would get rid
of all the _root references, if you try and load this into another swf or move
it from one file to another (and it seems like something you might want to
reuse) you will probably have difficulties.  Finally the points are not being
added inside the circle movie clip. If you attach them inside the clip you will
then be able to move, scale, hide, fade, etc. the circle and all the clips
inside it.  Oh yeah and one last thought, time closer to the present will have
less area to receive plots, whereas time in the distant past will be a lot more
spread out. So if you expect to have a lot more points in more recent times you
might want to turn that around and have the outer ring indicate today and the
center indicate the past.

Glad to hear there?s a little interest, maybe I can get some good ideas if I
explain it a bit.  It?s really pretty simple what we?re looking to accomplish.  
We have 3 groups in my organization that works on ?technology? projects within
the firm.

1.    Group 1 - Finds it, studies it and does all the prelim researching. Such as
watching Windows XP and determining when is the best time to switch the firm
over.
2.    Group 2 - does the work of making Windows XP firm compliant with all the
necessary security, software, etc.
3.    Group 3 ? deploys the job and follows it for some time afterwards.

What we?re building is basically a ?radar? view of the projects for each of
the 3 groups plus an overall view (a project timeline).  Like I said, it?s a
pretty basic thing that we wanted to take one step further with Flash.  We need
to show when projects will be looked at (group 1 may not get to one for 2 to 3
years), where they are in the process once they start, and when handoff to the
next group will take place.  So that?s really it in a nutshell.  We started
with an idea for just a straight timeline, but realized it was too linear.  We
have been using the term radar, for what projects are on the radar, (in sight)
so we took it to the literal sense.

You brought up a good point about the closer you get to the center the more
condensed the points will be.  That?s one reason for bringing ?today?s date?
out about half way.  We also need to show the overflow ?handoff? which could
spill into the other groups radar, so that?s another reason to push the dates
out.

I have taken and added the code, for now, into another movieClip so I can do
all the scaling and what-have-yous.  Being able to scale this is pretty vital
giving the grouping that may take place in the center.

I kind of remember this. Glad it has finally moved forward for you. I guess
before I can really help I would need to understand what you are trying to do
again.

So distance from the center is time, but I'm not understanding what the angle
or rotation will represent. So for  each of the 4 phases it should be
restricted to a 90 degree wedge or do different phases take up a different
amount of the pie.

Also the example you provided seems to be reflecting a geographic reality,
which really makes sense to display on a plane. But yours seems to be 4
timelines. A one dimensional plot seems to make more sense here, but maybe I'm
missing something. If you randomly place the points in the circle (or a wedge)
what does that randomness represent?

Well if you randomly place them. Just change it so the angle is randomly
between 0 and 90. You will also have to keep track of which of the 4 tracks
something is in. You would then multiply the angle by the number of the track.

If you have very many points or they will often need to be updated, you will
probably want to load this from an XML file. You can then either use the XML
class to get at the data. I've found working with the XML class a bit clunky,
so I prefer to take the XML data and parse it once into some custom objects.

If you follow this idea you could count up how many points there were for each
track. You could then have each track start at one of the cardinal points and
each additional point move a proportional fraction of the 90 degree wedge. This
could make some nice looking spiral galaxy type of plots.