Expanding Circle Tween - Simple?!

[Bowser]

I'm trying to do something in flash that seems like it should be ridiculously simple, but I can't wrap my head around it:

I can figure out how to rotate a shape along an axis, but I want to be able to expand it along an axis.

For example, a line that expands clockwise into a pie wedge...getting bigger and bigger and until it's a half-circle and then a full circle.... should be easy right?

And by extension, it should be possible to have a dot expanding radially until it becomes a ring?

[Xeef]

hi and welcome to As.org

Hmmmm not sure i understand you ?

try this :


R = 0;
S = 0;
E = 360;
onEnterFrame = function () {
if (R<50) {
DotRing();
}
if (R<100 && R>=50) {
Pie();
}
if (E == S) {
S = 0;
E = 360;
R = 0;
}
};
function DotRing() {
_root.clear();
_root.lineStyle(1, 0, 100);
R++;
for (a=0; a<361; a++) {
X = Math.cos(a*Math.PI/180)*R+Stage.width/2;
Y = Math.sin(a*Math.PI/180)*R+Stage.height/2;
if (!a) {
_root.moveTo(X, Y);
} else {
_root.lineTo(X, Y);
}
}
}
function Pie() {
_root.clear();
_root.lineStyle(1, 0, 100);
_root.moveTo(Stage.width/2, Stage.height/2);
for (a=S; a<E; a++) {
X = Math.cos(a*Math.PI/180)*R+Stage.width/2;
Y = Math.sin(a*Math.PI/180)*R+Stage.height/2;
_root.lineTo(X, Y);
}
_root.lineTo(Stage.width/2, Stage.height/2);
E--;
S++;
}

[Bowser]

Wow... that was very nice.... but it's so complicated!

It seems like such a simple thing to do, I was wondering if it weren't possible to make on the stage... I like actionscript, and I use it for alot of things myself, but it's getting hard to develop with it without being able to see and change how things look as I go...


I can give you an example of the effect I'm looking for...

http://www.exopolis.com/sites/mccann/hitachi/

go to Skip Intro --> Cleaner --> Click of any of the "Play Buttons" on the screen.


When the "Play Buttons" animate, there are a couple of "rings" that animate to expand along their circumference(not expanding outward). The most noticeable is on the lower-right corner of text boxes that pop up. It animates to essentially provide an outer white stroke around the circular bitmap that expands into place (hopefully this will be enough explanation to see what I'm talking about). It's this effect I'm trying to reproduce. Can this be done without actionscript (or at least without as much)?

[Xeef]

i not realy in to timeline animation !

but you shoud by abel to do it

simply animating the hole thing (whit keyframes)
onRollOver you play it onrollOut you play it revers

[samroni]

i not realy in to timeline animation !

but you shoud by abel to do it

simply animating the hole thing (whit keyframes)
onRollOver you play it onrollOut you play it revers

i believe, this is what youre looking for

its called easing... check window properties when you click frame with motiontween on it

[Bowser]

i believe, this is what youre looking for

its called easing... check window properties when you click frame with motiontween on it

Nono... easing isn't the effect I'm looking for. Those circles expand outward along the radius. I'm talking about circles that expand along the circumference.

The site I linked to has both, so it's hard to see - I made a still of the part with the effect I'm looking for:

http://users.adelphia.net/~wplummer/circle.jpg

It's not a circle per se, but a line that describes itself along a circle. However I was also hoping the effect could also be used to create a circle (as opposed to a ring), by expanding the effect towards it's center.

Any ideas?

[samroni]

Nono... easing isn't the effect I'm looking for. Those circles expand outward along the radius. I'm talking about circles that expand along the circumference.

The site I linked to has both, so it's hard to see - I made a still of the part with the effect I'm looking for:

http://users.adelphia.net/~wplummer/circle.jpg

It's not a circle per se, but a line that describes itself along a circle. However I was also hoping the effect could also be used to create a circle (as opposed to a ring), by expanding the effect towards it's center.

Any ideas?


i see.. that simply use masking...

goodluck :)

[Bowser]

i see.. that simply use masking...

goodluck :)


Masking how??

Try it - it's not as easy as it looks.
The mask would have to expand along the circumference.
It's that motion that I'm trying to achieve. The masking I
already know how to do.

[mrNewt]

Hmmm ... looks to me that is nothing else but an animation effect. The circles are not complete - is more like a semicircle.

So what I would do to have that effect ... :

- draw a circle with an white edge - delete the "content" of it
- delete part of the edge, to have it as a semircle and make it a movie clip

You will notice that the line is starts "to grow" from the white background of the text box. So, you could very easilly put your line circle on top of the white background (so you can't see it) and then rotate it. That will give you that nice "growing" effect.
Nice, simple and no masking. The only coding you will need is for stoping the animation once is touching the other edge of the text box and make it go reverse when you close the text box.

Hope you understand what I'm saying in here. If not, let me know and I will create a sample for you.

[Bowser]

I do understand what you're saying, and I think we're starting to get somewhere... but 2 things:


1. If you look at the example, the line part is more than "half"... so if it weren't masked SOMEHOW it would stick out.

2. Unfortunately I was hoping to use this effect to draw a WHOLE circle... sorry to make it harder on you, but there's gotta be a way to do it, right??

[Narfotic]

I think this is what you're looking for... Takes some masking and stuff...

[mrNewt]

I do understand what you're saying, and I think we're starting to get somewhere... but 2 things:


1. If you look at the example, the line part is more than "half"... so if it weren't masked SOMEHOW it would stick out.

2. Unfortunately I was hoping to use this effect to draw a WHOLE circle... sorry to make it harder on you, but there's gotta be a way to do it, right??


For your first question, I would say that you can duplicate the line movie and put them one on top of the other - make their start position indentical. Both lines will leave in the same time and speed as one. Once the movie line bellow gets at its rear-end, make the one on top continue the movement untill gets on the other side of the text box. Then reverse the animation when the box is closed.

For your second question - To make it grow, from a point and go all around untill it gets in the same point, then Xeef exaple is more then just great. You can make it as a mask over your line circle and then make it apear and disapear.

or ...

By masking - the way Narfotic just did it. By shape-tweening your mask.


And I would also have a third alternative ...

Key-frame by key-frame animation - draw your circle and on each key-frame delete a little bit from the line untill you have just a point or everything is deleted. Then reverse the animation - that will look pretty cool :). A techinique used in many effects out there (where objects looks like they are growing). Is a longer way to do it (well not longer then the code Xeef had to write :D), but you have more control over the animation.

Hope I was clear enough for you :).

[Bowser]

Thank you both!

Those were both some pretty good solutions....
The shape tweened match seems so "patched together" that I didn't really consider it, but it gets the job done nicely!

And hiding the expanding circle on top of itself is also a really good idea.

For now I've decided to go with keyframe animation....I think I might use one of those ideas in the future though...thanks!

As a related question, though... I was wondering, would there any drawback to keyframing it? Since this animation is so simple, it doesn't significantly affect the filesize, but are there any other ill effects of keyframing like detriment to processor speed? I tend to want to keyframe a lot of effects but I'm wondering if it's bad practice?

[mrNewt]

In my opinion there is nothing wrong with keyframe animation.

As long you preload everything, so that the end user will get a nice and smooth navigation, you should be fine. Now programers will start saying different things for sure :).

Personally I'm more into design. I do have a little bit of coding skills. I mostlly use code for moving, duplicating, preloading, loading, unloading, forms ... and other similar stuff. The rest of it is just photoshop and animation :D (as far regarding Flash).