thrasherstudios77

Hello I have a master timeline that contains, 1 timeline per slide, each slide contains multiple tweens and 'labels' for animation in and out. This animation sequence runs over the course of a slideshow, where a user can hit next, prev, pause, play and let the slideshow play through uninterrupted. The master timeline is built on the 'slider-init' event, so before the slideshow animates in the first slide, all the timelines and tweens have been created. Now on the slideshow 'slide-change' event I need to seek(), either to a time value or to a label that corresponds to the current slide's 'in' point relative to the 'Master' timelines total duration. When I added labels to my slide timelines I thought that the Master would have access to them but it keeps returning '-1'. I would appreciate some suggestions, or better way to approach this. thanks, Here is some code to help see my setup var master = new TimelineLite(), duration = 2, d_offset = 0.25; master.pause(); $('.ls-slide').each( function(i) { var $this = $(this), slide_dur = parseInt( $(this).data('ls').match( /slidedelay *: *(.*?);/ )[1]), time_to_outro = (slide_dur - (duration * 2000) ) / 1000; master.add( addSlide( $this, (i + 1), duration, d_offset, time_to_outro ) ); }); function addSlide( slide, i, duration, d_offset, time_to_outro ){ var t1 = new TimelineLite(), el1 = $('<div class="panel" style="width:500px; height:212px; background:green;"><h1 style="position:absolute;">This is Slide '+i+'</h1></div>'), el2 = $('<div class="panel" style="width:500px; height:212px; background:red;"><h1 style="position:absolute;">This is Slide '+i+'</h1></div>'), hover_repeats = Math.floor(time_to_outro / 2.6) - 1; slide.append(el1); slide.append(el2); TweenLite.set(el1, {x: 500} ); // Intro t1.from(el1, duration, {x:-500, opacity:0, ease:'Quint.easeInOut' }, "slide"+i+"-in" ) .from(el2, duration, {x:-500, opacity:0, ease:'Quint.easeInOut' }, "slide"+i+"-in+=0.25" ) // Hovering .to( el1.find('h1'), 2.6, {top:+"20", repeat:hover_repeats, yoyo:true, delay:-"0.7" }, "hover" ) .to( el2.find('h1'), 2.6, {top:+"20", repeat:hover_repeats, yoyo:true, delay:-"0.7" }, "hover+=0.25" ) // Outro .to(el1, duration, { x:1200, ease:'Quint.easeInOut' }, "slide"+i+"-out" ) .to(el2, duration, { x:1200, ease:'Quint.easeInOut' }, "slide"+i+"-out+=0.25" ); return t1; }; $('body').on('slide-change ', function(event, data){ if ( data.nextLayerIndex === null || data.nextLayerIndex === 1 ) { var label = master.getLabelTime("slide1-in"); master.seek(label); } else { var label = master.getLabelTime("slide"+data.nextLayerIndex+"-in"); master.seek(label); } });

Jamie Thanks but I do understand that. That's why my specific question was how to use the $(document) with the $.each so it does get re-triggered after the AJAX request , the issue is not a bad Ajax request. Remember I mentioned that the Mouse Event Handlers were being re-triggered using the $(document) syntax. I was hoping I could use the same trick with the $.each. Maybe this is a question for stackoverflow but Jonathon asked for more information on the problem so I provided it.

Both types of each functions work the first time but both types fail once the AJAX request comes back. Here is my code. $(document).on('mouseover','.items .item >:first-child',this.itemOver); $(document).on('mouseout','.items .item >:first-child',this.itemOut); itemOver: function() { this.animation.play(); }, itemOut: function() { this.animation.reverse(); }, $.each(items, function(i,element) { var tl = new TimelineLite({paused:true}), front = $(this).find(".front"), back = $(this).find(".back"), ease = 'ease-in-out', timing = 0.4; TweenLite.set(back, {rotationY:-180 }); tl .to(front, timing, {rotationY:180, ease:ease}) .to(back, timing, {rotationY:0, opacity:1, ease:ease},0) element.animation = tl; }); _ Again the error I receive on mouseover after the Ajax request is: Uncaught TypeError: Cannot read property 'play' of undefined Uncaught TypeError: Cannot read property 'reverse' of undefined

Thank you that example worked great. However I have a new issue. On the page that this script is on I am loading the items with the flip effect with AJAX. So it works the first time but when new items get loaded to the page with AJAX the $.each method is not retriggered. Mouse Events still work after returned Ajax request using the below code (for some reason I can't get .hover to work with $(document) like in the example...hmm..be really curious to see how to do that instead of having to use 'mouseover' and 'mouseout') $(document).on('mouseover','.item >:first-child',this.itemOver); $(document).on('mouseout','.item >:first-child',this.itemOut); But I can't work out how to reinitialize the $.each portion of the example after the Ajax call. $.each('.item >:first-child', function(i,element) { Once the Ajax request has come back with new items I receive this error in the Console when I mouseover on one of the new items Uncaught TypeError: Cannot read property 'play' of undefined Uncaught TypeError: Cannot read property 'reverse' of undefined I have tried using $(document) in a couple ways to reinitialize the method but still no go. $(document).each('.item >:first-child', function(i,element) { //and $.each($(document).find('.item >:first-child'), function(i,element) { Either the $.each method itself is not being retriggered or the TimelineMax object is not or its both. Any ideas?

Hi I am trying to recreate this common CSS 3D flip effect but using only jQuery and TweenLite. Here is a working codepen with the CSS3 effect I am trying to recreate. http://codepen.io/rudeworks/pen/kamEb And here is my jQuery attempt so far. http://codepen.io/ben_jammin/pen/vGspk?editors=001 On my example I am able to get it to flip front to back the first time the way it should be, but having issues on "mouseout" and then on the second "mousenter" everything gets jacked. Any help is appreciated.

Hi I need someway using TweenLite to add tween properties after the tween has been created, not during an animation but in a different method. Before to achieve this I was utilizing TweenMax.updateTo() method, but now I need to achieve the same thing but with TweenLite. Here is the working code using TweenMax. openMenu: function(e) { this.containerTween = new TweenLite.to(this.container, this.duration, { force3D: true, ease: this.ease, }); this.addFX('in', this.fxType); } addFX: function(transition, type) { switch (type) { case '3d-rotate-in': if (transition == "in") { this.containerTween.updateTo({ css:{ x:this.sidebar.innerWidth() } }); } } } Is there a way with TweenLite in the addFX() method to append to the tween properties for this.containerTween?

To take this maybe a step further is there a way to dynamically remove tweens from an object. Get a list of current tween properties on a tweened object then say run a loop to remove each of these tween properties private function removeTweens(media:DisplayObject):void { //Run a loop to find all the tween properties on an object // Of course this doesn't work but just to get the idea across for each(var prop in tweenProps){ prop.remove = true } } Now that I know that keeping a tween alive on an object takes a bit of a hit on performance I would really like to start removing all my tweens from my objects once they are not needed anymore. And having a function like above would allow me to send any object with any amount of tweened properties to it and have it stripped clean of overhead. I looked into the vars object of a tween also the TweenMaxVars, but not sure how to get what I need to work. What is the syntax for adding a blur filter using TweenMaxVars, this doesn't seem to work? var tweenProps:TweenMaxVars = new TweenMaxVars().blurFilter(blurX:3, blurY:3).colorMatrixFilter(brightness:0.95, contrast:1.1, saturation:0.35); TweenMax.to(_video, 0.6, { ease:Circ.easeOut, tweenProps} );

Thanks Jack works perfectly!

I am trying to find a way to completely remove some tween effects from my video as I have noticed that once they are applied the CPU takes a performance hit of about double. So I apply an effect to my video when the video is paused and then it gets removed when the video is playing again. And I try to remove the effect completely like this private function removeTweens():void { TweenMax.to(_video, 0.6, { ease:Circ.easeOut, blurFilter: { blurX:0, blurY:0 },colorMatrixFilter: {brightness:1, contrast:1, saturation:1 }, onComplete: function():void { TweenMax.killTweensOf(_video); } } ); } The first part brings the video back to looking normal and then on tween complete I try and kill the tween from memory TweenMax.killTweensOf(_video); If I never add the effect at all the CPU hovers around 5-6, but when I add the effect then remove it starts hovering at 12-14%. Is there anything more I can do to remove tweens from memory??

Ok but I only tried to shut down the stream in the first place because I am having the issues with mulitple streams playing at the same time. Like I mentioned if I go to a different video slide and then I hit the play/pause button the current video slide stops playing but the previous video slide starts, so although I am not seeing the previous video I can hear it playing, which lets me know that the previous video slides stream is still active right?? This may help some. Each video slide carries with it a unique VideoLoader as well as a unique instance of my custom VideoPlayer class (which handles the video controls logic and skinning of the video player) So how would you recommend handling this issue with the multiple streams, if that is what the problem really is. How do you disable and active video streams with VideoLoader. Hope some of this is making sense and you can see what problem I am trying to solve here. thanks

I have a slideshow where each slide can be a video, swf, image ect. Each video slide is a VideoLoader instance and has its own video player. So I am running into this issue where if I watch one video slide and then navigate to another video slide when I hit the play pause button it stops the current video and starts playing the previous slide's video. So its like there are 2 streams currently in memory. So I thought that what I needed to do was on transition out of a slide I should close the netstream for the video slide I am navigating away from. Like this public function disableMedia():void { _player.playPause(); _player.videoLoader.gotoVideoTime(0); _player.videoLoader.netStream.close(); } But because (I think) I am taking a bitmapdata snapshot of each slide to handle some transition effects between slides netStream.close() causes a Sandbox Violation error. SecurityError: Error #2123: Security sandbox violation: BitmapData.draw: file:///D|/Media%20Prime/Gaia/deploy/swf/intro.swf cannot access null. No policy files granted access. at flash.display::BitmapData/draw() at com.jammin.slideshow.view::SlideshowView/updateMedia() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.jammin.slideshow.model::SlideshowModel/changeMedia() at com.jammin.slideshow.controller::SlideshowController/mediaLoaded() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.jammin.services::LoaderMaxService/mediaLoaded() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.greensock.loading.core::LoaderCore/_passThroughEvent() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.greensock.loading.core::LoaderCore/_completeHandler() at com.greensock.loading::VideoLoader/_enterFrameHandler() NetStatusEvent. code: NetStream.Seek.Notify Now I only get the error when I try to close the stream. Otherwise I am able to take a snapshot of the video on transition out with no problem. So maybe I am not approaching this problem the right way. And I am not sure if it is an issue with Greensock Loading classes or Flash video classes.

Yeah that would work great for checking the loaders after they have been created. Thanks Jack

I downloaded a newer version of LoaderMax and the getChildAt() method was there, strange that it wasn't a part of my initial install. Was this added in latter versions?

I tried searching for that method and believe it doesn't exist in my current LoaderMax Version /** * VERSION: 1.761 * DATE: 2010-12-07 * AS3 * UPDATES AND DOCS AT: http://www.greensock.com/loadermax/ **/ I assume a newer version of LoaderMax has this feature? My version came from a default install of Gaia framework

Well how about that...getChildAt doesn't show up in my code hinting for some reason (FlashDevelop) getChildren() and getChildIndex() do but not getChildAt(), should have looked at the docs more closely. I thought it strange you didn't include that feature but you did Now I need a way to switch between which type of loader being returned to my getMedia() method. I could just use a switch statement but I am wondering if LoaderMax doesn't come with a feature I may have overlooked like LoaderMax.type or something?