How to get my buttons on top of LoaderMax+

[orbik]

Hi All

 

I am making a interactive image (or at least trying) and thought I would give maxLoader a try as I have been using the amazing TweenMax, but I am having trouble with maxLoader as it's Loading the content on top of everything and I cannot access my navigation buttons that I am tweening in. Also I would like to fire a command once a video completes playing but cant work out how.

 

So for an example lets say I have an image a with two blackholes for the front page.

I would like to be-able to click one of the holes and for the relevent video to play (a flythrough video shooting through that hole).

Once it has played I would like it to either stay on the last frame of the video to use as the background or to switch to an image of the last frame of the relevent video.

For the other blackhole I would like for the fly through video to play and once it has finished to play another video and for that one to keep looping untill the back/reverse button is pressed.

I also need all my navigation buttons to be on the top of the videos/images loaded from LoaderMax.

 

Another alternative is that I could make a long video with all the sections and for me to play and stop at the relevent seconds/frames. but I am not sure how to do that either.

 

Thanks in advance.

 

Here is my code so far with //HELP put besides the parts I think I need help with.

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import com.greensock.easing.*;

import flash.display.MovieClip;
import flash.events.MouseEvent;


TweenMax.to(mainButtons_mc, 0, {autoAlpha:0});
TweenMax.to(hole1Buttons_mc, 0, {autoAlpha:0});
TweenMax.to(hole2Buttons_mc, 0, {autoAlpha:0});

//Load Assets
var urls:Array=["homeScreen.jpg", "hole1.f4v", "holeLoop.f4v", "hole1Reverse.f4v", "hole2.f4v", "hole2Reverse.f4v"];
LoaderMax.activate([imageLoader, VideoLoader]);
var queue:LoaderMax=LoaderMax.parse(urls,{onComplete:completeHandler},{autoPlay:false});
queue.prependURLs("assets/");
queue.load();


//On Assets Loaded Complete (Show home screen Image and tween home buttons in)
function completeHandler(event:LoaderEvent):void {
var viewer:ImageLoader=LoaderMax.getLoader("assets/homeScreen.jpg");
addChild( viewer.content );
TweenLite.to(mainButtons_mc, 1, {autoAlpha:1}); //HELP!!!! I Need these buttons on top of the MaxLoader video as I cant press them.
}


//Home Screen Buttons
mainButtons_mc.hole1_mc.addEventListener(MouseEvent.CLICK, hole1);
mainButtons_mc.hole2_mc.addEventListener(MouseEvent.CLICK, hole2);

//Hole 1 Buttons
hole1Buttons_mc.back_mc.addEventListener(MouseEvent.CLICK, hole1Reverse);
//Hole 2 Buttons
hole2Buttons_mc.back_mc.addEventListener(MouseEvent.CLICK, hole2Reverse);


//Home Screen Button Functions

//HELP!!!! How can I get this function to play the holeLoop function once the video has played through and then keep looping?
function hole1(event:MouseEvent):void {
TweenLite.to(mainButtons_mc, 1, {autoAlpha:0});
var viewer:VideoLoader=LoaderMax.getLoader("assets/hole1.f4v");
addChild( viewer.content);
viewer.playVideo();
TweenLite.to(hole1Buttons_mc, 1, {autoAlpha:1}); //HELP!!!! I Need these buttons on top of the MaxLoader video as I cant press them.
}

//HELP!!!! How can I get this video to loop after hole1 video has completed playing and for it to keep looping untill told otherwise and for the hole1Buttons_mc to stay on top?
function holeLoop(event:MouseEvent):void { //Guess this needs to be a loader event.
var viewer:VideoLoader=LoaderMax.getLoader("assets/holeLoop.f4v"); //Guess I need an onComplete here.
addChild( viewer.content);
viewer.playVideo(); //Needs to loop.
}

function hole2(event:MouseEvent):void {
TweenLite.to(mainButtons_mc, 1, {autoAlpha:0});
var viewer:VideoLoader=LoaderMax.getLoader("assets/hole2.f4v");
addChild( viewer.content);
viewer.playVideo();
TweenLite.to(hole2Buttons_mc, 1, {autoAlpha:1}); //HELP!!!! I Need these buttons on top of the MaxLoader video as I cant press them.
}

//Hole 1 Button Functions
//HELP!!!! I need to show the homescreen.jpg once this video completes
function hole1Reverse(event:MouseEvent):void {
TweenLite.to(hole1Buttons_mc, 1, {autoAlpha:0});
var viewer:VideoLoader=LoaderMax.getLoader("assets/hole1reverse.f4v");
addChild( viewer.content);
viewer.playVideo();
TweenLite.to(mainButtons_mc, 1, {autoAlpha:1}); //HELP!!!! I Need these buttons on top of the MaxLoader video as I cant press them.
}

//Hole 2 Button Functions
//HELP!!!! I need to show the homescreen.jpg once this video completes
function hole2Reverse(event:MouseEvent):void {
TweenLite.to(hole2Buttons_mc, 1, {autoAlpha:0});
var viewer:VideoLoader=LoaderMax.getLoader("assets/hole2reverse2.f4v");
addChild( viewer.content);
viewer.playVideo();
TweenLite.to(mainButtons_mc, 1, {autoAlpha:1}); //HELP!!!! I Need these buttons on top of the MaxLoader video as I cant press them.
}

[Carl]

Hello Orbik,

 

It seems the majority of your troubles is coming from responding to a given video being done playing.

 

you can set up an event listener for VIDEO_COMPLETE and then trigger whatever function you like.

 

the basic setup is like this:

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;

var viewer:VideoLoader=LoaderMax.getLoader("assets/hole1reverse.f4v");

viewer.addEventListener(VideoLoader.VIDEO_COMPLETE, done);


//this function will run when hole1reverse.f4v is done playing.
function done(e:LoaderEvent):void{
trace("done");

//tell another video to play


}

 

see if that helps get things working how you would like.

 

the code you posted is a bit long to easily digest.

[orbik]

Thanks Carl

 

Sorry about the code I am a complete novice at Action Script and wrote that as an example as my project code is probably a lot worse to understand so thanks for taking the time to try and understand it.

 

So I have used the VIDEO_COMPLETE to fire off the loop animation but now I am struggling to remove the event listener. It is as if the video keeps playing in the background and when it reaches the end it pops back on screen at the start of the loop animation. How do I stop the video playing in the background.

I have tried "viewer.removeEventListener(VideoLoader.VIDEO_COMPLETE, done);" and put that in the function of all of my other buttons to try and remove it what ever button is pushed but it keeps popping back on the screen.

 

Am I right in thinking that LoaderMax is bringing all of the content into my videoCont_mc and stacking it up in layers and all I am doing is bringing my videos/images to the top of the stack?

[Carl]

here is an example fla with mov.

it will stop looping as soon as you press "stop looping" button.

 

here is the code:

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import flash.events.MouseEvent;

output_txt.text = "video will loop until you hit stop looping button";

var video:VideoLoader = new VideoLoader("angrybirds.mov", {container:this});

video.addEventListener(VideoLoader.VIDEO_COMPLETE, done);

function done(e:LoaderEvent):void{
     video.gotoVideoTime(0, true);

}



stop_btn.addEventListener(MouseEvent.CLICK, stopLoop);

function stopLoop(e:MouseEvent):void{
video.removeEventListener(VideoLoader.VIDEO_COMPLETE, done);
output_txt.text = "looping off";
}

video.load();

 

 

 

 

i think your problem is that you define your VideoLoader var inside a function. When you do that, the variables that you create inside a function can not be accessed outside the function.

 

declare your VideoLoader var outside any functions like in my example.

[orbik]

Cheers Carl

 

I have taken my vars out of my functions and things are working well. Would you do my one last favor and look at my code and tell me if I should be making a var for each video and then call as I have in my button functions or is there a better way than using addChild as I have. I am using the addChild so I can have my buttons on top of the videos.

 

Again thank you.

 

import com.greensock.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.SWFLoader;
import com.greensock.loading.VideoLoader;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.easing.*;

import flash.display.Sprite;
import flash.events.MouseEvent;

//LoaderMax Setup 
//...............................................................................................
LoaderMax.activate([imageLoader, SWFLoader, VideoLoader]);

var urls:Array = ["serverRoomFlyIn.f4v"
 , "boardRoomFlyIn.f4v"
 , "monitorFlyIn.f4v"
 , "boardRoomLoopAnimation.f4v"
 , "serverRoomFlyOut.f4v"
 , "monitorFlyOut.f4v"
 , "boardRoomFlyOut.f4v"
 , "home.jpg"];

var queue:LoaderMax = LoaderMax.parse(urls, 

 {maxConnections:1,
  onComplete:_queueCompleteHandler, 
 {autoPlay:true});

queue.prependURLs("assets/");
queue.load();

var serverRoomFlyIn:VideoLoader=LoaderMax.getLoader("assets/serverRoomFlyIn.f4v");
var boardRoomFlyIn:VideoLoader=LoaderMax.getLoader("assets/boardRoomFlyIn.f4v");
var monitorFlyOut:VideoLoader=LoaderMax.getLoader("assets/monitorFlyOut.f4v");


function _queueCompleteHandler(event:LoaderEvent):void {
videoCont_mc.addChild( serverRoomFlyIn.content );
}

//...............................................................................
boardroomOut_btn.addEventListener(MouseEvent.CLICK,boardroomOut);
serverRoomOut_btn.addEventListener(MouseEvent.CLICK,serverRoomOut);
monitorOut_btn.addEventListener(MouseEvent.CLICK,monitorOut);

function boardroomOut(event:MouseEvent):void {
videoCont_mc.addChild( boardRoomFlyIn.content );
boardRoomFlyIn.gotoVideoTime(0, true);
monitorFlyOut.removeEventListener(VideoLoader.VIDEO_COMPLETE, done);
}
function serverRoomOut(event:MouseEvent):void {
videoCont_mc.addChild( serverRoomFlyIn.content );
serverRoomFlyIn.gotoVideoTime(0, true);
monitorFlyOut.removeEventListener(VideoLoader.VIDEO_COMPLETE, done);
}
function monitorOut(event:MouseEvent):void {
videoCont_mc.addChild( monitorFlyOut.content );
monitorFlyOut.gotoVideoTime(0, true);
monitorFlyOut.addEventListener(VideoLoader.VIDEO_COMPLETE, done);
}

function done(e:LoaderEvent):void {
monitorFlyOut.gotoVideoTime(0, true);
}

[Carl]

of it is working and you understand it, I'd say stick with it.

 

whenever you have multiple functions that do pretty much the same thing

 

addChild

start playing a video

remove eventListeners

 

there are always ways of optimizing further.

 

you could make a function like:

 

function playVideo(videoToPlay):void{
   videoCont_mc.addChild( videoToPlay.content );
   videoToPlay.gotoVideoTime(0, true);
   monitorFlyOut.removeEventListener(VideoLoader.VIDEO_COMPLETE, done);
}

 

your button code would look like this:

 

function boardroomOut(event:MouseEvent):void {
 playVideo(boardRoomFlyIn)
}

function serverRoomOut(event:MouseEvent):void {
  playVideo(serverRoonFlyIn);
}

...

 

 

all this does is minimize the repetition of similar code and also makes it easier if you want to add functionality to every video when it plays.

perhaps you want the volume to be set at .5. You could just adjust the playVideo() function in one place to have some volume code then all videos would have the same starting volume.

[orbik]

Carl I can not thank you enough that is much simpler and its working well. Thank you for all your help and just one more question, when the video switches theres a green screen that pops up inbetween the switch over. Is there a way of preventing that if not is there a way of changing its color to white?

Also do you think if I was to piece all my videos together into one video and used cuepoints rather than playing a new video that would stop the switch issue?

 

Again I cant thank you enough.

[Carl]

i don't know why there is a green screen. it shouldn't be there unless you specified it somehow.

 

did you set a background color to a loader or is it in one of your symbols?

 

also VideoLoaders have a bgColor and bgAlpha (check docs) maybe you activated one of those?

 

i imagine having one video would cure the issue.