[Getting the in and out timestamp of slides]

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

[3D Flip Effect pure javascript]

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.

[3D Flip Effect pure javascript]

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 

[3D Flip Effect pure javascript]

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?

[3D Flip Effect pure javascript]

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.

See the Pen kamEb by rudeworks (@rudeworks) on CodePen

 

And here is my jQuery attempt so far.

See the Pen vGspk?editors=001 by ben_jammin (@ben_jammin) on CodePen

 

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.

[Append to TweenLite properties]

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?

[Performance hit]

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

[Performance hit]

Thanks Jack works perfectly!

[Performance hit]

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??

[Multiple video steams causing issues]

Why are you closing the NetStream? That's probably the cause of the problems, especially if you're trying to capture a BitmapData on a closed NetStream.

 

In general, I wouldn't recommend hijacking the netStream and trying to control it yourself. Instead, I'd rely on VideoLoader's methods/properties.

 

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

[Multiple video steams causing issues]

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.

[Feature Request]

Yes, getChildAt() wasn't in the original version - it was added later. It has been in there for a while, though.

 

As far as type checking, wouldn't it be as simple as:

 

if (loader is SWFLoader) {
...
} else if (loader is ImageLoader) {
...
} else if (loader is XMLLoader) {
  ...
}
...

?

 

 

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

 

Thanks Jack

[Feature Request]

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?

[Feature Request]

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

[Feature Request]

I'm confused. There already is a getChildAt() method. http://greensock.com...tml#getChildAt() Am I missing something?

 

 

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?

[Feature Request]

I figured out a work around if anyone is interested.

 

//
//
mediaLoader = LoaderMax.parse(mediaArray,
		   {  // Loader Vars
		  name:"mediaLoader",
		  maxConnections:1,
		  onProgress:mediaProgress,
		  onChildComplete:mediaLoaded,
		  onComplete:allMediaLoaded,
		  onIOError:ioErrorHandler
		   }
);



public function loadMedia(id:uint):void {

 var loaders:Array = mediaLoader.getChildren();
 loaders[id].load(); // Load a single media item
}

 

Unfortunately I still cannot use the .parse method because I need to add estimatedBytes properties to each of my loaders. Which would mean adding LoaderMax nodes to my XML which I don't want to do. I guess this method is really for those adding LoaderMax related nodes to their XML. Very cool feature but just can't use it for what I want to do.

[Feature Request]

I tried using the LoaderMax.parse for the first time as my data is a mix of images, videos and swf's. However I realized that I would not be able to use it because LoaderMax lacks a getChildAt(index:uint) type method. Let me explain

 

So I have a loadMedia(index:uint) method that gets called whenever media needs to be loaded. It takes in an index. Normally I query the loader I want to load like this:

 

LoaderMax.getLoader("media_" + id);

 

but because I cannot dynamically add an id or a name to each parsed loader I would need to add a name or id attribute to each media node in my XML which is kinda tedious. This kind of situation would be made easier to deal with if there was a getChildAt method for loaders, like this

 

public function loadMedia(index:uint):void{
  var ldr:* = mediaLoader.getChildAt(index);
  ldr.load();


}

[estimatedBytes]

cool thanks

[estimatedBytes]

Hi

 

Quick question when setting the value for estimateBytes for a 100k image should it be:

 

.estimatedBytes(100)

 

or

 

.estimatedBytes(100000)