04-22-2021 06:29 - edited 04-30-2021 07:34
04-22-2021 06:29 - edited 04-30-2021 07:34
I have a sprite in one of my apps and I want it to costumes on click.
Here is the code I have so far:
In the widgets.gui section ...
<symbol id="frames" href="#sprite-image">
<animate id="anim" attributeName="value" begin="enable"
from="1" to="4" dur="0.3" repeatCount="indefinite" />
<image href="h1-frame_1.png" width="25%" height="20%" x="165" y="187" />
</symbol>
In the index.js section ...
const myAnimation = document.getElementById("myAnimation");
myAnimation.animate("enable");
Basically, when the screen is clicked, I want the h1-frame_1.png to change to h2-frame_1.png, and then with another click, it changes back to h1-frame_1.png, etc.
I have not figured out a way to do so yet. Any suggestions?
Answered! Go to the Best Answer.
09-09-2021 14:10
09-09-2021 14:10
Never mind. I figured out how to make my sprite toggleable. For those curious, the code is below.
index.js:
import * as document from "document";
const sprite = document.getElementById("sprite");
sprite.addEventListener("click", (evt) => {
if (sprite.href === "s1-frame_1.png" || sprite.href === "s1-frame_2.png" || sprite.href === "s1-frame_3.png" || sprite.href === "s1-frame_4.png") {
sprite.href = "s2-frame_1.png";
} else {
sprite.href = "s1-frame_1.png";
}
})
widgets.gui:
<image id="sprite" href="s1-frame_1.png" width="25%" height="20%" x="165" y="182" pointer-events="visible"/>
04-22-2021 13:37
04-22-2021 13:37
Give the <image> an id, use getElementById() on it in JS, then change .href on that object in your onclick() handler or equivalent.
04-23-2021 05:40 - edited 05-03-2021 08:30
04-23-2021 05:40 - edited 05-03-2021 08:30
@Gondwana wrote:Give the <image> an id, use getElementById() on it in JS, then change .href on that object in your onclick() handler or equivalent.
Thank you so much. Would you mind giving me the code fully written out? I am not a great programmer, so I am not quite sure how to do so.
05-28-2021 06:15
05-28-2021 06:15
I have been fiddling around on the Fitbit Studio, but I have had no luck with being able to change my sprite image on click. I was wondering if anyone else has any suggestions. Thanks in advance.
09-08-2021 08:45
09-08-2021 08:45
I finally figured out how to give my <image> an id, use the getElementById() on it in JS, but I am unable to register that the <image> has been clicked, let alone change the href. This is the code I have so far in the index.js file:
import * as document from "document";
const sprite = document.getElementById("sprite");
sprite("click", (evt) => {
console.log("Clicked!");
});
And this is the code I have in the widgets.gui file:
<image id="sprite" href="frame_1.png" width="25%" height="20%" x="165" y="182" />
Any suggestions?
09-08-2021 13:28
09-08-2021 13:28
In your <image>, try including pointer-events="visible"
09-08-2021 15:07 - edited 09-08-2021 15:08
09-08-2021 15:07 - edited 09-08-2021 15:08
Thank you; that solved the issue of the clicks not registering. I then figured out how to change the .href, but I want the following section of code to loop so that the user can toggle back and forth between the two costumes.
sprite.addEventListener("click", (evt) => {
console.log("Clicked");
sprite.image = "s2-frame_1.png";
sprite.addEventListener("click", (evt) => {
console.log("Clicked");
sprite.image = "s1-frame_1.png";
});
});
Any suggestions?
09-08-2021 15:13
09-08-2021 15:13
Only add ONE listener; otherwise you'll have a chain of them, all of which will be called when the event occurs.
A lazy way to do it would be to check the filename currently assigned to the .href, and assign the other filename. There would be more efficient ways, but that should do.
09-08-2021 15:18
09-08-2021 15:18
If I get rid of one listeners, my sprite is even less toggleable. Also, if I wanted to check the filename currently assigned to the .href, and assign the other filename, how would I go about doing so?
09-09-2021 14:10
09-09-2021 14:10
Never mind. I figured out how to make my sprite toggleable. For those curious, the code is below.
index.js:
import * as document from "document";
const sprite = document.getElementById("sprite");
sprite.addEventListener("click", (evt) => {
if (sprite.href === "s1-frame_1.png" || sprite.href === "s1-frame_2.png" || sprite.href === "s1-frame_3.png" || sprite.href === "s1-frame_4.png") {
sprite.href = "s2-frame_1.png";
} else {
sprite.href = "s1-frame_1.png";
}
})
widgets.gui:
<image id="sprite" href="s1-frame_1.png" width="25%" height="20%" x="165" y="182" pointer-events="visible"/>