Highlighted

How to Create Interaction: Click anywhere on a photo & icon appears

New Here ,
Nov 26, 2019

Copy link to clipboard

Copied

Hi Adobe Community,

I am looking to create an interaction where you can do the following:

  • I have a group of icons on the screen and 3 photos.
  • I click anywhere on any of the 3 photos and one of the icons moves from its starting place to wherever I clicked.
  • If I did not like where I clicked, I can click the icon to return it to its starting location.

 

Here is what I have right now for this part of the interaction and isn't working. Am I going about this in the completely wrong way?

 

 

 

// create icon container and icons
var iconBox = new createjs.Container();

// fill icon container
iconBox.addChild(this.circ1, this.circ2);

//Move Object From Start to Clicked and Back
stage.on("click", function (e) {
var clicked = e.target;
if (
// if target's id matches an icon id
clicked.id === this.circ1.id ||
clicked.id === this.circ2.id
) {
// send target to the iconBox
iconBox.addChild(clicked);
// position it at it's original x and y values
if (clicked.id === this.circ1.id) {
clicked.x = 25;
clicked.y = 500;
} else if (clicked.id === this.circ2.id) {
clicked.x = 105;
clicked.y = 540;
}
// repaint the canvas
stage.update();
} else if (
// if target's id doesn't match an icon id
clicked.id != this.circ1.id &&
clicked.id != this.circ2.id

) {
// move it to the target's location
if (iconBox.children.length > 0) {
var icon = iconBox.children.pop();
clicked.parent.addChild(icon);
icon.x = e.stageX - 20;
icon.y = e.stageY - 20;
// repaint the canvas
stage.update();
}
}
});

TOPICS
Code

Views

20

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

How to Create Interaction: Click anywhere on a photo & icon appears

New Here ,
Nov 26, 2019

Copy link to clipboard

Copied

Hi Adobe Community,

I am looking to create an interaction where you can do the following:

  • I have a group of icons on the screen and 3 photos.
  • I click anywhere on any of the 3 photos and one of the icons moves from its starting place to wherever I clicked.
  • If I did not like where I clicked, I can click the icon to return it to its starting location.

 

Here is what I have right now for this part of the interaction and isn't working. Am I going about this in the completely wrong way?

 

 

 

// create icon container and icons
var iconBox = new createjs.Container();

// fill icon container
iconBox.addChild(this.circ1, this.circ2);

//Move Object From Start to Clicked and Back
stage.on("click", function (e) {
var clicked = e.target;
if (
// if target's id matches an icon id
clicked.id === this.circ1.id ||
clicked.id === this.circ2.id
) {
// send target to the iconBox
iconBox.addChild(clicked);
// position it at it's original x and y values
if (clicked.id === this.circ1.id) {
clicked.x = 25;
clicked.y = 500;
} else if (clicked.id === this.circ2.id) {
clicked.x = 105;
clicked.y = 540;
}
// repaint the canvas
stage.update();
} else if (
// if target's id doesn't match an icon id
clicked.id != this.circ1.id &&
clicked.id != this.circ2.id

) {
// move it to the target's location
if (iconBox.children.length > 0) {
var icon = iconBox.children.pop();
clicked.parent.addChild(icon);
icon.x = e.stageX - 20;
icon.y = e.stageY - 20;
// repaint the canvas
stage.update();
}
}
});

TOPICS
Code

Views

21

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
Nov 26, 2019 0

Have something to add?

Join the conversation