Newbie - can this be done easily - have no coding experience

Explorer ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hi,

I'm very new to Animate and need to do a thing if its not too complicated.

 

I have 4 shapes that I convert to symbols and call them Shape1, Shape2, Shape3 and Shape4. These 4 symbols I want to be visible all the time in the same position.

 

When there is a click on Shape1 I want my symbol Txt1 to be shown next to Shape 1. When there is a click on another of the shapes I want the corresponding Txt2, Txt3 or Txt 4 to be shown. Only 1 of the textboxes may be visible at a time. 

 

Is this code something I can find online somewhere and copy paste and make my own adjustments after? Or maybe there is a video that shows to go about this - I have not been able to find this.

TOPICS
Code , How to

Views

198

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 ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hi.

 

One way to do this type of interactivity is to store the current displayed text field in a property or variable and everytime the user clicks on a shape we check for it and set the visibility to false. Like this:

var root = this;

root.showTextField = function(e, data)
{
	if (root.currentTextField)
		root.currentTextField.visible = false;
	
	data.textField.visible = true;
	root.currentTextField = data.textField;
};

root.shape0.on("click", root.showTextField, this, false, { textField: root.txt0 });
root.shape1.on("click", root.showTextField, this, false, { textField: root.txt1 });
root.shape2.on("click", root.showTextField, this, false, { textField: root.txt2 });
root.shape3.on("click", root.showTextField, this, false, { textField: root.txt3 });

 

Learn more about the on method here:

https://createjs.com/docs/easeljs/classes/DisplayObject.html#method_on

 

Please let us know if you need further assistance.

 

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
Explorer ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Thank you very much 🙂 - I will check it out.

Anita

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
Explorer ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Brilliant! It works 🙂 Thank you so very much for your big help.

Have a great weekend.

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 ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Great! 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
Explorer ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

One more thing. What should I export as to use this on a WordPress site?

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 ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

LATEST

I don't have experience using WordPress but I guess you can publish as html and then embed the html using an iframe element.

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