[Draggable Parallax effects in edge animate]

 

This code should help you:

 

//the symbol or timeline you want to scrub through on the stage
var mySymbol = sym.getSymbol("mySymbol");
//the symbol's total duration
var mySymbolDuration = mySymbol.getDuration();
//the dragger symbol's element (the thing you're going to drag)
var draggerElement = sym.getSymbol("myDraggerSymbol").getSymbolElement();
//your min and max drag values
var minDrag = 0;
var maxDrag = 1200;
//set it to its minDrag position - this also populates the _gsTransform object used in onDrag
TweenMax.set(draggerElement,{
  position:'absolute',
  x:minDrag
}
); 

//create your Draggable instance
var scrubDragger = Draggable.create(draggerElement , {
         
   type:'x',
   bounds:{minX:minDrag , maxX:maxDrag },
   onDrag:onDrag
});



function onDrag(){
   //percent through your entire drag
   var dragPercent = (draggerElement[0]._gsTransform.x/maxDrag);
   //a percentage of the entire duration of the symbol you're scrubbing through
   var scrubToFrame = Math.round(dragPercent * mySymbolDuration);
   //tell that symbol to go to and stop at that frame (well, it's miliseconds actually - your value will be in the 1000s)
   mySymbol.stop(scrubToFrame);
};

If there are any errors in this code it's because I was up all night whilst my wife gave birth to our second son!

 

 

So I'm trying to use this code, but I'm having a couple of issues. My main one is that I don't want my "draggerElement" to start at x:0, but when I change the value for "minDrag" to anything above"0" it doesn't scrub through the entire target symbol (mySymbol).

 

How do I get my "draggerElement" to have a min bounds of "1088" and max bounds of "1511," but still scrub through the entire target symbol?

[Ease on Play]

Ah, Sorry! Yeah, I'm using Edge Animate.

 

Basically what's happening is I have an "Up" symbol, a "Down" symbol, and a symbol containing a 3 second long animation of an object moving up, called "omni". So when you mouseDown on the "Up" symbol, "omni" plays and the object moves up. mouseUP and it stops. The same is true with the "Down" symbol except that instead of ".play()" it's ".playReverse()".

 

So what I'm looking for is a way to ease into the ".play()" or the ".playReverse()" so that it feels more fluid. I'm not sure if there is a way to do this, or in general a better way to accomplish this task as I am new to Edge and this coding in general. Eager to learn though, haha!

 

The reason I'm posting here is because I thought it might be accomplished somehow with TweenLite/TweenMax.

 

-mlovett

[Ease on Play]

Hello all!

 

So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear.

 

I haven't really used TweenLite very much, and I have the TweenMax script in my document.

 

So far my code looks like this:

 

var omni = sym.getSymbol("omnibed_side");

var pos = omni.getPosition();

 

 

if (pos < '3000')

{

omni.play();

}

 

else 

{

omni.stop();

}

 

I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated!

 

-mlovett

[Control timeline through Rotation Draggable]

Wow, thanks! That's perfect! I actually just figured it out myself (such a gratifying feeling) but I am definitely going to look over your code and see how I could use it. I really appreciate your help!

 

-mlovett

[Control timeline through Rotation Draggable]

Hello All!

 

So I'm trying to use a Rotation Draggable to control a timeline. I found this topic: http://greensock.com/forums/topic/8842-draggable-parallax-effects-in-edge-animate/but it's for a linear draggable. I tried imputting that code and changing a few things around to make it work with rotation, but I'm afraid my coding capabilities are woefully underdeveloped.

 

If anyone could help out, I'd greatly appreciate it!

 

-mlovett