Set starting position of objects on stage

New Here ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

I'm new to JavaScript and Adobe Animate. I have a rather involved project going you can view the current working version at Digital Magnet Board

 

The concept is a magnet board that allows the user to manipulate the tiles to spell words. We will be using this to teach students to read during distance learning. It is functional right now with my current code. I'm guessing there will be 100 more tiles added to the board by the time I'm done. I've got the items dragging and dropping. If there's a simpler way I'd love some feedback.

 

 

Is there a way to set the start positions of the tiles when the animation loads so I can have the reset button return the tiles when the button is clicked?

 

Right now I'm accomplishing the reset with a ClicktoPosition function, but I'm also having to put individual coordinates in for every tile which is cumbersome and time consuming. I've also tried resetting with keyframes and having the button reload the webpage but then you have to navigate back to the section. 

 

    this.resetButton.on("click", fl_ClickToPosition.bind(this));
            function fl_ClickToPosition()
            {
                           this.cardA.x = 32;
                           this.cardA.y = 66;
                           this.cardB.x = 83.45;
                           this.cardB.y = 66;
                           this.cardC.x = 134.85;
                           this.cardC.y = 66;
    }

 

 

Right now this is the code I'm using for the drag and drop functionality - I'm manually adding this with each tile. 

this.prefixSUB.on("pressmove", function(evt){
var p = stage.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = p.x;
evt.currentTarget.y = p.y;
});

Thank you for any assistance you can provide.

Erin

Views

55

Likes

translate

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 ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

You really, really need to learn about JavaScript arrays and bracket notation. You should never have to manually duplicate identical code for multiple entities.

 

Anyway...

 

var _this = this;
var myClips = ["cardA", "cardB", "cardC", "cardigan", "cardsagainsthumanity", "hereacardthereacardeverywhereacardcard"];

function saveStartPositions() {
	var i, clip;
	for (i = 0; i < myClips.length; i++) {
		clip = _this[myClips[i]];
		clip.origX = clip.x;
		clip.origY = clip.y;
	}
}

function restoreStartPositions() {
	var i, clip;
	for (i = 0; i < myClips.length; i++) {
		clip = _this[myClips[i]];
		clip.x = clip.origX;
		clip.y = clip.origY;
	}
}

 

Not tested, but something like that should work.

Likes

translate

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 ,
Nov 16, 2020 Nov 16, 2020

Copy link to clipboard

Copied

Thank you so much!

 

I kind of just found something that accomplished what I wanted and went with it.  I knew there was a better way.

Likes

translate

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