Adobe Animate – Drag and Drop Tutorial for multiple symbols

In this post, I share how I created an HTML5 canvas that allows users to drag and drop symbols with their mouse or finger on the canvas using Adobe Animate in 2022/23 using Javascript. In a second post, I explain how I added the embed code to display on my WordPress website.

Getting Started

To get started, I watched MotionTuts “Adobe Animate CC 2020 drag-and-drop tutorial (HTML5). The code used in his demonstration is available for download.

Adapting the Script

I had 14 items that I wanted to drag and drop, so I created an array to loop them. Below is how I adapted the code presented by MotionTuts into something useful for many symbols with the same functionality. Each item in my var=decals is the symbol’s name in Adobe Animate.

var root = this;
var decals = ['yellow_bee','light_pink_flower','butterfly_body', 'pink_flower',
'blue_flower', 'pink_hand', 'dark_pink_hand', 'yellow_right_hand', 'duck_face', 'left_duck_foot', 'right_duck_foot', 'cloud', 'grass', 'grass_2' ]
for (const decal of decals) {
	this[decal].on("pressmove", moveBall );
}
function moveBall(e) {
var p = stage.globalToLocal(e.stageX, e.stageY)
e.currentTarget.x= p.x;
e.currentTarget.y= p.y;
}

This is the long-form code (14 virtually identical lines of code). The above code is the simplified version using a variable and including each symbol in the variable’s array.

this.yellow_bee.on("pressmove", moveBall );
this.light_pink_flower.on("pressmove", moveBall );
this.butterfly_body.on("pressmove", moveBall );
this.pink_flower.on("pressmove", moveBall );
this.blue_flower.on("pressmove", moveBall );
this.pink_hand.on("pressmove", moveBall );
this.dark_pink_hand.on("pressmove", moveBall );
this.yellow_right_hand.on("pressmove", moveBall );
this.duck_face.on("pressmove", moveBall );
this.left_duck_foot.on("pressmove", moveBall );
this.right_duck_foot.on("pressmove", moveBall );
this.cloud.on("pressmove", moveBall );
this.grass.on("pressmove", moveBall );
this.grass_2.on("pressmove", moveBall );

Making the HTML5 Canvas Touch Friendly

The final step was making my animation touch-friendly, meaning a finger could also move the animation elements on phones and tablets. I looked at several resources and couldn’t quite get the implementation correct. Ultimately, a single line of additional code in Adobe Animate makes the HTML5 animation Touch Drag and Drop Friendly.

The single line of code for Adobe Animate Drag and Drops to be touch friendly is:

createjs.Touch.enable(stage); 

The online resources were unclear where this single line of code should live. I found that adding it as the first line of code in my Adobe Animate Windows > Action pane was successful.

My final code looked like this:

createjs.Touch.enable(stage);

var root = this;
var decals = ['yellow_bee','light_pink_flower','butterfly_body', 'pink_flower',
'blue_flower', 'pink_hand', 'dark_pink_hand', 'yellow_right_hand', 'duck_face', 'left_duck_foot', 'right_duck_foot', 'cloud', 'grass', 'grass_2' ]
for (const decal of decals) {
	this[decal].on("pressmove", moveBall );
}
function moveBall(e) {
var p = stage.globalToLocal(e.stageX, e.stageY)
e.currentTarget.x= p.x;
e.currentTarget.y= p.y;
}

Example of Touch-Friendly Drag and Drop HTML5 Canvas using Adobe Animate

You can see an example of my touch-friendly Adobe Animate project on Arts and Bricks.

Add an Adobe Animate HTML5 Canvas embed into your WordPress Site

My final task was to include this HTML5 canvas in my WordPress site. It was tricky, so I wrote a second post about adding your Adobe Animate exported code to WordPress.

Happy Animating!