Jump to content
Search Community

Simultaneous tweens on a timeline

temeraire test
Moderator Tag

Recommended Posts

Hi,

 

Sorry, this must be very obvious, but I can't find it anywhere. If you're using a timeline, how do you do 2 simultaneous tweens?

 

I want a sprite to tween up, and drag along with it a mask which tweens at the same time, such that when the bottom of the sprite passes over another 'background' sprite, the background sprite disappears with an upward wipe.

 

So I need two simultaneous tweens: one for the sprite, and one for the mask which is basically 'glued' to the bottom of the sprite.

 

Thanks!

Link to comment
Share on other sites

Hi temeraire.

If you have 2 movie clips you want to animate at the same time you need to use the offset parameter on your timeline when you append the tweens, like so:

 

myTimeline.append(TweenLite.to (mc1, 1, {y:"100"}));

myTimeline.append(TweenLite.to (mc2, 1, {y:"100"}),-1);

 

This tells the second tween to start -1 second from the end of the current point in the timeline, as the 1st tween takes 1 second also, these 2 tweens would start at the same time.

 

There are plenty of tutorials on how to use Timeline Lite/Max, the best place to start would be the Intro to TimelineLite and then perhaps Carl Schoof's Excellent 6 part series on TimelineLite. There is also the really useful documentation provided by Jack (although it can be a bit daunting on the first few scan-throughs if you're new to Greensock!)

 

I hope this helps

 

 

 

You can check out

Link to comment
Share on other sites

Yep, X10 is right (thanks for chiming in) but I also wanted to point out that you do NOT need to always use the append() method. That's more for building sequences whereas the insert() method allows you to place tweens EXACTLY where you want. You can put as many as you want wherever you want on the timeline. For example, if you want both of these tweens to start simultaneously...

 

myTimeline.insert( TweenLite.to (mc1, 1, {y:"100"}), 0);
myTimeline.insert( TweenLite.to (mc2, 1, {y:"100"}), 0);

 

Notice the ", 0" at the end - that's the time where I want to place those tweens. If I wanted them to start at exactly the 2-second spot, I'd do this:

 

myTimeline.insert( TweenLite.to (mc1, 1, {y:"100"}), 2);
myTimeline.insert( TweenLite.to (mc2, 1, {y:"100"}), 2);

 

And of course there's the insertMultiple() method and appendMultiple() methods that you can feed an array of tweens to and they'll drop them all into the same spot (or sequence them depending on the parameters you use). Carl's video tutorials are an EXCELLENT place to get up to speed. If you take the time to watch them, I have no doubt you'll gain a whole new level of appreciation and understanding for what the tools can do. http://active.tutsplus.com/series/timel ... ter-guide/

Link to comment
Share on other sites

Well, I'm still struggling with this, now against a very immediate deadline.

 

The following code WORKS, and does just what I want it to do. The problem is that it only works here in this test project, not in the real project. When I do a trace on the EnterFrame event here in the test project, it'supdating every half-pixel or so -- that's fine. But for some reason in the real project it only updates about every 50(!) pixels or so. I don't know why. Is there some other, better way to do this?

 

package
{
import com.greensock.TimelineLite;
import com.greensock.TweenLite;

import com.greensock.easing.*;
import flash.events.Event;
import flash.display.Shape;
import flash.display.Sprite;



[sWF(width="120", height="600")]
public class Hide extends Sprite
{
	private var overSprite:Sprite = new Sprite(); //the sprite, visible on the stage, which moves up
	private var maskSprite:Sprite = new Sprite(); //the sprite mask which is pinned to the bottom of the overSprite
												 //such that it reveals the underSprite as overSprite moves upward.
	private var underSprite:Sprite = new Sprite(); //the sprite to be revealed.
	private var centerY:Number;
	private var centerX:Number;
	private var offStageX:Number = 200;
	private var wipeSpeed:Number = 1.5;
	private var timeline:TimelineLite = new TimelineLite();



	public function Hide()
	{
		this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
	}

	private function addedToStageHandler(e:Event):void
	{
		drawSprites();
		this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		initTweens();
	}

	private function enterFrameHandler(e:Event):void
	{	//when bottom of overSprite goes above underSprite bottom, 
		if(( overSprite.y + overSprite.height)< (maskSprite.y + maskSprite.height))
		{
			//overSprite pins maskSprite to its bottom and pulls it up, to hide underSprite
			maskSprite.y =  overSprite.y;
			trace("maskSprite.y = " +  maskSprite.y);
		}
	}
	private function drawSprites():void
	{
		underSprite.graphics.lineStyle();
		underSprite.graphics.beginFill(0xFF0000); //undersprite is red
		underSprite.graphics.drawRect(0,0,stage.stageWidth, 200);
		underSprite.graphics.endFill();
		underSprite.y = 200;
		this.addChild(underSprite);

		overSprite.graphics.lineStyle();
		overSprite.graphics.beginFill(0x000000); //overSprite is black
		overSprite.graphics.drawRect(0,0,100, 200);
		overSprite.graphics.endFill();
		overSprite.y = 400;
		this.addChild(overSprite);

		maskSprite.graphics.lineStyle();
		maskSprite.graphics.beginFill(0xFFFFFF); //white, but won't be visible since it's a mask.
		maskSprite.graphics.drawRect(0,0,stage.stageWidth, 200);
		maskSprite.graphics.endFill();
		maskSprite.y = underSprite.y;
		this.addChild(maskSprite);
		underSprite.mask = maskSprite;
	}

	private function initTweens():void
	{

		//the bottom of the mask has to move up with the bottom of the overSprite.
		timeline.insert(TweenLite.to(overSprite,8, {y:-200}));
		//timeline.insert(TweenLite.to(maskSprite,8, {y: -200+overSprite.height}));
	}


}
}

Link to comment
Share on other sites

Well, I'm still struggling with this, now against a very immediate deadline.

 

The following code WORKS, and does just what I want it to do. The problem is that it only works here in this test project, not in the real project. When I do a trace on the EnterFrame event here in the test project, it'supdating every half-pixel or so -- that's fine. But for some reason in the real project it only updates about every 50(!) pixels or so. I don't know why.

 

I've begun the tutorials -- haven't gotten through them all yet. Is there some other, better way to do this?

 

package
{
import com.greensock.TimelineLite;
import com.greensock.TweenLite;

import com.greensock.easing.*;
import flash.events.Event;
import flash.display.Shape;
import flash.display.Sprite;



[sWF(width="120", height="600")]
public class Hide extends Sprite
{
	private var overSprite:Sprite = new Sprite(); //the sprite, visible on the stage, which moves up
	private var maskSprite:Sprite = new Sprite(); //the sprite mask which is pinned to the bottom of the overSprite
												 //such that it reveals the underSprite as overSprite moves upward.
	private var underSprite:Sprite = new Sprite(); //the sprite to be revealed.
	private var centerY:Number;
	private var centerX:Number;
	private var offStageX:Number = 200;
	private var wipeSpeed:Number = 1.5;
	private var timeline:TimelineLite = new TimelineLite();



	public function Hide()
	{
		this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
	}

	private function addedToStageHandler(e:Event):void
	{
		drawSprites();
		this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		initTweens();
	}

	private function enterFrameHandler(e:Event):void
	{	//when bottom of overSprite goes above underSprite bottom, 
		if(( overSprite.y + overSprite.height)< (maskSprite.y + maskSprite.height))
		{
			//overSprite pins maskSprite to its bottom and pulls it up, to hide underSprite
			maskSprite.y =  overSprite.y;
			trace("maskSprite.y = " +  maskSprite.y);
		}
	}
	private function drawSprites():void
	{
		underSprite.graphics.lineStyle();
		underSprite.graphics.beginFill(0xFF0000); //undersprite is red
		underSprite.graphics.drawRect(0,0,stage.stageWidth, 200);
		underSprite.graphics.endFill();
		underSprite.y = 200;
		this.addChild(underSprite);

		overSprite.graphics.lineStyle();
		overSprite.graphics.beginFill(0x000000); //overSprite is black
		overSprite.graphics.drawRect(0,0,100, 200);
		overSprite.graphics.endFill();
		overSprite.y = 400;
		this.addChild(overSprite);

		maskSprite.graphics.lineStyle();
		maskSprite.graphics.beginFill(0xFFFFFF); //white, but won't be visible since it's a mask.
		maskSprite.graphics.drawRect(0,0,stage.stageWidth, 200);
		maskSprite.graphics.endFill();
		maskSprite.y = underSprite.y;
		this.addChild(maskSprite);
		underSprite.mask = maskSprite;
	}

	private function initTweens():void
	{

		//the bottom of the mask has to move up with the bottom of the overSprite.
		timeline.insert(TweenLite.to(overSprite,8, {y:-200}));
		//timeline.insert(TweenLite.to(maskSprite,8, {y: -200+overSprite.height}));
	}


}
}

Link to comment
Share on other sites

Are you saying that you posted the code that DOES work, but didn't post the code that DOESN'T work? Kinda tough to troubleshoot if that's the case :) Please post a very simple FLA that we can publish on our end to see the problem clearly demonstrated.

 

By the way, you might want to consider using an onUpdate callback on your tween(s) instead of an ENTER_FRAME handler that runs constantly because:

 

1) It would be more efficient (onUpdate only runs when the tween is active)

 

2) onUpdate always fires AFTER the tween updates, but you can't always be sure that ENTER_FRAME will do the same.

Link to comment
Share on other sites

Are you saying that you posted the code that DOES work, but didn't post the code that DOESN'T work? Kinda tough to troubleshoot if that's the case

 

Uh, yeah, fair enough. I've managed to get it working for now in what I hope is an acceptable way. Once this panicked deadline is done I'll try to post the code that was tricky. Of course by then I'll have done all the tutorials and will be better educated.

 

Thanks for the onUpdate tip -- that will prove very handy.

 

-- David

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
  • Recently Browsing   0 members

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