Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Charlieczech

Random Twinkling Stars using autoAlpha

Recommended Posts

Hi, I'm looking for animation similar on this video http://www.youtube.com/watch?v=pQT4JYUUDJc if possible.

As a beginner I tried using while loop and tween my Array of stars. My approach was insert multiple tween and use different delay on each one to make it random, but insert is not working in loop and if I use add they twinkle one by one. To make it more random I made 16 different Arrays with same stars, but again result was too uniform. 

 

Is is any chance to twinkle whole array randomly and multiple stars at ones similar to video above?

 

I'm sorry for my code, it is not very nice. I'm not programer and I'm using Tween for fun. It is nice tool to make AS animation easy even for me.

 

Here is my code:

var arr01:Array=[s070,s066,s047,s029,s015,s101,s119,s134,s149,s160];
var arr02:Array=[s083,s058,s040,s024,s011,s108,s125,s127,s145,s154];
var arr03:Array=[s076,s062,s050,s036,s019,s001,s085,s106,s124,s155];
var arr04:Array=[s073,s082,s045,s032,s021,s006,s110,s140,s135,s159];
var arr05:Array=[s075,s061,s060,s044,s012,s005,s095,s118,s138,s152];
var arr06:Array=[s080,s088,s052,s041,s027,s002,s111,s139,s136,s161];
var arr07:Array=[s071,s084,s048,s030,s017,s009,s097,s115,s129,s150,s053];
var arr08:Array=[s072,s065,s038,s025,s003,s092,s104,s123,s117,s147];
var arr09:Array=[s079,s054,s037,s120,s007,s091,s102,s122,s133,s144];

randomBlinkBt.addEventListener(MouseEvent.CLICK, randomBlink);

//randomized array
function shuffleArray(arr:Array):Array {
	var arrShuff:Array=[];
	while (arr.length > 0) {
		arrShuff.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]);
	}
	return arrShuff;
}

//random Twinkle array
function randomBlink(ev:MouseEvent):void {

	arr01=shuffleArray(arr01);

	var blinkTime:Number=0.5;
	var timeLineBlink:TimelineMax = new TimelineMax();
	var i:int=arr01.length;

	while (--i > -1) {
		timeLineBlink.add(TweenMax.to(arr01[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr02[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr03[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr04[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr05[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr06[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr07[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr08[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );
		timeLineBlink.add(TweenMax.to(arr09[i], 0.5, {alpha:0, yoyo:true, repeat:1}) );

	}

}

Any help or point to right direction help. 

Thank you

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks so much for posting the link to the video and for including the code.

 

I think if you just give each tween a random start time or insertion point in the timeLineBlink you will get something quite nice. I think you tried something like this but probably just need some nudging regarding the syntax.

 

Try this

 

while (--i > -1) {
timeLineBlink.add(TweenMax.to(arr01[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3 );
timeLineBlink.add(TweenMax.to(arr02[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr03[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr04[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr05[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr06[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr07[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr08[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );
timeLineBlink.add(TweenMax.to(arr09[i], 0.5, {alpha:0, yoyo:true, repeat:1}), Math.random() * 3  );


}

Each tween will have a start time between 0 and 3 seconds. 

Link to post
Share on other sites

Thank you Carl.

I'm watching your tutorials on snorkl.tv they are very helpful especialy where you expleing timing. But sometimes I have very bad latency on webpage I don't know why.

 

Animation looks already better than my previous attempts. Just out of interest. Is there any chance to randomly tween all stars from one Array or separate them into multiple ones is easier solution?

 

I will let you know how i manage. In fact I have total of 144 stars in 16th Arrays and the final result could be different to this 9 Array example.

Link to post
Share on other sites

I think using one array is fine, its what I would do. 

Since all the timing is randomized I don't see any advantage to using multiple arrays.

Link to post
Share on other sites

Ok I made progress on what I want. I made two animation one with random Stars and one with dropping Stars. The plan is to make them run together. Unfortunately tweens colliding with each other because I have tween to alpha:0 in first one and staggerFrom on 2nd one.

 

Could you please have a look at my full code and suggest how to solve it. You can see on swf the Animation 3 is alright on the beginning but then break up. What I don't want is all stars off and keep them twinkl.

as3_code.txt

Animation_ver4.zip

Link to post
Share on other sites

I'm having difficulty understanding things. Its hard to decipher what all the code means and what order it all runs, especially since it is in a text file. No way to know which stars are in which arrays and when they animating. Not really clear either on what the end result of combining 2 effects is supposed to be. 

 

If tweening and element to alpha:0 and then tweening from alpha:0 is causing a problem (which it will) I would suggest using to() tweens from both.

 

tween to alpha:0 and then tween to alpha:1 or staggerTo alpha:0 then staggerTo alpha:1

 

---

 

It might help if you provided an fla of just the code that shows the working parts and then you described exactly what needs to happen next. 

Link to post
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.

×