Jump to content
GreenSock

X10

Dynamically adding movieclips from Library to TimelineLite

Recommended Posts

Hello all,

I've been playing more and more recently with the Greensock tweening platform and am having a lot of fun learning all sorts of useful tricks!

 

At the moment I'm stumped on adding movieclips to a TimelineLite from the library.

What I'm trying to acheive: I have several MovieClips (waveMovieClipA, waveMovieClipB, waveMovieClipC etc.) in my library that I want to add to the stage at a particular point in my Timeline to create a 'wave' animation that roughly follow a BezierThrough path. (Imagine the clips are particles of water going down a curly straw)

I'll need to randomise when they enter the stage and how far they are from the path, but for now I am not able to even reference them on the timeline.

 

I'm able to add the clips dynamically to the stage, but I haven't been able to add them to the TimelineLite, any assistance greatly appreciated.

 

Sample Code:

myTimeline.append(TweenLite.to(testExp1, 1, {bezierThrough:[{x:147, y:121}, {x:121, y:102}, {x:109, y:127}, {x:329, y:133}], orientToBezier:true}),3);

function addwaveClips():void{
for(var m:Number=0; m<50; m++) {
var testWaveClip:expAbc = new waveMovieClipA();
addChild(testWaveClip);
testWaveClip.name = 'test'+m;
testWaveClip.id = 'test'+m;
testWaveClip.x = 680;
testWaveClip.y = 10;
trace("movieClip Instance Name = " + testWaveClip.name);
trace("movieClip Instance ID = " + testWaveClip.id);

}
}

Link to comment
Share on other sites

there seems to be a disconnect in your code

 

your timeline is referencing a clip named testExp1

 

myTimeline.append(TweenLite.to(testExp1, 1, {bezierThrough:[{x:147, y:121}, {x:121, y:102}, {x:109, y:127}, {x:329, y:133}], orientToBezier:true}),3);

 

but your addwaveClips functions seems to be generating clips with the names

 

test0, test1, test2, test3, test4, etc based on 'test' + m.

 

also there could be a scope issue with you defining your testWaveClip var inside your function as the scope of that variable only exists in that function. also, instance names in as3 aren't really the same as they were in as2. I'm not expert but reading this may help:

 

http://www.kirupa.com/forum/archive/ind ... 29180.html

 

so based on the suggestions in that thread i would recommend setting up an array outside your function

 

var waveClips:Array = []

 

 

then inside your testWave function loop add each new wave to the array

 

waveClips.push(testWaveClip)

 

 

 

you can than use TimelineLite's appendMultiple function to do a TweenMax.allTo(waveClips, 1, {someProperty:someValue});

 

also, in your addWaveClips function's loop when you are creating your clips, you can probably also append them to an existing timeline as well.

Link to comment
Share on other sites

Hi Carl,

Many thanks for taking the time to respond, especially my mistyped code. I posted that late last night/this morning and was editing the names of the clips to make them more relevant to the query rather than the actual naming scheme and I forgot to change all the names correctly, as you have quite rightly picked up.

 

Thank you for the link to the Kirupa thread, I am just reading over that now....of course there is a scope issue-D'Oh! :oops:

 

X10

 

Edit: Have just read the Kirupa thread and Calypso post, glad to see I'm not the only fool who thought you can reference a MC via .name or .id !

Link to comment
Share on other sites

Okay, so I got the tweens working via an array and they using a TweenMax.allTo command (while learning a little bit more about AS3!), so thanks Carl for the pointers to the resources!

 

My query now is how to get all the points to have a random offset of +/- 10 for each tween.

 

so for example:

 

myTimeline.append(TweenMax.allTo(wave, 1.5, {bezierThrough:[{x:100,y:0}, {x:50, y:50}, {x:0, y:100}]),-1.4);

 

I tried adding "+Math.random()*10" but it seems that this only works once, so all the tweens will be offset by that amount.

 

I just wondered if I should create a function to generate a number, however would that mean having a function for all the x,y values on my curve?

Would that even get around the random number generated only once?

 

X10

Link to comment
Share on other sites

hey x10,

 

allTo works great when all the objects are tweening with the same properties/values.

in order to add multiple tweens to a timeline with slightly different random values I would suggest using a loop to create and append each tween.

 

here is a preview of the output : http://snorkl.tv/dev/randomBezierMotion/

 


import com.greensock.*;


var tl:TimelineMax = new TimelineMax({paused:true})

for (var count:Number = 0; count	var newBox:Box = new Box();
newBox.x = 400
newBox.y = 50
addChild(newBox);
TweenMax.to(newBox, 0, {tint:Math.random()*0xffffff});
//simple motion for test
//tl.append(TweenLite.to(newBox, 1.5, {x:randomNumber(0,800), y:randomNumber(0,600)}), -1.4);

//random bezier
tl.append(TweenLite.to(newBox, 1.5, {bezierThrough:[{x:rn(100,110), y:rn(0,10)}, {x:rn(50,60), y:rn(50,60)}, {x:rn(0,10), y:rn(100,110)}]}), -1.4)
}



tl.play();

//randomNumber
function rn(min:Number, max:Number):Number {

return Math.floor(Math.random() * (1 + max - min) + min);
}

//just for fun:)
stage.addEventListener(MouseEvent.CLICK, reverse)

function reverse(e:Event){
if(tl.reversed){
	tl.play();
	}else{
		tl.reverse();
		}
}

 

 

i've attached a sample fla

 

carl

 

ps. btw the whole instance name v name thing AS3 screwed me up too, that's why I knew about the kirupa thread:)

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.
×