tweenmax. overlapping of tweens

Posted on 2009-02-12
Last Modified: 2013-11-11
Hi, I'm using greensock tweenmax and are having a problem of overlapping tweens

I have several panels placed in a vertical manner. Each one acts as a button. When you click on one of the panels the panels bellow it move down 142 pixels. I placed my actions in a movieclilp and for each panel there is a frame with a label. In each label there is a frame with the actions for all the panels. This way I was able to assign a different script for the panels that were moved when I activated one of the panels.

Everything works great except that when I click back and forth between two panels the tweened distance adds up. I think that is what the overlapping feature is for but it's not working well.

Here's the code without the overlapping script
import gs.TweenMax;

import gs.TweenGroup;

import gs.easing.*;

_root.W.masterheadlab.onPress = function() {

	TweenGroup.allTo([_root.W.kokocompany, _root.W.banianhome, _root.W.jonashidalgo, _root.W.sandislone, _root.W.saffronliving, _root.W.pleca],1,{_y:"142"},TweenMax);


	_root.W.masterheadlab.enabled = false;

	_root.W.kokocompany.enabled = true;


_root.W.kokocompany.onPress = function() {

	TweenGroup.allTo([_root.W.banianhome, _root.W.jonashidalgo, _root.W.sandislone, _root.W.saffronliving, _root.W.pleca],1,{_y:"142"},TweenMax);


	_root.W.masterheadlab.enabled = true;

	_root.W.kokocompany.enabled = false;


Open in new window

Question by:cristobal_ny
    LVL 4

    Expert Comment

    Hi cristobal_ny,

    The problem occur because the animation for the tween is not yet completed animating and then you click on back, let say we click back then before the back animation done we click on forth, take for example your bar will have to move 20 pixel down from 200 to Y axis at 180  the correct location but when you click on forth the back animation might be only move until 190 and before it completed and stop at location Y axis at 200 you click on forth and move 20 pixel up again then it will move from 190 back to 210 this will add 10 pixel to the original location it suppose to stop at, so it will increase the distance between, to prevent that your can disable the button or movieclip once your click on any of it then enable back the button or movieclip after the animation done this will prevent the distance becoming closer.

    You can try click on back and forth but wait till the animation have done then only your click on forth, then your will see why it is getting closer if your click on back and forth very fast.

    Author Comment

    Yes that is the problem that when you click on different buttons before the tweens are finished the remaining distances are added to the new tweened distance.
    But what is the solution??????
    LVL 4

    Expert Comment

    Hi cristobal_ny,

    Youneed to calculate the current y of your movieclip then minus the next location your going to stop.

    Let say now your movieclip is at Y location 180, your next location to reach when you click on forth is 200, so once your click on forth and when you click on back your will need to calculate the actual distance need to go back to 180 let say when you click on back your movieclip is now animate until Y location 190 then it will be 190 - 180, you will need to ask the tween function to move 10 to reach back to your previous location.

    You get my point? or you can upload your fla I can take a look at your code. Hope you understand. =)

    Author Comment

    thank you, I uploded the fla file
    But regarding your solution, the distance that remains when you click before it each tween ends varies depending on when you activate another tween. So I don't think it's practical. I am sure that that's what the overwrite function in greensocks website

    note: for the fla file to work you need to download the tweenmax AS2 from the website
    LVL 4

    Accepted Solution

    Hi cristobal_ny,

    Here you go, I rewrite all the code for you, hope it works for you. =)

    Author Closing Comment

    Thank you so much for taking the time to make the fla file! I works fine!

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
    I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
    In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
    The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now