Jump to content
GreenSock

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

Video in TimelineMax using addCallback

Recommended Posts

Carl answered my first inquiry about using a short video (flv) as part of a TimelineMax project.

Thank you Carl, but I don't know how to set up the pause(), addCallback, and resume().

Here's an abbreviated version with an example of what I'd like to do (red text):

 

import com.greensock.*;
import com.greensock.easing.*;

var timeline:TimelineMax = new TimelineMax();

timeline.append(TweenMax.to(two1_mc, .5, {y:230, x:180, ease:Elastic.easeOut, delay:-1}));
timeline.append(TweenMax.to(two1_mc, 1, {x:175, 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}));

 

//pause the timeline:
timeline.pause();
//tell the video to play:
timeline.addCallback(playVideo, 0, ["video_mc"]);
//resume the timeline when the video is done playing (VIDEO_COMPLETE event)
timeline.resume();

 

timeline.append(TweenMax.to(TextThree_mc, .5, {x:205, y:227, scaleX:1.25, scaleY:1.25}), -15);
timeline.append(TweenMax.to(TextThree_mc, .1, {rotation:0, x:175, y:227, scaleX:1, scaleY:1}));
timeline.append(TweenMax.to(TextThree_mc, .8, {x:500, z:-1000, delay:1, alpha:0}));

 

I've been through the forums and researched online but don't understand the correct sequence or how to set up the play function for addCallback or onComplete / VIDEO_COMPLETE event.

 

Any help is much appreciated. Thanks in advance.

Link to comment
Share on other sites

When you are constructing your timeline you can insert a pause wherever you like (as opposed adding a callback which then tells the timeline to pause). This is a relatively new feature so make sure you have the latest version of v12: http://www.greensock.com/?download=GSAP-AS3

 

docs for addPause()

http://api.greensock.com/as/com/greensock/TimelineLite.html#addPause()

 

//pause the timeline

timeline.addPause();

 

---

 

Below is some code that will allow your timeline to resume playing when the video is done playing

 

 

import com.greensock.events.LoaderEvent;
import com.greensock.loading.VideoLoader;
import com.greensock.loading.LoaderMax;


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


video.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);

function onComplete(e:LoaderEvent):void{
trace("video done playing");
timeline.play()
}
video.load();
Link to comment
Share on other sites

Thanks again for the help Carl.

This code gives me an error: expecting rightbrace before autoPlay.

If I delete the autoPlay:false, there's no error, the animations run, but (as expected) the video plays in its own timeline.

 

import com.greensock.*;
import com.greensock.easing.*;
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:180, ease:Elastic.easeOut, delay:0}));
timeline.append(TweenMax.to(two1_mc, 1, {x:175, 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:205, y:227, scaleX:1.25, scaleY:1.25}), -1);
timeline.append(TweenMax.to(TextThree_mc, .1, {rotation:0, x:175, y:227, scaleX:1, scaleY:1}));
timeline.append(TweenMax.to(TextThree_mc, .8, {x:500, z:-1000, delay:1, alpha:0}));

 

//timeline.pause();

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

video.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);

function onComplete(e:LoaderEvent):void{
trace("video done playing");
timeline.play()
}
video.load();

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

 

Also need to position the video. Should it be inside an mc?

 

Your advice is much appreciated!

Link to comment
Share on other sites

Sorry, looks like it could have been a typo in the code I provided. You need a comma before autoPlay false:

var video:VideoLoader = new VideoLoader("bookcliffs.flv", {container:this, autoPlay:false});
Link to comment
Share on other sites

As for positioning the video, you can just reference the content of the VideoLoader

 

 

video.content.x = 200

 

or tween it

 

TweenLite.to(video.content, 0.2, {x:200})

Link to comment
Share on other sites

Carl,

Thanks again for your continuing support.

There still seems to be a problem. Timeline runs, but video does not.

I'll be studying addPause and LoaderMax for a couple of days, maybe determine what's wrong.

Also making sure I have the latest v.12.

 

Meanwhile, here's an interactive training support project I've done if you're interested. (It's not TimelineMax).

http://www.nafri.gov/Flash/NAFA_9.11.swf

Can select landscape, drag and drop symbols, etc.

Hold down keys indicated under "Effects" to show smoke, drop water from planes, etc.

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.

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

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Dear someone,

 

Ive been trying to solve this for literally 10 hours. Ive tried having my timeline and restart method in a function and to my knowledge, exhausted all existing snippets & videos on the internet. This makes the timeline jump straight to the end in bizarre bursts, play the video, then restart for me, but when it restarts the video no longer plays.. (I did include restart instead of play because Im trying to get a timeline to loop.) Ive gotten every conceivable outcome except the one I am trying to achieve and can no longer think about the problem clearly. 

Any help would be wildly appreciated, here's what I've got - bear in mind this is probably jumbled gibberish by now.. this is simply the latest version of the code which Ive tried to get as close to the original but seems to be bringing me further from the goal - at this point it just sits there laughing at me

 

Ok now Ive ctrl+z'd all the way back to when it was working more closely.. seems to do what it should... one time

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;

TweenMax.to(img7,0,{alpha:0});
TweenMax.to(img8,0,{alpha:0});
TweenMax.to(img9,0,{alpha:0});

/*
var video:VideoLoader = new VideoLoader("OneWeb1.mp4", {onComplete:electricSats, container:videoHolder, width:879, height:437, scaleMode:"stretch", crop:true, autoPlay:false});
video.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);*/


//video.pause();

var myTimeline:TimelineMax = new TimelineMax()
	 trace("Starting timeline");
	 myTimeline.to(img7, 0, {alpha:0})
	 
			   //.addLabel("spinn")
				
			   .to(videoHolder, 0 , {alpha:0})
			   .to(bubi, 0, {x:383.80})
		  	   .to(img7, 1, {alpha:1}, {onComplete:trace("img1")})
			   .to(img7, 1, {alpha:0, delay:0})
			   .to(img8, 0, {alpha:0})
			   .to(bubi, 0, {x:427.80})
		  	   .to(img8, 1, {alpha:1}, trace("img2"))
			   .to(img8, 1, {alpha:0, delay:0})
			   .to(img9, 0, {alpha:0})
			   .to(bubi, 0, {x:467.80})
		  	   .to(img9, 1, {alpha:1}, trace("img3"))
			   .to(img9, 1, {alpha:0, delay:0})
			   .to(bubi, 0, {x:511.80})
			   .to(videoHolder, 1 , {alpha:1}, trace("videoHolder alpha 1"))
			   var video:VideoLoader = new VideoLoader("OneWeb1.mp4", {container:videoHolder, width:879, height:437, scaleMode:"stretch", crop:true, autoPlay:false});  
			   
			   video.addEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);
			   video.load();
			   

			   
			   myTimeline.addCallback(video.playVideo, 7);
			   //video.gotoVideoTime(0, true);
			   			   //video.gotoVideoTime(0, true, true);
			   //addChild(VideoLoader.content);
			   //video.gotoVideoTime(0);
			  // myTimeline.insert(TweenMax.to(video, 0, ));
			   //myTimeline.gotoVideoTime(0);
			   //timeline.pause();
			   /*	   
			   function playVideo(e:LoaderEvent):void{
				   VideoLoader.video.gotoVideoTime(0.1, true);
			   }
			   */
			   //
			   
function rewindAndPause(evt:Event=null):void{
								
			trace("timeLine restart1");
			video.pauseVideo();
			//rewind the video so that when we fade it in again later, it's already displaying the first frame and there's no delay skipping to it. ;
			video.gotoVideoTime(0);
			TweenMax.to(videoHolder, 1, {alpha:0, onComplete:restartLine, delay:1});
	
			
};

				
function onComplete(e:LoaderEvent):void{	
					trace("video done playing");
					video.removeEventListener(VideoLoader.VIDEO_COMPLETE, onComplete);
					trace("video done playing2");
					TweenMax.to(this,0, {onComplete:rewindAndPause, delay:1});
					trace("video done playing3");
					};
					

function restartLine(evt:Event=null):void{
	trace("timeLine restart2");
			myTimeline.restart();
}

			
stop(); 
please help!
 
All I want is three images to fade in and out in succession, then a video to play, then repeat the timeline ad infinitum.. Im losin it here.. 
Link to comment
Share on other sites

try this reduced code

 

 

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;
import flash.events.Event;

videoHolder.alpha = 1;
img7.alpha = 0;

var video:VideoLoader = new VideoLoader("OneWeb1.mp4", {onComplete:playTimeline, container:videoHolder, autoPlay:false}); 

video.addEventListener(VideoLoader.VIDEO_COMPLETE, playTimeline); 

video.load(); 


var myTimeline:TimelineLite = new TimelineLite({onComplete:playVideo}); 
myTimeline.to(img7, 1, {alpha:1, rotation:180})
.to(img7, 1, {alpha:0, scale:0}) 

function playTimeline(e:Event = null) { 
  myTimeline.restart(); 
} 

function playVideo(){ 
  video.gotoVideoTime(0, true); 
}

also, never do this

.to(videoHolder, 1 , {alpha:1}, trace("videoHolder alpha 1"))

You can't place a trace statement in as the position parameter, please use call()

 

http://greensock.com/asdocs/com/greensock/TimelineLite.html#call()

.to(videoHolder, 1 , {alpha:1})
.call(trace, ["some words");
Link to comment
Share on other sites

Oh my God thanks so much for answering, I'd just updated it and thought I'd gotten it figured down to something fishy in the constructor arguments!

  • Like 1
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.
×