School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,406
  • Replies: 826,004
  • Topics: 137,453
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,589
  • Members: 116
  • Guests: 1,473

Welcome to Dream.In.Code
Become an Expert!

Join 300,406 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,589 people online right now. Registration is fast and FREE... Join Now!




Hover over the bubbles to find out why.

 

Hover over the bubbles to find out why.
redepoch7

26 May, 2009 - 07:54 PM
Post #1

New D.I.C Head
*

Joined: 23 May, 2009
Posts: 11
There is an ad on DIC that I saw for...

Dundas Chart7 for .net.

It has really neat little floating bubbles that float around attached to a string.

When you hover your cursor over them, they turn into squares (with rounded corners, of course!) and they tell you the information that the string is attached to.

Another thing that interests me is that the other bubbles react when you hover over a bubble. The others drift quickly away from the bubble you are hovering over.

How would I go about creating something like that?

Would there be some relationship between sinX or cosX and the bubbles ._x / ._y positions as they float?

I'm sure I can create tween from bubble to square but the rest seems fairly complicated (for me).

If you feel like helping me out, that would be great.

Thanks for your time!

This post has been edited by redepoch7: 26 May, 2009 - 08:10 PM

User is offlineProfile CardPM
+Quote Post


redepoch7

RE: Hover Over The Bubbles To Find Out Why.

30 May, 2009 - 04:47 PM
Post #2

New D.I.C Head
*

Joined: 23 May, 2009
Posts: 11
Ok,

So, no one commented so I did some experimenting and came up with this...

CODE

//initial variables and constants

theta = 0;

screenWidth = 550;
screenHeight = 400;
thetaChange = .05;


function moveBall() //basic motion of ball or bubble
{
    ball._x = 100*Math.cos(6*theta) + ((screenWidth-100) / 2);
    ball._y = 100*Math.sin(2*theta) + ((screenHeight-100) / 2);
    
}





ball.onEnterFrame = function()
{

moveBall();

if(theta == (8*Math.PI))
{theta = (0 + thetaChange)}
else
{theta+=thetaChange;}
}


This will be the floating bubbles basic paths while the mouse is NOT hovering over them.

MY QUESTION:

Could some one help me give the bubble a tail. This would just be a line from a fixed point to the bubbles _x and _y values at the other end.

As the bubble moves, one end of the tail would stay with it and the other (like I said) would stay at a fixed point.

Any help you could give would be awesome.

Thanks.
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: Hover Over The Bubbles To Find Out Why.

31 May, 2009 - 09:44 AM
Post #3

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
For the tail I wouldn't be suprised if they have each bubble with a blank movieclip called something like "tail" and as they float or just change position in general the bubble draws out a line from its center to a point.

I believe it would look something like so:

CODE

function drawTail(bubble:MovieClip, tail:MovieClip){
  tail.lineStyle(1, 0x000000, 100);
  tail.moveTo(bubble._x+bubble._width/2, bubble._y+bubble._height/2);
  tail.lineTo(x, y);
}


NOTE - I haven't tested this code, so it may not quite work. I have been using AS3 for a while now, so AS2 isn't as easy for me.

Hope that makes sense.
User is offlineProfile CardPM
+Quote Post

redepoch7

RE: Hover Over The Bubbles To Find Out Why.

31 May, 2009 - 01:04 PM
Post #4

New D.I.C Head
*

Joined: 23 May, 2009
Posts: 11
Sweet!

I used this...
CODE
function fDrawLine()
{
   this.createEmptyMovieClip("myLine", -100);

   myLine.lineStyle(2, 0x000000, 100);
   myLine.moveTo((ball._x+50), (ball._y+50));
   myLine.lineTo(0, 0);
}


It works pretty good. Has one fixed point at the origin (0,0). and the other is connected to the ball.

And yes I am using AS2. I wish I had better but unfortunately. This is what I have.

Thanks for the help.

QUESTION:

Do you need to create a separate movie clip for each line you want to draw???

Thanks again.
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: Hover Over The Bubbles To Find Out Why.

31 May, 2009 - 05:39 PM
Post #5

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
QUOTE
Do you need to create a separate movie clip for each line you want to draw???

You could do that, or you could draw them all in one movieclip (probably easier, but may be problematic... not sure...).

I would probably just go through with a single movieclip. It sounds like it would be easier (could be wrong though).

Don't worry about not having AS3, it isn't all that much better, just has a few good additions and a lot of extra crap.
User is offlineProfile CardPM
+Quote Post

redepoch7

RE: Hover Over The Bubbles To Find Out Why.

2 Jun, 2009 - 06:15 PM
Post #6

New D.I.C Head
*

Joined: 23 May, 2009
Posts: 11
Ok, so now I have my lines that I want to draw but I want them to be under the movie clip they are following.

Do I use the swapDepth() ? ? ?

Could you explain how it will work. I tried it and the whole movie crashed.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/7/09 11:04PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month