Drag and Drop - Simple

Participant ,
Sep 17, 2018 Sep 17, 2018

Copy link to clipboard

Copied

Hey there.

I am wanting some 'drag and drop' functionality for a module I am creating.

I have tried a few tutorials but I can't quite get my head around it. Plus, the tutorials that are available seem to be more focused around not using the timeline and more using pure code. I would rather use the timeline + Instance names etc.

Essentially I have 3 drag objects. They need to be placed in the correct position named box1, box2, box3. Once the user has all 3 drag objects correctly in the boxes, a button appears to move onto the next stage.

I've uploaded my project here.

I feel like I'm not using the full power of Adobe Animate - if you see some things that I am doing wrong please also let me know!

I am using video imported from another program, and then I use z-index:-1 on the dom overlay once the program has been exported (so that the buttons become interactive, otherwise they are behind the video).

Thanks for your time and in helping me out here.

Views

7.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Sep 18, 2018 Sep 18, 2018
Hi.Take a look at these two samples:Animate CC Drag n drop animation example in HTML5 Canvas  (created by resdesign​)Animate Drag/Drop Help I hope this helps.Regards,JC

Likes

Translate

Translate
Adobe Community Professional ,
Sep 18, 2018 Sep 18, 2018

Copy link to clipboard

Copied

Hi.

Take a look at these two samples:

Animate CC Drag n drop animation example in HTML5 Canvas  (created by resdesign​)

Animate Drag/Drop Help

I hope this helps.

Regards,

JC

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 18, 2018 Sep 18, 2018

Copy link to clipboard

Copied

Hey JC,

I had a look at both of those tutorials + the one from the spanish youtuber!

Aaaaand, I almost got there but I can't for the life of me get my draggables to 'lock' onto the containers.

Wondering if you had a second? Could you take a look?

https://drive.google.com/open?id=19x0VSNr_TUpyC892F7u5scpRyiW2ZYuN

I tried both of the examples that you linked. your version looked better because of the 'snap back' but when I tried to implement it, I had errors on my mouseUp event (as I do everytime I try to implement this).

Please help!

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

Hi.

Sorry for the long delay.

Did you solve the problem?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

Hey JC!

I haven't solved the problem yet but give me until after the weekend - Ill come back to you!

Thanks a bunch mate.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

Hey JC,

I FINALLY FIGURED IT OUT, IM SO HAPPY!

It was mostly to do with using dot notation to enter inside of objects.. I was trying to target the wrong objects!

Thanks very much for your help

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

This is excellent! Congrats!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 27, 2020 Apr 27, 2020

Copy link to clipboard

Copied

LATEST

Are those examples still available? The links don't resolve.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 22, 2019 Apr 22, 2019

Copy link to clipboard

Copied

How cal i make to drag an object along an path

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 23, 2019 Apr 23, 2019

Copy link to clipboard

Copied

Hi.

Can you show us a sample of how exactly do you want to drag an object along a path?

For example: a circular or an arbitrary path? Is the path described by code or this path would be created in Animate IDE using the drawing tools?

Regards,

JC

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 23, 2019 Apr 23, 2019

Copy link to clipboard

Copied

I want create the path in Animate using the drawing tools

drag like this

https://codepen.io/anon/pen/jRpvGo?editors=1111

https://zimjs.com/nio/drag.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 23, 2019 Apr 23, 2019

Copy link to clipboard

Copied

Hi.

One easier approach is to predefine the path with a regular timeline animation and than apply a drag code to a target instance.

An example:

JS code:

var root = this;

var anim = root.anim;

var dot = anim.dot;

createjs.Touch.enable(stage); // enables touch interaction for the default stage

stage.mouseMoveOutside = true; // mouse move events will continue to be called when the mouse leaves the target canvas

stage.preventSelection = true; // prevents selection of other elements in the html page if the user clicks and drags

dot.on("mousedown", function(e)

{

    this.offsetX = (stage.mouseX / stage.scaleX) - this.x; // difference between the mouse x (divided by the scale of the stage for responsive settings) and the target x

});

dot.on("pressmove", function(e)

{

    var stageMouseRatio = ((stage.mouseX / stage.scaleX) - this.offsetX) / (canvas.width / stage.scaleX); // a number from 0 to 1. It's a ratio between the mouse x and the canvas width

    anim.gotoAndStop(Math.min(Math.floor(stageMouseRatio * anim.totalFrames), anim.totalFrames - 1));

});

FLA download:

animate_cc_html5_canvas_drag_along_a_path.zip - Google Drive

I hope this helps.

Regards,

JC

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 24, 2019 Apr 24, 2019

Copy link to clipboard

Copied

Wow, it's amazing, thanks so much.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 24, 2019 Apr 24, 2019

Copy link to clipboard

Copied

You're welcome!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 19, 2020 Mar 19, 2020

Copy link to clipboard

Copied

Hi.
I'm looking for a way to advance an animation on a guideline when I hold down a mouse or tap on an item, but to stop when I stop pressing or leave the item's area and just go ahead. (like this video)

https://youtu.be/_X_ScvbaptE?t=21

Do you know how to spell your name? Emma will teach you how to say hers one letter at a time, E-M-M-A. Now it's your turn! Available on iTunes and Google Pla...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines