Search the Community

Guys, Although I've worked with GS before, GSDevTools is new to me. I'm loving it but finding I get varying results in the playback. I have some code which I'll list below and it includes a draw function then a splitText function then a fade function which are on a masterTL. I hit play and all's well but if I hit play to watch the animation again the fade gets quicker and seems to move up the timescale and if I hit play again it gets quicker still and then disappears. I've tried including TL functions to reset vars but it doesn't make any difference. Obviously the code doesn't change. <CODE> /*Draw Function - makes .svg with class="badge" visible then draws it, then fades the container div #splash and all works fine*/ function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); var tl = new TimelineLite(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }); tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } /*Split Text function - variable received to function as console confirms, makes <p> visible then performs splitText on <p> and works fine*/ function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineLite(); console.log("done split ",textLine); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04); return tl; } /* Fade Function - variable received to function as console confirms, then tweens a simple repeating fade on same <p> as Split Text function and works fine first time*/ function hudFadeEffect (hudLine) { TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true}); console.log("fade effect",hudLine); return hudLine; } /*Timeline*/ var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(runText, ["#hudGenius"], 1) .call(hudFadeEffect, ["#hudGenius"], 2) What am I doing wrong? I know you'd probably appreciate a pen but mine's private - I can send the url to GS superfabheroes if you want via email. Buzz

I was trying to experiment GS playback functions with this tutorial - https://ihatetomatoes.net/module-1/g101-controlling-timeline-playback-0747/. However, this pause function doesn't pause. tl.pause(); And this play function doesn't play. $('#bPlay').on('click',function(){ tl.play(); }) Please let me know the errors that I have rendered, thank you!

Hi - In a banner I'm working on, I have a secondary timeline which controls an object sliding up and down on my screen. The secondary timeline works properly, but I'd also like to be able to pause the main timeline when the secondary object slides up on the screen, and then resume playback of the main timeline once my object slides out of view. Here's my current code: <script> var tl = new TimelineLite(); tl.add( TweenLite.to("#studyDescription", 1, {top:20})); tl.to("bgMask", .5, {autoAlpha:1}); tl.pause(); var button = document.getElementById("openButton"); button.onclick = slideStudyUp; if (button.captureEvents) button.captureEvents(Event.CLICK); function slideStudyUp(){ tl.play(); } var closeButton = document.getElementById("closeButton"); closeButton.onclick = slideStudyDown; if (closeButton.captureEvents) closeButton.captureEvents(Event.CLICK); function slideStudyDown(){ tl.reverse(); } </script> I'm pretty sure that I just need to add something like "main timeline.pause()" to my slideStudyUp function, and "main timeline.play()" to my slideStudyDown function - but what's the correct way to reference the main timeline? Thanks!

I'm bulk loading videos and then playing them. That part works. But after a video has been played once it will play back very fast almost every time after that. I have no idea why. Any help appreciated. package { public class VideoClass extends MovieClip { private var vid1_vid:ContentDisplay; private var vid1_ldr:VideoLoader; private var vid2_vid:ContentDisplay; private var vid2_ldr:VideoLoader; private var vid3_vid:ContentDisplay; private var vid3_ldr:VideoLoader; //store video paths private var vid1_BT:String; private var vid2_BT:String; private var vid3_BT:String; private var videoArray:Array = new Array(); public function VideoClass(_videoArray:Array) { videoArray = _videoArray; for (var i:uint = 0; i < 7; i++) { if (i == 0) { vid1_BT = videoArray[i]; } else if (i == 1) { vid2_BT = videoArray[i]; } else { vid3_BT = videoArray[i]; } } //activate the loaders we need LoaderMax.activate([ImageLoader, SWFLoader, VideoLoader]); var urls:Array = [vid1_BT, vid2_BT, vid3_BT]; var queue:LoaderMax = LoaderMax.parse(urls, {maxConnections:1, //onProgress:_progressHandler, onComplete:_queueCompleteHandler //onChildComplete:_childCompleteHandler }, {autoPlay:false}); queue.load(); } private function _queueCompleteHandler(event:LoaderEvent):void { //vid1 video vid1_ldr = LoaderMax.getLoader(vid1_BT); vid1_vid = LoaderMax.getContent(vid1_BT); vid1_vid.x = vid1_vid.y = 0; //vid2 video vid2_ldr = LoaderMax.getLoader(vid2_BT); vid2_vid = LoaderMax.getContent(vid2_BT); vid2_vid.x = vid2_vid.y = 0; //vid3 video vid3_ldr = LoaderMax.getLoader(vid3_BT); vid3_vid = LoaderMax.getContent(vid3_BT); vid3_vid.x = vid3_vid.y = 0; vid1_ldr.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete, false, 0, true); vid2_ldr.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete, false, 0, true); vid3_ldr.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete, false, 0, true); } public function addVideo(_vid:String) { switch (_vid){ case "vid1": addChild(vid1_vid); vid1_ldr.playVideo(); vid1_ldr.gotoVideoTime(0); break; case "vid2": addChild(vid2_vid); vid2_ldr.playVideo(); vid2_ldr.gotoVideoTime(0); break; case "vid3": addChild(vid3_vid); vid3_ldr.playVideo(); vid3_ldr.gotoVideoTime(0); break; } } private function onVideoComplete(e:*) { var vid = e.target.content; removeChild(vid); } } }

I have two TimelineMax objects: ------------------- THE CYCLE: TL1 repeats once with yoyo. TL2 repeats infinitely with yoyo. TL2 is initially set to paused. TL1 plays automatically, & onComplete plays TL2. TL2 has onRepeat to pause itself (TL2), and restart(true) TL1 (restart should respect TL1's delay). ------------------- INTENDED EFFECT: I want the infinitely repeating timeline, TL2, to play and pause at each repeat point of its animation, but this is not happening. Both timelines' playback are controlled by the other. If you look at my Codepen code, you will see that this is not working correctly, and I can't figure out what I'm doing wrong. http://codepen.io/icg-cnunez/pen/nDKoJ Any help much appreciated.

Hi, I am developing a flash piece with two views of the same video (one large, one smaller with a caption overlay). Im just wondering if anyone has any ideas on how to program it so I can switch seamlessly between the two views and have the same video at the same time, playback state etc. Ive tried using two separate video streams and keeping track of currentTime etc but its a bit of a hack and doesn't work that well. Is there a cleaner way I can add the same video loader container to multiple display containers and just code the controls once? i.e. videoLoaderVars.container(this); videoLoaderVars.container(another clip);