Load video in TimelineMax

[Apogee 2 Likes (Newbie)]

Hi Greensock fans!

 

I'm trying to load a video into a TimelineMax which contains animated graphics and text symbols. 

I hope to make it something like a TV commercial or online promo.

This code plays the animations, but the video doesn't load.

If i use the timeline.addPause, nothing plays.

If i change video autoPlay to true, video plays, but is not in sequence.

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.loading.*;

import com.greensock.events.LoaderEvent;

import com.greensock.loading.VideoLoader;

import com.greensock.loading.LoaderMax;

 

var timeline:TimelineMax = new TimelineMax();

 

timeline.append(TweenMax.to(two1_mc, .5, {y:230, x:700, ease:Elastic.easeOut, delay:0}));

timeline.append(TweenMax.to(two1_mc, 1, {x:700, Y:240, rotation:0, scaleX:1.5, scaleY:1.5}));

timeline.append(TweenMax.to(two1_mc, 2, {y:-300, x:-750, z:-1000, delay:3, alpha:0}));

 

timeline.append(TweenMax.to(TextThree_mc, .5, {x:700, y:227, scaleX:1.25, scaleY:1.25}), -1);

timeline.append(TweenMax.to(TextThree_mc, .1, {rotation:0, x:700, y:227, scaleX:1.6, scaleY:1.6}));

timeline.append(TweenMax.to(TextThree_mc, .8, {x:500, z:-1000, delay:1, alpha:0}));

 

//timeline.addPause();

 

var queue:LoaderMax = new LoaderMax();

queue.append(new VideoLoader("bookcliffs.flv", {container:this, autoPlay:false}));

 

queue.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);

 

function onComplete(event:LoaderEvent):void{

 

trace("video done playing");

 

timeline.play()

}

queue.load();

 

timeline.resume();

 

timeline.append(TweenMax.to(four1_mc, .5, {y:220, x:700, scaleX:2, scaleY:2, delay:0}));

timeline.append(TweenMax.to(four1_mc, .5, {y:245, x:700, scaleX:2.5, scaleY:2.5, delay:1}));

timeline.append(TweenMax.to(four1_mc, .5, {scaleX:2, scaleY:2}));

 

timeline.append(TweenMax.to(five1_mc, 3, {x:800, y:240}));

timeline.append(TweenMax.to(five1_mc, .5, {scaleX:3, scaleY:3}));

timeline.append(TweenMax.to(five1_mc, .5, {rotationX:120, x:-100, y:30, z:-1000, delay:0, alpha:0}));

 

Obviously, I'm missing something, maybe this isn't possible, but this would be of value to myself and others if it will work.

 

Thanks in advance for the help. Much appreciated.

 

 

[Carl 9,066 Likes (Superhero)]

Hi,

 

Putting the video loading code in the middle of your timeline doesn't mean its going to run at that point in the timeline.

 

You would need to put a callback function in your timeline that tells the video to play at a certain point

 

Something more like

var tl = new TimelineLite();

tl.to(something, 10, {left:200})
  .addPause()
  .call(playVideo)
  .to(something, 10, {left:0});

function playVideo() {
  //assuming the video has already loaded
  LoaderMax.getLoader("bookcliffs.flv").playVideo();
}

[Apogee 2 Likes (Newbie)]

OK. This works nicely! Thanks to Carl and Jack (from a previous post)

Loads video at 7 second point, positions it in center and allows time for playback, then removes it from the stage followed by remaining animation content.

Thanks again!!!

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.loading.*;

import com.greensock.events.LoaderEvent;

import com.greensock.loading.VideoLoader;

import com.greensock.loading.LoaderMax;

 

var video:VideoLoader = new VideoLoader("bookcliffs.flv", {autoPlay:false, container:this});

video.load();

 

var timeline:TimelineMax = new TimelineMax();

 

video.content.x = -500

 

timeline.append(TweenMax.to(two1_mc, .5, {y:230, x:700, ease:Elastic.easeOut, delay:0}));

timeline.append(TweenMax.to(two1_mc, 1, {x:700, Y:240, rotation:360, scaleX:1.5, scaleY:1.5}));

timeline.append(TweenMax.to(two1_mc, 2, {y:-300, x:-750, z:-1000, delay:3, alpha:0}));

 

timeline.append(TweenMax.to(TextThree_mc, .5, {x:700, y:227, scaleX:1.25, scaleY:1.25}), -1);

timeline.append(TweenMax.to(TextThree_mc, .1, {rotation:0, x:700, y:227, scaleX:1.6, scaleY:1.6}));

timeline.append(TweenMax.to(TextThree_mc, .8, {x:500, z:-1000, delay:1, alpha:0}));

 

timeline.append(TweenMax.to(video.content, .5, {x:200, y:100, delay:-1}));

timeline.addCallback(video.playVideo, 7);

timeline.append(TweenMax.to(video.content, .5, {rotationY:60, x:1000, y:100, delay:10}));

 

timeline.append(TweenMax.to(four1_mc, .5, {y:220, x:700, scaleX:2, scaleY:2, delay:-.5}));

timeline.append(TweenMax.to(four1_mc, 1.2, {rotationX:30, rotationZ:30, y:245, x:700, scaleX:2.5, scaleY:2.5, delay:1}));

timeline.append(TweenMax.to(four1_mc, .5, {rotationX:0, rotationZ:0, scaleX:2, scaleY:2}));

 

timeline.append(TweenMax.to(five1_mc, 3, {x:800, y:240}));

timeline.append(TweenMax.to(five1_mc, .5, {scaleX:3, scaleY:3}));

timeline.append(TweenMax.to(five1_mc, .5, {rotationX:120, x:-100, y:30, z:-1000, delay:0, alpha:0}));