Actuate.tween alpha:0 then tween alpha:1 wont work

#1

Hi, i am learning the openfl tutorial. This is my code

class Main extends Sprite {
	
	
	public function new () {
		
		super ();
		
		var dataGambo1 = Assets.getBitmapData("assets/images/gundamstrikefreedom.jpg");
		var gambo1 = new Bitmap (dataGambo1);		
				
		addChild (gambo1);
		gambo1.alpha = 0.1;
		gambo1.smoothing = true;		
		
		Actuate.tween (gambo1, 3, {alpha:1}, false);
		Actuate.tween (gambo1, 3, {x:400}, false).ease(Elastic.easeOut);
		Actuate.tween (gambo1, 3, {y:400}, false)
		.delay(3);
	//if i set the following line tween alpha:0, the image wont appear again so i make it 0.1 instead
		Actuate.tween(gambo1, 3, {alpha:0.1, scaleX:0, scaleY:0}, false).delay(6);		
		Actuate.tween(gambo1, 3, {alpha:1,scaleX:2, scaleY:2, x:0, y:0}, false).delay(9);		
	}	
}

As i said in the code comment, if i do tween alpha:0, the image wont appear again even though the next line of code should set alpha:1. Make it tween alpha:0.1 then the image can appear again with alpha:1.
So is it suppose to behave like that? A proper explaination would be nice.

#2

I think this is because visible is set to false. Check this topic: Actuate - Could not call actuate twice for same object?

1 Like
#3

Rather than delay(), you might consider using onComplete() to queue up tweens. You can (and perhaps should) target functions with this, which have your Actuate tweens in them. But below, I’ve provided a working example which uses anonymous functions to achieve this in fewer lines. If these effects are something that are repeated often, you might consider not using anonymous functions and properly declaring functions.

package;

import motion.Actuate;
import motion.easing.Elastic;
import openfl.Assets;
import openfl.display.Bitmap;
import openfl.display.Sprite;

class Main extends Sprite
{
	public function new()
	{
		super ();
		var gambo1:Bitmap = new Bitmap(Assets.getBitmapData("assets/images/gundamstrikefreedom.jpg"));

		addChild (gambo1);
		gambo1.alpha = 0;
		gambo1.smoothing = true;

		Actuate.tween (gambo1, 3, {x:400}, false).ease(Elastic.easeOut);
		Actuate.tween (gambo1, 3, {alpha:1}, false).onComplete(function():Void
		{
			Actuate.tween (gambo1, 3, {y:400}, false).onComplete(function():Void {
				Actuate.tween(gambo1, 3, {alpha:0, scaleX:0, scaleY:0}, false).onComplete(function():Void {
					Actuate.tween(gambo1, 3, {alpha:1, scaleX:2, scaleY:2, x:0, y:0}, false);
				});
			});
		});
	}
}

Edited to remove the now redundant visible = true.

#4

Try this:

Actuate.tween (gambo1, 3, {alpha:1});
Actuate.tween (gambo1, 3, {x:400}).ease(Elastic.easeOut);
Actuate.tween (gambo1, 3, {y:400}).delay(3);

Actuate.tween(gambo1, 3, {alpha:0, scaleX:0, scaleY:0}, false).delay(6).autoVisible(false);		
Actuate.tween(gambo1, 3, {alpha:1,scaleX:2, scaleY:2, x:0, y:0}, false).delay(9);

EDIT:

autoVisible is true by default – this means that if you Actuate.tween(object, 1, { alpha: 0 }) then you will need to Actuate.apply(object, { alpha: 1 }) or set visible manually if you want to only set it immediately to visible.

However, creating a tween (Actuate.tween(object, 1, { alpha: 1 })) will automatically set visible to true, so normally this is not an issue. I have a feeling that your first tween (animating toward alpha 0) is still active when your second tween (animating toward alpha 1 again) begins, so tween alpha 1 starts (and visible is still true) then tween alpha 0 finishes (and sets visible false)

#5

Looks to be the case. I was able to remove the explicit visible = true from my example code above and it still worked, as the onComplete now forced it to wait for the earlier tween to finish.

#6

@LarryB, @singmajesty
Thanks, i got it to work by adding .autoVisible(false)

@Bink
Thanks for the onComplete tips. And you are right, by using .onComplete, i dont need to add .auotVisible(false); Though it is weird why the tween is still not complete when there is 3 seconds gap between them.

Is there a complete api documentation for actuate so i can read what function accept what parameter and return what value?

#7

Depending on your IDE, those details are hopefully available with code completion.

@singmajesty is your guy to confirm the existence of API documentation (as he wrote the lib). I’d generally resource code completion in conjunction with the GitHub page: https://github.com/jgranick/actuate

You could also look in the actual class:

#8

Here’s the original code:

Actuate.tween(gambo1, 3, {alpha:0, scaleX:0, scaleY:0}, false).delay(6);
Actuate.tween(gambo1, 3, {alpha:1,scaleX:2, scaleY:2, x:0, y:0}, false).delay(9);

The first lasts for 3 seconds, starting after 6 seconds. The second starts at 9 seconds, so they may be starting and ending and the very same frame.

With testing – there might be a way for someone to adjust the internals of Actuate to account for this

#9

@singmajesty
I see, i do mistake on the delay part.

Thanks for the help everyone.