Jump to content
Search Community

Circular pattern with tweenlite AS2

Luckyde test

By Luckyde
in GSAP (Flash)

Moderator Tag
 Share

Recommended Posts

Luckyde test

Luckyde

Posted
Posted

Having some issues making a tween on a pattern. Is this doable with tweenlite on AS2? I saw docs in AS3, but I'm after an AS2 way of doing it. Specifically having several menu options in a circle pattern moving up the circle once clicked. Has anyone achieve d this in AS2?

Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

Thanks Carl,
I supose I was looking for a way to code it in AS2 using the tweenlite engine for movement types where as the google results are for twenlite with AS3 or AS2 without tweenlite. I was more hoping i could apply the movement and keep the nice ease and delay timing effects that tweenlite's so great at without overcomplicating the code.
Thanks for the suggestion

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

You could use cubic Bezier data to create your own circular path.

 

Here is a little example:

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([BezierPlugin]);
TweenMax.to(circleContainer.circle, 5, {bezier:{type:"cubic", values:[
  {_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0},
  {_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100},
  {_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0},
  {_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} 
]}, ease:Power1.easeInOut});

Don't worry I attached a CS5 Fla and SWF (place it in the same directory as your com folder and compile).

 

I got the bezier anchor and control point data from this tutorial here:

http://www.charlespetzold.com/blog/2012/12/Bezier-Circles-and-Bezier-Ellipses.html

 

Be sure to check out the BezierPlugin docs to learn more about how to feed anchor and control points to the plugin: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

 

 

 

 

BezierCircle_CS5.zip

Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

 

You could use cubic Bezier data to create your own circular path.

 

Here is a little example:

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([BezierPlugin]);
TweenMax.to(circleContainer.circle, 5, {bezier:{type:"cubic", values:[
  {_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0},
  {_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100},
  {_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0},
  {_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} 
]}, ease:Power1.easeInOut});

Don't worry I attached a CS5 Fla and SWF (place it in the same directory as your com folder and compile).

 

I got the bezier anchor and control point data from this tutorial here:

http://www.charlespetzold.com/blog/2012/12/Bezier-Circles-and-Bezier-Ellipses.html

 

Be sure to check out the BezierPlugin docs to learn more about how to feed anchor and control points to the plugin: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

 

 

 

 

Thanks so much for that Carl! Though for some reason it's not exporting on my end(the circle's static), I've got the tweenmax as2 library downloaded, it's not giving me any error messages to trouble shoot. Should I be running the AS3 version of the com folder?

Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

Oh, make sure you are using the AS2 version of v12 available here:

http://www.greensock.com/?download=GSAP-AS2

 

 

You can test the current version you are using by adding 

trace(TweenLite.version)
to the actionscript on Frame 1.

 

That works great! I'm making the radius dynamic and controling the x and y by moving the container mc's x and y. It seems to work if i use 

 

{_x:0, _y:-radius}, {_x:radius*0.55, _y:-radius}, {_x:radius, _y:-radius*0.55} 
etc
Now I need to figure out how to make this for 5 more options, so that when you click on a menu option it goes to the top. Attached is what I'm trying to achieve, I hope you don't mind if I ask more questions soon! I really appreciate your help with this Carl!

w0036b.png

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Nice job on making the values dynamic based on a radius. Great idea.

 

As for setting the start and end values, yeah its possible. The general idea is that you

 

1) pause the bezier tween.

2) tween the progress of that tween from one value to another.

 

You can paste this code into the previous file I provided:

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
TweenPlugin.activate([BezierPlugin]);

//make a reference to your bezier tween. 
//make sure it is a TweenMax tween as it needs to have a progress() value.
//also set the easing to Linear.easeNone
var tween = TweenMax.to(circleContainer.circle, 5, {bezier:{type:"cubic", values:[
{_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0},
{_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100},
{_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0},
{_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} 
]}, ease:Linear.easeNone, paused:true});


//tween from 180 degrees to 270
//you can place an ease on this tween if you like
TweenMax.fromTo(tween, 1, {progress:0.5}, {progress:0.75});

You can convert degrees to progress by using (degrees/360)

 

Furthermore you may want to dynamically generate the duration of the tween based on the distance travelled.

 

Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

Hmm this is working very smoothly, is there a tweenmax function for detecting the current position within a circle? I'm at the point now where im going to move the menu options on click so that the one that's pressed is on top, but whenever it moves it starts from 0 instead of the current location... I'm sure i'm missing something. What I've got so far

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
TweenPlugin.activate([BezierPlugin]);

menuOptions=8
//place circle function
function placeObject(myObject,Location){
 this["tween "+myObject._parent._name] = TweenMax.to(myObject, 5, {bezier:{type:"cubic", values:[
	{_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0},
	{_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100},
	{_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0},
	{_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} 
]}, ease:Linear.easeNone, paused:true});

TweenMax.to(this["tween "+myObject._parent._name], 0, {progress:Location});
}

//create circle function
for(i=1;i<menuOptions;i++){
	(i+1)
	duplicateMovieClip("circleContainer1", ["circleContainer"+(i+1)], 100+i)
	placeObject(this["circleContainer"+(i)].circle,0+i/menuOptions)

}

//move object script, currently not working
function moveObject(myObject,Location){
 this["tween "+myObject._parent._name] = TweenMax.to(myObject, 5, {bezier:{type:"cubic", values:[
{_x:0, _y:-100}, {_x:55, _y:-100}, {_x:100, _y:-55}, {_x:100, _y:0},
{_x:100, _y:55}, {_x:55, _y:100}, {_x:0, _y:100},
{_x:-55, _y:100}, {_x:-100, _y:55}, {_x:-100, _y:0},
{_x:-100, _y:-55}, {_x:-55, _y:-100}, {_x:0, _y:-100} 
]}, ease:Linear.easeNone, paused:true});

TweenMax.to(this["tween "+myObject._parent._name], 1, {progress:Location});
}

//trigger the moving object script, set to 1 circle instead of all of them for testing
this["circleContainer"+(1)].onPress=function(){
moveObject(Object(_root)["circleContainer"+(1)].circle,0.4)

}
Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

is there a tweenmax function for detecting the current position within a circle?

 

nope. but remember each element has a bezier tween which moves it around the circle and you already figured out how to convert a degrees value to a progress. You should be able to determine the rotation / position of any element by looking at its tween's progress.

 

but whenever it moves it starts from 0 instead of the current location... 

 

Your moveObject function appears to be making a new bezier tween for the object you are trying to move. Furthermore that new tween explicitly positions that object at x:0, y:-100. 

Your moveObject function should only need to modify the progress of the tween that was already created for the object in placeObject.

 

From what I understand of your description, each object should only have 1 tween created once. 

Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

edit: check this code out: I just set the start position to this:progress and it worked haha!
But it's doing an odd thing where if the object is almost at 0 it reverses. Try clicking on the circles on the top and you'll notice one of them keeps spinning the wrong way... thoughts?


https://www.dropbox.com/s/8u937qcjo84mqfp/bezierCircle3.fla

 

]

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
TweenPlugin.activate([BezierPlugin]);
radius=120
menuOptions=8
//place circle function
function placeObject(myObject,Location){
 this["tween "+myObject._parent._name] = TweenMax.to(myObject, 5, {bezier:{type:"cubic", values:[
	{_x:0, _y:-radius}, {_x:0.55*radius, _y:-radius}, {_x:radius, _y:-0.55*radius}, {_x:radius, _y:0},
	{_x:radius, _y:0.55*radius}, {_x:0.55*radius, _y:radius}, {_x:0, _y:radius},
	{_x:-0.55*radius, _y:radius}, {_x:-radius, _y:0.55*radius}, {_x:-radius, _y:0},
	{_x:-radius, _y:-0.55*radius}, {_x:-0.55*radius, _y:-radius}, {_x:0, _y:-radius} 
]}, ease:Linear.easeNone, paused:true});

TweenMax.to(this["tween "+myObject._parent._name], 0, {progress:Location});
}

//create circle function
for(i=1;i<menuOptions+1;i++){
	(i+1)
	duplicateMovieClip("circleContainer1", ["circleContainer"+(i+1)], 100+i)
	
	placeObject(this["circleContainer"+(i)].circle,0+i/menuOptions)
	this["circleContainer"+(i)]._alpha-=20
	this["circleContainer"+(menuOptions+1)]._visible=false
this["circleContainer"+(i)].onPress=function(){
	trace(this._name)
}
}

//move object script, currently not working
function moveObject(myObject,amount){

TweenMax.fromTo(this["tween "+myObject._parent._name], 1, {progress:this.progress}, {progress:0+amount});

}

this["circleContainer"+(1)].onPress=function(){
	//get this button's number
	theNum = this._name.substr(15, 11);
	trace((theNum*1+1))
	
for(e=0;e<menuOptions+1;e++){
	
moveObject(Object(_root)["circleContainer"+((theNum*1+e))].circle,(1/menuOptions)*e)
}

}
this["circleContainer"+(2)].onPress=function(){
	theNum = this._name.substr(15, 11);
	
	trace((theNum*1+1))
	moveObject(Object(_root)["circleContainer"+1].circle,-(1/menuOptions))
	trace(-(1/menuOptions))
for(e=0;e<menuOptions+1;e++){
	
moveObject(Object(_root)["circleContainer"+((theNum*1+e))].circle,(1/menuOptions)*e)
}


}
Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Not really sure what's going on. 

I exported the file a few times but I'm not really sure where the errors are happening or where I would begin to track them down. It seems like you need to find a way to allow each green circle to continuously loop around the bezier path. 

 

All I can assess is that in some cases you are tweening from a higher progress to a lower progress and thus the animations appears to be rewinding. 

Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

Thanks for everything Carl! I updated the circles with xml generated menus and submenus and even though its doing that reverse effect it still works and at the right speed it looks as if it's part of the design :) Really appreciate this man, couldn't have done it without you! You're the best!

  • Like 1
Link to comment
Share on other sites
Luckyde test

Luckyde

Posted
  • Author
Posted

Hi guys,
I'm starting over in AS3, wanna make a better version :) still a complete beginer at it, but i'm hoping the rotate function in 3.0 has more control. Is there a way to track the current progress in 3.0? I'm going to set up the menu items on a circle again and rotate on click

package
{
    import flash.display.*;
    import flash.events.*;
import flash.text.*;
import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.motionPaths.*;
TweenPlugin.activate([CirclePath2DPlugin]);

//summon the XML Loader class which has the amount of boxes in it
import XMLloader;

    
    public class MainClass extends MovieClip
    {

//create a XMLLoader Instance
var xmlimporter:XMLloader = new XMLloader();
//create the amount of boxes needed
var AmountOfBoxes:int=9
var circle:CirclePath2D = new CirclePath2D(150, 150, 100);

var boxes:Array;
public function MainClass(){

boxes = new Array();
var BoxAmount = xmlimporter.HowManyBoxes
for (var i:int; i<BoxAmount;i++){
createBoxes(i*10,i*10) 
}
this.addChild(circle);

function createBoxes(xLocation:Number, yLocation:Number){
var B:Box = new Box();
boxes.push(
B.x=xLocation
B.y=yLocation
B.addEventListener(MouseEvent.CLICK, onClick);
stage.addChild(
var myText:TextField = new TextField();
myText.text = "Republic of Code";
myText.selectable=false;
// the below causes an error
//B.addChild(myText);

}

function onClick(e:MouseEvent):void
{
var b:Box = e.target as Box;
var index:int = boxes.indexOf(;
var boxToMove:Number=(index)
trace('target =' +boxes[boxToMove])
TweenLite.to(boxes[boxToMove], 3, {circlePath2D:{path:circle, startAngle:0, endAngle:-90, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}});


}
for (var q:int; q<BoxAmount;q++){
TweenLite.to(boxes[q], 3, {circlePath2D:{path:circle, startAngle:90, endAngle:(360/BoxAmount)*q, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:0}});

}

}
    }
}

so now can I set up a function to rotate TO a specific angle instead of from to so they dont always start from 90? Then follow up question is there a way to trace out the current angle they're on so that on click the one clicked can go on the top and not go to 0degrees and then to the top?
cheers :)
Edit:also with 3.0 it gives me an error 1007 as soon as I put in a text box within the container both when manually placed in and when dynamically generated... not sure why

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

That is quite a bit of code to look over and I'm not quite following what is happening every time I click on a blue box.

 

From my understanding of what you want to accomplish I think instead of always creating new tweens using circlePath plugin you want to tween the progress of individual PathFollowers.

 

Have you checked out the followerTween() method:

http://api.greensock.com/as/com/greensock/motionPaths/CirclePath2D.html#followerTween()

 

It seems like it was made to solve the exact problem you are trying to solve, getting individual followers to tween from their current position to an endAngle in a certain direction.

 

It might be helpful to step away from your more involved menu system and work with a file that just has 1 or 2 elements on the path that you can try to control with the different CirclePath2D and PathFollower methods. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...