Dragging and Edge Animate

[SteveZ]

Hello,

 

I'm making the transition from Flash to Edge animate. I have a simple object (the letter 'A' named AA2) that sits on the stage. I have it animate by moving from one side of the stage to the other. After the animation is complete, I then want to be able to drag the letter anywhere on the stage. The dragging works fine with jQuery draggable, however I cannot seem to apply the same functionality using GreenSock's Draggable function. I would really like to use GSAP but I'm having trouble. I attached a zip of the Adobe Edge Animate file in question. If you don't have Animate, I included the code that is attached to the creationComplete of my Stage. Any help would be greatly appreciated!

 

 

yepnope({nope:['js/jquery-ui-1.10.0.custom.min.js', 'js/Draggable.min.js', 'js/TweenMax.min.js'], complete: init});

 

function init(){

 

          sym.$('AA2').draggable();

 

          //Want to do the same except use GreenSock's Draggable instead of jQuery but not working

          //sym.$('AA2').Draggable.create();

}

 

Thanks.

Testy.zip

[Carl]

Hi and welcome to the GreenSock forums.

 

The following works:

Draggable.create(sym.$('AA2'));

You need to pass in the element that you want to drag to the create() method: http://api.greensock.com/js/com/greensock/utils/Draggable.html

[SteveZ]

Carl,

 

Works like a charm! Thanks! Being a newbie can be frustrating.

[SteveZ]

I have another question regarding the same Edge animation, how can I constrain the dragging of the letter 'A' within a rectangle (aptly named "Rectangle")? The following code doesn't seem to work:

 

Draggable.create(sym.$('AA2'), {bounds: sym.$('Rectangle')} );

[katherine]

If I were you I would create variables for each edge animate element you want use in your code. It is much easier to read the code and works for me. For your case I would create two variables for each of your elements- then declare those variables in the draggable code (notice you don't need commas or paranthesis around them now either- and you can name them whatever you want!). much cleaner!

 

var letterA = sym.$('AA2');

var rectangle= sym.$('Rectangle');

 

Draggable.create(letterA, {bounds: rectangle) });

[Joseluis]

Hello from Spain,
 
I was delighted to discover GSAP and am looking for ways to integrate it into a project, I need to rotate an element in Edge and basing on the demo I built a small prototype, but not responding as I expect. I need that this limited degree rotation min to a maximum degree, for this I used bounds: {minRotation: -135, maxRotation: 135}, but the rotation is not stopped. Also I need to know what the current degree of rotation while the element is rotated. 
 
I'll be grateful if you can help me.
 

yepnope({nope:['js/jquery-ui-1.10.0.custom.min.js',

     'js/Draggable.min.js',

     'js/TweenMax.min.js'

      ],complete: init});

function init()

{var knob =sym.$('control');

Draggable.create(knob,

  {type:"rotation",

   edgeResistance:1,

   bounds:{minRotation:-135, maxRotation:135},

   onDrag:function() {

   sym.$("Text").html("Current rotation in degrees = "+rotation());

        }

     });

}

[Joseluis]

Hello again, 

 

this is the proyect which referred to in my previous post. 

 

Thank you.

Controldragrot.zip

[Zhur]

Hi, I also use Edge Animate combine to GSAP. That's wonderful. But, I don't understand why, when elements are placed inside a symbol, Draggable seems to loose object position when I release it and try to move it one more time. Is there a solution to keep release position for each new drag and drop ? Which kind of position do you advice for each object ?

Thanks.