Full Drag and drop tutorial with animate cc HTML5 Canvas

[menjli]

hello

i made this tutorial in animate cc on how to do drag and drop with easeljs and how to lunch animation on drop

i wanted to share this since there is no one want to help and give an example so here is a full drag and drop tutorial with createjs in animate

Drag and Drop Tutorial with Animate CC easeljs (HTML5 Canvas) - YouTube

please support the channel and thanks

[rosebudd]

[pastorpixel]

If you looking for help I can give you a working example which even works in firefox with a new Animate CC Version and a new EaselJS Version and a responsive Size of the canvas Element, because your youtube example does not work with this conditions.

There is a also a much easier way to get the "dropTarget rectangle"

Take a look at: this youtube Tutorial:

Drag and Drop, Animate CC, Canvas - YouTube

[menjli]

yes you are true animate cc now support responsive layout which dose not let the old code work,

also for the collision detection there are many ways to do it, your example is good and i already made many type of drag and drop even with box2d in animate cc

thanks for your effort

[ClayUUID]

No, Animate does not support responsive layout. It supports scaling, which is a completely different thing. Whoever on the Animate dev team labeled that "responsuve" in the publish settings didn't understand what the term means. Everyone should report this as a bug on the feedback form to encourage them to correct it.

[pastorpixel]

Of course it is scaling and positioning of the canvas Element. But you can even choose, that the canvas element is cropped horizotally or vertically. That is some sort of layout. Responsive means it reacts to the conditions of the browser window. You can make a totally new layout for a html page for different screen sizes. That is responsive layout, every webdesigner knows that,

But this can not work in a canvas animation or game. So I think Adobe has not made a mistake or bug, they have just programmed the possibilities which make sense.

[ClayUUID]

pastorpixel  wrote

But this can not work in a canvas animation or game. So I think Adobe has not made a mistake or bug, they have just programmed the possibilities which make sense.

That's why games generally DON'T use responsive layout.

[jeffery wright]

Great tutorial, very cool.

Modifying your code I have added multiple draggers, in their 'pressup' functions I have added the line: box.gotoAndStop("b_present");

b_dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
     box.gotoAndStop("b_present"); 
     stage.removeChild(b_dragger, destination);
     stage.update(evt);
  }else{
b_dragger.x = 922;
b_dragger.y = 768;
     }
});

For every dragger that intersects the "destination" i want the 'box' to change in appearance, by making it jump to another frame within it.

This is not working and is not throwing any errors in the console... the other commands in the function still work but my 'gotoAndStop' does not.

How is it possible to trigger a command that does that within the function?

It's odd that the line doneDrag.gotoAndPlay(1); does work, but box.gotoAndStop("b_present"); or even box.gotoAndPlay(5); does not work?

What is the difference?

Thanks.

[joyceb92663589]

Thank you so much!!!!!!!!!!!!!!!!!!!!!!!!!!! Menjli. This is really helpful.

kind regards,

Hagos