playing loaded swf in tween sequence

[abk]

Hello,

 

I'm trying to build one animation sequence using LoaderMax, TimelineMax and TweenLite. The LoaderMax loads an external swf, a couple of images and one mp3 file. The animation sequence is supposed to play the loaded swf, which containes 5 seconds long animation, in left part of the container, simultaneously, one image gets displayed adjacent to the movie being played and another object gets displayed right next to this image. Everything fades out after 5 seconds and newer images get displayed in the container. All other things are working fine except the loaded swf playing part. The swf gets briefly displayed for a fraction of a second and fades out. I need this external swf to be visible till its entire animation gets complete(which is of 5 seconds) and simultaneously other Timeline animations also get executed. Can't figure out how to make this work the way I want.

 

Any help on the matter is highly appreciated.

 

Thanks in advance,

abk

 

 

LoaderMax.activate([imageLoader, MP3Loader, SWFLoader]);
LoaderMax.defaultAuditSize = false;

var time_line:TimelineMax = new TimelineMax();
var Pics = new LoaderMax({name:"Pics", onComplete:startAnim, maxConnection:4, requireWithRoot:this.root, skipFailed:true, autoDispose:true, alternateURL:"http://www.xyz/"});
Pics.append(new SWFLoader("test.swf",{name:"planner", x:0, y:0, alpha:1, container:this, width:400, height:300, autoPlay:false, estimatedBytes:75300}));
Pics.append(new ImageLoader("gen.jpg",{name:"Bg", x:0, y:0, alpha:0, container:this, width:900, height:300, alpha:0, estimatedBytes:7100}));  
Pics.append(new ImageLoader("1.jpg",{name:"one", width:377, height:300, x:0, y:0, alpha:0, container:this, estimatedBytes:28700}));
Pics.append(new ImageLoader("2.png",{name:"two", width:210, height:112, x:380, y:18, alpha:0, container:this, estimatedBytes:11600}));
Pics.append(new ImageLoader("3.png",{name:"three", width:227, height:114, x:380, y:18, alpha:0, container:this, estimatedBytes:16900}));
Pics.append(new MP3Loader("sound.mp3", {name:"sound", volume:1, autoPlay:false, estimatedBytes:13700}));
LoaderMax.prioritize("planner");
Pics.prependURLs("http://xyz/", false);
Pics.load();
var bPic:ContentDisplay = LoaderMax.getContent("Bg");
var pic1:ContentDisplay = LoaderMax.getContent("one");
var test_mc:ContentDisplay;
var test1_mc:MovieClip;
var cap1:ContentDisplay = LoaderMax.getContent("two");
var cap2:ContentDisplay = LoaderMax.getContent("three");
var tSound:Sound = LoaderMax.getContent("sound");
function startAnim(e:LoaderEvent):void
{
 test_mc = LoaderMax.getContent("planner");
 test1_mc = test_mc.rawContent;
 time_line.append(TweenLite.to(bPic, .5, {alpha:1}));
 startAnimOne();
}
function startAnimOne():void
{
test1_mc.play();
time_line.append(TweenLite.to(cap1,.5,{alpha:1}),-.5);
time_line.addCallback(playSound,.2);
time_line.append(TweenLite.to(cap1,.4,{alpha:0, delay:5,overwrite:false}),-.4);
time_line.append(TweenLite.to(test1_mc, 0.5, { alpha:0,  overwrite:false, onComplete:animOut}),-.5);
test1_mc.stop();
}
function playSound():void
{
 tSound.play(0, 5);
}

function animOut():void
{
time_line.append(TweenLite.to(cap2,.4,{alpha:1}),-.2);
time_line.append(TweenLite.to(pic1,.5,{alpha:1}));
time_line.append(TweenLite.to(Pic1,.4,{alpha:0, overwrite:false, delay:15, onComplete:startAnimOne}));
}

[Carl]

i think your problem is in here:

 

function startAnimOne():void
{
test1_mc.play();
time_line.append(TweenLite.to(cap1,.5,{alpha:1}),-.5);
time_line.addCallback(playSound,.2);
time_line.append(TweenLite.to(cap1,.4,{alpha:0, delay:5,overwrite:false}),-.4);
time_line.append(TweenLite.to(test1_mc, 0.5, { alpha:0,  overwrite:false, onComplete:animOut}),-.5);
test1_mc.stop();
}

 

you tell test1_mc to play

and at the same time you start appending tweens to time_line

1.1 seconds after the time_line begins playing you fade out test1_mc

 

right now your time_line animation has no concept of the fact that test1_mc should play for 5 seconds before fading out.

 

instead of telling your test1_mc to play, you could add a tween to your timeline that controls the playback of test1_mc using the frame or frameLabel plugins.

 

tl.append(TweenMax.to(test1_mc, 5, {frame:test.totalFrames, ease:Linear.easeNone}));
//append or insert the other tweens
tl.append(TweenLite.to(test1_mc, .5, {alpha:0}));

[abk]

Thank you Carl...My sincerest thanks for your such prompt replies!

 

Well, I want two images to appear while the movie is playing in the same container along side the movie and stay there till the end of the movie( which means 5 seconds). Then I want all these three elements to fade out and new three elements to appear on the stage. I thought this line should make it work where the final element of these three is fading out after a delay of 5 seconds.

time_line.append(TweenLite.to(cap1,.4,{alpha:0, delay:5,overwrite:false}),-.4);

 

What I don't understand is, why the movie fades out immediately upon appearing on the stage? Even if I tween in the second image after a delay of 5 seconds, the movie fades out immediately after a brief display on stage, the stage remains blank for 5 seconds and then the second image appears.

 

What am I doing wrong?

 

Eagerly awaiting comments...

 

Many thanks in advance,

abk

[Carl]

i'm now having a difficult time following this.

it gets confusing seeing Tweens inserted with delays and negative offset values and overwrite:false.

 

perhaps if you could provide a sample of a very simple timeline not behaving as expected that would be great. instead of loading in a swf, just make test1_mc a movieclip on the stage.

 

just something that I can test and analyze. that would be great.

 

right now from looking at your code, i would think that the test1_mc fading out would be the last thing that happens. If you can re-create an easy to test timeline where the last tween appended runs before the other tweens in the timeline I will have a better shot of figuring this out.

[abk]

Apologies for an extremely delayed rely. The issue is sorted out and the animation is working now as expected. Thanks a lot for the help!