Jump to content
GreenSock

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

Load video in TimelineMax

Recommended Posts

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.

 

 

Link to comment
Share on other sites

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();
}
Link to comment
Share on other sites

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}));

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