How recreate star demo for TweenMax?

[RZephyr07]

I saw the starfield demo here and really like the effect. I tried downloading the source and couldn't make much sense of it - being a pretty novice programmer. I'm used to tweening all in one Flash file and it seems the demo breaks up source into several smaller .as files. Again, I'm mostly a designer coming from AS2 and much of this is pretty new territory for me.

 

I'd imagine the code is rather simple for this star warp effect... can anyone give some pointers on how I might accomplish recreating it in TweenMax or TweenLite? Thanks for any pointers in advance

[Carl]

i quickly stripped out all the extraneous stuff.

 

remove all the code in the actions layer of the AS2 speed test fla and paste in this:

 

import com.greensock.*;
import mx.transitions.easing.*;

var mc_array:Array = [];

var mc:MovieClip;
var l:Number = container_mc.getNextHighestDepth();
var n:Number = 500 //number of clips
var duration:Number = 1
for (var i:Number = 0; i 		mc = container_mc.attachMovie("mc", "mc" + l, l);
	mc._x = Math.random() *300;
	tweenTweenLite(mc, Math.random());
	l++;
	mc_array.push(mc);
}


function tweenTweenLite(mc:MovieClip, percent:Number):Void {
var time:Number = duration - (percent * duration);
var props:Object = resetMC(mc, percent);
props.onComplete = tweenTweenLite;
props.onCompleteParams = [mc, 0];
//props.ease = Strong.easeIn;
new TweenLite(mc, time, props);
}	



function resetMC(mc:MovieClip, percent:Number):Object {
var angle:Number = Math.random() * Math.PI * 2;
var radius:Number = 600;
var scale:Number = Math.random() * 250 + 50;
var x:Number = 262; //center
var y:Number = 215; //center
var props:Object = {_x:x + Math.cos(angle) * radius, _y:y + Math.sin(angle) * radius, _xscale:scale, _yscale:scale};
if (percent != 0) {
	x += Math.cos(angle) * radius * percent;
	y += Math.sin(angle) * radius * percent;
	scale *= percent;
} else {
	props.delay = Math.random() * duration
	scale = 5;
}
mc._x = x;
mc._y = y;
mc._xscale = mc._yscale = scale;
return props;
}

 

that code is the bare minimum to create the starfield effect

 

you can also delete the form layer.

 

if you use this code in another file

 

1:make sure you have a container_mc (currently a blank movie clip in the top left corner of the stage)

2:have a symbol with linkage mc in the library (this will be your star)

3:make sure the fla is in the same folder as the com folder that contains the greensock folder

[RZephyr07]

Very cool - it does work perfectly. However this is AS2... any possibility you would know the similar procedure for the AS3 version? I might be able to figure it out myself... I'll start picking at the AS3 files right now.

 

EDIT: Yeah guess not. In the AS3 version everything is broken up into little .as files which makes it all the more puzzling. I'm most familiar with having all my actionscript in the main timeline. What is the advantage of breaking up all the actionscript into these separate files?

[Carl]

you said you were most comfortable with as2 so that's why i changed the as2 version. i guess i misunderstood what you wanted.

 

don't know if I have time to break apart the as3 one. the main advantage to the separate files is so that the code can be more organized but the downside can be that somethings are harder to find especially if you are using Flash Pro. If you use flash builder or flash develop its easier to find what you need in those different files.

[RZephyr07]

Aww... perhaps I could Paypal you some beer money for your efforts?

[Carl]

thanks for your offer. i'm going to be tied up for a few days. I would do it for free if I had the time.

[GreenSock]

I've attached an AS3 FLA that should give you what you're after.

 

No PayPal beer money necessary - if you find it really useful, consider joining Club GreenSock to get some other goodies (plugins and classes). http://www.greensock.com/club/ If not, no biggie.

 

Enjoy.

 

import flash.display.Sprite;
import com.greensock.*;
import com.greensock.easing.*;
import flash.geom.Point;

var n:Number = 500;//number of stars
var center:Point = new Point(this.stage.stageWidth / 2, this.stage.stageHeight / 2); //center position from where stars emerge
var radius:Number = this.stage.stageWidth / 2; 
var maxEndScale:Number = 2.5; //maximum end scale (250% in this case)
var minEndScale:Number = 0.5; //minimum end scale (50% in this case)
var duration:Number = 1.5; //duration of each tween (how fast/slow the stars move)

var stars:Array = [];
var scaleSpread:Number = maxEndScale - minEndScale;
for (var i:Number = 0; i 	var star:Sprite = new Star();
addChild(star);
stars.push(star);
tweenStar(star, Math.random());
}

function tweenStar(star:Sprite, progress:Number):TweenLite {
star.x = center.x;
star.y = center.y;
star.scaleX = star.scaleY = 0.05;
var endScale:Number = minEndScale + Math.random() * scaleSpread;
var angle:Number = Math.random() * Math.PI * 2;
var delay:Number = Math.random() * duration;
if (progress != 0) {
	star.x += Math.cos(angle) * radius * progress;
	star.y += Math.sin(angle) * radius * progress;
	star.scaleX = star.scaleY = endScale * progress;
	delay = 0;
}
return new TweenLite(star, duration * (1 - progress), 
					 	{
							x:center.x + Math.cos(angle) * radius,
							y:center.y + Math.sin(angle) * radius,
							scaleX:endScale,
							scaleY:endScale,
							delay:delay,
							ease:Cubic.easeIn,
							onComplete:tweenStar, 
							onCompleteParams:[star, 0]
						}
					);
}

[RZephyr07]

You are my hero GreenSock. I'll be joining Club GreenSock for sure in due time The motion blur plugin looks too useful for my needs to pass up... plus I'd love to support your continued development of TweenMax