HyperNerd

Makes sense, I'll have to dig around videoTime a bit. The only issue with bitmap screen grab is that I actually need to load a very high res image in place of the paused frame. I'll see what I can find. Thanks as always, Carl!

Hello! I am looking for a way to have VideoLoader call a corresponding image frame on pause. So, let's say I have VideoLoader playing an f4v video at 30fps and I would have a folder with jpg frames saved out in matching 30 fps sequence. For example, how could I go about coding pause returns matching frame? Say, on frame 120 of f4v and show 120.jpg? Hope this idea makes sense...

Should have caught that. Thanks, Carl!

Hello! Does VideoLoader have a setting to call a function when video playback reaches the end of a video? I'm sure it does because it's AWESOME, but my instruction reading skills are not. Any help? Thanks!

Ah, good find! Still didn't fix the problem though.

Thanks Jack, I messaged you a link to the dev site. The code in question is in js/panels.js

Still stops after the first loop if I remove them. I'm using jQuery show/hide because of the way the page is structured. The div's replace each other.

Thanks for the help, Jack! I tried this and the loop still stops once when I send it back to fadeOne again. function fadeOne() { TweenLite.to(a1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:two, onCompleteScope:this}); } function two() { $("#a1").hide(); $("#b1").show(); var b1 = document.getElementById("b1"); TweenLite.from(b1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut}); var b2 = document.getElementById("b2"); TweenLite.from(b2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut}); var b4 = document.getElementById("b4"); TweenLite.from(b4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeTwo, onCompleteScope:this}); } function fadeTwo() { TweenLite.to(b1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:one, onCompleteScope:this}); } function one() { $("#b1").hide(); $("#a1").show(); var a1 = document.getElementById("a1"); TweenLite.from(a1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut}); var a2 = document.getElementById("a2"); TweenLite.from(a2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut}); var a4 = document.getElementById("a4"); TweenLite.from(a4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeOne, onCompleteScope:this}); }

Hello, I had this idea to use onComplete on a delayed function to create kind of a looping effect, but it appears that once I call a function from onComplete more than once, it stops. I suppose my idea isn't possible this way? function fadeOne() { TweenLite.to(a1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:two}); } function two() { $("#a1").hide(); $("#b1").show(); var b1 = document.getElementById("b1"); TweenLite.from(b1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut}); var b2 = document.getElementById("b2"); TweenLite.from(b2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut}); var b4 = document.getElementById("b4"); TweenLite.from(b4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeTwo}); } function fadeTwo() { TweenLite.to(b1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:one}); } function one() { $("#b1").hide(); $("#a1").show(); var a1 = document.getElementById("a1"); TweenLite.from(a1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut}); var a2 = document.getElementById("a2"); TweenLite.from(a2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut}); var a4 = document.getElementById("a4"); TweenLite.from(a4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeOne}); }

Hi Carl, Yes, that is exactly why. I'd like to be able to load a hi-res jpg dynamically of the currently paused VideoLoader frame. Does VideoLoader have any feature to track frame count/current frame? Maybe it's something that could be done by time? That would be 24-30 frames in each second though... I'm only intermediate with AS3 and newer to Greensock, but I'd assume we would code something like: function onPause(e:LoaderEvent):void { if (currentFrame=="_____") { currentImage = new ImageLoader("_____", {...}); currentImage.load(); setChildIndex(currentImage.content, 1); } } function onResume():void { TweenLite.to(currentImage.content), 1, {autoAlpha:0, onComplete:onPlay}); } function onPlay():void { myVideo.playVideo(); currentImage.dispose(); } Just as a basic idea. I clearly don't quite grasp the logic yet. How do we match up the "_____" in my example? Maybe set up some kind of array and reference an XML file? As a specific example, I'd like to achieve something similar to: www.onlybecausewecan.com

Hi again! Tonight's challenge - Let's say I have VideoLoader playing along and I also have an asset folder with a still frame for each and every frame of said video. How would I go about setting up my code so that when the video is paused, the current frame is read and the matching still frame is loaded? The only methods I can think of involve embedding the video in the SWF, which would be too large. I'm hoping there is a way to leverage VideoLoader to do this. Also, there could potentially be 6000 jpg stills, I'd need a way to short-hand the code. Any ideas or suggestions on something like this? Thanks!!!

Thanks for the added input!

Figured this one out... by embracing TweenLite, of course! TweenLite.to(mainVideo.content, 0, {alpha:0}); ... TweenLite.to(mainVideo.content, 0, {alpha:1});

Sorry for all the questions...just trying to learn! So, now I am attempting to set VideoLoader visibility true/false. mainVideo = new VideoLoader("path", { name:"mainVideo", container:this, bgColor:0x000000, scaleMode:"proportionalInside", autoPlay:true} ); mainVideo.visible = false; Obviously, it's not working: Cannot create property visible on com.greensock.loading.VideoLoader How does one utilize a similar visibility feature with VideoLoader?

Hi Carl, I have the resume(); function and the onPlay() function because the SWFLoader only appears when the video is paused at a certain cue point. When it's paused without the SWFLoader, onPlay(); works just fine, but once I load the SWF, I have a separate function resume() to try and clear the SWF and then get us back to the video again. Everytime the video is paused, the bgaudio plays, so I'm calling bgAudio.dispose() anytime the video is "un-paused". Again, this all works until the SWF is loaded, then I'm not sure how to remove it. Would that normally be dispose like any other loader?

Hello, I'm working on a project that consists of a VideoLoader that when paused loads a SWF on top. I need to dispatch removal of the SWFLoader and resume the video beneath. I have my play/pause working with the Video Loader and I even have the SWFLoader appearing, but I'm not sure how to clear it and return to the video. I've created a "removeStill" mouse event with the following code: if (previousCuePointFired=="cue2") { trace("LOAD Cue2 SWF"); stillSWF = new SWFLoader("assets/stills/a1.swf", {name:"pannerSWF", container:this, x:0, y:0, onInit:initHandler, estimatedBytes:20480}); stillSWF.load(); setChildIndex(loader.content, 0); } } function initHandler(event:LoaderEvent):void { //fade the swf in as soon as it inits TweenLite.from(event.target.content, 1, {alpha:0}); swfBTN.visible = true; swfBTN.addEventListener(MouseEvent.CLICK, removeStill); } function removeStill(e:MouseEvent):void { swfBTN.visible = false; stillSWF.dispose(); resume(); } My error is: Error #1010: A term is undefined and has no properties. at pages::ProductAPage/removeStill() I have been successfully clearing audio and video assets with dispose();, but now I'm stuck. Not sure if this is the most efficient way to build my project, but here is the full code if interested: package pages { import com.gaiaframework.templates.AbstractPage; import com.gaiaframework.events.*; import com.gaiaframework.debug.*; import com.gaiaframework.api.*; import flash.display.*; import flash.events.*; import com.greensock.TweenMax; import com.greensock.*; import com.greensock.loading.*; import com.greensock.loading.display.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.VideoLoader public class ProductAPage extends AbstractPage { public var pauseBTN; public var playBTN; public var swfBTN; public var mainVideo; public var videoFlash; public var bgAudio; public var filmAudio; public var stillSWF; //create a var to track the name of each cuePoint as it is fired public var previousCuePointFired:String; public function ProductAPage() { super(); alpha = 0; } override public function transitionIn():void { super.transitionIn(); TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete}); pauseBTN.buttonMode = true; pauseBTN.useHandCursor = true; playBTN.buttonMode = true; playBTN.useHandCursor = true; swfBTN.buttonMode = true; swfBTN.useHandCursor = true; pauseBTN.addEventListener(MouseEvent.CLICK, onPause); playBTN.addEventListener(MouseEvent.CLICK, onPlay); swfBTN.visible = false; initVideo(); //Begin listening for cuepoints and store them with the following onCue function mainVideo.addEventListener(VideoLoader.VIDEO_CUE_POINT, onCue); } function onCue(e:LoaderEvent):void { trace("cuepoint fired: " + e.data.name); //store your cue point name to be recalled as "previousCuePointFired" previousCuePointFired = e.data.name; } function initVideo():void { //create a VideoLoader mainVideo = new VideoLoader("assets/Liberation.f4v", { name:"mainVideo", container:this, bgColor:0x000000, scaleMode:"proportionalInside", autoPlay:true} ); //Loading video and set to bottom of display stack mainVideo.load(); setChildIndex(mainVideo.content, 0); } function onPause(e:MouseEvent):void { pauseBTN.visible = false; playBTN.visible = true; //tween the video volume down to 0 over 1 second with onComplete call for pause TweenLite.to(mainVideo, .5, {volume:0, onComplete: soundFadeComplete}); //Launch next functions initFlashFX(); } function soundFadeComplete():void { mainVideo.pauseVideo(); //Call last cuepoint if paused and check for which swf to load if(mainVideo.pauseVideo) { trace("previousCuePointFired = " + previousCuePointFired); initCue(); } //Load background audio (-1 loops indefinitely) bgAudio = new MP3Loader("assets/bg_loop.mp3", {autoPlay:true, volume:.6, repeat:-1} ); bgAudio.load(); } //--------------------------------Call to load based on last/current cuepoit--------------------------------// function initCue():void { if (previousCuePointFired=="cue1") { trace("LOAD Cue1 SWF"); var loader:SWFLoader = new SWFLoader("assets/stills/a1.swf", {name:"pannerSWF", container:this, x:0, y:0, onInit:initHandler, estimatedBytes:20480}); loader.load(); setChildIndex(loader.content, 0); } if (previousCuePointFired=="cue2") { trace("LOAD Cue2 SWF"); stillSWF = new SWFLoader("assets/stills/a1.swf", {name:"pannerSWF", container:this, x:0, y:0, onInit:initHandler, estimatedBytes:20480}); stillSWF.load(); setChildIndex(loader.content, 0); } } function initHandler(event:LoaderEvent):void { //fade the swf in as soon as it inits TweenLite.from(event.target.content, 1, {alpha:0}); swfBTN.visible = true; swfBTN.addEventListener(MouseEvent.CLICK, removeStill); } function removeStill(e:MouseEvent):void { swfBTN.visible = false; stillSWF.dispose(); resume(); } //Fancy pause screen flash function initFlashFX():void { videoFlash = new VideoLoader("assets/Flash_1.flv", { name:"vidFlash", container:this, scaleMode:"proportionalInside", autoPlay:true} ); //start loading and set to bottom of display stack videoFlash.load(); setChildIndex(videoFlash.content, 1); TweenMax.to(this, 1, {onComplete:flashComplete}); filmAudio = new MP3Loader("assets/filmSound.mp3", {autoPlay:true, volume:.8, repeat:0} ); filmAudio.load(); } //Clean up screen flash child... might not need this function flashComplete():void { removeChildAt(1); filmAudio.dispose(); } function onPlay(e:MouseEvent):void { pauseBTN.visible = true; playBTN.visible = false; mainVideo.playVideo(); //Fade volume in over 1 second to 100% (1) TweenLite.to(mainVideo, 1, {volume:1}); //Remove backgound audio bgAudio.dispose(); } function resume():void { mainVideo.playVideo(); //Fade volume in over 1 second to 100% (1) TweenLite.to(mainVideo, 1, {volume:1}); //Remove backgound audio bgAudio.dispose(); } override public function transitionOut():void { super.transitionOut(); TweenMax.to(this, 0.3, {alpha:0, onComplete:transitionOutComplete}); } } }

Hi gang, I have been attempting to implement Liquid Stage with my Gaia project and I'm running into some difficulties. Using this post as an example: http://forums.greens...stage-and-gaia/ I'm instantiating Liquid Stage in my Index.as and attempting to call it from ProductApage as follows: Index.as package pages { import com.gaiaframework.templates.AbstractPage; import com.gaiaframework.events.*; import com.gaiaframework.debug.*; import com.gaiaframework.api.*; import flash.display.*; import flash.events.*; import com.greensock.TweenMax; import com.greensock.layout.*; public class IndexPage extends AbstractPage { public var lStage:LiquidStage; public function IndexPage() { super(); alpha = 0; } override public function transitionIn():void { super.transitionIn(); TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete}); init(); } override public function transitionOut():void { super.transitionOut(); TweenMax.to(this, 0.3, {alpha:0, onComplete:transitionOutComplete}); } private function init():void { //Gaia.api.getWidth() and Gaia.api.getHeight() refers to the very original width and height lStage = new LiquidStage(this.stage, Gaia.api.getWidth(), Gaia.api.getHeight(), Gaia.api.getWidth(), Gaia.api.getHeight()); } } } ProductAPage.as package pages { import com.gaiaframework.templates.AbstractPage; import com.gaiaframework.events.*; import com.gaiaframework.debug.*; import com.gaiaframework.api.*; import flash.display.*; import flash.events.*; import com.greensock.TweenMax; import com.greensock.*; import com.greensock.loading.*; import com.greensock.loading.display.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.VideoLoader import com.greensock.layout.*; public class ProductAPage extends AbstractPage { public function ProductAPage() { super(); alpha = 0; } override public function transitionIn():void { super.transitionIn(); init(); TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete}); function init():void { trace(this.stage); //outputs: [object Stage] trace(LiquidStage.getByStage(this.stage)); //outputs: null var ls = Gaia.api.getPage("index").content.lStage; //gets a direct reference to the liquidstage instance through the index page. trace(ls); //outputs: [object LiquidStage] trace(ls.stage); //outputs: [object Stage] trace(LiquidStage.getByStage(ls.stage)); //outputs: null ls.attach(mainVideo, ls.TOP_LEFT); //does work var area:LiquidArea = new LiquidArea(this, 50, 50, 100, 100, 0x313f19); //var area:LiquidArea = new LiquidArea(this, 50, 50, 100, 100, 0x313f19, 0x313f19, 0, 0, 99999, 99999, true, ls); //throws: TypeError: Error #1034: Type Coercion failed: cannot convert com.greensock.layout::LiquidStage@2604f581 to com.greensock.layout.LiquidStage. } } } Just using his code as an example (complete with the domain="current" code), but I'm not getting past Index.as and receiving errors: src/pages/IndexPage.as, Line 38 1180: Call to a possibly undefined method LiquidStage. src/pages/IndexPage.as, Line 16 1046: Type was not found or was not a compile-time constant: LiquidStage. It seems people have had luck using Liquid Stage with Gaia, but I can't figure this out. Any help would be super! Thanks

Amazing, this is it! I was trying to use e.data.name again, but that was already set to previousCuePointFired = e.data.name; , if I am understanding correctly? I also noticed that I can bypass setting up a new function initCue(); by simply nesting my IF/THEN swf load statements within the IF vid.videoPaused statement: function togglePaused(e:MouseEvent):void{ //switch the paused state of the video vid.videoPaused = !vid.videoPaused; if(vid.videoPaused){ trace("time to load a swf!"); trace("previousCuePointFired = " + previousCuePointFired); if (previousCuePointFired=="river") { trace("LOAD RIVER SWF"); } } } Is it best to avoid nesting them like this, or does that make sense to keep things concise? Thank you again SO much! This has all been very helpful

Hi Carl (and anyone who can help), I've spent a good chunk of the weekend understanding this code and attempting to implement it. After trying various combinations of code, I can't seem to understand how to call an IF statement that loads a SWF based on last cuepoint name. Please see my code below - I've left it mostly intact with a new LoaderEvent: function initCue(e:LoaderEvent):void { if (event.target.metaData=="river") { trace("LOAD RIVER SWF"); } if (event.target.metaData=="vegas") { trace("LOAD VEGAS SWF"); } } I see how the cuepoints are being traced back as they are reached, but how do I code: "when paused, check previous cuepoint - IF it is named this, load this SWF - IF it is named this other, load this instead, etc... It seems that you can't call a LoaderEvent from a function as I am trying to do from TogglePause event ( initCUE(); )? I keep getting error: 1136: Incorrect number of arguments. Expected 1 No matter how I try to code it. Feels so close, but can't figure out this piece.. import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import flash.events.MouseEvent; //create a var to track the name of each cuePoint as it is fired var previousCuePointFired:String; var cuePoints:Array = []; var vid:VideoLoader = new VideoLoader("cuepoints.f4v",{container:this,onInit:getAllCuePoints}); vid.addEventListener(VideoLoader.VIDEO_CUE_POINT, onCue); //add 'click to toggle pause' feature to video vid.content.addEventListener(MouseEvent.CLICK, togglePaused); function togglePaused(e:MouseEvent):void{ //switch the paused state of the video vid.videoPaused = !vid.videoPaused; if(vid.videoPaused){ trace("time to load a swf!"); trace("previousCuePointFired = " + previousCuePointFired); initCue(); //can't call to LoaderEvent like this??? } } function initCue(e:LoaderEvent):void { if (e.data.name=="river") { trace("LOAD RIVER SWF"); } if (e.data.name=="vegas") { trace("LOAD VEGAS SWF"); } } function onCue(e:LoaderEvent):void { trace("cuepoint fired: " + e.data.name); //store your cue point name previousCuePointFired = e.data.name; } function getAllCuePoints(e:LoaderEvent) { trace(" *** Embedded CuePoint Data *** "); //grab the array of cuePoint objects from the VideoLoader's metadata if(vid.metaData.cuePoint){ cuePoints = vid.metaData.cuePoints; trace("\n# of cuePoints = " + cuePoints.length); for (var i:int = 0; i < cuePoints.length; i++) { trace(cuePoints[i].name + " : " + cuePoints[i].time + " : " + vid.getCuePointTime(cuePoints[i].name)); } trace("\n *** *** \n"); } } vid.load();

Thanks, Carl. I have downloaded and opened getRecentCuePoint.fla. However, I'm still getting a compiler error for flash.event.Video.Event: 1172: Definition flash.events:VideoEvent could not be found **UPDATE** I just commented out import flash.event.Video.Event and it's working... I can see cue point traces and stored cues! Very cool. Now to figure out how to merge this with my project. Hopefully I don't have too many questions over the weekend Thank you!

Thank you! I'm running into a few issues: If I try to import flash.events.VideoEvent;, I get error "Definition flash.events:VideoEvent could not be found". I am using this within the Gaia Framework, so not sure if that is causing a problem. As for one button with the toggle pause states, I do need the two different buttons as you see it with pauseVideo/playVideo because there are other elements being shown/hidden based on these. I'm assuming I can still work with what your code within the onPause function? In the end, I'm receiving a slew of errors: Access of undefined property previousCuePointFired. Access of undefined property vid. Access of undefined property getAllCuePoints. I see the potential here and I hope to keep understanding!

Hi Carl, thanks so much for the reply! I'll look into this information, but I did post an updated post regarding the issue. If you don't mind looking there, I've outlined it in more detail: http://forums.greensock.com/topic/6552-videoloader-f4v-cue-points/

Hello again, I'm new to LoaderMax/VideoLoader, but I'm making decent headway and I LOVE using this over NetStream. The next mountain I'm trying to pass is understanding how to properly use embedded cue points. I have an F4V with embedded cue points and what I would like to do is when the video is paused (onPause function), the actionscript would load a specific swf (addChild) based on the current cue point. So far I only have the cue point listener succesfully tracing back, even if onPause isn't activated. Is that normal since it's just a trace? Furthermore, how would this properly be coded to load a swf based on current cue point ONLY when onPause is called? I feel I am close, yet so far... Any help is graciously appriciated! function onPause(e:MouseEvent):void { TweenLite.to(mainVideo, .6, {volume:0, onComplete: soundFadeComplete}); mainVideo.addEventListener(VideoLoader.VIDEO_CUE_POINT, cuePointHandler); } function cuePointHandler(event:LoaderEvent):void { trace("hit cue point " + event.data.name+"target:"+event.target); //How do I load something here based on the current cue point? } function soundFadeComplete():void { mainVideo.pauseVideo(); }

I should start a new topic, but my next task is to understand how to launch an embedded cue point event when the video is paused. If you would kindly point me in the right direction or show me what the basis of that code would look like? Also, I know flash.media.Video can't read cue points within F4V, only FLV. Is this the case with VideoLoader as well? **UPDATED TO NEW POST**

Ahhhh! That was it! I was actually attempting to use both VideoLoader and flash.media.Video in the same project. Looks like it was defaulting to flash.media.Video. I should probably get over it and just use the awesome VideoLoader exclusively, huh? Thank you SO much for guiding me in the right direction!